@redsift/design-system 11.5.0 → 11.6.0-alpha.0

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 (285) hide show
  1. package/_internal/Alert2.js +197 -0
  2. package/_internal/Alert2.js.map +1 -0
  3. package/_internal/AppBar.js +248 -0
  4. package/_internal/AppBar.js.map +1 -0
  5. package/_internal/AppContainer.js +142 -0
  6. package/_internal/AppContainer.js.map +1 -0
  7. package/_internal/AppContent.js +92 -0
  8. package/_internal/AppContent.js.map +1 -0
  9. package/_internal/Badge2.js +142 -0
  10. package/_internal/Badge2.js.map +1 -0
  11. package/_internal/BreadcrumbItem.js +91 -0
  12. package/_internal/BreadcrumbItem.js.map +1 -0
  13. package/_internal/Breadcrumbs2.js +94 -0
  14. package/_internal/Breadcrumbs2.js.map +1 -0
  15. package/_internal/Button2.js +91 -0
  16. package/_internal/Button2.js.map +1 -0
  17. package/_internal/ButtonGroup.js +181 -0
  18. package/_internal/ButtonGroup.js.map +1 -0
  19. package/_internal/ButtonLink.js +84 -0
  20. package/_internal/ButtonLink.js.map +1 -0
  21. package/_internal/Card2.js +157 -0
  22. package/_internal/Card2.js.map +1 -0
  23. package/_internal/CardActions.js +44 -0
  24. package/_internal/CardActions.js.map +1 -0
  25. package/_internal/CardBody.js +42 -0
  26. package/_internal/CardBody.js.map +1 -0
  27. package/_internal/CardHeader.js +83 -0
  28. package/_internal/CardHeader.js.map +1 -0
  29. package/_internal/Checkbox2.js +244 -0
  30. package/_internal/Checkbox2.js.map +1 -0
  31. package/_internal/CheckboxGroup.js +188 -0
  32. package/_internal/CheckboxGroup.js.map +1 -0
  33. package/_internal/ConditionalWrapper.js +13 -0
  34. package/_internal/ConditionalWrapper.js.map +1 -0
  35. package/_internal/DetailedCard.js +6916 -0
  36. package/_internal/DetailedCard.js.map +1 -0
  37. package/_internal/DetailedCardCollapsibleSectionItems.js +64 -0
  38. package/_internal/DetailedCardCollapsibleSectionItems.js.map +1 -0
  39. package/_internal/DetailedCardHeader.js +67 -0
  40. package/_internal/DetailedCardHeader.js.map +1 -0
  41. package/_internal/DetailedCardSection.js +172 -0
  42. package/_internal/DetailedCardSection.js.map +1 -0
  43. package/_internal/DetailedCardSectionItem.js +94 -0
  44. package/_internal/DetailedCardSectionItem.js.map +1 -0
  45. package/_internal/Flexbox2.js +93 -0
  46. package/_internal/Flexbox2.js.map +1 -0
  47. package/_internal/Grid2.js +95 -0
  48. package/_internal/Grid2.js.map +1 -0
  49. package/_internal/GridItem.js +40 -0
  50. package/_internal/GridItem.js.map +1 -0
  51. package/_internal/Heading2.js +113 -0
  52. package/_internal/Heading2.js.map +1 -0
  53. package/_internal/Icon2.js +211 -0
  54. package/_internal/Icon2.js.map +1 -0
  55. package/_internal/IconButton.js +80 -0
  56. package/_internal/IconButton.js.map +1 -0
  57. package/_internal/IconButtonLink.js +75 -0
  58. package/_internal/IconButtonLink.js.map +1 -0
  59. package/_internal/Item2.js +399 -0
  60. package/_internal/Item2.js.map +1 -0
  61. package/_internal/Link2.js +67 -0
  62. package/_internal/Link2.js.map +1 -0
  63. package/_internal/LinkButton.js +66 -0
  64. package/_internal/LinkButton.js.map +1 -0
  65. package/_internal/Listbox2.js +274 -0
  66. package/_internal/Listbox2.js.map +1 -0
  67. package/_internal/Number2.js +111 -0
  68. package/_internal/Number2.js.map +1 -0
  69. package/_internal/NumberField.js +3974 -0
  70. package/_internal/NumberField.js.map +1 -0
  71. package/_internal/Pill2.js +405 -0
  72. package/_internal/Pill2.js.map +1 -0
  73. package/_internal/ProgressBar.js +69 -0
  74. package/_internal/ProgressBar.js.map +1 -0
  75. package/_internal/Radio2.js +237 -0
  76. package/_internal/Radio2.js.map +1 -0
  77. package/_internal/RadioGroup.js +176 -0
  78. package/_internal/RadioGroup.js.map +1 -0
  79. package/_internal/Shield2.js +225 -0
  80. package/_internal/Shield2.js.map +1 -0
  81. package/_internal/SideNavigationMenu.js +591 -0
  82. package/_internal/SideNavigationMenu.js.map +1 -0
  83. package/_internal/SideNavigationMenuItem.js +304 -0
  84. package/_internal/SideNavigationMenuItem.js.map +1 -0
  85. package/_internal/Skeleton2.js +42 -0
  86. package/_internal/Skeleton2.js.map +1 -0
  87. package/_internal/SkeletonCircle.js +58 -0
  88. package/_internal/SkeletonCircle.js.map +1 -0
  89. package/_internal/SkeletonText.js +77 -0
  90. package/_internal/SkeletonText.js.map +1 -0
  91. package/_internal/Spinner2.js +333 -0
  92. package/_internal/Spinner2.js.map +1 -0
  93. package/_internal/Switch2.js +320 -0
  94. package/_internal/Switch2.js.map +1 -0
  95. package/_internal/SwitchGroup.js +188 -0
  96. package/_internal/SwitchGroup.js.map +1 -0
  97. package/_internal/Text2.js +51 -0
  98. package/_internal/Text2.js.map +1 -0
  99. package/_internal/TextArea.js +444 -0
  100. package/_internal/TextArea.js.map +1 -0
  101. package/_internal/TextField.js +473 -0
  102. package/_internal/TextField.js.map +1 -0
  103. package/_internal/_rollupPluginBabelHelpers.js +133 -0
  104. package/_internal/_rollupPluginBabelHelpers.js.map +1 -0
  105. package/_internal/alert.js +2 -0
  106. package/_internal/alert.js.map +1 -0
  107. package/_internal/app-bar.js +2 -0
  108. package/_internal/app-bar.js.map +1 -0
  109. package/_internal/app-container.js +3 -0
  110. package/_internal/app-container.js.map +1 -0
  111. package/_internal/app-content.js +2 -0
  112. package/_internal/app-content.js.map +1 -0
  113. package/_internal/app-side-panel.js +3 -0
  114. package/_internal/app-side-panel.js.map +1 -0
  115. package/_internal/badge.js +2 -0
  116. package/_internal/badge.js.map +1 -0
  117. package/_internal/breadcrumb-item.js +2 -0
  118. package/_internal/breadcrumb-item.js.map +1 -0
  119. package/_internal/breadcrumbs.js +2 -0
  120. package/_internal/breadcrumbs.js.map +1 -0
  121. package/_internal/button-group.js +2 -0
  122. package/_internal/button-group.js.map +1 -0
  123. package/_internal/button-link.js +2 -0
  124. package/_internal/button-link.js.map +1 -0
  125. package/_internal/button.js +3 -0
  126. package/_internal/button.js.map +1 -0
  127. package/_internal/card-actions.js +2 -0
  128. package/_internal/card-actions.js.map +1 -0
  129. package/_internal/card-body.js +2 -0
  130. package/_internal/card-body.js.map +1 -0
  131. package/_internal/card-header.js +2 -0
  132. package/_internal/card-header.js.map +1 -0
  133. package/_internal/card.js +2 -0
  134. package/_internal/card.js.map +1 -0
  135. package/_internal/checkbox-group.js +2 -0
  136. package/_internal/checkbox-group.js.map +1 -0
  137. package/_internal/checkbox.js +2 -0
  138. package/_internal/checkbox.js.map +1 -0
  139. package/_internal/colors.js +98 -0
  140. package/_internal/colors.js.map +1 -0
  141. package/_internal/conditional-wrapper.js +2 -0
  142. package/_internal/conditional-wrapper.js.map +1 -0
  143. package/_internal/context.js +6 -0
  144. package/_internal/context.js.map +1 -0
  145. package/_internal/context2.js +300 -0
  146. package/_internal/context2.js.map +1 -0
  147. package/_internal/context3.js +6 -0
  148. package/_internal/context3.js.map +1 -0
  149. package/_internal/context4.js +6 -0
  150. package/_internal/context4.js.map +1 -0
  151. package/_internal/context5.js +6 -0
  152. package/_internal/context5.js.map +1 -0
  153. package/_internal/detailed-card-collapsible-section-items.js +2 -0
  154. package/_internal/detailed-card-collapsible-section-items.js.map +1 -0
  155. package/_internal/detailed-card-header.js +2 -0
  156. package/_internal/detailed-card-header.js.map +1 -0
  157. package/_internal/detailed-card-section-item.js +2 -0
  158. package/_internal/detailed-card-section-item.js.map +1 -0
  159. package/_internal/detailed-card-section.js +2 -0
  160. package/_internal/detailed-card-section.js.map +1 -0
  161. package/_internal/detailed-card.js +2 -0
  162. package/_internal/detailed-card.js.map +1 -0
  163. package/_internal/filterComponents.js +24 -0
  164. package/_internal/filterComponents.js.map +1 -0
  165. package/_internal/flexbox.js +2 -0
  166. package/_internal/flexbox.js.map +1 -0
  167. package/_internal/focus-within-group.js +3 -0
  168. package/_internal/focus-within-group.js.map +1 -0
  169. package/_internal/fonts.js +10 -0
  170. package/_internal/fonts.js.map +1 -0
  171. package/_internal/gradient-border.js +38 -0
  172. package/_internal/gradient-border.js.map +1 -0
  173. package/_internal/grid-item.js +2 -0
  174. package/_internal/grid-item.js.map +1 -0
  175. package/_internal/grid.js +2 -0
  176. package/_internal/grid.js.map +1 -0
  177. package/_internal/heading.js +3 -0
  178. package/_internal/heading.js.map +1 -0
  179. package/_internal/icon-button-link.js +2 -0
  180. package/_internal/icon-button-link.js.map +1 -0
  181. package/_internal/icon-button.js +3 -0
  182. package/_internal/icon-button.js.map +1 -0
  183. package/_internal/icon.js +2 -0
  184. package/_internal/icon.js.map +1 -0
  185. package/_internal/isComponent.js +15 -0
  186. package/_internal/isComponent.js.map +1 -0
  187. package/_internal/item.js +2 -0
  188. package/_internal/item.js.map +1 -0
  189. package/_internal/link-button.js +2 -0
  190. package/_internal/link-button.js.map +1 -0
  191. package/_internal/link.js +3 -0
  192. package/_internal/link.js.map +1 -0
  193. package/_internal/listbox.js +3 -0
  194. package/_internal/listbox.js.map +1 -0
  195. package/_internal/number-field.js +2 -0
  196. package/_internal/number-field.js.map +1 -0
  197. package/_internal/number.js +2 -0
  198. package/_internal/number.js.map +1 -0
  199. package/_internal/partitionComponents.js +26 -0
  200. package/_internal/partitionComponents.js.map +1 -0
  201. package/_internal/pill.js +2 -0
  202. package/_internal/pill.js.map +1 -0
  203. package/_internal/progress-bar.js +2 -0
  204. package/_internal/progress-bar.js.map +1 -0
  205. package/_internal/radio-group.js +2 -0
  206. package/_internal/radio-group.js.map +1 -0
  207. package/_internal/radio.js +2 -0
  208. package/_internal/radio.js.map +1 -0
  209. package/_internal/redsift-design-tokens.js +1391 -0
  210. package/_internal/redsift-design-tokens.js.map +1 -0
  211. package/_internal/shared.js +2 -0
  212. package/_internal/shared.js.map +1 -0
  213. package/_internal/shield.js +2 -0
  214. package/_internal/shield.js.map +1 -0
  215. package/_internal/side-navigation-menu-bar.js +3 -0
  216. package/_internal/side-navigation-menu-bar.js.map +1 -0
  217. package/_internal/side-navigation-menu-item.js +2 -0
  218. package/_internal/side-navigation-menu-item.js.map +1 -0
  219. package/_internal/side-navigation-menu.js +2 -0
  220. package/_internal/side-navigation-menu.js.map +1 -0
  221. package/_internal/skeleton-circle.js +2 -0
  222. package/_internal/skeleton-circle.js.map +1 -0
  223. package/_internal/skeleton-text.js +3 -0
  224. package/_internal/skeleton-text.js.map +1 -0
  225. package/_internal/skeleton.js +2 -0
  226. package/_internal/skeleton.js.map +1 -0
  227. package/_internal/spinner.js +2 -0
  228. package/_internal/spinner.js.map +1 -0
  229. package/_internal/styles.js +235 -0
  230. package/_internal/styles.js.map +1 -0
  231. package/_internal/styles2.js +47 -0
  232. package/_internal/styles2.js.map +1 -0
  233. package/_internal/styles3.js +145 -0
  234. package/_internal/styles3.js.map +1 -0
  235. package/_internal/styles4.js +250 -0
  236. package/_internal/styles4.js.map +1 -0
  237. package/_internal/styles5.js +143 -0
  238. package/_internal/styles5.js.map +1 -0
  239. package/_internal/styles6.js +84 -0
  240. package/_internal/styles6.js.map +1 -0
  241. package/_internal/switch-group.js +2 -0
  242. package/_internal/switch-group.js.map +1 -0
  243. package/_internal/switch.js +2 -0
  244. package/_internal/switch.js.map +1 -0
  245. package/_internal/text-area.js +2 -0
  246. package/_internal/text-area.js.map +1 -0
  247. package/_internal/text-field.js +2 -0
  248. package/_internal/text-field.js.map +1 -0
  249. package/_internal/text.js +3 -0
  250. package/_internal/text.js.map +1 -0
  251. package/_internal/theme.js +2 -0
  252. package/_internal/theme.js.map +1 -0
  253. package/_internal/types.js +15 -0
  254. package/_internal/types.js.map +1 -0
  255. package/_internal/types2.js +26 -0
  256. package/_internal/types2.js.map +1 -0
  257. package/_internal/types3.js +20 -0
  258. package/_internal/types3.js.map +1 -0
  259. package/_internal/useAppSidePanel.js +337 -0
  260. package/_internal/useAppSidePanel.js.map +1 -0
  261. package/_internal/useFocusOnList.js +541 -0
  262. package/_internal/useFocusOnList.js.map +1 -0
  263. package/_internal/useFocusOnListItem.js +203 -0
  264. package/_internal/useFocusOnListItem.js.map +1 -0
  265. package/_internal/useFocusRing.js +669 -0
  266. package/_internal/useFocusRing.js.map +1 -0
  267. package/_internal/useId.js +42 -0
  268. package/_internal/useId.js.map +1 -0
  269. package/_internal/useIsLoaded.js +14 -0
  270. package/_internal/useIsLoaded.js.map +1 -0
  271. package/_internal/useListboxItem.js +129 -0
  272. package/_internal/useListboxItem.js.map +1 -0
  273. package/_internal/useMessageFormatter.js +143 -0
  274. package/_internal/useMessageFormatter.js.map +1 -0
  275. package/_internal/useNumberFormatter.js +239 -0
  276. package/_internal/useNumberFormatter.js.map +1 -0
  277. package/_internal/useSideNavigationMenuBar.js +373 -0
  278. package/_internal/useSideNavigationMenuBar.js.map +1 -0
  279. package/_internal/useTheme.js +15 -0
  280. package/_internal/useTheme.js.map +1 -0
  281. package/_internal/warnIfNoAccessibleLabelFound.js +20 -0
  282. package/_internal/warnIfNoAccessibleLabelFound.js.map +1 -0
  283. package/index.js +315 -24243
  284. package/index.js.map +1 -1
  285. package/package.json +3 -3
