@cloudscape-design/components 3.0.28 → 3.0.31

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 (279) hide show
  1. package/app-layout/visual-refresh/styles.css.js +59 -59
  2. package/app-layout/visual-refresh/styles.scoped.css +146 -146
  3. package/app-layout/visual-refresh/styles.selectors.js +59 -59
  4. package/autosuggest/autosuggest-option.d.ts +1 -0
  5. package/autosuggest/autosuggest-option.d.ts.map +1 -1
  6. package/autosuggest/autosuggest-option.js +2 -2
  7. package/autosuggest/autosuggest-option.js.map +1 -1
  8. package/autosuggest/controller.d.ts +2 -5
  9. package/autosuggest/controller.d.ts.map +1 -1
  10. package/autosuggest/controller.js +5 -49
  11. package/autosuggest/controller.js.map +1 -1
  12. package/autosuggest/internal.d.ts.map +1 -1
  13. package/autosuggest/internal.js +19 -25
  14. package/autosuggest/internal.js.map +1 -1
  15. package/autosuggest/options-controller.d.ts +25 -0
  16. package/autosuggest/options-controller.d.ts.map +1 -0
  17. package/autosuggest/options-controller.js +64 -0
  18. package/autosuggest/options-controller.js.map +1 -0
  19. package/autosuggest/options-list.d.ts +3 -2
  20. package/autosuggest/options-list.d.ts.map +1 -1
  21. package/autosuggest/options-list.js +8 -7
  22. package/autosuggest/options-list.js.map +1 -1
  23. package/autosuggest/plain-list.d.ts +2 -2
  24. package/autosuggest/plain-list.d.ts.map +1 -1
  25. package/autosuggest/plain-list.js +4 -4
  26. package/autosuggest/plain-list.js.map +1 -1
  27. package/autosuggest/virtual-list.d.ts +1 -1
  28. package/autosuggest/virtual-list.d.ts.map +1 -1
  29. package/autosuggest/virtual-list.js +4 -4
  30. package/autosuggest/virtual-list.js.map +1 -1
  31. package/breadcrumb-group/internal.d.ts.map +1 -1
  32. package/breadcrumb-group/internal.js +4 -4
  33. package/breadcrumb-group/internal.js.map +1 -1
  34. package/button-dropdown/category-elements/category-element.d.ts +1 -1
  35. package/button-dropdown/category-elements/category-element.d.ts.map +1 -1
  36. package/button-dropdown/category-elements/category-element.js +2 -2
  37. package/button-dropdown/category-elements/category-element.js.map +1 -1
  38. package/button-dropdown/category-elements/expandable-category-element.d.ts +1 -1
  39. package/button-dropdown/category-elements/expandable-category-element.d.ts.map +1 -1
  40. package/button-dropdown/category-elements/expandable-category-element.js +4 -2
  41. package/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
  42. package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts +1 -1
  43. package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map +1 -1
  44. package/button-dropdown/category-elements/mobile-expandable-category-element.js +4 -2
  45. package/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
  46. package/button-dropdown/category-elements/styles.css.js +13 -12
  47. package/button-dropdown/category-elements/styles.scoped.css +26 -22
  48. package/button-dropdown/category-elements/styles.selectors.js +13 -12
  49. package/button-dropdown/interfaces.d.ts +3 -1
  50. package/button-dropdown/interfaces.d.ts.map +1 -1
  51. package/button-dropdown/interfaces.js.map +1 -1
  52. package/button-dropdown/internal.d.ts.map +1 -1
  53. package/button-dropdown/internal.js +6 -11
  54. package/button-dropdown/internal.js.map +1 -1
  55. package/button-dropdown/item-element/index.d.ts +1 -1
  56. package/button-dropdown/item-element/index.d.ts.map +1 -1
  57. package/button-dropdown/item-element/index.js +2 -1
  58. package/button-dropdown/item-element/index.js.map +1 -1
  59. package/button-dropdown/item-element/styles.css.js +14 -13
  60. package/button-dropdown/item-element/styles.scoped.css +21 -17
  61. package/button-dropdown/item-element/styles.selectors.js +14 -13
  62. package/button-dropdown/items-list.d.ts +1 -1
  63. package/button-dropdown/items-list.d.ts.map +1 -1
  64. package/button-dropdown/items-list.js +4 -4
  65. package/button-dropdown/items-list.js.map +1 -1
  66. package/button-dropdown/utils/use-button-dropdown.d.ts +2 -2
  67. package/button-dropdown/utils/use-button-dropdown.d.ts.map +1 -1
  68. package/button-dropdown/utils/use-button-dropdown.js +7 -5
  69. package/button-dropdown/utils/use-button-dropdown.js.map +1 -1
  70. package/button-dropdown/utils/use-highlighted-menu.d.ts +1 -0
  71. package/button-dropdown/utils/use-highlighted-menu.d.ts.map +1 -1
  72. package/button-dropdown/utils/use-highlighted-menu.js +11 -3
  73. package/button-dropdown/utils/use-highlighted-menu.js.map +1 -1
  74. package/checkbox/styles.css.js +3 -3
  75. package/checkbox/styles.scoped.css +6 -6
  76. package/checkbox/styles.selectors.js +3 -3
  77. package/date-picker/calendar/index.d.ts.map +1 -1
  78. package/date-picker/calendar/index.js +2 -1
  79. package/date-picker/calendar/index.js.map +1 -1
  80. package/date-picker/calendar/utils/memoized-date.d.ts +2 -0
  81. package/date-picker/calendar/utils/memoized-date.d.ts.map +1 -0
  82. package/date-picker/calendar/utils/memoized-date.js +13 -0
  83. package/date-picker/calendar/utils/memoized-date.js.map +1 -0
  84. package/date-picker/embedded.js +1 -1
  85. package/date-picker/embedded.js.map +1 -1
  86. package/date-picker/index.js +1 -1
  87. package/date-picker/index.js.map +1 -1
  88. package/date-picker/use-date-picker.d.ts.map +1 -1
  89. package/date-picker/use-date-picker.js +1 -1
  90. package/date-picker/use-date-picker.js.map +1 -1
  91. package/date-range-picker/calendar/grids/day/index.js +1 -1
  92. package/date-range-picker/calendar/grids/day/index.js.map +1 -1
  93. package/date-range-picker/calendar/index.d.ts.map +1 -1
  94. package/date-range-picker/calendar/index.js +3 -3
  95. package/date-range-picker/calendar/index.js.map +1 -1
  96. package/date-range-picker/dropdown.d.ts +1 -0
  97. package/date-range-picker/dropdown.d.ts.map +1 -1
  98. package/date-range-picker/dropdown.js +18 -30
  99. package/date-range-picker/dropdown.js.map +1 -1
  100. package/date-range-picker/embedded.d.ts +7 -0
  101. package/date-range-picker/embedded.d.ts.map +1 -0
  102. package/date-range-picker/embedded.js +46 -0
  103. package/date-range-picker/embedded.js.map +1 -0
  104. package/date-range-picker/index.d.ts.map +1 -1
  105. package/date-range-picker/index.js +5 -18
  106. package/date-range-picker/index.js.map +1 -1
  107. package/date-range-picker/interfaces.d.ts +46 -44
  108. package/date-range-picker/interfaces.d.ts.map +1 -1
  109. package/date-range-picker/interfaces.js.map +1 -1
  110. package/date-range-picker/time-offset.d.ts +0 -7
  111. package/date-range-picker/time-offset.d.ts.map +1 -1
  112. package/date-range-picker/time-offset.js +4 -60
  113. package/date-range-picker/time-offset.js.map +1 -1
  114. package/date-range-picker/use-date-range-picker.d.ts +29 -0
  115. package/date-range-picker/use-date-range-picker.d.ts.map +1 -0
  116. package/date-range-picker/use-date-range-picker.js +58 -0
  117. package/date-range-picker/use-date-range-picker.js.map +1 -0
  118. package/icon/icons.js +1 -1
  119. package/icon/interfaces.d.ts +1 -1
  120. package/icon/interfaces.d.ts.map +1 -1
  121. package/icon/interfaces.js.map +1 -1
  122. package/input/styles.css.js +13 -13
  123. package/input/styles.scoped.css +35 -37
  124. package/input/styles.selectors.js +13 -13
  125. package/internal/components/abstract-switch/index.d.ts.map +1 -1
  126. package/internal/components/abstract-switch/index.js +5 -5
  127. package/internal/components/abstract-switch/index.js.map +1 -1
  128. package/internal/components/abstract-switch/styles.css.js +11 -11
  129. package/internal/components/abstract-switch/styles.scoped.css +20 -13
  130. package/internal/components/abstract-switch/styles.selectors.js +11 -11
  131. package/internal/components/date-input/index.d.ts.map +1 -1
  132. package/internal/components/date-input/index.js +3 -2
  133. package/internal/components/date-input/index.js.map +1 -1
  134. package/internal/components/masked-input/utils/mask-format.d.ts.map +1 -1
  135. package/internal/components/masked-input/utils/mask-format.js +2 -1
  136. package/internal/components/masked-input/utils/mask-format.js.map +1 -1
  137. package/internal/components/masked-input/utils/strings.d.ts +0 -1
  138. package/internal/components/masked-input/utils/strings.d.ts.map +1 -1
  139. package/internal/components/masked-input/utils/strings.js +0 -6
  140. package/internal/components/masked-input/utils/strings.js.map +1 -1
  141. package/internal/components/options-list/utils/use-highlight-option.d.ts +7 -2
  142. package/internal/components/options-list/utils/use-highlight-option.d.ts.map +1 -1
  143. package/internal/components/options-list/utils/use-highlight-option.js +10 -3
  144. package/internal/components/options-list/utils/use-highlight-option.js.map +1 -1
  145. package/internal/components/selectable-item/index.d.ts +1 -1
  146. package/internal/components/selectable-item/index.d.ts.map +1 -1
  147. package/internal/components/selectable-item/index.js +2 -2
  148. package/internal/components/selectable-item/index.js.map +1 -1
  149. package/internal/components/selectable-item/styles.css.js +16 -16
  150. package/internal/components/selectable-item/styles.scoped.css +29 -30
  151. package/internal/components/selectable-item/styles.selectors.js +16 -16
  152. package/internal/environment.js +1 -1
  153. package/internal/utils/date-time/display-format.d.ts +9 -0
  154. package/internal/utils/date-time/display-format.d.ts.map +1 -0
  155. package/internal/utils/date-time/display-format.js +15 -0
  156. package/internal/utils/date-time/display-format.js.map +1 -0
  157. package/internal/utils/date-time/format-date.d.ts +7 -0
  158. package/internal/utils/date-time/format-date.d.ts.map +1 -0
  159. package/internal/utils/date-time/format-date.js +15 -0
  160. package/internal/utils/date-time/format-date.js.map +1 -0
  161. package/internal/utils/date-time/format-time.d.ts +5 -0
  162. package/internal/utils/date-time/format-time.d.ts.map +1 -0
  163. package/internal/utils/date-time/format-time.js +13 -0
  164. package/internal/utils/date-time/format-time.js.map +1 -0
  165. package/internal/utils/date-time/format-timezone-offset.d.ts +2 -0
  166. package/internal/utils/date-time/format-timezone-offset.d.ts.map +1 -0
  167. package/internal/utils/date-time/format-timezone-offset.js +11 -0
  168. package/internal/utils/date-time/format-timezone-offset.js.map +1 -0
  169. package/internal/utils/date-time/get-browser-timezone-offset.d.ts +7 -0
  170. package/internal/utils/date-time/get-browser-timezone-offset.d.ts.map +1 -0
  171. package/internal/utils/date-time/get-browser-timezone-offset.js +11 -0
  172. package/internal/utils/date-time/get-browser-timezone-offset.js.map +1 -0
  173. package/internal/utils/date-time/index.d.ts +11 -0
  174. package/internal/utils/date-time/index.d.ts.map +1 -0
  175. package/internal/utils/date-time/index.js +13 -0
  176. package/internal/utils/date-time/index.js.map +1 -0
  177. package/internal/utils/date-time/is-iso-date-only.d.ts +5 -0
  178. package/internal/utils/date-time/is-iso-date-only.d.ts.map +1 -0
  179. package/internal/utils/date-time/is-iso-date-only.js +10 -0
  180. package/internal/utils/date-time/is-iso-date-only.js.map +1 -0
  181. package/internal/utils/date-time/join-date-time.d.ts +2 -0
  182. package/internal/utils/date-time/join-date-time.d.ts.map +1 -0
  183. package/internal/utils/date-time/join-date-time.js +6 -0
  184. package/internal/utils/date-time/join-date-time.js.map +1 -0
  185. package/internal/utils/date-time/parse-date.d.ts +8 -0
  186. package/internal/utils/date-time/parse-date.d.ts.map +1 -0
  187. package/internal/utils/date-time/parse-date.js +16 -0
  188. package/internal/utils/date-time/parse-date.js.map +1 -0
  189. package/internal/utils/date-time/parse-timezone-offset.d.ts +5 -0
  190. package/internal/utils/date-time/parse-timezone-offset.d.ts.map +1 -0
  191. package/internal/utils/date-time/parse-timezone-offset.js +20 -0
  192. package/internal/utils/date-time/parse-timezone-offset.js.map +1 -0
  193. package/internal/utils/date-time/shift-timezone-offset.d.ts +12 -0
  194. package/internal/utils/date-time/shift-timezone-offset.d.ts.map +1 -0
  195. package/internal/utils/date-time/shift-timezone-offset.js +27 -0
  196. package/internal/utils/date-time/shift-timezone-offset.js.map +1 -0
  197. package/internal/utils/strings/index.d.ts +3 -0
  198. package/internal/utils/strings/index.d.ts.map +1 -0
  199. package/internal/utils/strings/index.js +5 -0
  200. package/internal/utils/strings/index.js.map +1 -0
  201. package/internal/utils/strings/join-strings.d.ts +5 -0
  202. package/internal/utils/strings/join-strings.d.ts.map +1 -0
  203. package/internal/utils/{strings.js → strings/join-strings.js} +7 -6
  204. package/internal/utils/strings/join-strings.js.map +1 -0
  205. package/internal/utils/strings/pad-left-zeros.d.ts +5 -0
  206. package/internal/utils/strings/pad-left-zeros.d.ts.map +1 -0
  207. package/internal/utils/strings/pad-left-zeros.js +12 -0
  208. package/internal/utils/strings/pad-left-zeros.js.map +1 -0
  209. package/multiselect/internal.d.ts.map +1 -1
  210. package/multiselect/internal.js +2 -2
  211. package/multiselect/internal.js.map +1 -1
  212. package/package.json +1 -1
  213. package/popover/styles.css.js +48 -48
  214. package/popover/styles.scoped.css +65 -60
  215. package/popover/styles.selectors.js +48 -48
  216. package/radio-group/styles.css.js +9 -9
  217. package/radio-group/styles.scoped.css +16 -16
  218. package/radio-group/styles.selectors.js +9 -9
  219. package/select/internal.d.ts.map +1 -1
  220. package/select/internal.js +2 -2
  221. package/select/internal.js.map +1 -1
  222. package/select/parts/item.d.ts +1 -1
  223. package/select/parts/item.d.ts.map +1 -1
  224. package/select/parts/item.js +6 -3
  225. package/select/parts/item.js.map +1 -1
  226. package/select/parts/multiselect-item.d.ts +1 -1
  227. package/select/parts/multiselect-item.d.ts.map +1 -1
  228. package/select/parts/multiselect-item.js +2 -2
  229. package/select/parts/multiselect-item.js.map +1 -1
  230. package/select/parts/plain-list.d.ts +1 -1
  231. package/select/parts/plain-list.d.ts.map +1 -1
  232. package/select/parts/plain-list.js +4 -4
  233. package/select/parts/plain-list.js.map +1 -1
  234. package/select/parts/styles.css.js +8 -7
  235. package/select/parts/styles.scoped.css +12 -7
  236. package/select/parts/styles.selectors.js +8 -7
  237. package/select/parts/virtual-list.js +4 -4
  238. package/select/parts/virtual-list.js.map +1 -1
  239. package/select/utils/get-item-props.d.ts +1 -2
  240. package/select/utils/get-item-props.d.ts.map +1 -1
  241. package/select/utils/get-item-props.js +3 -3
  242. package/select/utils/get-item-props.js.map +1 -1
  243. package/select/utils/render-options.d.ts +2 -2
  244. package/select/utils/render-options.d.ts.map +1 -1
  245. package/select/utils/render-options.js +2 -3
  246. package/select/utils/render-options.js.map +1 -1
  247. package/select/utils/use-select.d.ts +1 -0
  248. package/select/utils/use-select.d.ts.map +1 -1
  249. package/select/utils/use-select.js +2 -1
  250. package/select/utils/use-select.js.map +1 -1
  251. package/split-panel/index.d.ts.map +1 -1
  252. package/split-panel/index.js +2 -2
  253. package/split-panel/index.js.map +1 -1
  254. package/table/styles.css.js +32 -32
  255. package/table/styles.scoped.css +40 -43
  256. package/table/styles.selectors.js +32 -32
  257. package/tabs/styles.css.js +21 -21
  258. package/tabs/styles.scoped.css +40 -43
  259. package/tabs/styles.selectors.js +21 -21
  260. package/textarea/styles.css.js +4 -4
  261. package/textarea/styles.scoped.css +13 -14
  262. package/textarea/styles.selectors.js +4 -4
  263. package/toggle/internal.d.ts.map +1 -1
  264. package/toggle/internal.js +3 -1
  265. package/toggle/internal.js.map +1 -1
  266. package/toggle/styles.css.js +8 -8
  267. package/toggle/styles.scoped.css +15 -14
  268. package/toggle/styles.selectors.js +8 -8
  269. package/date-picker/calendar/utils/date.d.ts +0 -10
  270. package/date-picker/calendar/utils/date.d.ts.map +0 -1
  271. package/date-picker/calendar/utils/date.js +0 -50
  272. package/date-picker/calendar/utils/date.js.map +0 -1
  273. package/internal/components/date-input/utils/date.d.ts +0 -5
  274. package/internal/components/date-input/utils/date.d.ts.map +0 -1
  275. package/internal/components/date-input/utils/date.js +0 -11
  276. package/internal/components/date-input/utils/date.js.map +0 -1
  277. package/internal/utils/strings.d.ts +0 -2
  278. package/internal/utils/strings.d.ts.map +0 -1
  279. package/internal/utils/strings.js.map +0 -1
