@basic-ui/core 0.0.38 → 0.0.41
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/build/cjs/index.js +1 -1
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Accordion/Accordion.d.ts +7 -7
- package/build/esm/Accordion/Accordion.js +22 -17
- package/build/esm/Accordion/Accordion.js.map +1 -1
- package/build/esm/Accordion/AccordionBody.d.ts +5 -5
- package/build/esm/Accordion/AccordionBody.js +23 -15
- package/build/esm/Accordion/AccordionBody.js.map +1 -1
- package/build/esm/Accordion/AccordionHeader.d.ts +6 -6
- package/build/esm/Accordion/AccordionHeader.js +45 -31
- package/build/esm/Accordion/AccordionHeader.js.map +1 -1
- package/build/esm/Accordion/AccordionItem.d.ts +7 -7
- package/build/esm/Accordion/AccordionItem.js +16 -16
- package/build/esm/Accordion/AccordionItem.js.map +1 -1
- package/build/esm/Accordion/context.d.ts +4 -4
- package/build/esm/Accordion/context.js +12 -10
- package/build/esm/Accordion/context.js.map +1 -1
- package/build/esm/CheckBox/CheckBox.d.ts +6 -6
- package/build/esm/CheckBox/CheckBox.js +19 -12
- package/build/esm/CheckBox/CheckBox.js.map +1 -1
- package/build/esm/ComboBox/Combobox.d.ts +10 -10
- package/build/esm/ComboBox/Combobox.js +52 -46
- package/build/esm/ComboBox/Combobox.js.map +1 -1
- package/build/esm/ComboBox/ComboboxButton.d.ts +8 -8
- package/build/esm/ComboBox/ComboboxButton.js +19 -20
- package/build/esm/ComboBox/ComboboxButton.js.map +1 -1
- package/build/esm/ComboBox/ComboboxInput.d.ts +10 -10
- package/build/esm/ComboBox/ComboboxInput.js +52 -50
- package/build/esm/ComboBox/ComboboxInput.js.map +1 -1
- package/build/esm/ComboBox/ComboboxLabel.d.ts +5 -5
- package/build/esm/ComboBox/ComboboxLabel.js +11 -12
- package/build/esm/ComboBox/ComboboxLabel.js.map +1 -1
- package/build/esm/ComboBox/ComboboxList.d.ts +6 -6
- package/build/esm/ComboBox/ComboboxList.js +15 -17
- package/build/esm/ComboBox/ComboboxList.js.map +1 -1
- package/build/esm/ComboBox/ComboboxOption.d.ts +7 -7
- package/build/esm/ComboBox/ComboboxOption.js +31 -34
- package/build/esm/ComboBox/ComboboxOption.js.map +1 -1
- package/build/esm/ComboBox/ComboboxPopover.d.ts +8 -8
- package/build/esm/ComboBox/ComboboxPopover.js +15 -17
- package/build/esm/ComboBox/ComboboxPopover.js.map +1 -1
- package/build/esm/ComboBox/context.d.ts +13 -13
- package/build/esm/ComboBox/context.js +6 -5
- package/build/esm/ComboBox/context.js.map +1 -1
- package/build/esm/ComboBox/hooks.d.ts +4 -4
- package/build/esm/ComboBox/hooks.js +82 -115
- package/build/esm/ComboBox/hooks.js.map +1 -1
- package/build/esm/ComboBox/makeHash.js +3 -3
- package/build/esm/ComboBox/makeHash.js.map +1 -1
- package/build/esm/FocusLock/FocusLock.d.ts +7 -7
- package/build/esm/FocusLock/FocusLock.js +17 -16
- package/build/esm/FocusLock/FocusLock.js.map +1 -1
- package/build/esm/FocusLock/tabUtils.js +4 -4
- package/build/esm/FocusLock/tabUtils.js.map +1 -1
- package/build/esm/FocusLock/useFocusLock.d.ts +4 -4
- package/build/esm/FocusLock/useFocusLock.js +10 -11
- package/build/esm/FocusLock/useFocusLock.js.map +1 -1
- package/build/esm/List/List.d.ts +6 -6
- package/build/esm/List/List.js +5 -6
- package/build/esm/List/List.js.map +1 -1
- package/build/esm/List/ListItem.d.ts +6 -6
- package/build/esm/List/ListItem.js +5 -6
- package/build/esm/List/ListItem.js.map +1 -1
- package/build/esm/List/context.js +3 -3
- package/build/esm/List/context.js.map +1 -1
- package/build/esm/Menu/Menu.d.ts +6 -6
- package/build/esm/Menu/Menu.js +29 -21
- package/build/esm/Menu/Menu.js.map +1 -1
- package/build/esm/Menu/MenuButton.d.ts +10 -10
- package/build/esm/Menu/MenuButton.js +27 -24
- package/build/esm/Menu/MenuButton.js.map +1 -1
- package/build/esm/Menu/MenuItem.d.ts +6 -6
- package/build/esm/Menu/MenuItem.js +23 -24
- package/build/esm/Menu/MenuItem.js.map +1 -1
- package/build/esm/Menu/MenuList.d.ts +5 -5
- package/build/esm/Menu/MenuList.js +61 -45
- package/build/esm/Menu/MenuList.js.map +1 -1
- package/build/esm/Menu/MenuPopover.d.ts +6 -6
- package/build/esm/Menu/MenuPopover.js +8 -10
- package/build/esm/Menu/MenuPopover.js.map +1 -1
- package/build/esm/Menu/context.d.ts +2 -2
- package/build/esm/Menu/context.js +11 -8
- package/build/esm/Menu/context.js.map +1 -1
- package/build/esm/Modal/Modal.d.ts +6 -7
- package/build/esm/Modal/Modal.js +11 -10
- package/build/esm/Modal/Modal.js.map +1 -1
- package/build/esm/Modal/ModalBackdrop.d.ts +6 -6
- package/build/esm/Modal/ModalBackdrop.js +20 -19
- package/build/esm/Modal/ModalBackdrop.js.map +1 -1
- package/build/esm/Popper/Popper.d.ts +8 -8
- package/build/esm/Popper/Popper.js +46 -37
- package/build/esm/Popper/Popper.js.map +1 -1
- package/build/esm/Popper/PopperArrow.d.ts +5 -5
- package/build/esm/Popper/PopperArrow.js +8 -9
- package/build/esm/Popper/PopperArrow.js.map +1 -1
- package/build/esm/Popper/context.d.ts +1 -1
- package/build/esm/Popper/context.js +5 -3
- package/build/esm/Popper/context.js.map +1 -1
- package/build/esm/Portal/Portal.d.ts +1 -1
- package/build/esm/Portal/Portal.js +6 -5
- package/build/esm/Portal/Portal.js.map +1 -1
- package/build/esm/RadioButton/RadioButton.d.ts +7 -7
- package/build/esm/RadioButton/RadioButton.js +12 -13
- package/build/esm/RadioButton/RadioButton.js.map +1 -1
- package/build/esm/RadioButton/RadioGroup.d.ts +8 -8
- package/build/esm/RadioButton/RadioGroup.js +22 -16
- package/build/esm/RadioButton/RadioGroup.js.map +1 -1
- package/build/esm/RadioButton/context.d.ts +2 -2
- package/build/esm/RadioButton/context.js +6 -5
- package/build/esm/RadioButton/context.js.map +1 -1
- package/build/esm/SkipNav/SkipNav.d.ts +6 -6
- package/build/esm/SkipNav/SkipNav.js +5 -6
- package/build/esm/SkipNav/SkipNav.js.map +1 -1
- package/build/esm/Spinner/Spinner.d.ts +7 -7
- package/build/esm/Spinner/Spinner.js +41 -31
- package/build/esm/Spinner/Spinner.js.map +1 -1
- package/build/esm/Spinner/SpinnerButton.d.ts +6 -6
- package/build/esm/Spinner/SpinnerButton.js +11 -12
- package/build/esm/Spinner/SpinnerButton.js.map +1 -1
- package/build/esm/Spinner/context.d.ts +2 -2
- package/build/esm/Spinner/context.js +6 -5
- package/build/esm/Spinner/context.js.map +1 -1
- package/build/esm/Tabs/Tab.d.ts +6 -6
- package/build/esm/Tabs/Tab.js +29 -29
- package/build/esm/Tabs/Tab.js.map +1 -1
- package/build/esm/Tabs/TabList.d.ts +6 -6
- package/build/esm/Tabs/TabList.js +24 -21
- package/build/esm/Tabs/TabList.js.map +1 -1
- package/build/esm/Tabs/TabPanel.d.ts +6 -6
- package/build/esm/Tabs/TabPanel.js +12 -12
- package/build/esm/Tabs/TabPanel.js.map +1 -1
- package/build/esm/Tabs/TabPanels.d.ts +5 -5
- package/build/esm/Tabs/TabPanels.js +13 -12
- package/build/esm/Tabs/TabPanels.js.map +1 -1
- package/build/esm/Tabs/Tabs.d.ts +6 -6
- package/build/esm/Tabs/Tabs.js +27 -14
- package/build/esm/Tabs/Tabs.js.map +1 -1
- package/build/esm/Tabs/context.d.ts +3 -3
- package/build/esm/Tabs/context.js +12 -10
- package/build/esm/Tabs/context.js.map +1 -1
- package/build/esm/Tooltip/Tooltip.d.ts +7 -7
- package/build/esm/Tooltip/Tooltip.js +18 -16
- package/build/esm/Tooltip/Tooltip.js.map +1 -1
- package/build/esm/Tooltip/stateMachine.js +56 -80
- package/build/esm/Tooltip/stateMachine.js.map +1 -1
- package/build/esm/Tooltip/useTooltip.d.ts +7 -7
- package/build/esm/Tooltip/useTooltip.js +32 -30
- package/build/esm/Tooltip/useTooltip.js.map +1 -1
- package/build/esm/hooks/useAutoFocus.d.ts +2 -2
- package/build/esm/hooks/useAutoFocus.js +1 -1
- package/build/esm/hooks/useAutoFocus.js.map +1 -1
- package/build/esm/hooks/useChildrenCounter.d.ts +1 -1
- package/build/esm/hooks/useChildrenCounter.js +6 -4
- package/build/esm/hooks/useChildrenCounter.js.map +1 -1
- package/build/esm/hooks/useControlledState.d.ts +3 -7
- package/build/esm/hooks/useControlledState.js +7 -2
- package/build/esm/hooks/useControlledState.js.map +1 -1
- package/build/esm/hooks/useFocusReturn.d.ts +1 -1
- package/build/esm/hooks/useFocusReturn.js +6 -6
- package/build/esm/hooks/useFocusReturn.js.map +1 -1
- package/build/esm/hooks/useFocusState.d.ts +3 -3
- package/build/esm/hooks/useFocusState.js +13 -9
- package/build/esm/hooks/useFocusState.js.map +1 -1
- package/build/esm/hooks/useGestureHandlers.d.ts +5 -5
- package/build/esm/hooks/useGestureHandlers.js +59 -63
- package/build/esm/hooks/useGestureHandlers.js.map +1 -1
- package/build/esm/hooks/useMeasure.d.ts +2 -2
- package/build/esm/hooks/useMeasure.js +13 -7
- package/build/esm/hooks/useMeasure.js.map +1 -1
- package/build/esm/hooks/useOnClickOutside.d.ts +2 -2
- package/build/esm/hooks/useOnClickOutside.js +5 -4
- package/build/esm/hooks/useOnClickOutside.js.map +1 -1
- package/build/esm/hooks/useOnKeyDown.js +4 -3
- package/build/esm/hooks/useOnKeyDown.js.map +1 -1
- package/build/esm/hooks/useReducerMachine.d.ts +1 -1
- package/build/esm/hooks/useReducerMachine.js +13 -10
- package/build/esm/hooks/useReducerMachine.js.map +1 -1
- package/build/esm/hooks/useRemoveBodyScroll.js +4 -4
- package/build/esm/hooks/useRemoveBodyScroll.js.map +1 -1
- package/build/esm/hooks/useScope.d.ts +1 -1
- package/build/esm/hooks/useScope.js +10 -12
- package/build/esm/hooks/useScope.js.map +1 -1
- package/build/esm/hooks/useThrottle.js +10 -5
- package/build/esm/hooks/useThrottle.js.map +1 -1
- package/build/esm/utils/assignRef.d.ts +1 -1
- package/build/esm/utils/assignRef.js +7 -3
- package/build/esm/utils/assignRef.js.map +1 -1
- package/build/esm/utils/createSubscription.js +7 -5
- package/build/esm/utils/createSubscription.js.map +1 -1
- package/build/esm/utils/rubberBandClamp.js +5 -2
- package/build/esm/utils/rubberBandClamp.js.map +1 -1
- package/build/esm/utils/wrapEvent.d.ts +3 -3
- package/build/esm/utils/wrapEvent.js +7 -3
- package/build/esm/utils/wrapEvent.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -0
- package/build/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/Accordion/Accordion.story.tsx +1 -0
- package/src/Accordion/Accordion.tsx +15 -7
- package/src/Accordion/AccordionBody.tsx +7 -8
- package/src/Accordion/AccordionHeader.tsx +35 -33
- package/src/Accordion/AccordionItem.tsx +15 -7
- package/src/Accordion/context.ts +5 -3
- package/src/CheckBox/CheckBox.tsx +6 -6
- package/src/ComboBox/ComboBox.story.tsx +5 -5
- package/src/ComboBox/Combobox.tsx +12 -17
- package/src/ComboBox/ComboboxButton.tsx +16 -15
- package/src/ComboBox/ComboboxInput.tsx +19 -10
- package/src/ComboBox/ComboboxLabel.tsx +5 -4
- package/src/ComboBox/ComboboxList.tsx +6 -6
- package/src/ComboBox/ComboboxOption.tsx +11 -7
- package/src/ComboBox/ComboboxPopover.tsx +14 -8
- package/src/ComboBox/context.ts +14 -12
- package/src/ComboBox/hooks.tsx +9 -11
- package/src/FocusLock/FocusLock.tsx +14 -7
- package/src/FocusLock/useFocusLock.ts +5 -3
- package/src/List/List.tsx +5 -5
- package/src/List/ListItem.tsx +5 -5
- package/src/Menu/Menu.story.tsx +7 -6
- package/src/Menu/Menu.tsx +16 -8
- package/src/Menu/MenuButton.tsx +15 -16
- package/src/Menu/MenuItem.tsx +15 -10
- package/src/Menu/MenuList.tsx +8 -12
- package/src/Menu/MenuPopover.tsx +7 -5
- package/src/Menu/context.ts +10 -4
- package/src/Modal/Modal.story.tsx +1 -0
- package/src/Modal/Modal.tsx +12 -6
- package/src/Modal/ModalBackdrop.tsx +15 -9
- package/src/Modal/NavDrawer.story.tsx +3 -3
- package/src/Popper/Popper.story.tsx +3 -4
- package/src/Popper/Popper.tsx +13 -12
- package/src/Popper/PopperArrow.tsx +5 -4
- package/src/Popper/context.ts +2 -1
- package/src/Portal/Portal.tsx +1 -1
- package/src/RadioButton/RadioButton.story.tsx +1 -0
- package/src/RadioButton/RadioButton.tsx +14 -7
- package/src/RadioButton/RadioGroup.tsx +14 -10
- package/src/RadioButton/context.ts +2 -4
- package/src/SkipNav/SkipNav.tsx +5 -5
- package/src/Spinner/Spinner.story.tsx +1 -0
- package/src/Spinner/Spinner.tsx +14 -9
- package/src/Spinner/SpinnerButton.tsx +12 -6
- package/src/Spinner/context.ts +2 -3
- package/src/Tabs/Tab.story.tsx +1 -0
- package/src/Tabs/Tab.tsx +16 -11
- package/src/Tabs/TabList.tsx +6 -5
- package/src/Tabs/TabPanel.tsx +6 -5
- package/src/Tabs/TabPanels.tsx +4 -4
- package/src/Tabs/Tabs.tsx +6 -7
- package/src/Tabs/context.ts +4 -4
- package/src/Tooltip/Tooltip.story.tsx +3 -2
- package/src/Tooltip/Tooltip.tsx +11 -9
- package/src/Tooltip/stateMachine.ts +1 -1
- package/src/Tooltip/useTooltip.ts +19 -10
- package/src/hooks/useAutoFocus.ts +3 -1
- package/src/hooks/useChildrenCounter.ts +2 -1
- package/src/hooks/useControlledState.ts +7 -8
- package/src/hooks/useFocusReturn.ts +2 -1
- package/src/hooks/useFocusState.ts +4 -2
- package/src/hooks/useGestureHandlers.ts +11 -7
- package/src/hooks/useMeasure.ts +2 -1
- package/src/hooks/useOnClickOutside.ts +2 -2
- package/src/hooks/useReducerMachine.ts +2 -1
- package/src/hooks/useScope.ts +2 -1
- package/src/utils/assignRef.ts +1 -1
- package/src/utils/wrapEvent.ts +4 -5
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
4
|
import { forwardRef, useEffect, useRef, useState, useLayoutEffect } from 'react';
|
|
4
5
|
import { useMenuContext, MenuListProvider } from './context';
|
|
5
6
|
import { assignMultipleRefs } from '../utils/assignRef';
|
|
@@ -8,43 +9,50 @@ import { useScope } from '../hooks';
|
|
|
8
9
|
import { queryScope } from './scope';
|
|
9
10
|
import { getCircularIndex, wrapEvent } from '../utils';
|
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
-
|
|
12
|
-
export
|
|
12
|
+
var useEnhancedEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
13
|
+
export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwardedRef) {
|
|
13
14
|
var _buttonRef$current3;
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
16
|
+
var _props$as = props.as,
|
|
17
|
+
Comp = _props$as === void 0 ? 'ul' : _props$as,
|
|
18
|
+
onKeyDown = props.onKeyDown,
|
|
19
|
+
preferredId = props.id,
|
|
20
|
+
defaultActiveItemValue = props.defaultActiveItemValue,
|
|
21
|
+
otherProps = _objectWithoutProperties(props, ["as", "onKeyDown", "id", "defaultActiveItemValue"]);
|
|
22
|
+
|
|
23
|
+
var _useMenuContext = useMenuContext(),
|
|
24
|
+
menuListIdRef = _useMenuContext.menuListIdRef,
|
|
25
|
+
buttonRef = _useMenuContext.buttonRef,
|
|
26
|
+
onChange = _useMenuContext.onChange,
|
|
27
|
+
openWithArrowKeyRef = _useMenuContext.openWithArrowKeyRef,
|
|
28
|
+
open = _useMenuContext.open;
|
|
29
|
+
|
|
30
|
+
var _useState = useState(),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
navigationItem = _useState2[0],
|
|
33
|
+
setNavigationItem = _useState2[1];
|
|
34
|
+
|
|
35
|
+
var _useState3 = useState(false),
|
|
36
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
37
|
+
mounted = _useState4[0],
|
|
38
|
+
setMounted = _useState4[1];
|
|
39
|
+
|
|
40
|
+
var menuListRef = useRef();
|
|
41
|
+
var scope = useScope(menuListRef);
|
|
42
|
+
|
|
43
|
+
var onNavigate = function onNavigate(el) {
|
|
36
44
|
el.focus();
|
|
37
45
|
setNavigationItem(el);
|
|
38
46
|
};
|
|
39
47
|
|
|
40
48
|
menuListIdRef.current = preferredId || menuListIdRef.current;
|
|
41
|
-
useEnhancedEffect(()
|
|
49
|
+
useEnhancedEffect(function () {
|
|
42
50
|
if (!mounted) {
|
|
43
|
-
|
|
44
|
-
|
|
51
|
+
var allItems = scope.current.queryAllNodes(queryScope);
|
|
52
|
+
var index = getCircularIndex(openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0, allItems.length);
|
|
45
53
|
|
|
46
54
|
if (defaultActiveItemValue) {
|
|
47
|
-
for (
|
|
55
|
+
for (var i = 0; i < allItems.length; i++) {
|
|
48
56
|
if (allItems[i].dataset.value === defaultActiveItemValue) {
|
|
49
57
|
index = i;
|
|
50
58
|
break;
|
|
@@ -60,7 +68,7 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
|
|
|
60
68
|
openWithArrowKeyRef.current = null;
|
|
61
69
|
setMounted(true);
|
|
62
70
|
}, [mounted, navigationItem, onNavigate, openWithArrowKeyRef, scope, defaultActiveItemValue]);
|
|
63
|
-
useOnClickOutside(menuListRef, e
|
|
71
|
+
useOnClickOutside(menuListRef, function (e) {
|
|
64
72
|
var _buttonRef$current;
|
|
65
73
|
|
|
66
74
|
if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !((_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(e.target))) {
|
|
@@ -89,14 +97,16 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
|
|
|
89
97
|
case 'ArrowDown':
|
|
90
98
|
case 'ArrowUp':
|
|
91
99
|
e.preventDefault();
|
|
92
|
-
|
|
93
|
-
|
|
100
|
+
var allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
|
|
101
|
+
var currentIndex = allItems.findIndex(function (e) {
|
|
102
|
+
return e === navigationItem;
|
|
103
|
+
});
|
|
94
104
|
|
|
95
105
|
if (allItems.length === 0) {
|
|
96
106
|
return;
|
|
97
107
|
}
|
|
98
108
|
|
|
99
|
-
|
|
109
|
+
var nextIndex = currentIndex;
|
|
100
110
|
|
|
101
111
|
switch (e.key) {
|
|
102
112
|
case 'ArrowUp':
|
|
@@ -127,25 +137,31 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
|
|
|
127
137
|
if (e.key.length === 1) {
|
|
128
138
|
// A-Z
|
|
129
139
|
e.preventDefault();
|
|
130
|
-
const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
|
|
131
|
-
const currentIndex = allItems.findIndex(e => e === navigationItem);
|
|
132
|
-
const firstLetter = e.key.toLowerCase();
|
|
133
|
-
let nextIndex = -1;
|
|
134
140
|
|
|
135
|
-
|
|
141
|
+
var _allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
|
|
142
|
+
|
|
143
|
+
var _currentIndex = _allItems.findIndex(function (e) {
|
|
144
|
+
return e === navigationItem;
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
var firstLetter = e.key.toLowerCase();
|
|
148
|
+
|
|
149
|
+
var _nextIndex = -1;
|
|
150
|
+
|
|
151
|
+
for (var i = 1; i < _allItems.length; i++) {
|
|
136
152
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
153
|
+
var idx = getCircularIndex(_currentIndex + i, _allItems.length);
|
|
154
|
+
var dom = _allItems[idx];
|
|
155
|
+
var domText = dom.innerText.toLowerCase();
|
|
140
156
|
|
|
141
157
|
if (domText.length > 0 && domText.charAt(0) === firstLetter) {
|
|
142
|
-
|
|
158
|
+
_nextIndex = idx;
|
|
143
159
|
break;
|
|
144
160
|
}
|
|
145
161
|
}
|
|
146
162
|
|
|
147
|
-
if (
|
|
148
|
-
onNavigate && onNavigate(
|
|
163
|
+
if (_nextIndex >= 0 && _nextIndex < _allItems.length) {
|
|
164
|
+
onNavigate && onNavigate(_allItems[_nextIndex]);
|
|
149
165
|
}
|
|
150
166
|
}
|
|
151
167
|
}
|
|
@@ -158,8 +174,8 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
|
|
|
158
174
|
|
|
159
175
|
return /*#__PURE__*/_jsx(MenuListProvider, {
|
|
160
176
|
value: {
|
|
161
|
-
navigationItem,
|
|
162
|
-
onNavigate
|
|
177
|
+
navigationItem: navigationItem,
|
|
178
|
+
onNavigate: onNavigate
|
|
163
179
|
},
|
|
164
180
|
children: /*#__PURE__*/_jsx(Comp, _extends({
|
|
165
181
|
ref: assignMultipleRefs(forwardedRef, menuListRef),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Menu/MenuList.tsx"],"names":["forwardRef","useEffect","useRef","useState","useLayoutEffect","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","onKeyDown","id","preferredId","defaultActiveItemValue","otherProps","menuListIdRef","buttonRef","onChange","openWithArrowKeyRef","open","navigationItem","setNavigationItem","mounted","setMounted","menuListRef","scope","onNavigate","el","focus","current","allItems","queryAllNodes","index","length","i","dataset","value","e","target","HTMLElement","contains","preventDefault","handleKeyDown","key","currentIndex","findIndex","nextIndex","firstLetter","toLowerCase","idx","dom","domText","innerText","charAt"],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n} from 'react';\nimport type * as React from 'react';\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { useOnClickOutside } from '../hooks/useOnClickOutside';\nimport { useScope } from '../hooks';\nimport { queryScope } from './scope';\nimport { getCircularIndex, wrapEvent } from '../utils';\n\nconst useEnhancedEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport interface MenuListProps extends React.HTMLAttributes<HTMLUListElement> {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n defaultActiveItemValue?: string;\n}\n\nexport const MenuList = forwardRef<HTMLUListElement, MenuListProps>(\n function MenuList(props, forwardedRef) {\n const {\n as: Comp = 'ul',\n onKeyDown,\n id: preferredId,\n defaultActiveItemValue,\n ...otherProps\n } = props;\n\n const {\n menuListIdRef,\n buttonRef,\n onChange,\n openWithArrowKeyRef,\n open,\n } = useMenuContext();\n\n const [navigationItem, setNavigationItem] = useState<\n HTMLElement | undefined\n >();\n\n const [mounted, setMounted] = useState(false);\n\n const menuListRef = useRef<HTMLUListElement>();\n\n const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);\n\n const onNavigate = (el: HTMLElement) => {\n el.focus();\n setNavigationItem(el);\n };\n\n menuListIdRef.current = preferredId || menuListIdRef.current;\n\n useEnhancedEffect(() => {\n if (!mounted) {\n const allItems = scope.current.queryAllNodes(queryScope);\n let index = getCircularIndex(\n openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,\n allItems.length\n );\n\n if (defaultActiveItemValue) {\n for (let i = 0; i < allItems.length; i++) {\n if (allItems[i].dataset.value === defaultActiveItemValue) {\n index = i;\n break;\n }\n }\n }\n\n if (index !== null) {\n onNavigate && onNavigate(allItems[index]);\n }\n }\n\n openWithArrowKeyRef.current = null;\n setMounted(true);\n }, [\n mounted,\n navigationItem,\n onNavigate,\n openWithArrowKeyRef,\n scope,\n defaultActiveItemValue,\n ]);\n\n useOnClickOutside(\n menuListRef,\n (e) => {\n if (\n e.target instanceof HTMLElement &&\n e.target !== buttonRef.current &&\n !buttonRef.current?.contains(e.target)\n ) {\n onChange && onChange(e as any, false);\n }\n e.preventDefault();\n },\n true\n );\n\n function handleKeyDown(e: React.KeyboardEvent<HTMLUListElement>) {\n switch (e.key) {\n case 'Escape':\n case 'Tab': {\n onChange && onChange(e, false);\n e.preventDefault(); // prevents focusing on next element, because we will be handling it\n buttonRef.current?.focus();\n break;\n }\n case 'Home':\n case 'End':\n case 'ArrowDown':\n case 'ArrowUp':\n e.preventDefault();\n const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];\n const currentIndex = allItems.findIndex((e) => e === navigationItem);\n if (allItems.length === 0) {\n return;\n }\n let nextIndex: number = currentIndex;\n switch (e.key) {\n case 'ArrowUp':\n nextIndex += -1;\n break;\n case 'ArrowDown':\n nextIndex += 1;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = -1;\n break;\n }\n // We already checked if allItems.length = 0 above\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n nextIndex = getCircularIndex(nextIndex, allItems.length)!;\n onNavigate && onNavigate(allItems[nextIndex]);\n break;\n default: {\n if (e.key.length === 1) {\n // A-Z\n e.preventDefault();\n const allItems = scope\n ? scope.current.queryAllNodes(queryScope)\n : [];\n const currentIndex = allItems.findIndex(\n (e) => e === navigationItem\n );\n const firstLetter = e.key.toLowerCase();\n let nextIndex = -1;\n for (let i = 1; i < allItems.length; i++) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const idx = getCircularIndex(currentIndex + i, allItems.length)!;\n const dom = allItems[idx];\n const domText = dom.innerText.toLowerCase();\n if (domText.length > 0 && domText.charAt(0) === firstLetter) {\n nextIndex = idx;\n break;\n }\n }\n if (nextIndex >= 0 && nextIndex < allItems.length) {\n onNavigate && onNavigate(allItems[nextIndex]);\n }\n }\n }\n }\n }\n\n if (!open) {\n return null;\n }\n\n return (\n <MenuListProvider\n value={{\n navigationItem,\n onNavigate,\n }}\n >\n <Comp\n ref={assignMultipleRefs(forwardedRef, menuListRef)}\n id={menuListIdRef.current}\n role=\"menu\"\n aria-labelledby={buttonRef.current?.id}\n data-menu-list=\"\"\n tabIndex=\"-1\"\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n {...otherProps}\n />\n </MenuListProvider>\n );\n }\n);\n"],"file":"MenuList.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Menu/MenuList.tsx"],"names":["forwardRef","useEffect","useRef","useState","useLayoutEffect","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","onKeyDown","preferredId","id","defaultActiveItemValue","otherProps","menuListIdRef","buttonRef","onChange","openWithArrowKeyRef","open","navigationItem","setNavigationItem","mounted","setMounted","menuListRef","scope","onNavigate","el","focus","current","allItems","queryAllNodes","index","length","i","dataset","value","e","target","HTMLElement","contains","preventDefault","handleKeyDown","key","currentIndex","findIndex","nextIndex","firstLetter","toLowerCase","idx","dom","domText","innerText","charAt"],"mappings":"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","sourcesContent":["import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';\nimport {\n forwardRef,\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n} from 'react';\n\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { useOnClickOutside } from '../hooks/useOnClickOutside';\nimport { useScope } from '../hooks';\nimport { queryScope } from './scope';\nimport { getCircularIndex, wrapEvent } from '../utils';\n\nconst useEnhancedEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport interface MenuListProps extends HTMLAttributes<HTMLUListElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n defaultActiveItemValue?: string;\n}\n\nexport const MenuList = forwardRef<HTMLUListElement, MenuListProps>(\n function MenuList(props, forwardedRef) {\n const {\n as: Comp = 'ul',\n onKeyDown,\n id: preferredId,\n defaultActiveItemValue,\n ...otherProps\n } = props;\n\n const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =\n useMenuContext();\n\n const [navigationItem, setNavigationItem] = useState<\n HTMLElement | undefined\n >();\n\n const [mounted, setMounted] = useState(false);\n\n const menuListRef = useRef<HTMLUListElement>();\n\n const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);\n\n const onNavigate = (el: HTMLElement) => {\n el.focus();\n setNavigationItem(el);\n };\n\n menuListIdRef.current = preferredId || menuListIdRef.current;\n\n useEnhancedEffect(() => {\n if (!mounted) {\n const allItems = scope.current.queryAllNodes(queryScope);\n let index = getCircularIndex(\n openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,\n allItems.length\n );\n\n if (defaultActiveItemValue) {\n for (let i = 0; i < allItems.length; i++) {\n if (allItems[i].dataset.value === defaultActiveItemValue) {\n index = i;\n break;\n }\n }\n }\n\n if (index !== null) {\n onNavigate && onNavigate(allItems[index]);\n }\n }\n\n openWithArrowKeyRef.current = null;\n setMounted(true);\n }, [\n mounted,\n navigationItem,\n onNavigate,\n openWithArrowKeyRef,\n scope,\n defaultActiveItemValue,\n ]);\n\n useOnClickOutside(\n menuListRef,\n (e) => {\n if (\n e.target instanceof HTMLElement &&\n e.target !== buttonRef.current &&\n !buttonRef.current?.contains(e.target)\n ) {\n onChange && onChange(e as any, false);\n }\n e.preventDefault();\n },\n true\n );\n\n function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {\n switch (e.key) {\n case 'Escape':\n case 'Tab': {\n onChange && onChange(e, false);\n e.preventDefault(); // prevents focusing on next element, because we will be handling it\n buttonRef.current?.focus();\n break;\n }\n case 'Home':\n case 'End':\n case 'ArrowDown':\n case 'ArrowUp':\n e.preventDefault();\n const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];\n const currentIndex = allItems.findIndex((e) => e === navigationItem);\n if (allItems.length === 0) {\n return;\n }\n let nextIndex: number = currentIndex;\n switch (e.key) {\n case 'ArrowUp':\n nextIndex += -1;\n break;\n case 'ArrowDown':\n nextIndex += 1;\n break;\n case 'Home':\n nextIndex = 0;\n break;\n case 'End':\n nextIndex = -1;\n break;\n }\n // We already checked if allItems.length = 0 above\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n nextIndex = getCircularIndex(nextIndex, allItems.length)!;\n onNavigate && onNavigate(allItems[nextIndex]);\n break;\n default: {\n if (e.key.length === 1) {\n // A-Z\n e.preventDefault();\n const allItems = scope\n ? scope.current.queryAllNodes(queryScope)\n : [];\n const currentIndex = allItems.findIndex(\n (e) => e === navigationItem\n );\n const firstLetter = e.key.toLowerCase();\n let nextIndex = -1;\n for (let i = 1; i < allItems.length; i++) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const idx = getCircularIndex(currentIndex + i, allItems.length)!;\n const dom = allItems[idx];\n const domText = dom.innerText.toLowerCase();\n if (domText.length > 0 && domText.charAt(0) === firstLetter) {\n nextIndex = idx;\n break;\n }\n }\n if (nextIndex >= 0 && nextIndex < allItems.length) {\n onNavigate && onNavigate(allItems[nextIndex]);\n }\n }\n }\n }\n }\n\n if (!open) {\n return null;\n }\n\n return (\n <MenuListProvider\n value={{\n navigationItem,\n onNavigate,\n }}\n >\n <Comp\n ref={assignMultipleRefs(forwardedRef, menuListRef)}\n id={menuListIdRef.current}\n role=\"menu\"\n aria-labelledby={buttonRef.current?.id}\n data-menu-list=\"\"\n tabIndex=\"-1\"\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n {...otherProps}\n />\n </MenuListProvider>\n );\n }\n);\n"],"file":"MenuList.js"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import { PopperProps } from '../Popper';
|
|
1
|
+
import type { ElementType, ReactNode } from 'react';
|
|
2
|
+
import type { PopperProps } from '../Popper';
|
|
3
3
|
export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
|
|
4
|
-
as?:
|
|
5
|
-
innerAs?:
|
|
6
|
-
children?:
|
|
4
|
+
as?: ElementType<any>;
|
|
5
|
+
innerAs?: ElementType<any>;
|
|
6
|
+
children?: ReactNode;
|
|
7
7
|
}
|
|
8
|
-
export declare const MenuPopover:
|
|
8
|
+
export declare const MenuPopover: import("react").ForwardRefExoticComponent<MenuPopoverProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { Popper } from '../Popper';
|
|
5
5
|
import { useMenuContext } from './context';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
export
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
otherProps = _objectWithoutPropertiesLoose(props, ["as"]);
|
|
7
|
+
export var MenuPopover = /*#__PURE__*/forwardRef(function MenuPopover(props, forwardedRef) {
|
|
8
|
+
var _props$as = props.as,
|
|
9
|
+
as = _props$as === void 0 ? 'div' : _props$as,
|
|
10
|
+
otherProps = _objectWithoutProperties(props, ["as"]);
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = useMenuContext();
|
|
12
|
+
var _useMenuContext = useMenuContext(),
|
|
13
|
+
buttonRef = _useMenuContext.buttonRef,
|
|
14
|
+
open = _useMenuContext.open;
|
|
17
15
|
|
|
18
16
|
if (!open) {
|
|
19
17
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Menu/MenuPopover.tsx"],"names":["forwardRef","Popper","useMenuContext","MenuPopover","props","forwardedRef","as","otherProps","buttonRef","open"],"mappings":";;
|
|
1
|
+
{"version":3,"sources":["../../../src/Menu/MenuPopover.tsx"],"names":["forwardRef","Popper","useMenuContext","MenuPopover","props","forwardedRef","as","otherProps","buttonRef","open"],"mappings":";;AACA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,cAAT,QAA+B,WAA/B;;AAQA,OAAO,IAAMC,WAAW,gBAAGH,UAAU,CACnC,SAASG,WAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA0C;AAAA,kBACFD,KADE,CAChCE,EADgC;AAAA,MAChCA,EADgC,0BAC3B,KAD2B;AAAA,MACjBC,UADiB,4BACFH,KADE;;AAAA,wBAEZF,cAAc,EAFF;AAAA,MAEhCM,SAFgC,mBAEhCA,SAFgC;AAAA,MAErBC,IAFqB,mBAErBA,IAFqB;;AAIxC,MAAI,CAACA,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,sBACE,KAAC,MAAD;AAAQ,IAAA,EAAE,EAAEH,EAAZ;AAAgB,IAAA,GAAG,EAAED,YAArB;AAAmC,IAAA,QAAQ,EAAEG;AAA7C,KAA4DD,UAA5D,EADF;AAGD,CAZkC,CAA9B","sourcesContent":["import type { ElementType, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { PopperProps } from '../Popper';\nimport { Popper } from '../Popper';\nimport { useMenuContext } from './context';\n\nexport interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n children?: ReactNode;\n}\n\nexport const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(\n function MenuPopover(props, forwardedRef) {\n const { as = 'div', ...otherProps } = props;\n const { buttonRef, open } = useMenuContext();\n\n if (!open) {\n return null;\n }\n\n return (\n <Popper as={as} ref={forwardedRef} anchorEl={buttonRef} {...otherProps} />\n );\n }\n);\n"],"file":"MenuPopover.js"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MutableRefObject } from 'react';
|
|
1
|
+
import type { KeyboardEvent, MouseEvent, MutableRefObject, PointerEvent } from 'react';
|
|
2
2
|
export declare type ItemObject = {
|
|
3
3
|
text: string;
|
|
4
4
|
value: any;
|
|
@@ -8,7 +8,7 @@ export interface MenuContextProps {
|
|
|
8
8
|
buttonRef: MutableRefObject<HTMLButtonElement | null>;
|
|
9
9
|
menuListIdRef: MutableRefObject<undefined | string>;
|
|
10
10
|
openWithArrowKeyRef: MutableRefObject<string | null>;
|
|
11
|
-
onChange?: (e:
|
|
11
|
+
onChange?: (e: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement> | PointerEvent<HTMLElement>, isOpen: boolean) => void;
|
|
12
12
|
open: boolean;
|
|
13
13
|
}
|
|
14
14
|
export declare const MenuProvider: import("react").Provider<MenuContextProps>;
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
var menuContext = /*#__PURE__*/createContext(null);
|
|
3
|
+
var MenuProvider = menuContext.Provider;
|
|
4
|
+
export { MenuProvider };
|
|
5
|
+
export var useMenuContext = function useMenuContext() {
|
|
6
|
+
return useContext(menuContext);
|
|
7
|
+
}; // MenuList
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
export
|
|
10
|
-
export
|
|
9
|
+
var menuListContext = /*#__PURE__*/createContext(null);
|
|
10
|
+
export var MenuListProvider = menuListContext.Provider;
|
|
11
|
+
export var useMenuListContext = function useMenuListContext() {
|
|
12
|
+
return useContext(menuListContext);
|
|
13
|
+
};
|
|
11
14
|
//# sourceMappingURL=context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Menu/context.ts"],"names":["createContext","useContext","menuContext","
|
|
1
|
+
{"version":3,"sources":["../../../src/Menu/context.ts"],"names":["createContext","useContext","menuContext","MenuProvider","Provider","useMenuContext","menuListContext","MenuListProvider","useMenuListContext"],"mappings":"AAMA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAmBA,IAAMC,WAAW,gBAAGF,aAAa,CAAmB,IAAnB,CAAjC;IACyBG,Y,GAAiBD,W,CAA3BE,Q;;AACf,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;AAAA,SAAMJ,UAAU,CAACC,WAAD,CAAhB;AAAA,CAAvB,C,CAEP;;AAMA,IAAMI,eAAe,gBAAGN,aAAa,CAAuB,IAAvB,CAArC;AACA,OAAO,IAAMO,gBAAgB,GAAGD,eAAe,CAACF,QAAzC;AACP,OAAO,IAAMI,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,SAAMP,UAAU,CAACK,eAAD,CAAhB;AAAA,CAA3B","sourcesContent":["import type {\n KeyboardEvent,\n MouseEvent,\n MutableRefObject,\n PointerEvent,\n} from 'react';\nimport { createContext, useContext } from 'react';\n\nexport type ItemObject = { text: string; value: any; id: string | undefined };\n\n// MenuRoot\nexport interface MenuContextProps {\n buttonRef: MutableRefObject<HTMLButtonElement | null>;\n menuListIdRef: MutableRefObject<undefined | string>;\n openWithArrowKeyRef: MutableRefObject<string | null>;\n onChange?: (\n e:\n | KeyboardEvent<HTMLElement>\n | MouseEvent<HTMLElement>\n | PointerEvent<HTMLElement>,\n isOpen: boolean\n ) => void;\n open: boolean;\n}\n\nconst menuContext = createContext<MenuContextProps>(null as any);\nexport const { Provider: MenuProvider } = menuContext;\nexport const useMenuContext = () => useContext(menuContext);\n\n// MenuList\nexport interface MenuListContextProps {\n navigationItem: HTMLElement | undefined;\n onNavigate: undefined | ((idx: HTMLElement) => void);\n}\n\nconst menuListContext = createContext<MenuListContextProps>(null as any);\nexport const MenuListProvider = menuListContext.Provider;\nexport const useMenuListContext = () => useContext(menuListContext);\n"],"file":"context.js"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
innerAs?: React.ElementType<any>;
|
|
1
|
+
import type { CSSProperties, ElementType, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
as?: ElementType<any>;
|
|
4
|
+
innerAs?: ElementType<any>;
|
|
6
5
|
children?: ReactNode;
|
|
7
|
-
style?:
|
|
6
|
+
style?: CSSProperties;
|
|
8
7
|
trapFocus?: boolean;
|
|
9
8
|
}
|
|
10
|
-
export declare const Modal:
|
|
9
|
+
export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
|
package/build/esm/Modal/Modal.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import { forwardRef, useRef } from 'react';
|
|
4
4
|
import { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';
|
|
5
5
|
import { FocusLock } from '../FocusLock';
|
|
6
6
|
import { assignMultipleRefs } from '../utils';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
9
|
+
var _ref$as = _ref.as,
|
|
10
|
+
Comp = _ref$as === void 0 ? 'div' : _ref$as,
|
|
11
|
+
children = _ref.children,
|
|
12
|
+
_ref$trapFocus = _ref.trapFocus,
|
|
13
|
+
trapFocus = _ref$trapFocus === void 0 ? true : _ref$trapFocus,
|
|
14
|
+
_ref$style = _ref.style,
|
|
15
|
+
style = _ref$style === void 0 ? {} : _ref$style,
|
|
16
|
+
otherProps = _objectWithoutProperties(_ref, ["as", "children", "trapFocus", "style"]);
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
var modalRef = useRef(null);
|
|
18
19
|
useFocusReturn(trapFocus, modalRef);
|
|
19
20
|
useRemoveBodyScroll(trapFocus);
|
|
20
21
|
useAutoFocus(trapFocus, modalRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Modal/Modal.tsx"],"names":["forwardRef","useRef","useAutoFocus","useFocusReturn","useRemoveBodyScroll","FocusLock","assignMultipleRefs","Modal","ref","as","Comp","children","trapFocus","style","otherProps","modalRef"],"mappings":";;
|
|
1
|
+
{"version":3,"sources":["../../../src/Modal/Modal.tsx"],"names":["forwardRef","useRef","useAutoFocus","useFocusReturn","useRemoveBodyScroll","FocusLock","assignMultipleRefs","Modal","ref","as","Comp","children","trapFocus","style","otherProps","modalRef"],"mappings":";;AAMA,SAASA,UAAT,EAAqBC,MAArB,QAAmC,OAAnC;AAEA,SAASC,YAAT,EAAuBC,cAAvB,EAAuCC,mBAAvC,QAAkE,UAAlE;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAUA,OAAO,IAAMC,KAAK,gBAAGP,UAAU,CAC7B,gBAEEQ,GAFF,EAGK;AAAA,qBAFDC,EAEC;AAAA,MAFGC,IAEH,wBAFU,KAEV;AAAA,MAFiBC,QAEjB,QAFiBA,QAEjB;AAAA,4BAF2BC,SAE3B;AAAA,MAF2BA,SAE3B,+BAFuC,IAEvC;AAAA,wBAF6CC,KAE7C;AAAA,MAF6CA,KAE7C,2BAFqD,EAErD;AAAA,MAF4DC,UAE5D;;AACH,MAAMC,QAAQ,GAAGd,MAAM,CAAiB,IAAjB,CAAvB;AAEAE,EAAAA,cAAc,CAACS,SAAD,EAAYG,QAAZ,CAAd;AACAX,EAAAA,mBAAmB,CAACQ,SAAD,CAAnB;AACAV,EAAAA,YAAY,CAACU,SAAD,EAAYG,QAAZ,CAAZ;AAEA,sBACE,KAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAA+B,IAAA,OAAO,EAAEH,SAAxC;AAAA,2BACE,KAAC,IAAD;AACE,MAAA,GAAG,EAAEN,kBAAkB,CAACE,GAAD,EAAMO,QAAN,CADzB;AAEE,8BAAqB,EAFvB;AAGE,MAAA,IAAI,EAAC,QAHP;AAIE,oBAAW,MAJb;AAKE,MAAA,KAAK,EAAEF,KALT;AAME,MAAA,QAAQ,EAAE,CAAC;AANb,OAOMC,UAPN;AAAA,gBASGH;AATH;AADF,IADF;AAeD,CA1B4B,CAAxB","sourcesContent":["import type {\n CSSProperties,\n ElementType,\n HTMLAttributes,\n ReactNode,\n} from 'react';\nimport { forwardRef, useRef } from 'react';\n\nimport { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';\nimport { FocusLock } from '../FocusLock';\nimport { assignMultipleRefs } from '../utils';\n\nexport interface ModalProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n children?: ReactNode;\n style?: CSSProperties;\n trapFocus?: boolean;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(\n (\n { as: Comp = 'div', children, trapFocus = true, style = {}, ...otherProps },\n ref\n ) => {\n const modalRef = useRef<HTMLDivElement>(null);\n\n useFocusReturn(trapFocus, modalRef);\n useRemoveBodyScroll(trapFocus);\n useAutoFocus(trapFocus, modalRef);\n\n return (\n <FocusLock childRef={modalRef} enabled={trapFocus}>\n <Comp\n ref={assignMultipleRefs(ref, modalRef)}\n data-modal-container=\"\"\n role=\"dialog\"\n aria-modal=\"true\"\n style={style}\n tabIndex={-1}\n {...otherProps}\n >\n {children}\n </Comp>\n </FocusLock>\n );\n }\n);\n"],"file":"Modal.js"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import type
|
|
2
|
-
export interface ModalBackdropProps extends
|
|
3
|
-
as?:
|
|
4
|
-
innerAs?:
|
|
1
|
+
import type { HTMLAttributes, ElementType, CSSProperties } from 'react';
|
|
2
|
+
export interface ModalBackdropProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
as?: ElementType<any>;
|
|
4
|
+
innerAs?: ElementType<any>;
|
|
5
5
|
onClose?: () => void;
|
|
6
|
-
style?:
|
|
6
|
+
style?: CSSProperties;
|
|
7
7
|
disableCloseOnClick?: boolean;
|
|
8
8
|
disableEscapeKeyDown?: boolean;
|
|
9
9
|
}
|
|
10
|
-
export declare const ModalBackdrop:
|
|
10
|
+
export declare const ModalBackdrop: import("react").ForwardRefExoticComponent<ModalBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import { useRef, forwardRef } from 'react';
|
|
4
4
|
import { assignMultipleRefs } from '../utils/assignRef';
|
|
5
5
|
import { wrapEvent } from '../utils/wrapEvent';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
export
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
7
|
+
export var ModalBackdrop = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
8
|
+
var _ref$as = _ref.as,
|
|
9
|
+
Comp = _ref$as === void 0 ? 'div' : _ref$as,
|
|
10
|
+
onClose = _ref.onClose,
|
|
11
|
+
onClick = _ref.onClick,
|
|
12
|
+
onMouseDown = _ref.onMouseDown,
|
|
13
|
+
onKeyDown = _ref.onKeyDown,
|
|
14
|
+
_ref$disableCloseOnCl = _ref.disableCloseOnClick,
|
|
15
|
+
disableCloseOnClick = _ref$disableCloseOnCl === void 0 ? false : _ref$disableCloseOnCl,
|
|
16
|
+
_ref$disableEscapeKey = _ref.disableEscapeKeyDown,
|
|
17
|
+
disableEscapeKeyDown = _ref$disableEscapeKey === void 0 ? false : _ref$disableEscapeKey,
|
|
18
|
+
otherProps = _objectWithoutProperties(_ref, ["as", "onClose", "onClick", "onMouseDown", "onKeyDown", "disableCloseOnClick", "disableEscapeKeyDown"]);
|
|
19
|
+
|
|
20
|
+
var ref = useRef();
|
|
21
|
+
var mouseDownTargetRef = useRef(null);
|
|
22
|
+
|
|
23
|
+
var handleClick = function handleClick(e) {
|
|
23
24
|
// Ignore the events not coming from the "backdrop"
|
|
24
25
|
// We don't want to close the dialog when clicking the dialog content.
|
|
25
26
|
if (e.target !== e.currentTarget) {
|
|
@@ -36,11 +37,11 @@ export const ModalBackdrop = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
|
|
|
36
37
|
e.stopPropagation();
|
|
37
38
|
};
|
|
38
39
|
|
|
39
|
-
|
|
40
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
40
41
|
mouseDownTargetRef.current = e.target;
|
|
41
42
|
};
|
|
42
43
|
|
|
43
|
-
|
|
44
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
44
45
|
if (e.key === 'Escape') {
|
|
45
46
|
!disableEscapeKeyDown && (onClose == null ? void 0 : onClose());
|
|
46
47
|
e.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Modal/ModalBackdrop.tsx"],"names":["useRef","forwardRef","assignMultipleRefs","wrapEvent","ModalBackdrop","forwardedRef","as","Comp","onClose","onClick","onMouseDown","onKeyDown","disableCloseOnClick","disableEscapeKeyDown","otherProps","ref","mouseDownTargetRef","handleClick","e","target","currentTarget","current","stopPropagation","handleMouseDown","handleKeyDown","key"],"mappings":";;
|
|
1
|
+
{"version":3,"sources":["../../../src/Modal/ModalBackdrop.tsx"],"names":["useRef","forwardRef","assignMultipleRefs","wrapEvent","ModalBackdrop","forwardedRef","as","Comp","onClose","onClick","onMouseDown","onKeyDown","disableCloseOnClick","disableEscapeKeyDown","otherProps","ref","mouseDownTargetRef","handleClick","e","target","currentTarget","current","stopPropagation","handleMouseDown","handleKeyDown","key"],"mappings":";;AAOA,SAASA,MAAT,EAAiBC,UAAjB,QAAmC,OAAnC;AAEA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,SAASC,SAAT,QAA0B,oBAA1B;;AAWA,OAAO,IAAMC,aAAa,gBAAGH,UAAU,CACrC,gBAWEI,YAXF,EAYK;AAAA,qBAVDC,EAUC;AAAA,MAVGC,IAUH,wBAVU,KAUV;AAAA,MATDC,OASC,QATDA,OASC;AAAA,MARDC,OAQC,QARDA,OAQC;AAAA,MAPDC,WAOC,QAPDA,WAOC;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,mCALDC,mBAKC;AAAA,MALDA,mBAKC,sCALqB,KAKrB;AAAA,mCAJDC,oBAIC;AAAA,MAJDA,oBAIC,sCAJsB,KAItB;AAAA,MAHEC,UAGF;;AACH,MAAMC,GAAG,GAAGf,MAAM,EAAlB;AACA,MAAMgB,kBAAkB,GAAGhB,MAAM,CAAqB,IAArB,CAAjC;;AAEA,MAAMiB,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAmC;AACrD;AACA;AACA,QAAIA,CAAC,CAACC,MAAF,KAAaD,CAAC,CAACE,aAAnB,EAAkC;AAChC;AACD,KALoD,CAOrD;;;AACA,QAAIF,CAAC,CAACC,MAAF,KAAaH,kBAAkB,CAACK,OAApC,EAA6C;AAC3C;AACD;;AAEDL,IAAAA,kBAAkB,CAACK,OAAnB,GAA6B,IAA7B;AACA,KAACT,mBAAD,KAAwBJ,OAAxB,oBAAwBA,OAAO,EAA/B;AACAU,IAAAA,CAAC,CAACI,eAAF;AACD,GAfD;;AAiBA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACL,CAAD,EAAmC;AACzDF,IAAAA,kBAAkB,CAACK,OAAnB,GAA6BH,CAAC,CAACC,MAA/B;AACD,GAFD;;AAIA,MAAMK,aAAa,GAAG,SAAhBA,aAAgB,CAACN,CAAD,EAAsC;AAC1D,QAAIA,CAAC,CAACO,GAAF,KAAU,QAAd,EAAwB;AACtB,OAACZ,oBAAD,KAAyBL,OAAzB,oBAAyBA,OAAO,EAAhC;AACAU,MAAAA,CAAC,CAACI,eAAF;AACD;AACF,GALD;;AAOA,sBACE,KAAC,IAAD;AACE,IAAA,GAAG,EAAEpB,kBAAkB,CAACa,GAAD,EAAMV,YAAN,CADzB;AAEE,uBAAgB,EAFlB;AAGE,IAAA,OAAO,EAAEF,SAAS,CAACM,OAAD,EAAUQ,WAAV,CAHpB;AAIE,IAAA,WAAW,EAAEd,SAAS,CAACO,WAAD,EAAca,eAAd,CAJxB;AAKE,IAAA,SAAS,EAAEpB,SAAS,CAACQ,SAAD,EAAYa,aAAZ;AALtB,KAMMV,UANN,EADF;AAUD,CAvDoC,CAAhC","sourcesContent":["import type {\n HTMLAttributes,\n ElementType,\n CSSProperties,\n MouseEvent,\n KeyboardEvent,\n} from 'react';\nimport { useRef, forwardRef } from 'react';\n\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { wrapEvent } from '../utils/wrapEvent';\n\nexport interface ModalBackdropProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n onClose?: () => void;\n style?: CSSProperties;\n disableCloseOnClick?: boolean;\n disableEscapeKeyDown?: boolean;\n}\n\nexport const ModalBackdrop = forwardRef<HTMLDivElement, ModalBackdropProps>(\n (\n {\n as: Comp = 'div',\n onClose,\n onClick,\n onMouseDown,\n onKeyDown,\n disableCloseOnClick = false,\n disableEscapeKeyDown = false,\n ...otherProps\n },\n forwardedRef\n ) => {\n const ref = useRef();\n const mouseDownTargetRef = useRef<EventTarget | null>(null);\n\n const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n // Ignore the events not coming from the \"backdrop\"\n // We don't want to close the dialog when clicking the dialog content.\n if (e.target !== e.currentTarget) {\n return;\n }\n\n // Make sure the event starts and ends on the same DOM element.\n if (e.target !== mouseDownTargetRef.current) {\n return;\n }\n\n mouseDownTargetRef.current = null;\n !disableCloseOnClick && onClose?.();\n e.stopPropagation();\n };\n\n const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n mouseDownTargetRef.current = e.target;\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape') {\n !disableEscapeKeyDown && onClose?.();\n e.stopPropagation();\n }\n };\n\n return (\n <Comp\n ref={assignMultipleRefs(ref, forwardedRef)}\n data-modal-root=\"\"\n onClick={wrapEvent(onClick, handleClick)}\n onMouseDown={wrapEvent(onMouseDown, handleMouseDown)}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n {...otherProps}\n />\n );\n }\n);\n"],"file":"ModalBackdrop.js"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import { Placement, Modifier, PositioningStrategy, Rect } from '@popperjs/core';
|
|
1
|
+
import type { HTMLAttributes, ElementType, RefObject, ReactNode } from 'react';
|
|
2
|
+
import type { Placement, Modifier, PositioningStrategy, Rect } from '@popperjs/core';
|
|
3
3
|
export declare type OffsetsFunction = (arg0: {
|
|
4
4
|
popper: Rect;
|
|
5
5
|
reference: Rect;
|
|
6
6
|
placement: Placement;
|
|
7
7
|
}) => [number | null | undefined, number | null | undefined];
|
|
8
|
-
export interface PopperProps extends
|
|
9
|
-
as?:
|
|
10
|
-
innerAs?:
|
|
11
|
-
anchorEl:
|
|
12
|
-
children?:
|
|
8
|
+
export interface PopperProps extends HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
as?: ElementType<any>;
|
|
10
|
+
innerAs?: ElementType<any>;
|
|
11
|
+
anchorEl: RefObject<HTMLElement>;
|
|
12
|
+
children?: ReactNode;
|
|
13
13
|
placement?: Placement;
|
|
14
14
|
strategy?: PositioningStrategy;
|
|
15
15
|
modifiers?: Array<Partial<Modifier<any, any>>>;
|
|
@@ -32,4 +32,4 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
32
32
|
*/
|
|
33
33
|
arrowPadding?: number;
|
|
34
34
|
}
|
|
35
|
-
export declare const Popper:
|
|
35
|
+
export declare const Popper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<PopperProps & import("react").RefAttributes<HTMLDivElement>>>;
|