@primer/components 0.0.0-20211030175556 → 0.0.0-20211030182910

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 (272) hide show
  1. package/CHANGELOG.md +34 -2
  2. package/dist/browser.esm.js +186 -183
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +190 -187
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.js +3 -3
  7. package/lib/ActionList/index.js +23 -12
  8. package/lib/ActionList2/Item.js +3 -1
  9. package/lib/ActionList2/List.js +1 -2
  10. package/lib/ActionList2/Selection.js +3 -1
  11. package/lib/ActionList2/index.js +41 -23
  12. package/lib/AnchoredOverlay/index.js +12 -4
  13. package/lib/Autocomplete/Autocomplete.d.ts +1 -0
  14. package/lib/Autocomplete/AutocompleteInput.d.ts +1 -0
  15. package/lib/Autocomplete/index.js +14 -7
  16. package/lib/Avatar.d.ts +1 -2
  17. package/lib/Avatar.js +1 -1
  18. package/lib/BranchName.d.ts +1 -2
  19. package/lib/BranchName.js +1 -1
  20. package/lib/Button/Button.d.ts +1 -0
  21. package/lib/Button/ButtonClose.d.ts +2 -1
  22. package/lib/Button/ButtonDanger.d.ts +1 -0
  23. package/lib/Button/ButtonInvisible.d.ts +1 -0
  24. package/lib/Button/ButtonOutline.d.ts +1 -0
  25. package/lib/Button/ButtonPrimary.d.ts +1 -0
  26. package/lib/Button/index.js +70 -21
  27. package/lib/Checkbox.d.ts +29 -0
  28. package/lib/Checkbox.js +64 -0
  29. package/lib/CircleOcticon.d.ts +1 -0
  30. package/lib/Details.d.ts +1 -2
  31. package/lib/Details.js +1 -3
  32. package/lib/Dialog.d.ts +3 -2
  33. package/lib/Dropdown.d.ts +6 -66
  34. package/lib/DropdownMenu/DropdownButton.d.ts +2 -1
  35. package/lib/DropdownMenu/index.js +20 -6
  36. package/lib/DropdownStyles.js +26 -18
  37. package/lib/FilterList.d.ts +1 -0
  38. package/lib/FilteredActionList/index.js +12 -4
  39. package/lib/Heading.d.ts +1 -2
  40. package/lib/Heading.js +1 -6
  41. package/lib/NewButton/index.js +12 -5
  42. package/lib/NewButton/types.js +1 -2
  43. package/lib/Overlay.d.ts +5 -3
  44. package/lib/Pagination/index.js +12 -6
  45. package/lib/Portal/index.js +16 -5
  46. package/lib/Position.d.ts +4 -4
  47. package/lib/ProgressBar.d.ts +16 -11
  48. package/lib/ProgressBar.js +6 -10
  49. package/lib/SelectMenu/SelectMenu.d.ts +10 -4
  50. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  51. package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
  52. package/lib/SelectMenu/hooks/useKeyboardNav.js +96 -80
  53. package/lib/SelectMenu/index.js +14 -7
  54. package/lib/SelectPanel/index.js +12 -4
  55. package/lib/Spinner.d.ts +1 -2
  56. package/lib/Spinner.js +1 -3
  57. package/lib/TextInputWithTokens.d.ts +1 -0
  58. package/lib/Token/AvatarToken.d.ts +1 -1
  59. package/lib/Token/IssueLabelToken.d.ts +1 -1
  60. package/lib/Token/Token.d.ts +1 -1
  61. package/lib/Token/index.js +30 -11
  62. package/lib/behaviors/anchoredPosition.js +234 -205
  63. package/lib/behaviors/focusTrap.js +157 -121
  64. package/lib/behaviors/focusZone.js +509 -434
  65. package/lib/behaviors/scrollIntoViewingArea.js +35 -18
  66. package/lib/constants.js +43 -39
  67. package/lib/drafts.js +30 -20
  68. package/lib/hooks/index.js +60 -16
  69. package/lib/hooks/useAnchoredPosition.js +40 -32
  70. package/lib/hooks/useCombinedRefs.js +36 -32
  71. package/lib/hooks/useDialog.js +96 -72
  72. package/lib/hooks/useFocusTrap.js +60 -43
  73. package/lib/hooks/useFocusZone.js +50 -54
  74. package/lib/hooks/useOnEscapePress.js +36 -25
  75. package/lib/hooks/useOpenAndCloseFocus.js +34 -22
  76. package/lib/hooks/useProvidedRefOrCreate.js +14 -10
  77. package/lib/hooks/useProvidedStateOrCreate.js +16 -13
  78. package/lib/hooks/useRenderForcingRef.js +17 -13
  79. package/lib/hooks/useResizeObserver.js +18 -15
  80. package/lib/hooks/useSafeTimeout.js +30 -22
  81. package/lib/hooks/useScrollFlash.js +23 -16
  82. package/lib/index.d.ts +2 -0
  83. package/lib/index.js +652 -163
  84. package/lib/polyfills/eventListenerSignal.js +45 -37
  85. package/lib/sx.js +22 -10
  86. package/lib/theme-preval.js +3169 -64
  87. package/lib/theme.js +12 -3
  88. package/lib/utils/iterateFocusableElements.js +85 -63
  89. package/lib/utils/testing.d.ts +2 -1
  90. package/lib/utils/testing.js +29 -0
  91. package/lib/utils/theme.js +47 -33
  92. package/lib/utils/types/AriaRole.js +1 -2
  93. package/lib/utils/types/ComponentProps.js +1 -2
  94. package/lib/utils/types/Flatten.js +1 -2
  95. package/lib/utils/types/KeyPaths.js +1 -2
  96. package/lib/utils/types/MandateProps.js +1 -16
  97. package/lib/utils/types/Merge.js +1 -2
  98. package/lib/utils/types/index.js +69 -16
  99. package/lib/utils/uniqueId.js +8 -5
  100. package/lib/utils/use-force-update.js +14 -8
  101. package/lib/utils/useIsomorphicLayoutEffect.js +11 -8
  102. package/lib/utils/userAgent.js +12 -8
  103. package/lib-esm/ActionList/Item.js +3 -3
  104. package/lib-esm/ActionList2/Item.js +3 -1
  105. package/lib-esm/ActionList2/List.js +1 -2
  106. package/lib-esm/ActionList2/Selection.js +3 -1
  107. package/lib-esm/Autocomplete/Autocomplete.d.ts +1 -0
  108. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +1 -0
  109. package/lib-esm/Avatar.d.ts +1 -2
  110. package/lib-esm/Avatar.js +2 -2
  111. package/lib-esm/BranchName.d.ts +1 -2
  112. package/lib-esm/BranchName.js +2 -2
  113. package/lib-esm/Button/Button.d.ts +1 -0
  114. package/lib-esm/Button/ButtonClose.d.ts +2 -1
  115. package/lib-esm/Button/ButtonDanger.d.ts +1 -0
  116. package/lib-esm/Button/ButtonInvisible.d.ts +1 -0
  117. package/lib-esm/Button/ButtonOutline.d.ts +1 -0
  118. package/lib-esm/Button/ButtonPrimary.d.ts +1 -0
  119. package/lib-esm/Checkbox.d.ts +29 -0
  120. package/lib-esm/Checkbox.js +44 -0
  121. package/lib-esm/CircleOcticon.d.ts +1 -0
  122. package/lib-esm/Details.d.ts +1 -2
  123. package/lib-esm/Details.js +1 -2
  124. package/lib-esm/Dialog.d.ts +3 -2
  125. package/lib-esm/Dropdown.d.ts +6 -66
  126. package/lib-esm/DropdownMenu/DropdownButton.d.ts +2 -1
  127. package/lib-esm/FilterList.d.ts +1 -0
  128. package/lib-esm/Heading.d.ts +1 -2
  129. package/lib-esm/Heading.js +2 -6
  130. package/lib-esm/Overlay.d.ts +5 -3
  131. package/lib-esm/Position.d.ts +4 -4
  132. package/lib-esm/ProgressBar.d.ts +16 -11
  133. package/lib-esm/ProgressBar.js +7 -11
  134. package/lib-esm/SelectMenu/SelectMenu.d.ts +10 -4
  135. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  136. package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
  137. package/lib-esm/Spinner.d.ts +1 -2
  138. package/lib-esm/Spinner.js +1 -2
  139. package/lib-esm/TextInputWithTokens.d.ts +1 -0
  140. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  141. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  142. package/lib-esm/Token/Token.d.ts +1 -1
  143. package/lib-esm/index.d.ts +2 -0
  144. package/lib-esm/index.js +1 -0
  145. package/lib-esm/theme-preval.js +446 -0
  146. package/lib-esm/utils/testing.d.ts +2 -1
  147. package/lib-esm/utils/testing.js +24 -0
  148. package/package.json +4 -5
  149. package/lib/ActionList/Divider.jsx +0 -29
  150. package/lib/ActionList/Group.jsx +0 -23
  151. package/lib/ActionList/Header.jsx +0 -66
  152. package/lib/ActionList/Item.jsx +0 -288
  153. package/lib/ActionList/List.jsx +0 -138
  154. package/lib/ActionList2/Description.jsx +0 -29
  155. package/lib/ActionList2/Divider.jsx +0 -22
  156. package/lib/ActionList2/Group.jsx +0 -54
  157. package/lib/ActionList2/Header.d.ts +0 -26
  158. package/lib/ActionList2/Header.js +0 -55
  159. package/lib/ActionList2/Header.jsx +0 -36
  160. package/lib/ActionList2/Item.jsx +0 -174
  161. package/lib/ActionList2/LinkItem.jsx +0 -28
  162. package/lib/ActionList2/List.jsx +0 -41
  163. package/lib/ActionList2/Selection.jsx +0 -50
  164. package/lib/ActionList2/Visuals.jsx +0 -48
  165. package/lib/ActionMenu.jsx +0 -73
  166. package/lib/AnchoredOverlay/AnchoredOverlay.jsx +0 -100
  167. package/lib/Autocomplete/Autocomplete.jsx +0 -100
  168. package/lib/Autocomplete/AutocompleteContext.jsx +0 -5
  169. package/lib/Autocomplete/AutocompleteInput.jsx +0 -113
  170. package/lib/Autocomplete/AutocompleteMenu.jsx +0 -190
  171. package/lib/Autocomplete/AutocompleteOverlay.jsx +0 -55
  172. package/lib/Avatar.jsx +0 -34
  173. package/lib/AvatarPair.jsx +0 -29
  174. package/lib/AvatarStack.jsx +0 -151
  175. package/lib/BaseStyles.jsx +0 -65
  176. package/lib/BorderBox.jsx +0 -18
  177. package/lib/Box.jsx +0 -10
  178. package/lib/BranchName.jsx +0 -20
  179. package/lib/Breadcrumbs.jsx +0 -71
  180. package/lib/Button/Button.jsx +0 -40
  181. package/lib/Button/ButtonBase.jsx +0 -33
  182. package/lib/Button/ButtonClose.jsx +0 -53
  183. package/lib/Button/ButtonDanger.jsx +0 -43
  184. package/lib/Button/ButtonGroup.jsx +0 -55
  185. package/lib/Button/ButtonInvisible.jsx +0 -32
  186. package/lib/Button/ButtonOutline.jsx +0 -43
  187. package/lib/Button/ButtonPrimary.jsx +0 -42
  188. package/lib/Button/ButtonStyles.jsx +0 -37
  189. package/lib/Button/ButtonTableList.jsx +0 -46
  190. package/lib/Caret.jsx +0 -93
  191. package/lib/CircleBadge.jsx +0 -42
  192. package/lib/CircleOcticon.jsx +0 -21
  193. package/lib/CounterLabel.jsx +0 -43
  194. package/lib/Details.jsx +0 -21
  195. package/lib/Dialog/ConfirmationDialog.jsx +0 -146
  196. package/lib/Dialog/Dialog.jsx +0 -279
  197. package/lib/Dialog.jsx +0 -129
  198. package/lib/Dropdown.jsx +0 -131
  199. package/lib/DropdownMenu/DropdownButton.jsx +0 -14
  200. package/lib/DropdownMenu/DropdownMenu.jsx +0 -70
  201. package/lib/FilterList.jsx +0 -59
  202. package/lib/FilteredActionList/FilteredActionList.jsx +0 -100
  203. package/lib/FilteredSearch.jsx +0 -28
  204. package/lib/Flash.jsx +0 -69
  205. package/lib/Flex.jsx +0 -15
  206. package/lib/FormGroup.jsx +0 -22
  207. package/lib/Grid.jsx +0 -15
  208. package/lib/Header.jsx +0 -83
  209. package/lib/Heading.jsx +0 -21
  210. package/lib/Label.jsx +0 -82
  211. package/lib/LabelGroup.jsx +0 -18
  212. package/lib/Link.jsx +0 -36
  213. package/lib/NewButton/button-counter.jsx +0 -14
  214. package/lib/NewButton/button.jsx +0 -279
  215. package/lib/Overlay.jsx +0 -154
  216. package/lib/Pagehead.jsx +0 -17
  217. package/lib/Pagination/Pagination.jsx +0 -161
  218. package/lib/Pagination/model.jsx +0 -174
  219. package/lib/PointerBox.jsx +0 -25
  220. package/lib/Popover.jsx +0 -202
  221. package/lib/Portal/Portal.jsx +0 -79
  222. package/lib/Position.jsx +0 -46
  223. package/lib/ProgressBar.jsx +0 -39
  224. package/lib/SelectMenu/SelectMenu.jsx +0 -112
  225. package/lib/SelectMenu/SelectMenuContext.jsx +0 -5
  226. package/lib/SelectMenu/SelectMenuDivider.jsx +0 -42
  227. package/lib/SelectMenu/SelectMenuFilter.jsx +0 -58
  228. package/lib/SelectMenu/SelectMenuFooter.jsx +0 -45
  229. package/lib/SelectMenu/SelectMenuHeader.jsx +0 -42
  230. package/lib/SelectMenu/SelectMenuItem.jsx +0 -142
  231. package/lib/SelectMenu/SelectMenuList.jsx +0 -59
  232. package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +0 -22
  233. package/lib/SelectMenu/SelectMenuModal.jsx +0 -118
  234. package/lib/SelectMenu/SelectMenuTab.jsx +0 -92
  235. package/lib/SelectMenu/SelectMenuTabPanel.jsx +0 -42
  236. package/lib/SelectMenu/SelectMenuTabs.jsx +0 -57
  237. package/lib/SelectPanel/SelectPanel.jsx +0 -105
  238. package/lib/SideNav.jsx +0 -173
  239. package/lib/Spinner.jsx +0 -35
  240. package/lib/StateLabel.jsx +0 -93
  241. package/lib/StyledOcticon.jsx +0 -18
  242. package/lib/SubNav.jsx +0 -101
  243. package/lib/TabNav.jsx +0 -58
  244. package/lib/Text.jsx +0 -14
  245. package/lib/TextInput.jsx +0 -23
  246. package/lib/TextInputWithTokens.jsx +0 -218
  247. package/lib/ThemeProvider.jsx +0 -130
  248. package/lib/Timeline.jsx +0 -123
  249. package/lib/Token/AvatarToken.jsx +0 -54
  250. package/lib/Token/IssueLabelToken.jsx +0 -125
  251. package/lib/Token/Token.jsx +0 -103
  252. package/lib/Token/TokenBase.jsx +0 -88
  253. package/lib/Token/_RemoveTokenButton.jsx +0 -108
  254. package/lib/Token/_TokenTextContainer.jsx +0 -49
  255. package/lib/Tooltip.jsx +0 -246
  256. package/lib/Truncate.jsx +0 -24
  257. package/lib/UnderlineNav.jsx +0 -88
  258. package/lib/_TextInputWrapper.jsx +0 -120
  259. package/lib/_UnstyledTextInput.jsx +0 -22
  260. package/lib/hooks/useDetails.jsx +0 -39
  261. package/lib/hooks/useOnOutsideClick.jsx +0 -61
  262. package/lib/hooks/useOverlay.jsx +0 -15
  263. package/lib/utils/create-slots.jsx +0 -65
  264. package/lib/utils/deprecate.jsx +0 -59
  265. package/lib/utils/isNumeric.jsx +0 -7
  266. package/lib/utils/ssr.jsx +0 -6
  267. package/lib/utils/test-deprecations.jsx +0 -20
  268. package/lib/utils/test-helpers.jsx +0 -8
  269. package/lib/utils/test-matchers.jsx +0 -100
  270. package/lib/utils/testing.jsx +0 -206
  271. package/lib-esm/ActionList2/Header.d.ts +0 -26
  272. package/lib-esm/ActionList2/Header.js +0 -44