@@ -0,0 +1,64 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ import { __assign, __rest, __spreadArray } from "tslib";
4
+ import { useMemo, useState } from 'react';
5
+ import { filterOptions } from './utils/utils';
6
+ import { generateTestIndexes } from '../internal/components/options-list/utils/test-indexes';
7
+ import { createHighlightedOptionHook } from '../internal/components/options-list/utils/use-highlight-option';
8
+ var isHighlightable = function (option) {
9
+ return !!option && option.type !== 'parent';
10
+ };
11
+ var useHighlightedOption = createHighlightedOptionHook({ isHighlightable: isHighlightable });
12
+ var parentMap = new WeakMap();
13
+ export var getParentGroup = function (item) { return parentMap.get(item); };
14
+ export var useAutosuggestItems = function (_a) {
15
+ var options = _a.options, filterValue = _a.filterValue, filterText = _a.filterText, filteringType = _a.filteringType, isKeyboard = _a.isKeyboard, hideEnteredTextLabel = _a.hideEnteredTextLabel;
16
+ var _b = useState(false), showAll = _b[0], setShowAll = _b[1];
17
+ var items = useMemo(function () { return createItems(options); }, [options]);
18
+ var filteredItems = useMemo(function () {
19
+ var filteredItems = filteringType === 'auto' && !showAll ? filterOptions(items, filterText) : __spreadArray([], items, true);
20
+ if (filterValue && !hideEnteredTextLabel) {
21
+ filteredItems.unshift({ value: filterValue, type: 'use-entered', option: { value: filterValue } });
22
+ }
23
+ generateTestIndexes(filteredItems, getParentGroup);
24
+ return filteredItems;
25
+ }, [items, filterValue, filterText, filteringType, showAll, hideEnteredTextLabel]);
26
+ var _c = useHighlightedOption({ options: filteredItems, isKeyboard: isKeyboard }), highlightedOption = _c.highlightedOption, highlightedIndex = _c.highlightedIndex, highlightedType = _c.highlightedType, moveHighlight = _c.moveHighlight, resetHighlight = _c.resetHighlight, setHighlightedIndex = _c.setHighlightedIndex;
27
+ return {
28
+ showAll: showAll,
29
+ setShowAll: setShowAll,
30
+ items: filteredItems,
31
+ highlightedIndex: highlightedIndex,
32
+ highlightedType: highlightedType,
33
+ highlightedOption: highlightedOption,
34
+ setHighlightedIndex: setHighlightedIndex,
35
+ moveHighlight: moveHighlight,
36
+ resetHighlight: resetHighlight
37
+ };
38
+ };
39
+ function createItems(options) {
40
+ var items = [];
41
+ for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
42
+ var option = options_1[_i];
43
+ if (isGroup(option)) {
44
+ items.push.apply(items, flattenGroup(option));
45
+ }
46
+ else {
47
+ items.push(__assign(__assign({}, option), { option: option }));
48
+ }
49
+ }
50
+ return items;
51
+ }
52
+ function isGroup(optionOrGroup) {
53
+ return 'options' in optionOrGroup;
54
+ }
55
+ function flattenGroup(group) {
56
+ var options = group.options, rest = __rest(group, ["options"]);
57
+ var hasOnlyDisabledChildren = options.every(function (option) { return option.disabled; });
58
+ var parent = __assign(__assign({}, rest), { type: 'parent', disabled: rest.disabled || hasOnlyDisabledChildren, option: group });
59
+ var children = options.map(function (option) { return (__assign(__assign({}, option), { type: 'child', disabled: option.disabled || parent.disabled, option: option })); });
60
+ // TODO: Refactor parentMap and remove this side effect
61
+ children.forEach(function (child) { return parentMap.set(child, __assign(__assign({}, group), { option: group })); });
62
+ return [parent].concat(children);
63
+ }
64
+ //# sourceMappingURL=options-controller.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"options-controller.js","sourceRoot":"","sources":["../../../src/autosuggest/options-controller.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useMemo, useState, MutableRefObject } from 'react';\nimport { filterOptions } from './utils/utils';\nimport { generateTestIndexes } from '../internal/components/options-list/utils/test-indexes';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport { createHighlightedOptionHook } from '../internal/components/options-list/utils/use-highlight-option';\n\ntype Options = AutosuggestProps.Options;\n\nexport interface UseAutosuggestItemsProps {\n options: Options;\n filterValue: string;\n filterText: string;\n filteringType: AutosuggestProps.FilteringType;\n isKeyboard: MutableRefObject<boolean>;\n hideEnteredTextLabel?: boolean;\n}\n\nconst isHighlightable = (option?: AutosuggestItem) => {\n return !!option && option.type !== 'parent';\n};\n\nconst useHighlightedOption = createHighlightedOptionHook({ isHighlightable: isHighlightable });\n\nconst parentMap = new WeakMap<AutosuggestItem, AutosuggestItem>();\nexport const getParentGroup = (item: AutosuggestItem) => parentMap.get(item);\n\nexport const useAutosuggestItems = ({\n options,\n filterValue,\n filterText,\n filteringType,\n isKeyboard,\n hideEnteredTextLabel,\n}: UseAutosuggestItemsProps) => {\n const [showAll, setShowAll] = useState(false);\n\n const items = useMemo(() => createItems(options), [options]);\n\n const filteredItems = useMemo(() => {\n const filteredItems = filteringType === 'auto' && !showAll ? filterOptions(items, filterText) : [...items];\n if (filterValue && !hideEnteredTextLabel) {\n filteredItems.unshift({ value: filterValue, type: 'use-entered', option: { value: filterValue } });\n }\n generateTestIndexes(filteredItems, getParentGroup);\n return filteredItems;\n }, [items, filterValue, filterText, filteringType, showAll, hideEnteredTextLabel]);\n\n const { highlightedOption, highlightedIndex, highlightedType, moveHighlight, resetHighlight, setHighlightedIndex } =\n useHighlightedOption({ options: filteredItems, isKeyboard });\n\n return {\n showAll,\n setShowAll,\n items: filteredItems,\n highlightedIndex,\n highlightedType,\n highlightedOption,\n setHighlightedIndex,\n moveHighlight,\n resetHighlight,\n };\n};\n\nfunction createItems(options: Options): AutosuggestItem[] {\n const items: AutosuggestItem[] = [];\n for (const option of options) {\n if (isGroup(option)) {\n items.push(...flattenGroup(option));\n } else {\n items.push({ ...option, option });\n }\n }\n return items;\n}\n\nfunction isGroup(optionOrGroup: AutosuggestProps.Option): optionOrGroup is AutosuggestProps.OptionGroup {\n return 'options' in optionOrGroup;\n}\n\nfunction flattenGroup(group: AutosuggestProps.OptionGroup): AutosuggestItem[] {\n const { options, ...rest } = group;\n const hasOnlyDisabledChildren = options.every(option => option.disabled);\n const parent: AutosuggestItem = {\n ...rest,\n type: 'parent',\n disabled: rest.disabled || hasOnlyDisabledChildren,\n option: group,\n };\n const children: AutosuggestItem[] = options.map(option => ({\n ...option,\n type: 'child',\n disabled: option.disabled || parent.disabled,\n option,\n }));\n // TODO: Refactor parentMap and remove this side effect\n children.forEach(child => parentMap.set(child, { ...group, option: group }));\n return [parent].concat(children);\n}\n"]}
@@ -13,7 +13,8 @@ export interface AutosuggestOptionsListProps extends Pick<AutosuggestProps, 'ent
13
13
  handleLoadMore: () => void;
