@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.
- package/CHANGELOG.md +34 -2
- package/dist/browser.esm.js +186 -183
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +190 -187
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Item.js +3 -3
- package/lib/ActionList/index.js +23 -12
- package/lib/ActionList2/Item.js +3 -1
- package/lib/ActionList2/List.js +1 -2
- package/lib/ActionList2/Selection.js +3 -1
- package/lib/ActionList2/index.js +41 -23
- package/lib/AnchoredOverlay/index.js +12 -4
- package/lib/Autocomplete/Autocomplete.d.ts +1 -0
- package/lib/Autocomplete/AutocompleteInput.d.ts +1 -0
- package/lib/Autocomplete/index.js +14 -7
- package/lib/Avatar.d.ts +1 -2
- package/lib/Avatar.js +1 -1
- package/lib/BranchName.d.ts +1 -2
- package/lib/BranchName.js +1 -1
- package/lib/Button/Button.d.ts +1 -0
- package/lib/Button/ButtonClose.d.ts +2 -1
- package/lib/Button/ButtonDanger.d.ts +1 -0
- package/lib/Button/ButtonInvisible.d.ts +1 -0
- package/lib/Button/ButtonOutline.d.ts +1 -0
- package/lib/Button/ButtonPrimary.d.ts +1 -0
- package/lib/Button/index.js +70 -21
- package/lib/Checkbox.d.ts +29 -0
- package/lib/Checkbox.js +64 -0
- package/lib/CircleOcticon.d.ts +1 -0
- package/lib/Details.d.ts +1 -2
- package/lib/Details.js +1 -3
- package/lib/Dialog.d.ts +3 -2
- package/lib/Dropdown.d.ts +6 -66
- package/lib/DropdownMenu/DropdownButton.d.ts +2 -1
- package/lib/DropdownMenu/index.js +20 -6
- package/lib/DropdownStyles.js +26 -18
- package/lib/FilterList.d.ts +1 -0
- package/lib/FilteredActionList/index.js +12 -4
- package/lib/Heading.d.ts +1 -2
- package/lib/Heading.js +1 -6
- package/lib/NewButton/index.js +12 -5
- package/lib/NewButton/types.js +1 -2
- package/lib/Overlay.d.ts +5 -3
- package/lib/Pagination/index.js +12 -6
- package/lib/Portal/index.js +16 -5
- package/lib/Position.d.ts +4 -4
- package/lib/ProgressBar.d.ts +16 -11
- package/lib/ProgressBar.js +6 -10
- package/lib/SelectMenu/SelectMenu.d.ts +10 -4
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/SelectMenu/hooks/useKeyboardNav.js +96 -80
- package/lib/SelectMenu/index.js +14 -7
- package/lib/SelectPanel/index.js +12 -4
- package/lib/Spinner.d.ts +1 -2
- package/lib/Spinner.js +1 -3
- package/lib/TextInputWithTokens.d.ts +1 -0
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/Token.d.ts +1 -1
- package/lib/Token/index.js +30 -11
- package/lib/behaviors/anchoredPosition.js +234 -205
- package/lib/behaviors/focusTrap.js +157 -121
- package/lib/behaviors/focusZone.js +509 -434
- package/lib/behaviors/scrollIntoViewingArea.js +35 -18
- package/lib/constants.js +43 -39
- package/lib/drafts.js +30 -20
- package/lib/hooks/index.js +60 -16
- package/lib/hooks/useAnchoredPosition.js +40 -32
- package/lib/hooks/useCombinedRefs.js +36 -32
- package/lib/hooks/useDialog.js +96 -72
- package/lib/hooks/useFocusTrap.js +60 -43
- package/lib/hooks/useFocusZone.js +50 -54
- package/lib/hooks/useOnEscapePress.js +36 -25
- package/lib/hooks/useOpenAndCloseFocus.js +34 -22
- package/lib/hooks/useProvidedRefOrCreate.js +14 -10
- package/lib/hooks/useProvidedStateOrCreate.js +16 -13
- package/lib/hooks/useRenderForcingRef.js +17 -13
- package/lib/hooks/useResizeObserver.js +18 -15
- package/lib/hooks/useSafeTimeout.js +30 -22
- package/lib/hooks/useScrollFlash.js +23 -16
- package/lib/index.d.ts +2 -0
- package/lib/index.js +652 -163
- package/lib/polyfills/eventListenerSignal.js +45 -37
- package/lib/sx.js +22 -10
- package/lib/theme-preval.js +3169 -64
- package/lib/theme.js +12 -3
- package/lib/utils/iterateFocusableElements.js +85 -63
- package/lib/utils/testing.d.ts +2 -1
- package/lib/utils/testing.js +29 -0
- package/lib/utils/theme.js +47 -33
- package/lib/utils/types/AriaRole.js +1 -2
- package/lib/utils/types/ComponentProps.js +1 -2
- package/lib/utils/types/Flatten.js +1 -2
- package/lib/utils/types/KeyPaths.js +1 -2
- package/lib/utils/types/MandateProps.js +1 -16
- package/lib/utils/types/Merge.js +1 -2
- package/lib/utils/types/index.js +69 -16
- package/lib/utils/uniqueId.js +8 -5
- package/lib/utils/use-force-update.js +14 -8
- package/lib/utils/useIsomorphicLayoutEffect.js +11 -8
- package/lib/utils/userAgent.js +12 -8
- package/lib-esm/ActionList/Item.js +3 -3
- package/lib-esm/ActionList2/Item.js +3 -1
- package/lib-esm/ActionList2/List.js +1 -2
- package/lib-esm/ActionList2/Selection.js +3 -1
- package/lib-esm/Autocomplete/Autocomplete.d.ts +1 -0
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +1 -0
- package/lib-esm/Avatar.d.ts +1 -2
- package/lib-esm/Avatar.js +2 -2
- package/lib-esm/BranchName.d.ts +1 -2
- package/lib-esm/BranchName.js +2 -2
- package/lib-esm/Button/Button.d.ts +1 -0
- package/lib-esm/Button/ButtonClose.d.ts +2 -1
- package/lib-esm/Button/ButtonDanger.d.ts +1 -0
- package/lib-esm/Button/ButtonInvisible.d.ts +1 -0
- package/lib-esm/Button/ButtonOutline.d.ts +1 -0
- package/lib-esm/Button/ButtonPrimary.d.ts +1 -0
- package/lib-esm/Checkbox.d.ts +29 -0
- package/lib-esm/Checkbox.js +44 -0
- package/lib-esm/CircleOcticon.d.ts +1 -0
- package/lib-esm/Details.d.ts +1 -2
- package/lib-esm/Details.js +1 -2
- package/lib-esm/Dialog.d.ts +3 -2
- package/lib-esm/Dropdown.d.ts +6 -66
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +2 -1
- package/lib-esm/FilterList.d.ts +1 -0
- package/lib-esm/Heading.d.ts +1 -2
- package/lib-esm/Heading.js +2 -6
- package/lib-esm/Overlay.d.ts +5 -3
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/ProgressBar.d.ts +16 -11
- package/lib-esm/ProgressBar.js +7 -11
- package/lib-esm/SelectMenu/SelectMenu.d.ts +10 -4
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/Spinner.d.ts +1 -2
- package/lib-esm/Spinner.js +1 -2
- package/lib-esm/TextInputWithTokens.d.ts +1 -0
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/index.d.ts +2 -0
- package/lib-esm/index.js +1 -0
- package/lib-esm/theme-preval.js +446 -0
- package/lib-esm/utils/testing.d.ts +2 -1
- package/lib-esm/utils/testing.js +24 -0
- package/package.json +4 -5
- package/lib/ActionList/Divider.jsx +0 -29
- package/lib/ActionList/Group.jsx +0 -23
- package/lib/ActionList/Header.jsx +0 -66
- package/lib/ActionList/Item.jsx +0 -288
- package/lib/ActionList/List.jsx +0 -138
- package/lib/ActionList2/Description.jsx +0 -29
- package/lib/ActionList2/Divider.jsx +0 -22
- package/lib/ActionList2/Group.jsx +0 -54
- package/lib/ActionList2/Header.d.ts +0 -26
- package/lib/ActionList2/Header.js +0 -55
- package/lib/ActionList2/Header.jsx +0 -36
- package/lib/ActionList2/Item.jsx +0 -174
- package/lib/ActionList2/LinkItem.jsx +0 -28
- package/lib/ActionList2/List.jsx +0 -41
- package/lib/ActionList2/Selection.jsx +0 -50
- package/lib/ActionList2/Visuals.jsx +0 -48
- package/lib/ActionMenu.jsx +0 -73
- package/lib/AnchoredOverlay/AnchoredOverlay.jsx +0 -100
- package/lib/Autocomplete/Autocomplete.jsx +0 -100
- package/lib/Autocomplete/AutocompleteContext.jsx +0 -5
- package/lib/Autocomplete/AutocompleteInput.jsx +0 -113
- package/lib/Autocomplete/AutocompleteMenu.jsx +0 -190
- package/lib/Autocomplete/AutocompleteOverlay.jsx +0 -55
- package/lib/Avatar.jsx +0 -34
- package/lib/AvatarPair.jsx +0 -29
- package/lib/AvatarStack.jsx +0 -151
- package/lib/BaseStyles.jsx +0 -65
- package/lib/BorderBox.jsx +0 -18
- package/lib/Box.jsx +0 -10
- package/lib/BranchName.jsx +0 -20
- package/lib/Breadcrumbs.jsx +0 -71
- package/lib/Button/Button.jsx +0 -40
- package/lib/Button/ButtonBase.jsx +0 -33
- package/lib/Button/ButtonClose.jsx +0 -53
- package/lib/Button/ButtonDanger.jsx +0 -43
- package/lib/Button/ButtonGroup.jsx +0 -55
- package/lib/Button/ButtonInvisible.jsx +0 -32
- package/lib/Button/ButtonOutline.jsx +0 -43
- package/lib/Button/ButtonPrimary.jsx +0 -42
- package/lib/Button/ButtonStyles.jsx +0 -37
- package/lib/Button/ButtonTableList.jsx +0 -46
- package/lib/Caret.jsx +0 -93
- package/lib/CircleBadge.jsx +0 -42
- package/lib/CircleOcticon.jsx +0 -21
- package/lib/CounterLabel.jsx +0 -43
- package/lib/Details.jsx +0 -21
- package/lib/Dialog/ConfirmationDialog.jsx +0 -146
- package/lib/Dialog/Dialog.jsx +0 -279
- package/lib/Dialog.jsx +0 -129
- package/lib/Dropdown.jsx +0 -131
- package/lib/DropdownMenu/DropdownButton.jsx +0 -14
- package/lib/DropdownMenu/DropdownMenu.jsx +0 -70
- package/lib/FilterList.jsx +0 -59
- package/lib/FilteredActionList/FilteredActionList.jsx +0 -100
- package/lib/FilteredSearch.jsx +0 -28
- package/lib/Flash.jsx +0 -69
- package/lib/Flex.jsx +0 -15
- package/lib/FormGroup.jsx +0 -22
- package/lib/Grid.jsx +0 -15
- package/lib/Header.jsx +0 -83
- package/lib/Heading.jsx +0 -21
- package/lib/Label.jsx +0 -82
- package/lib/LabelGroup.jsx +0 -18
- package/lib/Link.jsx +0 -36
- package/lib/NewButton/button-counter.jsx +0 -14
- package/lib/NewButton/button.jsx +0 -279
- package/lib/Overlay.jsx +0 -154
- package/lib/Pagehead.jsx +0 -17
- package/lib/Pagination/Pagination.jsx +0 -161
- package/lib/Pagination/model.jsx +0 -174
- package/lib/PointerBox.jsx +0 -25
- package/lib/Popover.jsx +0 -202
- package/lib/Portal/Portal.jsx +0 -79
- package/lib/Position.jsx +0 -46
- package/lib/ProgressBar.jsx +0 -39
- package/lib/SelectMenu/SelectMenu.jsx +0 -112
- package/lib/SelectMenu/SelectMenuContext.jsx +0 -5
- package/lib/SelectMenu/SelectMenuDivider.jsx +0 -42
- package/lib/SelectMenu/SelectMenuFilter.jsx +0 -58
- package/lib/SelectMenu/SelectMenuFooter.jsx +0 -45
- package/lib/SelectMenu/SelectMenuHeader.jsx +0 -42
- package/lib/SelectMenu/SelectMenuItem.jsx +0 -142
- package/lib/SelectMenu/SelectMenuList.jsx +0 -59
- package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx +0 -22
- package/lib/SelectMenu/SelectMenuModal.jsx +0 -118
- package/lib/SelectMenu/SelectMenuTab.jsx +0 -92
- package/lib/SelectMenu/SelectMenuTabPanel.jsx +0 -42
- package/lib/SelectMenu/SelectMenuTabs.jsx +0 -57
- package/lib/SelectPanel/SelectPanel.jsx +0 -105
- package/lib/SideNav.jsx +0 -173
- package/lib/Spinner.jsx +0 -35
- package/lib/StateLabel.jsx +0 -93
- package/lib/StyledOcticon.jsx +0 -18
- package/lib/SubNav.jsx +0 -101
- package/lib/TabNav.jsx +0 -58
- package/lib/Text.jsx +0 -14
- package/lib/TextInput.jsx +0 -23
- package/lib/TextInputWithTokens.jsx +0 -218
- package/lib/ThemeProvider.jsx +0 -130
- package/lib/Timeline.jsx +0 -123
- package/lib/Token/AvatarToken.jsx +0 -54
- package/lib/Token/IssueLabelToken.jsx +0 -125
- package/lib/Token/Token.jsx +0 -103
- package/lib/Token/TokenBase.jsx +0 -88
- package/lib/Token/_RemoveTokenButton.jsx +0 -108
- package/lib/Token/_TokenTextContainer.jsx +0 -49
- package/lib/Tooltip.jsx +0 -246
- package/lib/Truncate.jsx +0 -24
- package/lib/UnderlineNav.jsx +0 -88
- package/lib/_TextInputWrapper.jsx +0 -120
- package/lib/_UnstyledTextInput.jsx +0 -22
- package/lib/hooks/useDetails.jsx +0 -39
- package/lib/hooks/useOnOutsideClick.jsx +0 -61
- package/lib/hooks/useOverlay.jsx +0 -15
- package/lib/utils/create-slots.jsx +0 -65
- package/lib/utils/deprecate.jsx +0 -59
- package/lib/utils/isNumeric.jsx +0 -7
- package/lib/utils/ssr.jsx +0 -6
- package/lib/utils/test-deprecations.jsx +0 -20
- package/lib/utils/test-helpers.jsx +0 -8
- package/lib/utils/test-matchers.jsx +0 -100
- package/lib/utils/testing.jsx +0 -206
- package/lib-esm/ActionList2/Header.d.ts +0 -26
- package/lib-esm/ActionList2/Header.js +0 -44
@@ -1,52 +1,69 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
exports.useFocusTrap =
|
7
|
-
|
8
|
-
|
9
|
-
|
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
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
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
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
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
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
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
|
-
|
3
|
-
|
4
|
-
|
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
|
-
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
3
6
|
exports.useOnEscapePress = void 0;
|
4
|
-
|
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
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
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
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
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
|
-
|
68
|
+
|
69
|
+
exports.useOnEscapePress = useOnEscapePress;
|
@@ -1,24 +1,36 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
|
-
exports
|
4
|
-
|
5
|
-
|
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
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
exports.useProvidedRefOrCreate =
|
7
|
-
|
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
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
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
|
-
|
3
|
-
exports
|
4
|
-
|
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
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
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
|
-
|
3
|
-
exports
|
4
|
-
|
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
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
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
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
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
|
-
|
3
|
-
|
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
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
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
|
-
|
19
|
-
}
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
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
|
-
|
3
|
-
|
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
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
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';
|