@basic-ui/core 0.0.37 → 0.0.40
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 +85 -84
- 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 +18 -18
- 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/Accordion/index.d.ts +0 -0
- package/build/esm/Accordion/index.js.map +0 -0
- package/build/esm/Accordion/scopeQuery.d.ts +0 -0
- package/build/esm/Accordion/scopeQuery.js.map +0 -0
- 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/CheckBox/index.d.ts +0 -0
- package/build/esm/CheckBox/index.js.map +0 -0
- package/build/esm/ComboBox/Combobox.d.ts +1 -1
- package/build/esm/ComboBox/Combobox.js +55 -48
- 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/cities.d.ts +0 -0
- package/build/esm/ComboBox/cities.js.map +0 -0
- 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/index.d.ts +0 -0
- package/build/esm/ComboBox/index.js.map +0 -0
- package/build/esm/ComboBox/makeHash.d.ts +0 -0
- package/build/esm/ComboBox/makeHash.js +3 -3
- package/build/esm/ComboBox/makeHash.js.map +1 -1
- package/build/esm/ComboBox/scopeQuery.d.ts +0 -0
- package/build/esm/ComboBox/scopeQuery.js.map +0 -0
- 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/index.d.ts +0 -0
- package/build/esm/FocusLock/index.js.map +0 -0
- package/build/esm/FocusLock/tabUtils.d.ts +1 -0
- package/build/esm/FocusLock/tabUtils.js +14 -2
- package/build/esm/FocusLock/tabUtils.js.map +1 -1
- package/build/esm/FocusLock/useFocusLock.d.ts +0 -0
- package/build/esm/FocusLock/useFocusLock.js +14 -22
- 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.d.ts +0 -0
- package/build/esm/List/context.js +3 -3
- package/build/esm/List/context.js.map +1 -1
- package/build/esm/List/index.d.ts +0 -0
- package/build/esm/List/index.js.map +0 -0
- package/build/esm/Menu/Menu.d.ts +1 -1
- package/build/esm/Menu/Menu.js +31 -23
- package/build/esm/Menu/Menu.js.map +1 -1
- package/build/esm/Menu/MenuButton.d.ts +1 -1
- package/build/esm/Menu/MenuButton.js +29 -25
- package/build/esm/Menu/MenuButton.js.map +1 -1
- package/build/esm/Menu/MenuItem.d.ts +1 -1
- package/build/esm/Menu/MenuItem.js +26 -27
- 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/Menu/index.d.ts +0 -0
- package/build/esm/Menu/index.js.map +0 -0
- package/build/esm/Menu/scope.d.ts +0 -0
- package/build/esm/Menu/scope.js.map +0 -0
- package/build/esm/Modal/Modal.d.ts +2 -2
- package/build/esm/Modal/Modal.js +14 -12
- 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/Modal/index.d.ts +0 -0
- package/build/esm/Modal/index.js.map +0 -0
- package/build/esm/Popper/Popper.d.ts +2 -2
- package/build/esm/Popper/Popper.js +51 -36
- 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/Popper/index.d.ts +0 -0
- package/build/esm/Popper/index.js.map +0 -0
- 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/Portal/index.d.ts +0 -0
- package/build/esm/Portal/index.js.map +0 -0
- 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 +25 -18
- package/build/esm/RadioButton/RadioGroup.js.map +1 -1
- package/build/esm/RadioButton/context.d.ts +0 -0
- package/build/esm/RadioButton/context.js +6 -5
- package/build/esm/RadioButton/context.js.map +1 -1
- package/build/esm/RadioButton/index.d.ts +0 -0
- package/build/esm/RadioButton/index.js.map +0 -0
- 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/SkipNav/index.d.ts +0 -0
- package/build/esm/SkipNav/index.js.map +0 -0
- 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.d.ts +0 -0
- package/build/esm/Spinner/context.js +6 -5
- package/build/esm/Spinner/context.js.map +1 -1
- package/build/esm/Spinner/index.d.ts +0 -0
- package/build/esm/Spinner/index.js.map +0 -0
- 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 +27 -23
- 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/Tabs/index.d.ts +0 -0
- package/build/esm/Tabs/index.js.map +0 -0
- package/build/esm/Tabs/scopeQuery.d.ts +0 -0
- package/build/esm/Tabs/scopeQuery.js.map +0 -0
- 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/index.d.ts +0 -0
- package/build/esm/Tooltip/index.js.map +0 -0
- package/build/esm/Tooltip/stateMachine.d.ts +0 -0
- 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 +33 -32
- package/build/esm/Tooltip/useTooltip.js.map +1 -1
- package/build/esm/hooks/index.d.ts +0 -1
- package/build/esm/hooks/index.js +0 -1
- package/build/esm/hooks/index.js.map +1 -1
- package/build/esm/hooks/useAutoFocus.d.ts +0 -0
- package/build/esm/hooks/useAutoFocus.js +6 -2
- 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 +2 -1
- package/build/esm/hooks/useFocusReturn.js +25 -14
- package/build/esm/hooks/useFocusReturn.js.map +1 -1
- package/build/esm/hooks/useFocusState.d.ts +0 -0
- package/build/esm/hooks/useFocusState.js +13 -9
- package/build/esm/hooks/useFocusState.js.map +1 -1
- package/build/esm/hooks/useGestureHandlers.d.ts +0 -0
- package/build/esm/hooks/useGestureHandlers.js +59 -63
- package/build/esm/hooks/useGestureHandlers.js.map +1 -1
- package/build/esm/hooks/useId.d.ts +0 -0
- package/build/esm/hooks/useId.js +0 -0
- package/build/esm/hooks/useId.js.map +0 -0
- package/build/esm/hooks/useMeasure.d.ts +0 -0
- package/build/esm/hooks/useMeasure.js +13 -7
- package/build/esm/hooks/useMeasure.js.map +1 -1
- package/build/esm/hooks/useOnClickOutside.d.ts +0 -0
- package/build/esm/hooks/useOnClickOutside.js +5 -4
- package/build/esm/hooks/useOnClickOutside.js.map +1 -1
- package/build/esm/hooks/useOnKeyDown.d.ts +0 -0
- 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.d.ts +0 -0
- package/build/esm/hooks/useRemoveBodyScroll.js +14 -21
- 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.d.ts +0 -0
- package/build/esm/hooks/useThrottle.js +10 -5
- package/build/esm/hooks/useThrottle.js.map +1 -1
- package/build/esm/index.d.ts +0 -0
- package/build/esm/index.js.map +0 -0
- 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/clamp.d.ts +0 -0
- package/build/esm/utils/clamp.js.map +0 -0
- package/build/esm/utils/createSubscription.d.ts +0 -0
- package/build/esm/utils/createSubscription.js +7 -5
- package/build/esm/utils/createSubscription.js.map +1 -1
- package/build/esm/utils/getCircularIndex.d.ts +0 -0
- package/build/esm/utils/getCircularIndex.js.map +0 -0
- package/build/esm/utils/index.d.ts +0 -0
- package/build/esm/utils/index.js.map +0 -0
- package/build/esm/utils/rubberBandClamp.d.ts +0 -0
- package/build/esm/utils/rubberBandClamp.js +5 -2
- package/build/esm/utils/rubberBandClamp.js.map +1 -1
- package/build/esm/utils/wrapEvent.d.ts +0 -0
- package/build/esm/utils/wrapEvent.js +7 -3
- package/build/esm/utils/wrapEvent.js.map +1 -1
- package/build/tsconfig.tsbuildinfo +1 -7069
- package/package.json +13 -13
- 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 +5 -4
- package/src/Accordion/context.ts +2 -1
- package/src/CheckBox/CheckBox.tsx +2 -1
- package/src/ComboBox/ComboBox.story.tsx +2 -1
- package/src/ComboBox/Combobox.tsx +9 -11
- 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/tabUtils.ts +12 -0
- package/src/FocusLock/useFocusLock.ts +5 -11
- 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 +5 -4
- package/src/Menu/MenuButton.tsx +7 -11
- package/src/Menu/MenuItem.tsx +6 -7
- 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 +20 -5
- package/src/Modal/Modal.tsx +6 -4
- 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 +12 -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 +6 -4
- 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 +11 -3
- 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 +6 -4
- package/src/hooks/index.ts +0 -1
- package/src/hooks/useAutoFocus.ts +9 -1
- package/src/hooks/useChildrenCounter.ts +2 -1
- package/src/hooks/useControlledState.ts +3 -1
- package/src/hooks/useFocusReturn.ts +33 -13
- package/src/hooks/useFocusState.ts +1 -0
- package/src/hooks/useReducerMachine.ts +2 -1
- package/src/hooks/useRemoveBodyScroll.ts +10 -18
- package/src/hooks/useScope.ts +2 -1
- package/src/utils/assignRef.ts +1 -1
- package/src/hooks/useId.ts +0 -18
|
@@ -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 } from 'react';
|
|
4
|
+
import * as React from 'react';
|
|
4
5
|
import { useComboBoxContext } from './context';
|
|
5
6
|
import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
|
|
6
7
|
import { wrapEvent } from '../utils/wrapEvent';
|
|
7
8
|
import { assignMultipleRefs } from '../utils/assignRef';
|
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
export
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
props = _objectWithoutPropertiesLoose(_ref, ["as", "innerAs", "onClick", "onKeyDown"]);
|
|
10
|
+
export var ComboboxButton = /*#__PURE__*/forwardRef(function ComboboxButton(_ref, ref) {
|
|
11
|
+
var _ref$as = _ref.as,
|
|
12
|
+
Comp = _ref$as === void 0 ? 'button' : _ref$as,
|
|
13
|
+
innerAs = _ref.innerAs,
|
|
14
|
+
onClick = _ref.onClick,
|
|
15
|
+
onKeyDown = _ref.onKeyDown,
|
|
16
|
+
props = _objectWithoutProperties(_ref, ["as", "innerAs", "onClick", "onKeyDown"]);
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} = useComboBoxContext();
|
|
26
|
-
const handleKeyDown = useKeyDown();
|
|
18
|
+
var _useComboBoxContext = useComboBoxContext(),
|
|
19
|
+
transition = _useComboBoxContext.transition,
|
|
20
|
+
data = _useComboBoxContext.data,
|
|
21
|
+
state = _useComboBoxContext.state,
|
|
22
|
+
buttonRef = _useComboBoxContext.buttonRef,
|
|
23
|
+
listboxIdRef = _useComboBoxContext.listboxIdRef,
|
|
24
|
+
isVisible = _useComboBoxContext.isVisible;
|
|
27
25
|
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
var handleKeyDown = useKeyDown();
|
|
27
|
+
|
|
28
|
+
var handleClick = function handleClick() {
|
|
29
|
+
var payload = {
|
|
30
30
|
item: data.navigationItem
|
|
31
31
|
};
|
|
32
32
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ComboBox/ComboboxButton.tsx"],"names":["forwardRef","useComboBoxContext","useKeyDown","IDLE","OPEN_WITH_BUTTON","CLOSE_WITH_BUTTON","wrapEvent","assignMultipleRefs","ComboboxButton","ref","as","Comp","innerAs","onClick","onKeyDown","props","transition","data","state","buttonRef","listboxIdRef","isVisible","handleKeyDown","handleClick","payload","item","navigationItem","current"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,kBAAT,QAAmC,WAAnC;AACA,SAASC,UAAT,EAAqBC,IAArB,EAA2BC,gBAA3B,EAA6CC,iBAA7C,QAAsE,SAAtE;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,kBAAT,QAAmC,oBAAnC;;AAWA,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/ComboBox/ComboboxButton.tsx"],"names":["forwardRef","React","useComboBoxContext","useKeyDown","IDLE","OPEN_WITH_BUTTON","CLOSE_WITH_BUTTON","wrapEvent","assignMultipleRefs","ComboboxButton","ref","as","Comp","innerAs","onClick","onKeyDown","props","transition","data","state","buttonRef","listboxIdRef","isVisible","handleKeyDown","handleClick","payload","item","navigationItem","current"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,kBAAT,QAAmC,WAAnC;AACA,SAASC,UAAT,EAAqBC,IAArB,EAA2BC,gBAA3B,EAA6CC,iBAA7C,QAAsE,SAAtE;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,kBAAT,QAAmC,oBAAnC;;AAWA,OAAO,IAAMC,cAAc,gBAAGT,UAAU,CAGtC,SAASS,cAAT,OAEAC,GAFA,EAGA;AAAA,qBAFEC,EAEF;AAAA,MAFMC,IAEN,wBAFa,QAEb;AAAA,MAFuBC,OAEvB,QAFuBA,OAEvB;AAAA,MAFgCC,OAEhC,QAFgCA,OAEhC;AAAA,MAFyCC,SAEzC,QAFyCA,SAEzC;AAAA,MAFuDC,KAEvD;;AAAA,4BAEEd,kBAAkB,EAFpB;AAAA,MACQe,UADR,uBACQA,UADR;AAAA,MACoBC,IADpB,uBACoBA,IADpB;AAAA,MAC0BC,KAD1B,uBAC0BA,KAD1B;AAAA,MACiCC,SADjC,uBACiCA,SADjC;AAAA,MAC4CC,YAD5C,uBAC4CA,YAD5C;AAAA,MAC0DC,SAD1D,uBAC0DA,SAD1D;;AAIA,MAAMC,aAAa,GAAGpB,UAAU,EAAhC;;AAEA,MAAMqB,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAMC,OAAO,GAAG;AACdC,MAAAA,IAAI,EAAER,IAAI,CAACS;AADG,KAAhB;;AAIA,QAAIR,KAAK,KAAKf,IAAd,EAAoB;AAClBa,MAAAA,UAAU,CAACZ,gBAAD,EAAmBoB,OAAnB,CAAV;AACD,KAFD,MAEO;AACLR,MAAAA,UAAU,CAACX,iBAAD,EAAoBmB,OAApB,CAAV;AACD;AACF,GAVD;;AAYA,sBACE,KAAC,IAAD;AACE,IAAA,EAAE,EAAEZ,OADN;AAEE,kCAA2B,EAF7B;AAGE,qBAAeQ,YAAY,CAACO,OAH9B;AAIE,qBAAc,SAJhB;AAKE,qBAAeN,SALjB;AAME,IAAA,GAAG,EAAEd,kBAAkB,CAACE,GAAD,EAAMU,SAAN,CANzB;AAOE,IAAA,OAAO,EAAEb,SAAS,CAACO,OAAD,EAAUU,WAAV,CAPpB;AAQE,IAAA,SAAS,EAAEjB,SAAS,CAACQ,SAAD,EAAYQ,aAAZ;AARtB,KASMP,KATN,EADF;AAaD,CArCuC,CAAjC","sourcesContent":["import { forwardRef } from 'react';\nimport * as React from 'react';\n\nimport { useComboBoxContext } from './context';\nimport { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { assignMultipleRefs } from '../utils/assignRef';\n\nexport interface ComboboxButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n children?: React.ReactNode;\n}\n\nexport const ComboboxButton = forwardRef<\n HTMLButtonElement,\n ComboboxButtonProps\n>(function ComboboxButton(\n { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },\n ref\n) {\n const { transition, data, state, buttonRef, listboxIdRef, isVisible } =\n useComboBoxContext();\n\n const handleKeyDown = useKeyDown();\n\n const handleClick = () => {\n const payload = {\n item: data.navigationItem,\n };\n\n if (state === IDLE) {\n transition(OPEN_WITH_BUTTON, payload);\n } else {\n transition(CLOSE_WITH_BUTTON, payload);\n }\n };\n\n return (\n <Comp\n as={innerAs}\n data-reach-combobox-button=\"\"\n aria-controls={listboxIdRef.current}\n aria-haspopup=\"listbox\"\n aria-expanded={isVisible}\n ref={assignMultipleRefs(ref, buttonRef)}\n onClick={wrapEvent(onClick, handleClick)}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n {...props}\n />\n );\n});\n"],"file":"ComboboxButton.js"}
|
|
@@ -1,54 +1,55 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import { forwardRef, useEffect, useRef } from 'react';
|
|
4
|
+
import * as React from 'react';
|
|
4
5
|
import { useBlur, CLEAR, CHANGE, useKeyDown, SELECT_WITH_CLICK, FOCUS, NAVIGATING, INIT, useFocusManagement } from './hooks';
|
|
5
6
|
import { assignMultipleRefs, wrapEvent } from '../utils';
|
|
6
7
|
import { useComboBoxContext } from './context';
|
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
9
|
+
export var ComboboxInput = /*#__PURE__*/forwardRef(function ComboboxInput(_ref, forwardedRef) {
|
|
10
|
+
var _ref$as = _ref.as,
|
|
11
|
+
Comp = _ref$as === void 0 ? 'input' : _ref$as,
|
|
12
|
+
innerAs = _ref.innerAs,
|
|
13
|
+
_ref$selectOnClick = _ref.selectOnClick,
|
|
14
|
+
selectOnClick = _ref$selectOnClick === void 0 ? false : _ref$selectOnClick,
|
|
15
|
+
_ref$autocomplete = _ref.autocomplete,
|
|
16
|
+
autocomplete = _ref$autocomplete === void 0 ? true : _ref$autocomplete,
|
|
17
|
+
_ref$clearOnEscape = _ref.clearOnEscape,
|
|
18
|
+
clearOnEscape = _ref$clearOnEscape === void 0 ? false : _ref$clearOnEscape,
|
|
19
|
+
onClick = _ref.onClick,
|
|
20
|
+
onChange = _ref.onChange,
|
|
21
|
+
onKeyDown = _ref.onKeyDown,
|
|
22
|
+
onBlur = _ref.onBlur,
|
|
23
|
+
onFocus = _ref.onFocus,
|
|
24
|
+
preferredId = _ref.id,
|
|
25
|
+
_ref$defaultValue = _ref.defaultValue,
|
|
26
|
+
defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
|
|
27
|
+
controlledValue = _ref.value,
|
|
28
|
+
props = _objectWithoutProperties(_ref, ["as", "innerAs", "selectOnClick", "autocomplete", "clearOnEscape", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "id", "defaultValue", "value"]);
|
|
29
|
+
|
|
30
|
+
var _useComboBoxContext = useComboBoxContext(),
|
|
31
|
+
_useComboBoxContext$d = _useComboBoxContext.data,
|
|
32
|
+
navigationItem = _useComboBoxContext$d.navigationItem,
|
|
33
|
+
text = _useComboBoxContext$d.text,
|
|
34
|
+
lastActionType = _useComboBoxContext$d.lastActionType,
|
|
35
|
+
inputRef = _useComboBoxContext.inputRef,
|
|
36
|
+
state = _useComboBoxContext.state,
|
|
37
|
+
transition = _useComboBoxContext.transition,
|
|
38
|
+
listboxIdRef = _useComboBoxContext.listboxIdRef,
|
|
39
|
+
autocompletePropRef = _useComboBoxContext.autocompletePropRef,
|
|
40
|
+
clearOnEscapeRef = _useComboBoxContext.clearOnEscapeRef,
|
|
41
|
+
openOnFocus = _useComboBoxContext.openOnFocus,
|
|
42
|
+
optionsRef = _useComboBoxContext.optionsRef,
|
|
43
|
+
labelIdRef = _useComboBoxContext.labelIdRef; // Keep focus on the input component
|
|
27
44
|
|
|
28
|
-
const {
|
|
29
|
-
data: {
|
|
30
|
-
navigationItem,
|
|
31
|
-
text,
|
|
32
|
-
lastActionType
|
|
33
|
-
},
|
|
34
|
-
inputRef,
|
|
35
|
-
state,
|
|
36
|
-
transition,
|
|
37
|
-
listboxIdRef,
|
|
38
|
-
autocompletePropRef,
|
|
39
|
-
clearOnEscapeRef,
|
|
40
|
-
openOnFocus,
|
|
41
|
-
optionsRef,
|
|
42
|
-
labelIdRef
|
|
43
|
-
} = useComboBoxContext(); // Keep focus on the input component
|
|
44
45
|
|
|
45
46
|
useFocusManagement(lastActionType, inputRef); // Keep using the defaultValue until the user started interacting
|
|
46
47
|
|
|
47
|
-
|
|
48
|
+
var hasStartedInteracting = useRef(false); // Because we close the List on blur, we need to track if the blur is
|
|
48
49
|
// caused by clicking inside the list, and if so, don't close the List.
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
var selectOnClickRef = useRef(false);
|
|
52
|
+
var handleBlur = useBlur(); // Update ref props
|
|
52
53
|
|
|
53
54
|
autocompletePropRef.current = autocomplete;
|
|
54
55
|
clearOnEscapeRef.current = clearOnEscape;
|
|
@@ -56,23 +57,23 @@ export const ComboboxInput = /*#__PURE__*/forwardRef(function ComboboxInput(_ref
|
|
|
56
57
|
// types, instead the developer controls it with the normal input onChange
|
|
57
58
|
// prop
|
|
58
59
|
|
|
59
|
-
|
|
60
|
+
var handleChange = function handleChange(e) {
|
|
60
61
|
// After the user started typing, lets forget the defaultValue
|
|
61
62
|
hasStartedInteracting.current = true;
|
|
62
|
-
|
|
63
|
+
var text = e.target.value;
|
|
63
64
|
|
|
64
65
|
if (text.trim() === '') {
|
|
65
66
|
transition(CLEAR);
|
|
66
67
|
} else {
|
|
67
68
|
transition(CHANGE, {
|
|
68
|
-
text
|
|
69
|
+
text: text
|
|
69
70
|
});
|
|
70
71
|
}
|
|
71
72
|
};
|
|
72
73
|
|
|
73
|
-
|
|
74
|
+
var handleKeyDown = useKeyDown();
|
|
74
75
|
|
|
75
|
-
|
|
76
|
+
var handleFocus = function handleFocus() {
|
|
76
77
|
if (selectOnClick) {
|
|
77
78
|
selectOnClickRef.current = true;
|
|
78
79
|
} // If we select an option with click, useFocusManagement will focus the
|
|
@@ -87,22 +88,24 @@ export const ComboboxInput = /*#__PURE__*/forwardRef(function ComboboxInput(_ref
|
|
|
87
88
|
}
|
|
88
89
|
};
|
|
89
90
|
|
|
90
|
-
|
|
91
|
+
var handleClick = function handleClick() {
|
|
91
92
|
if (selectOnClickRef.current) {
|
|
92
93
|
selectOnClickRef.current = false;
|
|
93
94
|
inputRef.current && inputRef.current.select();
|
|
94
95
|
}
|
|
95
96
|
};
|
|
96
97
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
var navigationText = navigationItem !== '' ? optionsRef.current[navigationItem].text : undefined;
|
|
99
|
+
var fallbackValue = hasStartedInteracting.current ? '' : defaultValue;
|
|
100
|
+
var inputStrings = // When idle, we don't have a navigationText on ArrowUp/Down
|
|
100
101
|
autocomplete && state === NAVIGATING ? [navigationText, controlledValue, text, fallbackValue] : [controlledValue, text, fallbackValue];
|
|
101
|
-
|
|
102
|
+
var inputValue = inputStrings.find(function (str) {
|
|
103
|
+
return str !== undefined;
|
|
104
|
+
}); // If they are controlling the value we still need to do our transitions, so
|
|
102
105
|
// we have this derived state to emulate onChange of the input as we receive
|
|
103
106
|
// new `value`s ...[*]
|
|
104
107
|
|
|
105
|
-
useEffect(()
|
|
108
|
+
useEffect(function () {
|
|
106
109
|
transition(INIT, {
|
|
107
110
|
text: inputValue,
|
|
108
111
|
item: ''
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ComboBox/ComboboxInput.tsx"],"names":["forwardRef","useEffect","useRef","useBlur","CLEAR","CHANGE","useKeyDown","SELECT_WITH_CLICK","FOCUS","NAVIGATING","INIT","useFocusManagement","assignMultipleRefs","wrapEvent","useComboBoxContext","ComboboxInput","forwardedRef","as","Comp","innerAs","selectOnClick","autocomplete","clearOnEscape","onClick","onChange","onKeyDown","onBlur","onFocus","id","preferredId","defaultValue","value","controlledValue","props","data","navigationItem","text","lastActionType","inputRef","state","transition","listboxIdRef","autocompletePropRef","clearOnEscapeRef","openOnFocus","optionsRef","labelIdRef","hasStartedInteracting","selectOnClickRef","handleBlur","current","handleChange","e","target","trim","handleKeyDown","handleFocus","item","handleClick","select","navigationText","undefined","fallbackValue","inputStrings","inputValue","find","str"],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type * as React from 'react';\nimport {\n useBlur,\n CLEAR,\n CHANGE,\n useKeyDown,\n SELECT_WITH_CLICK,\n FOCUS,\n NAVIGATING,\n INIT,\n useFocusManagement,\n} from './hooks';\nimport { assignMultipleRefs, wrapEvent } from '../utils';\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxInputProps\n extends React.InputHTMLAttributes<HTMLInputElement> {\n // clear on ESC\n clearOnEscape?: boolean;\n // highlights all the text in the box on click when true\n selectOnClick?: boolean;\n // updates the value in the input when navigating w/ the keyboard\n autocomplete?: boolean;\n // initial value for uncontrolled mode\n defaultValue?: string;\n // value for controlled mode\n value?: string;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n id?: string;\n}\n\nexport const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(\n function ComboboxInput(\n {\n as: Comp = 'input',\n innerAs,\n selectOnClick = false,\n autocomplete = true,\n clearOnEscape = false,\n\n // wrapped events\n onClick,\n onChange,\n onKeyDown,\n onBlur,\n onFocus,\n\n id: preferredId,\n\n defaultValue = '',\n\n // might be controlled\n value: controlledValue,\n ...props\n },\n forwardedRef\n ) {\n const {\n data: { navigationItem, text, lastActionType },\n inputRef,\n state,\n transition,\n listboxIdRef,\n autocompletePropRef,\n clearOnEscapeRef,\n openOnFocus,\n optionsRef,\n labelIdRef,\n } = useComboBoxContext();\n\n // Keep focus on the input component\n useFocusManagement(lastActionType, inputRef);\n\n // Keep using the defaultValue until the user started interacting\n const hasStartedInteracting = useRef(false);\n\n // Because we close the List on blur, we need to track if the blur is\n // caused by clicking inside the list, and if so, don't close the List.\n const selectOnClickRef = useRef(false);\n\n const handleBlur = useBlur();\n\n // Update ref props\n autocompletePropRef.current = autocomplete;\n clearOnEscapeRef.current = clearOnEscape;\n listboxIdRef.current = preferredId || listboxIdRef.current;\n\n // [*]... and when controlled, we don't trigger handleValueChange as the user\n // types, instead the developer controls it with the normal input onChange\n // prop\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n // After the user started typing, lets forget the defaultValue\n hasStartedInteracting.current = true;\n\n const text = e.target.value;\n if (text.trim() === '') {\n transition(CLEAR);\n } else {\n transition(CHANGE, { text });\n }\n };\n\n const handleKeyDown = useKeyDown();\n\n const handleFocus = () => {\n if (selectOnClick) {\n selectOnClickRef.current = true;\n }\n // If we select an option with click, useFocusManagement will focus the\n // input, in those cases we don't want to cause the menu to open back up,\n // so we guard behind these states\n if (openOnFocus && lastActionType !== SELECT_WITH_CLICK) {\n transition(FOCUS, {\n item: navigationItem,\n });\n }\n };\n\n const handleClick = () => {\n if (selectOnClickRef.current) {\n selectOnClickRef.current = false;\n inputRef.current && inputRef.current.select();\n }\n };\n\n const navigationText =\n navigationItem !== ''\n ? optionsRef.current[navigationItem].text\n : undefined;\n\n const fallbackValue = hasStartedInteracting.current ? '' : defaultValue;\n\n const inputStrings =\n // When idle, we don't have a navigationText on ArrowUp/Down\n autocomplete && state === NAVIGATING\n ? [navigationText, controlledValue, text, fallbackValue]\n : [controlledValue, text, fallbackValue];\n\n const inputValue = inputStrings.find((str) => str !== undefined);\n\n // If they are controlling the value we still need to do our transitions, so\n // we have this derived state to emulate onChange of the input as we receive\n // new `value`s ...[*]\n useEffect(() => {\n transition(INIT, { text: inputValue, item: '' });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <Comp\n {...props}\n as={innerAs}\n data-reach-combobox-input=\"\"\n ref={assignMultipleRefs(inputRef, forwardedRef)}\n value={inputValue}\n onClick={wrapEvent(onClick, handleClick)}\n onBlur={wrapEvent(onBlur, handleBlur)}\n onFocus={wrapEvent(onFocus, handleFocus)}\n onChange={wrapEvent(onChange, handleChange)}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n aria-labelledby={labelIdRef.current}\n id={listboxIdRef.current}\n aria-autocomplete=\"both\"\n aria-activedescendant={\n navigationItem !== '' ? navigationItem : undefined\n }\n autoComplete=\"off\"\n />\n );\n }\n);\n"],"file":"ComboboxInput.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/ComboBox/ComboboxInput.tsx"],"names":["forwardRef","useEffect","useRef","React","useBlur","CLEAR","CHANGE","useKeyDown","SELECT_WITH_CLICK","FOCUS","NAVIGATING","INIT","useFocusManagement","assignMultipleRefs","wrapEvent","useComboBoxContext","ComboboxInput","forwardedRef","as","Comp","innerAs","selectOnClick","autocomplete","clearOnEscape","onClick","onChange","onKeyDown","onBlur","onFocus","preferredId","id","defaultValue","controlledValue","value","props","data","navigationItem","text","lastActionType","inputRef","state","transition","listboxIdRef","autocompletePropRef","clearOnEscapeRef","openOnFocus","optionsRef","labelIdRef","hasStartedInteracting","selectOnClickRef","handleBlur","current","handleChange","e","target","trim","handleKeyDown","handleFocus","item","handleClick","select","navigationText","undefined","fallbackValue","inputStrings","inputValue","find","str"],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport * as React from 'react';\n\nimport {\n useBlur,\n CLEAR,\n CHANGE,\n useKeyDown,\n SELECT_WITH_CLICK,\n FOCUS,\n NAVIGATING,\n INIT,\n useFocusManagement,\n} from './hooks';\nimport { assignMultipleRefs, wrapEvent } from '../utils';\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxInputProps\n extends React.InputHTMLAttributes<HTMLInputElement> {\n // clear on ESC\n clearOnEscape?: boolean;\n // highlights all the text in the box on click when true\n selectOnClick?: boolean;\n // updates the value in the input when navigating w/ the keyboard\n autocomplete?: boolean;\n // initial value for uncontrolled mode\n defaultValue?: string;\n // value for controlled mode\n value?: string;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n id?: string;\n}\n\nexport const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(\n function ComboboxInput(\n {\n as: Comp = 'input',\n innerAs,\n selectOnClick = false,\n autocomplete = true,\n clearOnEscape = false,\n\n // wrapped events\n onClick,\n onChange,\n onKeyDown,\n onBlur,\n onFocus,\n\n id: preferredId,\n\n defaultValue = '',\n\n // might be controlled\n value: controlledValue,\n ...props\n },\n forwardedRef\n ) {\n const {\n data: { navigationItem, text, lastActionType },\n inputRef,\n state,\n transition,\n listboxIdRef,\n autocompletePropRef,\n clearOnEscapeRef,\n openOnFocus,\n optionsRef,\n labelIdRef,\n } = useComboBoxContext();\n\n // Keep focus on the input component\n useFocusManagement(lastActionType, inputRef);\n\n // Keep using the defaultValue until the user started interacting\n const hasStartedInteracting = useRef(false);\n\n // Because we close the List on blur, we need to track if the blur is\n // caused by clicking inside the list, and if so, don't close the List.\n const selectOnClickRef = useRef(false);\n\n const handleBlur = useBlur();\n\n // Update ref props\n autocompletePropRef.current = autocomplete;\n clearOnEscapeRef.current = clearOnEscape;\n listboxIdRef.current = preferredId || listboxIdRef.current;\n\n // [*]... and when controlled, we don't trigger handleValueChange as the user\n // types, instead the developer controls it with the normal input onChange\n // prop\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n // After the user started typing, lets forget the defaultValue\n hasStartedInteracting.current = true;\n\n const text = e.target.value;\n if (text.trim() === '') {\n transition(CLEAR);\n } else {\n transition(CHANGE, { text });\n }\n };\n\n const handleKeyDown = useKeyDown();\n\n const handleFocus = () => {\n if (selectOnClick) {\n selectOnClickRef.current = true;\n }\n // If we select an option with click, useFocusManagement will focus the\n // input, in those cases we don't want to cause the menu to open back up,\n // so we guard behind these states\n if (openOnFocus && lastActionType !== SELECT_WITH_CLICK) {\n transition(FOCUS, {\n item: navigationItem,\n });\n }\n };\n\n const handleClick = () => {\n if (selectOnClickRef.current) {\n selectOnClickRef.current = false;\n inputRef.current && inputRef.current.select();\n }\n };\n\n const navigationText =\n navigationItem !== ''\n ? optionsRef.current[navigationItem].text\n : undefined;\n\n const fallbackValue = hasStartedInteracting.current ? '' : defaultValue;\n\n const inputStrings =\n // When idle, we don't have a navigationText on ArrowUp/Down\n autocomplete && state === NAVIGATING\n ? [navigationText, controlledValue, text, fallbackValue]\n : [controlledValue, text, fallbackValue];\n\n const inputValue = inputStrings.find((str) => str !== undefined);\n\n // If they are controlling the value we still need to do our transitions, so\n // we have this derived state to emulate onChange of the input as we receive\n // new `value`s ...[*]\n useEffect(() => {\n transition(INIT, { text: inputValue, item: '' });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <Comp\n {...props}\n as={innerAs}\n data-reach-combobox-input=\"\"\n ref={assignMultipleRefs(inputRef, forwardedRef)}\n value={inputValue}\n onClick={wrapEvent(onClick, handleClick)}\n onBlur={wrapEvent(onBlur, handleBlur)}\n onFocus={wrapEvent(onFocus, handleFocus)}\n onChange={wrapEvent(onChange, handleChange)}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n aria-labelledby={labelIdRef.current}\n id={listboxIdRef.current}\n aria-autocomplete=\"both\"\n aria-activedescendant={\n navigationItem !== '' ? navigationItem : undefined\n }\n autoComplete=\"off\"\n />\n );\n }\n);\n"],"file":"ComboboxInput.js"}
|
|
@@ -1,20 +1,20 @@
|
|
|
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 { useComboBoxContext } from './context';
|
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
export var ComboboxLabel = /*#__PURE__*/forwardRef(function ComboboxButton(_ref, ref) {
|
|
8
|
+
var _ref$as = _ref.as,
|
|
9
|
+
Comp = _ref$as === void 0 ? 'label' : _ref$as,
|
|
10
|
+
innerAs = _ref.innerAs,
|
|
11
|
+
preferredId = _ref.id,
|
|
12
|
+
props = _objectWithoutProperties(_ref, ["as", "innerAs", "id"]);
|
|
13
|
+
|
|
14
|
+
var _useComboBoxContext = useComboBoxContext(),
|
|
15
|
+
listboxIdRef = _useComboBoxContext.listboxIdRef,
|
|
16
|
+
labelIdRef = _useComboBoxContext.labelIdRef;
|
|
13
17
|
|
|
14
|
-
const {
|
|
15
|
-
listboxIdRef,
|
|
16
|
-
labelIdRef
|
|
17
|
-
} = useComboBoxContext();
|
|
18
18
|
labelIdRef.current = preferredId || labelIdRef.current;
|
|
19
19
|
return /*#__PURE__*/_jsx(Comp, _extends({
|
|
20
20
|
as: innerAs,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ComboBox/ComboboxLabel.tsx"],"names":["forwardRef","useComboBoxContext","ComboboxLabel","ComboboxButton","ref","as","Comp","innerAs","
|
|
1
|
+
{"version":3,"sources":["../../../src/ComboBox/ComboboxLabel.tsx"],"names":["forwardRef","React","useComboBoxContext","ComboboxLabel","ComboboxButton","ref","as","Comp","innerAs","preferredId","id","props","listboxIdRef","labelIdRef","current"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,kBAAT,QAAmC,WAAnC;;AASA,OAAO,IAAMC,aAAa,gBAAGH,UAAU,CACrC,SAASI,cAAT,OAEEC,GAFF,EAGE;AAAA,qBAFEC,EAEF;AAAA,MAFMC,IAEN,wBAFa,OAEb;AAAA,MAFsBC,OAEtB,QAFsBA,OAEtB;AAAA,MAFmCC,WAEnC,QAF+BC,EAE/B;AAAA,MAFmDC,KAEnD;;AAAA,4BACqCT,kBAAkB,EADvD;AAAA,MACQU,YADR,uBACQA,YADR;AAAA,MACsBC,UADtB,uBACsBA,UADtB;;AAGAA,EAAAA,UAAU,CAACC,OAAX,GAAqBL,WAAW,IAAII,UAAU,CAACC,OAA/C;AAEA,sBACE,KAAC,IAAD;AACE,IAAA,EAAE,EAAEN,OADN;AAEE,iCAA0B,EAF5B;AAGE,IAAA,OAAO,EAAEI,YAAY,CAACE,OAHxB;AAIE,IAAA,EAAE,EAAED,UAAU,CAACC,OAJjB;AAKE,IAAA,GAAG,EAAET;AALP,KAMMM,KANN,EADF;AAUD,CAnBoC,CAAhC","sourcesContent":["import { forwardRef } from 'react';\nimport * as React from 'react';\n\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxLabelProps\n extends React.LabelHTMLAttributes<HTMLLabelElement> {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n id?: string;\n}\n\nexport const ComboboxLabel = forwardRef<HTMLLabelElement, ComboboxLabelProps>(\n function ComboboxButton(\n { as: Comp = 'label', innerAs, id: preferredId, ...props },\n ref\n ) {\n const { listboxIdRef, labelIdRef } = useComboBoxContext();\n\n labelIdRef.current = preferredId || labelIdRef.current;\n\n return (\n <Comp\n as={innerAs}\n data-reach-combobox-label=\"\"\n htmlFor={listboxIdRef.current}\n id={labelIdRef.current}\n ref={ref}\n {...props}\n />\n );\n }\n);\n"],"file":"ComboboxLabel.js"}
|
|
@@ -1,27 +1,26 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import { forwardRef, useRef, useEffect } from 'react';
|
|
4
|
+
import * as React from 'react';
|
|
4
5
|
import { useComboBoxContext } from './context';
|
|
5
6
|
import { getScope } from '../hooks';
|
|
6
7
|
import { assignMultipleRefs } from '../utils';
|
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref,
|
|
16
|
-
props = _objectWithoutPropertiesLoose(_ref, ["persistSelection", "as", "innerAs"]);
|
|
9
|
+
export var ComboboxList = /*#__PURE__*/forwardRef(function ComboboxList(_ref, ref) {
|
|
10
|
+
var _ref$persistSelection = _ref.persistSelection,
|
|
11
|
+
persistSelection = _ref$persistSelection === void 0 ? false : _ref$persistSelection,
|
|
12
|
+
_ref$as = _ref.as,
|
|
13
|
+
Comp = _ref$as === void 0 ? 'ul' : _ref$as,
|
|
14
|
+
innerAs = _ref.innerAs,
|
|
15
|
+
props = _objectWithoutProperties(_ref, ["persistSelection", "as", "innerAs"]);
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
useEffect(()
|
|
17
|
+
var _useComboBoxContext = useComboBoxContext(),
|
|
18
|
+
persistSelectionRef = _useComboBoxContext.persistSelectionRef,
|
|
19
|
+
labelIdRef = _useComboBoxContext.labelIdRef,
|
|
20
|
+
listScope = _useComboBoxContext.listScope;
|
|
21
|
+
|
|
22
|
+
var listRef = useRef();
|
|
23
|
+
useEffect(function () {
|
|
25
24
|
listScope.current = getScope(listRef);
|
|
26
25
|
}, [listScope]);
|
|
27
26
|
persistSelectionRef.current = persistSelection;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ComboBox/ComboboxList.tsx"],"names":["forwardRef","useRef","useEffect","useComboBoxContext","getScope","assignMultipleRefs","ComboboxList","ref","persistSelection","as","Comp","innerAs","props","persistSelectionRef","labelIdRef","listScope","listRef","current"],"mappings":";;AAAA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,SAA7B,QAA8C,OAA9C;AAEA,SAASC,kBAAT,QAAmC,WAAnC;AACA,SAASC,QAAT,QAAyB,UAAzB;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAUA,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/ComboBox/ComboboxList.tsx"],"names":["forwardRef","useRef","useEffect","React","useComboBoxContext","getScope","assignMultipleRefs","ComboboxList","ref","persistSelection","as","Comp","innerAs","props","persistSelectionRef","labelIdRef","listScope","listRef","current"],"mappings":";;AAAA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,SAA7B,QAA8C,OAA9C;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,kBAAT,QAAmC,WAAnC;AACA,SAASC,QAAT,QAAyB,UAAzB;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAUA,OAAO,IAAMC,YAAY,gBAAGP,UAAU,CACpC,SAASO,YAAT,OASEC,GATF,EAUE;AAAA,mCANEC,gBAMF;AAAA,MANEA,gBAMF,sCANqB,KAMrB;AAAA,qBALEC,EAKF;AAAA,MALMC,IAKN,wBALa,IAKb;AAAA,MAJEC,OAIF,QAJEA,OAIF;AAAA,MAHKC,KAGL;;AAAA,4BACuDT,kBAAkB,EADzE;AAAA,MACQU,mBADR,uBACQA,mBADR;AAAA,MAC6BC,UAD7B,uBAC6BA,UAD7B;AAAA,MACyCC,SADzC,uBACyCA,SADzC;;AAGA,MAAMC,OAAO,GAAGhB,MAAM,EAAtB;AACAC,EAAAA,SAAS,CAAC,YAAM;AACdc,IAAAA,SAAS,CAACE,OAAV,GAAoBb,QAAQ,CAACY,OAAD,CAA5B;AACD,GAFQ,EAEN,CAACD,SAAD,CAFM,CAAT;AAIAF,EAAAA,mBAAmB,CAACI,OAApB,GAA8BT,gBAA9B;AAEA,sBACE,KAAC,IAAD,eACMI,KADN;AAEE,IAAA,EAAE,EAAED,OAFN;AAGE,IAAA,GAAG,EAAEN,kBAAkB,CAACE,GAAD,EAAMS,OAAN,CAHzB;AAIE,gCAAyB,EAJ3B;AAKE,IAAA,IAAI,EAAC,SALP;AAME,uBAAiBF,UAAU,CAACG;AAN9B,KADF;AAUD,CA/BmC,CAA/B","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport * as React from 'react';\n\nimport { useComboBoxContext } from './context';\nimport { getScope } from '../hooks';\nimport { assignMultipleRefs } from '../utils';\n\nexport interface ComboboxListProps\n extends React.HTMLAttributes<HTMLUListElement> {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n persistSelection?: boolean;\n children?: React.ReactNode;\n}\n\nexport const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(\n function ComboboxList(\n {\n // when true, and the list opens again, the option with a matching value will be\n // automatically highleted.\n persistSelection = false,\n as: Comp = 'ul',\n innerAs,\n ...props\n },\n ref\n ) {\n const { persistSelectionRef, labelIdRef, listScope } = useComboBoxContext();\n\n const listRef = useRef<HTMLUListElement>();\n useEffect(() => {\n listScope.current = getScope(listRef);\n }, [listScope]);\n\n persistSelectionRef.current = persistSelection;\n\n return (\n <Comp\n {...props}\n as={innerAs}\n ref={assignMultipleRefs(ref, listRef)}\n data-reach-combobox-list=\"\"\n role=\"listbox\"\n aria-labelledby={labelIdRef.current}\n />\n );\n }\n);\n"],"file":"ComboboxList.js"}
|
|
@@ -1,37 +1,35 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
|
|
4
4
|
/* eslint-disable @typescript-eslint/no-use-before-define */
|
|
5
5
|
import { forwardRef, useEffect, useRef } from 'react';
|
|
6
|
+
import * as React from 'react';
|
|
6
7
|
import { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';
|
|
7
8
|
import { wrapEvent } from '../utils/wrapEvent';
|
|
8
9
|
import { useComboBoxContext } from './context';
|
|
9
10
|
import { makeHash } from './makeHash';
|
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
-
export
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
props = _objectWithoutPropertiesLoose(_ref, ["children", "id", "value", "text", "onClick", "as", "innerAs"]);
|
|
12
|
+
export var ComboboxOption = /*#__PURE__*/forwardRef(function ComboboxOption(_ref, ref) {
|
|
13
|
+
var children = _ref.children,
|
|
14
|
+
idProp = _ref.id,
|
|
15
|
+
valueProp = _ref.value,
|
|
16
|
+
textProp = _ref.text,
|
|
17
|
+
onClick = _ref.onClick,
|
|
18
|
+
_ref$as = _ref.as,
|
|
19
|
+
Comp = _ref$as === void 0 ? 'li' : _ref$as,
|
|
20
|
+
innerAs = _ref.innerAs,
|
|
21
|
+
props = _objectWithoutProperties(_ref, ["children", "id", "value", "text", "onClick", "as", "innerAs"]);
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const value = valueProp;
|
|
34
|
-
let text = textProp ? textProp : '';
|
|
23
|
+
var _useComboBoxContext = useComboBoxContext(),
|
|
24
|
+
onSelect = _useComboBoxContext.onSelect,
|
|
25
|
+
navigationItem = _useComboBoxContext.data.navigationItem,
|
|
26
|
+
transition = _useComboBoxContext.transition,
|
|
27
|
+
optionsRef = _useComboBoxContext.optionsRef;
|
|
28
|
+
|
|
29
|
+
var transitionCleanupRef = useRef(transition);
|
|
30
|
+
var isActiveRef = useRef(false);
|
|
31
|
+
var value = valueProp;
|
|
32
|
+
var text = textProp ? textProp : '';
|
|
35
33
|
|
|
36
34
|
if (text.length === 0) {
|
|
37
35
|
if (typeof valueProp === 'string' && valueProp.length > 0) {
|
|
@@ -41,14 +39,14 @@ export const ComboboxOption = /*#__PURE__*/forwardRef(function ComboboxOption(_r
|
|
|
41
39
|
}
|
|
42
40
|
}
|
|
43
41
|
|
|
44
|
-
|
|
45
|
-
useEffect(()
|
|
46
|
-
|
|
42
|
+
var id = String(makeHash(idProp));
|
|
43
|
+
useEffect(function () {
|
|
44
|
+
var opts = optionsRef.current;
|
|
47
45
|
opts[id] = {
|
|
48
|
-
value,
|
|
49
|
-
text
|
|
46
|
+
value: value,
|
|
47
|
+
text: text
|
|
50
48
|
};
|
|
51
|
-
return ()
|
|
49
|
+
return function () {
|
|
52
50
|
delete opts[id];
|
|
53
51
|
};
|
|
54
52
|
}, [optionsRef, id, text, value]); // Keep updating this ref with the current
|
|
@@ -57,8 +55,8 @@ export const ComboboxOption = /*#__PURE__*/forwardRef(function ComboboxOption(_r
|
|
|
57
55
|
|
|
58
56
|
transitionCleanupRef.current = transition;
|
|
59
57
|
isActiveRef.current = navigationItem === id;
|
|
60
|
-
useEffect(()
|
|
61
|
-
return ()
|
|
58
|
+
useEffect(function () {
|
|
59
|
+
return function () {
|
|
62
60
|
if (isActiveRef.current === true) {
|
|
63
61
|
// clean up selections if this option is getting
|
|
64
62
|
// unmounted and it was the currently selected item
|
|
@@ -67,10 +65,10 @@ export const ComboboxOption = /*#__PURE__*/forwardRef(function ComboboxOption(_r
|
|
|
67
65
|
};
|
|
68
66
|
}, []);
|
|
69
67
|
|
|
70
|
-
|
|
68
|
+
var handleClick = function handleClick() {
|
|
71
69
|
onSelect && onSelect(text, id, value);
|
|
72
70
|
transition(SELECT_WITH_CLICK, {
|
|
73
|
-
text,
|
|
71
|
+
text: text,
|
|
74
72
|
item: id
|
|
75
73
|
});
|
|
76
74
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ComboBox/ComboboxOption.tsx"],"names":["forwardRef","useEffect","useRef","SELECT_WITH_CLICK","CLEAR_SELECTION","wrapEvent","useComboBoxContext","makeHash","ComboboxOption","ref","children","id","
|
|
1
|
+
{"version":3,"sources":["../../../src/ComboBox/ComboboxOption.tsx"],"names":["forwardRef","useEffect","useRef","React","SELECT_WITH_CLICK","CLEAR_SELECTION","wrapEvent","useComboBoxContext","makeHash","ComboboxOption","ref","children","idProp","id","valueProp","value","textProp","text","onClick","as","Comp","innerAs","props","onSelect","navigationItem","data","transition","optionsRef","transitionCleanupRef","isActiveRef","length","Error","String","opts","current","handleClick","item","undefined"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { forwardRef, useEffect, useRef } from 'react';\nimport * as React from 'react';\n\nimport { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { useComboBoxContext } from './context';\nimport { makeHash } from './makeHash';\n\nexport interface ComboboxOptionProps\n extends React.LiHTMLAttributes<HTMLLIElement> {\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n id: string;\n value: any;\n text?: string;\n onClick?: React.MouseEventHandler<HTMLLIElement>;\n children?: React.ReactNode;\n}\n\nexport const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(\n function ComboboxOption(\n {\n children,\n id: idProp,\n value: valueProp,\n text: textProp,\n onClick,\n as: Comp = 'li',\n innerAs,\n ...props\n },\n ref\n ) {\n const {\n onSelect,\n data: { navigationItem },\n transition,\n optionsRef,\n } = useComboBoxContext();\n const transitionCleanupRef = useRef(transition);\n const isActiveRef = useRef(false);\n\n const value: any = valueProp;\n let text: string = textProp ? textProp : '';\n\n if (text.length === 0) {\n if (typeof valueProp === 'string' && valueProp.length > 0) {\n text = valueProp;\n } else {\n throw new Error('Missing text for <ComboboxOption />');\n }\n }\n\n const id = String(makeHash(idProp));\n\n useEffect(() => {\n const opts = optionsRef.current;\n opts[id] = { value, text };\n\n return () => {\n delete opts[id];\n };\n }, [optionsRef, id, text, value]);\n\n // Keep updating this ref with the current\n // function pointer for transition, so it can\n // be used by the unmount effect below.\n transitionCleanupRef.current = transition;\n isActiveRef.current = navigationItem === id;\n\n useEffect(() => {\n return () => {\n if (isActiveRef.current === true) {\n // clean up selections if this option is getting\n // unmounted and it was the currently selected item\n transitionCleanupRef.current(CLEAR_SELECTION);\n }\n };\n }, []);\n\n const handleClick = () => {\n onSelect && onSelect(text, id, value);\n transition(SELECT_WITH_CLICK, { text, item: id });\n };\n\n return (\n <Comp\n {...props}\n as={innerAs}\n data-reach-combobox-option=\"\"\n ref={ref}\n id={id}\n role=\"option\"\n aria-selected={isActiveRef.current}\n data-highlighted={isActiveRef.current ? '' : undefined}\n // without this the menu will close from `onBlur`, but with it the\n // element can be `document.activeElement` and then our focus checks in\n // onBlur will work as intended\n tabIndex=\"-1\"\n onClick={wrapEvent(onClick, handleClick)}\n >\n {children || text}\n </Comp>\n );\n }\n);\n"],"file":"ComboboxOption.js"}
|