14
14
  hasDropdownStatus?: boolean;
15
15
  listBottom?: React.ReactNode;
16
- usingMouse: React.MutableRefObject<boolean>;
16
+ isKeyboard: React.MutableRefObject<boolean>;
17
+ highlightedType: 'mouse' | 'keyboard';
17
18
  }
18
- export default function AutosuggestOptionsList({ options, highlightedOption, selectOption, highlightedIndex, setHighlightedIndex, highlightedOptionId, highlightText, listId, controlId, enteredTextLabel, handleLoadMore, hasDropdownStatus, virtualScroll, selectedAriaLabel, renderHighlightedAriaLive, listBottom, usingMouse, }: AutosuggestOptionsListProps): JSX.Element;
19
+ export default function AutosuggestOptionsList({ options, highlightedOption, selectOption, highlightedIndex, setHighlightedIndex, highlightedOptionId, highlightText, listId, controlId, enteredTextLabel, handleLoadMore, hasDropdownStatus, virtualScroll, selectedAriaLabel, renderHighlightedAriaLive, listBottom, isKeyboard, highlightedType, }: AutosuggestOptionsListProps): JSX.Element;
19
20
  //# sourceMappingURL=options-list.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"options-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOjE,MAAM,WAAW,2BACf,SAAQ,IAAI,CACV,gBAAgB,EAChB,kBAAkB,GAAG,eAAe,GAAG,mBAAmB,GAAG,2BAA2B,CACzF;IACD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC7C;AAmBD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,yBAAyB,EACzB,UAAU,EACV,UAAU,GACX,EAAE,2BAA2B,eAgC7B"}
1
+ {"version":3,"file":"options-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOjE,MAAM,WAAW,2BACf,SAAQ,IAAI,CACV,gBAAgB,EAChB,kBAAkB,GAAG,eAAe,GAAG,mBAAmB,GAAG,2BAA2B,CACzF;IACD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,eAAe,EAAE,OAAO,GAAG,UAAU,CAAC;CACvC;AAmBD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,yBAAyB,EACzB,UAAU,EACV,UAAU,EACV,eAAe,GAChB,EAAE,2BAA2B,eAgC7B"}
@@ -1,7 +1,8 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
- import { useSelectVisibleOption, useHighlightVisibleOption, getParentGroup } from './controller';
4
+ import { useSelectVisibleOption, useHighlightVisibleOption } from './controller';
5
+ import { getParentGroup } from './options-controller';
5
6
  import VirtualList from './virtual-list';
6
7
  import PlainList from './plain-list';
7
8
  import { useAnnouncement } from '../select/utils/use-announcement';
