@salt-ds/lab 1.0.0-alpha.26 → 1.0.0-alpha.27

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 (254) hide show
  1. package/css/salt-lab.css +378 -413
  2. package/dist-cjs/combo-box-next/ComboBoxNext.js +303 -166
  3. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
  4. package/dist-cjs/combo-box-next/useComboBoxNext.js +55 -0
  5. package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -0
  6. package/dist-cjs/dropdown/DropdownBase.js +1 -1
  7. package/dist-cjs/dropdown/DropdownBase.js.map +1 -1
  8. package/dist-cjs/dropdown-next/DropdownNext.css.js +1 -1
  9. package/dist-cjs/dropdown-next/DropdownNext.js +333 -169
  10. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
  11. package/dist-cjs/editable-label/EditableLabel.js +1 -1
  12. package/dist-cjs/editable-label/EditableLabel.js.map +1 -1
  13. package/dist-cjs/index.js +8 -10
  14. package/dist-cjs/index.js.map +1 -1
  15. package/dist-cjs/layer-layout/LayerLayout.js +0 -1
  16. package/dist-cjs/layer-layout/LayerLayout.js.map +1 -1
  17. package/dist-cjs/list-control/ListControlContext.js +36 -0
  18. package/dist-cjs/list-control/ListControlContext.js.map +1 -0
  19. package/dist-cjs/list-control/ListControlState.js +193 -0
  20. package/dist-cjs/list-control/ListControlState.js.map +1 -0
  21. package/dist-cjs/navigation-item/ConditionalWrapper.js +2 -4
  22. package/dist-cjs/navigation-item/ConditionalWrapper.js.map +1 -1
  23. package/dist-cjs/navigation-item/ExpansionIcon.js +2 -4
  24. package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
  25. package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
  26. package/dist-cjs/navigation-item/NavigationItem.js +4 -7
  27. package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
  28. package/dist-cjs/option/Option.css.js +6 -0
  29. package/dist-cjs/option/Option.css.js.map +1 -0
  30. package/dist-cjs/option/Option.js +113 -0
  31. package/dist-cjs/option/Option.js.map +1 -0
  32. package/dist-cjs/option/OptionGroup.css.js +6 -0
  33. package/dist-cjs/option/OptionGroup.css.js.map +1 -0
  34. package/dist-cjs/option/OptionGroup.js +44 -0
  35. package/dist-cjs/option/OptionGroup.js.map +1 -0
  36. package/dist-cjs/option/OptionList.css.js +6 -0
  37. package/dist-cjs/option/OptionList.css.js.map +1 -0
  38. package/dist-cjs/option/OptionList.js +40 -0
  39. package/dist-cjs/option/OptionList.js.map +1 -0
  40. package/dist-cjs/scrim/Scrim.css.js +1 -1
  41. package/dist-cjs/scrim/Scrim.js +10 -140
  42. package/dist-cjs/scrim/Scrim.js.map +1 -1
  43. package/dist-cjs/tokenized-input/internal/InputPill.js +13 -9
  44. package/dist-cjs/tokenized-input/internal/InputPill.js.map +1 -1
  45. package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +6 -0
  46. package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js.map +1 -0
  47. package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +244 -0
  48. package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -0
  49. package/dist-cjs/tokenized-input-next/internal/InputPill.css.js +6 -0
  50. package/dist-cjs/tokenized-input-next/internal/InputPill.css.js.map +1 -0
  51. package/dist-cjs/tokenized-input-next/internal/InputPill.js +83 -0
  52. package/dist-cjs/tokenized-input-next/internal/InputPill.js.map +1 -0
  53. package/dist-cjs/tokenized-input-next/internal/calcFirstHiddenIndex.js +22 -0
  54. package/dist-cjs/tokenized-input-next/internal/calcFirstHiddenIndex.js.map +1 -0
  55. package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js +37 -0
  56. package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js.map +1 -0
  57. package/dist-cjs/tokenized-input-next/internal/useWidth.js +48 -0
  58. package/dist-cjs/tokenized-input-next/internal/useWidth.js.map +1 -0
  59. package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js +479 -0
  60. package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js.map +1 -0
  61. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js +1 -1
  62. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
  63. package/dist-cjs/tree/Tree.js +1 -2
  64. package/dist-cjs/tree/Tree.js.map +1 -1
  65. package/dist-es/combo-box-next/ComboBoxNext.js +306 -169
  66. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
  67. package/dist-es/combo-box-next/useComboBoxNext.js +51 -0
  68. package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -0
  69. package/dist-es/dropdown/DropdownBase.js +1 -1
  70. package/dist-es/dropdown/DropdownBase.js.map +1 -1
  71. package/dist-es/dropdown-next/DropdownNext.css.js +1 -1
  72. package/dist-es/dropdown-next/DropdownNext.js +332 -168
  73. package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
  74. package/dist-es/editable-label/EditableLabel.js +1 -1
  75. package/dist-es/editable-label/EditableLabel.js.map +1 -1
  76. package/dist-es/index.js +4 -5
  77. package/dist-es/index.js.map +1 -1
  78. package/dist-es/layer-layout/LayerLayout.js +0 -1
  79. package/dist-es/layer-layout/LayerLayout.js.map +1 -1
  80. package/dist-es/list-control/ListControlContext.js +31 -0
  81. package/dist-es/list-control/ListControlContext.js.map +1 -0
  82. package/dist-es/list-control/ListControlState.js +189 -0
  83. package/dist-es/list-control/ListControlState.js.map +1 -0
  84. package/dist-es/navigation-item/ConditionalWrapper.js +2 -4
  85. package/dist-es/navigation-item/ConditionalWrapper.js.map +1 -1
  86. package/dist-es/navigation-item/ExpansionIcon.js +2 -4
  87. package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
  88. package/dist-es/navigation-item/NavigationItem.css.js +1 -1
  89. package/dist-es/navigation-item/NavigationItem.js +4 -7
  90. package/dist-es/navigation-item/NavigationItem.js.map +1 -1
  91. package/dist-es/option/Option.css.js +4 -0
  92. package/dist-es/option/Option.css.js.map +1 -0
  93. package/dist-es/option/Option.js +109 -0
  94. package/dist-es/option/Option.js.map +1 -0
  95. package/dist-es/option/OptionGroup.css.js +4 -0
  96. package/dist-es/option/OptionGroup.css.js.map +1 -0
  97. package/dist-es/option/OptionGroup.js +40 -0
  98. package/dist-es/option/OptionGroup.js.map +1 -0
  99. package/dist-es/option/OptionList.css.js +4 -0
  100. package/dist-es/option/OptionList.css.js.map +1 -0
  101. package/dist-es/option/OptionList.js +36 -0
  102. package/dist-es/option/OptionList.js.map +1 -0
  103. package/dist-es/scrim/Scrim.css.js +1 -1
  104. package/dist-es/scrim/Scrim.js +12 -138
  105. package/dist-es/scrim/Scrim.js.map +1 -1
  106. package/dist-es/tokenized-input/internal/InputPill.js +15 -11
  107. package/dist-es/tokenized-input/internal/InputPill.js.map +1 -1
  108. package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +4 -0
  109. package/dist-es/tokenized-input-next/TokenizedInputNext.css.js.map +1 -0
  110. package/dist-es/tokenized-input-next/TokenizedInputNext.js +240 -0
  111. package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -0
  112. package/dist-es/tokenized-input-next/internal/InputPill.css.js +4 -0
  113. package/dist-es/tokenized-input-next/internal/InputPill.css.js.map +1 -0
  114. package/dist-es/tokenized-input-next/internal/InputPill.js +79 -0
  115. package/dist-es/tokenized-input-next/internal/InputPill.js.map +1 -0
  116. package/dist-es/tokenized-input-next/internal/calcFirstHiddenIndex.js +18 -0
  117. package/dist-es/tokenized-input-next/internal/calcFirstHiddenIndex.js.map +1 -0
  118. package/dist-es/tokenized-input-next/internal/useResizeObserver.js +33 -0
  119. package/dist-es/tokenized-input-next/internal/useResizeObserver.js.map +1 -0
  120. package/dist-es/tokenized-input-next/internal/useWidth.js +42 -0
  121. package/dist-es/tokenized-input-next/internal/useWidth.js.map +1 -0
  122. package/dist-es/tokenized-input-next/useTokenizedInputNext.js +471 -0
  123. package/dist-es/tokenized-input-next/useTokenizedInputNext.js.map +1 -0
  124. package/dist-es/toolbar/overflow-panel/OverflowPanel.js +1 -1
  125. package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
  126. package/dist-es/tree/Tree.js +1 -2
  127. package/dist-es/tree/Tree.js.map +1 -1
  128. package/dist-types/combo-box-next/ComboBoxNext.d.ts +7 -80
  129. package/dist-types/combo-box-next/useComboBoxNext.d.ts +31 -0
  130. package/dist-types/dropdown-next/DropdownNext.d.ts +25 -27
  131. package/dist-types/index.d.ts +2 -2
  132. package/dist-types/list-control/ListControlContext.d.ts +20 -0
  133. package/dist-types/list-control/ListControlState.d.ts +68 -0
  134. package/dist-types/navigation-item/ConditionalWrapper.d.ts +1 -1
  135. package/dist-types/navigation-item/ExpansionIcon.d.ts +1 -1
  136. package/dist-types/option/Option.d.ts +20 -0
  137. package/dist-types/option/OptionGroup.d.ts +12 -0
  138. package/dist-types/option/OptionList.d.ts +5 -0
  139. package/dist-types/option/index.d.ts +2 -0
  140. package/dist-types/scrim/Scrim.d.ts +6 -61
  141. package/dist-types/scrim/index.d.ts +0 -1
  142. package/dist-types/tokenized-input/internal/InputPill.d.ts +7 -5
  143. package/dist-types/tokenized-input-next/TokenizedInputNext.d.ts +51 -0
  144. package/dist-types/tokenized-input-next/index.d.ts +2 -0
  145. package/dist-types/tokenized-input-next/internal/InputPill.d.ts +29 -0
  146. package/dist-types/tokenized-input-next/internal/calcFirstHiddenIndex.d.ts +4 -0
  147. package/dist-types/tokenized-input-next/internal/useResizeObserver.d.ts +6 -0
  148. package/dist-types/tokenized-input-next/internal/useWidth.d.ts +7 -0
  149. package/dist-types/tokenized-input-next/useTokenizedInputNext.d.ts +47 -0
  150. package/package.json +2 -2
  151. package/dist-cjs/combo-box-next/ComboBoxNext.css.js +0 -6
  152. package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map +0 -1
  153. package/dist-cjs/combo-box-next/useComboBox.js +0 -147
  154. package/dist-cjs/combo-box-next/useComboBox.js.map +0 -1
  155. package/dist-cjs/combo-box-next/useComboboxPortal.js +0 -75
  156. package/dist-cjs/combo-box-next/useComboboxPortal.js.map +0 -1
  157. package/dist-cjs/combo-box-next/utils.js +0 -36
  158. package/dist-cjs/combo-box-next/utils.js.map +0 -1
  159. package/dist-cjs/dropdown-next/useDropdownNext.js +0 -188
  160. package/dist-cjs/dropdown-next/useDropdownNext.js.map +0 -1
  161. package/dist-cjs/focus-manager/FocusManager.js +0 -158
  162. package/dist-cjs/focus-manager/FocusManager.js.map +0 -1
  163. package/dist-cjs/focus-manager/internal/findAllTabbableElements.js +0 -45
  164. package/dist-cjs/focus-manager/internal/findAllTabbableElements.js.map +0 -1
  165. package/dist-cjs/focus-manager/internal/useReturnFocus.js +0 -59
  166. package/dist-cjs/focus-manager/internal/useReturnFocus.js.map +0 -1
  167. package/dist-cjs/pill/ClosablePill.js +0 -61
  168. package/dist-cjs/pill/ClosablePill.js.map +0 -1
  169. package/dist-cjs/pill/Pill.css.js +0 -6
  170. package/dist-cjs/pill/Pill.css.js.map +0 -1
  171. package/dist-cjs/pill/Pill.js +0 -49
  172. package/dist-cjs/pill/Pill.js.map +0 -1
  173. package/dist-cjs/pill/PillBase.js +0 -133
  174. package/dist-cjs/pill/PillBase.js.map +0 -1
  175. package/dist-cjs/pill/SelectablePill.js +0 -55
  176. package/dist-cjs/pill/SelectablePill.js.map +0 -1
  177. package/dist-cjs/pill/constants.js +0 -8
  178. package/dist-cjs/pill/constants.js.map +0 -1
  179. package/dist-cjs/pill/internal/DeleteButton.js +0 -37
  180. package/dist-cjs/pill/internal/DeleteButton.js.map +0 -1
  181. package/dist-cjs/pill/internal/DivButton.js +0 -68
  182. package/dist-cjs/pill/internal/DivButton.js.map +0 -1
  183. package/dist-cjs/pill/internal/PillCheckbox.css.js +0 -6
  184. package/dist-cjs/pill/internal/PillCheckbox.css.js.map +0 -1
  185. package/dist-cjs/pill/internal/PillCheckbox.js +0 -27
  186. package/dist-cjs/pill/internal/PillCheckbox.js.map +0 -1
  187. package/dist-cjs/pill-next/PillNext.css.js +0 -6
  188. package/dist-cjs/pill-next/PillNext.css.js.map +0 -1
  189. package/dist-cjs/pill-next/PillNext.js +0 -60
  190. package/dist-cjs/pill-next/PillNext.js.map +0 -1
  191. package/dist-cjs/scrim/ScrimContext.js +0 -13
  192. package/dist-cjs/scrim/ScrimContext.js.map +0 -1
  193. package/dist-cjs/scrim/internal/PreventFocus.js +0 -39
  194. package/dist-cjs/scrim/internal/PreventFocus.js.map +0 -1
  195. package/dist-es/combo-box-next/ComboBoxNext.css.js +0 -4
  196. package/dist-es/combo-box-next/ComboBoxNext.css.js.map +0 -1
  197. package/dist-es/combo-box-next/useComboBox.js +0 -143
  198. package/dist-es/combo-box-next/useComboBox.js.map +0 -1
  199. package/dist-es/combo-box-next/useComboboxPortal.js +0 -71
  200. package/dist-es/combo-box-next/useComboboxPortal.js.map +0 -1
  201. package/dist-es/combo-box-next/utils.js +0 -31
  202. package/dist-es/combo-box-next/utils.js.map +0 -1
  203. package/dist-es/dropdown-next/useDropdownNext.js +0 -184
  204. package/dist-es/dropdown-next/useDropdownNext.js.map +0 -1
  205. package/dist-es/focus-manager/FocusManager.js +0 -154
  206. package/dist-es/focus-manager/FocusManager.js.map +0 -1
  207. package/dist-es/focus-manager/internal/findAllTabbableElements.js +0 -41
  208. package/dist-es/focus-manager/internal/findAllTabbableElements.js.map +0 -1
  209. package/dist-es/focus-manager/internal/useReturnFocus.js +0 -55
  210. package/dist-es/focus-manager/internal/useReturnFocus.js.map +0 -1
  211. package/dist-es/pill/ClosablePill.js +0 -57
  212. package/dist-es/pill/ClosablePill.js.map +0 -1
  213. package/dist-es/pill/Pill.css.js +0 -4
  214. package/dist-es/pill/Pill.css.js.map +0 -1
  215. package/dist-es/pill/Pill.js +0 -45
  216. package/dist-es/pill/Pill.js.map +0 -1
  217. package/dist-es/pill/PillBase.js +0 -129
  218. package/dist-es/pill/PillBase.js.map +0 -1
  219. package/dist-es/pill/SelectablePill.js +0 -51
  220. package/dist-es/pill/SelectablePill.js.map +0 -1
  221. package/dist-es/pill/constants.js +0 -4
  222. package/dist-es/pill/constants.js.map +0 -1
  223. package/dist-es/pill/internal/DeleteButton.js +0 -33
  224. package/dist-es/pill/internal/DeleteButton.js.map +0 -1
  225. package/dist-es/pill/internal/DivButton.js +0 -64
  226. package/dist-es/pill/internal/DivButton.js.map +0 -1
  227. package/dist-es/pill/internal/PillCheckbox.css.js +0 -4
  228. package/dist-es/pill/internal/PillCheckbox.css.js.map +0 -1
  229. package/dist-es/pill/internal/PillCheckbox.js +0 -23
  230. package/dist-es/pill/internal/PillCheckbox.js.map +0 -1
  231. package/dist-es/pill-next/PillNext.css.js +0 -4
  232. package/dist-es/pill-next/PillNext.css.js.map +0 -1
  233. package/dist-es/pill-next/PillNext.js +0 -52
  234. package/dist-es/pill-next/PillNext.js.map +0 -1
  235. package/dist-es/scrim/ScrimContext.js +0 -9
  236. package/dist-es/scrim/ScrimContext.js.map +0 -1
  237. package/dist-es/scrim/internal/PreventFocus.js +0 -35
  238. package/dist-es/scrim/internal/PreventFocus.js.map +0 -1
  239. package/dist-types/combo-box-next/useComboBox.d.ts +0 -44
  240. package/dist-types/combo-box-next/useComboboxPortal.d.ts +0 -22
  241. package/dist-types/combo-box-next/utils.d.ts +0 -7
  242. package/dist-types/dropdown-next/useDropdownNext.d.ts +0 -50
  243. package/dist-types/pill/ClosablePill.d.ts +0 -8
  244. package/dist-types/pill/Pill.d.ts +0 -15
  245. package/dist-types/pill/PillBase.d.ts +0 -52
  246. package/dist-types/pill/SelectablePill.d.ts +0 -17
  247. package/dist-types/pill/constants.d.ts +0 -1
  248. package/dist-types/pill/index.d.ts +0 -3
  249. package/dist-types/pill/internal/DeleteButton.d.ts +0 -8
  250. package/dist-types/pill/internal/DivButton.d.ts +0 -12
  251. package/dist-types/pill/internal/PillCheckbox.d.ts +0 -3
  252. package/dist-types/pill-next/PillNext.d.ts +0 -4
  253. package/dist-types/pill-next/index.d.ts +0 -1
  254. package/dist-types/scrim/ScrimContext.d.ts +0 -1
