@basic-ui/core 0.0.36 → 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 +84 -83
- 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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +32 -31
- 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/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 +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 +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 +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 +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 -7151
- package/package.json +13 -13
- package/src/Accordion/Accordion.story.tsx +6 -4
- 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 +11 -9
- 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.story.tsx +5 -4
- package/src/List/List.tsx +1 -1
- package/src/List/ListItem.tsx +1 -1
- package/src/Menu/Menu.story.tsx +15 -13
- 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 +35 -19
- package/src/Modal/Modal.tsx +6 -4
- package/src/Modal/ModalBackdrop.tsx +2 -1
- package/src/Modal/NavDrawer.story.tsx +8 -7
- package/src/Popper/Popper.story.tsx +15 -19
- 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 +13 -9
- 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 +6 -5
- package/src/Spinner/Spinner.tsx +2 -1
- package/src/Spinner/SpinnerButton.tsx +2 -1
- package/src/Tabs/Tab.story.tsx +10 -8
- 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 +8 -6
- package/src/Tooltip/Tooltip.tsx +3 -7
- package/src/Tooltip/stateMachine.ts +1 -1
- package/src/Tooltip/useTooltip.ts +4 -3
- 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/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
- package/src/hooks/useId.ts +0 -18
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ComboBox/Combobox.tsx"],"names":["forwardRef","useRef","useMemo","stateChart","comboboxReducer","isVisible","INIT","ComboBoxProvider","useReducerMachine","
|
|
1
|
+
{"version":3,"sources":["../../../src/ComboBox/Combobox.tsx"],"names":["forwardRef","useRef","useMemo","useId","React","stateChart","comboboxReducer","isVisible","INIT","ComboBoxProvider","useReducerMachine","getScope","Combobox","ref","onSelect","openOnFocus","selectOnBlur","children","as","Comp","innerAs","rest","optionsRef","listScope","current","inputRef","popoverRef","buttonRef","autocompletePropRef","persistSelectionRef","clearOnEscapeRef","listboxIdRef","labelIdRef","defaultData","state","initial","text","item","navigationItem","lastActionType","data","transition","context"],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useMemo, useId } from 'react';\nimport * as React from 'react';\n\nimport type { ActionTypes } from './hooks';\nimport { stateChart, comboboxReducer, isVisible, INIT } from './hooks';\nimport type { ComboBoxContextProps } from './context';\nimport { ComboBoxProvider } from './context';\nimport { useReducerMachine } from '../hooks/useReducerMachine';\nimport type { Scope } from '../hooks';\nimport { getScope } from '../hooks';\n\nexport type SelectEventHandler = (\n text: string,\n itemId: string,\n obj: any\n) => void;\n\nexport type ComboboxProps = Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'onSelect'\n> & {\n onSelect?: SelectEventHandler;\n openOnFocus?: boolean;\n selectOnBlur?: boolean;\n children?: React.ReactNode;\n as?: React.ElementType<any>;\n innerAs?: React.ElementType<any>;\n};\n\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(\n function Combobox(\n {\n // Called whenever the user selects an item from the list\n onSelect,\n\n // opens the list when the input receives focused (but only if there are\n // items in the list)\n openOnFocus = false,\n\n // if set to true, it will select an item after blurring\n selectOnBlur = false,\n\n children,\n as: Comp = 'div',\n innerAs,\n ...rest\n }: ComboboxProps,\n ref\n ) {\n // We store the values of all the ComboboxOptions on this ref. This makes it\n // possible to perform the keyboard navigation from the input on the list. We\n // manipulate this array through context so that we don't have to enforce a\n // parent/child relationship between ComboboxList and ComboboxOption.\n const optionsRef = useRef<{\n [itemId: string]: {\n value: string | unknown;\n text: string;\n };\n }>({});\n\n const listScope: Scope<HTMLElement> = useRef(getScope({ current: null }));\n\n // Need this to focus it\n const inputRef = useRef<HTMLInputElement>(null);\n\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n // When <ComboboxInput autocomplete={false} /> we don't want cycle back to\n // the user's value while navigating (because it's always the user's value),\n // but we need to know this in useKeyDown which is far away from the prop\n // here, so we do something sneaky and write it to this ref on context so we\n // can use it anywhere else 😛. Another new trick for me and I'm excited\n // about this one too!\n const autocompletePropRef = useRef<boolean>(false);\n\n const persistSelectionRef = useRef<boolean>(false);\n\n const clearOnEscapeRef = useRef<boolean>(false);\n\n const listboxIdRef = useRef<string | undefined>();\n\n const labelIdRef = useRef<string | undefined>();\n\n const defaultData = {\n // initial state\n state: stateChart.initial,\n // the value the user has typed, we derived this also when the developer is\n // controlling the value of ComboboxInput\n text: '',\n // the index the user has typed, we derived this also when the developer is\n // controlling the value of ComboboxInput\n item: '',\n // the hash of the currently navigated item\n navigationItem: '',\n // the last submitted action\n lastActionType: INIT as ActionTypes,\n };\n\n const [state, data, transition] = useReducerMachine(\n stateChart,\n comboboxReducer,\n defaultData\n );\n\n listboxIdRef.current = useId();\n\n labelIdRef.current = useId();\n\n const context = useMemo(\n (): ComboBoxContextProps => ({\n data,\n inputRef,\n popoverRef,\n buttonRef,\n onSelect,\n optionsRef,\n listScope,\n state,\n transition,\n listboxIdRef,\n labelIdRef,\n autocompletePropRef,\n persistSelectionRef,\n clearOnEscapeRef,\n isVisible: isVisible(state),\n openOnFocus,\n selectOnBlur,\n }),\n [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]\n );\n\n return (\n <ComboBoxProvider value={context}>\n <Comp\n {...rest}\n as={innerAs}\n data-reach-combobox=\"\"\n ref={ref}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-owns={listboxIdRef.current}\n aria-expanded={context.isVisible}\n >\n {children}\n </Comp>\n </ComboBoxProvider>\n );\n }\n);\n"],"file":"Combobox.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 } 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
|
};
|