@@ -1,52 +1,69 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.useFocusTrap = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const focusTrap_1 = require("../behaviors/focusTrap");
9
- const useProvidedRefOrCreate_1 = require("./useProvidedRefOrCreate");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useFocusTrap = useFocusTrap;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _focusTrap = require("../behaviors/focusTrap");
11
+
12
+ var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
10
16
  /**
11
17
  * Hook used to trap focus inside a container. Returns a ref that can be added to the container
12
18
  * that should trap focus.
13
19
  * @param settings {FocusTrapHookSettings}
14
20
  */
15
21
  function useFocusTrap(settings, dependencies = []) {
16
- const containerRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(settings?.containerRef);
17
- const initialFocusRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(settings?.initialFocusRef);
18
- const disabled = settings?.disabled;
19
- const abortController = react_1.default.useRef();
20
- const previousFocusedElement = react_1.default.useRef(null);
21
- // If we are enabling a focus trap and haven't already stored the previously focused element
22
- // go ahead an do that so we can restore later when the trap is disabled.
23
- if (!previousFocusedElement.current && !settings?.disabled) {
24
- previousFocusedElement.current = document.activeElement;
22
+ const containerRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings === null || settings === void 0 ? void 0 : settings.containerRef);
23
+ const initialFocusRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings === null || settings === void 0 ? void 0 : settings.initialFocusRef);
24
+ const disabled = settings === null || settings === void 0 ? void 0 : settings.disabled;
25
+
26
+ const abortController = _react.default.useRef();
27
+
28
+ const previousFocusedElement = _react.default.useRef(null); // If we are enabling a focus trap and haven't already stored the previously focused element
29
+ // go ahead an do that so we can restore later when the trap is disabled.
30
+
31
+
32
+ if (!previousFocusedElement.current && !(settings !== null && settings !== void 0 && settings.disabled)) {
33
+ previousFocusedElement.current = document.activeElement;
34
+ } // This function removes the event listeners that enable the focus trap and restores focus
35
+ // to the previously-focused element (if necessary).
36
+
37
+
38
+ function disableTrap() {
39
+ var _abortController$curr;
40
+
41
+ (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
42
+
43
+ if (settings !== null && settings !== void 0 && settings.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
44
+ previousFocusedElement.current.focus();
45
+ previousFocusedElement.current = null;
25
46
  }
26
- // This function removes the event listeners that enable the focus trap and restores focus
27
- // to the previously-focused element (if necessary).
28
- function disableTrap() {
29
- abortController.current?.abort();
30
- if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
31
- previousFocusedElement.current.focus();
32
- previousFocusedElement.current = null;
33
- }
47
+ }
48
+
49
+ _react.default.useEffect(() => {
50
+ if (containerRef.current instanceof HTMLElement) {
51
+ if (!disabled) {
52
+ var _initialFocusRef$curr;
53
+
54
+ abortController.current = (0, _focusTrap.focusTrap)(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : undefined);
55
+ return () => {
56
+ disableTrap();
57
+ };
58
+ } else {
59
+ disableTrap();
60
+ }
34
61
  }
35
- react_1.default.useEffect(() => {
36
- if (containerRef.current instanceof HTMLElement) {
37
- if (!disabled) {
38
- abortController.current = focusTrap_1.focusTrap(containerRef.current, initialFocusRef.current ?? undefined);
39
- return () => {
40
- disableTrap();
41
- };
42
- }
43
- else {
44
- disableTrap();
45
- }
46
- }
47
- },
48
- // eslint-disable-next-line react-hooks/exhaustive-deps
49
- [containerRef, initialFocusRef, disabled, ...dependencies]);
50
- return { containerRef, initialFocusRef };
51
- }
52
- exports.useFocusTrap = useFocusTrap;
62
+ }, // eslint-disable-next-line react-hooks/exhaustive-deps
63
+ [containerRef, initialFocusRef, disabled, ...dependencies]);
64
+
65
+ return {
66
+ containerRef,
67
+ initialFocusRef
68
+ };
69
+ }
@@ -1,57 +1,53 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
13
5
  });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- Object.defineProperty(exports, "__esModule", { value: true });
