@cloudscape-design/components 3.0.1383 → 3.0.1384

package/breadcrumb-group/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EACL,4BAA4B,EAC5B,aAAa,EACb,KAAK,EACL,YAAY,GACb,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpE,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;GAEG;AACH,MAAM,yBAAyB,GAAG,WAAW,CAAC;AAE9C,MAAM,0BAA0B,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAsB,EAAE,EAAE;IACpH,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO,EAAE,CAAC;QACZ,CAAC,EACD,YAAY,EAAE,MAAM,mBACL,IAAI,EACnB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,kBAAkB,EAC1B,UAAU,EAAC,MAAM,UAGF,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,OAAO,GACe,EAAE,EAAE;;IAC1B,MAAM,IAAI,GAAG,eAAe,CAAC,kBAAkB,CAAC,CAAC;IAEjD,OAAO,CACL,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC;QAC7D,oBAAC,sBAAsB,IACrB,SAAS,EAAE,MAAA,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,mCAAI,yBAAyB,EAC1E,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,mBAAmB,EAChC,YAAY,EAAE,oBAAoB,EAClC,oBAAoB,EAAE,0BAA0B,EAChD,SAAS,EAAE,IAAI,EACf,4BAA4B,EAAE,QAAQ,CAAC,EAAE;;gBACvC,IAAI,MAAA,QAAQ,CAAC,MAAM,0CAAE,EAAE,EAAE,CAAC;oBACxB,OAAO,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC5B,CAAC;gBACD,IAAI,MAAA,QAAQ,CAAC,MAAM,0CAAE,QAAQ,EAAE,CAAC;oBAC9B,QAAQ,CAAC,MAAM,CAAC,QAAQ,GAAG,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAkB,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvF,CAAC;gBACD,OAAO,QAAQ,CAAC;YAClB,CAAC,GACD;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI;YAC1B,oBAAC,YAAY,IAAC,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,GAAI,CAClF,CACJ,CACN,CAAC;AACJ,CAAC,CAAC;AAYF,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,MAAqB,EAAE,EAAE;IACpE,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,UAAU,6BAA6B,CAAkE,EAC7G,KAAK,GAAG,EAAE,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,kCAAkC,EAClC,GAAG,KAAK,EACwB;IAChC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,iBAAiB,CAAS,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAClF,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,MAAM,CAAgB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,CAAC,IAAyB,EAAE,KAAa,EAAE,IAA0B,EAAE,EAAE;QAC7F,IAAI,IAAI,EAAE,CAAC;YACT,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,OAAO,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAEzF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,MAAM,cAAc,GAAoB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;YAChE,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC1D,MAAM,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC;gBAC5D,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;YACD,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;gBACzD,MAAM,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC;gBAC5D,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC;YACD,cAAc,CAAC,SAAS,CAAC,EAAE;gBACzB,IACE,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC;oBACrD,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EACnD,CAAC;oBACD,OAAO,cAAc,CAAC;gBACxB,CAAC;qBAAM,CAAC;oBACN,OAAO,SAAS,CAAC;gBACnB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,EAAE,SAAS,EAAE,GAAG,yBAAyB,CAAC,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE7E,IAAI,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC9C,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1C,MAAM,WAAW,GAAG,KAAK,KAAK,CAAC,IAAI,KAAK,GAAG,SAAS,CAAC;QAErD,MAAM,sBAAsB,GAAmD;YAC7E,MAAM,EAAE,OAAO;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC,EAAE;gBACxB,KAAK,EAAE,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,EAAE;gBAClD,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE;aACtB;SACF,CAAC;QACF,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,EACzD,GAAG,EAAE,KAAK,KACN,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,6BAA6B,CAAC,sBAAsB,CAAC,CAAC,EACzE,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC;YAEpD,oBAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,KAAK,CAAC,MAAM,EACxB,WAAW,EAAE,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GACnE,CACC,CACN,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvD,4BAAI,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC;QACpG,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,GAAI,CACtF,CACN,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,CAA8B,EAAE,EAAE;QACtD,MAAM,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACxB,OAAO,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,eAAe;IACf,IAAI,eAAe,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;QAChC,MAAM,aAAa,GAAoB,KAAK;aACzC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;aACvB,GAAG,CAAC,CAAC,IAA+B,EAAE,KAAa,EAAE,EAAE,CAAC,CAAC;YACxD,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,6CAA6C;YACzE,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG;SACvB,CAAC,CAAC,CAAC;QAEN,eAAe,GAAG;YAChB,eAAe,CAAC,CAAC,CAAC;YAClB,oBAAC,gBAAgB,IACf,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,SAAS,GAAG,CAAC,EACtB,SAAS,EAAE,eAAe,EAC1B,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAC1F,oBAAoB,EAAE,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAC5F;YACF,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5B,CAAC;IACJ,CAAC;IAED,MAAM,0BAA0B,GAAuD;QACrF,IAAI,EAAE,uBAAuB;QAC7B,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACxB,CAAC;IAEF,OAAO,CACL,gCACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,gBACpD,SAAS,IAAI,SAAS,EAClC,GAAG,EAAE,SAAS,KACV,CAAC,kCAAkC;YACrC,CAAC,CAAC;gBACE,GAAG,6BAA6B,CAAC;oBAC/B,SAAS,EAAE,0BAA0B;iBACtC,CAAC;aACH;YACH,CAAC,CAAC,EAAE,CAAC;QAEN,SAAS,GAAG,CAAC,IAAI,SAAS,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjD,oBAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,CAAC,CAAC,EAAE,CACf,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE;gBAC7C,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAElE,YAAY,EAAE,CAAC,CAAC,EAAE,CAChB,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE;gBAC7C,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAEnE,CACH,CAAC,CAAC,CAAC,CACF,4BAAI,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,IAAG,eAAe,CAAM,CACvE;QACD,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,iBAAe,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,IAChG,qBAAqB,CACnB,CACD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,+BAA+B,GAAG,yBAAyB,CACtE,6BAA6B,EAC7B,uBAAuB,CACxB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport {\n  getLogicalBoundingClientRect,\n  isThemeActive,\n  Theme,\n  useMergeRefs,\n} from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent } from '../internal/events';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { AllItemsDropdown } from './all-items-dropdown';\nimport {\n  GeneratedAnalyticsMetadataBreadcrumbGroupClick,\n  GeneratedAnalyticsMetadataBreadcrumbGroupComponent,\n} from './analytics-metadata/interfaces';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { InternalBreadcrumbGroupProps } from './internal-interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupSkeleton } from './skeleton';\nimport { getEventDetail, getItemsDisplayProperties } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getEllipsisDropdownTrigger = ({ ariaLabel, triggerRef, testUtilsClass, isOpen, onClick }: CustomTriggerProps) => {\n  return (\n    <InternalButton\n      ref={triggerRef}\n      className={testUtilsClass}\n      onClick={event => {\n        event.preventDefault();\n        onClick();\n      }}\n      ariaExpanded={isOpen}\n      aria-haspopup={true}\n      ariaLabel={ariaLabel}\n      variant=\"breadcrumb-group\"\n      formAction=\"none\"\n    >\n      ...\n    </InternalButton>\n  );\n};\n\nconst EllipsisDropdown = ({\n  ariaLabel,\n  dropdownItems,\n  onDropdownItemClick,\n  onDropdownItemFollow,\n  visible,\n}: EllipsisDropdownProps) => {\n  const i18n = useInternalI18n('breadcrumb-group');\n\n  return (\n    <li className={clsx(styles.ellipsis, visible && styles.visible)}>\n      <InternalButtonDropdown\n        ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n        items={dropdownItems}\n        onItemClick={onDropdownItemClick}\n        onItemFollow={onDropdownItemFollow}\n        customTriggerBuilder={getEllipsisDropdownTrigger}\n        linkStyle={true}\n        analyticsMetadataTransformer={metadata => {\n          if (metadata.detail?.id) {\n            delete metadata.detail.id;\n          }\n          if (metadata.detail?.position) {\n            metadata.detail.position = `${parseInt(metadata.detail.position as string, 10) + 1}`;\n          }\n          return metadata;\n        }}\n      />\n      <span className={styles.icon}>\n        <InternalIcon name={isThemeActive(Theme.OneTheme) ? 'slash-divider' : 'angle-right'} />\n      </span>\n    </li>\n  );\n};\n\ninterface ItemsRefsType {\n  ghost: Record<string, HTMLLIElement>;\n  real: Record<string, HTMLLIElement>;\n}\n\ninterface ItemsWidthsType {\n  ghost: Array<number>;\n  real: Array<number>;\n}\n\nconst areArrayEqual = (first: Array<number>, second: Array<number>) => {\n  if (first.length !== second.length) {\n    return false;\n  }\n  return first.every((item, index) => item === second[index]);\n};\n\nexport function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n  items = [],\n  ariaLabel,\n  expandAriaLabel,\n  onClick,\n  onFollow,\n  __internalRootRef,\n  __injectAnalyticsComponentMetadata,\n  ...props\n}: InternalBreadcrumbGroupProps<T>) {\n  for (const item of items) {\n    checkSafeUrl('BreadcrumbGroup', item.href);\n  }\n  const baseProps = getBaseProps(props);\n  const [navWidth, navRef] = useContainerQuery<number>(rect => rect.borderBoxWidth);\n  const mergedRef = useMergeRefs(navRef, __internalRootRef);\n\n  const itemsRefs = useRef<ItemsRefsType>({ ghost: {}, real: {} });\n  const setBreadcrumb = (type: keyof ItemsRefsType, index: string, node: null | HTMLLIElement) => {\n    if (node) {\n      itemsRefs.current[type][index] = node;\n    } else {\n      delete itemsRefs.current[type][index];\n    }\n  };\n\n  const [itemsWidths, setItemsWidths] = useState<ItemsWidthsType>({ ghost: [], real: [] });\n\n  useEffect(() => {\n    if (itemsRefs.current) {\n      const newItemsWidths: ItemsWidthsType = { ghost: [], real: [] };\n      for (const node of Object.values(itemsRefs.current.ghost)) {\n        const width = getLogicalBoundingClientRect(node).inlineSize;\n        newItemsWidths.ghost.push(width);\n      }\n      for (const node of Object.values(itemsRefs.current.real)) {\n        const width = getLogicalBoundingClientRect(node).inlineSize;\n        newItemsWidths.real.push(width);\n      }\n      setItemsWidths(oldWidths => {\n        if (\n          !areArrayEqual(newItemsWidths.ghost, oldWidths.ghost) ||\n          !areArrayEqual(newItemsWidths.real, oldWidths.real)\n        ) {\n          return newItemsWidths;\n        } else {\n          return oldWidths;\n        }\n      });\n    }\n  }, [items, navWidth]);\n\n  const { collapsed } = getItemsDisplayProperties(itemsWidths.ghost, navWidth);\n\n  let breadcrumbItems = items.map((item, index) => {\n    const isLast = index === items.length - 1;\n    const isDisplayed = index === 0 || index > collapsed;\n\n    const clickAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupClick = {\n      action: 'click',\n      detail: {\n        position: `${index + 1}`,\n        label: `.${analyticsSelectors['breadcrumb-item']}`,\n        href: item.href || '',\n      },\n    };\n    return (\n      <li\n        className={clsx(styles.item, !isDisplayed && styles.hide)}\n        key={index}\n        {...(isLast ? {} : getAnalyticsMetadataAttribute(clickAnalyticsMetadata))}\n        ref={node => setBreadcrumb('real', `${index}`, node)}\n      >\n        <BreadcrumbItem\n          item={item}\n          onClick={onClick}\n          onFollow={onFollow}\n          itemIndex={index}\n          totalCount={items.length}\n          isTruncated={itemsWidths.ghost[index] - itemsWidths.real[index] > 0}\n        />\n      </li>\n    );\n  });\n\n  const hiddenBreadcrumbItems = items.map((item, index) => (\n    <li className={styles['ghost-item']} key={index} ref={node => setBreadcrumb('ghost', `${index}`, node)}>\n      <BreadcrumbItem item={item} itemIndex={index} totalCount={items.length} isGhost={true} />\n    </li>\n  ));\n\n  const getEventItem = (e: CustomEvent<{ id: string }>) => {\n    const { id } = e.detail;\n    return items[parseInt(id)];\n  };\n\n  // Add ellipsis\n  if (breadcrumbItems.length >= 2) {\n    const dropdownItems: Array<LinkItem> = items\n      .slice(1, 1 + collapsed)\n      .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n        id: (index + 1).toString(), // the first item doesn't get inside dropdown\n        text: item.text,\n        href: item.href || '#',\n      }));\n\n    breadcrumbItems = [\n      breadcrumbItems[0],\n      <EllipsisDropdown\n        key={'ellipsis'}\n        visible={collapsed > 0}\n        ariaLabel={expandAriaLabel}\n        dropdownItems={dropdownItems}\n        onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n        onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n      />,\n      ...breadcrumbItems.slice(1),\n    ];\n  }\n\n  const componentAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupComponent = {\n    name: 'awsui.BreadcrumbGroup',\n    label: { root: 'self' },\n  };\n\n  return (\n    <nav\n      {...baseProps}\n      className={clsx(styles['breadcrumb-group'], baseProps.className)}\n      aria-label={ariaLabel || undefined}\n      ref={mergedRef}\n      {...(__injectAnalyticsComponentMetadata\n        ? {\n            ...getAnalyticsMetadataAttribute({\n              component: componentAnalyticsMetadata,\n            }),\n          }\n        : {})}\n    >\n      {collapsed > 0 && collapsed === items.length - 1 ? (\n        <AllItemsDropdown\n          items={items}\n          onItemClick={e =>\n            e.detail.id !== (items.length - 1).toString() &&\n            fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)\n          }\n          onItemFollow={e =>\n            e.detail.id !== (items.length - 1).toString() &&\n            fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)\n          }\n        />\n      ) : (\n        <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n      )}\n      <ol className={clsx(styles['breadcrumb-group-list'], styles.ghost)} aria-hidden={true} tabIndex={-1}>\n        {hiddenBreadcrumbItems}\n      </ol>\n    </nav>\n  );\n}\n\nexport const createWidgetizedBreadcrumbGroup = createWidgetizedComponent(\n  BreadcrumbGroupImplementation,\n  BreadcrumbGroupSkeleton\n);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport {\n  getLogicalBoundingClientRect,\n  isThemeActive,\n  Theme,\n  useMergeRefs,\n} from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { BreadcrumbsSlotContext } from '../app-layout/visual-refresh-toolbar/contexts';\nimport { InternalButton } from '../button/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent } from '../internal/events';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { AllItemsDropdown } from './all-items-dropdown';\nimport {\n  GeneratedAnalyticsMetadataBreadcrumbGroupClick,\n  GeneratedAnalyticsMetadataBreadcrumbGroupComponent,\n} from './analytics-metadata/interfaces';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { InternalBreadcrumbGroupProps } from './internal-interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupSkeleton } from './skeleton';\nimport { getEventDetail, getItemsDisplayProperties } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getEllipsisDropdownTrigger = ({ ariaLabel, triggerRef, testUtilsClass, isOpen, onClick }: CustomTriggerProps) => {\n  return (\n    <InternalButton\n      ref={triggerRef}\n      className={testUtilsClass}\n      onClick={event => {\n        event.preventDefault();\n        onClick();\n      }}\n      ariaExpanded={isOpen}\n      aria-haspopup={true}\n      ariaLabel={ariaLabel}\n      variant=\"breadcrumb-group\"\n      formAction=\"none\"\n    >\n      ...\n    </InternalButton>\n  );\n};\n\nconst EllipsisDropdown = ({\n  ariaLabel,\n  dropdownItems,\n  onDropdownItemClick,\n  onDropdownItemFollow,\n  visible,\n}: EllipsisDropdownProps) => {\n  const i18n = useInternalI18n('breadcrumb-group');\n\n  return (\n    <li className={clsx(styles.ellipsis, visible && styles.visible)}>\n      <InternalButtonDropdown\n        ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n        items={dropdownItems}\n        onItemClick={onDropdownItemClick}\n        onItemFollow={onDropdownItemFollow}\n        customTriggerBuilder={getEllipsisDropdownTrigger}\n        linkStyle={true}\n        analyticsMetadataTransformer={metadata => {\n          if (metadata.detail?.id) {\n            delete metadata.detail.id;\n          }\n          if (metadata.detail?.position) {\n            metadata.detail.position = `${parseInt(metadata.detail.position as string, 10) + 1}`;\n          }\n          return metadata;\n        }}\n      />\n      <span className={styles.icon}>\n        <InternalIcon name={isThemeActive(Theme.OneTheme) ? 'slash-divider' : 'angle-right'} />\n      </span>\n    </li>\n  );\n};\n\ninterface ItemsRefsType {\n  ghost: Record<string, HTMLLIElement>;\n  real: Record<string, HTMLLIElement>;\n}\n\ninterface ItemsWidthsType {\n  ghost: Array<number>;\n  real: Array<number>;\n}\n\nconst areArrayEqual = (first: Array<number>, second: Array<number>) => {\n  if (first.length !== second.length) {\n    return false;\n  }\n  return first.every((item, index) => item === second[index]);\n};\n\nexport function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n  items = [],\n  ariaLabel,\n  expandAriaLabel,\n  onClick,\n  onFollow,\n  __internalRootRef,\n  __injectAnalyticsComponentMetadata,\n  ...props\n}: InternalBreadcrumbGroupProps<T>) {\n  const { reportOwnBreadcrumbsProps } = useContext(BreadcrumbsSlotContext) ?? {};\n  const reportedProps = {\n    ...props,\n    items,\n    ariaLabel,\n    expandAriaLabel,\n    onClick,\n    onFollow,\n  } as BreadcrumbGroupProps;\n  const breadcrumbsReportingRef = useRef<ReturnType<NonNullable<typeof reportOwnBreadcrumbsProps>> | null>(null);\n\n  useLayoutEffect(() => {\n    if (!reportOwnBreadcrumbsProps) {\n      return;\n    }\n    const reporting = reportOwnBreadcrumbsProps(reportedProps);\n    breadcrumbsReportingRef.current = reporting;\n    return () => {\n      breadcrumbsReportingRef.current = null;\n      reporting.cleanup();\n    };\n    // Prop updates are handled by the following layout effect.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [reportOwnBreadcrumbsProps]);\n\n  useLayoutEffect(() => {\n    breadcrumbsReportingRef.current?.update(reportedProps);\n  });\n\n  for (const item of items) {\n    checkSafeUrl('BreadcrumbGroup', item.href);\n  }\n  const baseProps = getBaseProps(props);\n  const [navWidth, navRef] = useContainerQuery<number>(rect => rect.borderBoxWidth);\n  const mergedRef = useMergeRefs(navRef, __internalRootRef);\n\n  const itemsRefs = useRef<ItemsRefsType>({ ghost: {}, real: {} });\n  const setBreadcrumb = (type: keyof ItemsRefsType, index: string, node: null | HTMLLIElement) => {\n    if (node) {\n      itemsRefs.current[type][index] = node;\n    } else {\n      delete itemsRefs.current[type][index];\n    }\n  };\n\n  const [itemsWidths, setItemsWidths] = useState<ItemsWidthsType>({ ghost: [], real: [] });\n\n  useEffect(() => {\n    if (itemsRefs.current) {\n      const newItemsWidths: ItemsWidthsType = { ghost: [], real: [] };\n      for (const node of Object.values(itemsRefs.current.ghost)) {\n        const width = getLogicalBoundingClientRect(node).inlineSize;\n        newItemsWidths.ghost.push(width);\n      }\n      for (const node of Object.values(itemsRefs.current.real)) {\n        const width = getLogicalBoundingClientRect(node).inlineSize;\n        newItemsWidths.real.push(width);\n      }\n      setItemsWidths(oldWidths => {\n        if (\n          !areArrayEqual(newItemsWidths.ghost, oldWidths.ghost) ||\n          !areArrayEqual(newItemsWidths.real, oldWidths.real)\n        ) {\n          return newItemsWidths;\n        } else {\n          return oldWidths;\n        }\n      });\n    }\n  }, [items, navWidth]);\n\n  const { collapsed } = getItemsDisplayProperties(itemsWidths.ghost, navWidth);\n\n  let breadcrumbItems = items.map((item, index) => {\n    const isLast = index === items.length - 1;\n    const isDisplayed = index === 0 || index > collapsed;\n\n    const clickAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupClick = {\n      action: 'click',\n      detail: {\n        position: `${index + 1}`,\n        label: `.${analyticsSelectors['breadcrumb-item']}`,\n        href: item.href || '',\n      },\n    };\n    return (\n      <li\n        className={clsx(styles.item, !isDisplayed && styles.hide)}\n        key={index}\n        {...(isLast ? {} : getAnalyticsMetadataAttribute(clickAnalyticsMetadata))}\n        ref={node => setBreadcrumb('real', `${index}`, node)}\n      >\n        <BreadcrumbItem\n          item={item}\n          onClick={onClick}\n          onFollow={onFollow}\n          itemIndex={index}\n          totalCount={items.length}\n          isTruncated={itemsWidths.ghost[index] - itemsWidths.real[index] > 0}\n        />\n      </li>\n    );\n  });\n\n  const hiddenBreadcrumbItems = items.map((item, index) => (\n    <li className={styles['ghost-item']} key={index} ref={node => setBreadcrumb('ghost', `${index}`, node)}>\n      <BreadcrumbItem item={item} itemIndex={index} totalCount={items.length} isGhost={true} />\n    </li>\n  ));\n\n  const getEventItem = (e: CustomEvent<{ id: string }>) => {\n    const { id } = e.detail;\n    return items[parseInt(id)];\n  };\n\n  // Add ellipsis\n  if (breadcrumbItems.length >= 2) {\n    const dropdownItems: Array<LinkItem> = items\n      .slice(1, 1 + collapsed)\n      .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n        id: (index + 1).toString(), // the first item doesn't get inside dropdown\n        text: item.text,\n        href: item.href || '#',\n      }));\n\n    breadcrumbItems = [\n      breadcrumbItems[0],\n      <EllipsisDropdown\n        key={'ellipsis'}\n        visible={collapsed > 0}\n        ariaLabel={expandAriaLabel}\n        dropdownItems={dropdownItems}\n        onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n        onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n      />,\n      ...breadcrumbItems.slice(1),\n    ];\n  }\n\n  const componentAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupComponent = {\n    name: 'awsui.BreadcrumbGroup',\n    label: { root: 'self' },\n  };\n\n  return (\n    <nav\n      {...baseProps}\n      className={clsx(styles['breadcrumb-group'], baseProps.className)}\n      aria-label={ariaLabel || undefined}\n      ref={mergedRef}\n      {...(__injectAnalyticsComponentMetadata\n        ? {\n            ...getAnalyticsMetadataAttribute({\n              component: componentAnalyticsMetadata,\n            }),\n          }\n        : {})}\n    >\n      {collapsed > 0 && collapsed === items.length - 1 ? (\n        <AllItemsDropdown\n          items={items}\n          onItemClick={e =>\n            e.detail.id !== (items.length - 1).toString() &&\n            fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)\n          }\n          onItemFollow={e =>\n            e.detail.id !== (items.length - 1).toString() &&\n            fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)\n          }\n        />\n      ) : (\n        <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n      )}\n      <ol className={clsx(styles['breadcrumb-group-list'], styles.ghost)} aria-hidden={true} tabIndex={-1}>\n        {hiddenBreadcrumbItems}\n      </ol>\n    </nav>\n  );\n}\n\nexport const createWidgetizedBreadcrumbGroup = createWidgetizedComponent(\n  BreadcrumbGroupImplementation,\n  BreadcrumbGroupSkeleton\n);\n"]}

