@cloudscape-design/components 3.0.1082 → 3.0.1084

package/internal/components/selectable-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { getBaseProps } from '../../base-component';\nimport { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';\nimport { SelectableItemProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SelectableItemProps };\n\nconst SelectableItem = (\n  {\n    children: content,\n    ariaSelected,\n    ariaChecked,\n    selected,\n    highlighted,\n    disabled,\n    hasBackground,\n    isParent,\n    isChild,\n    isSelectAll,\n    virtualPosition,\n    padBottom,\n    isNextSelected,\n    useInteractiveGroups,\n    screenReaderContent,\n    ariaPosinset,\n    ariaSetsize,\n    highlightType,\n    value,\n    sticky,\n    afterHeader,\n    withScrollbar,\n    ...restProps\n  }: SelectableItemProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const isVisualRefresh = useVisualRefresh();\n  const { className, ...rest } = getBaseProps(restProps);\n  const classNames = clsx(className, styles['selectable-item'], {\n    [styles.selected]: selected,\n    [styles.highlighted]: highlighted,\n    [styles['has-background']]: hasBackground,\n    [styles.parent]: isParent,\n    [analyticsSelectors.parent]: isParent,\n    [styles.child]: isChild,\n    [styles['select-all']]: isSelectAll,\n    [styles['is-keyboard']]: highlightType === 'keyboard',\n    [styles.disabled]: disabled,\n    [styles.virtual]: virtualPosition !== undefined && !sticky,\n    [styles['pad-bottom']]: padBottom,\n    [styles['next-item-selected']]: isNextSelected,\n    [styles.interactiveGroups]: useInteractiveGroups,\n    [styles.sticky]: sticky,\n    [styles['after-header']]: !!afterHeader,\n    [styles['with-scrollbar']]: withScrollbar,\n    [styles['visual-refresh']]: isVisualRefresh,\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n    // the item which lost highlight\n    // set aria-hidden true when there is announcement content, so that screen reader still announce\n    // meaningful content when navigate with screen reader cursor\n    // imperatively update to avoid announcement made multiple times when content updates\n    if (highlighted && screenReaderContent) {\n      if (contentRef.current) {\n        contentRef.current.setAttribute('aria-hidden', 'true');\n      }\n      if (screenReaderContentRef.current) {\n        screenReaderContentRef.current.textContent = screenReaderContent;\n      }\n    }\n  }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n  const style =\n    virtualPosition !== undefined\n      ? {\n          transform: `translateY(${virtualPosition}px)`,\n        }\n      : undefined;\n\n  const a11yProperties: Record<string, string | number | boolean | undefined> = {\n    'aria-disabled': disabled,\n  };\n\n  if (isParent && !useInteractiveGroups) {\n    a11yProperties['aria-hidden'] = true;\n  }\n\n  if (ariaSelected !== undefined) {\n    a11yProperties['aria-selected'] = ariaSelected;\n  }\n\n  // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n  if (ariaChecked !== undefined) {\n    a11yProperties['aria-checked'] = ariaChecked;\n  }\n\n  if (ariaPosinset && ariaSetsize) {\n    a11yProperties['aria-posinset'] = ariaPosinset;\n    a11yProperties['aria-setsize'] = ariaSetsize;\n  }\n\n  if (restProps.ariaDescribedby) {\n    a11yProperties['aria-describedby'] = restProps.ariaDescribedby;\n  }\n\n  return (\n    <li\n      role=\"option\"\n      className={classNames}\n      style={style}\n      {...a11yProperties}\n      {...rest}\n      {...(isParent || disabled\n        ? {}\n        : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata({ isChild, value, ...restProps })))}\n    >\n      <div className={clsx(styles['option-content'], analyticsSelectors['option-content'])} ref={contentRef}>\n        {content}\n      </div>\n      <div className={styles['measure-strut']} ref={ref} />\n      <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n    </li>\n  );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { getBaseProps } from '../../base-component';\nimport { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';\nimport { SelectableItemProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SelectableItemProps };\n\nconst SelectableItem = (\n  {\n    children: content,\n    ariaSelected,\n    ariaChecked,\n    selected,\n    highlighted,\n    disabled,\n    hasBackground,\n    isParent,\n    isChild,\n    isSelectAll,\n    virtualPosition,\n    padBottom,\n    isNextSelected,\n    isPreviousSelected,\n    useInteractiveGroups,\n    screenReaderContent,\n    ariaPosinset,\n    ariaSetsize,\n    highlightType,\n    value,\n    sticky,\n    afterHeader,\n    withScrollbar,\n    ...restProps\n  }: SelectableItemProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const isVisualRefresh = useVisualRefresh();\n  const { className, ...rest } = getBaseProps(restProps);\n  const classNames = clsx(className, styles['selectable-item'], {\n    [styles.selected]: selected,\n    [styles.highlighted]: highlighted,\n    [styles['has-background']]: hasBackground,\n    [styles.parent]: isParent,\n    [analyticsSelectors.parent]: isParent,\n    [styles.child]: isChild,\n    [styles['select-all']]: isSelectAll,\n    [styles['is-keyboard']]: highlightType === 'keyboard',\n    [styles.disabled]: disabled,\n    [styles.virtual]: virtualPosition !== undefined && !sticky,\n    [styles['pad-bottom']]: padBottom,\n    [styles['next-item-selected']]: isNextSelected,\n    [styles['previous-item-selected']]: isPreviousSelected,\n    [styles.interactiveGroups]: useInteractiveGroups,\n    [styles.sticky]: sticky,\n    [styles['after-header']]: !!afterHeader,\n    [styles['with-scrollbar']]: withScrollbar,\n    [styles['visual-refresh']]: isVisualRefresh,\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n    // the item which lost highlight\n    // set aria-hidden true when there is announcement content, so that screen reader still announce\n    // meaningful content when navigate with screen reader cursor\n    // imperatively update to avoid announcement made multiple times when content updates\n    if (highlighted && screenReaderContent) {\n      if (contentRef.current) {\n        contentRef.current.setAttribute('aria-hidden', 'true');\n      }\n      if (screenReaderContentRef.current) {\n        screenReaderContentRef.current.textContent = screenReaderContent;\n      }\n    }\n  }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n  const style =\n    virtualPosition !== undefined\n      ? {\n          transform: `translateY(${virtualPosition}px)`,\n        }\n      : undefined;\n\n  const a11yProperties: Record<string, string | number | boolean | undefined> = {};\n\n  if (isParent && ariaChecked === undefined) {\n    a11yProperties.role = 'presentation';\n  } else {\n    a11yProperties.role = 'option';\n    a11yProperties['aria-disabled'] = disabled;\n\n    if (ariaSelected !== undefined) {\n      a11yProperties['aria-selected'] = ariaSelected;\n    }\n\n    // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n    if (ariaChecked !== undefined) {\n      a11yProperties['aria-checked'] = ariaChecked;\n    }\n\n    if (ariaPosinset && ariaSetsize) {\n      a11yProperties['aria-posinset'] = ariaPosinset;\n      a11yProperties['aria-setsize'] = ariaSetsize;\n    }\n\n    if (restProps.ariaDescribedby) {\n      a11yProperties['aria-describedby'] = restProps.ariaDescribedby;\n    }\n  }\n\n  return (\n    <div\n      className={classNames}\n      style={style}\n      {...a11yProperties}\n      {...rest}\n      {...(isParent || disabled\n        ? {}\n        : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata({ isChild, value, ...restProps })))}\n    >\n      <div className={clsx(styles['option-content'], analyticsSelectors['option-content'])} ref={contentRef}>\n        {content}\n      </div>\n      <div className={styles['measure-strut']} ref={ref} />\n      <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n    </div>\n  );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}

package/internal/components/selectable-item/interfaces.d.ts

@@ -12,6 +12,7 @@ export type SelectableItemProps = BaseComponentProps & {
   isSelectAll?: boolean;
   virtualPosition?: number;
   padBottom?: boolean;
+  isPreviousSelected?: boolean;
   isNextSelected?: boolean;
   useInteractiveGroups?: boolean;
   screenReaderContent?: string;

package/internal/components/selectable-item/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,CAAC,CAAC;AAElH,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,CAAC,CAAC;AAElH,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B"}

package/internal/components/selectable-item/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../../base-component';\nimport { HighlightType } from '../options-list/utils/use-highlight-option';\n\nexport type SelectableItemProps = BaseComponentProps & {\n  children: React.ReactNode;\n  selected?: boolean;\n  highlighted?: boolean;\n  disabled?: boolean;\n  hasBackground?: boolean;\n  isParent?: boolean;\n  isChild?: boolean;\n  isSelectAll?: boolean;\n  virtualPosition?: number;\n  padBottom?: boolean;\n  isNextSelected?: boolean;\n  useInteractiveGroups?: boolean;\n  screenReaderContent?: string;\n  ariaPosinset?: number;\n  ariaSetsize?: number;\n  highlightType?: HighlightType['type'];\n  ariaDescribedby?: string;\n  value?: string;\n  sticky?: boolean;\n  afterHeader?: boolean;\n  withScrollbar?: boolean;\n} & ({ ariaSelected?: boolean; ariaChecked?: never } | { ariaSelected?: never; ariaChecked?: boolean | 'mixed' });\n\nexport interface ItemDataAttributes {\n  'data-group-index'?: string;\n  'data-child-index'?: string;\n  'data-in-group-index'?: string;\n  'data-test-index'?: string;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../../base-component';\nimport { HighlightType } from '../options-list/utils/use-highlight-option';\n\nexport type SelectableItemProps = BaseComponentProps & {\n  children: React.ReactNode;\n  selected?: boolean;\n  highlighted?: boolean;\n  disabled?: boolean;\n  hasBackground?: boolean;\n  isParent?: boolean;\n  isChild?: boolean;\n  isSelectAll?: boolean;\n  virtualPosition?: number;\n  padBottom?: boolean;\n  isPreviousSelected?: boolean;\n  isNextSelected?: boolean;\n  useInteractiveGroups?: boolean;\n  screenReaderContent?: string;\n  ariaPosinset?: number;\n  ariaSetsize?: number;\n  highlightType?: HighlightType['type'];\n  ariaDescribedby?: string;\n  value?: string;\n  sticky?: boolean;\n  afterHeader?: boolean;\n  withScrollbar?: boolean;\n} & ({ ariaSelected?: boolean; ariaChecked?: never } | { ariaSelected?: never; ariaChecked?: boolean | 'mixed' });\n\nexport interface ItemDataAttributes {\n  'data-group-index'?: string;\n  'data-child-index'?: string;\n  'data-in-group-index'?: string;\n  'data-test-index'?: string;\n}\n"]}

package/internal/components/selectable-item/styles.css.js

@@ -1,26 +1,27 @@
 
     import './styles.scoped.css';
     export default {
-  "selectable-item": "awsui_selectable-item_15o6u_lx7py_145",
-  "pad-bottom": "awsui_pad-bottom_15o6u_lx7py_167",
-  "virtual": "awsui_virtual_15o6u_lx7py_171",
-  "has-background": "awsui_has-background_15o6u_lx7py_174",
-  "highlighted": "awsui_highlighted_15o6u_lx7py_177",
-  "selected": "awsui_selected_15o6u_lx7py_177",
-  "disabled": "awsui_disabled_15o6u_lx7py_195",
-  "is-keyboard": "awsui_is-keyboard_15o6u_lx7py_200",
-  "visual-refresh": "awsui_visual-refresh_15o6u_lx7py_203",
-  "next-item-selected": "awsui_next-item-selected_15o6u_lx7py_211",
-  "parent": "awsui_parent_15o6u_lx7py_236",
-  "interactiveGroups": "awsui_interactiveGroups_15o6u_lx7py_240",
-  "child": "awsui_child_15o6u_lx7py_256",
-  "sticky": "awsui_sticky_15o6u_lx7py_262",
-  "with-scrollbar": "awsui_with-scrollbar_15o6u_lx7py_274",
-  "after-header": "awsui_after-header_15o6u_lx7py_280",
-  "measure-strut": "awsui_measure-strut_15o6u_lx7py_315",
-  "measure-strut-first": "awsui_measure-strut-first_15o6u_lx7py_324",
-  "screenreader-content": "awsui_screenreader-content_15o6u_lx7py_328",
-  "option-content": "awsui_option-content_15o6u_lx7py_334",
-  "select-all": "awsui_select-all_15o6u_lx7py_338"
+  "selectable-item": "awsui_selectable-item_15o6u_d2ghy_145",
+  "pad-bottom": "awsui_pad-bottom_15o6u_d2ghy_167",
+  "virtual": "awsui_virtual_15o6u_d2ghy_171",
+  "has-background": "awsui_has-background_15o6u_d2ghy_174",
+  "highlighted": "awsui_highlighted_15o6u_d2ghy_177",
+  "selected": "awsui_selected_15o6u_d2ghy_177",
+  "disabled": "awsui_disabled_15o6u_d2ghy_195",
+  "is-keyboard": "awsui_is-keyboard_15o6u_d2ghy_200",
+  "visual-refresh": "awsui_visual-refresh_15o6u_d2ghy_203",
+  "next-item-selected": "awsui_next-item-selected_15o6u_d2ghy_211",
+  "previous-item-selected": "awsui_previous-item-selected_15o6u_d2ghy_232",
+  "parent": "awsui_parent_15o6u_d2ghy_236",
+  "interactiveGroups": "awsui_interactiveGroups_15o6u_d2ghy_240",
+  "child": "awsui_child_15o6u_d2ghy_256",
+  "sticky": "awsui_sticky_15o6u_d2ghy_262",
+  "with-scrollbar": "awsui_with-scrollbar_15o6u_d2ghy_274",
+  "after-header": "awsui_after-header_15o6u_d2ghy_280",
+  "measure-strut": "awsui_measure-strut_15o6u_d2ghy_315",
+  "measure-strut-first": "awsui_measure-strut-first_15o6u_d2ghy_324",
+  "screenreader-content": "awsui_screenreader-content_15o6u_d2ghy_328",
+  "option-content": "awsui_option-content_15o6u_d2ghy_334",
+  "select-all": "awsui_select-all_15o6u_d2ghy_338"
 };
   

package/internal/components/selectable-item/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* 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_selectable-item_15o6u_lx7py_145:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145:not(#\9) {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
   color: var(--color-text-body-default-vvtq8u, #0f141a);
@@ -164,17 +164,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: calc(var(--space-xxs-hwfkai, 4px) + var(--border-item-width-miijiw, 2px) - var(--border-divider-list-width-tdfx1x, 1px));
   padding-inline: calc(var(--space-field-horizontal-0aq2ch, 12px) + var(--border-item-width-miijiw, 2px));
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_pad-bottom_15o6u_lx7py_167:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_pad-bottom_15o6u_d2ghy_167:not(#\9) {
   padding-block-end: calc(calc(var(--space-xxs-hwfkai, 4px) + var(--border-item-width-miijiw, 2px) - var(--border-divider-list-width-tdfx1x, 1px)) + var(--space-xxxs-pajhad, 2px));
   border-block-end-color: transparent;
 }
-.awsui_selectable-item_15o6u_lx7py_145:not(#\9):not(:first-child), .awsui_selectable-item_15o6u_lx7py_145.awsui_virtual_15o6u_lx7py_171:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145:not(#\9):not(:first-child), .awsui_selectable-item_15o6u_d2ghy_145.awsui_virtual_15o6u_d2ghy_171:not(#\9) {
   margin-block-start: calc(-1 * var(--border-item-width-miijiw, 2px));
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_has-background_15o6u_lx7py_174:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_has-background_15o6u_d2ghy_174:not(#\9) {
   background-color: var(--color-background-dropdown-item-hover-yunepc, #f3f3f7);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_highlighted_15o6u_lx7py_177:not(#\9), .awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_highlighted_15o6u_d2ghy_177:not(#\9), .awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-yr1px8, #0f141a);
   border-width: var(--border-item-width-miijiw, 2px);
   border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
@@ -184,135 +184,135 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-xxs-hwfkai, 4px);
   padding-inline: var(--space-field-horizontal-0aq2ch, 12px);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_highlighted_15o6u_lx7py_177.awsui_pad-bottom_15o6u_lx7py_167:not(#\9), .awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177.awsui_pad-bottom_15o6u_lx7py_167:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_highlighted_15o6u_d2ghy_177.awsui_pad-bottom_15o6u_d2ghy_167:not(#\9), .awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177.awsui_pad-bottom_15o6u_d2ghy_167:not(#\9) {
   padding-block-end: calc(var(--space-xxs-hwfkai, 4px) + var(--space-xxxs-pajhad, 2px));
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_highlighted_15o6u_lx7py_177:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_highlighted_15o6u_d2ghy_177:not(#\9) {
   z-index: 3;
   background-color: var(--color-background-dropdown-item-hover-yunepc, #f3f3f7);
   border-color: var(--color-border-dropdown-item-hover-aqfuxq, #8c8c94);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_highlighted_15o6u_lx7py_177.awsui_disabled_15o6u_lx7py_195:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_highlighted_15o6u_d2ghy_177.awsui_disabled_15o6u_d2ghy_195:not(#\9) {
   color: var(--color-text-dropdown-item-dimmed-tq8vh3, #b4b4bb);
   border-color: var(--color-border-dropdown-item-dimmed-hover-ga9sch, #8c8c94);
   background-color: var(--color-background-dropdown-item-dimmed-dhho03, transparent);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_highlighted_15o6u_lx7py_177.awsui_is-keyboard_15o6u_lx7py_200:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_highlighted_15o6u_d2ghy_177.awsui_is-keyboard_15o6u_d2ghy_200:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-zacqlp, #424650);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_highlighted_15o6u_lx7py_177.awsui_is-keyboard_15o6u_lx7py_200:not(#\9):not(.awsui_visual-refresh_15o6u_lx7py_203) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_highlighted_15o6u_d2ghy_177.awsui_is-keyboard_15o6u_d2ghy_200:not(#\9):not(.awsui_visual-refresh_15o6u_d2ghy_203) {
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-9mjajk, 1px) var(--color-border-item-focused-uk47pl, #006ce0);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177:not(#\9) {
   z-index: 2;
   background-color: var(--color-background-dropdown-item-selected-f3v6te, #f0fbff);
   border-color: var(--color-border-dropdown-item-selected-dl2ezh, #006ce0);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177.awsui_next-item-selected_15o6u_lx7py_211:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177.awsui_next-item-selected_15o6u_d2ghy_211:not(#\9) {
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177.awsui_highlighted_15o6u_lx7py_177:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177.awsui_highlighted_15o6u_d2ghy_177:not(#\9) {
   border-color: var(--color-border-dropdown-item-selected-dl2ezh, #006ce0);
   z-index: 3;
   outline: var(--border-item-width-miijiw, 2px) solid var(--color-border-dropdown-item-hover-aqfuxq, #8c8c94);
   outline-offset: calc(-2 * var(--border-item-width-miijiw, 2px));
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177.awsui_highlighted_15o6u_lx7py_177.awsui_is-keyboard_15o6u_lx7py_200:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177.awsui_highlighted_15o6u_d2ghy_177.awsui_is-keyboard_15o6u_d2ghy_200:not(#\9) {
   border-color: var(--color-border-dropdown-item-selected-dl2ezh, #006ce0);
   outline-color: var(--color-border-dropdown-item-focused-zacqlp, #424650);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177.awsui_highlighted_15o6u_lx7py_177:not(#\9):not(.awsui_visual-refresh_15o6u_lx7py_203) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177.awsui_highlighted_15o6u_d2ghy_177:not(#\9):not(.awsui_visual-refresh_15o6u_d2ghy_203) {
   border-color: var(--color-border-dropdown-item-hover-aqfuxq, #8c8c94);
   outline: none;
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177.awsui_highlighted_15o6u_lx7py_177:not(#\9):not(.awsui_visual-refresh_15o6u_lx7py_203).awsui_is-keyboard_15o6u_lx7py_200 {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177.awsui_highlighted_15o6u_d2ghy_177:not(#\9):not(.awsui_visual-refresh_15o6u_d2ghy_203).awsui_is-keyboard_15o6u_d2ghy_200 {
   border-color: var(--color-border-dropdown-item-focused-zacqlp, #424650);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177 + .awsui_selectable-item_15o6u_lx7py_145.awsui_selected_15o6u_lx7py_177:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177 + .awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177:not(#\9), .awsui_selectable-item_15o6u_d2ghy_145.awsui_selected_15o6u_d2ghy_177.awsui_previous-item-selected_15o6u_d2ghy_232:not(#\9) {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_parent_15o6u_lx7py_236:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_parent_15o6u_d2ghy_236:not(#\9) {
   font-weight: bold;
   color: var(--color-text-dropdown-group-label-2tmyik, #424650);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_parent_15o6u_lx7py_236:not(#\9):not(.awsui_interactiveGroups_15o6u_lx7py_240) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_parent_15o6u_d2ghy_236:not(#\9):not(.awsui_interactiveGroups_15o6u_d2ghy_240) {
   border-block-start-color: var(--color-border-dropdown-group-ylcnh8, #c6c6cd);
   padding-block: var(--space-xs-ymlm0b, 8px);
   padding-inline: var(--space-xs-ymlm0b, 8px);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_parent_15o6u_lx7py_236.awsui_interactiveGroups_15o6u_lx7py_240:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_parent_15o6u_d2ghy_236.awsui_interactiveGroups_15o6u_d2ghy_240:not(#\9) {
   padding-block: calc(var(--space-xs-ymlm0b, 8px) + var(--border-item-width-miijiw, 2px) - var(--border-divider-list-width-tdfx1x, 1px));
   padding-inline: calc(var(--space-field-horizontal-0aq2ch, 12px) + var(--border-item-width-miijiw, 2px));
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_parent_15o6u_lx7py_236.awsui_interactiveGroups_15o6u_lx7py_240.awsui_highlighted_15o6u_lx7py_177:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_parent_15o6u_d2ghy_236.awsui_interactiveGroups_15o6u_d2ghy_240.awsui_highlighted_15o6u_d2ghy_177:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-yr1px8, #0f141a);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_parent_15o6u_lx7py_236.awsui_interactiveGroups_15o6u_lx7py_240.awsui_highlighted_15o6u_lx7py_177:not(#\9), .awsui_selectable-item_15o6u_lx7py_145.awsui_parent_15o6u_lx7py_236.awsui_interactiveGroups_15o6u_lx7py_240.awsui_selected_15o6u_lx7py_177:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_parent_15o6u_d2ghy_236.awsui_interactiveGroups_15o6u_d2ghy_240.awsui_highlighted_15o6u_d2ghy_177:not(#\9), .awsui_selectable-item_15o6u_d2ghy_145.awsui_parent_15o6u_d2ghy_236.awsui_interactiveGroups_15o6u_d2ghy_240.awsui_selected_15o6u_d2ghy_177:not(#\9) {
   padding-block: var(--space-xs-ymlm0b, 8px);
   padding-inline: var(--space-field-horizontal-0aq2ch, 12px);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_child_15o6u_lx7py_256:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_child_15o6u_d2ghy_256:not(#\9) {
   padding-inline-start: calc(var(--space-xxl-32srm4, 32px) + var(--border-item-width-miijiw, 2px));
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_child_15o6u_lx7py_256.awsui_highlighted_15o6u_lx7py_177:not(#\9), .awsui_selectable-item_15o6u_lx7py_145.awsui_child_15o6u_lx7py_256.awsui_selected_15o6u_lx7py_177:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_child_15o6u_d2ghy_256.awsui_highlighted_15o6u_d2ghy_177:not(#\9), .awsui_selectable-item_15o6u_d2ghy_145.awsui_child_15o6u_d2ghy_256.awsui_selected_15o6u_d2ghy_177:not(#\9) {
   padding-inline-start: var(--space-xxl-32srm4, 32px);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262:not(#\9) {
   position: sticky;
   inset-block-start: 0;
   margin-block-end: calc(var(--border-item-width-miijiw, 2px) - var(--border-divider-list-width-tdfx1x, 1px));
   z-index: 4;
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262:not(#\9):not(.awsui_highlighted_15o6u_lx7py_177):not(.awsui_selected_15o6u_lx7py_177) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262:not(#\9):not(.awsui_highlighted_15o6u_d2ghy_177):not(.awsui_selected_15o6u_d2ghy_177) {
   border-inline-start-width: var(--border-item-width-miijiw, 2px);
   border-inline-start-color: var(--color-border-dropdown-container-cmthq7, #b4b4bb);
   border-inline-end-color: var(--color-border-dropdown-container-cmthq7, #b4b4bb);
   padding-inline: var(--space-field-horizontal-0aq2ch, 12px);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262:not(#\9):not(.awsui_highlighted_15o6u_lx7py_177):not(.awsui_selected_15o6u_lx7py_177):not(.awsui_with-scrollbar_15o6u_lx7py_274) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262:not(#\9):not(.awsui_highlighted_15o6u_d2ghy_177):not(.awsui_selected_15o6u_d2ghy_177):not(.awsui_with-scrollbar_15o6u_d2ghy_274) {
   border-inline-end-width: var(--border-item-width-miijiw, 2px);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262:not(#\9):not(.awsui_highlighted_15o6u_lx7py_177):not(.awsui_selected_15o6u_lx7py_177).awsui_with-scrollbar_15o6u_lx7py_274 {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262:not(#\9):not(.awsui_highlighted_15o6u_d2ghy_177):not(.awsui_selected_15o6u_d2ghy_177).awsui_with-scrollbar_15o6u_d2ghy_274 {
   border-inline-end-width: 0;
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262:not(#\9):not(.awsui_highlighted_15o6u_lx7py_177):not(.awsui_selected_15o6u_lx7py_177):not(.awsui_after-header_15o6u_lx7py_280) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262:not(#\9):not(.awsui_highlighted_15o6u_d2ghy_177):not(.awsui_selected_15o6u_d2ghy_177):not(.awsui_after-header_15o6u_d2ghy_280) {
   border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262:not(#\9):not(.awsui_highlighted_15o6u_lx7py_177):not(.awsui_selected_15o6u_lx7py_177):not(.awsui_after-header_15o6u_lx7py_280):not(.awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262:not(.awsui_highlighted_15o6u_lx7py_177):not(.awsui_selected_15o6u_lx7py_177):not(.awsui_after-header_15o6u_lx7py_280).awsui_with-scrollbar_15o6u_lx7py_274) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262:not(#\9):not(.awsui_highlighted_15o6u_d2ghy_177):not(.awsui_selected_15o6u_d2ghy_177):not(.awsui_after-header_15o6u_d2ghy_280):not(.awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262:not(.awsui_highlighted_15o6u_d2ghy_177):not(.awsui_selected_15o6u_d2ghy_177):not(.awsui_after-header_15o6u_d2ghy_280).awsui_with-scrollbar_15o6u_d2ghy_274) {
   border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262:not(#\9):not(.awsui_highlighted_15o6u_lx7py_177):not(.awsui_selected_15o6u_lx7py_177).awsui_after-header_15o6u_lx7py_280 {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262:not(#\9):not(.awsui_highlighted_15o6u_d2ghy_177):not(.awsui_selected_15o6u_d2ghy_177).awsui_after-header_15o6u_d2ghy_280 {
   border-block-start-color: var(--color-background-dropdown-item-default-qmc033, #ffffff);
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262.awsui_disabled_15o6u_lx7py_195.awsui_highlighted_15o6u_lx7py_177:not(#\9), .awsui_selectable-item_15o6u_lx7py_145.awsui_sticky_15o6u_lx7py_262.awsui_disabled_15o6u_lx7py_195.awsui_selected_15o6u_lx7py_177:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262.awsui_disabled_15o6u_d2ghy_195.awsui_highlighted_15o6u_d2ghy_177:not(#\9), .awsui_selectable-item_15o6u_d2ghy_145.awsui_sticky_15o6u_d2ghy_262.awsui_disabled_15o6u_d2ghy_195.awsui_selected_15o6u_d2ghy_177:not(#\9) {
   border-block-end-color: transparent;
   border-block-start-color: transparent;
   border-inline-start-color: transparent;
   border-inline-end-color: transparent;
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_disabled_15o6u_lx7py_195:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_disabled_15o6u_d2ghy_195:not(#\9) {
   color: var(--color-text-dropdown-item-disabled-8m65hf, #b4b4bb);
 }
-.awsui_selectable-item_15o6u_lx7py_145:not(#\9):not(.awsui_disabled_15o6u_lx7py_195):not(.awsui_parent_15o6u_lx7py_236) {
+.awsui_selectable-item_15o6u_d2ghy_145:not(#\9):not(.awsui_disabled_15o6u_d2ghy_195):not(.awsui_parent_15o6u_d2ghy_236) {
   cursor: pointer;
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_interactiveGroups_15o6u_lx7py_240:not(#\9):not(.awsui_disabled_15o6u_lx7py_195) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_interactiveGroups_15o6u_d2ghy_240:not(#\9):not(.awsui_disabled_15o6u_d2ghy_195) {
   cursor: pointer;
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_virtual_15o6u_lx7py_171:not(#\9) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_virtual_15o6u_d2ghy_171:not(#\9) {
   position: absolute;
   inset-block-start: var(--border-dropdown-virtual-offset-width-3wp954, 2px);
   inset-inline-start: 0;
   inline-size: 100%;
   box-sizing: border-box;
 }
-.awsui_selectable-item_15o6u_lx7py_145.awsui_virtual_15o6u_lx7py_171:not(#\9):first-of-type:not(.awsui_selected_15o6u_lx7py_177, .awsui_highlighted_15o6u_lx7py_177) {
+.awsui_selectable-item_15o6u_d2ghy_145.awsui_virtual_15o6u_d2ghy_171:not(#\9):first-of-type:not(.awsui_selected_15o6u_d2ghy_177, .awsui_highlighted_15o6u_d2ghy_177) {
   border-block-start-color: var(--color-border-dropdown-item-top-gp2d1p, transparent);
 }
 
-.awsui_measure-strut_15o6u_lx7py_315:not(#\9) {
+.awsui_measure-strut_15o6u_d2ghy_315:not(#\9) {
   position: absolute;
   pointer-events: none;
   block-size: 100%;
@@ -321,20 +321,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-start: 0;
   padding-block-start: var(--border-divider-list-width-tdfx1x, 1px);
 }
-.awsui_measure-strut-first_15o6u_lx7py_324:not(#\9) {
+.awsui_measure-strut-first_15o6u_d2ghy_324:not(#\9) {
   padding-block-end: var(--border-divider-list-width-tdfx1x, 1px);
 }
 
-.awsui_screenreader-content_15o6u_lx7py_328:not(#\9) {
+.awsui_screenreader-content_15o6u_d2ghy_328:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;
 }
 
-.awsui_option-content_15o6u_lx7py_334:not(#\9) {
+.awsui_option-content_15o6u_d2ghy_334:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_select-all_15o6u_lx7py_338:not(#\9) {
+.awsui_select-all_15o6u_d2ghy_338:not(#\9) {
   /* used in test-utils */
 }

package/internal/components/selectable-item/styles.selectors.js

@@ -2,26 +2,27 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "selectable-item": "awsui_selectable-item_15o6u_lx7py_145",
-  "pad-bottom": "awsui_pad-bottom_15o6u_lx7py_167",
-  "virtual": "awsui_virtual_15o6u_lx7py_171",
-  "has-background": "awsui_has-background_15o6u_lx7py_174",
-  "highlighted": "awsui_highlighted_15o6u_lx7py_177",
-  "selected": "awsui_selected_15o6u_lx7py_177",
-  "disabled": "awsui_disabled_15o6u_lx7py_195",
-  "is-keyboard": "awsui_is-keyboard_15o6u_lx7py_200",
-  "visual-refresh": "awsui_visual-refresh_15o6u_lx7py_203",
-  "next-item-selected": "awsui_next-item-selected_15o6u_lx7py_211",
-  "parent": "awsui_parent_15o6u_lx7py_236",
-  "interactiveGroups": "awsui_interactiveGroups_15o6u_lx7py_240",
-  "child": "awsui_child_15o6u_lx7py_256",
-  "sticky": "awsui_sticky_15o6u_lx7py_262",
-  "with-scrollbar": "awsui_with-scrollbar_15o6u_lx7py_274",
-  "after-header": "awsui_after-header_15o6u_lx7py_280",
-  "measure-strut": "awsui_measure-strut_15o6u_lx7py_315",
-  "measure-strut-first": "awsui_measure-strut-first_15o6u_lx7py_324",
-  "screenreader-content": "awsui_screenreader-content_15o6u_lx7py_328",
-  "option-content": "awsui_option-content_15o6u_lx7py_334",
-  "select-all": "awsui_select-all_15o6u_lx7py_338"
+  "selectable-item": "awsui_selectable-item_15o6u_d2ghy_145",
+  "pad-bottom": "awsui_pad-bottom_15o6u_d2ghy_167",
+  "virtual": "awsui_virtual_15o6u_d2ghy_171",
+  "has-background": "awsui_has-background_15o6u_d2ghy_174",
+  "highlighted": "awsui_highlighted_15o6u_d2ghy_177",
+  "selected": "awsui_selected_15o6u_d2ghy_177",
+  "disabled": "awsui_disabled_15o6u_d2ghy_195",
+  "is-keyboard": "awsui_is-keyboard_15o6u_d2ghy_200",
+  "visual-refresh": "awsui_visual-refresh_15o6u_d2ghy_203",
+  "next-item-selected": "awsui_next-item-selected_15o6u_d2ghy_211",
+  "previous-item-selected": "awsui_previous-item-selected_15o6u_d2ghy_232",
+  "parent": "awsui_parent_15o6u_d2ghy_236",
+  "interactiveGroups": "awsui_interactiveGroups_15o6u_d2ghy_240",
+  "child": "awsui_child_15o6u_d2ghy_256",
+  "sticky": "awsui_sticky_15o6u_d2ghy_262",
+  "with-scrollbar": "awsui_with-scrollbar_15o6u_d2ghy_274",
+  "after-header": "awsui_after-header_15o6u_d2ghy_280",
+  "measure-strut": "awsui_measure-strut_15o6u_d2ghy_315",
+  "measure-strut-first": "awsui_measure-strut-first_15o6u_d2ghy_324",
+  "screenreader-content": "awsui_screenreader-content_15o6u_d2ghy_328",
+  "option-content": "awsui_option-content_15o6u_d2ghy_334",
+  "select-all": "awsui_select-all_15o6u_d2ghy_338"
 };
   

package/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (1f4503d4)";
-export var GIT_SHA = "1f4503d4";
+export var PACKAGE_VERSION = "3.0.0 (9f816a3e)";
+export var GIT_SHA = "9f816a3e";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "console";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (1f4503d4)",
-  "GIT_SHA": "1f4503d4",
+  "PACKAGE_VERSION": "3.0.0 (9f816a3e)",
+  "GIT_SHA": "9f816a3e",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "console",
   "ALWAYS_VISUAL_REFRESH": true

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "1f4503d4084c01fdf47f46d1c15e0edc4616eb8e"
+  "commit": "9f816a3e258bbbc00bc023c3cb0276552441c427"
 }

package/internal/utils/with-native-attributes.d.ts

@@ -5,6 +5,7 @@ type NativeAttributesProps<AT extends React.HTMLAttributes<HTMLElement>> = {
   children?: ReactNode;
   skipWarnings?: boolean;
   nativeAttributes: NativeAttributes<AT>;
+  componentName: string;
 } & NativeAttributes<AT>;
 interface ForwardRefType {
   <ET extends HTMLElement, AT extends React.HTMLAttributes<ET>>(props: NativeAttributesProps<AT> & {

package/internal/utils/with-native-attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-native-attributes.d.ts","sourceRoot":"","sources":["../../../../src/internal/utils/with-native-attributes.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,IACpE,CAAC,IAAI,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,GACxD,SAAS,CAAC;AAEd,KAAK,qBAAqB,CAAC,EAAE,SAAS,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI;IACzE,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,CAAC,CAAC;CACxC,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACzB,UAAU,cAAc;IACtB,CAAC,EAAE,SAAS,WAAW,EAAE,EAAE,SAAS,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,EAC1D,KAAK,EAAE,qBAAqB,CAAC,EAAE,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;KAAE,GACzD,GAAG,CAAC,OAAO,CAAC;CAChB;;AAED,wBAyCoB"}
+{"version":3,"file":"with-native-attributes.d.ts","sourceRoot":"","sources":["../../../../src/internal/utils/with-native-attributes.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,IACpE,CAAC,IAAI,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,GACxD,SAAS,CAAC;AAEd,KAAK,qBAAqB,CAAC,EAAE,SAAS,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI;IACzE,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,CAAC,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACzB,UAAU,cAAc;IACtB,CAAC,EAAE,SAAS,WAAW,EAAE,EAAE,SAAS,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,EAC1D,KAAK,EAAE,qBAAqB,CAAC,EAAE,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;KAAE,GACzD,GAAG,CAAC,OAAO,CAAC;CAChB;;AAED,wBAyCoB"}

package/internal/utils/with-native-attributes.js

@@ -5,7 +5,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 export default React.forwardRef((_a, ref) => {
-    var { tag, nativeAttributes, children, skipWarnings } = _a, rest = __rest(_a, ["tag", "nativeAttributes", "children", "skipWarnings"]);
+    var { tag, nativeAttributes, children, skipWarnings, componentName } = _a, rest = __rest(_a, ["tag", "nativeAttributes", "children", "skipWarnings", "componentName"]);
     const Tag = tag;
     const processedAttributes = Object.entries(nativeAttributes || {}).reduce((acc, [key, value]) => {
         // concatenate className
@@ -28,7 +28,7 @@ export default React.forwardRef((_a, ref) => {
         }
         else {
             if (key in rest && !skipWarnings) {
-                warnOnce('Button', `Overriding native attribute [${key}] which has a Cloudscape-provided value`);
+                warnOnce(componentName, `Overriding native attribute [${key}] which has a Cloudscape-provided value`);
             }
             acc[key] = value;
         }

package/internal/utils/with-native-attributes.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-native-attributes.js","sourceRoot":"","sources":["../../../../src/internal/utils/with-native-attributes.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAkBzE,eAAe,KAAK,CAAC,UAAU,CAC7B,CACE,EAAqF,EACrF,GAAkB,EAClB,EAAE;QAFF,EAAE,GAAG,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,OAAsC,EAAjC,IAAI,cAAxD,uDAA0D,CAAF;IAGxD,MAAM,GAAG,GAAG,GAAG,CAAC;IAEhB,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC9F,wBAAwB;QACxB,IAAI,GAAG,KAAK,WAAW,EAAE;YACvB,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAEvC,cAAc;SACf;aAAM,IAAI,GAAG,KAAK,OAAO,EAAE;YAC1B,GAAG,CAAC,GAAG,CAAC,mCAAQ,IAAI,CAAC,KAAK,GAAK,KAAK,CAAE,CAAC;YAEvC,uBAAuB;SACxB;aAAM,IAAI,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,KAAK,KAAK,UAAU,IAAI,GAAG,IAAI,IAAI,EAAE;YAC9E,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAY,EAAE,EAAE;gBAC1B,KAAK,CAAC,KAAK,CAAC,CAAC;gBACb,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;oBAC1B,IAAY,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;iBAC3B;YACH,CAAC,CAAC;YAEF,0DAA0D;SAC3D;aAAM;YACL,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;gBAChC,QAAQ,CAAC,QAAQ,EAAE,gCAAgC,GAAG,yCAAyC,CAAC,CAAC;aAClG;YACD,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;SAClB;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAS,CAAC,CAAC;IAEd,OAAO,CACL,oBAAC,GAAG,oBAAK,IAAI,EAAM,mBAAmB,IAAE,GAAG,EAAE,GAAG,KAC7C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ReactNode } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nexport type NativeAttributes<T extends React.HTMLAttributes<HTMLElement>> =\n  | (Omit<T, 'children'> & Record<`data-${string}`, string>)\n  | undefined;\n\ntype NativeAttributesProps<AT extends React.HTMLAttributes<HTMLElement>> = {\n  tag: string;\n  children?: ReactNode;\n  skipWarnings?: boolean;\n  nativeAttributes: NativeAttributes<AT>;\n} & NativeAttributes<AT>;\ninterface ForwardRefType {\n  <ET extends HTMLElement, AT extends React.HTMLAttributes<ET>>(\n    props: NativeAttributesProps<AT> & { ref?: React.Ref<ET> }\n  ): JSX.Element;\n}\n\nexport default React.forwardRef(\n  <ET extends HTMLElement, AT extends React.HTMLAttributes<ET>>(\n    { tag, nativeAttributes, children, skipWarnings, ...rest }: NativeAttributesProps<AT>,\n    ref: React.Ref<ET>\n  ) => {\n    const Tag = tag;\n\n    const processedAttributes = Object.entries(nativeAttributes || {}).reduce((acc, [key, value]) => {\n      // concatenate className\n      if (key === 'className') {\n        acc[key] = clsx(rest.className, value);\n\n        // merge style\n      } else if (key === 'style') {\n        acc[key] = { ...rest.style, ...value };\n\n        // chain event handlers\n      } else if (key.match(/^on[A-Z]/) && typeof value === 'function' && key in rest) {\n        acc[key] = (event: Event) => {\n          value(event);\n          if (!event.defaultPrevented) {\n            (rest as any)[key](event);\n          }\n        };\n\n        // override other attributes, warning if it already exists\n      } else {\n        if (key in rest && !skipWarnings) {\n          warnOnce('Button', `Overriding native attribute [${key}] which has a Cloudscape-provided value`);\n        }\n        acc[key] = value;\n      }\n      return acc;\n    }, {} as any);\n\n    return (\n      <Tag {...rest} {...processedAttributes} ref={ref}>\n        {children}\n      </Tag>\n    );\n  }\n) as ForwardRefType;\n"]}
+{"version":3,"file":"with-native-attributes.js","sourceRoot":"","sources":["../../../../src/internal/utils/with-native-attributes.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAmBzE,eAAe,KAAK,CAAC,UAAU,CAC7B,CACE,EAAoG,EACpG,GAAkB,EAClB,EAAE;QAFF,EAAE,GAAG,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,OAAsC,EAAjC,IAAI,cAAvE,wEAAyE,CAAF;IAGvE,MAAM,GAAG,GAAG,GAAG,CAAC;IAEhB,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC9F,wBAAwB;QACxB,IAAI,GAAG,KAAK,WAAW,EAAE;YACvB,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAEvC,cAAc;SACf;aAAM,IAAI,GAAG,KAAK,OAAO,EAAE;YAC1B,GAAG,CAAC,GAAG,CAAC,mCAAQ,IAAI,CAAC,KAAK,GAAK,KAAK,CAAE,CAAC;YAEvC,uBAAuB;SACxB;aAAM,IAAI,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,KAAK,KAAK,UAAU,IAAI,GAAG,IAAI,IAAI,EAAE;YAC9E,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAY,EAAE,EAAE;gBAC1B,KAAK,CAAC,KAAK,CAAC,CAAC;gBACb,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;oBAC1B,IAAY,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;iBAC3B;YACH,CAAC,CAAC;YAEF,0DAA0D;SAC3D;aAAM;YACL,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE;gBAChC,QAAQ,CAAC,aAAa,EAAE,gCAAgC,GAAG,yCAAyC,CAAC,CAAC;aACvG;YACD,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;SAClB;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAS,CAAC,CAAC;IAEd,OAAO,CACL,oBAAC,GAAG,oBAAK,IAAI,EAAM,mBAAmB,IAAE,GAAG,EAAE,GAAG,KAC7C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ReactNode } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nexport type NativeAttributes<T extends React.HTMLAttributes<HTMLElement>> =\n  | (Omit<T, 'children'> & Record<`data-${string}`, string>)\n  | undefined;\n\ntype NativeAttributesProps<AT extends React.HTMLAttributes<HTMLElement>> = {\n  tag: string;\n  children?: ReactNode;\n  skipWarnings?: boolean;\n  nativeAttributes: NativeAttributes<AT>;\n  componentName: string;\n} & NativeAttributes<AT>;\ninterface ForwardRefType {\n  <ET extends HTMLElement, AT extends React.HTMLAttributes<ET>>(\n    props: NativeAttributesProps<AT> & { ref?: React.Ref<ET> }\n  ): JSX.Element;\n}\n\nexport default React.forwardRef(\n  <ET extends HTMLElement, AT extends React.HTMLAttributes<ET>>(\n    { tag, nativeAttributes, children, skipWarnings, componentName, ...rest }: NativeAttributesProps<AT>,\n    ref: React.Ref<ET>\n  ) => {\n    const Tag = tag;\n\n    const processedAttributes = Object.entries(nativeAttributes || {}).reduce((acc, [key, value]) => {\n      // concatenate className\n      if (key === 'className') {\n        acc[key] = clsx(rest.className, value);\n\n        // merge style\n      } else if (key === 'style') {\n        acc[key] = { ...rest.style, ...value };\n\n        // chain event handlers\n      } else if (key.match(/^on[A-Z]/) && typeof value === 'function' && key in rest) {\n        acc[key] = (event: Event) => {\n          value(event);\n          if (!event.defaultPrevented) {\n            (rest as any)[key](event);\n          }\n        };\n\n        // override other attributes, warning if it already exists\n      } else {\n        if (key in rest && !skipWarnings) {\n          warnOnce(componentName, `Overriding native attribute [${key}] which has a Cloudscape-provided value`);\n        }\n        acc[key] = value;\n      }\n      return acc;\n    }, {} as any);\n\n    return (\n      <Tag {...rest} {...processedAttributes} ref={ref}>\n        {children}\n      </Tag>\n    );\n  }\n) as ForwardRefType;\n"]}

package/multiselect/use-multiselect.d.ts

@@ -74,10 +74,11 @@ export declare function useMultiselect({
     onMouseUp?: ((itemIndex: number) => void) | undefined;
     nativeAttributes?: Record<string, any> | undefined;
     ariaLabel?: string | undefined;
+    tagOverride?: "div" | "ul" | undefined;
     statusType: DropdownStatusProps.StatusType;
     decreaseBlockMargin?: boolean | undefined;
     stickyItemBlockSize?: number | null | undefined;
-    ref: React.RefObject<HTMLUListElement>;
+    ref: React.RefObject<HTMLDivElement>;
   };
   getOptionProps: (option: DropdownOption, index: number) => any;
   getTokenProps: () => {

package/multiselect/use-multiselect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,mBAAmB,EAAqB,MAAM,wCAAwC,CAAC;AAChG,OAAO,EAAE,cAAc,EAAiC,MAAM,0CAA0C,CAAC;AAIzG,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAO7D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,KAAK,qBAAqB,GAAG,YAAY,CACvC,IAAI,CACF,gBAAgB,EACd,SAAS,GACT,iBAAiB,GACjB,eAAe,GACf,sBAAsB,GACtB,UAAU,GACV,SAAS,GACT,2BAA2B,GAC3B,mBAAmB,GACnB,UAAU,GACV,QAAQ,GACR,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,iBAAiB,GACjB,aAAa,CAChB,GACC,mBAAmB,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CAC9C,EACH,SAAS,GAAG,iBAAiB,GAAG,eAAe,GAAG,YAAY,GAAG,UAAU,CAC5E,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3B,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,eAAe,EACf,WAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAuLc,gBAAgB;;;;;;;;;;EA0CrD"}
+{"version":3,"file":"use-multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,mBAAmB,EAAqB,MAAM,wCAAwC,CAAC;AAChG,OAAO,EAAE,cAAc,EAAiC,MAAM,0CAA0C,CAAC;AAIzG,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAO7D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,KAAK,qBAAqB,GAAG,YAAY,CACvC,IAAI,CACF,gBAAgB,EACd,SAAS,GACT,iBAAiB,GACjB,eAAe,GACf,sBAAsB,GACtB,UAAU,GACV,SAAS,GACT,2BAA2B,GAC3B,mBAAmB,GACnB,UAAU,GACV,QAAQ,GACR,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,iBAAiB,GACjB,aAAa,CAChB,GACC,mBAAmB,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CAC9C,EACH,SAAS,GAAG,iBAAiB,GAAG,eAAe,GAAG,YAAY,GAAG,UAAU,CAC5E,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3B,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,eAAe,EACf,WAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAuLc,gBAAgB;;;;;;;;;;EA0CrD"}

package/navigable-group/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavigableGroupProps } from './interfaces';
+export { NavigableGroupProps };
+/**
+ * @awsuiSystem core
+ */
+declare const NavigableGroup: React.ForwardRefExoticComponent<NavigableGroupProps & React.RefAttributes<NavigableGroupProps.Ref>>;
+export default NavigableGroup;

package/navigable-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigable-group/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B;;GAEG;AACH,QAAA,MAAM,cAAc,qGAMlB,CAAC;AAGH,eAAe,cAAc,CAAC"}

package/navigable-group/index.js

@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import { __rest } from "tslib";
+import React from 'react';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import InternalNavigableGroup from './internal';
+/**
+ * @awsuiSystem core
+ */
+const NavigableGroup = React.forwardRef((_a, ref) => {
+    var rest = __rest(_a, []);
+    const baseProps = getBaseProps(rest);
+    const baseComponentProps = useBaseComponent('NavigableGroup');
+    const externalProps = getExternalProps(rest);
+    return React.createElement(InternalNavigableGroup, Object.assign({}, baseProps, baseComponentProps, externalProps, { ref: ref }));
+});
+applyDisplayName(NavigableGroup, 'NavigableGroup');
+export default NavigableGroup;
+//# sourceMappingURL=index.js.map

package/navigable-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/navigable-group/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,sBAAsB,MAAM,YAAY,CAAC;AAIhD;;GAEG;AACH,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAgC,EAAE,GAAuC,EAAE,EAAE;QAAxE,IAAI,cAAT,EAAW,CAAF;IAChD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC9D,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,oBAAC,sBAAsB,oBAAK,SAAS,EAAM,kBAAkB,EAAM,aAAa,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AACxG,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AACnD,eAAe,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 { getBaseProps } 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 { NavigableGroupProps } from './interfaces';\nimport InternalNavigableGroup from './internal';\n\nexport { NavigableGroupProps };\n\n/**\n * @awsuiSystem core\n */\nconst NavigableGroup = React.forwardRef(({ ...rest }: NavigableGroupProps, ref: React.Ref<NavigableGroupProps.Ref>) => {\n  const baseProps = getBaseProps(rest);\n  const baseComponentProps = useBaseComponent('NavigableGroup');\n  const externalProps = getExternalProps(rest);\n\n  return <InternalNavigableGroup {...baseProps} {...baseComponentProps} {...externalProps} ref={ref} />;\n});\n\napplyDisplayName(NavigableGroup, 'NavigableGroup');\nexport default NavigableGroup;\n"]}

package/navigable-group/interfaces.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { BaseComponentProps } from '../internal/base-component';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+export interface NavigableGroupProps extends BaseComponentProps {
+  /**
+   * The children that will be rendered inside the navigation group.
+   *
+   * The following Cloudscape components are supported, but do not
+   * need to be direct children of the group:
+   * - Button
+   * - Button dropdown
+   * - Toggle button
+   * - Link
+   */
+  children: React.ReactNode;
+  /**
+   * A method that should return a unique identifier for a given element.
+   * The element passed will be the first focusable descendent of a child component.
+   */
+  getItemKey: (element: HTMLElement) => string;
+  /**
+   * Determines which arrow keys move focus sequentially within the group:
+   * - `horizontal` - left and right arrow keys
+   * - `vertical` - up and down arrow keys
+   * - `both` - all arrow keys
+   */
+  navigationDirection?: 'horizontal' | 'vertical' | 'both';
+}
+export interface InternalNavigableGroupProps extends NavigableGroupProps, InternalBaseComponentProps {}
+export declare namespace NavigableGroupProps {
+  interface Ref {
+    /**
+     * Focuses the first focusable element (or previously focused element) in the navigation group.
+     */
+    focus(): void;
+  }
+}