22
- exports.useFocusZone = void 0;
23
- const react_1 = __importStar(require("react"));
24
- const focusZone_1 = require("../behaviors/focusZone");
25
- const useProvidedRefOrCreate_1 = require("./useProvidedRefOrCreate");
26
- function useFocusZone(settings = {}, dependencies = []) {
27
- const containerRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(settings.containerRef);
28
- const useActiveDescendant = !!settings.activeDescendantFocus;
29
- const passedActiveDescendantRef = typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus
30
- ? undefined
31
- : settings.activeDescendantFocus;
32
- const activeDescendantControlRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(passedActiveDescendantRef);
33
- const disabled = settings.disabled;
34
- const abortController = react_1.default.useRef();
35
- react_1.useEffect(() => {
36
- if (containerRef.current instanceof HTMLElement &&
37
- (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
38
- if (!disabled) {
39
- const vanillaSettings = {
40
- ...settings,
41
- activeDescendantControl: activeDescendantControlRef.current ?? undefined
42
- };
43
- abortController.current = focusZone_1.focusZone(containerRef.current, vanillaSettings);
44
- return () => {
45
- abortController.current?.abort();
46
- };
47
- }
48
- else {
49
- abortController.current?.abort();
50
- }
51
- }
52
- },
53
- // eslint-disable-next-line react-hooks/exhaustive-deps
54
- [disabled, ...dependencies]);
55
- return { containerRef, activeDescendantControlRef };
56
- }
57
6
  exports.useFocusZone = useFocusZone;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _focusZone = require("../behaviors/focusZone");
11
+
12
+ var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
13
+
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+
16
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
+
18
+ function useFocusZone(settings = {}, dependencies = []) {
19
+ const containerRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(settings.containerRef);
20
+ const useActiveDescendant = !!settings.activeDescendantFocus;
21
+ const passedActiveDescendantRef = typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus ? undefined : settings.activeDescendantFocus;
22
+ const activeDescendantControlRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(passedActiveDescendantRef);
23
+ const disabled = settings.disabled;
24
+
25
+ const abortController = _react.default.useRef();
26
+
27
+ (0, _react.useEffect)(() => {
28
+ if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
29
+ if (!disabled) {
30
+ var _activeDescendantCont;
31
+
32
+ const vanillaSettings = { ...settings,
33
+ activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : undefined
34
+ };
35
+ abortController.current = (0, _focusZone.focusZone)(containerRef.current, vanillaSettings);
36
+ return () => {
37
+ var _abortController$curr;
38
+
39
+ (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
40
+ };
41
+ } else {
42
+ var _abortController$curr2;
43
+
44
+ (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 ? void 0 : _abortController$curr2.abort();
45
+ }
46
+ }
47
+ }, // eslint-disable-next-line react-hooks/exhaustive-deps
48
+ [disabled, ...dependencies]);
49
+ return {
50
+ containerRef,
51
+ activeDescendantControlRef
52
+ };
53
+ }
@@ -1,22 +1,28 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
3
6
  exports.useOnEscapePress = void 0;
4
- const react_1 = require("react");
7
+
8
+ var _react = require("react");
9
+
5
10
  const handlers = [];
6
11
  /**
7
12
  * Calls all handlers in reverse order
8
13
  * @param event The KeyboardEvent generated by the Escape keydown.
9
14
  */
15
+
10
16
  function handleEscape(event) {
11
- if (event.key === 'Escape' && !event.defaultPrevented) {
12
- for (let i = handlers.length - 1; i >= 0; --i) {
13
- handlers[i](event);
14
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
15
- if (event.defaultPrevented) {
16
- break;
17
- }
18
- }
17
+ if (event.key === 'Escape' && !event.defaultPrevented) {
18
+ for (let i = handlers.length - 1; i >= 0; --i) {
19
+ handlers[i](event); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
20
+
21
+ if (event.defaultPrevented) {
22
+ break;
23
+ }
19
24
  }
25
+ }
20
26
  }
21
27
  /**
22
28
  * Sets up a `keydown` listener on `window.document`. If
@@ -39,20 +45,25 @@ function handleEscape(event) {
39
45
  * `onEscape` callback for memoization. Omit this param if the callback is already
40
46
  * memoized. See `React.useCallback` for more info on memoization.
41
47
  */
48
+
49
+
42
50
  const useOnEscapePress = (onEscape, callbackDependencies = [onEscape]) => {
43
- // eslint-disable-next-line react-hooks/exhaustive-deps
44
- const escapeCallback = react_1.useCallback(onEscape, callbackDependencies);
45
- react_1.useEffect(() => {
46
- if (handlers.length === 0) {
47
- document.addEventListener('keydown', handleEscape);
48
- }
49
- handlers.push(escapeCallback);
50
- return () => {
51
- handlers.splice(handlers.findIndex(h => h === escapeCallback), 1);
52
- if (handlers.length === 0) {
53
- document.removeEventListener('keydown', handleEscape);
54
- }
55
- };
56
- }, [escapeCallback]);
51
+ // eslint-disable-next-line react-hooks/exhaustive-deps
52
+ const escapeCallback = (0, _react.useCallback)(onEscape, callbackDependencies);
53
+ (0, _react.useEffect)(() => {
54
+ if (handlers.length === 0) {
55
+ document.addEventListener('keydown', handleEscape);
56
+ }
57
+
58
+ handlers.push(escapeCallback);
59
+ return () => {
60
+ handlers.splice(handlers.findIndex(h => h === escapeCallback), 1);
61
+
62
+ if (handlers.length === 0) {
63
+ document.removeEventListener('keydown', handleEscape);
64
+ }
65
+ };
66
+ }, [escapeCallback]);
57
67
  };
58
- exports.useOnEscapePress = useOnEscapePress;
68
+
69
+ exports.useOnEscapePress = useOnEscapePress;
@@ -1,24 +1,36 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useOpenAndCloseFocus = void 0;
4
- const react_1 = require("react");
5
- const iterateFocusableElements_1 = require("../utils/iterateFocusableElements");
6
- function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen }) {
7
- react_1.useEffect(() => {
8
- if (preventFocusOnOpen) {
9
- return;
10
- }
11
- const returnRef = returnFocusRef.current;
12
- if (initialFocusRef && initialFocusRef.current) {
13
- initialFocusRef.current.focus();
14
- }
15
- else if (containerRef.current) {
16
- const firstItem = iterateFocusableElements_1.iterateFocusableElements(containerRef.current).next().value;
17
- firstItem?.focus();
18
- }
19
- return function () {
20
- returnRef?.focus();
21
- };
22
- }, [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen]);
23
- }
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
24
6
  exports.useOpenAndCloseFocus = useOpenAndCloseFocus;
7
+
8
+ var _react = require("react");
9
+
10
+ var _iterateFocusableElements = require("../utils/iterateFocusableElements");
11
+
12
+ function useOpenAndCloseFocus({
13
+ initialFocusRef,
14
+ returnFocusRef,
15
+ containerRef,
16
+ preventFocusOnOpen
17
+ }) {
18
+ (0, _react.useEffect)(() => {
19
+ if (preventFocusOnOpen) {
20
+ return;
21
+ }
22
+
23
+ const returnRef = returnFocusRef.current;
24
+
25
+ if (initialFocusRef && initialFocusRef.current) {
26
+ initialFocusRef.current.focus();
27
+ } else if (containerRef.current) {
28
+ const firstItem = (0, _iterateFocusableElements.iterateFocusableElements)(containerRef.current).next().value;
29
+ firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
30
+ }
31
+
32
+ return function () {
33
+ returnRef === null || returnRef === void 0 ? void 0 : returnRef.focus();
34
+ };
35
+ }, [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen]);
36
+ }
@@ -1,10 +1,14 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.useProvidedRefOrCreate = void 0;
7
- const react_1 = __importDefault(require("react"));
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useProvidedRefOrCreate = useProvidedRefOrCreate;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
8
12
  /**
9
13
  * There are some situations where we only want to create a new ref if one is not provided to a component
10
14
  * or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`
@@ -14,7 +18,7 @@ const react_1 = __importDefault(require("react"));
14
18
  * @type TRef The type of the RefObject which should be created.
15
19
  */
16
20
  function useProvidedRefOrCreate(providedRef) {
17
- const createdRef = react_1.default.useRef(null);
18
- return providedRef ?? createdRef;
19
- }
20
- exports.useProvidedRefOrCreate = useProvidedRefOrCreate;
21
+ const createdRef = _react.default.useRef(null);
22
+
23
+ return providedRef !== null && providedRef !== void 0 ? providedRef : createdRef;
24
+ }
@@ -1,7 +1,12 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useProvidedStateOrCreate = void 0;
4
- const react_1 = require("react");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useProvidedStateOrCreate = useProvidedStateOrCreate;
7
+
8
+ var _react = require("react");
9
+
5
10
  /**
6
11
  * There are some situations where we want to give users the option to control state externally with their own state handlers
7
12
  * or default to using internal state handlers. Because of the 'rules-of-hooks', we cannot conditionally make a call to `React.useState`
@@ -12,13 +17,11 @@ const react_1 = require("react");
12
17
  * @param defaultState The defaultState to use, if using internal state.
13
18
  */