@@ -11,19 +12,19 @@ var isInteractive = function (option) {
11
12
  var isHighlightable = function (option) {
12
13
  return !!option && option.type !== 'parent';
13
14
  };
14
- var createMouseEventHandler = function (handler, usingMouse) { return function (itemIndex) {
15
+ var createMouseEventHandler = function (handler, isKeyboard) { return function (itemIndex) {
15
16
  // prevent mouse events to avoid losing focus from the input
16
- usingMouse.current = true;
17
+ isKeyboard.current = false;
17
18
  if (itemIndex > -1) {
18
19
  handler(itemIndex);
19
20
  }
20
21
  }; };
21
22
  export default function AutosuggestOptionsList(_a) {
22
- var options = _a.options, highlightedOption = _a.highlightedOption, selectOption = _a.selectOption, highlightedIndex = _a.highlightedIndex, setHighlightedIndex = _a.setHighlightedIndex, highlightedOptionId = _a.highlightedOptionId, highlightText = _a.highlightText, listId = _a.listId, controlId = _a.controlId, enteredTextLabel = _a.enteredTextLabel, handleLoadMore = _a.handleLoadMore, hasDropdownStatus = _a.hasDropdownStatus, virtualScroll = _a.virtualScroll, selectedAriaLabel = _a.selectedAriaLabel, renderHighlightedAriaLive = _a.renderHighlightedAriaLive, listBottom = _a.listBottom, usingMouse = _a.usingMouse;
23
+ var options = _a.options, highlightedOption = _a.highlightedOption, selectOption = _a.selectOption, highlightedIndex = _a.highlightedIndex, setHighlightedIndex = _a.setHighlightedIndex, highlightedOptionId = _a.highlightedOptionId, highlightText = _a.highlightText, listId = _a.listId, controlId = _a.controlId, enteredTextLabel = _a.enteredTextLabel, handleLoadMore = _a.handleLoadMore, hasDropdownStatus = _a.hasDropdownStatus, virtualScroll = _a.virtualScroll, selectedAriaLabel = _a.selectedAriaLabel, renderHighlightedAriaLive = _a.renderHighlightedAriaLive, listBottom = _a.listBottom, isKeyboard = _a.isKeyboard, highlightedType = _a.highlightedType;
23
24
  var highlightVisibleOption = useHighlightVisibleOption(options, setHighlightedIndex, isHighlightable);
24
25
  var selectVisibleOption = useSelectVisibleOption(options, selectOption, isInteractive);
25
- var handleMouseUp = createMouseEventHandler(selectVisibleOption, usingMouse);
26
- var handleMouseMove = createMouseEventHandler(highlightVisibleOption, usingMouse);
26
+ var handleMouseUp = createMouseEventHandler(selectVisibleOption, isKeyboard);
27
+ var handleMouseMove = createMouseEventHandler(highlightVisibleOption, isKeyboard);
27
28
  var ListComponent = virtualScroll ? VirtualList : PlainList;
28
29
  var announcement = useAnnouncement({
29
30
  announceSelected: true,
@@ -32,6 +33,6 @@ export default function AutosuggestOptionsList(_a) {
32
33
  selectedAriaLabel: selectedAriaLabel,
33
34
  renderHighlightedAriaLive: renderHighlightedAriaLive
34
35
  });
35
- return (React.createElement(ListComponent, { listBottom: listBottom, handleLoadMore: handleLoadMore, filteredItems: options, highlightText: highlightText, usingMouse: usingMouse, highlightedOption: highlightedOption, highlightedIndex: highlightedIndex, enteredTextLabel: enteredTextLabel, highlightedA11yProps: highlightedOptionId ? { id: highlightedOptionId } : {}, hasDropdownStatus: hasDropdownStatus, menuProps: { id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }, screenReaderContent: announcement }));
36
+ return (React.createElement(ListComponent, { listBottom: listBottom, handleLoadMore: handleLoadMore, filteredItems: options, highlightText: highlightText, highlightedOption: highlightedOption, highlightedIndex: highlightedIndex, enteredTextLabel: enteredTextLabel, highlightedA11yProps: highlightedOptionId ? { id: highlightedOptionId } : {}, hasDropdownStatus: hasDropdownStatus, menuProps: { id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }, screenReaderContent: announcement, highlightedType: highlightedType }));
36
37
  }
37
38
  //# sourceMappingURL=options-list.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"options-list.js","sourceRoot":"","sources":["../../../src/autosuggest/options-list.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';\n\nimport { useSelectVisibleOption, useHighlightVisibleOption, getParentGroup } from './controller';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport VirtualList from './virtual-list';\nimport PlainList from './plain-list';\n\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { OptionGroup } from '../internal/components/option/interfaces';\n\nexport interface AutosuggestOptionsListProps\n extends Pick<\n AutosuggestProps,\n 'enteredTextLabel' | 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'\n > {\n options: AutosuggestItem[];\n highlightedOption?: AutosuggestItem;\n selectOption: (option: AutosuggestItem) => void;\n highlightedIndex: number;\n setHighlightedIndex: (index: number) => void;\n highlightedOptionId?: string;\n highlightText: string;\n listId: string;\n controlId: string;\n handleLoadMore: () => void;\n hasDropdownStatus?: boolean;\n listBottom?: React.ReactNode;\n usingMouse: React.MutableRefObject<boolean>;\n}\n\nconst isInteractive = (option?: AutosuggestItem) => {\n return !!option && !option.disabled && option.type !== 'parent';\n};\n\nconst isHighlightable = (option?: AutosuggestItem) => {\n return !!option && option.type !== 'parent';\n};\n\nconst createMouseEventHandler =\n (handler: (index: number) => void, usingMouse: React.MutableRefObject<boolean>) => (itemIndex: number) => {\n // prevent mouse events to avoid losing focus from the input\n usingMouse.current = true;\n if (itemIndex > -1) {\n handler(itemIndex);\n }\n };\n\nexport default function AutosuggestOptionsList({\n options,\n highlightedOption,\n selectOption,\n highlightedIndex,\n setHighlightedIndex,\n highlightedOptionId,\n highlightText,\n listId,\n controlId,\n enteredTextLabel,\n handleLoadMore,\n hasDropdownStatus,\n virtualScroll,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n listBottom,\n usingMouse,\n}: AutosuggestOptionsListProps) {\n const highlightVisibleOption = useHighlightVisibleOption(options, setHighlightedIndex, isHighlightable);\n const selectVisibleOption = useSelectVisibleOption(options, selectOption, isInteractive);\n const handleMouseUp = createMouseEventHandler(selectVisibleOption, usingMouse);\n const handleMouseMove = createMouseEventHandler(highlightVisibleOption, usingMouse);\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const announcement = useAnnouncement({\n announceSelected: true,\n highlightedOption,\n getParent: option => getParentGroup(option)?.option as undefined | OptionGroup,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n });\n\n return (\n <ListComponent\n listBottom={listBottom}\n handleLoadMore={handleLoadMore}\n filteredItems={options}\n highlightText={highlightText}\n usingMouse={usingMouse}\n highlightedOption={highlightedOption}\n highlightedIndex={highlightedIndex}\n enteredTextLabel={enteredTextLabel}\n highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n hasDropdownStatus={hasDropdownStatus}\n menuProps={{ id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }}\n screenReaderContent={announcement}\n />\n );\n}\n"]}
1
+ {"version":3,"file":"options-list.js","sourceRoot":"","sources":["../../../src/autosuggest/options-list.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';\n\nimport { useSelectVisibleOption, useHighlightVisibleOption } from './controller';\nimport { getParentGroup } from './options-controller';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport VirtualList from './virtual-list';\nimport PlainList from './plain-list';\n\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { OptionGroup } from '../internal/components/option/interfaces';\n\nexport interface AutosuggestOptionsListProps\n extends Pick<\n AutosuggestProps,\n 'enteredTextLabel' | 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'\n > {\n options: AutosuggestItem[];\n highlightedOption?: AutosuggestItem;\n selectOption: (option: AutosuggestItem) => void;\n highlightedIndex: number;\n setHighlightedIndex: (index: number) => void;\n highlightedOptionId?: string;\n highlightText: string;\n listId: string;\n controlId: string;\n handleLoadMore: () => void;\n hasDropdownStatus?: boolean;\n listBottom?: React.ReactNode;\n isKeyboard: React.MutableRefObject<boolean>;\n highlightedType: 'mouse' | 'keyboard';\n}\n\nconst isInteractive = (option?: AutosuggestItem) => {\n return !!option && !option.disabled && option.type !== 'parent';\n};\n\nconst isHighlightable = (option?: AutosuggestItem) => {\n return !!option && option.type !== 'parent';\n};\n\nconst createMouseEventHandler =\n (handler: (index: number) => void, isKeyboard: React.MutableRefObject<boolean>) => (itemIndex: number) => {\n // prevent mouse events to avoid losing focus from the input\n isKeyboard.current = false;\n if (itemIndex > -1) {\n handler(itemIndex);\n }\n };\n\nexport default function AutosuggestOptionsList({\n options,\n highlightedOption,\n selectOption,\n highlightedIndex,\n setHighlightedIndex,\n highlightedOptionId,\n highlightText,\n listId,\n controlId,\n enteredTextLabel,\n handleLoadMore,\n hasDropdownStatus,\n virtualScroll,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n listBottom,\n isKeyboard,\n highlightedType,\n}: AutosuggestOptionsListProps) {\n const highlightVisibleOption = useHighlightVisibleOption(options, setHighlightedIndex, isHighlightable);\n const selectVisibleOption = useSelectVisibleOption(options, selectOption, isInteractive);\n const handleMouseUp = createMouseEventHandler(selectVisibleOption, isKeyboard);\n const handleMouseMove = createMouseEventHandler(highlightVisibleOption, isKeyboard);\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const announcement = useAnnouncement({\n announceSelected: true,\n highlightedOption,\n getParent: option => getParentGroup(option)?.option as undefined | OptionGroup,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n });\n\n return (\n <ListComponent\n listBottom={listBottom}\n handleLoadMore={handleLoadMore}\n filteredItems={options}\n highlightText={highlightText}\n highlightedOption={highlightedOption}\n highlightedIndex={highlightedIndex}\n enteredTextLabel={enteredTextLabel}\n highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n hasDropdownStatus={hasDropdownStatus}\n menuProps={{ id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }}\n screenReaderContent={announcement}\n highlightedType={highlightedType}\n />\n );\n}\n"]}
@@ -5,9 +5,9 @@ export interface ListProps {
5
5
  menuProps: Omit<OptionsListProps, 'children'>;
6
6
  handleLoadMore: () => void;
7
7
  filteredItems: AutosuggestItem[];
8
- usingMouse: React.MutableRefObject<boolean>;
9
8
  highlightedOption?: AutosuggestItem;
10
9
  highlightedIndex: number;
10
+ highlightedType: 'mouse' | 'keyboard';
11
11
  enteredTextLabel: AutosuggestProps.EnteredTextLabel;
12
12
  highlightedA11yProps: Record<string, string | number | boolean>;
13
13
  hasDropdownStatus?: boolean;
@@ -21,6 +21,6 @@ export declare const getOptionProps: (index: number, item: AutosuggestItem, filt
21
21
  nativeAttributes: Record<string, string | number | boolean>;
22
22
  padBottom: boolean;
23
23
  };
24
- declare const PlainList: ({ handleLoadMore, filteredItems, usingMouse, menuProps, highlightedOption, highlightedIndex, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
24
+ declare const PlainList: ({ handleLoadMore, filteredItems, menuProps, highlightedOption, highlightedIndex, highlightedType, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
25
25
  export default PlainList;
26
26
  //# sourceMappingURL=plain-list.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKpF,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGjE,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IACpD,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,UAClB,MAAM,QACP,eAAe,iBACN,eAAe,EAAE,wBACV,SAAS,CAAC,sBAAsB,CAAC,sBACnC,SAAS,CAAC,mBAAmB,CAAC;;;;;CAUnD,CAAC;AAEF,QAAA,MAAM,SAAS,8MAaZ,SAAS,gBAiDX,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKpF,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGjE,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,OAAO,GAAG,UAAU,CAAC;IACtC,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IACpD,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,UAClB,MAAM,QACP,eAAe,iBACN,eAAe,EAAE,wBACV,SAAS,CAAC,sBAAsB,CAAC,sBACnC,SAAS,CAAC,mBAAmB,CAAC;;;;;CAUnD,CAAC;AAEF,QAAA,MAAM,SAAS,mNAaZ,SAAS,gBAiDX,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -16,21 +16,21 @@ export var getOptionProps = function (index, item, filteredItems, highlightedA11
16
16
  return __assign({ nativeAttributes: nativeAttributes, padBottom: padBottom }, baseOptionProps);
17
17
  };
18
18
  var PlainList = function (_a) {
19
- var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, usingMouse = _a.usingMouse, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, highlightedIndex = _a.highlightedIndex, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
19
+ var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, highlightedIndex = _a.highlightedIndex, highlightedType = _a.highlightedType, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
20
20
  var listRef = useRef(null);
21
21
  useEffect(function () {
22
22
  var _a;
23
23
  var item = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-mouse-target=\"".concat(highlightedIndex, "\"]"));
24
- if (!usingMouse.current && item) {
24
+ if (highlightedType === 'keyboard' && item) {
25
25
  scrollUntilVisible(item);
26
26
  }
27
- }, [usingMouse, highlightedIndex]);
27
+ }, [highlightedType, highlightedIndex]);
28
28
  return (React.createElement(OptionsList, __assign({}, menuProps, { onLoadMore: handleLoadMore, open: true, ref: listRef,
29
29
  // to prevent closing the list when clicking the scrollbar on IE11
30
30
  nativeAttributes: { unselectable: 'on' } }),
31
31
  filteredItems.map(function (item, index) {
32
32
  var optionProps = getOptionProps(index, item, filteredItems, highlightedA11yProps, highlightedOption, hasDropdownStatus);
33
- return (React.createElement(AutosuggestOption, __assign({ highlightText: highlightText, option: item, highlighted: item === highlightedOption, key: index, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, screenReaderContent: screenReaderContent }, optionProps)));
33
+ return (React.createElement(AutosuggestOption, __assign({ highlightText: highlightText, option: item, highlighted: item === highlightedOption, key: index, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, screenReaderContent: screenReaderContent, highlightedType: highlightedType }, optionProps)));
34
34
  }),
35
35
  listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
36
36
  };
@@ -1 +1 @@
1
- {"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,WAAiC,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAiBrC,MAAM,CAAC,IAAM,cAAc,GAAG,UAC5B,KAAa,EACb,IAAqB,EACrB,aAAgC,EAChC,oBAAuD,EACvD,iBAAkD,EAClD,iBAA2B;IAE3B,IAAM,gBAAgB,GAAG,IAAI,KAAK,iBAAiB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChF,IAAM,eAAe,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACvD,IAAM,UAAU,GAAG,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,IAAM,oBAAoB,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,IAAM,SAAS,GAAG,CAAC,iBAAiB,IAAI,oBAAoB,IAAI,UAAU,CAAC;IAE3E,kBAAS,gBAAgB,kBAAA,EAAE,SAAS,WAAA,IAAK,eAAe,EAAG;AAC7D,CAAC,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAaP;QAZV,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,oBAAoB,0BAAA,EACpB,iBAAiB,uBAAA,EACjB,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,mBAAmB,yBAAA;IAEnB,IAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,SAAS,CAAC;;QACR,IAAM,IAAI,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,CAAC,+BAAuB,gBAAgB,QAAI,CAAC,CAAC;QACzF,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,IAAI,EAAE;YAC/B,kBAAkB,CAAC,IAAmB,CAAC,CAAC;SACzC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,oBAAC,WAAW,eACN,SAAS,IACb,UAAU,EAAE,cAAc,EAC1B,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,OAAO;QACZ,kEAAkE;QAClE,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;QAEvC,aAAa,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;YAC7B,IAAM,WAAW,GAAG,cAAc,CAChC,KAAK,EACL,IAAI,EACJ,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,CAClB,CAAC;YAEF,OAAO,CACL,oBAAC,iBAAiB,aAChB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,IAAI,KAAK,iBAAiB,EACvC,GAAG,EAAE,KAAK,uBACS,KAAK,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,IACpC,WAAW,EACf,CACH,CAAC;QACJ,CAAC,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,4BAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAC/C,UAAU,CACR,CACN,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\n\nimport OptionsList, { OptionsListProps } from '../internal/components/options-list';\nimport { scrollUntilVisible } from '../internal/utils/scrollable-containers';\nimport { getBaseProps } from '../internal/base-component';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { AutosuggestProps, AutosuggestItem } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface ListProps {\n menuProps: Omit<OptionsListProps, 'children'>;\n handleLoadMore: () => void;\n filteredItems: AutosuggestItem[];\n usingMouse: React.MutableRefObject<boolean>;\n highlightedOption?: AutosuggestItem;\n highlightedIndex: number;\n enteredTextLabel: AutosuggestProps.EnteredTextLabel;\n highlightedA11yProps: Record<string, string | number | boolean>;\n hasDropdownStatus?: boolean;\n highlightText: string;\n listBottom?: React.ReactNode;\n screenReaderContent?: string;\n}\n\nexport const getOptionProps = (\n index: number,\n item: AutosuggestItem,\n filteredItems: AutosuggestItem[],\n highlightedA11yProps: ListProps['highlightedA11yProps'],\n highlightedOption?: ListProps['highlightedOption'],\n hasDropdownStatus?: boolean\n) => {\n const nativeAttributes = item === highlightedOption ? highlightedA11yProps : {};\n const baseOptionProps = getBaseProps(nativeAttributes);\n const isLastItem = index === filteredItems.length - 1;\n const isNotEnteredTextItem = filteredItems.length > 1;\n const padBottom = !hasDropdownStatus && isNotEnteredTextItem && isLastItem;\n\n return { nativeAttributes, padBottom, ...baseOptionProps };\n};\n\nconst PlainList = ({\n handleLoadMore,\n filteredItems,\n usingMouse,\n menuProps,\n highlightedOption,\n highlightedIndex,\n enteredTextLabel,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const listRef = useRef<HTMLUListElement>(null);\n\n useEffect(() => {\n const item = listRef.current?.querySelector(`[data-mouse-target=\"${highlightedIndex}\"]`);\n if (!usingMouse.current && item) {\n scrollUntilVisible(item as HTMLElement);\n }\n }, [usingMouse, highlightedIndex]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n open={true}\n ref={listRef}\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n >\n {filteredItems.map((item, index) => {\n const optionProps = getOptionProps(\n index,\n item,\n filteredItems,\n highlightedA11yProps,\n highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n highlightText={highlightText}\n option={item}\n highlighted={item === highlightedOption}\n key={index}\n data-mouse-target={index}\n enteredTextLabel={enteredTextLabel}\n screenReaderContent={screenReaderContent}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default PlainList;\n"]}
1
+ {"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\n\nimport OptionsList, { OptionsListProps } from '../internal/components/options-list';\nimport { scrollUntilVisible } from '../internal/utils/scrollable-containers';\nimport { getBaseProps } from '../internal/base-component';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { AutosuggestProps, AutosuggestItem } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface ListProps {\n menuProps: Omit<OptionsListProps, 'children'>;\n handleLoadMore: () => void;\n filteredItems: AutosuggestItem[];\n highlightedOption?: AutosuggestItem;\n highlightedIndex: number;\n highlightedType: 'mouse' | 'keyboard';\n enteredTextLabel: AutosuggestProps.EnteredTextLabel;\n highlightedA11yProps: Record<string, string | number | boolean>;\n hasDropdownStatus?: boolean;\n highlightText: string;\n listBottom?: React.ReactNode;\n screenReaderContent?: string;\n}\n\nexport const getOptionProps = (\n index: number,\n item: AutosuggestItem,\n filteredItems: AutosuggestItem[],\n highlightedA11yProps: ListProps['highlightedA11yProps'],\n highlightedOption?: ListProps['highlightedOption'],\n hasDropdownStatus?: boolean\n) => {\n const nativeAttributes = item === highlightedOption ? highlightedA11yProps : {};\n const baseOptionProps = getBaseProps(nativeAttributes);\n const isLastItem = index === filteredItems.length - 1;\n const isNotEnteredTextItem = filteredItems.length > 1;\n const padBottom = !hasDropdownStatus && isNotEnteredTextItem && isLastItem;\n\n return { nativeAttributes, padBottom, ...baseOptionProps };\n};\n\nconst PlainList = ({\n handleLoadMore,\n filteredItems,\n menuProps,\n highlightedOption,\n highlightedIndex,\n highlightedType,\n enteredTextLabel,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const listRef = useRef<HTMLUListElement>(null);\n useEffect(() => {\n const item = listRef.current?.querySelector(`[data-mouse-target=\"${highlightedIndex}\"]`);\n if (highlightedType === 'keyboard' && item) {\n scrollUntilVisible(item as HTMLElement);\n }\n }, [highlightedType, highlightedIndex]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n open={true}\n ref={listRef}\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n >\n {filteredItems.map((item, index) => {\n const optionProps = getOptionProps(\n index,\n item,\n filteredItems,\n highlightedA11yProps,\n highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n highlightText={highlightText}\n option={item}\n highlighted={item === highlightedOption}\n key={index}\n data-mouse-target={index}\n enteredTextLabel={enteredTextLabel}\n screenReaderContent={screenReaderContent}\n highlightedType={highlightedType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default PlainList;\n"]}
@@ -1,4 +1,4 @@
1
1
  import { ListProps } from './plain-list';
2
- declare const VirtualList: ({ handleLoadMore, filteredItems, usingMouse, menuProps, highlightedOption, highlightedIndex, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
2
+ declare const VirtualList: ({ handleLoadMore, filteredItems, menuProps, highlightedOption, highlightedIndex, highlightedType, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
3
3
  export default VirtualList;
4
4
  //# sourceMappingURL=virtual-list.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,QAAA,MAAM,WAAW,8MAad,SAAS,gBA0EX,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,QAAA,MAAM,WAAW,mNAad,SAAS,gBA2EX,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -9,7 +9,7 @@ import AutosuggestOption from './autosuggest-option';
9
9
  import { getOptionProps } from './plain-list';
10
10
  import styles from './styles.css.js';
11
11
  var VirtualList = function (_a) {
12
- var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, usingMouse = _a.usingMouse, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, highlightedIndex = _a.highlightedIndex, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
12
+ var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, highlightedIndex = _a.highlightedIndex, highlightedType = _a.highlightedType, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
13
13
  var scrollRef = useRef(null);
14
14
  // update component, when it gets wider or narrower to reposition items
15
15
  var _b = useContainerQuery(function (rect) { return rect.width; }, []), width = _b[0], strutRef = _b[1];
@@ -26,10 +26,10 @@ var VirtualList = function (_a) {
26
26
  overscan: 5
27
27
  });
28
28
  useEffect(function () {
29
- if (!usingMouse.current) {
29
+ if (highlightedType === 'keyboard') {
30
30
  rowVirtualizer.scrollToIndex(highlightedIndex);
31
31
  }
32
- }, [usingMouse, rowVirtualizer, highlightedIndex]);
32
+ }, [highlightedType, rowVirtualizer, highlightedIndex]);
33
33
  return (React.createElement(OptionsList, __assign({}, menuProps, { onLoadMore: handleLoadMore, ref: scrollRef, open: true,
34
34
  // to prevent closing the list when clicking the scrollbar on IE11
35
35
  nativeAttributes: { unselectable: 'on' } }),
@@ -38,7 +38,7 @@ var VirtualList = function (_a) {
38
38
  var index = virtualRow.index, start = virtualRow.start, measureRef = virtualRow.measureRef;
39
39
  var item = filteredItems[index];
40
40
  var optionProps = getOptionProps(index, item, filteredItems, highlightedA11yProps, highlightedOption, hasDropdownStatus);
41
- return (React.createElement(AutosuggestOption, __assign({ key: index, ref: measureRef, highlightText: highlightText, option: item, highlighted: item === highlightedOption, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, virtualPosition: start + (index === 0 ? 1 : 0), screenReaderContent: screenReaderContent, ariaSetsize: filteredItems.length, ariaPosinset: index + 1 }, optionProps)));
41
+ return (React.createElement(AutosuggestOption, __assign({ key: index, ref: measureRef, highlightText: highlightText, option: item, highlighted: item === highlightedOption, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, virtualPosition: start + (index === 0 ? 1 : 0), screenReaderContent: screenReaderContent, ariaSetsize: filteredItems.length, ariaPosinset: index + 1, highlightedType: highlightedType }, optionProps)));
42
42
  }),
43
43
  listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
44
44
  };
@@ -1 +1 @@
1
- {"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.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, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { useVirtual } from 'react-virtual';\n\nimport OptionsList from '../internal/components/options-list';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { getOptionProps, ListProps } from './plain-list';\nimport styles from './styles.css.js';\n\nconst VirtualList = ({\n handleLoadMore,\n filteredItems,\n usingMouse,\n menuProps,\n highlightedOption,\n highlightedIndex,\n enteredTextLabel,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const scrollRef = useRef<HTMLUListElement>(null);\n // update component, when it gets wider or narrower to reposition items\n const [width, strutRef] = useContainerQuery(rect => rect.width, []);\n useImperativeHandle(strutRef, () => scrollRef.current);\n const rowVirtualizer = useVirtual({\n size: filteredItems.length,\n parentRef: scrollRef,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: becasue the option changed its content (highlightText property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => 31, [width, highlightText]),\n overscan: 5,\n });\n\n useEffect(() => {\n if (!usingMouse.current) {\n rowVirtualizer.scrollToIndex(highlightedIndex);\n }\n }, [usingMouse, rowVirtualizer, highlightedIndex]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n ref={scrollRef}\n open={true}\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n >\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: rowVirtualizer.totalSize + (filteredItems.length === 1 ? 1 : 0) }}\n />\n {rowVirtualizer.virtualItems.map(virtualRow => {\n const { index, start, measureRef } = virtualRow;\n const item = filteredItems[index];\n const optionProps = getOptionProps(\n index,\n item,\n filteredItems,\n highlightedA11yProps,\n highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n key={index}\n ref={measureRef}\n highlightText={highlightText}\n option={item}\n highlighted={item === highlightedOption}\n data-mouse-target={index}\n enteredTextLabel={enteredTextLabel}\n virtualPosition={start + (index === 0 ? 1 : 0)}\n screenReaderContent={screenReaderContent}\n ariaSetsize={filteredItems.length}\n ariaPosinset={index + 1}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default VirtualList;\n"]}
1
+ {"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.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, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { useVirtual } from 'react-virtual';\n\nimport OptionsList from '../internal/components/options-list';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { getOptionProps, ListProps } from './plain-list';\nimport styles from './styles.css.js';\n\nconst VirtualList = ({\n handleLoadMore,\n filteredItems,\n menuProps,\n highlightedOption,\n highlightedIndex,\n highlightedType,\n enteredTextLabel,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const scrollRef = useRef<HTMLUListElement>(null);\n // update component, when it gets wider or narrower to reposition items\n const [width, strutRef] = useContainerQuery(rect => rect.width, []);\n useImperativeHandle(strutRef, () => scrollRef.current);\n const rowVirtualizer = useVirtual({\n size: filteredItems.length,\n parentRef: scrollRef,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: becasue the option changed its content (highlightText property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => 31, [width, highlightText]),\n overscan: 5,\n });\n\n useEffect(() => {\n if (highlightedType === 'keyboard') {\n rowVirtualizer.scrollToIndex(highlightedIndex);\n }\n }, [highlightedType, rowVirtualizer, highlightedIndex]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n ref={scrollRef}\n open={true}\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n >\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: rowVirtualizer.totalSize + (filteredItems.length === 1 ? 1 : 0) }}\n />\n {rowVirtualizer.virtualItems.map(virtualRow => {\n const { index, start, measureRef } = virtualRow;\n const item = filteredItems[index];\n const optionProps = getOptionProps(\n index,\n item,\n filteredItems,\n highlightedA11yProps,\n highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n key={index}\n ref={measureRef}\n highlightText={highlightText}\n option={item}\n highlighted={item === highlightedOption}\n data-mouse-target={index}\n enteredTextLabel={enteredTextLabel}\n virtualPosition={start + (index === 0 ? 1 : 0)}\n screenReaderContent={screenReaderContent}\n ariaSetsize={filteredItems.length}\n ariaPosinset={index + 1}\n highlightedType={highlightedType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default VirtualList;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,cAAc,CAAC;AAI3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AA8CpD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC;AAEH,aAAK,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IAAI,YAAY,CAC/G,oBAAoB,CAAC,CAAC,CAAC,EACvB,iBAAiB,CAClB,GACC,0BAA0B,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EAC/G,KAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,4BAA4B,CAAC,CAAC,CAAC,eA2DjC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,cAAc,CAAC;AAI3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAkDpD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC;AAEH,aAAK,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IAAI,YAAY,CAC/G,oBAAoB,CAAC,CAAC,CAAC,EACvB,iBAAiB,CAClB,GACC,0BAA0B,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EAC/G,KAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,4BAA4B,CAAC,CAAC,CAAC,eA2DjC"}
@@ -12,16 +12,16 @@ import { fireCancelableEvent } from '../internal/events';
12
12
  import { getBaseProps } from '../internal/base-component';
13
13
  import { useMobile } from '../internal/hooks/use-mobile';
14
14
  import { checkSafeUrl } from '../internal/utils/check-safe-url';
15
- var DropdownTrigger = function (clickHandler, ref, isDisabled, isExpanded) {
15
+ var DropdownTrigger = function (clickHandler, ref, isDisabled, isExpanded, ariaLabel) {
16
16
  return (React.createElement(InternalButton, { disabled: isDisabled, onClick: function (event) {
17
17
  event.preventDefault();
18
18
  clickHandler();
19
- }, ref: ref, "aria-expanded": isExpanded ? true : undefined, "aria-haspopup": true, variant: "breadcrumb-group" }, "..."));
19
+ }, ref: ref, "aria-expanded": isExpanded ? true : undefined, "aria-haspopup": true, ariaLabel: ariaLabel, variant: "breadcrumb-group", formAction: "none" }, "..."));
20
20
  };
21
21
  var EllipsisDropdown = function (_a) {
22
22
  var ariaLabel = _a.ariaLabel, dropdownItems = _a.dropdownItems, onDropdownItemClick = _a.onDropdownItemClick, onDropdownItemFollow = _a.onDropdownItemFollow;
23
- return (React.createElement("li", { className: styles.ellipsis, "aria-label": ariaLabel },
24
- React.createElement(InternalButtonDropdown, { items: dropdownItems, onItemClick: onDropdownItemClick, onItemFollow: onDropdownItemFollow, customTriggerBuilder: DropdownTrigger }),
23
+ return (React.createElement("li", { className: styles.ellipsis },
24
+ React.createElement(InternalButtonDropdown, { ariaLabel: ariaLabel, items: dropdownItems, onItemClick: onDropdownItemClick, onItemFollow: onDropdownItemFollow, customTriggerBuilder: DropdownTrigger }),
25
25
  React.createElement("span", { className: styles.icon },
26
26
  React.createElement(InternalIcon, { name: "angle-right" }))));
27
27
  };
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { SomeRequired } from '../internal/types.js';\n\nconst DropdownTrigger = (\n clickHandler: () => void,\n ref: React.Ref<ButtonProps.Ref>,\n isDisabled: boolean,\n isExpanded: boolean\n) => {\n return (\n <InternalButton\n disabled={isDisabled}\n onClick={event => {\n event.preventDefault();\n clickHandler();\n }}\n ref={ref}\n aria-expanded={isExpanded ? true : undefined}\n aria-haspopup={true}\n variant=\"breadcrumb-group\"\n >\n ...\n </InternalButton>\n );\n};\n\nconst EllipsisDropdown = ({\n ariaLabel,\n dropdownItems,\n onDropdownItemClick,\n onDropdownItemFollow,\n}: EllipsisDropdownProps) => {\n return (\n <li className={styles.ellipsis} aria-label={ariaLabel}>\n <InternalButtonDropdown\n items={dropdownItems}\n onItemClick={onDropdownItemClick}\n onItemFollow={onDropdownItemFollow}\n customTriggerBuilder={DropdownTrigger}\n />\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n </li>\n );\n};\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n item,\n text: item.text,\n href: item.href,\n});\n\ntype InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> = SomeRequired<\n BreadcrumbGroupProps<T>,\n 'expandAriaLabel'\n> &\n InternalBaseComponentProps;\n\nexport default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ariaLabel,\n expandAriaLabel,\n onClick,\n onFollow,\n __internalRootRef,\n ...props\n}: InternalBreadcrumbGroupProps<T>) {\n for (const item of items) {\n checkSafeUrl('BreadcrumbGroup', item.href);\n }\n const baseProps = getBaseProps(props);\n const isMobile = useMobile();\n\n let breadcrumbItems = items.map((item, index) => {\n return (\n <li className={styles.item} key={index}>\n <BreadcrumbItem\n item={item}\n onClick={onClick}\n onFollow={onFollow}\n isCompressed={isMobile}\n isLast={index === items.length - 1}\n />\n </li>\n );\n });\n\n const getEventItem = (e: CustomEvent<{ id: string }>) => {\n const { id } = e.detail;\n return items[parseInt(id)];\n };\n\n // Add ellipsis\n if (breadcrumbItems.length >= 3) {\n const dropdownItems: Array<LinkItem> = items\n .slice(1, items.length - 1)\n .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n id: (index + 1).toString(), // the first item doesn't get inside dropdown\n text: item.text,\n href: item.href || '#',\n }));\n\n breadcrumbItems = [\n breadcrumbItems[0],\n <EllipsisDropdown\n key={'ellipsis'}\n ariaLabel={expandAriaLabel}\n dropdownItems={dropdownItems}\n onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n />,\n ...breadcrumbItems.slice(1),\n ];\n }\n\n return (\n <nav\n {...baseProps}\n className={clsx(styles['breadcrumb-group'], isMobile && styles.mobile, baseProps.className)}\n aria-label={ariaLabel || undefined}\n ref={__internalRootRef}\n >\n <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n </nav>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { SomeRequired } from '../internal/types.js';\n\nconst DropdownTrigger = (\n clickHandler: () => void,\n ref: React.Ref<ButtonProps.Ref>,\n isDisabled: boolean,\n isExpanded: boolean,\n ariaLabel?: string\n) => {\n return (\n <InternalButton\n disabled={isDisabled}\n onClick={event => {\n event.preventDefault();\n clickHandler();\n }}\n ref={ref}\n aria-expanded={isExpanded ? true : undefined}\n aria-haspopup={true}\n ariaLabel={ariaLabel}\n variant=\"breadcrumb-group\"\n formAction=\"none\"\n >\n ...\n </InternalButton>\n );\n};\n\nconst EllipsisDropdown = ({\n ariaLabel,\n dropdownItems,\n onDropdownItemClick,\n onDropdownItemFollow,\n}: EllipsisDropdownProps) => {\n return (\n <li className={styles.ellipsis}>\n <InternalButtonDropdown\n ariaLabel={ariaLabel}\n items={dropdownItems}\n onItemClick={onDropdownItemClick}\n onItemFollow={onDropdownItemFollow}\n customTriggerBuilder={DropdownTrigger}\n />\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n </li>\n );\n};\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n item,\n text: item.text,\n href: item.href,\n});\n\ntype InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> = SomeRequired<\n BreadcrumbGroupProps<T>,\n 'expandAriaLabel'\n> &\n InternalBaseComponentProps;\n\nexport default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ariaLabel,\n expandAriaLabel,\n onClick,\n onFollow,\n __internalRootRef,\n ...props\n}: InternalBreadcrumbGroupProps<T>) {\n for (const item of items) {\n checkSafeUrl('BreadcrumbGroup', item.href);\n }\n const baseProps = getBaseProps(props);\n const isMobile = useMobile();\n\n let breadcrumbItems = items.map((item, index) => {\n return (\n <li className={styles.item} key={index}>\n <BreadcrumbItem\n item={item}\n onClick={onClick}\n onFollow={onFollow}\n isCompressed={isMobile}\n isLast={index === items.length - 1}\n />\n </li>\n );\n });\n\n const getEventItem = (e: CustomEvent<{ id: string }>) => {\n const { id } = e.detail;\n return items[parseInt(id)];\n };\n\n // Add ellipsis\n if (breadcrumbItems.length >= 3) {\n const dropdownItems: Array<LinkItem> = items\n .slice(1, items.length - 1)\n .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n id: (index + 1).toString(), // the first item doesn't get inside dropdown\n text: item.text,\n href: item.href || '#',\n }));\n\n breadcrumbItems = [\n breadcrumbItems[0],\n <EllipsisDropdown\n key={'ellipsis'}\n ariaLabel={expandAriaLabel}\n dropdownItems={dropdownItems}\n onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n />,\n ...breadcrumbItems.slice(1),\n ];\n }\n\n return (\n <nav\n {...baseProps}\n className={clsx(styles['breadcrumb-group'], isMobile && styles.mobile, baseProps.className)}\n aria-label={ariaLabel || undefined}\n ref={__internalRootRef}\n >\n <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n </nav>\n );\n}\n"]}
@@ -1,4 +1,4 @@
1
1
  import { CategoryProps } from '../interfaces';
2
- declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
2
+ declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
3
3
  export default CategoryElement;
4
4
  //# sourceMappingURL=category-element.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,QAAA,MAAM,eAAe,sHAUlB,aAAa,gBAgCf,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,QAAA,MAAM,eAAe,2IAWlB,aAAa,gBAiCf,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -4,12 +4,12 @@ import styles from './styles.css.js';
4
4
  import ItemsList from '../items-list';
5
5
  var CategoryElement = function (_a) {
6
6
  var _b;
7
- var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, variant = _a.variant;
7
+ var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isKeyboardHighlight = _a.isKeyboardHighlight, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, variant = _a.variant;
8
8
  // Hide the category title element from screen readers because it will be
9
9
  // provided as an ARIA label.
10
10
  return (React.createElement("li", { className: clsx(styles.category, styles["variant-".concat(variant)], disabled && styles.disabled), role: "presentation", "aria-disabled": disabled ? 'true' : undefined },
11
11
  item.text && (React.createElement("p", { className: clsx(styles.header, (_b = {}, _b[styles.disabled] = disabled, _b)), "aria-hidden": "true" }, item.text)),
12
- React.createElement("ul", { className: clsx(styles['items-list-container']), role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isExpanded: isExpanded, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant })))));
12
+ React.createElement("ul", { className: clsx(styles['items-list-container']), role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant })))));
13
13
  };
14
14
  export default CategoryElement;
15
15
  //# sourceMappingURL=category-element.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,IAAM,eAAe,GAAG,UAAC,EAUT;;QATd,IAAI,UAAA,EACJ,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,OAAO,aAAA;IAEP,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,MAAG,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IACpF,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,GAChB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CategoryProps } from '../interfaces';\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport ItemsList from '../items-list';\n\nconst CategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isExpanded,\n highlightItem,\n disabled,\n variant,\n}: CategoryProps) => {\n // Hide the category title element from screen readers because it will be\n // provided as an ARIA label.\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n role=\"presentation\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n {item.text && (\n <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n {item.text}\n </p>\n )}\n <ul className={clsx(styles['items-list-container'])} role=\"group\" aria-label={item.text}>\n {item.items && (\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n categoryDisabled={disabled}\n hasCategoryHeader={!!item.text}\n variant={variant}\n />\n )}\n </ul>\n </li>\n );\n};\n\nexport default CategoryElement;\n"]}
1
+ {"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,IAAM,eAAe,GAAG,UAAC,EAWT;;QAVd,IAAI,UAAA,EACJ,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,mBAAmB,yBAAA,EACnB,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,OAAO,aAAA;IAEP,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,MAAG,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IACpF,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,GAChB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CategoryProps } from '../interfaces';\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport ItemsList from '../items-list';\n\nconst CategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n variant,\n}: CategoryProps) => {\n // Hide the category title element from screen readers because it will be\n // provided as an ARIA label.\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n role=\"presentation\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n {item.text && (\n <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n {item.text}\n </p>\n )}\n <ul className={clsx(styles['items-list-container'])} role=\"group\" aria-label={item.text}>\n {item.items && (\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n categoryDisabled={disabled}\n hasCategoryHeader={!!item.text}\n variant={variant}\n />\n )}\n </ul>\n </li>\n );\n};\n\nexport default CategoryElement;\n"]}
@@ -1,4 +1,4 @@
1
1
  import { CategoryProps } from '../interfaces';
