@basic-ui/core 0.0.38 → 0.0.39
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.map +1 -1
- package/build/esm/Accordion/Accordion.d.ts +1 -1
- package/build/esm/Accordion/Accordion.js +23 -17
- package/build/esm/Accordion/Accordion.js.map +1 -1
- package/build/esm/Accordion/AccordionBody.d.ts +1 -1
- package/build/esm/Accordion/AccordionBody.js +24 -15
- package/build/esm/Accordion/AccordionBody.js.map +1 -1
- package/build/esm/Accordion/AccordionHeader.d.ts +1 -1
- package/build/esm/Accordion/AccordionHeader.js +46 -31
- package/build/esm/Accordion/AccordionHeader.js.map +1 -1
- package/build/esm/Accordion/AccordionItem.d.ts +1 -1
- package/build/esm/Accordion/AccordionItem.js +17 -16
- package/build/esm/Accordion/AccordionItem.js.map +1 -1
- package/build/esm/Accordion/context.d.ts +1 -1
- package/build/esm/Accordion/context.js +12 -10
- package/build/esm/Accordion/context.js.map +1 -1
- package/build/esm/CheckBox/CheckBox.d.ts +1 -1
- package/build/esm/CheckBox/CheckBox.js +20 -12
- package/build/esm/CheckBox/CheckBox.js.map +1 -1
- package/build/esm/ComboBox/Combobox.d.ts +1 -1
- package/build/esm/ComboBox/Combobox.js +53 -46
- package/build/esm/ComboBox/Combobox.js.map +1 -1
- package/build/esm/ComboBox/ComboboxButton.d.ts +1 -1
- package/build/esm/ComboBox/ComboboxButton.js +20 -20
- package/build/esm/ComboBox/ComboboxButton.js.map +1 -1
- package/build/esm/ComboBox/ComboboxInput.d.ts +1 -1
- package/build/esm/ComboBox/ComboboxInput.js +53 -50
- package/build/esm/ComboBox/ComboboxInput.js.map +1 -1
- package/build/esm/ComboBox/ComboboxLabel.d.ts +1 -1
- package/build/esm/ComboBox/ComboboxLabel.js +12 -12
- package/build/esm/ComboBox/ComboboxLabel.js.map +1 -1
- package/build/esm/ComboBox/ComboboxList.d.ts +1 -1
- package/build/esm/ComboBox/ComboboxList.js +16 -17
- package/build/esm/ComboBox/ComboboxList.js.map +1 -1
- package/build/esm/ComboBox/ComboboxOption.d.ts +1 -1
- package/build/esm/ComboBox/ComboboxOption.js +32 -34
- package/build/esm/ComboBox/ComboboxOption.js.map +1 -1
- package/build/esm/ComboBox/ComboboxPopover.d.ts +1 -1
- package/build/esm/ComboBox/ComboboxPopover.js +16 -17
- package/build/esm/ComboBox/ComboboxPopover.js.map +1 -1
- package/build/esm/ComboBox/context.d.ts +3 -3
- package/build/esm/ComboBox/context.js +6 -5
- package/build/esm/ComboBox/context.js.map +1 -1
- package/build/esm/ComboBox/hooks.d.ts +1 -1
- 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 +1 -1
- package/build/esm/FocusLock/FocusLock.js +18 -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.js +10 -11
- package/build/esm/FocusLock/useFocusLock.js.map +1 -1
- package/build/esm/List/List.d.ts +1 -1
- package/build/esm/List/List.js +6 -6
- package/build/esm/List/List.js.map +1 -1
- package/build/esm/List/ListItem.d.ts +1 -1
- package/build/esm/List/ListItem.js +6 -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 +1 -1
- package/build/esm/Menu/Menu.js +30 -21
- package/build/esm/Menu/Menu.js.map +1 -1
- package/build/esm/Menu/MenuButton.d.ts +1 -1
- package/build/esm/Menu/MenuButton.js +28 -24
- package/build/esm/Menu/MenuButton.js.map +1 -1
- package/build/esm/Menu/MenuItem.d.ts +1 -1
- package/build/esm/Menu/MenuItem.js +24 -24
- package/build/esm/Menu/MenuItem.js.map +1 -1
- package/build/esm/Menu/MenuList.d.ts +1 -1
- package/build/esm/Menu/MenuList.js +62 -45
- package/build/esm/Menu/MenuList.js.map +1 -1
- package/build/esm/Menu/MenuPopover.d.ts +2 -2
- package/build/esm/Menu/MenuPopover.js +9 -10
- package/build/esm/Menu/MenuPopover.js.map +1 -1
- package/build/esm/Menu/context.d.ts +1 -1
- package/build/esm/Menu/context.js +11 -8
- package/build/esm/Menu/context.js.map +1 -1
- package/build/esm/Modal/Modal.d.ts +2 -2
- package/build/esm/Modal/Modal.js +12 -10
- package/build/esm/Modal/Modal.js.map +1 -1
- package/build/esm/Modal/ModalBackdrop.d.ts +1 -1
- package/build/esm/Modal/ModalBackdrop.js +21 -19
- package/build/esm/Modal/ModalBackdrop.js.map +1 -1
- package/build/esm/Popper/Popper.d.ts +2 -2
- package/build/esm/Popper/Popper.js +47 -37
- package/build/esm/Popper/Popper.js.map +1 -1
- package/build/esm/Popper/PopperArrow.d.ts +1 -1
- package/build/esm/Popper/PopperArrow.js +9 -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 +2 -2
- package/build/esm/RadioButton/RadioButton.js +13 -13
- package/build/esm/RadioButton/RadioButton.js.map +1 -1
- package/build/esm/RadioButton/RadioGroup.d.ts +2 -2
- package/build/esm/RadioButton/RadioGroup.js +23 -16
- package/build/esm/RadioButton/RadioGroup.js.map +1 -1
- package/build/esm/RadioButton/context.js +6 -5
- package/build/esm/RadioButton/context.js.map +1 -1
- package/build/esm/SkipNav/SkipNav.d.ts +1 -1
- package/build/esm/SkipNav/SkipNav.js +6 -6
- package/build/esm/SkipNav/SkipNav.js.map +1 -1
- package/build/esm/Spinner/Spinner.d.ts +1 -1
- package/build/esm/Spinner/Spinner.js +42 -31
- package/build/esm/Spinner/Spinner.js.map +1 -1
- package/build/esm/Spinner/SpinnerButton.d.ts +1 -1
- package/build/esm/Spinner/SpinnerButton.js +12 -12
- package/build/esm/Spinner/SpinnerButton.js.map +1 -1
- package/build/esm/Spinner/context.js +6 -5
- package/build/esm/Spinner/context.js.map +1 -1
- package/build/esm/Tabs/Tab.d.ts +1 -1
- package/build/esm/Tabs/Tab.js +30 -29
- package/build/esm/Tabs/Tab.js.map +1 -1
- package/build/esm/Tabs/TabList.d.ts +1 -1
- package/build/esm/Tabs/TabList.js +25 -21
- package/build/esm/Tabs/TabList.js.map +1 -1
- package/build/esm/Tabs/TabPanel.d.ts +1 -1
- package/build/esm/Tabs/TabPanel.js +13 -12
- package/build/esm/Tabs/TabPanel.js.map +1 -1
- package/build/esm/Tabs/TabPanels.d.ts +1 -1
- package/build/esm/Tabs/TabPanels.js +14 -12
- package/build/esm/Tabs/TabPanels.js.map +1 -1
- package/build/esm/Tabs/Tabs.d.ts +1 -1
- package/build/esm/Tabs/Tabs.js +28 -14
- package/build/esm/Tabs/Tabs.js.map +1 -1
- package/build/esm/Tabs/context.d.ts +1 -1
- package/build/esm/Tabs/context.js +12 -10
- package/build/esm/Tabs/context.js.map +1 -1
- package/build/esm/Tooltip/Tooltip.d.ts +2 -1
- package/build/esm/Tooltip/Tooltip.js +17 -15
- 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 +1 -1
- package/build/esm/Tooltip/useTooltip.js +31 -29
- package/build/esm/Tooltip/useTooltip.js.map +1 -1
- 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 +1 -1
- 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.js +13 -9
- package/build/esm/hooks/useFocusState.js.map +1 -1
- package/build/esm/hooks/useGestureHandlers.js +59 -63
- package/build/esm/hooks/useGestureHandlers.js.map +1 -1
- package/build/esm/hooks/useMeasure.js +13 -7
- package/build/esm/hooks/useMeasure.js.map +1 -1
- 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.js +7 -3
- package/build/esm/utils/wrapEvent.js.map +1 -1
- package/build/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/Accordion/Accordion.story.tsx +1 -0
- package/src/Accordion/Accordion.tsx +4 -2
- package/src/Accordion/AccordionBody.tsx +4 -4
- package/src/Accordion/AccordionHeader.tsx +7 -8
- package/src/Accordion/AccordionItem.tsx +4 -2
- package/src/Accordion/context.ts +2 -1
- package/src/CheckBox/CheckBox.tsx +2 -1
- package/src/ComboBox/ComboBox.story.tsx +3 -3
- package/src/ComboBox/Combobox.tsx +8 -10
- package/src/ComboBox/ComboboxButton.tsx +4 -9
- package/src/ComboBox/ComboboxInput.tsx +2 -1
- package/src/ComboBox/ComboboxLabel.tsx +2 -1
- package/src/ComboBox/ComboboxList.tsx +2 -1
- package/src/ComboBox/ComboboxOption.tsx +1 -1
- package/src/ComboBox/ComboboxPopover.tsx +2 -1
- package/src/ComboBox/context.ts +4 -3
- package/src/ComboBox/hooks.tsx +6 -9
- package/src/FocusLock/FocusLock.tsx +2 -1
- package/src/FocusLock/useFocusLock.ts +1 -0
- package/src/List/List.tsx +1 -1
- package/src/List/ListItem.tsx +1 -1
- package/src/Menu/Menu.story.tsx +6 -5
- package/src/Menu/Menu.tsx +4 -2
- package/src/Menu/MenuButton.tsx +4 -8
- package/src/Menu/MenuItem.tsx +2 -1
- package/src/Menu/MenuList.tsx +4 -8
- package/src/Menu/MenuPopover.tsx +4 -2
- package/src/Menu/context.ts +2 -1
- package/src/Modal/Modal.story.tsx +1 -0
- package/src/Modal/Modal.tsx +4 -2
- package/src/Modal/ModalBackdrop.tsx +2 -1
- package/src/Modal/NavDrawer.story.tsx +3 -3
- package/src/Popper/Popper.story.tsx +3 -4
- package/src/Popper/Popper.tsx +8 -7
- package/src/Popper/PopperArrow.tsx +2 -1
- 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 +4 -2
- package/src/RadioButton/RadioGroup.tsx +4 -2
- package/src/SkipNav/SkipNav.tsx +1 -1
- package/src/Spinner/Spinner.story.tsx +1 -0
- package/src/Spinner/Spinner.tsx +2 -1
- package/src/Spinner/SpinnerButton.tsx +2 -1
- package/src/Tabs/Tab.story.tsx +1 -0
- package/src/Tabs/Tab.tsx +4 -4
- package/src/Tabs/TabList.tsx +2 -1
- package/src/Tabs/TabPanel.tsx +2 -1
- package/src/Tabs/TabPanels.tsx +1 -1
- package/src/Tabs/Tabs.tsx +2 -1
- package/src/Tabs/context.ts +2 -1
- package/src/Tooltip/Tooltip.story.tsx +2 -1
- package/src/Tooltip/Tooltip.tsx +3 -7
- package/src/Tooltip/stateMachine.ts +1 -1
- package/src/Tooltip/useTooltip.ts +3 -1
- package/src/hooks/useAutoFocus.ts +1 -0
- package/src/hooks/useChildrenCounter.ts +2 -1
- package/src/hooks/useControlledState.ts +3 -1
- package/src/hooks/useFocusReturn.ts +2 -1
- package/src/hooks/useFocusState.ts +1 -0
- package/src/hooks/useReducerMachine.ts +2 -1
- package/src/hooks/useScope.ts +2 -1
- package/src/utils/assignRef.ts +1 -1
- package/build/esm/hooks/useId.d.ts +0 -3
- package/build/esm/hooks/useId.js +0 -16
- package/build/esm/hooks/useId.js.map +0 -1
|
@@ -1,29 +1,31 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import { useRef } from 'react';
|
|
4
|
+
import * as React from 'react';
|
|
4
5
|
import { useFocusLock } from './useFocusLock';
|
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
7
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
export var FocusLock = function FocusLock(props) {
|
|
10
|
+
var _props$as = props.as,
|
|
11
|
+
Comp = _props$as === void 0 ? 'div' : _props$as,
|
|
12
|
+
childRef = props.childRef,
|
|
13
|
+
_props$enabled = props.enabled,
|
|
14
|
+
enabled = _props$enabled === void 0 ? false : _props$enabled,
|
|
15
|
+
_props$style = props.style,
|
|
16
|
+
style = _props$style === void 0 ? {} : _props$style,
|
|
17
|
+
children = props.children,
|
|
18
|
+
otherProps = _objectWithoutProperties(props, ["as", "childRef", "enabled", "style", "children"]);
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
var lockStartRef = useRef(null);
|
|
21
|
+
var lockEndRef = useRef(null);
|
|
20
22
|
useFocusLock(childRef, {
|
|
21
|
-
enabled,
|
|
22
|
-
lockStartRef,
|
|
23
|
-
lockEndRef
|
|
23
|
+
enabled: enabled,
|
|
24
|
+
lockStartRef: lockStartRef,
|
|
25
|
+
lockEndRef: lockEndRef
|
|
24
26
|
});
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
var lockStyle = _extends({
|
|
27
29
|
width: 1,
|
|
28
30
|
height: 0,
|
|
29
31
|
padding: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/FocusLock/FocusLock.tsx"],"names":["useRef","useFocusLock","FocusLock","props","as","Comp","childRef","enabled","style","children","otherProps","lockStartRef","lockEndRef","lockStyle","width","height","padding","overflow","position","top","left"],"mappings":";;AAAA,SAASA,MAAT,QAAuB,OAAvB;AAEA,SAASC,YAAT,QAA6B,gBAA7B;;;;AAUA,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/FocusLock/FocusLock.tsx"],"names":["useRef","React","useFocusLock","FocusLock","props","as","Comp","childRef","enabled","style","children","otherProps","lockStartRef","lockEndRef","lockStyle","width","height","padding","overflow","position","top","left"],"mappings":";;AAAA,SAASA,MAAT,QAAuB,OAAvB;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,YAAT,QAA6B,gBAA7B;;;;AAUA,OAAO,IAAMC,SAAmC,GAAG,SAASA,SAAT,CAAmBC,KAAnB,EAA0B;AAAA,kBAQvEA,KARuE,CAEzEC,EAFyE;AAAA,MAErEC,IAFqE,0BAE9D,KAF8D;AAAA,MAGzEC,QAHyE,GAQvEH,KARuE,CAGzEG,QAHyE;AAAA,uBAQvEH,KARuE,CAIzEI,OAJyE;AAAA,MAIzEA,OAJyE,+BAI/D,KAJ+D;AAAA,qBAQvEJ,KARuE,CAKzEK,KALyE;AAAA,MAKzEA,KALyE,6BAKjE,EALiE;AAAA,MAMzEC,QANyE,GAQvEN,KARuE,CAMzEM,QANyE;AAAA,MAOtEC,UAPsE,4BAQvEP,KARuE;;AAS3E,MAAMQ,YAAY,GAAGZ,MAAM,CAAc,IAAd,CAA3B;AACA,MAAMa,UAAU,GAAGb,MAAM,CAAc,IAAd,CAAzB;AAEAE,EAAAA,YAAY,CAACK,QAAD,EAAW;AAAEC,IAAAA,OAAO,EAAPA,OAAF;AAAWI,IAAAA,YAAY,EAAZA,YAAX;AAAyBC,IAAAA,UAAU,EAAVA;AAAzB,GAAX,CAAZ;;AAEA,MAAMC,SAAS;AACbC,IAAAA,KAAK,EAAE,CADM;AAEbC,IAAAA,MAAM,EAAE,CAFK;AAGbC,IAAAA,OAAO,EAAE,CAHI;AAIbC,IAAAA,QAAQ,EAAE,QAJG;AAKbC,IAAAA,QAAQ,EAAE,OALG;AAMbC,IAAAA,GAAG,EAAE,CANQ;AAObC,IAAAA,IAAI,EAAE;AAPO,KAQVZ,KARU,CAAf;;AAWA,sBACE;AAAA,4BACE,KAAC,IAAD;AACE,MAAA,GAAG,EAAEG,YADP;AAEE,+BAAsB,EAFxB;AAGE,qBAAa,IAHf;AAIE,MAAA,QAAQ,EAAE,CAJZ;AAKE,MAAA,KAAK,EAAEE;AALT,OAMMH,UANN,EADF,EASGD,QATH,eAUE,KAAC,IAAD;AACE,MAAA,GAAG,EAAEG,UADP;AAEE,6BAAoB,EAFtB;AAGE,qBAAa,IAHf;AAIE,MAAA,QAAQ,EAAE,CAJZ;AAKE,MAAA,KAAK,EAAEC;AALT,OAMMH,UANN,EAVF;AAAA,IADF;AAqBD,CA9CM","sourcesContent":["import { useRef } from 'react';\nimport * as React from 'react';\n\nimport { useFocusLock } from './useFocusLock';\n\nexport interface FocusLockProps extends React.HTMLAttributes<HTMLDivElement> {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n children?: React.ReactNode;\n childRef: React.MutableRefObject<HTMLElement | null>;\n enabled?: boolean;\n}\n\nexport const FocusLock: React.FC<FocusLockProps> = function FocusLock(props) {\n const {\n as: Comp = 'div',\n childRef,\n enabled = false,\n style = {},\n children,\n ...otherProps\n } = props;\n const lockStartRef = useRef<HTMLElement>(null);\n const lockEndRef = useRef<HTMLElement>(null);\n\n useFocusLock(childRef, { enabled, lockStartRef, lockEndRef });\n\n const lockStyle = {\n width: 1,\n height: 0,\n padding: 0,\n overflow: 'hidden',\n position: 'fixed',\n top: 1,\n left: 1,\n ...style,\n };\n\n return (\n <>\n <Comp\n ref={lockStartRef}\n data-focus-lock-start=\"\"\n aria-hidden={true}\n tabIndex={0}\n style={lockStyle}\n {...otherProps}\n />\n {children}\n <Comp\n ref={lockEndRef}\n data-focus-lock-end=\"\"\n aria-hidden={true}\n tabIndex={0}\n style={lockStyle}\n {...otherProps}\n />\n </>\n );\n};\n"],"file":"FocusLock.js"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var tabblable = ['button:enabled:not([readonly])', 'select:enabled:not([readonly])', 'textarea:enabled:not([readonly])', 'input:enabled:not([readonly])', 'a[href]', 'area[href]', 'iframe', 'object', 'embed', '[tabindex]', '[contenteditable]', '[autofocus]'].join(',');
|
|
2
2
|
/* This is naive and will not consider tabIndex */
|
|
3
3
|
|
|
4
|
-
export
|
|
4
|
+
export var getTabblableNodes = function getTabblableNodes(parentNode) {
|
|
5
5
|
if (!parentNode) {
|
|
6
6
|
return [];
|
|
7
7
|
}
|
|
@@ -9,12 +9,12 @@ export const getTabblableNodes = parentNode => {
|
|
|
9
9
|
return Array.from(parentNode.querySelectorAll(tabblable));
|
|
10
10
|
};
|
|
11
11
|
export function focusOnChildNode(parentNode, itemIndex) {
|
|
12
|
-
|
|
12
|
+
var elements = getTabblableNodes(parentNode);
|
|
13
13
|
|
|
14
14
|
if (elements.length > 0) {
|
|
15
15
|
elements[itemIndex === -1 ? elements.length - 1 : 0].focus();
|
|
16
16
|
} else {
|
|
17
|
-
|
|
17
|
+
var currentTabIndex = parentNode.tabIndex;
|
|
18
18
|
parentNode.tabIndex = 0;
|
|
19
19
|
parentNode.focus();
|
|
20
20
|
parentNode.tabIndex = currentTabIndex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/FocusLock/tabUtils.ts"],"names":["tabblable","join","getTabblableNodes","parentNode","Array","from","querySelectorAll","focusOnChildNode","itemIndex","elements","length","focus","currentTabIndex","tabIndex"],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/FocusLock/tabUtils.ts"],"names":["tabblable","join","getTabblableNodes","parentNode","Array","from","querySelectorAll","focusOnChildNode","itemIndex","elements","length","focus","currentTabIndex","tabIndex"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG,CACvB,gCADuB,EAEvB,gCAFuB,EAGvB,kCAHuB,EAIvB,+BAJuB,EAMvB,SANuB,EAOvB,YAPuB,EASvB,QATuB,EAUvB,QAVuB,EAWvB,OAXuB,EAavB,YAbuB,EAcvB,mBAduB,EAevB,aAfuB,EAgBvBC,IAhBuB,CAgBlB,GAhBkB,CAAlB;AAkBP;;AACA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAC/BC,UAD+B,EAEb;AAClB,MAAI,CAACA,UAAL,EAAiB;AACf,WAAO,EAAP;AACD;;AAED,SAAOC,KAAK,CAACC,IAAN,CAAWF,UAAU,CAACG,gBAAX,CAA4BN,SAA5B,CAAX,CAAP;AACD,CARM;AAUP,OAAO,SAASO,gBAAT,CAA0BJ,UAA1B,EAAmDK,SAAnD,EAAsE;AAC3E,MAAMC,QAAQ,GAAGP,iBAAiB,CAACC,UAAD,CAAlC;;AACA,MAAIM,QAAQ,CAACC,MAAT,GAAkB,CAAtB,EAAyB;AACvBD,IAAAA,QAAQ,CAACD,SAAS,KAAK,CAAC,CAAf,GAAmBC,QAAQ,CAACC,MAAT,GAAkB,CAArC,GAAyC,CAA1C,CAAR,CAAqDC,KAArD;AACD,GAFD,MAEO;AACL,QAAMC,eAAe,GAAGT,UAAU,CAACU,QAAnC;AACAV,IAAAA,UAAU,CAACU,QAAX,GAAsB,CAAtB;AACAV,IAAAA,UAAU,CAACQ,KAAX;AACAR,IAAAA,UAAU,CAACU,QAAX,GAAsBD,eAAtB;AACD;AACF","sourcesContent":["export const tabblable = [\n 'button:enabled:not([readonly])',\n 'select:enabled:not([readonly])',\n 'textarea:enabled:not([readonly])',\n 'input:enabled:not([readonly])',\n\n 'a[href]',\n 'area[href]',\n\n 'iframe',\n 'object',\n 'embed',\n\n '[tabindex]',\n '[contenteditable]',\n '[autofocus]',\n].join(',');\n\n/* This is naive and will not consider tabIndex */\nexport const getTabblableNodes = (\n parentNode: HTMLElement | null\n): HTMLElement[] => {\n if (!parentNode) {\n return [];\n }\n\n return Array.from(parentNode.querySelectorAll(tabblable));\n};\n\nexport function focusOnChildNode(parentNode: HTMLElement, itemIndex: 0 | -1) {\n const elements = getTabblableNodes(parentNode);\n if (elements.length > 0) {\n elements[itemIndex === -1 ? elements.length - 1 : 0].focus();\n } else {\n const currentTabIndex = parentNode.tabIndex;\n parentNode.tabIndex = 0;\n parentNode.focus();\n parentNode.tabIndex = currentTabIndex;\n }\n}\n"],"file":"tabUtils.js"}
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { focusOnChildNode } from './tabUtils';
|
|
3
|
-
|
|
3
|
+
var focusLockStack = [];
|
|
4
4
|
export function useFocusLock(ref, opts) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const rootEl = ref.current;
|
|
5
|
+
var _opts$enabled = opts.enabled,
|
|
6
|
+
enabled = _opts$enabled === void 0 ? true : _opts$enabled,
|
|
7
|
+
lockStartRef = opts.lockStartRef,
|
|
8
|
+
lockEndRef = opts.lockEndRef;
|
|
9
|
+
useEffect(function () {
|
|
10
|
+
var rootEl = ref.current;
|
|
12
11
|
|
|
13
12
|
if (enabled && rootEl) {
|
|
14
13
|
focusLockStack.push(rootEl);
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
var listener = function listener(event) {
|
|
16
|
+
var isActiveFocusLock = focusLockStack[focusLockStack.length - 1] === rootEl;
|
|
18
17
|
|
|
19
18
|
if (!isActiveFocusLock) {
|
|
20
19
|
// Not the currently focused lock. Forget about it.
|
|
@@ -32,7 +31,7 @@ export function useFocusLock(ref, opts) {
|
|
|
32
31
|
};
|
|
33
32
|
|
|
34
33
|
document.addEventListener('focusin', listener);
|
|
35
|
-
return ()
|
|
34
|
+
return function () {
|
|
36
35
|
document.removeEventListener('focusin', listener); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
37
36
|
|
|
38
37
|
focusLockStack.pop();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/FocusLock/useFocusLock.ts"],"names":["useEffect","focusOnChildNode","focusLockStack","useFocusLock","ref","opts","enabled","lockStartRef","lockEndRef","rootEl","current","push","listener","event","isActiveFocusLock","length","target","document","contains","preventDefault","addEventListener","removeEventListener","pop"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;
|
|
1
|
+
{"version":3,"sources":["../../../src/FocusLock/useFocusLock.ts"],"names":["useEffect","focusOnChildNode","focusLockStack","useFocusLock","ref","opts","enabled","lockStartRef","lockEndRef","rootEl","current","push","listener","event","isActiveFocusLock","length","target","document","contains","preventDefault","addEventListener","removeEventListener","pop"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;AAEA,SAASC,gBAAT,QAAiC,YAAjC;AAQA,IAAMC,cAA6B,GAAG,EAAtC;AACA,OAAO,SAASC,YAAT,CACLC,GADK,EAELC,IAFK,EAGL;AAAA,sBACqDA,IADrD,CACQC,OADR;AAAA,MACQA,OADR,8BACkB,IADlB;AAAA,MACwBC,YADxB,GACqDF,IADrD,CACwBE,YADxB;AAAA,MACsCC,UADtC,GACqDH,IADrD,CACsCG,UADtC;AAGAR,EAAAA,SAAS,CAAC,YAAM;AACd,QAAMS,MAAM,GAAGL,GAAG,CAACM,OAAnB;;AACA,QAAIJ,OAAO,IAAIG,MAAf,EAAuB;AACrBP,MAAAA,cAAc,CAACS,IAAf,CAAoBF,MAApB;;AAEA,UAAMG,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAuB;AACtC,YAAMC,iBAAiB,GACrBZ,cAAc,CAACA,cAAc,CAACa,MAAf,GAAwB,CAAzB,CAAd,KAA8CN,MADhD;;AAEA,YAAI,CAACK,iBAAL,EAAwB;AACtB;AACA;AACD;;AAED,YAAID,KAAK,CAACG,MAAN,KAAiBR,UAAU,CAACE,OAAhC,EAAyC;AACvCT,UAAAA,gBAAgB,CAACQ,MAAD,EAAS,CAAT,CAAhB;AACD,SAFD,MAEO,IAAII,KAAK,CAACG,MAAN,KAAiBT,YAAY,CAACG,OAAlC,EAA2C;AAChDT,UAAAA,gBAAgB,CAACQ,MAAD,EAAS,CAAC,CAAV,CAAhB;AACD,SAFM,MAEA,IACLQ,QAAQ,KAAKJ,KAAK,CAACG,MAAnB,IACAP,MAAM,KAAKI,KAAK,CAACG,MADjB,IAEA,CAACP,MAAM,CAACS,QAAP,CAAgBL,KAAK,CAACG,MAAtB,CAHI,EAIL;AACAH,UAAAA,KAAK,CAACM,cAAN;AACAlB,UAAAA,gBAAgB,CAACQ,MAAD,EAAS,CAAT,CAAhB;AACD;AACF,OApBD;;AAsBAQ,MAAAA,QAAQ,CAACG,gBAAT,CAA0B,SAA1B,EAAqCR,QAArC;AACA,aAAO,YAAM;AACXK,QAAAA,QAAQ,CAACI,mBAAT,CAA6B,SAA7B,EAAwCT,QAAxC,EADW,CAGX;;AACAV,QAAAA,cAAc,CAACoB,GAAf;AACD,OALD;AAMD,KAlCa,CAmCd;;AACD,GApCQ,EAoCN,CAAChB,OAAD,CApCM,CAAT;AAqCD","sourcesContent":["import { useEffect } from 'react';\n\nimport { focusOnChildNode } from './tabUtils';\n\nexport interface FocusLockOptions {\n enabled: boolean;\n lockStartRef: React.MutableRefObject<HTMLElement | null>;\n lockEndRef: React.MutableRefObject<HTMLElement | null>;\n}\n\nconst focusLockStack: HTMLElement[] = [];\nexport function useFocusLock(\n ref: React.MutableRefObject<HTMLElement | null>,\n opts: FocusLockOptions\n) {\n const { enabled = true, lockStartRef, lockEndRef } = opts;\n\n useEffect(() => {\n const rootEl = ref.current;\n if (enabled && rootEl) {\n focusLockStack.push(rootEl);\n\n const listener = (event: FocusEvent) => {\n const isActiveFocusLock =\n focusLockStack[focusLockStack.length - 1] === rootEl;\n if (!isActiveFocusLock) {\n // Not the currently focused lock. Forget about it.\n return;\n }\n\n if (event.target === lockEndRef.current) {\n focusOnChildNode(rootEl, 0);\n } else if (event.target === lockStartRef.current) {\n focusOnChildNode(rootEl, -1);\n } else if (\n document !== event.target &&\n rootEl !== event.target &&\n !rootEl.contains(event.target as any)\n ) {\n event.preventDefault();\n focusOnChildNode(rootEl, 0);\n }\n };\n\n document.addEventListener('focusin', listener);\n return () => {\n document.removeEventListener('focusin', listener);\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n focusLockStack.pop();\n };\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [enabled]);\n}\n"],"file":"useFocusLock.js"}
|
package/build/esm/List/List.d.ts
CHANGED
package/build/esm/List/List.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
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
|
+
import * as React from 'react';
|
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
otherProps = _objectWithoutPropertiesLoose(props, ["as"]);
|
|
6
|
+
export var List = /*#__PURE__*/forwardRef(function List(props, forwardedRef) {
|
|
7
|
+
var _props$as = props.as,
|
|
8
|
+
Comp = _props$as === void 0 ? 'ul' : _props$as,
|
|
9
|
+
otherProps = _objectWithoutProperties(props, ["as"]);
|
|
10
10
|
|
|
11
11
|
return /*#__PURE__*/_jsx(Comp, _extends({
|
|
12
12
|
ref: forwardedRef
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/List.tsx"],"names":["forwardRef","List","props","forwardedRef","as","Comp","otherProps"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;;
|
|
1
|
+
{"version":3,"sources":["../../../src/List/List.tsx"],"names":["forwardRef","React","List","props","forwardedRef","as","Comp","otherProps"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;;AAQA,OAAO,IAAMC,IAAI,gBAAGF,UAAU,CAA8B,SAASE,IAAT,CAC1DC,KAD0D,EAE1DC,YAF0D,EAG1D;AAAA,kBAC2CD,KAD3C,CACQE,EADR;AAAA,MACYC,IADZ,0BACmB,IADnB;AAAA,MAC4BC,UAD5B,4BAC2CJ,KAD3C;;AAGA,sBAAO,KAAC,IAAD;AAAM,IAAA,GAAG,EAAEC;AAAX,KAA6BG,UAA7B,EAAP;AACD,CAP6B,CAAvB","sourcesContent":["import { forwardRef } from 'react';\nimport * as React from 'react';\n\nexport interface ListProps extends React.HTMLAttributes<HTMLUListElement> {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n children?: React.ReactNode;\n}\n\nexport const List = forwardRef<HTMLUListElement, ListProps>(function List(\n props,\n forwardedRef\n) {\n const { as: Comp = 'ul', ...otherProps } = props;\n\n return <Comp ref={forwardedRef} {...otherProps} />;\n});\n"],"file":"List.js"}
|
|
@@ -1,12 +1,12 @@
|
|
|
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
|
+
import * as React from 'react';
|
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
otherProps = _objectWithoutPropertiesLoose(props, ["as"]);
|
|
6
|
+
export var ListItem = /*#__PURE__*/forwardRef(function ListItem(props, forwardedRef) {
|
|
7
|
+
var _props$as = props.as,
|
|
8
|
+
Comp = _props$as === void 0 ? 'li' : _props$as,
|
|
9
|
+
otherProps = _objectWithoutProperties(props, ["as"]);
|
|
10
10
|
|
|
11
11
|
return /*#__PURE__*/_jsx(Comp, _extends({
|
|
12
12
|
tabIndex: -1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/ListItem.tsx"],"names":["forwardRef","ListItem","props","forwardedRef","as","Comp","otherProps"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;;
|
|
1
|
+
{"version":3,"sources":["../../../src/List/ListItem.tsx"],"names":["forwardRef","React","ListItem","props","forwardedRef","as","Comp","otherProps"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;;AAQA,OAAO,IAAMC,QAAQ,gBAAGF,UAAU,CAChC,SAASE,QAAT,CAAkBC,KAAlB,EAAyBC,YAAzB,EAAuC;AAAA,kBACMD,KADN,CAC7BE,EAD6B;AAAA,MACzBC,IADyB,0BAClB,IADkB;AAAA,MACTC,UADS,4BACMJ,KADN;;AAGrC,sBACE,KAAC,IAAD;AACE,IAAA,QAAQ,EAAE,CAAC,CADb;AAEE,sBAAe,EAFjB;AAGE,IAAA,GAAG,EAAEC;AAHP,KAIMG,UAJN,EADF;AAQD,CAZ+B,CAA3B","sourcesContent":["import { forwardRef } from 'react';\nimport * as React from 'react';\n\nexport interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n children?: React.ReactNode;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n function ListItem(props, forwardedRef) {\n const { as: Comp = 'li', ...otherProps } = props;\n\n return (\n <Comp\n tabIndex={-1}\n data-list-item=\"\"\n ref={forwardedRef}\n {...otherProps}\n />\n );\n }\n);\n"],"file":"ListItem.js"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react'; // List Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
var ListContext = /*#__PURE__*/createContext(null);
|
|
4
4
|
ListContext.displayName = 'ListContext';
|
|
5
|
-
export
|
|
6
|
-
|
|
5
|
+
export var useListContext = function useListContext() {
|
|
6
|
+
var ctx = useContext(ListContext);
|
|
7
7
|
|
|
8
8
|
if (!ctx) {
|
|
9
9
|
throw new Error('useListContext must be used within a ListContext.Provider');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/context.ts"],"names":["createContext","useContext","ListContext","displayName","useListContext","ctx","Error"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C,C,CAEA;;AAKA,
|
|
1
|
+
{"version":3,"sources":["../../../src/List/context.ts"],"names":["createContext","useContext","ListContext","displayName","useListContext","ctx","Error"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C,C,CAEA;;AAKA,IAAMC,WAAW,gBAAGF,aAAa,CAA0B,IAA1B,CAAjC;AACAE,WAAW,CAACC,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAwB;AACpD,MAAMC,GAAG,GAAGJ,UAAU,CAACC,WAAD,CAAtB;;AACA,MAAI,CAACG,GAAL,EAAU;AACR,UAAM,IAAIC,KAAJ,CACJ,2DADI,CAAN;AAGD;;AACD,SAAOD,GAAP;AACD,CARM","sourcesContent":["import { createContext, useContext } from 'react';\n\n// List Component\nexport interface ListContextProps {\n id: string | undefined;\n}\n\nconst ListContext = createContext<ListContextProps | null>(null);\nListContext.displayName = 'ListContext';\n\nexport const useListContext = (): ListContextProps => {\n const ctx = useContext(ListContext);\n if (!ctx) {\n throw new Error(\n 'useListContext must be used within a ListContext.Provider'\n );\n }\n return ctx;\n};\n"],"file":"context.js"}
|
package/build/esm/Menu/Menu.d.ts
CHANGED
package/build/esm/Menu/Menu.js
CHANGED
|
@@ -1,31 +1,40 @@
|
|
|
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, useRef, Fragment, useId } from 'react';
|
|
5
|
+
import * as React from 'react';
|
|
4
6
|
import { MenuProvider } from './context';
|
|
5
7
|
import { useControlledState } from '../hooks';
|
|
6
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
export
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
export var Menu = /*#__PURE__*/forwardRef(function Menu(props, forwardedRef) {
|
|
10
|
+
var _props$as = props.as,
|
|
11
|
+
Comp = _props$as === void 0 ? Fragment : _props$as,
|
|
12
|
+
openProp = props.open,
|
|
13
|
+
_props$defaultOpen = props.defaultOpen,
|
|
14
|
+
defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
|
|
15
|
+
onChangeProp = props.onChange,
|
|
16
|
+
otherProps = _objectWithoutProperties(props, ["as", "open", "defaultOpen", "onChange"]);
|
|
17
|
+
|
|
18
|
+
var menuListIdRef = useRef();
|
|
19
|
+
var openWithArrowKeyRef = useRef(null);
|
|
20
|
+
var buttonRef = useRef(null);
|
|
21
|
+
|
|
22
|
+
var _useControlledState = useControlledState(openProp, onChangeProp, defaultOpen, function (setState) {
|
|
23
|
+
return function (e, isOpen) {
|
|
24
|
+
setState(isOpen);
|
|
25
|
+
};
|
|
26
|
+
}),
|
|
27
|
+
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
28
|
+
open = _useControlledState2[0],
|
|
29
|
+
onChange = _useControlledState2[1];
|
|
15
30
|
|
|
16
|
-
const menuListIdRef = useRef();
|
|
17
|
-
const openWithArrowKeyRef = useRef(null);
|
|
18
|
-
const buttonRef = useRef(null);
|
|
19
|
-
const [open, onChange] = useControlledState(openProp, onChangeProp, defaultOpen, setState => (e, isOpen) => {
|
|
20
|
-
setState(isOpen);
|
|
21
|
-
});
|
|
22
31
|
menuListIdRef.current = useId();
|
|
23
|
-
|
|
24
|
-
menuListIdRef,
|
|
25
|
-
openWithArrowKeyRef,
|
|
26
|
-
open,
|
|
27
|
-
onChange,
|
|
28
|
-
buttonRef
|
|
32
|
+
var value = {
|
|
33
|
+
menuListIdRef: menuListIdRef,
|
|
34
|
+
openWithArrowKeyRef: openWithArrowKeyRef,
|
|
35
|
+
open: open,
|
|
36
|
+
onChange: onChange,
|
|
37
|
+
buttonRef: buttonRef
|
|
29
38
|
};
|
|
30
39
|
return /*#__PURE__*/_jsx(MenuProvider, {
|
|
31
40
|
value: value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Menu/Menu.tsx"],"names":["forwardRef","useRef","Fragment","useId","MenuProvider","useControlledState","Menu","props","forwardedRef","as","Comp","
|
|
1
|
+
{"version":3,"sources":["../../../src/Menu/Menu.tsx"],"names":["forwardRef","useRef","Fragment","useId","React","MenuProvider","useControlledState","Menu","props","forwardedRef","as","Comp","openProp","open","defaultOpen","onChangeProp","onChange","otherProps","menuListIdRef","openWithArrowKeyRef","buttonRef","setState","e","isOpen","current","value"],"mappings":";;;AAAA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,QAA7B,EAAuCC,KAAvC,QAAoD,OAApD;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAGA,SAASC,YAAT,QAA6B,WAA7B;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAiBA,OAAO,IAAMC,IAAI,gBAAGP,UAAU,CAA4B,SAASO,IAAT,CACxDC,KADwD,EAExDC,YAFwD,EAGxD;AAAA,kBAOID,KAPJ,CAEEE,EAFF;AAAA,MAEMC,IAFN,0BAEaT,QAFb;AAAA,MAGQU,QAHR,GAOIJ,KAPJ,CAGEK,IAHF;AAAA,2BAOIL,KAPJ,CAIEM,WAJF;AAAA,MAIEA,WAJF,mCAIgB,KAJhB;AAAA,MAKYC,YALZ,GAOIP,KAPJ,CAKEQ,QALF;AAAA,MAMKC,UANL,4BAOIT,KAPJ;;AAQA,MAAMU,aAAa,GAAGjB,MAAM,EAA5B;AACA,MAAMkB,mBAAmB,GAAGlB,MAAM,CAAiC,IAAjC,CAAlC;AACA,MAAMmB,SAAS,GAAGnB,MAAM,CAAoB,IAApB,CAAxB;;AAVA,4BAWyBK,kBAAkB,CACzCM,QADyC,EAEzCG,YAFyC,EAGzCD,WAHyC,EAIzC,UAACO,QAAD;AAAA,WAAc,UAACC,CAAD,EAAIC,MAAJ,EAAe;AAC3BF,MAAAA,QAAQ,CAACE,MAAD,CAAR;AACD,KAFD;AAAA,GAJyC,CAX3C;AAAA;AAAA,MAWOV,IAXP;AAAA,MAWaG,QAXb;;AAoBAE,EAAAA,aAAa,CAACM,OAAd,GAAwBrB,KAAK,EAA7B;AAEA,MAAMsB,KAAuB,GAAG;AAC9BP,IAAAA,aAAa,EAAbA,aAD8B;AAE9BC,IAAAA,mBAAmB,EAAnBA,mBAF8B;AAG9BN,IAAAA,IAAI,EAAJA,IAH8B;AAI9BG,IAAAA,QAAQ,EAARA,QAJ8B;AAK9BI,IAAAA,SAAS,EAATA;AAL8B,GAAhC;AAQA,sBACE,KAAC,YAAD;AAAc,IAAA,KAAK,EAAEK,KAArB;AAAA,2BACE,KAAC,IAAD;AAAM,MAAA,GAAG,EAAEhB;AAAX,OAA6BQ,UAA7B;AADF,IADF;AAKD,CAtC6B,CAAvB","sourcesContent":["import { forwardRef, useRef, Fragment, useId } from 'react';\nimport * as React from 'react';\n\nimport type { MenuContextProps } from './context';\nimport { MenuProvider } from './context';\nimport { useControlledState } from '../hooks';\n\nexport interface MenuProps {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n children?: React.ReactNode;\n onChange?: (\n e:\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement>\n | React.PointerEvent<HTMLElement>,\n isOpen: boolean\n ) => void;\n open?: boolean;\n defaultOpen?: boolean;\n}\n\nexport const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(\n props,\n forwardedRef\n) {\n const {\n as: Comp = Fragment,\n open: openProp,\n defaultOpen = false,\n onChange: onChangeProp,\n ...otherProps\n } = props;\n const menuListIdRef = useRef<string>();\n const openWithArrowKeyRef = useRef<'ArrowUp' | 'ArrowDown' | null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [open, onChange] = useControlledState(\n openProp,\n onChangeProp,\n defaultOpen,\n (setState) => (e, isOpen) => {\n setState(isOpen);\n }\n );\n\n menuListIdRef.current = useId();\n\n const value: MenuContextProps = {\n menuListIdRef,\n openWithArrowKeyRef,\n open,\n onChange,\n buttonRef,\n };\n\n return (\n <MenuProvider value={value}>\n <Comp ref={forwardedRef} {...otherProps} />\n </MenuProvider>\n );\n});\n"],"file":"Menu.js"}
|
|
@@ -1,41 +1,45 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import { forwardRef, useId } from 'react';
|
|
4
|
+
import * as React from 'react';
|
|
4
5
|
import { useMenuContext } from './context';
|
|
5
6
|
import { wrapEvent } from '../utils/wrapEvent';
|
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
export
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
otherProps = _objectWithoutPropertiesLoose(props, ["as", "id", "onClick", "onKeyDown", "disabled"]);
|
|
8
|
+
export var MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, forwardedRef) {
|
|
9
|
+
var _props$as = props.as,
|
|
10
|
+
Comp = _props$as === void 0 ? 'button' : _props$as,
|
|
11
|
+
preferredId = props.id,
|
|
12
|
+
onClick = props.onClick,
|
|
13
|
+
onKeyDown = props.onKeyDown,
|
|
14
|
+
disabled = props.disabled,
|
|
15
|
+
otherProps = _objectWithoutProperties(props, ["as", "id", "onClick", "onKeyDown", "disabled"]);
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = useMenuContext();
|
|
24
|
-
const buttonIdGenerated = useId();
|
|
25
|
-
const buttonId = preferredId || buttonIdGenerated;
|
|
17
|
+
var _useMenuContext = useMenuContext(),
|
|
18
|
+
menuListIdRef = _useMenuContext.menuListIdRef,
|
|
19
|
+
openWithArrowKeyRef = _useMenuContext.openWithArrowKeyRef,
|
|
20
|
+
open = _useMenuContext.open,
|
|
21
|
+
buttonRef = _useMenuContext.buttonRef,
|
|
22
|
+
onChange = _useMenuContext.onChange;
|
|
26
23
|
|
|
27
|
-
|
|
24
|
+
var buttonIdGenerated = useId();
|
|
25
|
+
var buttonId = preferredId || buttonIdGenerated;
|
|
26
|
+
|
|
27
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
28
28
|
if (disabled) {
|
|
29
29
|
return;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
buttonRef.current = e.currentTarget;
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
var isArrowKey = function isArrowKey() {
|
|
35
|
+
return ['ArrowUp', 'ArrowDown'].includes(e.key);
|
|
36
|
+
};
|
|
35
37
|
|
|
36
|
-
|
|
38
|
+
var isEnterKey = function isEnterKey() {
|
|
39
|
+
return [' ', 'Enter'].includes(e.key);
|
|
40
|
+
};
|
|
37
41
|
|
|
38
|
-
|
|
42
|
+
var openedWithArrow = isArrowKey();
|
|
39
43
|
|
|
40
44
|
if (openedWithArrow || isEnterKey()) {
|
|
41
45
|
if (openedWithArrow) {
|
|
@@ -48,7 +52,7 @@ export const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, for
|
|
|
48
52
|
}
|
|
49
53
|
};
|
|
50
54
|
|
|
51
|
-
|
|
55
|
+
var handleClick = function handleClick(e) {
|
|
52
56
|
if (disabled) {
|
|
53
57
|
return;
|
|
54
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Menu/MenuButton.tsx"],"names":["forwardRef","useId","useMenuContext","wrapEvent","MenuButton","props","forwardedRef","as","Comp","
|
|
1
|
+
{"version":3,"sources":["../../../src/Menu/MenuButton.tsx"],"names":["forwardRef","useId","React","useMenuContext","wrapEvent","MenuButton","props","forwardedRef","as","Comp","preferredId","id","onClick","onKeyDown","disabled","otherProps","menuListIdRef","openWithArrowKeyRef","open","buttonRef","onChange","buttonIdGenerated","buttonId","handleKeyDown","e","current","currentTarget","isArrowKey","includes","key","isEnterKey","openedWithArrow","preventDefault","handleClick","undefined"],"mappings":";;AAAA,SAASA,UAAT,EAAqBC,KAArB,QAAkC,OAAlC;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,cAAT,QAA+B,WAA/B;AACA,SAASC,SAAT,QAA0B,oBAA1B;;AAYA,OAAO,IAAMC,UAAU,gBAAGL,UAAU,CAClC,SAASK,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;AAAA,kBAQnCD,KARmC,CAErCE,EAFqC;AAAA,MAEjCC,IAFiC,0BAE1B,QAF0B;AAAA,MAGjCC,WAHiC,GAQnCJ,KARmC,CAGrCK,EAHqC;AAAA,MAIrCC,OAJqC,GAQnCN,KARmC,CAIrCM,OAJqC;AAAA,MAKrCC,SALqC,GAQnCP,KARmC,CAKrCO,SALqC;AAAA,MAMrCC,QANqC,GAQnCR,KARmC,CAMrCQ,QANqC;AAAA,MAOlCC,UAPkC,4BAQnCT,KARmC;;AAAA,wBAUrCH,cAAc,EAVuB;AAAA,MAS/Ba,aAT+B,mBAS/BA,aAT+B;AAAA,MAShBC,mBATgB,mBAShBA,mBATgB;AAAA,MASKC,IATL,mBASKA,IATL;AAAA,MASWC,SATX,mBASWA,SATX;AAAA,MASsBC,QATtB,mBASsBA,QATtB;;AAYvC,MAAMC,iBAAiB,GAAGpB,KAAK,EAA/B;AACA,MAAMqB,QAAQ,GAAGZ,WAAW,IAAIW,iBAAhC;;AAEA,MAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAA+C;AACnE,QAAIV,QAAJ,EAAc;AACZ;AACD;;AACDK,IAAAA,SAAS,CAACM,OAAV,GAAoBD,CAAC,CAACE,aAAtB;;AAEA,QAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,aAAM,CAAC,SAAD,EAAY,WAAZ,EAAyBC,QAAzB,CAAkCJ,CAAC,CAACK,GAApC,CAAN;AAAA,KAAnB;;AACA,QAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,aAAM,CAAC,GAAD,EAAM,OAAN,EAAeF,QAAf,CAAwBJ,CAAC,CAACK,GAA1B,CAAN;AAAA,KAAnB;;AAEA,QAAME,eAAe,GAAGJ,UAAU,EAAlC;;AACA,QAAII,eAAe,IAAID,UAAU,EAAjC,EAAqC;AACnC,UAAIC,eAAJ,EAAqB;AACnB;AACAd,QAAAA,mBAAmB,CAACQ,OAApB,GAA8BD,CAAC,CAACK,GAAhC;AACD;;AACDT,MAAAA,QAAQ,IAAIA,QAAQ,CAACI,CAAD,EAAI,IAAJ,CAApB;AACAA,MAAAA,CAAC,CAACQ,cAAF;AACD;AACF,GAlBD;;AAoBA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAA4C;AAC9D,QAAIV,QAAJ,EAAc;AACZ;AACD;;AACDK,IAAAA,SAAS,CAACM,OAAV,GAAoBD,CAAC,CAACE,aAAtB;AAEAN,IAAAA,QAAQ,IAAIA,QAAQ,CAACI,CAAD,EAAI,CAACN,IAAL,CAApB;AACD,GAPD;;AASA,sBACE,KAAC,IAAD;AACE,IAAA,GAAG,EAAEX,YADP;AAEE,IAAA,EAAE,EAAEe,QAFN;AAGE,IAAA,IAAI,EAAC,QAHP;AAIE,IAAA,IAAI,EAAC,QAJP;AAKE,qBAAe,IALjB;AAME,qBAAeN,aAAa,CAACS,OAN/B;AAOE,qBAAeP,IAAI,GAAG,IAAH,GAAUgB,SAP/B;AAQE,wBAAiB,EARnB;AASE,IAAA,OAAO,EAAE9B,SAAS,CAACQ,OAAD,EAAUqB,WAAV,CATpB;AAUE,IAAA,SAAS,EAAE7B,SAAS,CAACS,SAAD,EAAYU,aAAZ,CAVtB;AAWE,IAAA,QAAQ,EAAET;AAXZ,KAYMC,UAZN,EADF;AAgBD,CA7DiC,CAA7B","sourcesContent":["import { forwardRef, useId } from 'react';\nimport * as React from 'react';\n\nimport { useMenuContext } from './context';\nimport { wrapEvent } from '../utils/wrapEvent';\n\nexport type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n onClick?: (\n e:\n | React.MouseEvent<HTMLButtonElement>\n | React.KeyboardEvent<HTMLButtonElement>\n ) => void;\n};\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n function MenuButton(props, forwardedRef) {\n const {\n as: Comp = 'button',\n id: preferredId,\n onClick,\n onKeyDown,\n disabled,\n ...otherProps\n } = props;\n const { menuListIdRef, openWithArrowKeyRef, open, buttonRef, onChange } =\n useMenuContext();\n\n const buttonIdGenerated = useId();\n const buttonId = preferredId || buttonIdGenerated;\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) {\n return;\n }\n buttonRef.current = e.currentTarget;\n\n const isArrowKey = () => ['ArrowUp', 'ArrowDown'].includes(e.key);\n const isEnterKey = () => [' ', 'Enter'].includes(e.key);\n\n const openedWithArrow = isArrowKey();\n if (openedWithArrow || isEnterKey()) {\n if (openedWithArrow) {\n // Used to make it open at the end or begining of the list\n openWithArrowKeyRef.current = e.key;\n }\n onChange && onChange(e, true);\n e.preventDefault();\n }\n };\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n return;\n }\n buttonRef.current = e.currentTarget;\n\n onChange && onChange(e, !open);\n };\n\n return (\n <Comp\n ref={forwardedRef}\n id={buttonId}\n role=\"button\"\n type=\"button\"\n aria-haspopup={true}\n aria-controls={menuListIdRef.current}\n aria-expanded={open ? true : undefined}\n data-menu-button=\"\"\n onClick={wrapEvent(onClick, handleClick)}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n disabled={disabled}\n {...otherProps}\n />\n );\n }\n);\n"],"file":"MenuButton.js"}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import { forwardRef, useRef, useId } from 'react';
|
|
4
|
+
import * as React from 'react';
|
|
4
5
|
import { useMenuContext, useMenuListContext } from './context';
|
|
5
6
|
import { assignMultipleRefs } from '../utils/assignRef';
|
|
6
7
|
import { wrapEvent } from '../utils';
|
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
otherProps = _objectWithoutPropertiesLoose(props, ["as", "disabled", "onSelect", "onClick", "onKeyDown"]);
|
|
9
|
+
export var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwardedRef) {
|
|
10
|
+
var _props$as = props.as,
|
|
11
|
+
Comp = _props$as === void 0 ? 'li' : _props$as,
|
|
12
|
+
disabled = props.disabled,
|
|
13
|
+
onSelect = props.onSelect,
|
|
14
|
+
onClick = props.onClick,
|
|
15
|
+
onKeyDown = props.onKeyDown,
|
|
16
|
+
otherProps = _objectWithoutProperties(props, ["as", "disabled", "onSelect", "onClick", "onKeyDown"]);
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
18
|
+
var _useMenuContext = useMenuContext(),
|
|
19
|
+
onChange = _useMenuContext.onChange,
|
|
20
|
+
buttonRef = _useMenuContext.buttonRef;
|
|
21
|
+
|
|
22
|
+
var _useMenuListContext = useMenuListContext(),
|
|
23
|
+
navigationItem = _useMenuListContext.navigationItem,
|
|
24
|
+
onNavigate = _useMenuListContext.onNavigate;
|
|
25
|
+
|
|
26
|
+
var ref = useRef();
|
|
27
|
+
var itemId = useId();
|
|
28
|
+
var isActive = ref.current && ref.current === navigationItem;
|
|
29
|
+
var handleSelect = wrapEvent(onSelect, function (e) {
|
|
30
30
|
var _buttonRef$current;
|
|
31
31
|
|
|
32
32
|
onChange && onChange(e, false);
|
|
@@ -34,7 +34,7 @@ export const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forward
|
|
|
34
34
|
e.preventDefault();
|
|
35
35
|
});
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
var handleClick = function handleClick(e) {
|
|
38
38
|
if (!disabled) {
|
|
39
39
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
40
40
|
onNavigate && onNavigate(ref.current);
|
|
@@ -42,7 +42,7 @@ export const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forward
|
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
46
46
|
switch (e.key) {
|
|
47
47
|
case 'Enter':
|
|
48
48
|
case ' ':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Menu/MenuItem.tsx"],"names":["forwardRef","useRef","useId","useMenuContext","useMenuListContext","assignMultipleRefs","wrapEvent","MenuItem","props","forwardedRef","as","Comp","disabled","onSelect","onClick","onKeyDown","otherProps","onChange","buttonRef","navigationItem","onNavigate","ref","itemId","isActive","current","handleSelect","e","focus","preventDefault","handleClick","handleKeyDown","key","undefined"],"mappings":";;AAAA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,QAA0C,OAA1C;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/Menu/MenuItem.tsx"],"names":["forwardRef","useRef","useId","React","useMenuContext","useMenuListContext","assignMultipleRefs","wrapEvent","MenuItem","props","forwardedRef","as","Comp","disabled","onSelect","onClick","onKeyDown","otherProps","onChange","buttonRef","navigationItem","onNavigate","ref","itemId","isActive","current","handleSelect","e","focus","preventDefault","handleClick","handleKeyDown","key","undefined"],"mappings":";;AAAA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,QAA0C,OAA1C;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,IAAMC,QAAQ,gBAAGR,UAAU,CAAqB,SAASQ,QAAT,CACrDC,KADqD,EAErDC,YAFqD,EAGrD;AAAA,kBAQID,KARJ,CAEEE,EAFF;AAAA,MAEMC,IAFN,0BAEa,IAFb;AAAA,MAGEC,QAHF,GAQIJ,KARJ,CAGEI,QAHF;AAAA,MAIEC,QAJF,GAQIL,KARJ,CAIEK,QAJF;AAAA,MAKEC,OALF,GAQIN,KARJ,CAKEM,OALF;AAAA,MAMEC,SANF,GAQIP,KARJ,CAMEO,SANF;AAAA,MAOKC,UAPL,4BAQIR,KARJ;;AAAA,wBASgCL,cAAc,EAT9C;AAAA,MASQc,QATR,mBASQA,QATR;AAAA,MASkBC,SATlB,mBASkBA,SATlB;;AAAA,4BAUuCd,kBAAkB,EAVzD;AAAA,MAUQe,cAVR,uBAUQA,cAVR;AAAA,MAUwBC,UAVxB,uBAUwBA,UAVxB;;AAWA,MAAMC,GAAG,GAAGrB,MAAM,EAAlB;AACA,MAAMsB,MAAM,GAAGrB,KAAK,EAApB;AAEA,MAAMsB,QAAQ,GAAGF,GAAG,CAACG,OAAJ,IAAeH,GAAG,CAACG,OAAJ,KAAgBL,cAAhD;AAEA,MAAMM,YAAY,GAAGnB,SAAS,CAC5BO,QAD4B,EAE5B,UACEa,CADF,EAEK;AAAA;;AACHT,IAAAA,QAAQ,IAAIA,QAAQ,CAACS,CAAD,EAAI,KAAJ,CAApB;AACA,0BAAAR,SAAS,CAACM,OAAV,wCAAmBG,KAAnB;AACAD,IAAAA,CAAC,CAACE,cAAF;AACD,GAR2B,CAA9B;;AAWA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACH,CAAD,EAAwC;AAC1D,QAAI,CAACd,QAAL,EAAe;AACb;AACAQ,MAAAA,UAAU,IAAIA,UAAU,CAACC,GAAG,CAACG,OAAL,CAAxB;AACAC,MAAAA,YAAY,CAACC,CAAD,CAAZ;AACD;AACF,GAND;;AAQA,MAAMI,aAAwD,GAAG,SAA3DA,aAA2D,CAACJ,CAAD,EAAO;AACtE,YAAQA,CAAC,CAACK,GAAV;AACE,WAAK,OAAL;AACA,WAAK,GAAL;AACE,YAAI,CAACnB,QAAL,EAAe;AACba,UAAAA,YAAY,CAACC,CAAD,CAAZ;AACD;;AACD;AANJ;AAQD,GATD;;AAWA,sBACE,KAAC,IAAD;AACE,IAAA,GAAG,EAAErB,kBAAkB,CAACgB,GAAD,EAAMZ,YAAN,CADzB;AAEE,IAAA,EAAE,EAAEG,QAAQ,GAAGoB,SAAH,GAAeV,MAF7B;AAGE,sBAAe,EAHjB;AAIE,wBAAkBC,QAAQ,GAAG,EAAH,GAAQS,SAJpC;AAKE,IAAA,IAAI,EAAC,UALP;AAME,IAAA,OAAO,EAAE1B,SAAS,CAACQ,OAAD,EAAUe,WAAV,CANpB;AAOE,IAAA,QAAQ,EAAEjB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP5B;AAQE,IAAA,SAAS,EAAEN,SAAS,CAACS,SAAD,EAAYe,aAAZ,CARtB;AASE,qBAAelB,QAAQ,GAAG,EAAH,GAAQoB,SATjC;AAUE,qBAAepB,QAAQ,GAAG,EAAH,GAAQoB,SAVjC;AAWE,IAAA,QAAQ,EAAEpB;AAXZ,KAYMI,UAZN,EADF;AAgBD,CAjEiC,CAA3B","sourcesContent":["import { forwardRef, useRef, useId } from 'react';\nimport * as React from 'react';\n\nimport { useMenuContext, useMenuListContext } from './context';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { wrapEvent } from '../utils';\n\nexport interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n onSelect?: (\n e: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>\n ) => void;\n disabled?: boolean;\n}\n\nexport const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(\n props,\n forwardedRef\n) {\n const {\n as: Comp = 'li',\n disabled,\n onSelect,\n onClick,\n onKeyDown,\n ...otherProps\n } = props;\n const { onChange, buttonRef } = useMenuContext();\n const { navigationItem, onNavigate } = useMenuListContext();\n const ref = useRef<HTMLLIElement>();\n const itemId = useId();\n\n const isActive = ref.current && ref.current === navigationItem;\n\n const handleSelect = wrapEvent(\n onSelect,\n (\n e: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>\n ) => {\n onChange && onChange(e, false);\n buttonRef.current?.focus();\n e.preventDefault();\n }\n );\n\n const handleClick = (e: React.MouseEvent<HTMLLIElement>) => {\n if (!disabled) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n onNavigate && onNavigate(ref.current!);\n handleSelect(e);\n }\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement> = (e) => {\n switch (e.key) {\n case 'Enter':\n case ' ':\n if (!disabled) {\n handleSelect(e);\n }\n break;\n }\n };\n\n return (\n <Comp\n ref={assignMultipleRefs(ref, forwardedRef)}\n id={disabled ? undefined : itemId}\n data-menu-item=\"\"\n data-highlighted={isActive ? '' : undefined}\n role=\"menuitem\"\n onClick={wrapEvent(onClick, handleClick)}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n data-disabled={disabled ? '' : undefined}\n aria-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...otherProps}\n />\n );\n});\n"],"file":"MenuItem.js"}
|