14
19
  function useProvidedStateOrCreate(externalState, setExternalState, defaultState) {
15
- const [internalState, setInternalState] = react_1.useState(defaultState);
16
- const state = externalState ?? internalState;
17
- const setState = react_1.useCallback((s) => {
18
- setInternalState(s);
19
- if (setExternalState)
20
- setExternalState(s);
21
- }, [setExternalState]);
22
- return [state, setState];
23
- }
24
- exports.useProvidedStateOrCreate = useProvidedStateOrCreate;
20
+ const [internalState, setInternalState] = (0, _react.useState)(defaultState);
21
+ const state = externalState !== null && externalState !== void 0 ? externalState : internalState;
22
+ const setState = (0, _react.useCallback)(s => {
23
+ setInternalState(s);
24
+ if (setExternalState) setExternalState(s);
25
+ }, [setExternalState]);
26
+ return [state, setState];
27
+ }
@@ -1,7 +1,12 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useRenderForcingRef = void 0;
4
- const react_1 = require("react");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useRenderForcingRef = useRenderForcingRef;
7
+
8
+ var _react = require("react");
9
+
5
10
  /**
6
11
  * There are certain situations where a ref might be set after the current render cycle for a
7
12
  * component has finished. e.g. a forward ref from a conditionally rendered child component.
@@ -9,13 +14,12 @@ const react_1 = require("react");
9
14
  * @type TRef The type of the RefObject which should be created.
10
15
  */
