@cloudscape-design/components 3.0.1382 → 3.0.1384

package/checkbox/internal.js

@@ -13,7 +13,7 @@ import useForwardFocus from '../internal/hooks/forward-focus';
 import WithNativeAttributes from '../internal/utils/with-native-attributes';
 import { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';
 import styles from './styles.css.js';
-const InternalCheckbox = React.forwardRef(({ controlId, name, checked, disabled, readOnly, ariaRequired, indeterminate, children, description, ariaLabel, onFocus, onBlur, onChange, tabIndex: explicitTabIndex, showOutline, ariaControls, style, nativeInputAttributes, __internalRootRef, __injectAnalyticsComponentMetadata = false, ...rest }, ref) => {
+const InternalCheckbox = React.forwardRef(({ controlId, name, checked, disabled, readOnly, ariaRequired, indeterminate, children, description, ariaLabel, onFocus, onBlur, onChange, tabIndex: explicitTabIndex, showOutline, ariaControls, style, styleClassNames, nativeInputAttributes, __internalRootRef, __injectAnalyticsComponentMetadata = false, ...rest }, ref) => {
     const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
     const baseProps = getBaseProps(rest);
     const checkboxRef = useRef(null);
@@ -38,7 +38,7 @@ const InternalCheckbox = React.forwardRef(({ controlId, name, checked, disabled,
     if (!disabled && !readOnly) {
         analyticsMetadata.action = !checked ? 'select' : 'deselect';
     }
-    return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, showOutline: showOutline, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "Checkbox", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-required": ariaRequired ? 'true' : undefined, "aria-disabled": readOnly && !disabled ? 'true' : undefined, tabIndex: tabIndex, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur), 
+    return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: clsx(styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.control, styles['checkbox-control']), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, labelClassName: clsx(styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.label, styles.label, disabled && styles['label-disabled']), description: description, descriptionClassName: clsx(styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.description, styles.description, disabled && styles['description-disabled']), descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, showOutline: showOutline, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "Checkbox", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-required": ariaRequired ? 'true' : undefined, "aria-disabled": readOnly && !disabled ? 'true' : undefined, tabIndex: tabIndex, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur), 
             // empty handler to suppress React controllability warning
             onChange: () => { } })), onClick: () => {
             var _a;

package/checkbox/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/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\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport {\n  GeneratedAnalyticsMetadataFragment,\n  getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport CheckboxIcon from '../internal/components/checkbox-icon';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { GeneratedAnalyticsMetadataCheckboxComponent } from './analytics-metadata/interfaces';\nimport { CheckboxProps } from './interfaces';\nimport { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalProps extends CheckboxProps, InternalBaseComponentProps {\n  tabIndex?: -1;\n  showOutline?: boolean;\n  __injectAnalyticsComponentMetadata?: boolean;\n}\n\nconst InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(\n  (\n    {\n      controlId,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      ariaRequired,\n      indeterminate,\n      children,\n      description,\n      ariaLabel,\n      onFocus,\n      onBlur,\n      onChange,\n      tabIndex: explicitTabIndex,\n      showOutline,\n      ariaControls,\n      style,\n      nativeInputAttributes,\n      __internalRootRef,\n      __injectAnalyticsComponentMetadata = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const baseProps = getBaseProps(rest);\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    useForwardFocus(ref, checkboxRef);\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = Boolean(indeterminate);\n      }\n    });\n\n    const { tabIndex } = useSingleTabStopNavigation(checkboxRef, { tabIndex: explicitTabIndex });\n\n    const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n    const analyticsComponentMetadata: GeneratedAnalyticsMetadataCheckboxComponent = {\n      name: 'awsui.Checkbox',\n      label: { root: 'self' },\n      properties: {\n        checked: `${!!checked}`,\n      },\n    };\n    if (__injectAnalyticsComponentMetadata) {\n      analyticsMetadata.component = analyticsComponentMetadata;\n    }\n    if (!disabled && !readOnly) {\n      analyticsMetadata.action = !checked ? 'select' : 'deselect';\n    }\n\n    return (\n      <AbstractSwitch\n        {...baseProps}\n        className={clsx(styles.root, baseProps.className)}\n        controlClassName={styles['checkbox-control']}\n        outlineClassName={styles.outline}\n        controlId={controlId}\n        disabled={disabled}\n        readOnly={readOnly}\n        label={children}\n        description={description}\n        descriptionBottomPadding={true}\n        ariaLabel={ariaLabel}\n        ariaLabelledby={ariaLabelledby}\n        ariaDescribedby={ariaDescribedby}\n        ariaControls={ariaControls}\n        showOutline={showOutline}\n        nativeControl={nativeControlProps => (\n          <WithNativeAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>\n            {...nativeControlProps}\n            tag=\"input\"\n            componentName=\"Checkbox\"\n            nativeAttributes={nativeInputAttributes}\n            ref={checkboxRef}\n            type=\"checkbox\"\n            checked={checked}\n            name={name}\n            aria-required={ariaRequired ? 'true' : undefined}\n            aria-disabled={readOnly && !disabled ? 'true' : undefined}\n            tabIndex={tabIndex}\n            onFocus={() => fireNonCancelableEvent(onFocus)}\n            onBlur={() => fireNonCancelableEvent(onBlur)}\n            // empty handler to suppress React controllability warning\n            onChange={() => {}}\n          />\n        )}\n        onClick={() => {\n          checkboxRef.current?.focus();\n          fireNonCancelableEvent(\n            onChange,\n            // for deterministic transitions \"indeterminate\" -> \"checked\" -> \"unchecked\"\n            indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }\n          );\n        }}\n        styledControl={\n          <CheckboxIcon\n            checked={checked}\n            indeterminate={indeterminate}\n            disabled={disabled}\n            readOnly={readOnly}\n            style={getCheckboxIconStyles(style, checked, disabled, readOnly, indeterminate)}\n          />\n        }\n        style={getAbstractSwitchStyles(style, checked, disabled, readOnly, indeterminate)}\n        __internalRootRef={__internalRootRef}\n        {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n      />\n    );\n  }\n);\n\nexport default InternalCheckbox;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/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\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\nimport {\n  GeneratedAnalyticsMetadataFragment,\n  getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport CheckboxIcon from '../internal/components/checkbox-icon';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { GeneratedAnalyticsMetadataCheckboxComponent } from './analytics-metadata/interfaces';\nimport { CheckboxProps } from './interfaces';\nimport { getAbstractSwitchStyles, getCheckboxIconStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalProps extends CheckboxProps, InternalBaseComponentProps {\n  tabIndex?: -1;\n  showOutline?: boolean;\n  styleClassNames?: StyleClassNames;\n  __injectAnalyticsComponentMetadata?: boolean;\n}\n\n// Style API v2\ninterface StyleClassNames {\n  control?: string;\n  label?: string;\n  description?: string;\n}\n\nconst InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(\n  (\n    {\n      controlId,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      ariaRequired,\n      indeterminate,\n      children,\n      description,\n      ariaLabel,\n      onFocus,\n      onBlur,\n      onChange,\n      tabIndex: explicitTabIndex,\n      showOutline,\n      ariaControls,\n      style,\n      styleClassNames,\n      nativeInputAttributes,\n      __internalRootRef,\n      __injectAnalyticsComponentMetadata = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const baseProps = getBaseProps(rest);\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    useForwardFocus(ref, checkboxRef);\n    useEffect(() => {\n      if (checkboxRef.current) {\n        checkboxRef.current.indeterminate = Boolean(indeterminate);\n      }\n    });\n\n    const { tabIndex } = useSingleTabStopNavigation(checkboxRef, { tabIndex: explicitTabIndex });\n\n    const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n    const analyticsComponentMetadata: GeneratedAnalyticsMetadataCheckboxComponent = {\n      name: 'awsui.Checkbox',\n      label: { root: 'self' },\n      properties: {\n        checked: `${!!checked}`,\n      },\n    };\n    if (__injectAnalyticsComponentMetadata) {\n      analyticsMetadata.component = analyticsComponentMetadata;\n    }\n    if (!disabled && !readOnly) {\n      analyticsMetadata.action = !checked ? 'select' : 'deselect';\n    }\n\n    return (\n      <AbstractSwitch\n        {...baseProps}\n        className={clsx(styles.root, baseProps.className)}\n        controlClassName={clsx(styleClassNames?.control, styles['checkbox-control'])}\n        outlineClassName={styles.outline}\n        controlId={controlId}\n        disabled={disabled}\n        readOnly={readOnly}\n        label={children}\n        labelClassName={clsx(styleClassNames?.label, styles.label, disabled && styles['label-disabled'])}\n        description={description}\n        descriptionClassName={clsx(\n          styleClassNames?.description,\n          styles.description,\n          disabled && styles['description-disabled']\n        )}\n        descriptionBottomPadding={true}\n        ariaLabel={ariaLabel}\n        ariaLabelledby={ariaLabelledby}\n        ariaDescribedby={ariaDescribedby}\n        ariaControls={ariaControls}\n        showOutline={showOutline}\n        nativeControl={nativeControlProps => (\n          <WithNativeAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>\n            {...nativeControlProps}\n            tag=\"input\"\n            componentName=\"Checkbox\"\n            nativeAttributes={nativeInputAttributes}\n            ref={checkboxRef}\n            type=\"checkbox\"\n            checked={checked}\n            name={name}\n            aria-required={ariaRequired ? 'true' : undefined}\n            aria-disabled={readOnly && !disabled ? 'true' : undefined}\n            tabIndex={tabIndex}\n            onFocus={() => fireNonCancelableEvent(onFocus)}\n            onBlur={() => fireNonCancelableEvent(onBlur)}\n            // empty handler to suppress React controllability warning\n            onChange={() => {}}\n          />\n        )}\n        onClick={() => {\n          checkboxRef.current?.focus();\n          fireNonCancelableEvent(\n            onChange,\n            // for deterministic transitions \"indeterminate\" -> \"checked\" -> \"unchecked\"\n            indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }\n          );\n        }}\n        styledControl={\n          <CheckboxIcon\n            checked={checked}\n            indeterminate={indeterminate}\n            disabled={disabled}\n            readOnly={readOnly}\n            style={getCheckboxIconStyles(style, checked, disabled, readOnly, indeterminate)}\n          />\n        }\n        style={getAbstractSwitchStyles(style, checked, disabled, readOnly, indeterminate)}\n        __internalRootRef={__internalRootRef}\n        {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n      />\n    );\n  }\n);\n\nexport default InternalCheckbox;\n"]}

package/checkbox/styles.css.js

@@ -1,8 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_k2y2q_10z3g_9",
-  "checkbox-control": "awsui_checkbox-control_k2y2q_10z3g_42",
-  "outline": "awsui_outline_k2y2q_10z3g_50"
+  "root": "awsui_root_k2y2q_vvlo6_44",
+  "checkbox-control": "awsui_checkbox-control_k2y2q_vvlo6_77",
+  "outline": "awsui_outline_k2y2q_vvlo6_93",
+  "label": "awsui_label_k2y2q_vvlo6_115",
+  "label-disabled": "awsui_label-disabled_k2y2q_vvlo6_118",
+  "description": "awsui_description_k2y2q_vvlo6_122",
+  "description-disabled": "awsui_description-disabled_k2y2q_vvlo6_125"
 };
   

package/checkbox/styles.scoped.css

@@ -6,7 +6,42 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_k2y2q_10z3g_9.awsui_root_k2y2q_10z3g_9:not(#\9) {
+@property --awsui-style-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-background-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-border-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-gutter-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --awsui-style-focus-ring-gutter-inline {
+  syntax: "*";
+  inherits: false;
+}
+/* awsui:style-api-slot name=control tokens=color, background-color, border-color, focus-ring-color, focus-ring-width, focus-ring-radius, focus-ring-gutter-block, focus-ring-gutter-inline */
+/* awsui:style-api-slot name=label tokens=color */
+/* awsui:style-api-slot name=description tokens=color */
+.awsui_root_k2y2q_vvlo6_44.awsui_root_k2y2q_vvlo6_44:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -39,7 +74,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_checkbox-control_k2y2q_10z3g_42:not(#\9) {
+.awsui_checkbox-control_k2y2q_vvlo6_77:not(#\9) {
+  --awsui-internal-style-color: var(--awsui-style-color);
+  --awsui-internal-style-background-color: var(--awsui-style-background-color);
+  --awsui-internal-style-border-color: var(--awsui-style-border-color);
+  --awsui-internal-style-focus-ring-color: var(--awsui-style-focus-ring-color);
+  --awsui-internal-style-focus-ring-width: var(--awsui-style-focus-ring-width);
+  --awsui-internal-style-focus-ring-radius: var(--awsui-style-focus-ring-radius);
+  --awsui-internal-style-focus-ring-gutter-block: var(--awsui-style-focus-ring-gutter-block);
+  --awsui-internal-style-focus-ring-gutter-inline: var(--awsui-style-focus-ring-gutter-inline);
   margin-block-start: calc((var(--line-height-body-m-5xw6xo, 20px) - var(--size-control-jpgj8e, 16px)) / 2);
   min-block-size: var(--size-control-jpgj8e, 16px);
   min-inline-size: var(--size-control-jpgj8e, 16px);
@@ -47,25 +90,38 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inline-size: var(--size-control-jpgj8e, 16px);
 }
 
-.awsui_outline_k2y2q_10z3g_50:not(#\9) {
-  --awsui-style-focus-ring-box-shadow-66120l: 0 0 0 var(--awsui-style-focus-ring-border-width-66120l, 2px) var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #006ce0));
+.awsui_outline_k2y2q_vvlo6_93:not(#\9) {
   position: relative;
 }
-.awsui_outline_k2y2q_10z3g_50:not(#\9) {
+.awsui_outline_k2y2q_vvlo6_93:not(#\9) {
   outline: 2px dotted transparent;
-  outline-offset: calc(2px - 1px);
+  outline-offset: calc(var(--awsui-internal-style-focus-ring-gutter-inline, 2px) - 1px);
 }
-.awsui_outline_k2y2q_10z3g_50:not(#\9)::before {
+.awsui_outline_k2y2q_vvlo6_93:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
-  inset-inline-start: calc(-1 * 2px);
-  inset-block-start: calc(-1 * 2px);
-  inline-size: calc(100% + 2px + 2px);
-  block-size: calc(100% + 2px + 2px);
-  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
-  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
-  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
-  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
-  box-shadow: var(--awsui-style-focus-ring-box-shadow-66120l);
+  inset-inline-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-inline, 2px));
+  inset-block-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-block, 2px));
+  inline-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-inline, 2px) + var(--awsui-internal-style-focus-ring-gutter-inline, 2px));
+  block-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-block, 2px) + var(--awsui-internal-style-focus-ring-gutter-block, 2px));
+  border-start-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
+  border-start-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
+  border-end-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
+  border-end-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
+  box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-style-focus-ring-border-width-66120l, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #006ce0)));
+}
+
+.awsui_label_k2y2q_vvlo6_115.awsui_label_k2y2q_vvlo6_115:not(#\9) {
+  color: var(--awsui-style-color, var(--color-text-form-default-8bb22s, #0f141a));
+}
+.awsui_label_k2y2q_vvlo6_115.awsui_label_k2y2q_vvlo6_115.awsui_label-disabled_k2y2q_vvlo6_118:not(#\9) {
+  color: var(--awsui-style-color, var(--color-text-control-disabled-54tz75, #b4b4bb));
+}
+
+.awsui_description_k2y2q_vvlo6_122.awsui_description_k2y2q_vvlo6_122:not(#\9) {
+  color: var(--awsui-style-color, var(--color-text-form-secondary-wt0md2, #656871));
+}
+.awsui_description_k2y2q_vvlo6_122.awsui_description_k2y2q_vvlo6_122.awsui_description-disabled_k2y2q_vvlo6_125:not(#\9) {
+  color: var(--awsui-style-color, var(--color-text-control-disabled-54tz75, #b4b4bb));
 }

package/checkbox/styles.selectors.js

@@ -2,8 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_k2y2q_10z3g_9",
-  "checkbox-control": "awsui_checkbox-control_k2y2q_10z3g_42",
-  "outline": "awsui_outline_k2y2q_10z3g_50"
+  "root": "awsui_root_k2y2q_vvlo6_44",
+  "checkbox-control": "awsui_checkbox-control_k2y2q_vvlo6_77",
+  "outline": "awsui_outline_k2y2q_vvlo6_93",
+  "label": "awsui_label_k2y2q_vvlo6_115",
+  "label-disabled": "awsui_label-disabled_k2y2q_vvlo6_118",
+  "description": "awsui_description_k2y2q_vvlo6_122",
+  "description-disabled": "awsui_description-disabled_k2y2q_vvlo6_125"
 };
   

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":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC1F,OAAO,EAAE,0BAA0B,EAAE,MAAM,kEAAkE,CAAC;AAE9G,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,8BAA8B,EAAE,MAAM,sCAAsC,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC5G,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3E,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AA8BtD,MAAM,UAAU,0BAA0B,CAAC,KAA6B;IACtE,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC9D,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,OAAO,CACL,oBAAC,iBAAiB,OACZ,KAAK,EACT,YAAY,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,EAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,UAAU,EACtE,oBAAoB,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,EAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,GACvE,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,EAC9B,qBAAqB,GAAG,KAAK,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAc,GAAG,KAAK,EACtB,iBAAiB,EACjB,sBAAsB,GAAG,KAAK,EAC9B,eAAe,GAAG,KAAK,EACvB,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,qBAAqB,GAAG,IAAI,EAC5B,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,GAAG,SAAS,EACW;;IACvB,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CAC1E,OAAO,EACP,SAAS,EACT,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,UAAU,IAAI,SAAS,IAAI,CAAC,QAAQ,CACrC,CAAC;IACF,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAEhC,MAAM,gBAAgB,GAAG,SAAS,IAAI,OAAO,KAAK,WAAW,CAAC;IAE9D,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC3D,MAAM,eAAe,GAAG,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAE7D,4EAA4E;IAC5E,6HAA6H;IAC7H,MAAM,sBAAsB,GAAG,QAAQ,IAAI,CAAC,QAAQ,CAAC;IAErD,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAA,CAAC;IAClC,MAAM,aAAa,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,mCAAI,KAAK,CAAC;IAE/C,OAAO,CACL,gCACM,SAAS,KACT,oBAAoB,EACxB,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAC5B,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,EACjC,QAAQ,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAC7F,sBAAsB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EACpD,sBAAsB,IAAI,OAAO,IAAI,eAAe,IAAI,CAAC,MAAM,CAAC,oCAAoC,CAAC,CAAC,EACtG,SAAS,IAAI,MAAM,CAAC,OAAO,CAC5B,EACD,GAAG,EAAE,SAAS,KACV,0BAA0B,CAC5B,IAAI,kBAAkB,CAAC,MAAM,SAAS,kBAAkB,CAAC,MAAM,SAAS,kBAAkB,CAAC,MAAM,KAAK,CACvG,EACD,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC;QAE1B,QAAQ,IAAI,CACX,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAC3F,KAAK,EACH,aAAa,KAAK,KAAK;gBACrB,CAAC,CAAC,EAAE,GAAG,cAAc,CAAC,aAAa,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,KAAI,EAAE,EAAE;gBAC1E,CAAC,CAAC,EAAE,GAAG,cAAc,CAAC,aAAa,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,KAAI,EAAE,EAAE,IAG3E,KAAK,CAAC,OAAO,CACV,CACP;QACD,6BACE,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,4BAA4B,CAAC,CAAC;YAG7F,oBAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,oBAAC,WAAW,IAAC,OAAO,EAAC,GAAG,IAAE,OAAO,CAAe;gBACvF,MAAM,IAAI,CACT,oBAAC,8BAA8B;oBAC7B,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE;wBAC/D,6BACE,SAAS,EAAE,IAAI,CACb,SAAS,IAAI,MAAM,CAAC,OAAO,EAC3B,MAAM,CAAC,MAAM,EACb,kBAAkB,CAAC,MAAM,EACzB,MAAM,CAAC,kBAAkB,OAAO,EAAE,CAAC,EACnC;gCACE,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,cAAc,IAAI,CAAC,QAAQ;gCAC/D,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,QAAQ;gCAC3C,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,gBAAgB;gCACnD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,OAAO;gCACjC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,qBAAqB;gCACjD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,CAAC,QAAQ,IAAI,eAAe;gCAC7D,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,QAAQ;gCACvC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,UAAU,IAAI,SAAS;6BACtD,CACF,EACD,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE;gCACL,GAAG,YAAY,CAAC,KAAK;gCACrB,GAAG,eAAe,CAAC,KAAK,CAAC;6BAC1B;4BAEA,OAAO,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,GAAQ;4BACjG,MAAM,CACH,CACuB,CACA,CAClC;gBACD,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC;oBAC7E,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,EAAE;4BACpE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,sBAAsB;4BAClD,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM;yBAClC,CAAC,EACF,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC;wBAK9B,oBAAC,oBAAoB,IACnB,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAClB,oBAAC,WAAW,IAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IAAG,OAAO,CAAe,CACxF,IAEA,QAAQ,CACY,CACnB,CACF;gBACL,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;wBAC7B,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,sBAAsB;wBACjD,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,qBAAqB;qBAClD,CAAC,EACF,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,IAE5B,MAAM,CACH,CACP,CACoB,CACnB,CACF,CACP,CAAC;AACJ,CAAC","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"]}