@cloudscape-design/components 3.0.29 → 3.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (185) hide show
  1. package/app-layout/index.d.ts.map +1 -1
  2. package/app-layout/index.js +6 -21
  3. package/app-layout/index.js.map +1 -1
  4. package/app-layout/notifications/index.d.ts.map +1 -1
  5. package/app-layout/notifications/index.js +5 -16
  6. package/app-layout/notifications/index.js.map +1 -1
  7. package/app-layout/notifications/styles.css.js +1 -1
  8. package/app-layout/notifications/styles.scoped.css +2 -1
  9. package/app-layout/notifications/styles.selectors.js +1 -1
  10. package/app-layout/visual-refresh/styles.css.js +59 -59
  11. package/app-layout/visual-refresh/styles.scoped.css +146 -146
  12. package/app-layout/visual-refresh/styles.selectors.js +59 -59
  13. package/autosuggest/autosuggest-option.d.ts +1 -0
  14. package/autosuggest/autosuggest-option.d.ts.map +1 -1
  15. package/autosuggest/autosuggest-option.js +2 -2
  16. package/autosuggest/autosuggest-option.js.map +1 -1
  17. package/autosuggest/controller.d.ts +2 -5
  18. package/autosuggest/controller.d.ts.map +1 -1
  19. package/autosuggest/controller.js +5 -49
  20. package/autosuggest/controller.js.map +1 -1
  21. package/autosuggest/internal.d.ts +0 -7
  22. package/autosuggest/internal.d.ts.map +1 -1
  23. package/autosuggest/internal.js +23 -40
  24. package/autosuggest/internal.js.map +1 -1
  25. package/autosuggest/options-controller.d.ts +25 -0
  26. package/autosuggest/options-controller.d.ts.map +1 -0
  27. package/autosuggest/options-controller.js +64 -0
  28. package/autosuggest/options-controller.js.map +1 -0
  29. package/autosuggest/options-list.d.ts +3 -2
  30. package/autosuggest/options-list.d.ts.map +1 -1
  31. package/autosuggest/options-list.js +8 -7
  32. package/autosuggest/options-list.js.map +1 -1
  33. package/autosuggest/plain-list.d.ts +2 -2
  34. package/autosuggest/plain-list.d.ts.map +1 -1
  35. package/autosuggest/plain-list.js +4 -4
  36. package/autosuggest/plain-list.js.map +1 -1
  37. package/autosuggest/virtual-list.d.ts +1 -1
  38. package/autosuggest/virtual-list.d.ts.map +1 -1
  39. package/autosuggest/virtual-list.js +4 -4
  40. package/autosuggest/virtual-list.js.map +1 -1
  41. package/button-dropdown/category-elements/category-element.d.ts +1 -1
  42. package/button-dropdown/category-elements/category-element.d.ts.map +1 -1
  43. package/button-dropdown/category-elements/category-element.js +2 -2
  44. package/button-dropdown/category-elements/category-element.js.map +1 -1
  45. package/button-dropdown/category-elements/expandable-category-element.d.ts +1 -1
  46. package/button-dropdown/category-elements/expandable-category-element.d.ts.map +1 -1
  47. package/button-dropdown/category-elements/expandable-category-element.js +4 -2
  48. package/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
  49. package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts +1 -1
  50. package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map +1 -1
  51. package/button-dropdown/category-elements/mobile-expandable-category-element.js +4 -2
  52. package/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
  53. package/button-dropdown/category-elements/styles.css.js +13 -12
  54. package/button-dropdown/category-elements/styles.scoped.css +26 -22
  55. package/button-dropdown/category-elements/styles.selectors.js +13 -12
  56. package/button-dropdown/interfaces.d.ts +2 -0
  57. package/button-dropdown/interfaces.d.ts.map +1 -1
  58. package/button-dropdown/interfaces.js.map +1 -1
  59. package/button-dropdown/internal.d.ts.map +1 -1
  60. package/button-dropdown/internal.js +5 -10
  61. package/button-dropdown/internal.js.map +1 -1
  62. package/button-dropdown/item-element/index.d.ts +1 -1
  63. package/button-dropdown/item-element/index.d.ts.map +1 -1
  64. package/button-dropdown/item-element/index.js +2 -1
  65. package/button-dropdown/item-element/index.js.map +1 -1
  66. package/button-dropdown/item-element/styles.css.js +14 -13
  67. package/button-dropdown/item-element/styles.scoped.css +21 -17
  68. package/button-dropdown/item-element/styles.selectors.js +14 -13
  69. package/button-dropdown/items-list.d.ts +1 -1
  70. package/button-dropdown/items-list.d.ts.map +1 -1
  71. package/button-dropdown/items-list.js +4 -4
  72. package/button-dropdown/items-list.js.map +1 -1
  73. package/button-dropdown/utils/use-button-dropdown.d.ts +2 -2
  74. package/button-dropdown/utils/use-button-dropdown.d.ts.map +1 -1
  75. package/button-dropdown/utils/use-button-dropdown.js +7 -5
  76. package/button-dropdown/utils/use-button-dropdown.js.map +1 -1
  77. package/button-dropdown/utils/use-highlighted-menu.d.ts +1 -0
  78. package/button-dropdown/utils/use-highlighted-menu.d.ts.map +1 -1
  79. package/button-dropdown/utils/use-highlighted-menu.js +11 -3
  80. package/button-dropdown/utils/use-highlighted-menu.js.map +1 -1
  81. package/checkbox/styles.css.js +3 -3
  82. package/checkbox/styles.scoped.css +6 -6
  83. package/checkbox/styles.selectors.js +3 -3
  84. package/date-range-picker/dropdown.d.ts +1 -0
  85. package/date-range-picker/dropdown.d.ts.map +1 -1
  86. package/date-range-picker/dropdown.js +18 -30
  87. package/date-range-picker/dropdown.js.map +1 -1
  88. package/date-range-picker/embedded.d.ts +7 -0
  89. package/date-range-picker/embedded.d.ts.map +1 -0
  90. package/date-range-picker/embedded.js +46 -0
  91. package/date-range-picker/embedded.js.map +1 -0
  92. package/date-range-picker/index.d.ts.map +1 -1
  93. package/date-range-picker/index.js +2 -15
  94. package/date-range-picker/index.js.map +1 -1
  95. package/date-range-picker/interfaces.d.ts +46 -44
  96. package/date-range-picker/interfaces.d.ts.map +1 -1
  97. package/date-range-picker/interfaces.js.map +1 -1
  98. package/date-range-picker/use-date-range-picker.d.ts +29 -0
  99. package/date-range-picker/use-date-range-picker.d.ts.map +1 -0
  100. package/date-range-picker/use-date-range-picker.js +58 -0
  101. package/date-range-picker/use-date-range-picker.js.map +1 -0
  102. package/internal/components/abstract-switch/index.d.ts.map +1 -1
  103. package/internal/components/abstract-switch/index.js +5 -5
  104. package/internal/components/abstract-switch/index.js.map +1 -1
  105. package/internal/components/abstract-switch/styles.css.js +11 -11
  106. package/internal/components/abstract-switch/styles.scoped.css +20 -13
  107. package/internal/components/abstract-switch/styles.selectors.js +11 -11
  108. package/internal/components/options-list/utils/use-highlight-option.d.ts +7 -2
  109. package/internal/components/options-list/utils/use-highlight-option.d.ts.map +1 -1
  110. package/internal/components/options-list/utils/use-highlight-option.js +10 -3
  111. package/internal/components/options-list/utils/use-highlight-option.js.map +1 -1
  112. package/internal/components/selectable-item/index.d.ts +1 -1
  113. package/internal/components/selectable-item/index.d.ts.map +1 -1
  114. package/internal/components/selectable-item/index.js +2 -2
  115. package/internal/components/selectable-item/index.js.map +1 -1
  116. package/internal/components/selectable-item/styles.css.js +16 -16
  117. package/internal/components/selectable-item/styles.scoped.css +29 -30
  118. package/internal/components/selectable-item/styles.selectors.js +16 -16
  119. package/internal/environment.js +1 -1
  120. package/multiselect/internal.d.ts.map +1 -1
  121. package/multiselect/internal.js +2 -2
  122. package/multiselect/internal.js.map +1 -1
  123. package/package.json +1 -1
  124. package/property-filter/controller.d.ts +2 -2
  125. package/property-filter/controller.js +3 -3
  126. package/property-filter/controller.js.map +1 -1
  127. package/property-filter/index.d.ts.map +1 -1
  128. package/property-filter/index.js +3 -3
  129. package/property-filter/index.js.map +1 -1
  130. package/property-filter/property-filter-autosuggest.d.ts +14 -0
  131. package/property-filter/property-filter-autosuggest.d.ts.map +1 -0
  132. package/property-filter/property-filter-autosuggest.js +143 -0
  133. package/property-filter/property-filter-autosuggest.js.map +1 -0
  134. package/radio-group/styles.css.js +9 -9
  135. package/radio-group/styles.scoped.css +16 -16
  136. package/radio-group/styles.selectors.js +9 -9
  137. package/select/internal.d.ts.map +1 -1
  138. package/select/internal.js +2 -2
  139. package/select/internal.js.map +1 -1
  140. package/select/parts/item.d.ts +1 -1
  141. package/select/parts/item.d.ts.map +1 -1
  142. package/select/parts/item.js +6 -3
  143. package/select/parts/item.js.map +1 -1
  144. package/select/parts/multiselect-item.d.ts +1 -1
  145. package/select/parts/multiselect-item.d.ts.map +1 -1
  146. package/select/parts/multiselect-item.js +2 -2
  147. package/select/parts/multiselect-item.js.map +1 -1
  148. package/select/parts/plain-list.d.ts +1 -1
  149. package/select/parts/plain-list.d.ts.map +1 -1
  150. package/select/parts/plain-list.js +4 -4
  151. package/select/parts/plain-list.js.map +1 -1
  152. package/select/parts/styles.css.js +8 -7
  153. package/select/parts/styles.scoped.css +12 -7
  154. package/select/parts/styles.selectors.js +8 -7
  155. package/select/parts/virtual-list.js +4 -4
  156. package/select/parts/virtual-list.js.map +1 -1
  157. package/select/utils/get-item-props.d.ts +1 -2
  158. package/select/utils/get-item-props.d.ts.map +1 -1
  159. package/select/utils/get-item-props.js +3 -3
  160. package/select/utils/get-item-props.js.map +1 -1
  161. package/select/utils/render-options.d.ts +2 -2
  162. package/select/utils/render-options.d.ts.map +1 -1
  163. package/select/utils/render-options.js +2 -3
  164. package/select/utils/render-options.js.map +1 -1
  165. package/select/utils/use-select.d.ts +1 -0
  166. package/select/utils/use-select.d.ts.map +1 -1
  167. package/select/utils/use-select.js +2 -1
  168. package/select/utils/use-select.js.map +1 -1
  169. package/toggle/internal.d.ts.map +1 -1
  170. package/toggle/internal.js +3 -1
  171. package/toggle/internal.js.map +1 -1
  172. package/toggle/styles.css.js +8 -8
  173. package/toggle/styles.scoped.css +15 -14
  174. package/toggle/styles.selectors.js +8 -8
  175. package/app-layout/dark-header/index.d.ts +0 -11
  176. package/app-layout/dark-header/index.d.ts.map +0 -1
  177. package/app-layout/dark-header/index.js +0 -10
  178. package/app-layout/dark-header/index.js.map +0 -1
  179. package/app-layout/dark-header/styles.css.js +0 -6
  180. package/app-layout/dark-header/styles.scoped.css +0 -13
  181. package/app-layout/dark-header/styles.selectors.js +0 -7
  182. package/app-layout/utils/use-sticky-position.d.ts +0 -2
  183. package/app-layout/utils/use-sticky-position.d.ts.map +0 -1
  184. package/app-layout/utils/use-sticky-position.js +0 -54
  185. package/app-layout/utils/use-sticky-position.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAErF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,0BAA0B;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC1F,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAMD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,EACL,WAAW,EACX,wBAAwB,EACxB,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eAyErB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAErF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,0BAA0B;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC1F,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAMD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,EACL,WAAW,EACX,wBAAwB,EACxB,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eA4ErB"}