11
16
  function useRenderForcingRef() {
12
- const [refCurrent, setRefCurrent] = react_1.useState(null);
13
- const ref = react_1.useRef(null);
14
- ref.current = refCurrent;
15
- const setRef = react_1.useCallback((newRef) => {
16
- ref.current = newRef;
17
- setRefCurrent(newRef);
18
- }, [ref]);
19
- return [ref, setRef];
20
- }
21
- exports.useRenderForcingRef = useRenderForcingRef;
17
+ const [refCurrent, setRefCurrent] = (0, _react.useState)(null);
18
+ const ref = (0, _react.useRef)(null);
19
+ ref.current = refCurrent;
20
+ const setRef = (0, _react.useCallback)(newRef => {
21
+ ref.current = newRef;
22
+ setRefCurrent(newRef);
23
+ }, [ref]);
24
+ return [ref, setRef];
25
+ }
@@ -1,17 +1,20 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.useResizeObserver = void 0;
7
- const useIsomorphicLayoutEffect_1 = __importDefault(require("../utils/useIsomorphicLayoutEffect"));
8
- function useResizeObserver(callback) {
9
- useIsomorphicLayoutEffect_1.default(() => {
10
- const observer = new window.ResizeObserver(() => callback());
11
- observer.observe(document.documentElement);
12
- return () => {
13
- observer.disconnect();
14
- };
15
- }, [callback]);
16
- }
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
17
6
  exports.useResizeObserver = useResizeObserver;