package/container/index.d.ts

@@ -1,9 +1,5 @@
+import React from 'react';
 import { ContainerProps } from './interfaces';
 export { ContainerProps };
-export default function Container({
-  variant,
-  disableHeaderPaddings,
-  disableContentPaddings,
-  fitHeight,
-  ...props
-}: ContainerProps): JSX.Element;
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<ContainerProps.Ref>>;
+export default Container;

package/container/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,cAAc,eAyChB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAqDd,CAAC;AAGF,eAAe,SAAS,CAAC"}

package/container/index.js

@@ -9,7 +9,7 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { getExternalProps } from '../internal/utils/external-props';
 import { InternalContainerAsSubstep } from './internal';
-export default function Container({ variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, fitHeight = false, ...props }) {
+const Container = React.forwardRef(({ variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, fitHeight = false, ...props }, ref) => {
     const analyticsMetadata = getAnalyticsMetadataProps(props);
     const baseComponentProps = useBaseComponent('Container', {
         props: {
@@ -28,7 +28,8 @@ export default function Container({ variant = 'default', disableHeaderPaddings =
         label: { root: 'self' },
     };
     return (React.createElement(AnalyticsFunnelSubStep, { subStepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, subStepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext },
-        React.createElement(InternalContainerAsSubstep, { variant: variant, disableContentPaddings: disableContentPaddings, disableHeaderPaddings: disableHeaderPaddings, fitHeight: fitHeight, ...props, ...externalProps, ...baseComponentProps, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }) })));
-}
+        React.createElement(InternalContainerAsSubstep, { ref: ref, variant: variant, disableContentPaddings: disableContentPaddings, disableHeaderPaddings: disableHeaderPaddings, fitHeight: fitHeight, ...props, ...externalProps, ...baseComponentProps, ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }) })));
+});
 applyDisplayName(Container, 'Container');
