@basic-ui/core 0.0.53 → 0.0.56
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 +278 -505
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Accordion/Accordion.js +20 -29
- package/build/esm/Accordion/Accordion.js.map +1 -1
- package/build/esm/Accordion/AccordionBody.js +18 -32
- package/build/esm/Accordion/AccordionBody.js.map +1 -1
- package/build/esm/Accordion/AccordionHeader.js +37 -74
- package/build/esm/Accordion/AccordionHeader.js.map +1 -1
- package/build/esm/Accordion/AccordionItem.js +19 -22
- package/build/esm/Accordion/AccordionItem.js.map +1 -1
- package/build/esm/Accordion/context.js +16 -13
- package/build/esm/Accordion/context.js.map +1 -1
- package/build/esm/Accordion/index.js.map +1 -1
- package/build/esm/Accordion/scopeQuery.js.map +1 -1
- package/build/esm/CheckBox/CheckBox.js +15 -25
- package/build/esm/CheckBox/CheckBox.js.map +1 -1
- package/build/esm/CheckBox/index.js.map +1 -1
- package/build/esm/ComboBox/Combobox.d.ts +7 -7
- package/build/esm/ComboBox/Combobox.js +52 -59
- package/build/esm/ComboBox/Combobox.js.map +1 -1
- package/build/esm/ComboBox/ComboboxButton.js +23 -28
- package/build/esm/ComboBox/ComboboxButton.js.map +1 -1
- package/build/esm/ComboBox/ComboboxInput.js +67 -70
- package/build/esm/ComboBox/ComboboxInput.js.map +1 -1
- package/build/esm/ComboBox/ComboboxLabel.js +15 -17
- package/build/esm/ComboBox/ComboboxLabel.js.map +1 -1
- package/build/esm/ComboBox/ComboboxList.js +19 -20
- package/build/esm/ComboBox/ComboboxList.js.map +1 -1
- package/build/esm/ComboBox/ComboboxOption.js +41 -45
- package/build/esm/ComboBox/ComboboxOption.js.map +1 -1
- package/build/esm/ComboBox/ComboboxPopover.js +22 -21
- package/build/esm/ComboBox/ComboboxPopover.js.map +1 -1
- package/build/esm/ComboBox/cities.js.map +1 -1
- package/build/esm/ComboBox/context.js +5 -6
- package/build/esm/ComboBox/context.js.map +1 -1
- package/build/esm/ComboBox/hooks.d.ts +2 -2
- package/build/esm/ComboBox/hooks.js +175 -148
- package/build/esm/ComboBox/hooks.js.map +1 -1
- package/build/esm/ComboBox/index.js.map +1 -1
- package/build/esm/ComboBox/makeHash.js +3 -6
- package/build/esm/ComboBox/makeHash.js.map +1 -1
- package/build/esm/ComboBox/scopeQuery.js.map +1 -1
- package/build/esm/FocusLock/FocusLock.js +26 -32
- package/build/esm/FocusLock/FocusLock.js.map +1 -1
- package/build/esm/FocusLock/index.js.map +1 -1
- package/build/esm/FocusLock/tabUtils.js +5 -7
- package/build/esm/FocusLock/tabUtils.js.map +1 -1
- package/build/esm/FocusLock/useFocusLock.js +14 -19
- package/build/esm/FocusLock/useFocusLock.js.map +1 -1
- package/build/esm/List/List.js +9 -11
- package/build/esm/List/List.js.map +1 -1
- package/build/esm/List/ListItem.js +9 -11
- package/build/esm/List/ListItem.js.map +1 -1
- package/build/esm/List/context.js +6 -6
- package/build/esm/List/context.js.map +1 -1
- package/build/esm/List/index.js.map +1 -1
- package/build/esm/Menu/ContextMenuTrigger.d.ts +4 -4
- package/build/esm/Menu/ContextMenuTrigger.js +32 -37
- package/build/esm/Menu/ContextMenuTrigger.js.map +1 -1
- package/build/esm/Menu/Menu.js +33 -49
- package/build/esm/Menu/Menu.js.map +1 -1
- package/build/esm/Menu/MenuButton.d.ts +4 -4
- package/build/esm/Menu/MenuButton.js +28 -44
- package/build/esm/Menu/MenuButton.js.map +1 -1
- package/build/esm/Menu/MenuItem.js +29 -38
- package/build/esm/Menu/MenuItem.js.map +1 -1
- package/build/esm/Menu/MenuList.js +61 -116
- package/build/esm/Menu/MenuList.js.map +1 -1
- package/build/esm/Menu/MenuPopover.js +16 -19
- package/build/esm/Menu/MenuPopover.js.map +1 -1
- package/build/esm/Menu/context.d.ts +1 -1
- package/build/esm/Menu/context.js +14 -12
- package/build/esm/Menu/context.js.map +1 -1
- package/build/esm/Menu/fixtures/countryList.js +1 -1
- package/build/esm/Menu/fixtures/countryList.js.map +1 -1
- package/build/esm/Menu/index.js.map +1 -1
- package/build/esm/Menu/scope.js.map +1 -1
- package/build/esm/Modal/Modal.js +13 -18
- package/build/esm/Modal/Modal.js.map +1 -1
- package/build/esm/Modal/ModalBackdrop.js +24 -33
- package/build/esm/Modal/ModalBackdrop.js.map +1 -1
- package/build/esm/Modal/index.js.map +1 -1
- package/build/esm/Popper/Popper.d.ts +3 -3
- package/build/esm/Popper/Popper.js +44 -61
- package/build/esm/Popper/Popper.js.map +1 -1
- package/build/esm/Popper/PopperArrow.js +11 -16
- package/build/esm/Popper/PopperArrow.js.map +1 -1
- package/build/esm/Popper/context.js +3 -5
- package/build/esm/Popper/context.js.map +1 -1
- package/build/esm/Popper/index.js.map +1 -1
- package/build/esm/Portal/Portal.js +9 -11
- package/build/esm/Portal/Portal.js.map +1 -1
- package/build/esm/Portal/PortalSelectorProvider.d.ts +3 -3
- package/build/esm/Portal/PortalSelectorProvider.js +6 -4
- package/build/esm/Portal/PortalSelectorProvider.js.map +1 -1
- package/build/esm/Portal/index.js.map +1 -1
- package/build/esm/RadioButton/RadioButton.js +17 -23
- package/build/esm/RadioButton/RadioButton.js.map +1 -1
- package/build/esm/RadioButton/RadioGroup.js +19 -28
- package/build/esm/RadioButton/RadioGroup.js.map +1 -1
- package/build/esm/RadioButton/context.d.ts +1 -1
- package/build/esm/RadioButton/context.js +8 -6
- package/build/esm/RadioButton/context.js.map +1 -1
- package/build/esm/RadioButton/index.js.map +1 -1
- package/build/esm/SkipNav/SkipNav.js +9 -11
- package/build/esm/SkipNav/SkipNav.js.map +1 -1
- package/build/esm/SkipNav/index.js.map +1 -1
- package/build/esm/Slider/Slider.d.ts +7 -7
- package/build/esm/Slider/Slider.js +340 -407
- package/build/esm/Slider/Slider.js.map +1 -1
- package/build/esm/Slider/index.js.map +1 -1
- package/build/esm/Spinner/Spinner.js +31 -59
- package/build/esm/Spinner/Spinner.js.map +1 -1
- package/build/esm/Spinner/SpinnerButton.js +14 -19
- package/build/esm/Spinner/SpinnerButton.js.map +1 -1
- package/build/esm/Spinner/context.js +8 -7
- package/build/esm/Spinner/context.js.map +1 -1
- package/build/esm/Spinner/index.js.map +1 -1
- package/build/esm/Tabs/Tab.js +32 -50
- package/build/esm/Tabs/Tab.js.map +1 -1
- package/build/esm/Tabs/TabList.js +24 -34
- package/build/esm/Tabs/TabList.js.map +1 -1
- package/build/esm/Tabs/TabPanel.js +16 -23
- package/build/esm/Tabs/TabPanel.js.map +1 -1
- package/build/esm/Tabs/TabPanels.js +15 -20
- package/build/esm/Tabs/TabPanels.js.map +1 -1
- package/build/esm/Tabs/Tabs.js +17 -33
- package/build/esm/Tabs/Tabs.js.map +1 -1
- package/build/esm/Tabs/context.js +16 -13
- package/build/esm/Tabs/context.js.map +1 -1
- package/build/esm/Tabs/index.js.map +1 -1
- package/build/esm/Tabs/scopeQuery.js.map +1 -1
- package/build/esm/Tooltip/Tooltip.d.ts +2 -2
- package/build/esm/Tooltip/Tooltip.js +20 -30
- package/build/esm/Tooltip/Tooltip.js.map +1 -1
- package/build/esm/Tooltip/index.js.map +1 -1
- package/build/esm/Tooltip/stateMachine.d.ts +2 -2
- package/build/esm/Tooltip/stateMachine.js +95 -81
- package/build/esm/Tooltip/stateMachine.js.map +1 -1
- package/build/esm/Tooltip/useTooltip.d.ts +2 -2
- package/build/esm/Tooltip/useTooltip.js +38 -50
- package/build/esm/Tooltip/useTooltip.js.map +1 -1
- package/build/esm/hooks/index.js.map +1 -1
- package/build/esm/hooks/useAutoFocus.js +3 -3
- package/build/esm/hooks/useAutoFocus.js.map +1 -1
- package/build/esm/hooks/useChildrenCounter.js +6 -8
- package/build/esm/hooks/useChildrenCounter.js.map +1 -1
- package/build/esm/hooks/useControlledState.js +6 -16
- package/build/esm/hooks/useControlledState.js.map +1 -1
- package/build/esm/hooks/useFocusReturn.js +8 -12
- package/build/esm/hooks/useFocusReturn.js.map +1 -1
- package/build/esm/hooks/useFocusState.d.ts +2 -2
- package/build/esm/hooks/useFocusState.js +9 -15
- package/build/esm/hooks/useFocusState.js.map +1 -1
- package/build/esm/hooks/useGestureHandlers.d.ts +1 -1
- package/build/esm/hooks/useGestureHandlers.js +80 -100
- package/build/esm/hooks/useGestureHandlers.js.map +1 -1
- package/build/esm/hooks/useMeasure.js +7 -15
- package/build/esm/hooks/useMeasure.js.map +1 -1
- package/build/esm/hooks/useOnClickOutside.js +4 -6
- package/build/esm/hooks/useOnClickOutside.js.map +1 -1
- package/build/esm/hooks/useOnKeyDown.js +3 -4
- package/build/esm/hooks/useOnKeyDown.js.map +1 -1
- package/build/esm/hooks/useReducerMachine.d.ts +1 -1
- package/build/esm/hooks/useReducerMachine.js +15 -26
- package/build/esm/hooks/useReducerMachine.js.map +1 -1
- package/build/esm/hooks/useRemoveBodyScroll.js +9 -14
- package/build/esm/hooks/useRemoveBodyScroll.js.map +1 -1
- package/build/esm/hooks/useScope.d.ts +2 -2
- package/build/esm/hooks/useScope.js +12 -14
- package/build/esm/hooks/useScope.js.map +1 -1
- package/build/esm/hooks/useThrottle.js +5 -10
- package/build/esm/hooks/useThrottle.js.map +1 -1
- package/build/esm/index.js +4 -2
- package/build/esm/index.js.map +1 -1
- package/build/esm/styles.d.js +2 -0
- package/build/esm/styles.d.js.map +1 -0
- package/build/esm/utils/assign-ref.js +3 -5
- package/build/esm/utils/assign-ref.js.map +1 -1
- package/build/esm/utils/can-use-dom.js.map +1 -1
- package/build/esm/utils/clamp.js.map +1 -1
- package/build/esm/utils/context.d.ts +1 -1
- package/build/esm/utils/context.js +13 -20
- package/build/esm/utils/context.js.map +1 -1
- package/build/esm/utils/create-subscription.js +5 -10
- package/build/esm/utils/create-subscription.js.map +1 -1
- package/build/esm/utils/get-circular-index.js +0 -1
- package/build/esm/utils/get-circular-index.js.map +1 -1
- package/build/esm/utils/index.js.map +1 -1
- package/build/esm/utils/is-right-click.js.map +1 -1
- package/build/esm/utils/owner-document.js +1 -1
- package/build/esm/utils/owner-document.js.map +1 -1
- package/build/esm/utils/polymorphic.d.ts +10 -10
- package/build/esm/utils/polymorphic.js.map +1 -1
- package/build/esm/utils/rubber-band-clamp.js +2 -5
- package/build/esm/utils/rubber-band-clamp.js.map +1 -1
- package/build/esm/utils/use-stable-callback.js +8 -10
- package/build/esm/utils/use-stable-callback.js.map +1 -1
- package/build/esm/utils/wrap-event.d.ts +1 -1
- package/build/esm/utils/wrap-event.js +2 -5
- package/build/esm/utils/wrap-event.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/src/Accordion/Accordion.tsx +1 -1
- package/src/Accordion/AccordionBody.tsx +1 -1
- package/src/Accordion/AccordionHeader.tsx +1 -2
- package/src/ComboBox/Combobox.tsx +2 -2
- package/src/ComboBox/ComboboxList.tsx +1 -1
- package/src/ComboBox/ComboboxOption.tsx +0 -1
- package/src/ComboBox/hooks.tsx +0 -3
- package/src/FocusLock/useFocusLock.ts +0 -1
- package/src/Menu/Menu.tsx +2 -3
- package/src/Menu/MenuItem.tsx +1 -2
- package/src/Menu/MenuList.tsx +4 -4
- package/src/Modal/Modal.story.tsx +11 -7
- package/src/Modal/ModalBackdrop.tsx +1 -1
- package/src/Modal/NavDrawer.story.tsx +9 -6
- package/src/Popper/Popper.story.tsx +23 -7
- package/src/Popper/Popper.tsx +2 -2
- package/src/RadioButton/RadioButton.story.tsx +2 -1
- package/src/Slider/Slider.tsx +6 -11
- package/src/Spinner/Spinner.tsx +1 -1
- package/src/Tabs/TabList.tsx +1 -1
- package/src/Tooltip/Tooltip.tsx +8 -5
- package/src/Tooltip/useTooltip.ts +1 -1
- package/src/hooks/useControlledState.ts +1 -6
- package/src/hooks/useGestureHandlers.ts +0 -4
- package/src/hooks/useRemoveBodyScroll.ts +0 -1
- package/src/hooks/useScope.ts +1 -1
- package/src/styles.d.ts +1 -0
- package/src/utils/polymorphic.ts +14 -10
- package/src/utils/use-stable-callback.ts +0 -1
- package/build/esm/Carousel/Carousel.d.ts +0 -9
- package/build/esm/Carousel/Carousel.js +0 -38
- package/build/esm/Carousel/Carousel.js.map +0 -1
- package/build/esm/Carousel/Fader.d.ts +0 -14
- package/build/esm/Carousel/Fader.js +0 -76
- package/build/esm/Carousel/Fader.js.map +0 -1
- package/build/esm/Carousel/FaderItem.d.ts +0 -5
- package/build/esm/Carousel/FaderItem.js +0 -16
- package/build/esm/Carousel/FaderItem.js.map +0 -1
- package/build/esm/Carousel/Preloader.d.ts +0 -7
- package/build/esm/Carousel/Preloader.js +0 -70
- package/build/esm/Carousel/Preloader.js.map +0 -1
- package/build/esm/Carousel/Slider.d.ts +0 -14
- package/build/esm/Carousel/Slider.js +0 -212
- package/build/esm/Carousel/Slider.js.map +0 -1
- package/build/esm/Carousel/SliderItem.d.ts +0 -12
- package/build/esm/Carousel/SliderItem.js +0 -41
- package/build/esm/Carousel/SliderItem.js.map +0 -1
- package/build/esm/Carousel/context.d.ts +0 -10
- package/build/esm/Carousel/context.js +0 -8
- package/build/esm/Carousel/context.js.map +0 -1
- package/build/esm/Carousel/getSliderParams.d.ts +0 -9
- package/build/esm/Carousel/getSliderParams.js +0 -85
- package/build/esm/Carousel/getSliderParams.js.map +0 -1
- package/build/esm/Carousel/index.d.ts +0 -7
- package/build/esm/Carousel/index.js +0 -8
- package/build/esm/Carousel/index.js.map +0 -1
- package/build/esm/Carousel/useCarouselGestures.d.ts +0 -30
- package/build/esm/Carousel/useCarouselGestures.js +0 -33
- package/build/esm/Carousel/useCarouselGestures.js.map +0 -1
- package/build/esm/DatePicker/DatePicker.d.ts +0 -24
- package/build/esm/DatePicker/DatePicker.js +0 -101
- package/build/esm/DatePicker/DatePicker.js.map +0 -1
- package/build/esm/DatePicker/DatePickerSelect.d.ts +0 -8
- package/build/esm/DatePicker/DatePickerSelect.js +0 -201
- package/build/esm/DatePicker/DatePickerSelect.js.map +0 -1
- package/build/esm/DatePicker/RangeDatePicker.d.ts +0 -28
- package/build/esm/DatePicker/RangeDatePicker.js +0 -94
- package/build/esm/DatePicker/RangeDatePicker.js.map +0 -1
- package/build/esm/DatePicker/adjustDates.d.ts +0 -4
- package/build/esm/DatePicker/adjustDates.js +0 -18
- package/build/esm/DatePicker/adjustDates.js.map +0 -1
- package/build/esm/DatePicker/contexts.d.ts +0 -31
- package/build/esm/DatePicker/contexts.js +0 -15
- package/build/esm/DatePicker/contexts.js.map +0 -1
- package/build/esm/DatePicker/dateTypes.d.ts +0 -2
- package/build/esm/DatePicker/dateTypes.js +0 -2
- package/build/esm/DatePicker/dateTypes.js.map +0 -1
- package/build/esm/DatePicker/hooks.d.ts +0 -36
- package/build/esm/DatePicker/hooks.js +0 -98
- package/build/esm/DatePicker/hooks.js.map +0 -1
- package/build/esm/DatePicker/index.d.ts +0 -5
- package/build/esm/DatePicker/index.js +0 -6
- package/build/esm/DatePicker/index.js.map +0 -1
- package/build/esm/hooks/useId.d.ts +0 -1
- package/build/esm/hooks/useId.js +0 -25
- package/build/esm/hooks/useId.js.map +0 -1
- package/build/esm/utils/assignRef.d.ts +0 -3
- package/build/esm/utils/assignRef.js +0 -25
- package/build/esm/utils/assignRef.js.map +0 -1
- package/build/esm/utils/getCircularIndex.d.ts +0 -1
- package/build/esm/utils/getCircularIndex.js +0 -8
- package/build/esm/utils/getCircularIndex.js.map +0 -1
- package/build/esm/utils/rubberBandClamp.d.ts +0 -2
- package/build/esm/utils/rubberBandClamp.js +0 -20
- package/build/esm/utils/rubberBandClamp.js.map +0 -1
- package/build/esm/utils/wrapEvent.d.ts +0 -3
- package/build/esm/utils/wrapEvent.js +0 -16
- package/build/esm/utils/wrapEvent.js.map +0 -1
- package/build/tsconfig.tsbuildinfo +0 -7270
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxInput.js","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","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"],"sources":["../../../src/ComboBox/ComboboxInput.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n ChangeEventHandler,\n ElementType,\n FocusEventHandler,\n InputHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n} from 'react';\nimport { forwardRef, useEffect, useRef } 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 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?: MouseEventHandler<HTMLInputElement>;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n onFocus?: FocusEventHandler<HTMLInputElement>;\n as?: ElementType<any>;\n innerAs?: 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: 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"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboboxInput.js","names":["forwardRef","useEffect","useRef","useBlur","CLEAR","CHANGE","useKeyDown","SELECT_WITH_CLICK","FOCUS","NAVIGATING","INIT","useFocusManagement","assignMultipleRefs","wrapEvent","useComboBoxContext","jsx","_jsx","ComboboxInput","_ref","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","ref","autoComplete"],"sources":["../../../src/ComboBox/ComboboxInput.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n ChangeEventHandler,\n ElementType,\n FocusEventHandler,\n InputHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n} from 'react';\nimport { forwardRef, useEffect, useRef } 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 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?: MouseEventHandler<HTMLInputElement>;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n onFocus?: FocusEventHandler<HTMLInputElement>;\n as?: ElementType<any>;\n innerAs?: 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: 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"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,27 +1,25 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["as", "innerAs", "id"];
|
|
4
1
|
import { forwardRef } from 'react';
|
|
5
2
|
import { useComboBoxContext } from './context';
|
|
6
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
export
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
4
|
+
export const ComboboxLabel = /*#__PURE__*/forwardRef(function ComboboxButton(_ref, ref) {
|
|
5
|
+
let {
|
|
6
|
+
as: Comp = 'label',
|
|
7
|
+
innerAs,
|
|
8
|
+
id: preferredId,
|
|
9
|
+
...props
|
|
10
|
+
} = _ref;
|
|
11
|
+
const {
|
|
12
|
+
listboxIdRef,
|
|
13
|
+
labelIdRef
|
|
14
|
+
} = useComboBoxContext();
|
|
18
15
|
labelIdRef.current = preferredId || labelIdRef.current;
|
|
19
|
-
return /*#__PURE__*/_jsx(Comp,
|
|
16
|
+
return /*#__PURE__*/_jsx(Comp, {
|
|
20
17
|
as: innerAs,
|
|
21
18
|
"data-reach-combobox-label": "",
|
|
22
19
|
htmlFor: listboxIdRef.current,
|
|
23
20
|
id: labelIdRef.current,
|
|
24
|
-
ref: ref
|
|
25
|
-
|
|
21
|
+
ref: ref,
|
|
22
|
+
...props
|
|
23
|
+
});
|
|
26
24
|
});
|
|
27
25
|
//# sourceMappingURL=ComboboxLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxLabel.js","names":["forwardRef","useComboBoxContext","ComboboxLabel","ComboboxButton","ref","as","Comp","innerAs","
|
|
1
|
+
{"version":3,"file":"ComboboxLabel.js","names":["forwardRef","useComboBoxContext","jsx","_jsx","ComboboxLabel","ComboboxButton","_ref","ref","as","Comp","innerAs","id","preferredId","props","listboxIdRef","labelIdRef","current","htmlFor"],"sources":["../../../src/ComboBox/ComboboxLabel.tsx"],"sourcesContent":["import type { ElementType, LabelHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxLabelProps\n extends LabelHTMLAttributes<HTMLLabelElement> {\n as?: ElementType<any>;\n innerAs?: 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"],"mappings":"AACA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,kBAAkB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS/C,OAAO,MAAMC,aAAa,gBAAGJ,UAAU,CACrC,SAASK,cAAcA,CAAAC,IAAA,EAErBC,GAAG,EACH;EAAA,IAFA;IAAEC,EAAE,EAAEC,IAAI,GAAG,OAAO;IAAEC,OAAO;IAAEC,EAAE,EAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAP,IAAA;EAG1D,MAAM;IAAEQ,YAAY;IAAEC;EAAW,CAAC,GAAGd,kBAAkB,CAAC,CAAC;EAEzDc,UAAU,CAACC,OAAO,GAAGJ,WAAW,IAAIG,UAAU,CAACC,OAAO;EAEtD,oBACEb,IAAA,CAACM,IAAI;IACHD,EAAE,EAAEE,OAAQ;IACZ,6BAA0B,EAAE;IAC5BO,OAAO,EAAEH,YAAY,CAACE,OAAQ;IAC9BL,EAAE,EAAEI,UAAU,CAACC,OAAQ;IACvBT,GAAG,EAAEA,GAAI;IAAA,GACLM;EAAK,CACV,CAAC;AAEN,CACF,CAAC","ignoreList":[]}
|
|
@@ -1,35 +1,34 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["persistSelection", "as", "innerAs"];
|
|
4
1
|
import { forwardRef, useRef, useEffect } from 'react';
|
|
5
2
|
import { useComboBoxContext } from './context';
|
|
6
3
|
import { getScope } from '../hooks';
|
|
7
4
|
import { assignMultipleRefs } from '../utils';
|
|
8
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
export
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
6
|
+
export const ComboboxList = /*#__PURE__*/forwardRef(function ComboboxList(_ref, ref) {
|
|
7
|
+
let {
|
|
8
|
+
// when true, and the list opens again, the option with a matching value will be
|
|
9
|
+
// automatically highleted.
|
|
10
|
+
persistSelection = false,
|
|
11
|
+
as: Comp = 'ul',
|
|
12
|
+
innerAs,
|
|
13
|
+
...props
|
|
14
|
+
} = _ref;
|
|
15
|
+
const {
|
|
16
|
+
persistSelectionRef,
|
|
17
|
+
labelIdRef,
|
|
18
|
+
listScope
|
|
19
|
+
} = useComboBoxContext();
|
|
20
|
+
const listRef = useRef(null);
|
|
21
|
+
useEffect(() => {
|
|
24
22
|
listScope.current = getScope(listRef);
|
|
25
23
|
}, [listScope]);
|
|
26
24
|
persistSelectionRef.current = persistSelection;
|
|
27
|
-
return /*#__PURE__*/_jsx(Comp,
|
|
25
|
+
return /*#__PURE__*/_jsx(Comp, {
|
|
26
|
+
...props,
|
|
28
27
|
as: innerAs,
|
|
29
28
|
ref: assignMultipleRefs(ref, listRef),
|
|
30
29
|
"data-reach-combobox-list": "",
|
|
31
30
|
role: "listbox",
|
|
32
31
|
"aria-labelledby": labelIdRef.current
|
|
33
|
-
})
|
|
32
|
+
});
|
|
34
33
|
});
|
|
35
34
|
//# sourceMappingURL=ComboboxList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxList.js","names":["forwardRef","useRef","useEffect","useComboBoxContext","getScope","assignMultipleRefs","ComboboxList","ref","persistSelection","as","Comp","innerAs","props","persistSelectionRef","labelIdRef","listScope","listRef","current"],"sources":["../../../src/ComboBox/ComboboxList.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, ReactNode } from 'react';\nimport { forwardRef, useRef, useEffect } from 'react';\n\nimport { useComboBoxContext } from './context';\nimport { getScope } from '../hooks';\nimport { assignMultipleRefs } from '../utils';\n\nexport interface ComboboxListProps extends HTMLAttributes<HTMLUListElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n persistSelection?: boolean;\n children?: 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"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ComboboxList.js","names":["forwardRef","useRef","useEffect","useComboBoxContext","getScope","assignMultipleRefs","jsx","_jsx","ComboboxList","_ref","ref","persistSelection","as","Comp","innerAs","props","persistSelectionRef","labelIdRef","listScope","listRef","current","role"],"sources":["../../../src/ComboBox/ComboboxList.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, ReactNode } from 'react';\nimport { forwardRef, useRef, useEffect } from 'react';\n\nimport { useComboBoxContext } from './context';\nimport { getScope } from '../hooks';\nimport { assignMultipleRefs } from '../utils';\n\nexport interface ComboboxListProps extends HTMLAttributes<HTMLUListElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n persistSelection?: boolean;\n children?: 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 | null>(null);\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"],"mappings":"AACA,SAASA,UAAU,EAAEC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AAErD,SAASC,kBAAkB,QAAQ,WAAW;AAC9C,SAASC,QAAQ,QAAQ,UAAU;AACnC,SAASC,kBAAkB,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS9C,OAAO,MAAMC,YAAY,gBAAGR,UAAU,CACpC,SAASQ,YAAYA,CAAAC,IAAA,EASnBC,GAAG,EACH;EAAA,IATA;IACE;IACA;IACAC,gBAAgB,GAAG,KAAK;IACxBC,EAAE,EAAEC,IAAI,GAAG,IAAI;IACfC,OAAO;IACP,GAAGC;EACL,CAAC,GAAAN,IAAA;EAGD,MAAM;IAAEO,mBAAmB;IAAEC,UAAU;IAAEC;EAAU,CAAC,GAAGf,kBAAkB,CAAC,CAAC;EAE3E,MAAMgB,OAAO,GAAGlB,MAAM,CAA0B,IAAI,CAAC;EACrDC,SAAS,CAAC,MAAM;IACdgB,SAAS,CAACE,OAAO,GAAGhB,QAAQ,CAACe,OAAO,CAAC;EACvC,CAAC,EAAE,CAACD,SAAS,CAAC,CAAC;EAEfF,mBAAmB,CAACI,OAAO,GAAGT,gBAAgB;EAE9C,oBACEJ,IAAA,CAACM,IAAI;IAAA,GACCE,KAAK;IACTH,EAAE,EAAEE,OAAQ;IACZJ,GAAG,EAAEL,kBAAkB,CAACK,GAAG,EAAES,OAAO,CAAE;IACtC,4BAAyB,EAAE;IAC3BE,IAAI,EAAC,SAAS;IACd,mBAAiBJ,UAAU,CAACG;EAAQ,CACrC,CAAC;AAEN,CACF,CAAC","ignoreList":[]}
|
|
@@ -1,36 +1,32 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["children", "id", "value", "text", "onClick", "as", "innerAs"];
|
|
4
|
-
|
|
5
|
-
/* eslint-disable @typescript-eslint/no-use-before-define */
|
|
6
1
|
import { forwardRef, useEffect, useRef } from 'react';
|
|
7
2
|
import { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';
|
|
8
3
|
import { wrapEvent } from '../utils/wrap-event';
|
|
9
4
|
import { useComboBoxContext } from './context';
|
|
10
5
|
import { makeHash } from './makeHash';
|
|
11
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
-
export
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
7
|
+
export const ComboboxOption = /*#__PURE__*/forwardRef(function ComboboxOption(_ref, ref) {
|
|
8
|
+
let {
|
|
9
|
+
children,
|
|
10
|
+
id: idProp,
|
|
11
|
+
value: valueProp,
|
|
12
|
+
text: textProp,
|
|
13
|
+
onClick,
|
|
14
|
+
as: Comp = 'li',
|
|
15
|
+
innerAs,
|
|
16
|
+
...props
|
|
17
|
+
} = _ref;
|
|
18
|
+
const {
|
|
19
|
+
onSelect,
|
|
20
|
+
data: {
|
|
21
|
+
navigationItem
|
|
22
|
+
},
|
|
23
|
+
transition,
|
|
24
|
+
optionsRef
|
|
25
|
+
} = useComboBoxContext();
|
|
26
|
+
const transitionCleanupRef = useRef(transition);
|
|
27
|
+
const isActiveRef = useRef(false);
|
|
28
|
+
const value = valueProp;
|
|
29
|
+
let text = textProp ? textProp : '';
|
|
34
30
|
if (text.length === 0) {
|
|
35
31
|
if (typeof valueProp === 'string' && valueProp.length > 0) {
|
|
36
32
|
text = valueProp;
|
|
@@ -38,25 +34,25 @@ export var ComboboxOption = /*#__PURE__*/forwardRef(function ComboboxOption(_ref
|
|
|
38
34
|
throw new Error('Missing text for <ComboboxOption />');
|
|
39
35
|
}
|
|
40
36
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var opts = optionsRef.current;
|
|
37
|
+
const id = String(makeHash(idProp));
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
const opts = optionsRef.current;
|
|
45
40
|
opts[id] = {
|
|
46
|
-
value
|
|
47
|
-
text
|
|
41
|
+
value,
|
|
42
|
+
text
|
|
48
43
|
};
|
|
49
|
-
return
|
|
44
|
+
return () => {
|
|
50
45
|
delete opts[id];
|
|
51
46
|
};
|
|
52
|
-
}, [optionsRef, id, text, value]);
|
|
47
|
+
}, [optionsRef, id, text, value]);
|
|
48
|
+
|
|
49
|
+
// Keep updating this ref with the current
|
|
53
50
|
// function pointer for transition, so it can
|
|
54
51
|
// be used by the unmount effect below.
|
|
55
|
-
|
|
56
52
|
transitionCleanupRef.current = transition;
|
|
57
53
|
isActiveRef.current = navigationItem === id;
|
|
58
|
-
useEffect(
|
|
59
|
-
return
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
return () => {
|
|
60
56
|
if (isActiveRef.current === true) {
|
|
61
57
|
// clean up selections if this option is getting
|
|
62
58
|
// unmounted and it was the currently selected item
|
|
@@ -64,29 +60,29 @@ export var ComboboxOption = /*#__PURE__*/forwardRef(function ComboboxOption(_ref
|
|
|
64
60
|
}
|
|
65
61
|
};
|
|
66
62
|
}, []);
|
|
67
|
-
|
|
68
|
-
var handleClick = function handleClick() {
|
|
63
|
+
const handleClick = () => {
|
|
69
64
|
onSelect && onSelect(text, id, value);
|
|
70
65
|
transition(SELECT_WITH_CLICK, {
|
|
71
|
-
text
|
|
66
|
+
text,
|
|
72
67
|
item: id
|
|
73
68
|
});
|
|
74
69
|
};
|
|
75
|
-
|
|
76
|
-
|
|
70
|
+
return /*#__PURE__*/_jsx(Comp, {
|
|
71
|
+
...props,
|
|
77
72
|
as: innerAs,
|
|
78
73
|
"data-reach-combobox-option": "",
|
|
79
74
|
ref: ref,
|
|
80
75
|
id: id,
|
|
81
76
|
role: "option",
|
|
82
77
|
"aria-selected": isActiveRef.current,
|
|
83
|
-
"data-highlighted": isActiveRef.current ? '' : undefined
|
|
78
|
+
"data-highlighted": isActiveRef.current ? '' : undefined
|
|
79
|
+
// without this the menu will close from `onBlur`, but with it the
|
|
84
80
|
// element can be `document.activeElement` and then our focus checks in
|
|
85
81
|
// onBlur will work as intended
|
|
86
82
|
,
|
|
87
83
|
tabIndex: "-1",
|
|
88
84
|
onClick: wrapEvent(onClick, handleClick),
|
|
89
85
|
children: children || text
|
|
90
|
-
})
|
|
86
|
+
});
|
|
91
87
|
});
|
|
92
88
|
//# sourceMappingURL=ComboboxOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxOption.js","names":["forwardRef","useEffect","useRef","SELECT_WITH_CLICK","CLEAR_SELECTION","wrapEvent","useComboBoxContext","makeHash","ComboboxOption","
|
|
1
|
+
{"version":3,"file":"ComboboxOption.js","names":["forwardRef","useEffect","useRef","SELECT_WITH_CLICK","CLEAR_SELECTION","wrapEvent","useComboBoxContext","makeHash","jsx","_jsx","ComboboxOption","_ref","ref","children","id","idProp","value","valueProp","text","textProp","onClick","as","Comp","innerAs","props","onSelect","data","navigationItem","transition","optionsRef","transitionCleanupRef","isActiveRef","length","Error","String","opts","current","handleClick","item","role","undefined","tabIndex"],"sources":["../../../src/ComboBox/ComboboxOption.tsx"],"sourcesContent":["import type {\n ElementType,\n LiHTMLAttributes,\n MouseEventHandler,\n ReactNode,\n} from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\n\nimport { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';\nimport { wrapEvent } from '../utils/wrap-event';\nimport { useComboBoxContext } from './context';\nimport { makeHash } from './makeHash';\n\nexport interface ComboboxOptionProps extends LiHTMLAttributes<HTMLLIElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n id: string;\n value: any;\n text?: string;\n onClick?: MouseEventHandler<HTMLLIElement>;\n children?: 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"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,44 +1,45 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["onKeyDown", "onBlur", "as", "innerAs"];
|
|
4
1
|
import { forwardRef } from 'react';
|
|
5
2
|
import { useKeyDown, useBlur } from './hooks';
|
|
6
3
|
import { wrapEvent } from '../utils/wrap-event';
|
|
7
4
|
import { assignMultipleRefs } from '../utils/assign-ref';
|
|
8
5
|
import { useComboBoxContext } from './context';
|
|
9
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
7
|
+
export const ComboboxPopover = /*#__PURE__*/forwardRef(function ComboboxPopover(_ref, forwardedRef) {
|
|
8
|
+
let {
|
|
9
|
+
// wrapped events
|
|
10
|
+
onKeyDown,
|
|
11
|
+
onBlur,
|
|
12
|
+
as: Comp = 'div',
|
|
13
|
+
innerAs,
|
|
14
|
+
...props
|
|
15
|
+
} = _ref;
|
|
16
|
+
const {
|
|
17
|
+
popoverRef,
|
|
18
|
+
isVisible
|
|
19
|
+
} = useComboBoxContext();
|
|
20
|
+
const handleKeyDown = useKeyDown();
|
|
21
|
+
const handleBlur = useBlur();
|
|
17
22
|
|
|
18
|
-
|
|
19
|
-
popoverRef = _useComboBoxContext.popoverRef,
|
|
20
|
-
isVisible = _useComboBoxContext.isVisible;
|
|
21
|
-
|
|
22
|
-
var handleKeyDown = useKeyDown();
|
|
23
|
-
var handleBlur = useBlur(); // Instead of conditionally rendering the popover we use the `hidden` prop
|
|
23
|
+
// Instead of conditionally rendering the popover we use the `hidden` prop
|
|
24
24
|
// because we don't want to unmount on close (from escape or onSelect). If
|
|
25
25
|
// we unmounted, then we'd lose the optionsRef and the user wouldn't be able
|
|
26
26
|
// to use the arrow keys to pop the list back open. However, the developer
|
|
27
27
|
// can conditionally render the ComboboxPopover if they do want to cause
|
|
28
28
|
// mount/unmount based on the app's own data (like results.length or
|
|
29
29
|
// whatever).
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
const hidden = !isVisible;
|
|
31
|
+
return /*#__PURE__*/_jsx(Comp, {
|
|
32
|
+
...props,
|
|
33
33
|
as: innerAs,
|
|
34
34
|
"data-reach-combobox-popover": "",
|
|
35
35
|
ref: assignMultipleRefs(popoverRef, forwardedRef),
|
|
36
36
|
onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
|
|
37
37
|
onBlur: wrapEvent(onBlur, handleBlur),
|
|
38
|
-
hidden: hidden
|
|
38
|
+
hidden: hidden
|
|
39
|
+
// Allow the user to click empty space inside the popover without causing
|
|
39
40
|
// to close from useBlur
|
|
40
41
|
,
|
|
41
42
|
tabIndex: "-1"
|
|
42
|
-
})
|
|
43
|
+
});
|
|
43
44
|
});
|
|
44
45
|
//# sourceMappingURL=ComboboxPopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxPopover.js","names":["forwardRef","useKeyDown","useBlur","wrapEvent","assignMultipleRefs","useComboBoxContext","ComboboxPopover","forwardedRef","onKeyDown","onBlur","as","Comp","innerAs","props","popoverRef","isVisible","handleKeyDown","handleBlur","hidden"],"sources":["../../../src/ComboBox/ComboboxPopover.tsx"],"sourcesContent":["import type {\n ElementType,\n FocusEventHandler,\n HTMLAttributes,\n KeyboardEventHandler,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\n\nimport { useKeyDown, useBlur } from './hooks';\nimport { wrapEvent } from '../utils/wrap-event';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxPopoverProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n onBlur?: FocusEventHandler<HTMLDivElement>;\n onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n children?: ReactNode;\n}\n\nexport const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(\n function ComboboxPopover(\n {\n // wrapped events\n onKeyDown,\n onBlur,\n\n as: Comp = 'div',\n innerAs,\n ...props\n },\n forwardedRef\n ) {\n const { popoverRef, isVisible } = useComboBoxContext();\n const handleKeyDown = useKeyDown();\n const handleBlur = useBlur();\n\n // Instead of conditionally rendering the popover we use the `hidden` prop\n // because we don't want to unmount on close (from escape or onSelect). If\n // we unmounted, then we'd lose the optionsRef and the user wouldn't be able\n // to use the arrow keys to pop the list back open. However, the developer\n // can conditionally render the ComboboxPopover if they do want to cause\n // mount/unmount based on the app's own data (like results.length or\n // whatever).\n const hidden = !isVisible;\n\n return (\n <Comp\n {...props}\n as={innerAs}\n data-reach-combobox-popover=\"\"\n ref={assignMultipleRefs(popoverRef, forwardedRef)}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n onBlur={wrapEvent(onBlur, handleBlur)}\n hidden={hidden}\n // Allow the user to click empty space inside the popover without causing\n // to close from useBlur\n tabIndex=\"-1\"\n />\n );\n }\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ComboboxPopover.js","names":["forwardRef","useKeyDown","useBlur","wrapEvent","assignMultipleRefs","useComboBoxContext","jsx","_jsx","ComboboxPopover","_ref","forwardedRef","onKeyDown","onBlur","as","Comp","innerAs","props","popoverRef","isVisible","handleKeyDown","handleBlur","hidden","ref","tabIndex"],"sources":["../../../src/ComboBox/ComboboxPopover.tsx"],"sourcesContent":["import type {\n ElementType,\n FocusEventHandler,\n HTMLAttributes,\n KeyboardEventHandler,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\n\nimport { useKeyDown, useBlur } from './hooks';\nimport { wrapEvent } from '../utils/wrap-event';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { useComboBoxContext } from './context';\n\nexport interface ComboboxPopoverProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n onBlur?: FocusEventHandler<HTMLDivElement>;\n onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n children?: ReactNode;\n}\n\nexport const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(\n function ComboboxPopover(\n {\n // wrapped events\n onKeyDown,\n onBlur,\n\n as: Comp = 'div',\n innerAs,\n ...props\n },\n forwardedRef\n ) {\n const { popoverRef, isVisible } = useComboBoxContext();\n const handleKeyDown = useKeyDown();\n const handleBlur = useBlur();\n\n // Instead of conditionally rendering the popover we use the `hidden` prop\n // because we don't want to unmount on close (from escape or onSelect). If\n // we unmounted, then we'd lose the optionsRef and the user wouldn't be able\n // to use the arrow keys to pop the list back open. However, the developer\n // can conditionally render the ComboboxPopover if they do want to cause\n // mount/unmount based on the app's own data (like results.length or\n // whatever).\n const hidden = !isVisible;\n\n return (\n <Comp\n {...props}\n as={innerAs}\n data-reach-combobox-popover=\"\"\n ref={assignMultipleRefs(popoverRef, forwardedRef)}\n onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n onBlur={wrapEvent(onBlur, handleBlur)}\n hidden={hidden}\n // Allow the user to click empty space inside the popover without causing\n // to close from useBlur\n tabIndex=\"-1\"\n />\n );\n }\n);\n"],"mappings":"AAOA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,UAAU,EAAEC,OAAO,QAAQ,SAAS;AAC7C,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,kBAAkB,QAAQ,qBAAqB;AACxD,SAASC,kBAAkB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU/C,OAAO,MAAMC,eAAe,gBAAGR,UAAU,CACvC,SAASQ,eAAeA,CAAAC,IAAA,EAUtBC,YAAY,EACZ;EAAA,IAVA;IACE;IACAC,SAAS;IACTC,MAAM;IAENC,EAAE,EAAEC,IAAI,GAAG,KAAK;IAChBC,OAAO;IACP,GAAGC;EACL,CAAC,GAAAP,IAAA;EAGD,MAAM;IAAEQ,UAAU;IAAEC;EAAU,CAAC,GAAGb,kBAAkB,CAAC,CAAC;EACtD,MAAMc,aAAa,GAAGlB,UAAU,CAAC,CAAC;EAClC,MAAMmB,UAAU,GAAGlB,OAAO,CAAC,CAAC;;EAE5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMmB,MAAM,GAAG,CAACH,SAAS;EAEzB,oBACEX,IAAA,CAACO,IAAI;IAAA,GACCE,KAAK;IACTH,EAAE,EAAEE,OAAQ;IACZ,+BAA4B,EAAE;IAC9BO,GAAG,EAAElB,kBAAkB,CAACa,UAAU,EAAEP,YAAY,CAAE;IAClDC,SAAS,EAAER,SAAS,CAACQ,SAAS,EAAEQ,aAAa,CAAE;IAC/CP,MAAM,EAAET,SAAS,CAACS,MAAM,EAAEQ,UAAU,CAAE;IACtCC,MAAM,EAAEA;IACR;IACA;IAAA;IACAE,QAAQ,EAAC;EAAI,CACd,CAAC;AAEN,CACF,CAAC","ignoreList":[]}
|