@@ -0,0 +1,203 @@
1
+ import React__default, { useRef, useContext, useEffect, useCallback } from 'react';
2
+
3
+ let EventKey = /*#__PURE__*/function (EventKey) {
4
+ EventKey["ArrowLeft"] = "ArrowLeft";
5
+ EventKey["ArrowRight"] = "ArrowRight";
6
+ EventKey["ArrowUp"] = "ArrowUp";
7
+ EventKey["ArrowDown"] = "ArrowDown";
8
+ EventKey["Home"] = "Home";
9
+ EventKey["End"] = "End";
10
+ EventKey["Enter"] = "Enter";
11
+ return EventKey;
12
+ }({});
13
+ let Navigation = /*#__PURE__*/function (Navigation) {
14
+ Navigation["PREVIOUS"] = "PREVIOUS";
15
+ Navigation["NEXT"] = "NEXT";
16
+ Navigation["VERY_FIRST"] = "VERY_FIRST";
17
+ Navigation["VERY_LAST"] = "VERY_LAST";
18
+ Navigation["PREVIOUS_ROW"] = "PREVIOUS_ROW";
19
+ Navigation["NEXT_ROW"] = "NEXT_ROW";
20
+ Navigation["FIRST_IN_ROW"] = "FIRST_IN_ROW";
21
+ Navigation["LAST_IN_ROW"] = "LAST_IN_ROW";
22
+ return Navigation;
23
+ }({});
24
+ let FocusWithinGroupActionType = /*#__PURE__*/function (FocusWithinGroupActionType) {
25
+ FocusWithinGroupActionType["REGISTER_TAB_STOP"] = "REGISTER_TAB_STOP";
26
+ FocusWithinGroupActionType["UNREGISTER_TAB_STOP"] = "UNREGISTER_TAB_STOP";
27
+ FocusWithinGroupActionType["KEY_DOWN_ON_ITEM"] = "KEY_DOWN_ON_ITEM";
28
+ FocusWithinGroupActionType["CLICK_ON_ITEM"] = "CLICK_ON_ITEM";
29
+ FocusWithinGroupActionType["KEY_DOWN_ON_LIST"] = "KEY_DOWN_ON_LIST";
30
+ FocusWithinGroupActionType["FOCUS_ON_LIST"] = "FOCUS_ON_LIST";
31
+ FocusWithinGroupActionType["BLUR_ON_LIST"] = "BLUR_ON_LIST";
32
+ FocusWithinGroupActionType["TAB_STOP_UPDATED"] = "TAB_STOP_UPDATED";
33
+ FocusWithinGroupActionType["OPTIONS_UPDATED"] = "OPTIONS_UPDATED";
34
+ FocusWithinGroupActionType["FILTER_LIST"] = "FILTER_LIST";
35
+ FocusWithinGroupActionType["DELAY_ACTION"] = "DELAY_ACTION";
36
+ return FocusWithinGroupActionType;
37
+ }({});
38
+
39
+ /**
40
+ * Component props.
41
+ */
42
+
43
+ const FOCUS_WITHING_GROUP_INITIAL_STATE = {
44
+ selectedId: null,
45
+ allowFocusing: false,
46
+ tabStops: [],
47
+ direction: 'vertical',
48
+ focusOnClick: false,
49
+ focusOnInit: true,
50
+ loopAround: false,
51
+ rowStartMap: null,
52
+ focusType: 'roving-tabindex',
53
+ listRole: 'listbox'
54
+ };
55
+ const FocusWithinGroupContext = /*#__PURE__*/React__default.createContext({
56
+ state: FOCUS_WITHING_GROUP_INITIAL_STATE,
57
+ dispatch: () => {}
58
+ });
59
+
60
+ let counter = 0;
61
+ function uniqueId() {
62
+ return `rti_${++counter}`;
63
+ }
64
+
65
+ /**
66
+ * Includes the given DOM element in the current roving tabindex.
67
+ * @param {RefObject<Element>} domElementRef The DOM element to include.
68
+ * This must be the same DOM element for the lifetime of the containing
69
+ * component.
70
+ * @param {boolean} isDisabled Whether or not the DOM element is currently
71
+ * enabled. This value can be updated as appropriate throughout the lifetime
72
+ * of the containing component.
73
+ * @param {number?} rowIndex An optional integer value that must be
74
+ * populated if the roving tabindex is being used in a grid. In that case,
75
+ * set it to the zero-based index of the row that the given DOM element
76
+ * is currently part of. You can update this row index as appropriate
77
+ * throughout the lifetime of the containing component, for example if
78
+ * the shape of the grid can change dynamically.
79
+ * @returns A tuple of values to be applied by the containing
80
+ * component for the roving tabindex to work correctly.
81
+ * First tuple value: The tabIndex value to apply to the tab stop
82
+ * element.
83
+ * Second tuple value: Whether or not focus() should be invoked on the
84
+ * tab stop element.
85
+ * Third tuple value: The onKeyDown callback to apply to the tab
86
+ * stop element. If the key press is relevant to the hook then
87
+ * event.preventDefault() will be invoked on the event.
88
+ * Fourth tuple value: The onClick callback to apply to the tab
89
+ * stop element.
90
+ */
91
+ function useFocusOnListItem(props) {
92
+ var _context$state$active;
93
+ const {
94
+ domElementRef,
95
+ isDisabled,
96
+ id,
97
+ value,
98
+ rowIndex = null
99
+ } = props;
100
+ // Create a stable ID for the lifetime of the component:
101
+ const idRef = useRef(null);
102
+ function getId() {
103
+ if (id) {
104
+ return id;
105
+ }
106
+ if (!idRef.current) {
107
+ idRef.current = uniqueId();
108
+ }
109
+ return idRef.current;
110
+ }
111
+ const isMounted = useRef(false);
112
+ const context = useContext(FocusWithinGroupContext);
113
+
114
+ // Register the tab stop on mount and unregister it on unmount:
115
+ useEffect(() => {
116
+ const id = getId();
117
+ context.dispatch({
118
+ type: FocusWithinGroupActionType.REGISTER_TAB_STOP,
119
+ payload: {
120
+ id,
121
+ domElementRef,
122
+ rowIndex,
123
+ isDisabled,
124
+ value: value
125
+ }
126
+ });
127
+ return () => {
128
+ context.dispatch({
129
+ type: FocusWithinGroupActionType.UNREGISTER_TAB_STOP,
130
+ payload: {
131
+ id
132
+ }
133
+ });
134
+ };
135
+ }, []);
136
+
137
+ // Update the tab stop data if rowIndex or isDisabled change.
138
+ // The isMounted flag is used to prevent this effect running
139
+ // on mount, which is benign but redundant (as the
140
+ // REGISTER_TAB_STOP action would have just been dispatched).
141
+ useEffect(() => {
142
+ if (isMounted.current) {
143
+ context.dispatch({
144
+ type: FocusWithinGroupActionType.TAB_STOP_UPDATED,
145
+ payload: {
146
+ id: getId(),
147
+ rowIndex,
148
+ isDisabled,
149
+ value: value || ''
150
+ }
151
+ });
152
+ } else {
153
+ isMounted.current = true;
154
+ }
155
+ }, [rowIndex, isDisabled]);
156
+
157
+ // Create a stable callback function for handling key down events:
158
+ const handleKeyDown = useCallback(event => {
159
+ const key = EventKey[event.key];
160
+ if (!key) {
161
+ return;
162
+ }
163
+ context.dispatch({
164
+ type: FocusWithinGroupActionType.KEY_DOWN_ON_ITEM,
165
+ payload: {
166
+ id: getId(),
167
+ key,
168
+ ctrlKey: event.ctrlKey
169
+ }
170
+ });
171
+ event.preventDefault();
172
+ }, []);
173
+
174
+ // Create a stable callback function for handling click events:
175
+ const handleClick = useCallback(() => {
176
+ context.dispatch({
177
+ type: FocusWithinGroupActionType.CLICK_ON_ITEM,
178
+ payload: {
179
+ id: getId()
180
+ }
181
+ });
182
+ }, []);
183
+
184
+ // Determine if the current tab stop is the currently active one:
185
+ const selected = getId() === context.state.selectedId;
186
+ const tabIndex = context.state.focusType === 'roving-tabindex' ? selected ? 0 : -1 : undefined;
187
+ const isFocused = selected && context.state.allowFocusing;
188
+ useEffect(() => {
189
+ if (isFocused && domElementRef.current && context.state.focusType === 'roving-tabindex') {
190
+ var _current;
191
+ (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
192
+ }
193
+ }, [isFocused]);
194
+ return {
195
+ tabIndex,
196
+ isFocused: context.state.focusType === 'roving-tabindex' ? isFocused && document.activeElement === domElementRef.current : selected && ((_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0]) === getId(),
197
+ handleKeyDown,
198
+ handleClick
199
+ };
200
+ }
201
+
202
+ export { EventKey as E, FocusWithinGroupActionType as F, Navigation as N, FOCUS_WITHING_GROUP_INITIAL_STATE as a, FocusWithinGroupContext as b, useFocusOnListItem as c, uniqueId as u };
203
+ //# sourceMappingURL=useFocusOnListItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFocusOnListItem.js","sources":["../../src/components/focus-within-group/types.ts","../../src/components/focus-within-group/context.ts","../../src/components/focus-within-group/useFocusOnListItem.ts"],"sourcesContent":["import { ComponentProps } from 'react';\n\nexport enum EventKey {\n ArrowLeft = 'ArrowLeft',\n ArrowRight = 'ArrowRight',\n ArrowUp = 'ArrowUp',\n ArrowDown = 'ArrowDown',\n Home = 'Home',\n End = 'End',\n Enter = 'Enter',\n}\n\nexport type KeyDirection = 'horizontal' | 'vertical' | 'both';\n\nexport enum Navigation {\n PREVIOUS = 'PREVIOUS',\n NEXT = 'NEXT',\n VERY_FIRST = 'VERY_FIRST',\n VERY_LAST = 'VERY_LAST',\n PREVIOUS_ROW = 'PREVIOUS_ROW',\n NEXT_ROW = 'NEXT_ROW',\n FIRST_IN_ROW = 'FIRST_IN_ROW',\n LAST_IN_ROW = 'LAST_IN_ROW',\n}\n\nexport type TabStop = Readonly<{\n id: string;\n domElementRef: React.RefObject<Element>;\n isDisabled: boolean;\n rowIndex: number | null;\n value: string;\n}>;\n\nexport type RowStartMap = Map<Exclude<TabStop['rowIndex'], null>, number>;\n\nexport type FocusWithinGroupState = Readonly<{\n selectedId: string | null;\n allowFocusing: boolean;\n tabStops: readonly TabStop[];\n direction: KeyDirection;\n focusOnClick: boolean;\n focusOnInit: boolean;\n loopAround: boolean;\n rowStartMap: RowStartMap | null;\n focusType: 'roving-tabindex' | 'virtual-focus';\n listRole: 'listbox' | 'menu';\n activedescendant?: [string, string];\n filter?: {\n value: string;\n type: 'startsWith' | 'contains' | 'endsWith';\n caseSensitive?: boolean;\n };\n delayedAction?: BaseFocusWithinGroupAction;\n maxOptionsLength?: number;\n}>;\n\nexport type FocusWithinGroupOptions = Partial<\n Pick<\n FocusWithinGroupState,\n | 'direction'\n | 'focusOnClick'\n | 'focusOnInit'\n | 'loopAround'\n | 'focusType'\n | 'listRole'\n | 'activedescendant'\n | 'maxOptionsLength'\n >\n>;\n\nexport enum FocusWithinGroupActionType {\n REGISTER_TAB_STOP = 'REGISTER_TAB_STOP',\n UNREGISTER_TAB_STOP = 'UNREGISTER_TAB_STOP',\n KEY_DOWN_ON_ITEM = 'KEY_DOWN_ON_ITEM',\n CLICK_ON_ITEM = 'CLICK_ON_ITEM',\n KEY_DOWN_ON_LIST = 'KEY_DOWN_ON_LIST',\n FOCUS_ON_LIST = 'FOCUS_ON_LIST',\n BLUR_ON_LIST = 'BLUR_ON_LIST',\n TAB_STOP_UPDATED = 'TAB_STOP_UPDATED',\n OPTIONS_UPDATED = 'OPTIONS_UPDATED',\n FILTER_LIST = 'FILTER_LIST',\n DELAY_ACTION = 'DELAY_ACTION',\n}\n\nexport type BaseFocusWithinGroupAction =\n | {\n type: FocusWithinGroupActionType.REGISTER_TAB_STOP;\n payload: TabStop;\n }\n | {\n type: FocusWithinGroupActionType.UNREGISTER_TAB_STOP;\n payload: { id: TabStop['id'] };\n }\n | {\n type: FocusWithinGroupActionType.TAB_STOP_UPDATED;\n payload: {\n id: TabStop['id'];\n rowIndex: TabStop['rowIndex'];\n isDisabled: TabStop['isDisabled'];\n value: string;\n };\n }\n | {\n type: FocusWithinGroupActionType.KEY_DOWN_ON_ITEM;\n payload: {\n id: TabStop['id'];\n key: EventKey;\n ctrlKey: boolean;\n };\n }\n | {\n type: FocusWithinGroupActionType.CLICK_ON_ITEM;\n payload: { id: TabStop['id'] };\n }\n | {\n type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST;\n payload: {\n key: EventKey;\n ctrlKey: boolean;\n };\n }\n | {\n type: FocusWithinGroupActionType.FOCUS_ON_LIST;\n payload: { id: TabStop['id']; filter?: FocusWithinGroupState['filter'] };\n }\n | {\n type: FocusWithinGroupActionType.BLUR_ON_LIST;\n payload: {};\n }\n | {\n type: FocusWithinGroupActionType.OPTIONS_UPDATED;\n payload: FocusWithinGroupOptions;\n }\n | {\n type: FocusWithinGroupActionType.FILTER_LIST;\n payload: { filter: FocusWithinGroupState['filter'] };\n };\nexport type FocusWithinGroupAction =\n | BaseFocusWithinGroupAction\n | {\n type: FocusWithinGroupActionType.DELAY_ACTION;\n payload: BaseFocusWithinGroupAction;\n };\n\nexport type UseFocusWithinGroupProps = {\n tabIndex?: number;\n isFocused: boolean;\n handleKeyDown: (event: React.KeyboardEvent) => void;\n handleClick: () => void;\n};\n\nexport type UseFocusGroupProps = {\n activedescendant: [string, string] | undefined;\n handleKeyDown: (event: React.KeyboardEvent) => void;\n handleFocus: () => void;\n handleBlur: () => void;\n};\n\nexport type FocusWithinGroupContextProps = {\n state: FocusWithinGroupState;\n dispatch: React.Dispatch<FocusWithinGroupAction>;\n};\n\n/**\n * Component props.\n */\nexport interface FocusWithinGroupProps extends ComponentProps<'div'>, FocusWithinGroupOptions {}\n","import React from 'react';\nimport { FocusWithinGroupContextProps, FocusWithinGroupState } from './types';\n\nexport const FOCUS_WITHING_GROUP_INITIAL_STATE: FocusWithinGroupState = {\n selectedId: null,\n allowFocusing: false,\n tabStops: [],\n direction: 'vertical',\n focusOnClick: false,\n focusOnInit: true,\n loopAround: false,\n rowStartMap: null,\n focusType: 'roving-tabindex',\n listRole: 'listbox',\n};\n\nexport const FocusWithinGroupContext = React.createContext<FocusWithinGroupContextProps>({\n state: FOCUS_WITHING_GROUP_INITIAL_STATE,\n dispatch: () => {},\n});\n","import { useCallback, useRef, useContext, useEffect, RefObject, KeyboardEvent } from 'react';\nimport { FocusWithinGroupContext } from './context';\nimport { FocusWithinGroupActionType, EventKey, UseFocusWithinGroupProps } from './types';\n\nlet counter = 0;\n\nexport function uniqueId(): string {\n return `rti_${++counter}`;\n}\n\n/**\n * Includes the given DOM element in the current roving tabindex.\n * @param {RefObject<Element>} domElementRef The DOM element to include.\n * This must be the same DOM element for the lifetime of the containing\n * component.\n * @param {boolean} isDisabled Whether or not the DOM element is currently\n * enabled. This value can be updated as appropriate throughout the lifetime\n * of the containing component.\n * @param {number?} rowIndex An optional integer value that must be\n * populated if the roving tabindex is being used in a grid. In that case,\n * set it to the zero-based index of the row that the given DOM element\n * is currently part of. You can update this row index as appropriate\n * throughout the lifetime of the containing component, for example if\n * the shape of the grid can change dynamically.\n * @returns A tuple of values to be applied by the containing\n * component for the roving tabindex to work correctly.\n * First tuple value: The tabIndex value to apply to the tab stop\n * element.\n * Second tuple value: Whether or not focus() should be invoked on the\n * tab stop element.\n * Third tuple value: The onKeyDown callback to apply to the tab\n * stop element. If the key press is relevant to the hook then\n * event.preventDefault() will be invoked on the event.\n * Fourth tuple value: The onClick callback to apply to the tab\n * stop element.\n */\nexport function useFocusOnListItem(props: {\n domElementRef: RefObject<Element>;\n isDisabled: boolean;\n id?: string;\n value?: string;\n rowIndex?: number | null;\n}): UseFocusWithinGroupProps {\n const { domElementRef, isDisabled, id, value, rowIndex = null } = props;\n // Create a stable ID for the lifetime of the component:\n const idRef = useRef<string | null>(null);\n\n function getId() {\n if (id) {\n return id;\n }\n\n if (!idRef.current) {\n idRef.current = uniqueId();\n }\n return idRef.current;\n }\n\n const isMounted = useRef(false);\n const context = useContext(FocusWithinGroupContext);\n\n // Register the tab stop on mount and unregister it on unmount:\n useEffect(() => {\n const id = getId();\n context.dispatch({\n type: FocusWithinGroupActionType.REGISTER_TAB_STOP,\n payload: {\n id,\n domElementRef,\n rowIndex,\n isDisabled,\n value: value!,\n },\n });\n return (): void => {\n context.dispatch({\n type: FocusWithinGroupActionType.UNREGISTER_TAB_STOP,\n payload: { id },\n });\n };\n }, []);\n\n // Update the tab stop data if rowIndex or isDisabled change.\n // The isMounted flag is used to prevent this effect running\n // on mount, which is benign but redundant (as the\n // REGISTER_TAB_STOP action would have just been dispatched).\n useEffect(() => {\n if (isMounted.current) {\n context.dispatch({\n type: FocusWithinGroupActionType.TAB_STOP_UPDATED,\n payload: {\n id: getId(),\n rowIndex,\n isDisabled,\n value: value || '',\n },\n });\n } else {\n isMounted.current = true;\n }\n }, [rowIndex, isDisabled]);\n\n // Create a stable callback function for handling key down events:\n const handleKeyDown = useCallback((event: KeyboardEvent) => {\n const key = EventKey[event.key as EventKey];\n if (!key) {\n return;\n }\n context.dispatch({\n type: FocusWithinGroupActionType.KEY_DOWN_ON_ITEM,\n payload: { id: getId(), key, ctrlKey: event.ctrlKey },\n });\n event.preventDefault();\n }, []);\n\n // Create a stable callback function for handling click events:\n const handleClick = useCallback(() => {\n context.dispatch({\n type: FocusWithinGroupActionType.CLICK_ON_ITEM,\n payload: { id: getId() },\n });\n }, []);\n\n // Determine if the current tab stop is the currently active one:\n const selected = getId() === context.state.selectedId;\n\n const tabIndex = context.state.focusType === 'roving-tabindex' ? (selected ? 0 : -1) : undefined;\n const isFocused = selected && context.state.allowFocusing;\n\n useEffect(() => {\n if (isFocused && domElementRef.current && context.state.focusType === 'roving-tabindex') {\n (domElementRef as RefObject<SVGElement | HTMLElement>).current?.focus();\n }\n }, [isFocused]);\n\n return {\n tabIndex,\n isFocused:\n context.state.focusType === 'roving-tabindex'\n ? isFocused && document.activeElement === (domElementRef as RefObject<SVGElement | HTMLElement>).current\n : selected && context.state.activedescendant?.[0] === getId(),\n handleKeyDown,\n handleClick,\n };\n}\n"],"names":["EventKey","Navigation","FocusWithinGroupActionType","FOCUS_WITHING_GROUP_INITIAL_STATE","selectedId","allowFocusing","tabStops","direction","focusOnClick","focusOnInit","loopAround","rowStartMap","focusType","listRole","FocusWithinGroupContext","React","createContext","state","dispatch","counter","uniqueId","useFocusOnListItem","props","_context$state$active","domElementRef","isDisabled","id","value","rowIndex","idRef","useRef","getId","current","isMounted","context","useContext","useEffect","type","REGISTER_TAB_STOP","payload","UNREGISTER_TAB_STOP","TAB_STOP_UPDATED","handleKeyDown","useCallback","event","key","KEY_DOWN_ON_ITEM","ctrlKey","preventDefault","handleClick","CLICK_ON_ITEM","selected","tabIndex","undefined","isFocused","_current","focus","document","activeElement","activedescendant"],"mappings":"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"}