@@ -40,13 +40,13 @@ export default function AbstractSwitch(_a) {
40
40
  }
41
41
  return (React.createElement("div", __assign({}, rest, { className: clsx(styles.wrapper, rest.className), ref: __internalRootRef }),
42
42
  React.createElement(WrapperElement, __assign({}, wrapperAttributes, { className: styles['label-wrapper'], "aria-disabled": disabled ? 'true' : undefined }),
43
- React.createElement("div", { className: clsx(styles.control, controlClassName) },
43
+ React.createElement("span", { className: clsx(styles.control, controlClassName) },
44
44
  styledControl,
45
45
  nativeControl(__assign(__assign({}, focusVisible), { id: id, disabled: disabled, 'aria-describedby': ariaDescriptons.length ? joinString(ariaDescriptons) : undefined, 'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined, 'aria-label': ariaLabel })),
46
- React.createElement("div", { className: styles.outline })),
47
- React.createElement("div", { className: clsx(styles.content, !label && !description && styles['empty-content']) },
48
- label && (React.createElement("div", { id: labelId, className: clsx(styles.label, (_b = {}, _b[styles['label-disabled']] = disabled, _b)) }, label)),
49
- description && (React.createElement("div", { id: descriptionId, className: clsx(styles.description, (_c = {},
46
+ React.createElement("span", { className: styles.outline })),
47
+ React.createElement("span", { className: clsx(styles.content, !label && !description && styles['empty-content']) },
48
+ label && (React.createElement("span", { id: labelId, className: clsx(styles.label, (_b = {}, _b[styles['label-disabled']] = disabled, _b)) }, label)),
49
+ description && (React.createElement("span", { id: descriptionId, className: clsx(styles.description, (_c = {},
50
50
  _c[styles['description-disabled']] = disabled,
51
51
  _c[styles['description-bottom-padding']] = descriptionBottomPadding,
52
52
  _c)) }, description))))));
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/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 from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport useFocusVisible from '../../hooks/focus-visible';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component/index.js';\n\nexport interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>, InternalBaseComponentProps {\n controlId?: string;\n controlClassName: string;\n disabled?: boolean;\n nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;\n styledControl: React.ReactElement;\n label?: React.ReactNode;\n description?: React.ReactNode;\n descriptionBottomPadding?: boolean;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n withoutLabel?: boolean;\n}\n\nfunction joinString(values: (string | undefined)[]) {\n return values.filter((value): value is string => !!value).join(' ');\n}\n\nexport default function AbstractSwitch({\n controlId,\n controlClassName,\n disabled,\n nativeControl,\n styledControl,\n label,\n description,\n descriptionBottomPadding,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n withoutLabel,\n __internalRootRef,\n ...rest\n}: AbstractSwitchProps) {\n const uniqueId = useUniqueId();\n const id = controlId || uniqueId;\n\n const focusVisible = useFocusVisible();\n const wrapperId = `${id}-wrapper`;\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n\n const WrapperElement = withoutLabel ? 'div' : 'label';\n const wrapperAttributes: Record<string, string | undefined> = {};\n if (!withoutLabel) {\n wrapperAttributes.id = wrapperId;\n wrapperAttributes.htmlFor = id;\n }\n\n const ariaLabelledByIds = [];\n if (label) {\n ariaLabelledByIds.push(labelId);\n }\n if (ariaLabelledby) {\n ariaLabelledByIds.push(ariaLabelledby);\n }\n\n const ariaDescriptons = [];\n if (ariaDescribedby) {\n ariaDescriptons.push(ariaDescribedby);\n }\n if (description) {\n ariaDescriptons.push(descriptionId);\n }\n\n return (\n <div {...rest} className={clsx(styles.wrapper, rest.className)} ref={__internalRootRef}>\n <WrapperElement\n {...wrapperAttributes}\n className={styles['label-wrapper']}\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className={clsx(styles.control, controlClassName)}>\n {styledControl}\n {nativeControl({\n ...focusVisible,\n id,\n disabled,\n 'aria-describedby': ariaDescriptons.length ? joinString(ariaDescriptons) : undefined,\n 'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined,\n 'aria-label': ariaLabel,\n })}\n {/*An empty div to display the outline, because the native control is invisible*/}\n <div className={styles.outline} />\n </div>\n <div className={clsx(styles.content, !label && !description && styles['empty-content'])}>\n {label && (\n <div id={labelId} className={clsx(styles.label, { [styles['label-disabled']]: disabled })}>\n {label}\n </div>\n )}\n {description && (\n <div\n id={descriptionId}\n className={clsx(styles.description, {\n [styles['description-disabled']]: disabled,\n [styles['description-bottom-padding']]: descriptionBottomPadding,\n })}\n >\n {description}\n </div>\n )}\n </div>\n </WrapperElement>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/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 from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport useFocusVisible from '../../hooks/focus-visible';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component/index.js';\n\nexport interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>, InternalBaseComponentProps {\n controlId?: string;\n controlClassName: string;\n disabled?: boolean;\n nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;\n styledControl: React.ReactElement;\n label?: React.ReactNode;\n description?: React.ReactNode;\n descriptionBottomPadding?: boolean;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n withoutLabel?: boolean;\n}\n\nfunction joinString(values: (string | undefined)[]) {\n return values.filter((value): value is string => !!value).join(' ');\n}\n\nexport default function AbstractSwitch({\n controlId,\n controlClassName,\n disabled,\n nativeControl,\n styledControl,\n label,\n description,\n descriptionBottomPadding,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n withoutLabel,\n __internalRootRef,\n ...rest\n}: AbstractSwitchProps) {\n const uniqueId = useUniqueId();\n const id = controlId || uniqueId;\n\n const focusVisible = useFocusVisible();\n const wrapperId = `${id}-wrapper`;\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n\n const WrapperElement = withoutLabel ? 'div' : 'label';\n const wrapperAttributes: Record<string, string | undefined> = {};\n if (!withoutLabel) {\n wrapperAttributes.id = wrapperId;\n wrapperAttributes.htmlFor = id;\n }\n\n const ariaLabelledByIds = [];\n if (label) {\n ariaLabelledByIds.push(labelId);\n }\n if (ariaLabelledby) {\n ariaLabelledByIds.push(ariaLabelledby);\n }\n\n const ariaDescriptons = [];\n if (ariaDescribedby) {\n ariaDescriptons.push(ariaDescribedby);\n }\n if (description) {\n ariaDescriptons.push(descriptionId);\n }\n\n return (\n <div {...rest} className={clsx(styles.wrapper, rest.className)} ref={__internalRootRef}>\n <WrapperElement\n {...wrapperAttributes}\n className={styles['label-wrapper']}\n aria-disabled={disabled ? 'true' : undefined}\n >\n <span className={clsx(styles.control, controlClassName)}>\n {styledControl}\n {nativeControl({\n ...focusVisible,\n id,\n disabled,\n 'aria-describedby': ariaDescriptons.length ? joinString(ariaDescriptons) : undefined,\n 'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined,\n 'aria-label': ariaLabel,\n })}\n {/*\n An empty element to display the outline, because the native control is invisible.\n Note: There is a CSS selector in src/toggle/styles.scss that relies on a span element selector to show focus.\n */}\n <span className={styles.outline} />\n </span>\n <span className={clsx(styles.content, !label && !description && styles['empty-content'])}>\n {label && (\n <span id={labelId} className={clsx(styles.label, { [styles['label-disabled']]: disabled })}>\n {label}\n </span>\n )}\n {description && (\n <span\n id={descriptionId}\n className={clsx(styles.description, {\n [styles['description-disabled']]: disabled,\n [styles['description-bottom-padding']]: descriptionBottomPadding,\n })}\n >\n {description}\n </span>\n )}\n </span>\n </WrapperElement>\n </div>\n );\n}\n"]}
@@ -1,16 +1,16 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "wrapper": "awsui_wrapper_1wepg_jmdbs_93",
5
- "label-wrapper": "awsui_label-wrapper_1wepg_jmdbs_100",
6
- "content": "awsui_content_1wepg_jmdbs_105",
7
- "empty-content": "awsui_empty-content_1wepg_jmdbs_111",
8
- "description": "awsui_description_1wepg_jmdbs_115",
9
- "description-bottom-padding": "awsui_description-bottom-padding_1wepg_jmdbs_121",
10
- "label": "awsui_label_1wepg_jmdbs_100",
11
- "label-disabled": "awsui_label-disabled_1wepg_jmdbs_129",
12
- "description-disabled": "awsui_description-disabled_1wepg_jmdbs_130",
13
- "control": "awsui_control_1wepg_jmdbs_135",
14
- "outline": "awsui_outline_1wepg_jmdbs_138"
4
+ "content": "awsui_content_1wepg_dwz1x_93",
5
+ "description": "awsui_description_1wepg_dwz1x_94",
6
+ "label": "awsui_label_1wepg_dwz1x_95",
7
+ "outline": "awsui_outline_1wepg_dwz1x_96",
8
+ "wrapper": "awsui_wrapper_1wepg_dwz1x_100",
9
+ "label-wrapper": "awsui_label-wrapper_1wepg_dwz1x_107",
10
+ "empty-content": "awsui_empty-content_1wepg_dwz1x_118",
11
+ "description-bottom-padding": "awsui_description-bottom-padding_1wepg_dwz1x_128",
12
+ "label-disabled": "awsui_label-disabled_1wepg_dwz1x_136",
13
+ "description-disabled": "awsui_description-disabled_1wepg_dwz1x_137",
14
+ "control": "awsui_control_1wepg_dwz1x_142"
15
15
  };