2
- declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isExpanded, highlightItem, disabled, expandToViewport, variant, }: CategoryProps) => JSX.Element;
2
+ declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant, }: CategoryProps) => JSX.Element;
3
3
  export default ExpandableCategoryElement;
4
4
  //# sourceMappingURL=expandable-category-element.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,yBAAyB,wIAW5B,aAAa,gBAwGf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
1
+ {"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,yBAAyB,6JAY5B,aAAa,gBA2Gf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
@@ -12,9 +12,10 @@ import Tooltip from '../tooltip.js';
12
12
  import { getMenuItemProps } from '../utils/menu-item';
13
13
  var ExpandableCategoryElement = function (_a) {
14
14
  var _b, _c;
15
- var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, expandToViewport = _a.expandToViewport, variant = _a.variant;
15
+ var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isKeyboardHighlight = _a.isKeyboardHighlight, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, expandToViewport = _a.expandToViewport, variant = _a.variant;
16
16
  var highlighted = isHighlighted(item);
17
17
  var expanded = isExpanded(item);
18
+ var isKeyboardHighlighted = isKeyboardHighlight(item);
18
19
  var triggerRef = React.useRef(null);
19
20
  var ref = useRef(null);
20
21
  useEffect(function () {
@@ -39,6 +40,7 @@ var ExpandableCategoryElement = function (_a) {
39
40
  var trigger = item.text && (React.createElement("span", __assign({ className: clsx(styles.header, styles['expandable-header'], styles["variant-".concat(variant)], (_b = {},
40
41
  _b[styles.disabled] = disabled,
41
42
  _b[styles.highlighted] = highlighted,
43
+ _b[styles['is-focused']] = isKeyboardHighlighted,
42
44
  _b)),
43
45
  // We are using the roving tabindex technique to manage the focus state of the dropdown.
44
46
  // The current element will always have tabindex=0 which means that it can be tabbed to,
@@ -60,7 +62,7 @@ var ExpandableCategoryElement = function (_a) {
60
62
  }
61
63
  else {
62
64
  content = (React.createElement(Dropdown, { open: expanded, stretchWidth: false, interior: true, expandToViewport: expandToViewport, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
63
- React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isExpanded: isExpanded, highlightItem: highlightItem, variant: variant })))));
65
+ React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, variant: variant })))));
64
66
  }