7
+
8
+ var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ function useResizeObserver(callback) {
13
+ (0, _useIsomorphicLayoutEffect.default)(() => {
14
+ const observer = new window.ResizeObserver(() => callback());
15
+ observer.observe(document.documentElement);
16
+ return () => {
17
+ observer.disconnect();
18
+ };
19
+ }, [callback]);
20
+ }
@@ -1,30 +1,38 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const react_1 = require("react");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = useSafeTimeout;
7
+
8
+ var _react = require("react");
9
+
4
10
  /**
5
11
  * Safely call `setTimeout` and `clearTimeout` within a component.
6
12
  *
7
13
  * This hook ensures that all timeouts are cleared when the component unmounts.
8
14
  */
9
15
  function useSafeTimeout() {
10
- const timers = react_1.useRef(new Set());
11
- const safeSetTimeout = react_1.useCallback((handler, timeout, ...args) => {
12
- const id = window.setTimeout(handler, timeout, ...args);
13
- timers.current.add(id);
14
- return id;
15
- }, []);
16
- const safeClearTimeout = react_1.useCallback((id) => {
16
+ const timers = (0, _react.useRef)(new Set());
17
+ const safeSetTimeout = (0, _react.useCallback)((handler, timeout, ...args) => {
18
+ const id = window.setTimeout(handler, timeout, ...args);
19
+ timers.current.add(id);
20
+ return id;
21
+ }, []);
22
+ const safeClearTimeout = (0, _react.useCallback)(id => {
23
+ clearTimeout(id);
24
+ timers.current.delete(id);
25
+ }, []);
26
+ (0, _react.useEffect)(() => {
27
+ return () => {
28
+ // eslint-disable-next-line react-hooks/exhaustive-deps
29
+ for (const id of timers.current) {
17
30
  clearTimeout(id);
18
- timers.current.delete(id);
19
- }, []);
20
- react_1.useEffect(() => {
21
- return () => {
22
- // eslint-disable-next-line react-hooks/exhaustive-deps
23
- for (const id of timers.current) {
24
- clearTimeout(id);
25
- }
26
- };
27
- }, []);
28
- return { safeSetTimeout, safeClearTimeout };
29
- }
30
- exports.default = useSafeTimeout;
31
+ }
32
+ };
33
+ }, []);
34
+ return {
35
+ safeSetTimeout,
36
+ safeClearTimeout
37
+ };
38
+ }
@@ -1,22 +1,29 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const react_1 = require("react");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = useScrollFlash;
7
+
8
+ var _react = require("react");
9
+
4
10
  /**
5
11
  * This hook will flash the scrollbars for a ref of a container that has scrollable overflow
6
12
  * @param scrollContainerRef The ref of the scrollable content
7
13
  */