@@ -0,0 +1,471 @@
1
+ import { useFormFieldProps, useDensity, useId, useForkRef, useControlled, useIsomorphicLayoutEffect, ownerWindow } from '@salt-ds/core';
2
+ import copy from 'clipboard-copy';
3
+ import { useState, useRef, useMemo, useCallback } from 'react';
4
+ import { escapeRegExp } from '../utils/escapeRegExp.js';
5
+ import { useWidth, getPadding } from './internal/useWidth.js';
6
+ import { useResizeObserver } from './internal/useResizeObserver.js';
7
+ import { calcFirstHiddenIndex } from './internal/calcFirstHiddenIndex.js';
8
+
9
+ const getCursorPosition = (inputRef) => {
10
+ if (inputRef.current) {
11
+ const { selectionStart, selectionEnd } = inputRef.current;
12
+ if (selectionStart != null && selectionStart === selectionEnd) {
13
+ return selectionStart;
14
+ }
15
+ }
16
+ return -1;
17
+ };
18
+ const isCtrlModifier = (event) => {
19
+ return event.ctrlKey || event.metaKey || ["CONTROL", "META"].indexOf(event.key.toUpperCase()) !== -1;
20
+ };
21
+ function isValidItem(data) {
22
+ return typeof data === "string" && Boolean(data.length) || typeof data !== "string" && data != null;
23
+ }
24
+ function useTokenizedInputNext(props) {
25
+ const {
26
+ disabled: formFieldDisabled,
27
+ readOnly,
28
+ necessity,
29
+ validationStatus,
30
+ a11yProps: {
31
+ "aria-describedby": ariaDescribedBy,
32
+ "aria-labelledby": ariaLabelledBy
33
+ } = {}
34
+ } = useFormFieldProps();
35
+ const {
36
+ delimiters = [","],
37
+ defaultSelected = [],
38
+ disabled = formFieldDisabled,
39
+ readOnly: readOnlyProp,
40
+ validationStatus: validationStatusProp,
41
+ disableAddOnBlur,
42
+ onBlur,
43
+ onClick,
44
+ onExpand,
45
+ onCollapse,
46
+ onKeyDown,
47
+ onInputChange,
48
+ onInputFocus,
49
+ onInputBlur,
50
+ onClear,
51
+ onChange,
52
+ id: idProp,
53
+ value: valueProp,
54
+ expanded: expandedProp,
55
+ selectedItems: selectedItemsProp,
56
+ "aria-label": ariaLabel,
57
+ "aria-describedby": ariaDescribedByProp,
58
+ expandButtonRef: expandButtonRefProp,
59
+ ...restProps
60
+ } = props;
61
+ const density = useDensity();
62
+ const id = useId(idProp);
63
+ const [focused, setFocused] = useState(false);
64
+ const [pillGroupWidth, setPillGroupWidth] = useState(null);
65
+ const [firstHiddenIndex, setFirstHiddenIndex] = useState(null);
66
+ const [activeIndices, setActiveIndices] = useState([]);
67
+ const [highlightedIndex, setHighlightedIndex] = useState(
68
+ void 0
69
+ );
70
+ const [expandButtonHookRef, expandButtonWidth] = useWidth(density);
71
+ const [clearButtonRef, clearButtonWidth] = useWidth(density);
72
+ const [statusAdornmentRef, statusAdornmentWidth] = useWidth(density);
73
+ const [inputRef, inputWidth] = useWidth(density);
74
+ const containerRef = useRef(null);
75
+ const pillsRef = useRef({});
76
+ const textAreaRef = useRef(null);
77
+ const preventBlurOnCopy = useRef(false);
78
+ const expandButtonRef = useForkRef(expandButtonHookRef, expandButtonRefProp);
79
+ const hasActiveItems = Boolean(activeIndices.length);
80
+ const primaryDelimiter = delimiters[0];
81
+ const delimiterRegex = useMemo(
82
+ () => new RegExp(delimiters.map(escapeRegExp).join("|"), "gi"),
83
+ [delimiters]
84
+ );
85
+ const [value, setValue, isInputControlled] = useControlled({
86
+ controlled: valueProp,
87
+ default: "",
88
+ name: "TokenizedInputNext",
89
+ state: "value"
90
+ });
91
+ const [selectedItems = [], setSelectedItems, isSelectionControlled] = useControlled({
92
+ controlled: selectedItemsProp,
93
+ default: defaultSelected,
94
+ name: "TokenizedInputNext",
95
+ state: "selectedItems"
96
+ });
97
+ const [expanded, setExpanded, isExpandedControlled] = useControlled({
98
+ controlled: expandedProp,
99
+ default: false,
100
+ name: "TokenizedInputNext",
101
+ state: "expanded"
102
+ });
103
+ const widthOffset = inputWidth + statusAdornmentWidth + (expanded ? clearButtonWidth : expandButtonWidth);
104
+ const containerObserverRef = useResizeObserver(
105
+ useCallback(
106
+ ([{ contentRect }]) => {
107
+ const padding = getPadding(containerRef.current);
108
+ setPillGroupWidth(contentRect.width - padding - widthOffset);
109
+ },
110
+ [widthOffset]
111
+ )
112
+ );
113
+ useIsomorphicLayoutEffect(
114
+ () => () => {
115
+ setFirstHiddenIndex(null);
116
+ },
117
+ [density]
118
+ );
119
+ useIsomorphicLayoutEffect(
120
+ () => {
121
+ if (expanded) {
122
+ setFirstHiddenIndex(null);
123
+ } else if (pillGroupWidth != null) {
124
+ setFirstHiddenIndex(
125
+ calcFirstHiddenIndex({
126
+ containerWidth: pillGroupWidth,
127
+ pillWidths: Object.values(pillsRef.current).filter(
128
+ Boolean
129
+ )
130
+ })
131
+ );
132
+ }
133
+ },
134
+ [expanded, pillGroupWidth, selectedItems]
135
+ );
136
+ const focusInput = useCallback(() => {
137
+ if (textAreaRef.current) {
138
+ textAreaRef.current.focus();
139
+ }
140
+ }, []);
141
+ const updateInputValue = (newValue) => {
142
+ if (!isInputControlled) {
143
+ setValue(newValue);
144
+ }
145
+ };
146
+ const updateSelectedItems = useCallback(
147
+ (event, action) => {
148
+ if (!isSelectionControlled) {
149
+ setSelectedItems((prevSelectedItems) => {
150
+ const newItems = typeof action === "function" ? action(prevSelectedItems) : action;
151
+ if (newItems !== prevSelectedItems) {
152
+ onChange == null ? void 0 : onChange(event, newItems);
153
+ }
154
+ return newItems;
155
+ });
156
+ } else {
157
+ onChange == null ? void 0 : onChange(
158
+ event,
159
+ typeof action === "function" ? action(selectedItems) : action
160
+ );
161
+ }
162
+ },
163
+ [isSelectionControlled, setSelectedItems, onChange, selectedItems]
164
+ );
165
+ const updateExpanded = (event, newExpanded) => {
166
+ if (!isExpandedControlled) {
167
+ setExpanded(newExpanded);
168
+ }
169
+ if (newExpanded) {
170
+ focusInput();
171
+ onExpand == null ? void 0 : onExpand(event);
172
+ } else {
173
+ onCollapse == null ? void 0 : onCollapse(event);
174
+ }
175
+ };
176
+ const resetInput = () => {
177
+ updateInputValue("");
178
+ setHighlightedIndex(void 0);
179
+ setActiveIndices([]);
180
+ };
181
+ const removeItems = useCallback(
182
+ (event, itemIndices) => {
183
+ updateSelectedItems(
184
+ event,
185
+ (prevSelectedItems) => prevSelectedItems && (prevSelectedItems.length === 0 ? prevSelectedItems : prevSelectedItems.filter(
186
+ (_, index) => itemIndices.indexOf(index) === -1
187
+ ))
188
+ );
189
+ },
190
+ [updateSelectedItems]
191
+ );
192
+ const handleInputFocus = (event) => {
193
+ event.stopPropagation();
194
+ if (preventBlurOnCopy.current) {
195
+ preventBlurOnCopy.current = false;
196
+ setActiveIndices(
197
+ Array.from(
198
+ { length: selectedItems ? selectedItems.length : 0 },
199
+ (_, index) => index
200
+ )
201
+ );
202
+ return;
203
+ }
204
+ onInputFocus == null ? void 0 : onInputFocus(event);
205
+ updateExpanded(event, true);
206
+ setFocused(true);
207
+ };
208
+ const handleBlur = (event) => {
209
+ onBlur == null ? void 0 : onBlur(event);
210
+ setFocused(false);
211
+ updateExpanded(event, false);
212
+ };
213
+ const handleInputBlur = (event) => {
214
+ const container = containerRef == null ? void 0 : containerRef.current;
215
+ const eventTarget = event.relatedTarget;
216
+ event.preventDefault();
217
+ event.stopPropagation();
218
+ setHighlightedIndex(void 0);
219
+ setActiveIndices([]);
220
+ if (!disableAddOnBlur) {
221
+ handleAddItems(event, value);
222
+ }
223
+ onInputBlur == null ? void 0 : onInputBlur(event);
224
+ if (eventTarget !== container && !(container == null ? void 0 : container.contains(eventTarget))) {
225
+ handleBlur(event);
226
+ }
227
+ };
228
+ const handleClick = (event) => {
229
+ updateExpanded(event, true);
230
+ setActiveIndices([]);
231
+ onClick == null ? void 0 : onClick(event);
232
+ };
233
+ const handleInputChange = (event) => {
234
+ setHighlightedIndex(void 0);
235
+ onInputChange == null ? void 0 : onInputChange(event);
236
+ const newValue = event.target.value;
237
+ if (delimiterRegex.test(newValue)) {
238
+ handleAddItems(event, newValue);
239
+ } else {
240
+ updateInputValue(newValue);
241
+ }
242
+ };
243
+ const handleAddItems = (event, newValue, appendOnly) => {
244
+ if (!newValue || newValue.length === 0) {
245
+ return;
246
+ }
247
+ resetInput();
248
+ const newItems = newValue.split(delimiterRegex).reduce((values, item) => {
249
+ const newItem = item.trim();
250
+ return isValidItem(newItem) ? values.concat(newItem) : values;
251
+ }, []);
252
+ if (newItems.length) {
253
+ updateSelectedItems(
254
+ event,
255
+ (prevSelectedItems = []) => hasActiveItems && !appendOnly ? newItems : prevSelectedItems.concat(newItems)
256
+ );
257
+ }
258
+ };
259
+ const handleRemoveItem = useCallback(
260
+ (event, itemIndex) => {
261
+ focusInput();
262
+ if (itemIndex != void 0 && !readOnly && !readOnlyProp) {
263
+ removeItems(event, [itemIndex]);
264
+ }
265
+ },
266
+ [focusInput, removeItems]
267
+ );
268
+ const handleClear = (event) => {
269
+ updateSelectedItems(event, []);
270
+ resetInput();
271
+ focusInput();
272
+ onClear == null ? void 0 : onClear(event);
273
+ };
274
+ const cursorAtInputStart = () => getCursorPosition(textAreaRef) === 0 && Boolean(selectedItems.length);
275
+ const highlightAtPillGroupEnd = () => highlightedIndex === selectedItems.length - 1;
276
+ const pillGroupKeyDownHandlers = {
277
+ ArrowLeft: (event) => {
278
+ event.preventDefault();
279
+ setHighlightedIndex(
280
+ (prevHighlightedIndex) => prevHighlightedIndex == null ? selectedItems.length - 1 : Math.max(0, prevHighlightedIndex - 1)
281
+ );
282
+ },
283
+ ArrowRight: (event) => {
284
+ if (highlightAtPillGroupEnd()) {
285
+ return setHighlightedIndex(void 0);
286
+ }
287
+ event.preventDefault();
288
+ setHighlightedIndex(
289
+ (prevHighlightedIndex) => prevHighlightedIndex == null ? prevHighlightedIndex : Math.min(selectedItems.length - 1, prevHighlightedIndex + 1)
290
+ );
291
+ },
292
+ Backspace: (event) => {
293
+ event.preventDefault();
294
+ handleRemoveItem(event, highlightedIndex);
295
+ setHighlightedIndex(
296
+ (prevHighlightedIndex) => prevHighlightedIndex == null ? prevHighlightedIndex : Math.max(0, prevHighlightedIndex - 1)
297
+ );
298
+ },
299
+ Home: (event) => {
300
+ event.preventDefault();
301
+ setHighlightedIndex(0);
302
+ },
303
+ End: (event) => {
304
+ event.preventDefault();
305
+ setHighlightedIndex(selectedItems.length - 1);
306
+ },
307
+ Enter: (event) => {
308
+ event.preventDefault();
309
+ handleRemoveItem(event, highlightedIndex);
310
+ },
311
+ Delete: (event) => {
312
+ event.preventDefault();
313
+ handleRemoveItem(event, highlightedIndex);
314
+ },
315
+ " ": (event) => {
316
+ event.preventDefault();
317
+ handleRemoveItem(event, highlightedIndex);
318
+ }
319
+ };
320
+ const inputKeyDownHandlers = {
321
+ ArrowLeft: (event) => {
322
+ if (cursorAtInputStart()) {
323
+ event.preventDefault();
324
+ setHighlightedIndex(selectedItems.length - 1);
325
+ }
326
+ },
327
+ Backspace: (event) => {
328
+ if (hasActiveItems) {
329
+ removeItems(event, activeIndices);
330
+ } else if (cursorAtInputStart()) {
331
+ setHighlightedIndex(selectedItems.length - 1);
332
+ }
333
+ },
334
+ Delete: (event) => {
335
+ if (hasActiveItems) {
336
+ removeItems(event, activeIndices);
337
+ }
338
+ },
339
+ Enter: (event) => {
340
+ event.preventDefault();
341
+ if (hasActiveItems) {
342
+ removeItems(event, activeIndices);
343
+ } else {
344
+ handleAddItems(event, value);
345
+ }
346
+ }
347
+ };
348
+ const handleCtrlModifierKeyDown = (event) => {
349
+ var _a;
350
+ const win = ownerWindow(event.target);
351
+ const supportClipboard = (_a = win.navigator) == null ? void 0 : _a.clipboard;
352
+ switch (event.key.toUpperCase()) {
353
+ case "A":
354
+ setHighlightedIndex(void 0);
355
+ setActiveIndices(
356
+ Array.from({ length: selectedItems.length }, (_, index) => index)
357
+ );
358
+ break;
359
+ case "C":
360
+ const textToCopy = activeIndices.length > 0 ? activeIndices.map((index) => String(selectedItems[index])).concat(value != null ? String(value).trim() : "").filter(Boolean).join(primaryDelimiter) : highlightedIndex !== void 0 ? String(selectedItems[highlightedIndex] + ",") : "";
361
+ copy(textToCopy).then((result) => {
362
+ preventBlurOnCopy.current = !supportClipboard;
363
+ return result;
364
+ }).catch((error) => {
365
+ console.error(error);
366
+ });
367
+ break;
368
+ case "V":
369
+ break;
370
+ case "ARROWLEFT":
371
+ pillGroupKeyDownHandlers.ArrowLeft(event);
372
+ break;
373
+ case "ARROWRIGHT":
374
+ pillGroupKeyDownHandlers.ArrowRight(event);
375
+ break;
376
+ case "BACKSPACE":
377
+ if (cursorAtInputStart()) {
378
+ handleRemoveItem(event, selectedItems.length - 1);
379
+ }
380
+ break;
381
+ case "CONTROL":
382
+ case "META":
383
+ break;
384
+ default:
385
+ setActiveIndices([]);
386
+ }
387
+ };
388
+ const handleCommonKeyDown = (event) => {
389
+ const eventKey = event.key.toUpperCase();
390
+ if (eventKey === "ESCAPE") {
391
+ event.preventDefault();
392
+ resetInput();
393
+ } else if (eventKey === "TAB" && !disableAddOnBlur) {
394
+ handleAddItems(event, value);
395
+ }
396
+ };
397
+ const handleKeyDown = (event) => {
398
+ onKeyDown == null ? void 0 : onKeyDown(event);
399
+ if (event.defaultPrevented) {
400
+ return;
401
+ }
402
+ if (isCtrlModifier(event)) {
403
+ handleCtrlModifierKeyDown(event);
404
+ } else {
405
+ let handler;
406
+ if (highlightedIndex == null) {
407
+ handler = inputKeyDownHandlers[event.key];
408
+ setActiveIndices([]);
409
+ } else {
410
+ handler = pillGroupKeyDownHandlers[event.key];
411
+ }
412
+ if (handler != null) {
413
+ handler(event);
414
+ } else {
415
+ handleCommonKeyDown(event);
416
+ }
417
+ }
418
+ };
419
+ const state = {
420
+ value,
421
+ selectedItems,
422
+ activeIndices,
423
+ highlightedIndex,
424
+ expanded
425
+ };
426
+ const eventHandlers = {
427
+ onBlur: expanded ? handleBlur : onBlur,
428
+ onClick: handleClick,
429
+ onInputChange: handleInputChange,
430
+ onInputFocus: handleInputFocus,
431
+ onInputBlur: handleInputBlur,
432
+ onKeyDown: handleKeyDown,
433
+ onRemoveItem: handleRemoveItem,
434
+ onClear: handleClear
435
+ };
436
+ return {
437
+ state,
438
+ firstHiddenIndex,
439
+ refs: {
440
+ textAreaRef: useForkRef(textAreaRef, inputRef),
441
+ pillsRef,
442
+ clearButtonRef,
443
+ expandButtonRef,
444
+ statusAdornmentRef,
445
+ containerRef: useForkRef(containerRef, containerObserverRef)
446
+ },
447
+ helpers: {
448
+ setValue,
449
+ setSelectedItems,
450
+ setHighlightedIndex,
451
+ updateExpanded
452
+ },
453
+ inputProps: {
454
+ id,
455
+ disabled,
456
+ validationStatus: validationStatus != null ? validationStatus : validationStatusProp,
457
+ readOnly: readOnly != null ? readOnly : readOnlyProp,
458
+ necessity,
459
+ focused,
460
+ "aria-labelledby": ariaLabelledBy,
461
+ "aria-label": ariaLabel,
462
+ "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : ariaDescribedByProp,
463
+ ...state,
464
+ ...restProps,
465
+ ...disabled ? {} : eventHandlers
466
+ }
467
+ };
468
+ }
469
+
470
+ export { useTokenizedInputNext };
471
+ //# sourceMappingURL=useTokenizedInputNext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTokenizedInputNext.js","sources":["../src/tokenized-input-next/useTokenizedInputNext.tsx"],"sourcesContent":["import {\n ownerWindow,\n useControlled,\n useDensity,\n useForkRef,\n useFormFieldProps,\n useId,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport copy from \"clipboard-copy\";\nimport {\n ChangeEvent,\n FocusEvent,\n InputHTMLAttributes,\n KeyboardEvent,\n KeyboardEventHandler,\n Ref,\n SetStateAction,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n MutableRefObject,\n} from \"react\";\nimport { escapeRegExp } from \"../utils\";\nimport { TokenizedInputNextProps } from \"./TokenizedInputNext\";\nimport { getPadding, useWidth } from \"./internal/useWidth\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\n\nexport interface TokenizedInputNextState<Item> {\n activeIndices: number[];\n expanded: boolean | undefined;\n highlightedIndex: number | undefined;\n selectedItems: Item[];\n value: string | undefined;\n}\n\nexport interface TokenizedInputNextHelpers<Item> {\n setHighlightedIndex: (value?: number) => void;\n setValue: (value: string) => void;\n setSelectedItems: (selectedItems: Item[]) => void;\n updateExpanded: (event: SyntheticEvent, expanded: boolean) => void;\n}\n\nexport interface TokenizedInputNextRefs {\n textAreaRef: Ref<HTMLTextAreaElement>;\n pillsRef: MutableRefObject<Record<number, number | undefined>>;\n clearButtonRef: (newNode: HTMLButtonElement) => void;\n expandButtonRef: Ref<HTMLButtonElement>;\n statusAdornmentRef: Ref<SVGSVGElement>;\n containerRef: Ref<HTMLDivElement>;\n}\n\nconst getCursorPosition = (\n inputRef: MutableRefObject<HTMLTextAreaElement | null>\n) => {\n if (inputRef.current) {\n const { selectionStart, selectionEnd } = inputRef.current;\n\n // if there is no selection range\n if (selectionStart != null && selectionStart === selectionEnd) {\n return selectionStart;\n }\n }\n\n return -1;\n};\n\nconst isCtrlModifier = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n return (\n event.ctrlKey ||\n event.metaKey ||\n [\"CONTROL\", \"META\"].indexOf(event.key.toUpperCase()) !== -1\n );\n};\n\nfunction isValidItem<Item>(data: unknown): data is Item {\n return (\n (typeof data === \"string\" && Boolean(data.length)) ||\n (typeof data !== \"string\" && data != null)\n );\n}\n\ninterface useTokenizedInputNextResult<Item> {\n /**\n * The tokenized input state\n */\n state: TokenizedInputNextState<Item>;\n /**\n * First hidden element when collapsed\n */\n firstHiddenIndex: number | null;\n /**\n * Utility functions for modifying tokenized input state\n */\n helpers: TokenizedInputNextHelpers<Item>;\n /**\n * Refs for tokenized input items.\n */\n refs: TokenizedInputNextRefs;\n /**\n * Properties applied to a basic tokenized input component\n */\n inputProps: Omit<TokenizedInputNextProps<Item>, \"helpers\" | \"onChange\">;\n}\n\nexport function useTokenizedInputNext<Item>(\n props: TokenizedInputNextProps<Item>\n): useTokenizedInputNextResult<Item> {\n const {\n disabled: formFieldDisabled,\n readOnly,\n necessity,\n validationStatus,\n a11yProps: {\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n } = {},\n } = useFormFieldProps();\n\n const {\n delimiters = [\",\"],\n defaultSelected = [],\n disabled = formFieldDisabled,\n readOnly: readOnlyProp,\n validationStatus: validationStatusProp,\n disableAddOnBlur,\n onBlur,\n onClick,\n onExpand,\n onCollapse,\n onKeyDown,\n onInputChange,\n onInputFocus,\n onInputBlur,\n onClear,\n onChange,\n id: idProp,\n value: valueProp,\n expanded: expandedProp,\n selectedItems: selectedItemsProp,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedByProp,\n expandButtonRef: expandButtonRefProp,\n ...restProps\n } = props;\n\n const density = useDensity();\n const id = useId(idProp);\n\n const [focused, setFocused] = useState(false);\n const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n const [activeIndices, setActiveIndices] = useState<number[]>([]);\n const [highlightedIndex, setHighlightedIndex] = useState<number | undefined>(\n undefined\n );\n\n const [expandButtonHookRef, expandButtonWidth] = useWidth(density);\n const [clearButtonRef, clearButtonWidth] = useWidth(density);\n const [statusAdornmentRef, statusAdornmentWidth] = useWidth(density);\n const [inputRef, inputWidth] = useWidth(density);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const pillsRef = useRef<Record<number, number | undefined>>({});\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const preventBlurOnCopy = useRef(false);\n const expandButtonRef = useForkRef(expandButtonHookRef, expandButtonRefProp);\n\n const hasActiveItems = Boolean(activeIndices.length);\n const primaryDelimiter = delimiters[0];\n const delimiterRegex = useMemo(\n () => new RegExp(delimiters.map(escapeRegExp).join(\"|\"), \"gi\"),\n [delimiters]\n );\n\n const [value, setValue, isInputControlled] = useControlled<\n string | undefined\n >({\n controlled: valueProp,\n default: \"\",\n name: \"TokenizedInputNext\",\n state: \"value\",\n });\n\n const [selectedItems = [], setSelectedItems, isSelectionControlled] =\n useControlled<Item[] | undefined>({\n controlled: selectedItemsProp,\n default: defaultSelected,\n name: \"TokenizedInputNext\",\n state: \"selectedItems\",\n });\n\n const [expanded, setExpanded, isExpandedControlled] = useControlled<boolean>({\n controlled: expandedProp,\n default: false,\n name: \"TokenizedInputNext\",\n state: \"expanded\",\n });\n\n const widthOffset =\n inputWidth +\n statusAdornmentWidth +\n (expanded ? clearButtonWidth : expandButtonWidth);\n\n const containerObserverRef = useResizeObserver<HTMLDivElement>(\n useCallback(\n ([{ contentRect }]) => {\n const padding = getPadding(containerRef.current);\n setPillGroupWidth(contentRect.width - padding - widthOffset);\n },\n [widthOffset]\n )\n );\n\n useIsomorphicLayoutEffect(\n () => () => {\n // When density changes, set hidden index to null so that pills are in their\n // readonly state before they are measured.\n setFirstHiddenIndex(null);\n },\n [density]\n );\n\n // useIsomorphicLayoutEffect because of potential layout change\n // We want to do that before paint to avoid layout jumps\n useIsomorphicLayoutEffect(\n () => {\n if (expanded) {\n setFirstHiddenIndex(null);\n } else if (pillGroupWidth != null) {\n setFirstHiddenIndex(\n calcFirstHiddenIndex({\n containerWidth: pillGroupWidth,\n pillWidths: Object.values(pillsRef.current).filter(\n Boolean\n ) as number[],\n })\n );\n }\n },\n // Additional dependency on selectedItems is for the controlled version\n [expanded, pillGroupWidth, selectedItems]\n );\n\n const focusInput = useCallback(() => {\n if (textAreaRef.current) {\n textAreaRef.current.focus();\n }\n }, []);\n\n const updateInputValue = (newValue: string | undefined) => {\n if (!isInputControlled) {\n setValue(newValue);\n }\n };\n\n const updateSelectedItems = useCallback(\n (event: SyntheticEvent, action: SetStateAction<Item[] | undefined>) => {\n if (!isSelectionControlled) {\n setSelectedItems((prevSelectedItems?: Item[]) => {\n const newItems =\n typeof action === \"function\" ? action(prevSelectedItems) : action;\n\n if (newItems !== prevSelectedItems) {\n onChange?.(event, newItems);\n }\n return newItems;\n });\n } else {\n onChange?.(\n event,\n typeof action === \"function\" ? action(selectedItems) : action\n );\n }\n },\n [isSelectionControlled, setSelectedItems, onChange, selectedItems]\n );\n\n const updateExpanded = (event: SyntheticEvent, newExpanded: boolean) => {\n if (!isExpandedControlled) {\n setExpanded(newExpanded);\n }\n\n if (newExpanded) {\n focusInput();\n onExpand?.(event);\n } else {\n onCollapse?.(event);\n }\n };\n\n const resetInput = () => {\n updateInputValue(\"\");\n setHighlightedIndex(undefined);\n setActiveIndices([]);\n };\n\n const removeItems = useCallback(\n (event: SyntheticEvent, itemIndices: number[]) => {\n updateSelectedItems(\n event,\n (prevSelectedItems) =>\n prevSelectedItems &&\n (prevSelectedItems.length === 0\n ? prevSelectedItems\n : prevSelectedItems.filter(\n (_, index) => itemIndices.indexOf(index) === -1\n ))\n );\n },\n [updateSelectedItems]\n );\n\n const handleInputFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n event.stopPropagation();\n\n // The input will lose focus when building the text to copy in a temporary\n // DOM node. This is particularly visible in a slower browser, i.e. IE 11.\n // This is to prevent a blur in that scenario.\n if (preventBlurOnCopy.current) {\n preventBlurOnCopy.current = false;\n setActiveIndices(\n Array.from(\n { length: selectedItems ? selectedItems.length : 0 },\n (_, index) => index\n )\n );\n return;\n }\n\n onInputFocus?.(event);\n updateExpanded(event, true);\n setFocused(true);\n };\n\n const handleBlur = (\n event: FocusEvent<HTMLTextAreaElement | HTMLButtonElement>\n ) => {\n onBlur?.(event);\n setFocused(false);\n updateExpanded(event, false);\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n // Check if the related target inside TokenizedInput\n const container = containerRef?.current;\n const eventTarget = event.relatedTarget;\n event.preventDefault();\n event.stopPropagation();\n setHighlightedIndex(undefined);\n setActiveIndices([]);\n if (!disableAddOnBlur) {\n handleAddItems(event, value);\n }\n onInputBlur?.(event);\n if (\n eventTarget !== container &&\n !container?.contains(eventTarget as Node)\n ) {\n handleBlur(event);\n }\n };\n\n const handleClick = (event: SyntheticEvent<HTMLElement>) => {\n updateExpanded(event, true);\n setActiveIndices([]);\n onClick?.(event);\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n setHighlightedIndex(undefined);\n\n onInputChange?.(event);\n\n const newValue = event.target.value;\n\n if (delimiterRegex.test(newValue)) {\n // Process value with delimiters\n handleAddItems(event, newValue);\n } else {\n // Just update input value if there is no delimiter\n updateInputValue(newValue);\n }\n };\n\n const handleAddItems = (\n event: SyntheticEvent,\n newValue: string | undefined,\n appendOnly?: boolean\n ) => {\n if (!newValue || newValue.length === 0) {\n return;\n }\n\n resetInput();\n\n const newItems = newValue\n .split(delimiterRegex)\n .reduce<Item[]>((values, item) => {\n const newItem = item.trim();\n return isValidItem<Item>(newItem) ? values.concat(newItem) : values;\n }, []);\n\n if (newItems.length) {\n updateSelectedItems(event, (prevSelectedItems = []) =>\n hasActiveItems && !appendOnly\n ? newItems\n : prevSelectedItems.concat(newItems)\n );\n }\n };\n\n const handleRemoveItem = useCallback(\n (event: SyntheticEvent, itemIndex?: number) => {\n focusInput();\n if (itemIndex != undefined && !readOnly && !readOnlyProp) {\n removeItems(event, [itemIndex]);\n }\n },\n [focusInput, removeItems]\n );\n\n const handleClear = (event: ChangeEvent<HTMLTextAreaElement>) => {\n updateSelectedItems(event, []);\n resetInput();\n focusInput();\n onClear?.(event);\n };\n\n const cursorAtInputStart = () =>\n getCursorPosition(textAreaRef) === 0 && Boolean(selectedItems.length);\n\n const highlightAtPillGroupEnd = () =>\n highlightedIndex === selectedItems.length - 1;\n\n const pillGroupKeyDownHandlers: Record<\n string,\n KeyboardEventHandler<HTMLTextAreaElement>\n > = {\n ArrowLeft: (event) => {\n event.preventDefault();\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? selectedItems.length - 1\n : Math.max(0, prevHighlightedIndex - 1)\n );\n },\n ArrowRight: (event) => {\n if (highlightAtPillGroupEnd()) {\n return setHighlightedIndex(undefined);\n }\n\n event.preventDefault();\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? prevHighlightedIndex\n : Math.min(selectedItems.length - 1, prevHighlightedIndex + 1)\n );\n },\n Backspace: (event) => {\n event.preventDefault();\n handleRemoveItem(event, highlightedIndex);\n setHighlightedIndex((prevHighlightedIndex) =>\n prevHighlightedIndex == null\n ? prevHighlightedIndex\n : Math.max(0, prevHighlightedIndex - 1)\n );\n },\n Home: (event) => {\n event.preventDefault();\n setHighlightedIndex(0);\n },\n End: (event) => {\n event.preventDefault();\n setHighlightedIndex(selectedItems.length - 1);\n },\n Enter: (event) => {\n event.preventDefault();\n handleRemoveItem(event, highlightedIndex);\n },\n Delete: (event) => {\n event.preventDefault();\n handleRemoveItem(event, highlightedIndex);\n },\n \" \": (event) => {\n event.preventDefault();\n handleRemoveItem(event, highlightedIndex);\n },\n };\n\n const inputKeyDownHandlers: Record<\n string,\n KeyboardEventHandler<HTMLTextAreaElement>\n > = {\n ArrowLeft: (event) => {\n if (cursorAtInputStart()) {\n event.preventDefault();\n setHighlightedIndex(selectedItems.length - 1);\n }\n },\n Backspace: (event) => {\n if (hasActiveItems) {\n removeItems(event, activeIndices);\n } else if (cursorAtInputStart()) {\n setHighlightedIndex(selectedItems.length - 1);\n }\n },\n Delete: (event) => {\n if (hasActiveItems) {\n removeItems(event, activeIndices);\n }\n },\n Enter: (event) => {\n event.preventDefault();\n\n if (hasActiveItems) {\n removeItems(event, activeIndices);\n } else {\n handleAddItems(event, value);\n }\n },\n };\n\n const handleCtrlModifierKeyDown: InputHTMLAttributes<HTMLTextAreaElement>[\"onKeyDown\"] =\n (event) => {\n const win = ownerWindow(event.target as HTMLElement);\n const supportClipboard = win.navigator?.clipboard;\n\n switch (event.key.toUpperCase()) {\n case \"A\":\n // Select all\n setHighlightedIndex(undefined);\n setActiveIndices(\n Array.from({ length: selectedItems.length }, (_, index) => index)\n );\n break;\n case \"C\":\n // Copy\n const textToCopy =\n activeIndices.length > 0\n ? activeIndices\n .map((index) => String(selectedItems[index]))\n .concat(value != null ? String(value).trim() : \"\")\n .filter(Boolean)\n .join(primaryDelimiter)\n : highlightedIndex !== undefined\n ? String(selectedItems[highlightedIndex] + \",\")\n : \"\";\n copy(textToCopy)\n .then((result) => {\n preventBlurOnCopy.current = !supportClipboard;\n return result;\n })\n .catch((error) => {\n console.error(error);\n });\n break;\n case \"V\":\n // Paste - do nothing and let handleChange deal with it\n break;\n case \"ARROWLEFT\":\n pillGroupKeyDownHandlers.ArrowLeft(event);\n break;\n case \"ARROWRIGHT\":\n pillGroupKeyDownHandlers.ArrowRight(event);\n break;\n case \"BACKSPACE\":\n if (cursorAtInputStart()) {\n handleRemoveItem(event, selectedItems.length - 1);\n }\n break;\n case \"CONTROL\":\n case \"META\":\n // Do nothing\n break;\n default:\n // Otherwise, reset active items\n setActiveIndices([]);\n }\n };\n\n const handleCommonKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n const eventKey = event.key.toUpperCase();\n if (eventKey === \"ESCAPE\") {\n event.preventDefault();\n resetInput();\n } else if (eventKey === \"TAB\" && !disableAddOnBlur) {\n // Pressing Tab adds a new value\n handleAddItems(event, value);\n }\n };\n\n const handleKeyDown: InputHTMLAttributes<HTMLTextAreaElement>[\"onKeyDown\"] = (\n event\n ) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) {\n return;\n }\n if (isCtrlModifier(event)) {\n handleCtrlModifierKeyDown(event);\n } else {\n let handler;\n if (highlightedIndex == null) {\n handler = inputKeyDownHandlers[event.key];\n setActiveIndices([]);\n } else {\n handler = pillGroupKeyDownHandlers[event.key];\n }\n\n if (handler != null) {\n handler(event);\n } else {\n handleCommonKeyDown(event);\n }\n }\n };\n\n const state: TokenizedInputNextState<Item> = {\n value,\n selectedItems,\n activeIndices,\n highlightedIndex,\n expanded,\n };\n\n const eventHandlers = {\n // onFocus is a focus on the expand button\n // It can also be triggered by a focus on the input\n // onBlur is a blur from the expand button when it's collapsed\n // It can also be triggered by the clear button\n onBlur: expanded ? handleBlur : onBlur,\n onClick: handleClick,\n onInputChange: handleInputChange,\n onInputFocus: handleInputFocus,\n onInputBlur: handleInputBlur,\n onKeyDown: handleKeyDown,\n onRemoveItem: handleRemoveItem,\n onClear: handleClear,\n };\n\n return {\n state,\n firstHiddenIndex,\n refs: {\n textAreaRef: useForkRef(textAreaRef, inputRef),\n pillsRef,\n clearButtonRef,\n expandButtonRef,\n statusAdornmentRef,\n containerRef: useForkRef(containerRef, containerObserverRef),\n },\n helpers: {\n setValue,\n setSelectedItems,\n setHighlightedIndex,\n updateExpanded,\n },\n inputProps: {\n id,\n disabled,\n validationStatus: validationStatus ?? validationStatusProp,\n readOnly: readOnly ?? readOnlyProp,\n necessity: necessity,\n focused,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy ?? ariaDescribedByProp,\n ...state,\n ...restProps,\n ...(disabled ? {} : eventHandlers),\n },\n };\n}\n"],"names":[],"mappings":";;;;;;;;AAuDA,MAAM,iBAAA,GAAoB,CACxB,QACG,KAAA;AACH,EAAA,IAAI,SAAS,OAAS,EAAA;AACpB,IAAA,MAAM,EAAE,cAAA,EAAgB,YAAa,EAAA,GAAI,QAAS,CAAA,OAAA,CAAA;AAGlD,IAAI,IAAA,cAAA,IAAkB,IAAQ,IAAA,cAAA,KAAmB,YAAc,EAAA;AAC7D,MAAO,OAAA,cAAA,CAAA;AAAA,KACT;AAAA,GACF;AAEA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,CAAA,CAAA;AAEA,MAAM,cAAA,GAAiB,CAAC,KAA8C,KAAA;AACpE,EAAA,OACE,KAAM,CAAA,OAAA,IACN,KAAM,CAAA,OAAA,IACN,CAAC,SAAA,EAAW,MAAM,CAAA,CAAE,OAAQ,CAAA,KAAA,CAAM,GAAI,CAAA,WAAA,EAAa,CAAM,KAAA,CAAA,CAAA,CAAA;AAE7D,CAAA,CAAA;AAEA,SAAS,YAAkB,IAA6B,EAAA;AACtD,EACG,OAAA,OAAO,IAAS,KAAA,QAAA,IAAY,OAAQ,CAAA,IAAA,CAAK,MAAM,CAC/C,IAAA,OAAO,IAAS,KAAA,QAAA,IAAY,IAAQ,IAAA,IAAA,CAAA;AAEzC,CAAA;AAyBO,SAAS,sBACd,KACmC,EAAA;AACnC,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,iBAAA;AAAA,IACV,QAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAW,EAAA;AAAA,MACT,kBAAoB,EAAA,eAAA;AAAA,MACpB,iBAAmB,EAAA,cAAA;AAAA,QACjB,EAAC;AAAA,MACH,iBAAkB,EAAA,CAAA;AAEtB,EAAM,MAAA;AAAA,IACJ,UAAA,GAAa,CAAC,GAAG,CAAA;AAAA,IACjB,kBAAkB,EAAC;AAAA,IACnB,QAAW,GAAA,iBAAA;AAAA,IACX,QAAU,EAAA,YAAA;AAAA,IACV,gBAAkB,EAAA,oBAAA;AAAA,IAClB,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAO,EAAA,SAAA;AAAA,IACP,QAAU,EAAA,YAAA;AAAA,IACV,aAAe,EAAA,iBAAA;AAAA,IACf,YAAc,EAAA,SAAA;AAAA,IACd,kBAAoB,EAAA,mBAAA;AAAA,IACpB,eAAiB,EAAA,mBAAA;AAAA,IACd,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAwB,IAAI,CAAA,CAAA;AACxE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAwB,IAAI,CAAA,CAAA;AAC5E,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA,CAAA;AAC/D,EAAM,MAAA,CAAC,gBAAkB,EAAA,mBAAmB,CAAI,GAAA,QAAA;AAAA,IAC9C,KAAA,CAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,CAAC,mBAAA,EAAqB,iBAAiB,CAAA,GAAI,SAAS,OAAO,CAAA,CAAA;AACjE,EAAA,MAAM,CAAC,cAAA,EAAgB,gBAAgB,CAAA,GAAI,SAAS,OAAO,CAAA,CAAA;AAC3D,EAAA,MAAM,CAAC,kBAAA,EAAoB,oBAAoB,CAAA,GAAI,SAAS,OAAO,CAAA,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,UAAU,CAAA,GAAI,SAAS,OAAO,CAAA,CAAA;AAE/C,EAAM,MAAA,YAAA,GAAe,OAAuB,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,QAAA,GAAW,MAA2C,CAAA,EAAE,CAAA,CAAA;AAC9D,EAAM,MAAA,WAAA,GAAc,OAA4B,IAAI,CAAA,CAAA;AACpD,EAAM,MAAA,iBAAA,GAAoB,OAAO,KAAK,CAAA,CAAA;AACtC,EAAM,MAAA,eAAA,GAAkB,UAAW,CAAA,mBAAA,EAAqB,mBAAmB,CAAA,CAAA;AAE3E,EAAM,MAAA,cAAA,GAAiB,OAAQ,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AACnD,EAAA,MAAM,mBAAmB,UAAW,CAAA,CAAA,CAAA,CAAA;AACpC,EAAA,MAAM,cAAiB,GAAA,OAAA;AAAA,IACrB,MAAM,IAAI,MAAA,CAAO,UAAW,CAAA,GAAA,CAAI,YAAY,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,EAAG,IAAI,CAAA;AAAA,IAC7D,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,MAAM,CAAC,KAAA,EAAO,QAAU,EAAA,iBAAiB,IAAI,aAE3C,CAAA;AAAA,IACA,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,EAAA;AAAA,IACT,IAAM,EAAA,oBAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAgB,GAAA,IAAI,gBAAkB,EAAA,qBAAqB,IAChE,aAAkC,CAAA;AAAA,IAChC,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,eAAA;AAAA,IACT,IAAM,EAAA,oBAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAEH,EAAA,MAAM,CAAC,QAAA,EAAU,WAAa,EAAA,oBAAoB,IAAI,aAAuB,CAAA;AAAA,IAC3E,UAAY,EAAA,YAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,oBAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,WACJ,GAAA,UAAA,GACA,oBACC,IAAA,QAAA,GAAW,gBAAmB,GAAA,iBAAA,CAAA,CAAA;AAEjC,EAAA,MAAM,oBAAuB,GAAA,iBAAA;AAAA,IAC3B,WAAA;AAAA,MACE,CAAC,CAAC,EAAE,WAAA,EAAa,CAAM,KAAA;AACrB,QAAM,MAAA,OAAA,GAAU,UAAW,CAAA,YAAA,CAAa,OAAO,CAAA,CAAA;AAC/C,QAAkB,iBAAA,CAAA,WAAA,CAAY,KAAQ,GAAA,OAAA,GAAU,WAAW,CAAA,CAAA;AAAA,OAC7D;AAAA,MACA,CAAC,WAAW,CAAA;AAAA,KACd;AAAA,GACF,CAAA;AAEA,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AAGV,MAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAIA,EAAA,yBAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AAAA,OAC1B,MAAA,IAAW,kBAAkB,IAAM,EAAA;AACjC,QAAA,mBAAA;AAAA,UACE,oBAAqB,CAAA;AAAA,YACnB,cAAgB,EAAA,cAAA;AAAA,YAChB,UAAY,EAAA,MAAA,CAAO,MAAO,CAAA,QAAA,CAAS,OAAO,CAAE,CAAA,MAAA;AAAA,cAC1C,OAAA;AAAA,aACF;AAAA,WACD,CAAA;AAAA,SACH,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IAEA,CAAC,QAAU,EAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,WAAA,CAAY,QAAQ,KAAM,EAAA,CAAA;AAAA,KAC5B;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,gBAAA,GAAmB,CAAC,QAAiC,KAAA;AACzD,IAAA,IAAI,CAAC,iBAAmB,EAAA;AACtB,MAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,KACnB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,OAAuB,MAA+C,KAAA;AACrE,MAAA,IAAI,CAAC,qBAAuB,EAAA;AAC1B,QAAA,gBAAA,CAAiB,CAAC,iBAA+B,KAAA;AAC/C,UAAA,MAAM,WACJ,OAAO,MAAA,KAAW,UAAa,GAAA,MAAA,CAAO,iBAAiB,CAAI,GAAA,MAAA,CAAA;AAE7D,UAAA,IAAI,aAAa,iBAAmB,EAAA;AAClC,YAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,QAAA,CAAA,CAAA;AAAA,WACpB;AACA,UAAO,OAAA,QAAA,CAAA;AAAA,SACR,CAAA,CAAA;AAAA,OACI,MAAA;AACL,QAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA;AAAA,UACE,KAAA;AAAA,UACA,OAAO,MAAA,KAAW,UAAa,GAAA,MAAA,CAAO,aAAa,CAAI,GAAA,MAAA;AAAA,SAAA,CAAA;AAAA,OAE3D;AAAA,KACF;AAAA,IACA,CAAC,qBAAA,EAAuB,gBAAkB,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA,GACnE,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,KAAA,EAAuB,WAAyB,KAAA;AACtE,IAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,MAAA,WAAA,CAAY,WAAW,CAAA,CAAA;AAAA,KACzB;AAEA,IAAA,IAAI,WAAa,EAAA;AACf,MAAW,UAAA,EAAA,CAAA;AACX,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACN,MAAA;AACL,MAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACf;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AACnB,IAAA,mBAAA,CAAoB,KAAS,CAAA,CAAA,CAAA;AAC7B,IAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,OAAuB,WAA0B,KAAA;AAChD,MAAA,mBAAA;AAAA,QACE,KAAA;AAAA,QACA,CAAC,iBACC,KAAA,iBAAA,KACC,kBAAkB,MAAW,KAAA,CAAA,GAC1B,oBACA,iBAAkB,CAAA,MAAA;AAAA,UAChB,CAAC,CAAG,EAAA,KAAA,KAAU,WAAY,CAAA,OAAA,CAAQ,KAAK,CAAM,KAAA,CAAA,CAAA;AAAA,SAC/C,CAAA;AAAA,OACR,CAAA;AAAA,KACF;AAAA,IACA,CAAC,mBAAmB,CAAA;AAAA,GACtB,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAA2C,KAAA;AACnE,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAKtB,IAAA,IAAI,kBAAkB,OAAS,EAAA;AAC7B,MAAA,iBAAA,CAAkB,OAAU,GAAA,KAAA,CAAA;AAC5B,MAAA,gBAAA;AAAA,QACE,KAAM,CAAA,IAAA;AAAA,UACJ,EAAE,MAAA,EAAQ,aAAgB,GAAA,aAAA,CAAc,SAAS,CAAE,EAAA;AAAA,UACnD,CAAC,GAAG,KAAU,KAAA,KAAA;AAAA,SAChB;AAAA,OACF,CAAA;AACA,MAAA,OAAA;AAAA,KACF;AAEA,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AACf,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CACjB,KACG,KAAA;AACH,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AACT,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,IAAA,cAAA,CAAe,OAAO,KAAK,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAA2C,KAAA;AAElE,IAAA,MAAM,YAAY,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,OAAA,CAAA;AAChC,IAAA,MAAM,cAAc,KAAM,CAAA,aAAA,CAAA;AAC1B,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,mBAAA,CAAoB,KAAS,CAAA,CAAA,CAAA;AAC7B,IAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AACnB,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA,cAAA,CAAe,OAAO,KAAK,CAAA,CAAA;AAAA,KAC7B;AACA,IAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,KAAA,CAAA,CAAA;AACd,IAAA,IACE,WAAgB,KAAA,SAAA,IAChB,EAAC,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAW,SAAS,WACrB,CAAA,CAAA,EAAA;AACA,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAuC,KAAA;AAC1D,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,IAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AACnB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,KAA4C,KAAA;AACrE,IAAA,mBAAA,CAAoB,KAAS,CAAA,CAAA,CAAA;AAE7B,IAAgB,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,KAAA,CAAA,CAAA;AAEhB,IAAM,MAAA,QAAA,GAAW,MAAM,MAAO,CAAA,KAAA,CAAA;AAE9B,IAAI,IAAA,cAAA,CAAe,IAAK,CAAA,QAAQ,CAAG,EAAA;AAEjC,MAAA,cAAA,CAAe,OAAO,QAAQ,CAAA,CAAA;AAAA,KACzB,MAAA;AAEL,MAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAAA,KAC3B;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAA,CACrB,KACA,EAAA,QAAA,EACA,UACG,KAAA;AACH,IAAA,IAAI,CAAC,QAAA,IAAY,QAAS,CAAA,MAAA,KAAW,CAAG,EAAA;AACtC,MAAA,OAAA;AAAA,KACF;AAEA,IAAW,UAAA,EAAA,CAAA;AAEX,IAAM,MAAA,QAAA,GAAW,SACd,KAAM,CAAA,cAAc,EACpB,MAAe,CAAA,CAAC,QAAQ,IAAS,KAAA;AAChC,MAAM,MAAA,OAAA,GAAU,KAAK,IAAK,EAAA,CAAA;AAC1B,MAAA,OAAO,YAAkB,OAAO,CAAA,GAAI,MAAO,CAAA,MAAA,CAAO,OAAO,CAAI,GAAA,MAAA,CAAA;AAAA,KAC/D,EAAG,EAAE,CAAA,CAAA;AAEP,IAAA,IAAI,SAAS,MAAQ,EAAA;AACnB,MAAA,mBAAA;AAAA,QAAoB,KAAA;AAAA,QAAO,CAAC,iBAAoB,GAAA,EAC9C,KAAA,cAAA,IAAkB,CAAC,UACf,GAAA,QAAA,GACA,iBAAkB,CAAA,MAAA,CAAO,QAAQ,CAAA;AAAA,OACvC,CAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,OAAuB,SAAuB,KAAA;AAC7C,MAAW,UAAA,EAAA,CAAA;AACX,MAAA,IAAI,SAAa,IAAA,KAAA,CAAA,IAAa,CAAC,QAAA,IAAY,CAAC,YAAc,EAAA;AACxD,QAAY,WAAA,CAAA,KAAA,EAAO,CAAC,SAAS,CAAC,CAAA,CAAA;AAAA,OAChC;AAAA,KACF;AAAA,IACA,CAAC,YAAY,WAAW,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4C,KAAA;AAC/D,IAAoB,mBAAA,CAAA,KAAA,EAAO,EAAE,CAAA,CAAA;AAC7B,IAAW,UAAA,EAAA,CAAA;AACX,IAAW,UAAA,EAAA,CAAA;AACX,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,MACzB,iBAAkB,CAAA,WAAW,MAAM,CAAK,IAAA,OAAA,CAAQ,cAAc,MAAM,CAAA,CAAA;AAEtE,EAAA,MAAM,uBAA0B,GAAA,MAC9B,gBAAqB,KAAA,aAAA,CAAc,MAAS,GAAA,CAAA,CAAA;AAE9C,EAAA,MAAM,wBAGF,GAAA;AAAA,IACF,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,mBAAA;AAAA,QAAoB,CAAC,oBACnB,KAAA,oBAAA,IAAwB,IACpB,GAAA,aAAA,CAAc,MAAS,GAAA,CAAA,GACvB,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,oBAAA,GAAuB,CAAC,CAAA;AAAA,OAC1C,CAAA;AAAA,KACF;AAAA,IACA,UAAA,EAAY,CAAC,KAAU,KAAA;AACrB,MAAA,IAAI,yBAA2B,EAAA;AAC7B,QAAA,OAAO,oBAAoB,KAAS,CAAA,CAAA,CAAA;AAAA,OACtC;AAEA,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,mBAAA;AAAA,QAAoB,CAAC,oBACnB,KAAA,oBAAA,IAAwB,IACpB,GAAA,oBAAA,GACA,IAAK,CAAA,GAAA,CAAI,aAAc,CAAA,MAAA,GAAS,CAAG,EAAA,oBAAA,GAAuB,CAAC,CAAA;AAAA,OACjE,CAAA;AAAA,KACF;AAAA,IACA,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,gBAAA,CAAiB,OAAO,gBAAgB,CAAA,CAAA;AACxC,MAAA,mBAAA;AAAA,QAAoB,CAAC,yBACnB,oBAAwB,IAAA,IAAA,GACpB,uBACA,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,oBAAA,GAAuB,CAAC,CAAA;AAAA,OAC1C,CAAA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,CAAC,KAAU,KAAA;AACf,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,mBAAA,CAAoB,CAAC,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,GAAA,EAAK,CAAC,KAAU,KAAA;AACd,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAoB,mBAAA,CAAA,aAAA,CAAc,SAAS,CAAC,CAAA,CAAA;AAAA,KAC9C;AAAA,IACA,KAAA,EAAO,CAAC,KAAU,KAAA;AAChB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,gBAAA,CAAiB,OAAO,gBAAgB,CAAA,CAAA;AAAA,KAC1C;AAAA,IACA,MAAA,EAAQ,CAAC,KAAU,KAAA;AACjB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,gBAAA,CAAiB,OAAO,gBAAgB,CAAA,CAAA;AAAA,KAC1C;AAAA,IACA,GAAA,EAAK,CAAC,KAAU,KAAA;AACd,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,gBAAA,CAAiB,OAAO,gBAAgB,CAAA,CAAA;AAAA,KAC1C;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,oBAGF,GAAA;AAAA,IACF,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,MAAA,IAAI,oBAAsB,EAAA;AACxB,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAoB,mBAAA,CAAA,aAAA,CAAc,SAAS,CAAC,CAAA,CAAA;AAAA,OAC9C;AAAA,KACF;AAAA,IACA,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAA,WAAA,CAAY,OAAO,aAAa,CAAA,CAAA;AAAA,OAClC,MAAA,IAAW,oBAAsB,EAAA;AAC/B,QAAoB,mBAAA,CAAA,aAAA,CAAc,SAAS,CAAC,CAAA,CAAA;AAAA,OAC9C;AAAA,KACF;AAAA,IACA,MAAA,EAAQ,CAAC,KAAU,KAAA;AACjB,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAA,WAAA,CAAY,OAAO,aAAa,CAAA,CAAA;AAAA,OAClC;AAAA,KACF;AAAA,IACA,KAAA,EAAO,CAAC,KAAU,KAAA;AAChB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAA,WAAA,CAAY,OAAO,aAAa,CAAA,CAAA;AAAA,OAC3B,MAAA;AACL,QAAA,cAAA,CAAe,OAAO,KAAK,CAAA,CAAA;AAAA,OAC7B;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,yBAAA,GACJ,CAAC,KAAU,KAAA;AA/gBf,IAAA,IAAA,EAAA,CAAA;AAghBM,IAAM,MAAA,GAAA,GAAM,WAAY,CAAA,KAAA,CAAM,MAAqB,CAAA,CAAA;AACnD,IAAM,MAAA,gBAAA,GAAA,CAAmB,EAAI,GAAA,GAAA,CAAA,SAAA,KAAJ,IAAe,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAA,CAAA;AAExC,IAAQ,QAAA,KAAA,CAAM,IAAI,WAAY,EAAA;AAAA,MACvB,KAAA,GAAA;AAEH,QAAA,mBAAA,CAAoB,KAAS,CAAA,CAAA,CAAA;AAC7B,QAAA,gBAAA;AAAA,UACE,KAAA,CAAM,IAAK,CAAA,EAAE,MAAQ,EAAA,aAAA,CAAc,QAAU,EAAA,CAAC,CAAG,EAAA,KAAA,KAAU,KAAK,CAAA;AAAA,SAClE,CAAA;AACA,QAAA,MAAA;AAAA,MACG,KAAA,GAAA;AAEH,QAAA,MAAM,UACJ,GAAA,aAAA,CAAc,MAAS,GAAA,CAAA,GACnB,cACG,GAAI,CAAA,CAAC,KAAU,KAAA,MAAA,CAAO,cAAc,KAAM,CAAA,CAAC,CAC3C,CAAA,MAAA,CAAO,SAAS,IAAO,GAAA,MAAA,CAAO,KAAK,CAAA,CAAE,MAAS,GAAA,EAAE,CAChD,CAAA,MAAA,CAAO,OAAO,CACd,CAAA,IAAA,CAAK,gBAAgB,CAAA,GACxB,qBAAqB,KACrB,CAAA,GAAA,MAAA,CAAO,aAAc,CAAA,gBAAA,CAAA,GAAoB,GAAG,CAC5C,GAAA,EAAA,CAAA;AACN,QAAA,IAAA,CAAK,UAAU,CAAA,CACZ,IAAK,CAAA,CAAC,MAAW,KAAA;AAChB,UAAA,iBAAA,CAAkB,UAAU,CAAC,gBAAA,CAAA;AAC7B,UAAO,OAAA,MAAA,CAAA;AAAA,SACR,CAAA,CACA,KAAM,CAAA,CAAC,KAAU,KAAA;AAChB,UAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,SACpB,CAAA,CAAA;AACH,QAAA,MAAA;AAAA,MACG,KAAA,GAAA;AAEH,QAAA,MAAA;AAAA,MACG,KAAA,WAAA;AACH,QAAA,wBAAA,CAAyB,UAAU,KAAK,CAAA,CAAA;AACxC,QAAA,MAAA;AAAA,MACG,KAAA,YAAA;AACH,QAAA,wBAAA,CAAyB,WAAW,KAAK,CAAA,CAAA;AACzC,QAAA,MAAA;AAAA,MACG,KAAA,WAAA;AACH,QAAA,IAAI,oBAAsB,EAAA;AACxB,UAAiB,gBAAA,CAAA,KAAA,EAAO,aAAc,CAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAAA,SAClD;AACA,QAAA,MAAA;AAAA,MACG,KAAA,SAAA,CAAA;AAAA,MACA,KAAA,MAAA;AAEH,QAAA,MAAA;AAAA,MAAA;AAGA,QAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,KAAA;AAAA,GAEzB,CAAA;AAEF,EAAM,MAAA,mBAAA,GAAsB,CAAC,KAA8C,KAAA;AACzE,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,GAAA,CAAI,WAAY,EAAA,CAAA;AACvC,IAAA,IAAI,aAAa,QAAU,EAAA;AACzB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAW,UAAA,EAAA,CAAA;AAAA,KACF,MAAA,IAAA,QAAA,KAAa,KAAS,IAAA,CAAC,gBAAkB,EAAA;AAElD,MAAA,cAAA,CAAe,OAAO,KAAK,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,aAAA,GAAuE,CAC3E,KACG,KAAA;AACH,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AACZ,IAAA,IAAI,MAAM,gBAAkB,EAAA;AAC1B,MAAA,OAAA;AAAA,KACF;AACA,IAAI,IAAA,cAAA,CAAe,KAAK,CAAG,EAAA;AACzB,MAAA,yBAAA,CAA0B,KAAK,CAAA,CAAA;AAAA,KAC1B,MAAA;AACL,MAAI,IAAA,OAAA,CAAA;AACJ,MAAA,IAAI,oBAAoB,IAAM,EAAA;AAC5B,QAAA,OAAA,GAAU,qBAAqB,KAAM,CAAA,GAAA,CAAA,CAAA;AACrC,QAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,OACd,MAAA;AACL,QAAA,OAAA,GAAU,yBAAyB,KAAM,CAAA,GAAA,CAAA,CAAA;AAAA,OAC3C;AAEA,MAAA,IAAI,WAAW,IAAM,EAAA;AACnB,QAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,OACR,MAAA;AACL,QAAA,mBAAA,CAAoB,KAAK,CAAA,CAAA;AAAA,OAC3B;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,KAAuC,GAAA;AAAA,IAC3C,KAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA;AAAA,IAKpB,MAAA,EAAQ,WAAW,UAAa,GAAA,MAAA;AAAA,IAChC,OAAS,EAAA,WAAA;AAAA,IACT,aAAe,EAAA,iBAAA;AAAA,IACf,YAAc,EAAA,gBAAA;AAAA,IACd,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX,YAAc,EAAA,gBAAA;AAAA,IACd,OAAS,EAAA,WAAA;AAAA,GACX,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,KAAA;AAAA,IACA,gBAAA;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,WAAA,EAAa,UAAW,CAAA,WAAA,EAAa,QAAQ,CAAA;AAAA,MAC7C,QAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,MACA,YAAA,EAAc,UAAW,CAAA,YAAA,EAAc,oBAAoB,CAAA;AAAA,KAC7D;AAAA,IACA,OAAS,EAAA;AAAA,MACP,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,cAAA;AAAA,KACF;AAAA,IACA,UAAY,EAAA;AAAA,MACV,EAAA;AAAA,MACA,QAAA;AAAA,MACA,kBAAkB,gBAAoB,IAAA,IAAA,GAAA,gBAAA,GAAA,oBAAA;AAAA,MACtC,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,YAAA;AAAA,MACtB,SAAA;AAAA,MACA,OAAA;AAAA,MACA,iBAAmB,EAAA,cAAA;AAAA,MACnB,YAAc,EAAA,SAAA;AAAA,MACd,oBAAoB,eAAmB,IAAA,IAAA,GAAA,eAAA,GAAA,mBAAA;AAAA,MACvC,GAAG,KAAA;AAAA,MACH,GAAG,SAAA;AAAA,MACH,GAAI,QAAW,GAAA,EAAK,GAAA,aAAA;AAAA,KACtB;AAAA,GACF,CAAA;AACF;;;;"}
@@ -43,7 +43,7 @@ const OverflowPanel = forwardRef(function DropdownPanel({
43
43
  const triggerRef = useRef(null);
44
44
  const [isOpen, setIsOpen] = useControlled({
45
45
  controlled: isOpenProp,
46
- default: defaultIsOpen != null ? defaultIsOpen : false,
46
+ default: defaultIsOpen || false,
47
47
  name: "DropdownPanel"
48
48
  });
49
49
  const { highlightedIndex: highlightedIdx, ...keyboardHook } = useKeyboardNavigationPanel({
@@ -1 +1 @@
1
- {"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n useControlled,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport React, {\n ForwardedRef,\n forwardRef,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\nimport { ToolbarField, ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n useCollectionItems,\n useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, DropdownBaseProps } from \"../../dropdown\";\n\nimport overflowPanelCss from \"./OverflowPanel.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n /**\n * Trigger button icon\n */\n triggerButtonIcon?: JSX.Element;\n /**\n * Trigger button text\n */\n triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n {\n children,\n className,\n defaultIsOpen,\n isOpen: isOpenProp,\n onOpenChange,\n triggerButtonIcon,\n triggerButtonLabel,\n ...props\n }: DropdownPanelProps,\n forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overflow-panel\",\n css: overflowPanelCss,\n window: targetWindow,\n });\n\n const id = useId();\n const collectionHook = useCollectionItems<ReactElement>({\n id,\n children,\n });\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen ?? false,\n name: \"DropdownPanel\",\n });\n\n const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n useKeyboardNavigationPanel({\n cycleFocus: true,\n defaultHighlightedIndex: 0,\n focusOnHighlight: true,\n indexPositions: collectionHook.data,\n });\n\n const focusTrigger = useCallback(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, []);\n\n const setPanelRef = useCallback((el: HTMLElement | null) => el?.focus(), []);\n\n const handleItemClick = (evt: MouseEvent) => {\n // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n setIsOpen(false);\n focusTrigger();\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange?.(open);\n };\n\n const getTriggerButtonIcon = () =>\n triggerButtonIcon ?? triggerButtonLabel === undefined ? (\n <OverflowMenuIcon />\n ) : undefined;\n\n return (\n <DropdownBase\n {...props}\n className={clsx(withBaseName(), className)}\n isOpen={isOpen}\n onOpenChange={handleOpenChange}\n placement=\"bottom-end\"\n ref={forwardedRef}\n >\n <Button variant=\"secondary\" ref={triggerRef}>\n {getTriggerButtonIcon()}\n {triggerButtonLabel}\n </Button>\n <div\n className={withBaseName(\"content\")}\n ref={setPanelRef}\n tabIndex={-1}\n {...keyboardHook.listProps}\n >\n {collectionHook.data.map((item) => {\n const { type } = item.value as ReactElement;\n if (type === OverflowSeparator) {\n return item.value;\n } else {\n const formFieldProps = {\n id: item.id,\n inOverflowPanel: true,\n key: item.id,\n onClick: handleItemClick,\n } as ToolbarFieldProps;\n\n if (type === ToolbarField) {\n return React.cloneElement(\n item.value as ReactElement,\n formFieldProps\n );\n } else {\n return (\n <ToolbarField {...formFieldProps}>{item.value}</ToolbarField>\n );\n }\n }\n })}\n </div>\n </DropdownBase>\n );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}
1
+ {"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n Button,\n makePrefixer,\n useControlled,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport React, {\n ForwardedRef,\n forwardRef,\n MouseEvent,\n ReactElement,\n useCallback,\n useRef,\n} from \"react\";\nimport { ToolbarField, ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n useCollectionItems,\n useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, DropdownBaseProps } from \"../../dropdown\";\n\nimport overflowPanelCss from \"./OverflowPanel.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n /**\n * Trigger button icon\n */\n triggerButtonIcon?: JSX.Element;\n /**\n * Trigger button text\n */\n triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n {\n children,\n className,\n defaultIsOpen,\n isOpen: isOpenProp,\n onOpenChange,\n triggerButtonIcon,\n triggerButtonLabel,\n ...props\n }: DropdownPanelProps,\n forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overflow-panel\",\n css: overflowPanelCss,\n window: targetWindow,\n });\n\n const id = useId();\n const collectionHook = useCollectionItems<ReactElement>({\n id,\n children,\n });\n\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [isOpen, setIsOpen] = useControlled<boolean>({\n controlled: isOpenProp,\n default: defaultIsOpen || false,\n name: \"DropdownPanel\",\n });\n\n const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n useKeyboardNavigationPanel({\n cycleFocus: true,\n defaultHighlightedIndex: 0,\n focusOnHighlight: true,\n indexPositions: collectionHook.data,\n });\n\n const focusTrigger = useCallback(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, []);\n\n const setPanelRef = useCallback((el: HTMLElement | null) => el?.focus(), []);\n\n const handleItemClick = (evt: MouseEvent) => {\n // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n setIsOpen(false);\n focusTrigger();\n };\n\n const handleOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange?.(open);\n };\n\n const getTriggerButtonIcon = () =>\n triggerButtonIcon ?? triggerButtonLabel === undefined ? (\n <OverflowMenuIcon />\n ) : undefined;\n\n return (\n <DropdownBase\n {...props}\n className={clsx(withBaseName(), className)}\n isOpen={isOpen}\n onOpenChange={handleOpenChange}\n placement=\"bottom-end\"\n ref={forwardedRef}\n >\n <Button variant=\"secondary\" ref={triggerRef}>\n {getTriggerButtonIcon()}\n {triggerButtonLabel}\n </Button>\n <div\n className={withBaseName(\"content\")}\n ref={setPanelRef}\n tabIndex={-1}\n {...keyboardHook.listProps}\n >\n {collectionHook.data.map((item) => {\n const { type } = item.value as ReactElement;\n if (type === OverflowSeparator) {\n return item.value;\n } else {\n const formFieldProps = {\n id: item.id,\n inOverflowPanel: true,\n key: item.id,\n onClick: handleItemClick,\n } as ToolbarFieldProps;\n\n if (type === ToolbarField) {\n return React.cloneElement(\n item.value as ReactElement,\n formFieldProps\n );\n } else {\n return (\n <ToolbarField {...formFieldProps}>{item.value}</ToolbarField>\n );\n }\n }\n })}\n </div>\n </DropdownBase>\n );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}
@@ -37,7 +37,6 @@ const Tree = forwardRef(function Tree2({
37
37
  width,
38
38
  ...htmlAttributes
39
39
  }, forwardedRef) {
40
- var _a;
41
40
  const targetWindow = useWindow();
42
41
  useComponentCssInjection({
43
42
  testId: "salt-tree",
@@ -52,7 +51,7 @@ const Tree = forwardRef(function Tree2({
52
51
  source,
53
52
  options: {
54
53
  noChildrenLabel: "No children available",
55
- revealSelected: revealSelected ? (_a = selectedProp != null ? selectedProp : defaultSelected) != null ? _a : false : void 0
54
+ revealSelected: revealSelected ? Boolean(selectedProp) || Boolean(defaultSelected) || false : void 0
56
55
  }
57
56
  });
58
57
  const preferredHeight = height != null ? height : calcPreferredHeight({