16
16
 
@@ -90,59 +90,66 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_wrapper_1wepg_jmdbs_93:not(#\9) {
93
+ .awsui_content_1wepg_dwz1x_93:not(#\9),
94
+ .awsui_description_1wepg_dwz1x_94:not(#\9),
95
+ .awsui_label_1wepg_dwz1x_95:not(#\9),
96
+ .awsui_outline_1wepg_dwz1x_96:not(#\9) {
97
+ display: block;
98
+ }
99
+
100
+ .awsui_wrapper_1wepg_dwz1x_100:not(#\9) {
94
101
  min-width: 0;
95
102
  -ms-word-break: break-all;
96
103
  word-break: break-word;
97
104
  display: flex;
98
105
  }
99
106
 
100
- .awsui_label-wrapper_1wepg_jmdbs_100:not(#\9) {
107
+ .awsui_label-wrapper_1wepg_dwz1x_107:not(#\9) {
101
108
  position: relative;
102
109
  display: flex;
103
110
  }
104
111
 
105
- .awsui_content_1wepg_jmdbs_105:not(#\9) {
112
+ .awsui_content_1wepg_dwz1x_93:not(#\9) {
106
113
  min-width: 0;
107
114
  -ms-word-break: break-all;
108
115
  word-break: break-word;
109
116
  }
110
117
 
111
- .awsui_empty-content_1wepg_jmdbs_111:not(#\9) {
118
+ .awsui_empty-content_1wepg_dwz1x_118:not(#\9) {
112
119
  width: 0px;
113
120
  }
114
121
 
115
- .awsui_description_1wepg_jmdbs_115:not(#\9) {
122
+ .awsui_description_1wepg_dwz1x_94:not(#\9) {
116
123
  color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
117
124
  font-size: var(--font-body-s-size-ukw2p9, 12px);
118
125
  line-height: var(--font-body-s-line-height-kdsbrl, 16px);
119
126
  letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
120
127
  }
121
- .awsui_description-bottom-padding_1wepg_jmdbs_121:not(#\9) {
128
+ .awsui_description-bottom-padding_1wepg_dwz1x_128:not(#\9) {
122
129
  padding-bottom: var(--space-scaled-xxs-95dhkm, 4px);
123
130
  }
124
131
 
125
- .awsui_label_1wepg_jmdbs_100:not(#\9),
126
- .awsui_description_1wepg_jmdbs_115:not(#\9) {
132
+ .awsui_label_1wepg_dwz1x_95:not(#\9),
133
+ .awsui_description_1wepg_dwz1x_94:not(#\9) {
127
134
  padding-left: var(--space-xs-rsr2qu, 8px);
128
135
  }
129
- .awsui_label-disabled_1wepg_jmdbs_129:not(#\9),
130
- .awsui_description-disabled_1wepg_jmdbs_130:not(#\9) {
136
+ .awsui_label-disabled_1wepg_dwz1x_136:not(#\9),
137
+ .awsui_description-disabled_1wepg_dwz1x_137:not(#\9) {
131
138
  color: var(--color-text-control-disabled-3z3eul, #9ba7b6);
132
139
  }
133
140
 
134
141
  /* stylelint-disable selector-max-type */
135
- .awsui_control_1wepg_jmdbs_135:not(#\9) {
142
+ .awsui_control_1wepg_dwz1x_142:not(#\9) {
136
143
  position: relative;
137
144
  }
138
- .awsui_control_1wepg_jmdbs_135 > input:not(#\9), .awsui_control_1wepg_jmdbs_135 > svg:not(#\9), .awsui_control_1wepg_jmdbs_135 > .awsui_outline_1wepg_jmdbs_138:not(#\9) {
145
+ .awsui_control_1wepg_dwz1x_142 > input:not(#\9), .awsui_control_1wepg_dwz1x_142 > svg:not(#\9), .awsui_control_1wepg_dwz1x_142 > .awsui_outline_1wepg_dwz1x_96:not(#\9) {
139
146
  position: absolute;
140
147
  width: 100%;
141
148
  height: 100%;
142
149
  top: 0;
143
150
  left: 0;
144
151
  }
145
- .awsui_control_1wepg_jmdbs_135 > input:not(#\9) {
152
+ .awsui_control_1wepg_dwz1x_142 > input:not(#\9) {
146
153
  opacity: 0;
147
154
  z-index: 1;
148
155
  -webkit-user-select: none;
@@ -2,16 +2,16 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "wrapper": "awsui_wrapper_1wepg_jmdbs_93",
6
- "label-wrapper": "awsui_label-wrapper_1wepg_jmdbs_100",
7
- "content": "awsui_content_1wepg_jmdbs_105",
8
- "empty-content": "awsui_empty-content_1wepg_jmdbs_111",
9
- "description": "awsui_description_1wepg_jmdbs_115",
10
- "description-bottom-padding": "awsui_description-bottom-padding_1wepg_jmdbs_121",
11
- "label": "awsui_label_1wepg_jmdbs_100",
12
- "label-disabled": "awsui_label-disabled_1wepg_jmdbs_129",
13
- "description-disabled": "awsui_description-disabled_1wepg_jmdbs_130",
14
- "control": "awsui_control_1wepg_jmdbs_135",
15
- "outline": "awsui_outline_1wepg_jmdbs_138"
5
+ "content": "awsui_content_1wepg_dwz1x_93",
6
+ "description": "awsui_description_1wepg_dwz1x_94",
7
+ "label": "awsui_label_1wepg_dwz1x_95",
8
+ "outline": "awsui_outline_1wepg_dwz1x_96",
9
+ "wrapper": "awsui_wrapper_1wepg_dwz1x_100",
10
+ "label-wrapper": "awsui_label-wrapper_1wepg_dwz1x_107",
11
+ "empty-content": "awsui_empty-content_1wepg_dwz1x_118",
12
+ "description-bottom-padding": "awsui_description-bottom-padding_1wepg_dwz1x_128",
13
+ "label-disabled": "awsui_label-disabled_1wepg_dwz1x_136",
14
+ "description-disabled": "awsui_description-disabled_1wepg_dwz1x_137",
15
+ "control": "awsui_control_1wepg_dwz1x_142"
16
16
  };
17
17
 
@@ -1,8 +1,13 @@
1
+ import { MutableRefObject } from 'react';
1
2
  export declare function createHighlightedOptionHook<OptionType>({ isHighlightable, }: {
2
3
  isHighlightable: (option: OptionType) => boolean;
3
- }): (options: ReadonlyArray<OptionType>) => {
4
- setHighlightedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
4
+ }): ({ options, isKeyboard, }: {
5
+ options: ReadonlyArray<OptionType>;
6
+ isKeyboard: MutableRefObject<boolean>;
7
+ }) => {
8
+ setHighlightedIndex: (index: number) => void;
5
9
  highlightedIndex: number;
10
+ highlightedType: "mouse" | "keyboard";
6
11
  highlightedOption: OptionType | undefined;
7
12
  moveHighlight: (direction: -1 | 1) => void;
8
13
  resetHighlight: () => void;
@@ -1 +1 @@
1
- {"version":3,"file":"use-highlight-option.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAIA,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,EACtD,eAAe,GAChB,EAAE;IACD,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC;CAClD,aAC+C,cAAc,UAAU,CAAC;;;;+BAgBnC,CAAC,CAAC,GAAG,CAAC;;;;8BAG7B,UAAU;EAkBxB"}
1
+ {"version":3,"file":"use-highlight-option.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,OAAO,CAAC;AAEhE,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,EACtD,eAAe,GAChB,EAAE;IACD,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC;CAClD;aAKY,cAAc,UAAU,CAAC;gBACtB,iBAAiB,OAAO,CAAC;;iCAO3B,MAAM;;;;+BAoBkB,CAAC,CAAC,GAAG,CAAC;;;;8BAG7B,UAAU;EAmBxB"}
@@ -3,8 +3,14 @@
3
3
  import { useCallback, useState } from 'react';
4
4
  export function createHighlightedOptionHook(_a) {
5
5
  var isHighlightable = _a.isHighlightable;
6
- return function useHighlightedOption(options) {
7
- var _a = useState(-1), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
6
+ return function useHighlightedOption(_a) {
7
+ var options = _a.options, isKeyboard = _a.isKeyboard;
8
+ var _b = useState(-1), highlightedIndex = _b[0], setHighlightedIndexState = _b[1];
9
+ var _c = useState(isKeyboard.current ? 'keyboard' : 'mouse'), highlightedType = _c[0], setHighlightedType = _c[1];
10
+ var setHighlightedIndex = useCallback(function (index) {
11
+ setHighlightedIndexState(index);
12
+ setHighlightedType(isKeyboard.current ? 'keyboard' : 'mouse');
13
+ }, [isKeyboard]);
8
14
  var highlightedOption = options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;
9
15
  var moveHighlightFrom = function (direction, startIndex) {
10
16
  if (startIndex === void 0) { startIndex = highlightedIndex; }
@@ -20,10 +26,11 @@ export function createHighlightedOptionHook(_a) {
20
26
  var highlightOption = useCallback(function (option) {
21
27
  var index = options.indexOf(option);
22
28
  setHighlightedIndex(index);
23
- }, [options]);
29
+ }, [options, setHighlightedIndex]);
24
30
  return {
25
31
  setHighlightedIndex: setHighlightedIndex,
26
32
  highlightedIndex: highlightedIndex,
33
+ highlightedType: highlightedType,
27
34
  highlightedOption: highlightedOption,
28
35
  moveHighlight: moveHighlight,
29
36
  resetHighlight: function () { return setHighlightedIndex(-1); },
@@ -1 +1 @@
1
- {"version":3,"file":"use-highlight-option.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,UAAU,2BAA2B,CAAa,EAIvD;QAHC,eAAe,qBAAA;IAIf,OAAO,SAAS,oBAAoB,CAAC,OAAkC;QAC/D,IAAA,KAA0C,QAAQ,CAAC,CAAC,CAAC,CAAC,EAArD,gBAAgB,QAAA,EAAE,mBAAmB,QAAgB,CAAC;QAC7D,IAAM,iBAAiB,GACrB,OAAO,CAAC,gBAAgB,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAElH,IAAM,iBAAiB,GAAG,UAAC,SAAiB,EAAE,UAA6B;YAA7B,2BAAA,EAAA,6BAA6B;YACzE,IAAI,QAAQ,GAAG,UAAU,CAAC;YAC1B,GAAG;gBACD,QAAQ,IAAI,SAAS,CAAC;aACvB,QAAQ,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE;YAEnE,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACrB,mBAAmB,CAAC,QAAQ,CAAC,CAAC;aAC/B;QACH,CAAC,CAAC;QAEF,IAAM,aAAa,GAAG,UAAC,SAAiB,IAAK,OAAA,iBAAiB,CAAC,SAAS,CAAC,EAA5B,CAA4B,CAAC;QAE1E,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,MAAkB;YACjB,IAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACtC,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;QAEF,OAAO;YACL,mBAAmB,qBAAA;YACnB,gBAAgB,kBAAA;YAChB,iBAAiB,mBAAA;YACjB,aAAa,eAAA;YACb,cAAc,EAAE,cAAM,OAAA,mBAAmB,CAAC,CAAC,CAAC,CAAC,EAAvB,CAAuB;YAC7C,MAAM,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAxB,CAAwB;YACtC,KAAK,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAArC,CAAqC;YAClD,eAAe,iBAAA;SAChB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useState } from 'react';\n\nexport function createHighlightedOptionHook<OptionType>({\n isHighlightable,\n}: {\n isHighlightable: (option: OptionType) => boolean;\n}) {\n return function useHighlightedOption(options: ReadonlyArray<OptionType>) {\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\n const highlightedOption =\n options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;\n\n const moveHighlightFrom = (direction: -1 | 1, startIndex = highlightedIndex) => {\n let newIndex = startIndex;\n do {\n newIndex += direction;\n } while (options[newIndex] && !isHighlightable(options[newIndex]));\n\n if (options[newIndex]) {\n setHighlightedIndex(newIndex);\n }\n };\n\n const moveHighlight = (direction: -1 | 1) => moveHighlightFrom(direction);\n\n const highlightOption = useCallback(\n (option: OptionType) => {\n const index = options.indexOf(option);\n setHighlightedIndex(index);\n },\n [options]\n );\n\n return {\n setHighlightedIndex,\n highlightedIndex,\n highlightedOption,\n moveHighlight,\n resetHighlight: () => setHighlightedIndex(-1),\n goHome: () => moveHighlightFrom(1, -1),\n goEnd: () => moveHighlightFrom(-1, options.length),\n highlightOption,\n };\n };\n}\n"]}
1
+ {"version":3,"file":"use-highlight-option.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAoB,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,UAAU,2BAA2B,CAAa,EAIvD;QAHC,eAAe,qBAAA;IAIf,OAAO,SAAS,oBAAoB,CAAC,EAMpC;YALC,OAAO,aAAA,EACP,UAAU,gBAAA;QAKJ,IAAA,KAA+C,QAAQ,CAAC,CAAC,CAAC,CAAC,EAA1D,gBAAgB,QAAA,EAAE,wBAAwB,QAAgB,CAAC;QAC5D,IAAA,KAAwC,QAAQ,CACpD,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAC1C,EAFM,eAAe,QAAA,EAAE,kBAAkB,QAEzC,CAAC;QACF,IAAM,mBAAmB,GAAG,WAAW,CACrC,UAAC,KAAa;YACZ,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAChC,kBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAChE,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;QACF,IAAM,iBAAiB,GACrB,OAAO,CAAC,gBAAgB,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAElH,IAAM,iBAAiB,GAAG,UAAC,SAAiB,EAAE,UAA6B;YAA7B,2BAAA,EAAA,6BAA6B;YACzE,IAAI,QAAQ,GAAG,UAAU,CAAC;YAC1B,GAAG;gBACD,QAAQ,IAAI,SAAS,CAAC;aACvB,QAAQ,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE;YAEnE,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACrB,mBAAmB,CAAC,QAAQ,CAAC,CAAC;aAC/B;QACH,CAAC,CAAC;QAEF,IAAM,aAAa,GAAG,UAAC,SAAiB,IAAK,OAAA,iBAAiB,CAAC,SAAS,CAAC,EAA5B,CAA4B,CAAC;QAE1E,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,MAAkB;YACjB,IAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACtC,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,EACD,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAC/B,CAAC;QAEF,OAAO;YACL,mBAAmB,qBAAA;YACnB,gBAAgB,kBAAA;YAChB,eAAe,iBAAA;YACf,iBAAiB,mBAAA;YACjB,aAAa,eAAA;YACb,cAAc,EAAE,cAAM,OAAA,mBAAmB,CAAC,CAAC,CAAC,CAAC,EAAvB,CAAuB;YAC7C,MAAM,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAxB,CAAwB;YACtC,KAAK,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAArC,CAAqC;YAClD,eAAe,iBAAA;SAChB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject, useCallback, useState } from 'react';\n\nexport function createHighlightedOptionHook<OptionType>({\n isHighlightable,\n}: {\n isHighlightable: (option: OptionType) => boolean;\n}) {\n return function useHighlightedOption({\n options,\n isKeyboard,\n }: {\n options: ReadonlyArray<OptionType>;\n isKeyboard: MutableRefObject<boolean>;\n }) {\n const [highlightedIndex, setHighlightedIndexState] = useState(-1);\n const [highlightedType, setHighlightedType] = useState<'mouse' | 'keyboard'>(\n isKeyboard.current ? 'keyboard' : 'mouse'\n );\n const setHighlightedIndex = useCallback(\n (index: number) => {\n setHighlightedIndexState(index);\n setHighlightedType(isKeyboard.current ? 'keyboard' : 'mouse');\n },\n [isKeyboard]\n );\n const highlightedOption =\n options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;\n\n const moveHighlightFrom = (direction: -1 | 1, startIndex = highlightedIndex) => {\n let newIndex = startIndex;\n do {\n newIndex += direction;\n } while (options[newIndex] && !isHighlightable(options[newIndex]));\n\n if (options[newIndex]) {\n setHighlightedIndex(newIndex);\n }\n };\n\n const moveHighlight = (direction: -1 | 1) => moveHighlightFrom(direction);\n\n const highlightOption = useCallback(\n (option: OptionType) => {\n const index = options.indexOf(option);\n setHighlightedIndex(index);\n },\n [options, setHighlightedIndex]\n );\n\n return {\n setHighlightedIndex,\n highlightedIndex,\n highlightedType,\n highlightedOption,\n moveHighlight,\n resetHighlight: () => setHighlightedIndex(-1),\n goHome: () => moveHighlightFrom(1, -1),\n goEnd: () => moveHighlightFrom(-1, options.length),\n highlightOption,\n };\n };\n}\n"]}
@@ -10,7 +10,6 @@ export interface SelectableItemProps extends BaseComponentProps {
10
10
  hasBackground?: boolean;
11
11
  isParent?: boolean;
12
12
  isChild?: boolean;
13
- isKeyboard?: boolean;
14
13
  virtualPosition?: number;
15
14
  padBottom?: boolean;
16
15
  isNextSelected?: boolean;
@@ -18,6 +17,7 @@ export interface SelectableItemProps extends BaseComponentProps {
18
17
  screenReaderContent?: string;
19
18
  ariaPosinset?: number;
20
19
  ariaSetsize?: number;
20
+ highlightedType?: 'mouse' | 'keyboard';
21
21
  }
22
22
  declare const _default: React.ForwardRefExoticComponent<SelectableItemProps & React.RefAttributes<HTMLDivElement>>;
23
23
  export default _default;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAExE,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,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;CACtB;;AAmGD,wBAAgD"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAExE,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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,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,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACxC;;AAmGD,wBAAgD"}
@@ -7,7 +7,7 @@ import styles from './styles.css.js';
7
7
  import { getBaseProps } from '../../base-component';
8
8
  var SelectableItem = function (_a, ref) {
9
9
  var _b;
10
- var content = _a.children, ariaSelected = _a.ariaSelected, ariaChecked = _a.ariaChecked, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, hasBackground = _a.hasBackground, isParent = _a.isParent, isChild = _a.isChild, isKeyboard = _a.isKeyboard, virtualPosition = _a.virtualPosition, padBottom = _a.padBottom, isNextSelected = _a.isNextSelected, useInteractiveGroups = _a.useInteractiveGroups, screenReaderContent = _a.screenReaderContent, ariaPosinset = _a.ariaPosinset, ariaSetsize = _a.ariaSetsize, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "isKeyboard", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize"]);
10
+ var content = _a.children, ariaSelected = _a.ariaSelected, ariaChecked = _a.ariaChecked, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, hasBackground = _a.hasBackground, isParent = _a.isParent, isChild = _a.isChild, virtualPosition = _a.virtualPosition, padBottom = _a.padBottom, isNextSelected = _a.isNextSelected, useInteractiveGroups = _a.useInteractiveGroups, screenReaderContent = _a.screenReaderContent, ariaPosinset = _a.ariaPosinset, ariaSetsize = _a.ariaSetsize, highlightedType = _a.highlightedType, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightedType"]);
11
11
  var _c = getBaseProps(restProps), className = _c.className, rest = __rest(_c, ["className"]);
12
12
  var classNames = clsx(className, styles['selectable-item'], (_b = {},
13
13
  _b[styles.selected] = selected,
@@ -15,7 +15,7 @@ var SelectableItem = function (_a, ref) {
15
15
  _b[styles['has-background']] = hasBackground,
16
16
  _b[styles.parent] = isParent,
17
17
  _b[styles.child] = isChild,
18
- _b[styles['is-keyboard']] = isKeyboard,
18
+ _b[styles['is-keyboard']] = highlightedType === 'keyboard',
19
19
  _b[styles.disabled] = disabled,
20
20
  _b[styles.virtual] = virtualPosition !== undefined,
21
21
  _b[styles['pad-bottom']] = padBottom,
@@ -1 +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, { useRef, useLayoutEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\n\nexport interface SelectableItemProps extends BaseComponentProps {\n children: React.ReactNode;\n ariaSelected?: boolean;\n ariaChecked?: boolean;\n selected?: boolean;\n highlighted?: boolean;\n disabled?: boolean;\n hasBackground?: boolean;\n isParent?: boolean;\n isChild?: boolean;\n isKeyboard?: boolean;\n virtualPosition?: number;\n padBottom?: boolean;\n isNextSelected?: boolean;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaPosinset?: number;\n ariaSetsize?: number;\n}\n\nconst SelectableItem = (\n {\n children: content,\n ariaSelected,\n ariaChecked,\n selected,\n highlighted,\n disabled,\n hasBackground,\n isParent,\n isChild,\n isKeyboard,\n virtualPosition,\n padBottom,\n isNextSelected,\n useInteractiveGroups,\n screenReaderContent,\n ariaPosinset,\n ariaSetsize,\n ...restProps\n }: SelectableItemProps,\n ref: React.Ref<HTMLDivElement>\n) => {\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 [styles.child]: isChild,\n [styles['is-keyboard']]: isKeyboard,\n [styles.disabled]: disabled,\n [styles.virtual]: virtualPosition !== undefined,\n [styles['pad-bottom']]: padBottom,\n [styles['next-item-selected']]: isNextSelected,\n [styles.interactiveGroups]: useInteractiveGroups,\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) {\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) {\n a11yProperties['aria-checked'] = ariaChecked;\n }\n\n if (ariaPosinset && ariaSetsize) {\n a11yProperties['aria-posinset'] = ariaPosinset;\n a11yProperties['aria-setsize'] = ariaSetsize;\n }\n\n return (\n <li role=\"option\" className={classNames} style={style} {...a11yProperties} {...rest}>\n <div className={styles['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"]}
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, { useRef, useLayoutEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\n\nexport interface SelectableItemProps extends BaseComponentProps {\n children: React.ReactNode;\n ariaSelected?: boolean;\n ariaChecked?: boolean;\n selected?: boolean;\n highlighted?: boolean;\n disabled?: boolean;\n hasBackground?: boolean;\n isParent?: boolean;\n isChild?: boolean;\n virtualPosition?: number;\n padBottom?: boolean;\n isNextSelected?: boolean;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaPosinset?: number;\n ariaSetsize?: number;\n highlightedType?: 'mouse' | 'keyboard';\n}\n\nconst SelectableItem = (\n {\n children: content,\n ariaSelected,\n ariaChecked,\n selected,\n highlighted,\n disabled,\n hasBackground,\n isParent,\n isChild,\n virtualPosition,\n padBottom,\n isNextSelected,\n useInteractiveGroups,\n screenReaderContent,\n ariaPosinset,\n ariaSetsize,\n highlightedType,\n ...restProps\n }: SelectableItemProps,\n ref: React.Ref<HTMLDivElement>\n) => {\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 [styles.child]: isChild,\n [styles['is-keyboard']]: highlightedType === 'keyboard',\n [styles.disabled]: disabled,\n [styles.virtual]: virtualPosition !== undefined,\n [styles['pad-bottom']]: padBottom,\n [styles['next-item-selected']]: isNextSelected,\n [styles.interactiveGroups]: useInteractiveGroups,\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) {\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) {\n a11yProperties['aria-checked'] = ariaChecked;\n }\n\n if (ariaPosinset && ariaSetsize) {\n a11yProperties['aria-posinset'] = ariaPosinset;\n a11yProperties['aria-setsize'] = ariaSetsize;\n }\n\n return (\n <li role=\"option\" className={classNames} style={style} {...a11yProperties} {...rest}>\n <div className={styles['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"]}
@@ -1,21 +1,21 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "selectable-item": "awsui_selectable-item_15o6u_19j4z_93",
5
- "pad-bottom": "awsui_pad-bottom_15o6u_19j4z_113",
6
- "has-background": "awsui_has-background_15o6u_19j4z_122",
7
- "highlighted": "awsui_highlighted_15o6u_19j4z_125",
8
- "selected": "awsui_selected_15o6u_19j4z_125",
9
- "disabled": "awsui_disabled_15o6u_19j4z_139",
10
- "next-item-selected": "awsui_next-item-selected_15o6u_19j4z_149",
11
- "is-keyboard": "awsui_is-keyboard_15o6u_19j4z_157",
12
- "parent": "awsui_parent_15o6u_19j4z_160",
13
- "interactiveGroups": "awsui_interactiveGroups_15o6u_19j4z_164",
14
- "child": "awsui_child_15o6u_19j4z_176",
15
- "virtual": "awsui_virtual_15o6u_19j4z_191",
16
- "measure-strut": "awsui_measure-strut_15o6u_19j4z_202",
17
- "measure-strut-first": "awsui_measure-strut-first_15o6u_19j4z_211",
18
- "screenreader-content": "awsui_screenreader-content_15o6u_19j4z_215",
19
- "option-content": "awsui_option-content_15o6u_19j4z_221"
4
+ "selectable-item": "awsui_selectable-item_15o6u_1g6vu_93",
5
+ "pad-bottom": "awsui_pad-bottom_15o6u_1g6vu_113",
6
+ "has-background": "awsui_has-background_15o6u_1g6vu_122",
7
+ "highlighted": "awsui_highlighted_15o6u_1g6vu_125",
8
+ "selected": "awsui_selected_15o6u_1g6vu_125",
9
+ "disabled": "awsui_disabled_15o6u_1g6vu_139",
10
+ "next-item-selected": "awsui_next-item-selected_15o6u_1g6vu_147",
11
+ "is-keyboard": "awsui_is-keyboard_15o6u_1g6vu_155",
12
+ "parent": "awsui_parent_15o6u_1g6vu_159",
13
+ "interactiveGroups": "awsui_interactiveGroups_15o6u_1g6vu_163",
14
+ "child": "awsui_child_15o6u_1g6vu_175",
15
+ "virtual": "awsui_virtual_15o6u_1g6vu_190",
16
+ "measure-strut": "awsui_measure-strut_15o6u_1g6vu_201",
17
+ "measure-strut-first": "awsui_measure-strut-first_15o6u_1g6vu_210",
18
+ "screenreader-content": "awsui_screenreader-content_15o6u_1g6vu_214",
19
+ "option-content": "awsui_option-content_15o6u_1g6vu_220"
20
20
  };
21
21
 
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_selectable-item_15o6u_19j4z_93:not(#\9) {
93
+ .awsui_selectable-item_15o6u_1g6vu_93:not(#\9) {
94
94
  font-size: var(--font-body-m-size-sregvd, 14px);
95
95
  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
96
96
  color: var(--color-text-body-default-ajf1h5, #000716);
@@ -110,96 +110,95 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
110
110
  var(--space-xxs-ynfts5, 4px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
111
111
  ) calc(var(--space-field-horizontal-89h2yr, 12px) + var(--border-item-width-qbbbsa, 2px));
112
112
  }
113
- .awsui_selectable-item_15o6u_19j4z_93.awsui_pad-bottom_15o6u_19j4z_113:not(#\9) {
113
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_pad-bottom_15o6u_1g6vu_113:not(#\9) {
114
114
  padding-bottom: calc(calc(
115
115
  var(--space-xxs-ynfts5, 4px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
116
116
  ) + var(--space-xxxs-k2w98v, 2px));
117
117
  border-bottom-color: transparent;
118
118
  }
119
- .awsui_selectable-item_15o6u_19j4z_93:not(#\9):not(:first-child) {
119
+ .awsui_selectable-item_15o6u_1g6vu_93:not(#\9):not(:first-child) {
120
120
  margin-top: calc(-1 * var(--border-item-width-qbbbsa, 2px));
121
121
  }
122
- .awsui_selectable-item_15o6u_19j4z_93.awsui_has-background_15o6u_19j4z_122:not(#\9) {
122
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_has-background_15o6u_1g6vu_122:not(#\9) {
123
123
  background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
124
124
  }
125
- .awsui_selectable-item_15o6u_19j4z_93.awsui_highlighted_15o6u_19j4z_125:not(#\9), .awsui_selectable-item_15o6u_19j4z_93.awsui_selected_15o6u_19j4z_125:not(#\9) {
125
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125:not(#\9), .awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125:not(#\9) {
126
126
  color: var(--color-text-dropdown-item-highlighted-oaabyk, #000716);
127
127
  border-width: var(--border-item-width-qbbbsa, 2px);
128
128
  border-radius: var(--border-radius-item-u2ibpi, 8px);
129
129
  padding: var(--space-xxs-ynfts5, 4px) var(--space-field-horizontal-89h2yr, 12px);
130
130
  }
131
- .awsui_selectable-item_15o6u_19j4z_93.awsui_highlighted_15o6u_19j4z_125.awsui_pad-bottom_15o6u_19j4z_113:not(#\9), .awsui_selectable-item_15o6u_19j4z_93.awsui_selected_15o6u_19j4z_125.awsui_pad-bottom_15o6u_19j4z_113:not(#\9) {
131
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125.awsui_pad-bottom_15o6u_1g6vu_113:not(#\9), .awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125.awsui_pad-bottom_15o6u_1g6vu_113:not(#\9) {
132
132
  padding-bottom: calc(var(--space-xxs-ynfts5, 4px) + var(--space-xxxs-k2w98v, 2px));
133
133
  }
134
- .awsui_selectable-item_15o6u_19j4z_93.awsui_highlighted_15o6u_19j4z_125:not(#\9) {
134
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125:not(#\9) {
135
135
  z-index: 2;
136
136
  background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
137
137
  border-color: var(--color-border-dropdown-item-hover-tyzq9m, #7d8998);
138
138
  }
139
- .awsui_selectable-item_15o6u_19j4z_93.awsui_highlighted_15o6u_19j4z_125.awsui_disabled_15o6u_19j4z_139:not(#\9) {
139
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125.awsui_disabled_15o6u_1g6vu_139:not(#\9) {
140
140
  color: var(--color-text-dropdown-item-dimmed-jyqdrs, #9ba7b6);
141
141
  border-color: var(--color-border-dropdown-item-dimmed-hover-6dhy15, #7d8998);
142
142
  background-color: var(--color-background-dropdown-item-dimmed-qw48ma, transparent);
143
143
  }
144
- .awsui_selectable-item_15o6u_19j4z_93.awsui_selected_15o6u_19j4z_125:not(#\9) {
145
- z-index: 3;
144
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125:not(#\9) {
146
145
  background-color: var(--color-background-dropdown-item-selected-8l4mpk, #f2f8fd);
147
- border-color: var(--color-border-dropdown-item-selected-eahq2j, #0972d3);
148
146
  }
149
- .awsui_selectable-item_15o6u_19j4z_93.awsui_selected_15o6u_19j4z_125.awsui_next-item-selected_15o6u_19j4z_149:not(#\9) {
147
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125.awsui_next-item-selected_15o6u_1g6vu_147:not(#\9) {
150
148
  border-bottom-left-radius: 0;
151
149
  border-bottom-right-radius: 0;
152
150
  }
153
- .awsui_selectable-item_15o6u_19j4z_93.awsui_selected_15o6u_19j4z_125 + .awsui_selectable-item_15o6u_19j4z_93.awsui_selected_15o6u_19j4z_125:not(#\9) {
151
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125 + .awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125:not(#\9) {
154
152
  border-top-left-radius: 0;
155
153
  border-top-right-radius: 0;
156
154
  }
157
- .awsui_selectable-item_15o6u_19j4z_93.awsui_highlighted_15o6u_19j4z_125.awsui_selected_15o6u_19j4z_125.awsui_is-keyboard_15o6u_19j4z_157:not(#\9) {
158
- box-shadow: inset 0 0 0 1px var(--color-border-item-focused-ap3b6s, #0972d3);
155
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125.awsui_is-keyboard_15o6u_1g6vu_155:not(#\9) {
156
+ border-color: var(--color-border-item-focused-ap3b6s, #0972d3);
157
+ box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-srzyiu, 0px) var(--color-border-item-focused-ap3b6s, #0972d3);
159
158
  }
160
- .awsui_selectable-item_15o6u_19j4z_93.awsui_parent_15o6u_19j4z_160:not(#\9) {
159
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159:not(#\9) {
161
160
  font-weight: bold;
162
161
  color: var(--color-text-dropdown-group-label-eaqlcl, #414d5c);
163
162
  }
164
- .awsui_selectable-item_15o6u_19j4z_93.awsui_parent_15o6u_19j4z_160:not(#\9):not(.awsui_interactiveGroups_15o6u_19j4z_164) {
163
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159:not(#\9):not(.awsui_interactiveGroups_15o6u_1g6vu_163) {
165
164
  border-top-color: var(--color-border-dropdown-group-0utpsr, #e9ebed);
166
165
  padding: var(--space-xs-rsr2qu, 8px);
167
166
  }
168
- .awsui_selectable-item_15o6u_19j4z_93.awsui_parent_15o6u_19j4z_160.awsui_interactiveGroups_15o6u_19j4z_164:not(#\9) {
167
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159.awsui_interactiveGroups_15o6u_1g6vu_163:not(#\9) {
169
168
  padding: calc(
170
169
  var(--space-xs-rsr2qu, 8px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
171
170
  ) calc(var(--space-field-horizontal-89h2yr, 12px) + var(--border-item-width-qbbbsa, 2px));
172
171
  }
173
- .awsui_selectable-item_15o6u_19j4z_93.awsui_parent_15o6u_19j4z_160.awsui_interactiveGroups_15o6u_19j4z_164.awsui_highlighted_15o6u_19j4z_125:not(#\9), .awsui_selectable-item_15o6u_19j4z_93.awsui_parent_15o6u_19j4z_160.awsui_interactiveGroups_15o6u_19j4z_164.awsui_selected_15o6u_19j4z_125:not(#\9) {
172
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159.awsui_interactiveGroups_15o6u_1g6vu_163.awsui_highlighted_15o6u_1g6vu_125:not(#\9), .awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159.awsui_interactiveGroups_15o6u_1g6vu_163.awsui_selected_15o6u_1g6vu_125:not(#\9) {
174
173
  padding: var(--space-xs-rsr2qu, 8px) var(--space-field-horizontal-89h2yr, 12px);
175
174
  }
176
- .awsui_selectable-item_15o6u_19j4z_93.awsui_child_15o6u_19j4z_176:not(#\9) {
175
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_child_15o6u_1g6vu_175:not(#\9) {
177
176
  padding-left: calc(var(--space-xxl-2nvmf1, 32px) + var(--border-item-width-qbbbsa, 2px));
178
177
  }
179
- .awsui_selectable-item_15o6u_19j4z_93.awsui_child_15o6u_19j4z_176.awsui_highlighted_15o6u_19j4z_125:not(#\9), .awsui_selectable-item_15o6u_19j4z_93.awsui_child_15o6u_19j4z_176.awsui_selected_15o6u_19j4z_125:not(#\9) {
178
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_child_15o6u_1g6vu_175.awsui_highlighted_15o6u_1g6vu_125:not(#\9), .awsui_selectable-item_15o6u_1g6vu_93.awsui_child_15o6u_1g6vu_175.awsui_selected_15o6u_1g6vu_125:not(#\9) {
180
179
  padding-left: var(--space-xxl-2nvmf1, 32px);
181
180
  }
182
- .awsui_selectable-item_15o6u_19j4z_93.awsui_disabled_15o6u_19j4z_139:not(#\9) {
181
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_disabled_15o6u_1g6vu_139:not(#\9) {
183
182
  color: var(--color-text-dropdown-item-disabled-varol7, #9ba7b6);
184
183
  }
185
- .awsui_selectable-item_15o6u_19j4z_93:not(#\9):not(.awsui_disabled_15o6u_19j4z_139):not(.awsui_parent_15o6u_19j4z_160) {
184
+ .awsui_selectable-item_15o6u_1g6vu_93:not(#\9):not(.awsui_disabled_15o6u_1g6vu_139):not(.awsui_parent_15o6u_1g6vu_159) {
186
185
  cursor: pointer;
187
186
  }
188
- .awsui_selectable-item_15o6u_19j4z_93.awsui_interactiveGroups_15o6u_19j4z_164:not(#\9):not(.awsui_disabled_15o6u_19j4z_139) {
187
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_interactiveGroups_15o6u_1g6vu_163:not(#\9):not(.awsui_disabled_15o6u_1g6vu_139) {
189
188
  cursor: pointer;
190
189
  }
191
- .awsui_selectable-item_15o6u_19j4z_93.awsui_virtual_15o6u_19j4z_191:not(#\9) {
190
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_virtual_15o6u_1g6vu_190:not(#\9) {
192
191
  position: absolute;
193
192
  top: var(--border-dropdown-virtual-offset-width-fzhepk, 2px);
194
193
  left: 0;
195
194
  width: 100%;
196
195
  box-sizing: border-box;
197
196
  }
198
- .awsui_selectable-item_15o6u_19j4z_93.awsui_virtual_15o6u_19j4z_191:not(#\9):first-of-type:not(.awsui_selected_15o6u_19j4z_125, .awsui_highlighted_15o6u_19j4z_125) {
197
+ .awsui_selectable-item_15o6u_1g6vu_93.awsui_virtual_15o6u_1g6vu_190:not(#\9):first-of-type:not(.awsui_selected_15o6u_1g6vu_125, .awsui_highlighted_15o6u_1g6vu_125) {
199
198
  border-top-color: var(--color-border-dropdown-item-top-xnzq48, transparent);
200
199
  }
201
200
 
202
- .awsui_measure-strut_15o6u_19j4z_202:not(#\9) {
201
+ .awsui_measure-strut_15o6u_1g6vu_201:not(#\9) {
203
202
  position: absolute;
204
203
  pointer-events: none;
205
204
  height: 100%;
@@ -208,16 +207,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
208
207
  left: 0;
209
208
  padding-top: var(--border-divider-list-width-hacikr, 1px);
210
209
  }
211
- .awsui_measure-strut-first_15o6u_19j4z_211:not(#\9) {
210
+ .awsui_measure-strut-first_15o6u_1g6vu_210:not(#\9) {
212
211
  padding-bottom: var(--border-divider-list-width-hacikr, 1px);
213
212
  }
214
213
 
215
- .awsui_screenreader-content_15o6u_19j4z_215:not(#\9) {
214
+ .awsui_screenreader-content_15o6u_1g6vu_214:not(#\9) {
216
215
  position: absolute !important;
217
216
  top: -9999px !important;
218
217
  left: -9999px !important;
219
218
  }
220
219
 
221
- .awsui_option-content_15o6u_19j4z_221:not(#\9) {
220
+ .awsui_option-content_15o6u_1g6vu_220:not(#\9) {
222
221
  /* used in test-utils */
223
222
  }
@@ -2,21 +2,21 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "selectable-item": "awsui_selectable-item_15o6u_19j4z_93",
6
- "pad-bottom": "awsui_pad-bottom_15o6u_19j4z_113",
7
- "has-background": "awsui_has-background_15o6u_19j4z_122",
8
- "highlighted": "awsui_highlighted_15o6u_19j4z_125",
9
- "selected": "awsui_selected_15o6u_19j4z_125",
10
- "disabled": "awsui_disabled_15o6u_19j4z_139",
11
- "next-item-selected": "awsui_next-item-selected_15o6u_19j4z_149",
12
- "is-keyboard": "awsui_is-keyboard_15o6u_19j4z_157",
13
- "parent": "awsui_parent_15o6u_19j4z_160",
14
- "interactiveGroups": "awsui_interactiveGroups_15o6u_19j4z_164",
15
- "child": "awsui_child_15o6u_19j4z_176",
16
- "virtual": "awsui_virtual_15o6u_19j4z_191",
17
- "measure-strut": "awsui_measure-strut_15o6u_19j4z_202",
18
- "measure-strut-first": "awsui_measure-strut-first_15o6u_19j4z_211",
19
- "screenreader-content": "awsui_screenreader-content_15o6u_19j4z_215",
20
- "option-content": "awsui_option-content_15o6u_19j4z_221"
5
+ "selectable-item": "awsui_selectable-item_15o6u_1g6vu_93",
6
+ "pad-bottom": "awsui_pad-bottom_15o6u_1g6vu_113",
7
+ "has-background": "awsui_has-background_15o6u_1g6vu_122",
8
+ "highlighted": "awsui_highlighted_15o6u_1g6vu_125",
9
+ "selected": "awsui_selected_15o6u_1g6vu_125",
10
+ "disabled": "awsui_disabled_15o6u_1g6vu_139",
11
+ "next-item-selected": "awsui_next-item-selected_15o6u_1g6vu_147",
12
+ "is-keyboard": "awsui_is-keyboard_15o6u_1g6vu_155",
13
+ "parent": "awsui_parent_15o6u_1g6vu_159",
14
+ "interactiveGroups": "awsui_interactiveGroups_15o6u_1g6vu_163",
15
+ "child": "awsui_child_15o6u_1g6vu_175",
16
+ "virtual": "awsui_virtual_15o6u_1g6vu_190",
17
+ "measure-strut": "awsui_measure-strut_15o6u_1g6vu_201",
18
+ "measure-strut-first": "awsui_measure-strut-first_15o6u_1g6vu_210",
19
+ "screenreader-content": "awsui_screenreader-content_15o6u_1g6vu_214",
20
+ "option-content": "awsui_option-content_15o6u_1g6vu_220"
21
21
  };
22
22
 
@@ -1,5 +1,5 @@
1
1
 
2
- export var PACKAGE_VERSION = '3.0.0 (f8e5715)';
2
+ export var PACKAGE_VERSION = '3.0.0 (7a19dc2)';
3
3
  export var THEME = 'open-source-visual-refresh';
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA0B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,QAAA,MAAM,mBAAmB,4HA2QxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA0B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,QAAA,MAAM,mBAAmB,4HA4QxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}