8
14
  function useScrollFlash(scrollContainerRef) {
9
- // https://adxlv.computer/projects/flash-scrollers/
10
- react_1.useEffect(() => {
11
- const scrollContainer = scrollContainerRef.current;
12
- if (!scrollContainer) {
13
- return;
14
- }
15
- const currentScroll = scrollContainer.scrollTop;
16
- const maxScroll = scrollContainer.scrollHeight;
17
- const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
18
- scrollContainer.scrollTop = altScroll;
19
- scrollContainer.scrollTop = currentScroll;
20
- }, [scrollContainerRef]);
21
- }
22
- exports.default = useScrollFlash;
15
+ // https://adxlv.computer/projects/flash-scrollers/
16
+ (0, _react.useEffect)(() => {
17
+ const scrollContainer = scrollContainerRef.current;
18
+
19
+ if (!scrollContainer) {
20
+ return;
21
+ }
22
+
23
+ const currentScroll = scrollContainer.scrollTop;
24
+ const maxScroll = scrollContainer.scrollHeight;
25
+ const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
26
+ scrollContainer.scrollTop = altScroll;
27
+ scrollContainer.scrollTop = currentScroll;
28
+ }, [scrollContainerRef]);
29
+ }
package/lib/index.d.ts CHANGED
@@ -115,4 +115,6 @@ export { default as Truncate } from './Truncate';
115
115
  export type { TruncateProps } from './Truncate';
116
116
  export { default as UnderlineNav } from './UnderlineNav';
117
117
  export type { UnderlineNavProps, UnderlineNavLinkProps } from './UnderlineNav';
118
+ export { default as Checkbox } from './Checkbox';
119
+ export type { CheckboxProps } from './Checkbox';
118
120
  export { SSRProvider, useSSRSafeId } from './utils/ssr';