+export default Container;
 //# sourceMappingURL=index.js.map

package/container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/container/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mDAAmD,CAAC;AAC3F,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvG,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAGpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAIxD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,OAAO,GAAG,SAAS,EACnB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,EAC9B,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACO;IACf,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,KAAuC,CAAC,CAAC;IAC7F,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,WAAW,EACX;QACE,KAAK,EAAE;YACL,sBAAsB;YACtB,qBAAqB;YACrB,SAAS;YACT,OAAO;SACR;QACD,QAAQ,EAAE;YACR,qBAAqB,EAAE,OAAO,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,kBAAkB,CAAC;SACtE;KACF,EACD,iBAAiB,CAClB,CAAC;IACF,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,0BAA0B,GAAiD;QAC/E,IAAI,EAAE,iBAAiB;QACvB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACxB,CAAC;IAEF,OAAO,CACL,oBAAC,sBAAsB,IACrB,iBAAiB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,kBAAkB,EACxD,mBAAmB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY;QAEpD,oBAAC,0BAA0B,IACzB,OAAO,EAAE,OAAO,EAChB,sBAAsB,EAAE,sBAAsB,EAC9C,qBAAqB,EAAE,qBAAqB,EAC5C,SAAS,EAAE,SAAS,KAChB,KAAK,KACL,aAAa,KACb,kBAAkB,KAClB,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,GAC5E,CACqB,CAC1B,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { GeneratedAnalyticsMetadataContainerComponent } from './analytics-metadata/interfaces';\nimport { ContainerProps } from './interfaces';\nimport { InternalContainerAsSubstep } from './internal';\n\nexport { ContainerProps };\n\nexport default function Container({\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  fitHeight = false,\n  ...props\n}: ContainerProps) {\n  const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n  const baseComponentProps = useBaseComponent(\n    'Container',\n    {\n      props: {\n        disableContentPaddings,\n        disableHeaderPaddings,\n        fitHeight,\n        variant,\n      },\n      metadata: {\n        hasInstanceIdentifier: Boolean(analyticsMetadata?.instanceIdentifier),\n      },\n    },\n    analyticsMetadata\n  );\n  const externalProps = getExternalProps(props);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataContainerComponent = {\n    name: 'awsui.Container',\n    label: { root: 'self' },\n  };\n\n  return (\n    <AnalyticsFunnelSubStep\n      subStepIdentifier={analyticsMetadata?.instanceIdentifier}\n      subStepErrorContext={analyticsMetadata?.errorContext}\n    >\n      <InternalContainerAsSubstep\n        variant={variant}\n        disableContentPaddings={disableContentPaddings}\n        disableHeaderPaddings={disableHeaderPaddings}\n        fitHeight={fitHeight}\n        {...props}\n        {...externalProps}\n        {...baseComponentProps}\n        {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n      />\n    </AnalyticsFunnelSubStep>\n  );\n}\n\napplyDisplayName(Container, 'Container');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/container/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mDAAmD,CAAC;AAC3F,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvG,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAGpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAIxD,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,CACE,EACE,OAAO,GAAG,SAAS,EACnB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,EAC9B,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACO,EACjB,GAAkC,EAClC,EAAE;IACF,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,KAAuC,CAAC,CAAC;IAC7F,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,WAAW,EACX;QACE,KAAK,EAAE;YACL,sBAAsB;YACtB,qBAAqB;YACrB,SAAS;YACT,OAAO;SACR;QACD,QAAQ,EAAE;YACR,qBAAqB,EAAE,OAAO,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,kBAAkB,CAAC;SACtE;KACF,EACD,iBAAiB,CAClB,CAAC;IACF,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,0BAA0B,GAAiD;QAC/E,IAAI,EAAE,iBAAiB;QACvB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACxB,CAAC;IAEF,OAAO,CACL,oBAAC,sBAAsB,IACrB,iBAAiB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,kBAAkB,EACxD,mBAAmB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY;QAEpD,oBAAC,0BAA0B,IACzB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,sBAAsB,EAAE,sBAAsB,EAC9C,qBAAqB,EAAE,qBAAqB,EAC5C,SAAS,EAAE,SAAS,KAChB,KAAK,KACL,aAAa,KACb,kBAAkB,KAClB,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,GAC5E,CACqB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AACzC,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { GeneratedAnalyticsMetadataContainerComponent } from './analytics-metadata/interfaces';\nimport { ContainerProps } from './interfaces';\nimport { InternalContainerAsSubstep } from './internal';\n\nexport { ContainerProps };\n\nconst Container = React.forwardRef(\n  (\n    {\n      variant = 'default',\n      disableHeaderPaddings = false,\n      disableContentPaddings = false,\n      fitHeight = false,\n      ...props\n    }: ContainerProps,\n    ref: React.Ref<ContainerProps.Ref>\n  ) => {\n    const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n    const baseComponentProps = useBaseComponent(\n      'Container',\n      {\n        props: {\n          disableContentPaddings,\n          disableHeaderPaddings,\n          fitHeight,\n          variant,\n        },\n        metadata: {\n          hasInstanceIdentifier: Boolean(analyticsMetadata?.instanceIdentifier),\n        },\n      },\n      analyticsMetadata\n    );\n    const externalProps = getExternalProps(props);\n\n    const analyticsComponentMetadata: GeneratedAnalyticsMetadataContainerComponent = {\n      name: 'awsui.Container',\n      label: { root: 'self' },\n    };\n\n    return (\n      <AnalyticsFunnelSubStep\n        subStepIdentifier={analyticsMetadata?.instanceIdentifier}\n        subStepErrorContext={analyticsMetadata?.errorContext}\n      >\n        <InternalContainerAsSubstep\n          ref={ref}\n          variant={variant}\n          disableContentPaddings={disableContentPaddings}\n          disableHeaderPaddings={disableHeaderPaddings}\n          fitHeight={fitHeight}\n          {...props}\n          {...externalProps}\n          {...baseComponentProps}\n          {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n        />\n      </AnalyticsFunnelSubStep>\n    );\n  }\n);\n\napplyDisplayName(Container, 'Container');\nexport default Container;\n"]}

package/container/interfaces.d.ts

@@ -75,6 +75,13 @@ export interface ContainerProps extends BaseComponentProps {
   style?: ContainerProps.Style;
 }
 export declare namespace ContainerProps {
+  interface Ref {
+    /**
+     * Sets focus on the container and scrolls it into view. Use this to move the user's focus to a
+     * container programmatically, for example in "jump to item" or deep-linking patterns.
+     */
+    focus(): void;
+  }
   interface AnalyticsMetadata {
     instanceIdentifier?: string;
   }

package/container/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/container/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC;IAErD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;CAC9B;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;IACD,UAAiB,KAAK;QACpB;;WAEG;QACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QAEzB;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;QAE1B;;;;;;WAMG;QACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAExB;;;;;;WAMG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAC1B;IAED,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,MAAM,CAAC,EAAE;YACP,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,MAAM,CAAC,EAAE;YACP,IAAI,EAAE;gBACJ,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,aAAa,CAAC,EAAE,MAAM,CAAC;aACxB,CAAC;YACF,OAAO,EAAE;gBACP,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;KACH;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/container/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC;IAErD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;CAC9B;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,GAAG;QAClB;;;WAGG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;IACD,UAAiB,KAAK;QACpB;;WAEG;QACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QAEzB;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;QAE1B;;;;;;WAMG;QACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAExB;;;;;;WAMG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAC1B;IAED,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,MAAM,CAAC,EAAE;YACP,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,MAAM,CAAC,EAAE;YACP,IAAI,EAAE;gBACJ,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,aAAa,CAAC,EAAE,MAAM,CAAC;aACxB,CAAC;YACF,OAAO,EAAE;gBACP,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;KACH;CACF"}

package/container/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/container/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../types/base-component';\n\nexport interface ContainerProps extends BaseComponentProps {\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * @analytics\n   */\n  analyticsMetadata?: ContainerProps.AnalyticsMetadata;\n\n  /**\n   * Heading element of the container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Determines whether the container header has padding. If `true`, removes the default padding from the header.\n   */\n  disableHeaderPaddings?: boolean;\n\n  /**\n   *\n   * Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.\n   * You can define different positions and sizes for the media element within the container.\n   *\n   * * `content` - Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n   *\n   * * `position` - Defines the media slot's position within the container. Defaults to `top`.\n   *\n   * * `width` - Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.\n   * Note: This value is considered only when `position` is set to `side`.\n   * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n   *\n   * * `height` - Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.   * Note: This value is only considered if `position` is set to `top`.\n   * If no height is provided, the media slot will be displayed at its full height.\n   *\n   */\n  media?: ContainerProps.Media;\n\n  /**\n   * Main content of the container.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Determines whether the container content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Enabling this property will make the container to fit into available height. If content is too short, the container\n   * will stretch, if too long, the container will shrink and show vertical scrollbar.\n   *\n   * Use this property to align heights of multiple containers displayed in a single row. It is recommended to stretch\n   * all containers to the height of the longest one, to avoid extra vertical scroll areas.\n   */\n  fitHeight?: boolean;\n\n  /**\n   * Footer of the container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Determines whether the container footer has padding. If `true`, removes the default padding from the footer.\n   */\n  disableFooterPaddings?: boolean;\n\n  /**\n   * Specify a container variant with one of the following:\n   * * `default` - Use this variant in standalone context.\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: 'default' | 'stacked';\n\n  /**\n   * An object containing CSS properties to customize the container's visual appearance.\n   * Refer to the [style](/components/container/?tabId=style) tab for more details.\n   * @awsuiSystem core\n   */\n  style?: ContainerProps.Style;\n}\n\nexport namespace ContainerProps {\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n  }\n  export interface Media {\n    /**\n     * Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n     */\n    content: React.ReactNode;\n\n    /**\n     * Defines the media slot's position within the container. Defaults to `top`.\n     */\n    position?: 'top' | 'side';\n\n    /**\n     * Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is considered only when `position` is set to `side`.\n     * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n     */\n    width?: string | number;\n\n    /**\n     * Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is only considered if `position` is set to `top`.\n     * If no height is provided, the media slot will be displayed at its full height.\n     */\n    height?: string | number;\n  }\n\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      boxShadow?: string;\n      color?: string;\n    };\n    content?: {\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n    header?: {\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n    footer?: {\n      root: {\n        paddingBlock?: string;\n        paddingInline?: string;\n      };\n      divider: {\n        borderColor?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/container/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../types/base-component';\n\nexport interface ContainerProps extends BaseComponentProps {\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * @analytics\n   */\n  analyticsMetadata?: ContainerProps.AnalyticsMetadata;\n\n  /**\n   * Heading element of the container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Determines whether the container header has padding. If `true`, removes the default padding from the header.\n   */\n  disableHeaderPaddings?: boolean;\n\n  /**\n   *\n   * Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.\n   * You can define different positions and sizes for the media element within the container.\n   *\n   * * `content` - Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n   *\n   * * `position` - Defines the media slot's position within the container. Defaults to `top`.\n   *\n   * * `width` - Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.\n   * Note: This value is considered only when `position` is set to `side`.\n   * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n   *\n   * * `height` - Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.   * Note: This value is only considered if `position` is set to `top`.\n   * If no height is provided, the media slot will be displayed at its full height.\n   *\n   */\n  media?: ContainerProps.Media;\n\n  /**\n   * Main content of the container.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Determines whether the container content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Enabling this property will make the container to fit into available height. If content is too short, the container\n   * will stretch, if too long, the container will shrink and show vertical scrollbar.\n   *\n   * Use this property to align heights of multiple containers displayed in a single row. It is recommended to stretch\n   * all containers to the height of the longest one, to avoid extra vertical scroll areas.\n   */\n  fitHeight?: boolean;\n\n  /**\n   * Footer of the container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Determines whether the container footer has padding. If `true`, removes the default padding from the footer.\n   */\n  disableFooterPaddings?: boolean;\n\n  /**\n   * Specify a container variant with one of the following:\n   * * `default` - Use this variant in standalone context.\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: 'default' | 'stacked';\n\n  /**\n   * An object containing CSS properties to customize the container's visual appearance.\n   * Refer to the [style](/components/container/?tabId=style) tab for more details.\n   * @awsuiSystem core\n   */\n  style?: ContainerProps.Style;\n}\n\nexport namespace ContainerProps {\n  export interface Ref {\n    /**\n     * Sets focus on the container and scrolls it into view. Use this to move the user's focus to a\n     * container programmatically, for example in \"jump to item\" or deep-linking patterns.\n     */\n    focus(): void;\n  }\n\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n  }\n  export interface Media {\n    /**\n     * Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n     */\n    content: React.ReactNode;\n\n    /**\n     * Defines the media slot's position within the container. Defaults to `top`.\n     */\n    position?: 'top' | 'side';\n\n    /**\n     * Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is considered only when `position` is set to `side`.\n     * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n     */\n    width?: string | number;\n\n    /**\n     * Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is only considered if `position` is set to `top`.\n     * If no height is provided, the media slot will be displayed at its full height.\n     */\n    height?: string | number;\n  }\n\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      boxShadow?: string;\n      color?: string;\n    };\n    content?: {\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n    header?: {\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n    footer?: {\n      root: {\n        paddingBlock?: string;\n        paddingInline?: string;\n      };\n      divider: {\n        borderColor?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n"]}

package/container/internal.d.ts

@@ -27,29 +27,6 @@ export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>,
    */
   __contentKey?: string;
 }
-export declare function InternalContainerAsSubstep(props: InternalContainerProps): JSX.Element;
-export default function InternalContainer({
-  header,
-  footer,
-  children,
-  variant,
-  disableHeaderPaddings,
-  disableContentPaddings,
-  disableFooterPaddings,
-  fitHeight,
-  media,
-  style,
-  __stickyOffset,
-  __mobileStickyOffset,
-  __stickyHeader,
-  __internalRootRef,
-  __disableFooterDivider,
-  __hiddenContent,
-  __headerRef,
-  __fullPage,
-  __disableStickyMobile,
-  __funnelSubStepProps,
-  __subStepRef,
-  __contentKey,
-  ...restProps
-}: InternalContainerProps): JSX.Element;
+export declare const InternalContainerAsSubstep: React.ForwardRefExoticComponent<InternalContainerProps & React.RefAttributes<ContainerProps.Ref>>;
+declare const InternalContainer: React.ForwardRefExoticComponent<InternalContainerProps & React.RefAttributes<ContainerProps.Ref>>;
+export default InternalContainer;

package/container/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAQ9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;IAEjE;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,qBAA6B,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAiB,EACjB,sBAA8B,EAC9B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eAwIxB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAQrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAQ9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;IAEjE;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,0BAA0B,mGActC,CAAC;AAEF,QAAA,MAAM,iBAAiB,mGAkMrB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/container/internal.js

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React, { useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
@@ -12,25 +12,53 @@ import { ContainerHeaderContextProvider } from '../internal/context/container-he
 import { useModalContext } from '../internal/context/modal-context';
 import { useMobile } from '../internal/hooks/use-mobile';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
 import { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';
 import { StickyHeaderContext, useStickyHeader } from './use-sticky-header';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 import testStyles from './test-classes/styles.css.js';
-export function InternalContainerAsSubstep(props) {
+export const InternalContainerAsSubstep = React.forwardRef((props, ref) => {
     const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
     const modalContext = useModalContext();
-    return (React.createElement(InternalContainer, { ...props, __subStepRef: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? { current: null } : subStepRef, __funnelSubStepProps: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? {} : funnelSubStepProps }));
-}
-export default function InternalContainer({ header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, disableFooterPaddings = false, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef, __disableFooterDivider = false, __hiddenContent = false, __headerRef, __fullPage = false, __disableStickyMobile = true, __funnelSubStepProps, __subStepRef, __contentKey, ...restProps }) {
+    return (React.createElement(InternalContainer, { ...props, ref: ref, __subStepRef: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? { current: null } : subStepRef, __funnelSubStepProps: (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isInModal) ? {} : funnelSubStepProps }));
+});
+const InternalContainer = React.forwardRef(function InternalContainer({ header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, disableFooterPaddings = false, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef, __disableFooterDivider = false, __hiddenContent = false, __headerRef, __fullPage = false, __disableStickyMobile = true, __funnelSubStepProps, __subStepRef, __contentKey, ...restProps }, ref) {
     var _a;
     const isMobile = useMobile();
     const isRefresh = useVisualRefresh();
     const baseProps = getBaseProps(restProps);
     const rootRef = useRef(null);
     const headerRef = useRef(null);
+    const [showFocusRing, setShowFocusRing] = useState(false);
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            if (rootRef.current) {
+                rootRef.current.tabIndex = -1;
+                rootRef.current.setAttribute('role', 'group');
+                if (header) {
+                    rootRef.current.setAttribute('aria-labelledby', headerId);
+                }
+                setShowFocusRing(true);
+                // focus()'s implicit scroll is a no-op when the container is already focused (repeated jump).
+                rootRef.current.focus({ preventScroll: true });
+                scrollElementIntoView(rootRef.current);
+            }
+        },
+    }));
+    const onRootBlur = (event) => {
+        const funnelOnBlur = __funnelSubStepProps === null || __funnelSubStepProps === void 0 ? void 0 : __funnelSubStepProps.onBlur;
+        funnelOnBlur === null || funnelOnBlur === void 0 ? void 0 : funnelOnBlur(event);
+        if (event.target === rootRef.current) {
+            rootRef.current.removeAttribute('tabindex');
+            rootRef.current.removeAttribute('role');
+            rootRef.current.removeAttribute('aria-labelledby');
+            setShowFocusRing(false);
+        }
+    };
     const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableStickyMobile, __fullPage && isRefresh && !isMobile);
     const contentId = useUniqueId();
+    const headerId = useUniqueId('container-header-');
     const hasDynamicHeight = isRefresh && variant === 'full-page';
     const mergedRef = useMergeRefs(rootRef, __internalRootRef);
     const headerMergedRef = useMergeRefs(headerRef, __headerRef);
@@ -39,7 +67,7 @@ export default function InternalContainer({ header, footer, children, variant =
     const shouldHaveStickyStyles = isSticky && !isMobile;
     const hasMedia = !!(media === null || media === void 0 ? void 0 : media.content);
     const mediaPosition = (_a = media === null || media === void 0 ? void 0 : media.position) !== null && _a !== void 0 ? _a : 'top';
-    return (React.createElement("div", { ...baseProps, ...__funnelSubStepProps, className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']], isRefresh && styles.refresh), ref: mergedRef, ...getAnalyticsLabelAttribute(`.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`), style: getRootStyles(style) },
+    return (React.createElement("div", { ...baseProps, ...__funnelSubStepProps, className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']], showFocusRing && styles['focus-ring'], isRefresh && styles.refresh), ref: mergedRef, onBlur: onRootBlur, ...getAnalyticsLabelAttribute(`.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`), style: getRootStyles(style) },
         hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top'
                 ? { ...getMediaStyles(mediaPosition, style), height: (media === null || media === void 0 ? void 0 : media.height) || '' }
                 : { ...getMediaStyles(mediaPosition, style), width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
@@ -47,7 +75,7 @@ export default function InternalContainer({ header, footer, children, variant =
             React.createElement(BuiltInErrorBoundary, { wrapper: content => React.createElement(InternalBox, { padding: "m" }, content) },
                 header && (React.createElement(ContainerHeaderContextProvider, null,
                     React.createElement(StickyHeaderContext.Provider, { value: { isStuck, isStuckAtBottom } },
-                        React.createElement("div", { className: clsx(isRefresh && styles.refresh, styles.header, analyticsSelectors.header, styles[`header-variant-${variant}`], {
+                        React.createElement("div", { id: headerId, className: clsx(isRefresh && styles.refresh, styles.header, analyticsSelectors.header, styles[`header-variant-${variant}`], {
                                 [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
                                 [styles['header-sticky-enabled']]: isSticky,
                                 [styles['header-dynamic-height']]: hasDynamicHeight,
@@ -72,5 +100,6 @@ export default function InternalContainer({ header, footer, children, variant =
                         [styles['with-divider']]: !__disableFooterDivider,
                         [styles['with-paddings']]: !disableFooterPaddings,
                     }), style: getFooterStyles(style) }, footer))))));
-}
+});
+export default InternalContainer;
 //# sourceMappingURL=internal.js.map

package/container/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { ContainerProps } from './interfaces';\nimport { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  disableFooterPaddings?: boolean;\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __fullPage?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n  __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n  __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n\n  /**\n   * React key attached to the content wrapper. It is used to force content re-mount but not container re-mount, which\n   * is necessary for components that use container as a root node internally so that their test-utils wrapper is not detached.\n   */\n  __contentKey?: string;\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const modalContext = useModalContext();\n\n  return (\n    <InternalContainer\n      {...props}\n      __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n      __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n    />\n  );\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  disableFooterPaddings = false,\n  fitHeight,\n  media,\n  style,\n  __stickyOffset,\n  __mobileStickyOffset,\n  __stickyHeader = false,\n  __internalRootRef,\n  __disableFooterDivider = false,\n  __hiddenContent = false,\n  __headerRef,\n  __fullPage = false,\n  __disableStickyMobile = true,\n  __funnelSubStepProps,\n  __subStepRef,\n  __contentKey,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\n  const isRefresh = useVisualRefresh();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile,\n    __fullPage && isRefresh && !isMobile\n  );\n  const contentId = useUniqueId();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  const hasMedia = !!media?.content;\n  const mediaPosition = media?.position ?? 'top';\n\n  return (\n    <div\n      {...baseProps}\n      {...__funnelSubStepProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n        shouldHaveStickyStyles && [styles['sticky-enabled']],\n        shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']],\n        isRefresh && styles.refresh\n      )}\n      ref={mergedRef}\n      {...getAnalyticsLabelAttribute(\n        `.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`\n      )}\n      style={getRootStyles(style)}\n    >\n      {hasMedia && (\n        <div\n          className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n          style={\n            mediaPosition === 'top'\n              ? { ...getMediaStyles(mediaPosition, style), height: media?.height || '' }\n              : { ...getMediaStyles(mediaPosition, style), width: media?.width || '' }\n          }\n        >\n          {media.content}\n        </div>\n      )}\n      <div\n        id={contentId}\n        ref={__subStepRef}\n        key={__contentKey}\n        className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n      >\n        {/* We use a wrapper around the boundary to preserve container's paddings. */}\n        <BuiltInErrorBoundary wrapper={content => <InternalBox padding=\"m\">{content}</InternalBox>}>\n          {header && (\n            <ContainerHeaderContextProvider>\n              <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>\n                <div\n                  className={clsx(\n                    isRefresh && styles.refresh,\n                    styles.header,\n                    analyticsSelectors.header,\n                    styles[`header-variant-${variant}`],\n                    {\n                      [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n                      [styles['header-sticky-enabled']]: isSticky,\n                      [styles['header-dynamic-height']]: hasDynamicHeight,\n                      [styles['header-stuck']]: isStuck,\n                      [styles['with-paddings']]: !disableHeaderPaddings,\n                      [styles['with-hidden-content']]: !children || __hiddenContent,\n                      [styles['header-with-media']]: hasMedia,\n                      [styles['header-full-page']]: __fullPage && isRefresh,\n                    }\n                  )}\n                  ref={headerMergedRef}\n                  style={{\n                    ...stickyStyles.style,\n                    ...getHeaderStyles(style),\n                  }}\n                >\n                  {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n                  {header}\n                </div>\n              </StickyHeaderContext.Provider>\n            </ContainerHeaderContextProvider>\n          )}\n          <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>\n            <div\n              className={clsx(styles['content-inner'], testStyles['content-inner'], {\n                [styles['with-paddings']]: !disableContentPaddings,\n                [styles['with-header']]: !!header,\n              })}\n              style={getContentStyles(style)}\n            >\n              {/* We use a wrapper around the boundary to preserve paddings in case they were disabled by the consumer.\n              That is needed because the consumer-defined paddings that normally come with the content can no longer\n              apply since the content failed to render. */}\n              <BuiltInErrorBoundary\n                wrapper={content => (\n                  <InternalBox padding={disableContentPaddings ? 'm' : undefined}>{content}</InternalBox>\n                )}\n              >\n                {children}\n              </BuiltInErrorBoundary>\n            </div>\n          </div>\n          {footer && (\n            <div\n              className={clsx(styles.footer, {\n                [styles['with-divider']]: !__disableFooterDivider,\n                [styles['with-paddings']]: !disableFooterPaddings,\n              })}\n              style={getFooterStyles(style)}\n            >\n              {footer}\n            </div>\n          )}\n        </BuiltInErrorBoundary>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { BuiltInErrorBoundary } from '../error-boundary/internal';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { ContainerProps } from './interfaces';\nimport { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  disableFooterPaddings?: boolean;\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __fullPage?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n  __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n  __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n\n  /**\n   * React key attached to the content wrapper. It is used to force content re-mount but not container re-mount, which\n   * is necessary for components that use container as a root node internally so that their test-utils wrapper is not detached.\n   */\n  __contentKey?: string;\n}\n\nexport const InternalContainerAsSubstep = React.forwardRef(\n  (props: InternalContainerProps, ref: React.Ref<ContainerProps.Ref>) => {\n    const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n    const modalContext = useModalContext();\n\n    return (\n      <InternalContainer\n        {...props}\n        ref={ref}\n        __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n        __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n      />\n    );\n  }\n);\n\nconst InternalContainer = React.forwardRef(function InternalContainer(\n  {\n    header,\n    footer,\n    children,\n    variant = 'default',\n    disableHeaderPaddings = false,\n    disableContentPaddings = false,\n    disableFooterPaddings = false,\n    fitHeight,\n    media,\n    style,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __stickyHeader = false,\n    __internalRootRef,\n    __disableFooterDivider = false,\n    __hiddenContent = false,\n    __headerRef,\n    __fullPage = false,\n    __disableStickyMobile = true,\n    __funnelSubStepProps,\n    __subStepRef,\n    __contentKey,\n    ...restProps\n  }: InternalContainerProps,\n  ref: React.Ref<ContainerProps.Ref>\n) {\n  const isMobile = useMobile();\n  const isRefresh = useVisualRefresh();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const [showFocusRing, setShowFocusRing] = useState(false);\n  useImperativeHandle(ref, () => ({\n    focus: () => {\n      if (rootRef.current) {\n        rootRef.current.tabIndex = -1;\n        rootRef.current.setAttribute('role', 'group');\n        if (header) {\n          rootRef.current.setAttribute('aria-labelledby', headerId);\n        }\n        setShowFocusRing(true);\n        // focus()'s implicit scroll is a no-op when the container is already focused (repeated jump).\n        rootRef.current.focus({ preventScroll: true });\n        scrollElementIntoView(rootRef.current);\n      }\n    },\n  }));\n  const onRootBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n    const funnelOnBlur = __funnelSubStepProps?.onBlur as React.FocusEventHandler<HTMLDivElement> | undefined;\n    funnelOnBlur?.(event);\n    if (event.target === rootRef.current) {\n      rootRef.current.removeAttribute('tabindex');\n      rootRef.current.removeAttribute('role');\n      rootRef.current.removeAttribute('aria-labelledby');\n      setShowFocusRing(false);\n    }\n  };\n  const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile,\n    __fullPage && isRefresh && !isMobile\n  );\n  const contentId = useUniqueId();\n  const headerId = useUniqueId('container-header-');\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  const hasMedia = !!media?.content;\n  const mediaPosition = media?.position ?? 'top';\n\n  return (\n    <div\n      {...baseProps}\n      {...__funnelSubStepProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n        shouldHaveStickyStyles && [styles['sticky-enabled']],\n        shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']],\n        showFocusRing && styles['focus-ring'],\n        isRefresh && styles.refresh\n      )}\n      ref={mergedRef}\n      onBlur={onRootBlur}\n      {...getAnalyticsLabelAttribute(\n        `.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`\n      )}\n      style={getRootStyles(style)}\n    >\n      {hasMedia && (\n        <div\n          className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n          style={\n            mediaPosition === 'top'\n              ? { ...getMediaStyles(mediaPosition, style), height: media?.height || '' }\n              : { ...getMediaStyles(mediaPosition, style), width: media?.width || '' }\n          }\n        >\n          {media.content}\n        </div>\n      )}\n      <div\n        id={contentId}\n        ref={__subStepRef}\n        key={__contentKey}\n        className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n      >\n        {/* We use a wrapper around the boundary to preserve container's paddings. */}\n        <BuiltInErrorBoundary wrapper={content => <InternalBox padding=\"m\">{content}</InternalBox>}>\n          {header && (\n            <ContainerHeaderContextProvider>\n              <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>\n                <div\n                  id={headerId}\n                  className={clsx(\n                    isRefresh && styles.refresh,\n                    styles.header,\n                    analyticsSelectors.header,\n                    styles[`header-variant-${variant}`],\n                    {\n                      [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n                      [styles['header-sticky-enabled']]: isSticky,\n                      [styles['header-dynamic-height']]: hasDynamicHeight,\n                      [styles['header-stuck']]: isStuck,\n                      [styles['with-paddings']]: !disableHeaderPaddings,\n                      [styles['with-hidden-content']]: !children || __hiddenContent,\n                      [styles['header-with-media']]: hasMedia,\n                      [styles['header-full-page']]: __fullPage && isRefresh,\n                    }\n                  )}\n                  ref={headerMergedRef}\n                  style={{\n                    ...stickyStyles.style,\n                    ...getHeaderStyles(style),\n                  }}\n                >\n                  {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n                  {header}\n                </div>\n              </StickyHeaderContext.Provider>\n            </ContainerHeaderContextProvider>\n          )}\n          <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>\n            <div\n              className={clsx(styles['content-inner'], testStyles['content-inner'], {\n                [styles['with-paddings']]: !disableContentPaddings,\n                [styles['with-header']]: !!header,\n              })}\n              style={getContentStyles(style)}\n            >\n              {/* We use a wrapper around the boundary to preserve paddings in case they were disabled by the consumer.\n              That is needed because the consumer-defined paddings that normally come with the content can no longer\n              apply since the content failed to render. */}\n              <BuiltInErrorBoundary\n                wrapper={content => (\n                  <InternalBox padding={disableContentPaddings ? 'm' : undefined}>{content}</InternalBox>\n                )}\n              >\n                {children}\n              </BuiltInErrorBoundary>\n            </div>\n          </div>\n          {footer && (\n            <div\n              className={clsx(styles.footer, {\n                [styles['with-divider']]: !__disableFooterDivider,\n                [styles['with-paddings']]: !disableFooterPaddings,\n              })}\n              style={getFooterStyles(style)}\n            >\n              {footer}\n            </div>\n          )}\n        </BuiltInErrorBoundary>\n      </div>\n    </div>\n  );\n});\n\nexport default InternalContainer;\n"]}

package/container/styles.css.js

@@ -1,38 +1,39 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_1xr68_13",
-  "fit-height": "awsui_fit-height_14iqq_1xr68_46",
-  "with-side-media": "awsui_with-side-media_14iqq_1xr68_51",
-  "variant-default": "awsui_variant-default_14iqq_1xr68_54",
-  "variant-stacked": "awsui_variant-stacked_14iqq_1xr68_54",
-  "refresh": "awsui_refresh_14iqq_1xr68_63",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_1xr68_113",
-  "with-stuck-sticky-header-at-bottom": "awsui_with-stuck-sticky-header-at-bottom_14iqq_1xr68_119",
-  "with-top-media": "awsui_with-top-media_14iqq_1xr68_129",
-  "content-wrapper": "awsui_content-wrapper_14iqq_1xr68_134",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1xr68_139",
-  "media": "awsui_media_14iqq_1xr68_146",
-  "media-top": "awsui_media-top_14iqq_1xr68_164",
-  "media-side": "awsui_media-side_14iqq_1xr68_169",
-  "header": "awsui_header_14iqq_1xr68_175",
-  "header-full-page": "awsui_header-full-page_14iqq_1xr68_180",
-  "header-variant-embedded": "awsui_header-variant-embedded_14iqq_1xr68_183",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1xr68_183",
-  "header-with-media": "awsui_header-with-media_14iqq_1xr68_186",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1xr68_192",
-  "header-stuck": "awsui_header-stuck_14iqq_1xr68_202",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_1xr68_212",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1xr68_215",
-  "with-paddings": "awsui_with-paddings_14iqq_1xr68_221",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_1xr68_230",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1xr68_288",
-  "header-cover": "awsui_header-cover_14iqq_1xr68_291",
-  "content": "awsui_content_14iqq_1xr68_134",
-  "content-fit-height": "awsui_content-fit-height_14iqq_1xr68_319",
-  "content-inner": "awsui_content-inner_14iqq_1xr68_325",
-  "with-header": "awsui_with-header_14iqq_1xr68_332",
-  "footer": "awsui_footer_14iqq_1xr68_336",
-  "with-divider": "awsui_with-divider_14iqq_1xr68_340"
+  "root": "awsui_root_14iqq_12yus_13",
+  "fit-height": "awsui_fit-height_14iqq_12yus_46",
+  "with-side-media": "awsui_with-side-media_14iqq_12yus_51",
+  "variant-default": "awsui_variant-default_14iqq_12yus_54",
+  "variant-stacked": "awsui_variant-stacked_14iqq_12yus_54",
+  "refresh": "awsui_refresh_14iqq_12yus_63",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_12yus_113",
+  "with-stuck-sticky-header-at-bottom": "awsui_with-stuck-sticky-header-at-bottom_14iqq_12yus_119",
+  "focus-ring": "awsui_focus-ring_14iqq_12yus_126",
+  "with-top-media": "awsui_with-top-media_14iqq_12yus_150",
+  "content-wrapper": "awsui_content-wrapper_14iqq_12yus_155",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_12yus_160",
+  "media": "awsui_media_14iqq_12yus_167",
+  "media-top": "awsui_media-top_14iqq_12yus_185",
+  "media-side": "awsui_media-side_14iqq_12yus_190",
+  "header": "awsui_header_14iqq_12yus_196",
+  "header-full-page": "awsui_header-full-page_14iqq_12yus_201",
+  "header-variant-embedded": "awsui_header-variant-embedded_14iqq_12yus_204",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_12yus_204",
+  "header-with-media": "awsui_header-with-media_14iqq_12yus_207",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_12yus_213",
+  "header-stuck": "awsui_header-stuck_14iqq_12yus_223",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_12yus_233",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_12yus_236",
+  "with-paddings": "awsui_with-paddings_14iqq_12yus_242",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_12yus_251",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_12yus_309",
+  "header-cover": "awsui_header-cover_14iqq_12yus_312",
+  "content": "awsui_content_14iqq_12yus_155",
+  "content-fit-height": "awsui_content-fit-height_14iqq_12yus_340",
+  "content-inner": "awsui_content-inner_14iqq_12yus_346",
+  "with-header": "awsui_with-header_14iqq_12yus_353",
+  "footer": "awsui_footer_14iqq_12yus_357",
+  "with-divider": "awsui_with-divider_14iqq_12yus_361"
 };