65
67
  return (React.createElement("li", { className: clsx(styles.category, styles["variant-".concat(variant)], styles.expandable, (_c = {},
66
68
  _c[styles.expanded] = expanded,
@@ -1 +1 @@
1
- {"version":3,"file":"expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport Dropdown from '../../internal/components/dropdown';\nimport { CategoryProps } from '../interfaces';\nimport useHiddenDescription from '../utils/use-hidden-description';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nconst ExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isExpanded,\n highlightItem,\n disabled,\n expandToViewport,\n variant,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const triggerRef = React.useRef<HTMLSpanElement>(null);\n const ref = useRef<HTMLLIElement>(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick: React.MouseEventHandler = event => {\n if (!disabled) {\n event.preventDefault();\n onGroupToggle(item, event);\n triggerRef.current?.focus();\n }\n };\n\n const onHover = (event: React.SyntheticEvent) => {\n event.preventDefault();\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n <span\n className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n })}\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex={highlighted ? 0 : -1}\n ref={triggerRef}\n {...getMenuItemProps({ parent: true, expanded, disabled })}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {item.text}\n <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n <InternalIcon name=\"caret-down-filled\" />\n </span>\n </span>\n );\n\n let content: React.ReactNode;\n // If the category element is disabled, we do not render a dropdown.\n // Screenreaders are confused by additional sections\n if (isDisabledWithReason) {\n content = (\n <Tooltip content={item.disabledReason}>\n {trigger}\n {descriptionEl}\n </Tooltip>\n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n <Dropdown\n open={expanded}\n stretchWidth={false}\n interior={true}\n expandToViewport={expandToViewport}\n trigger={trigger}\n >\n {item.items && expanded && (\n <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n variant={variant}\n />\n </ul>\n )}\n </Dropdown>\n );\n }\n\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n [styles.expanded]: expanded,\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n })}\n role=\"presentation\"\n data-testid={item.id}\n ref={ref}\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n >\n {content}\n </li>\n );\n};\n\nexport default ExpandableCategoryElement;\n"]}
1
+ {"version":3,"file":"expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport Dropdown from '../../internal/components/dropdown';\nimport { CategoryProps } from '../interfaces';\nimport useHiddenDescription from '../utils/use-hidden-description';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nconst ExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n expandToViewport,\n variant,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const isKeyboardHighlighted = isKeyboardHighlight(item);\n const triggerRef = React.useRef<HTMLSpanElement>(null);\n const ref = useRef<HTMLLIElement>(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick: React.MouseEventHandler = event => {\n if (!disabled) {\n event.preventDefault();\n onGroupToggle(item, event);\n triggerRef.current?.focus();\n }\n };\n\n const onHover = (event: React.SyntheticEvent) => {\n event.preventDefault();\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n <span\n className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n [styles['is-focused']]: isKeyboardHighlighted,\n })}\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex={highlighted ? 0 : -1}\n ref={triggerRef}\n {...getMenuItemProps({ parent: true, expanded, disabled })}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {item.text}\n <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n <InternalIcon name=\"caret-down-filled\" />\n </span>\n </span>\n );\n\n let content: React.ReactNode;\n // If the category element is disabled, we do not render a dropdown.\n // Screenreaders are confused by additional sections\n if (isDisabledWithReason) {\n content = (\n <Tooltip content={item.disabledReason}>\n {trigger}\n {descriptionEl}\n </Tooltip>\n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n <Dropdown\n open={expanded}\n stretchWidth={false}\n interior={true}\n expandToViewport={expandToViewport}\n trigger={trigger}\n >\n {item.items && expanded && (\n <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n variant={variant}\n />\n </ul>\n )}\n </Dropdown>\n );\n }\n\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n [styles.expanded]: expanded,\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n })}\n role=\"presentation\"\n data-testid={item.id}\n ref={ref}\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n >\n {content}\n </li>\n );\n};\n\nexport default ExpandableCategoryElement;\n"]}
@@ -1,4 +1,4 @@
1
1
  import { CategoryProps } from '../interfaces';
2
- declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
2
+ declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
3
3
  export default MobileExpandableCategoryElement;
4
4
  //# sourceMappingURL=mobile-expandable-category-element.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,+BAA+B,sHAUlC,aAAa,gBAqGf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}
1
+ {"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,+BAA+B,2IAWlC,aAAa,gBAwGf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}