@basic-ui/core 0.0.54 → 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/README.md +3 -3
- package/build/cjs/index.js +364 -591
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Accordion/Accordion.d.ts +9 -9
- package/build/esm/Accordion/Accordion.js +20 -29
- package/build/esm/Accordion/Accordion.js.map +1 -1
- package/build/esm/Accordion/AccordionBody.d.ts +6 -6
- package/build/esm/Accordion/AccordionBody.js +18 -32
- package/build/esm/Accordion/AccordionBody.js.map +1 -1
- package/build/esm/Accordion/AccordionHeader.d.ts +7 -7
- package/build/esm/Accordion/AccordionHeader.js +37 -74
- package/build/esm/Accordion/AccordionHeader.js.map +1 -1
- package/build/esm/Accordion/AccordionItem.d.ts +9 -9
- package/build/esm/Accordion/AccordionItem.js +19 -22
- package/build/esm/Accordion/AccordionItem.js.map +1 -1
- package/build/esm/Accordion/context.d.ts +19 -19
- package/build/esm/Accordion/context.js +16 -13
- package/build/esm/Accordion/context.js.map +1 -1
- package/build/esm/Accordion/index.d.ts +4 -4
- package/build/esm/Accordion/index.js.map +1 -1
- package/build/esm/Accordion/scopeQuery.d.ts +2 -2
- package/build/esm/Accordion/scopeQuery.js.map +1 -1
- package/build/esm/CheckBox/CheckBox.d.ts +7 -7
- package/build/esm/CheckBox/CheckBox.js +15 -25
- package/build/esm/CheckBox/CheckBox.js.map +1 -1
- package/build/esm/CheckBox/index.d.ts +1 -1
- package/build/esm/CheckBox/index.js.map +1 -1
- package/build/esm/ComboBox/Combobox.d.ts +18 -18
- package/build/esm/ComboBox/Combobox.js +52 -59
- package/build/esm/ComboBox/Combobox.js.map +1 -1
- package/build/esm/ComboBox/ComboboxButton.d.ts +9 -9
- package/build/esm/ComboBox/ComboboxButton.js +23 -28
- package/build/esm/ComboBox/ComboboxButton.js.map +1 -1
- package/build/esm/ComboBox/ComboboxInput.d.ts +17 -17
- package/build/esm/ComboBox/ComboboxInput.js +67 -70
- package/build/esm/ComboBox/ComboboxInput.js.map +1 -1
- package/build/esm/ComboBox/ComboboxLabel.d.ts +7 -7
- package/build/esm/ComboBox/ComboboxLabel.js +15 -17
- package/build/esm/ComboBox/ComboboxLabel.js.map +1 -1
- package/build/esm/ComboBox/ComboboxList.d.ts +8 -8
- package/build/esm/ComboBox/ComboboxList.js +19 -20
- package/build/esm/ComboBox/ComboboxList.js.map +1 -1
- package/build/esm/ComboBox/ComboboxOption.d.ts +11 -11
- package/build/esm/ComboBox/ComboboxOption.js +41 -45
- package/build/esm/ComboBox/ComboboxOption.js.map +1 -1
- package/build/esm/ComboBox/ComboboxPopover.d.ts +9 -9
- package/build/esm/ComboBox/ComboboxPopover.js +22 -21
- package/build/esm/ComboBox/ComboboxPopover.js.map +1 -1
- package/build/esm/ComboBox/cities.d.ts +5 -5
- package/build/esm/ComboBox/cities.js.map +1 -1
- package/build/esm/ComboBox/context.d.ts +30 -30
- package/build/esm/ComboBox/context.js +5 -6
- package/build/esm/ComboBox/context.js.map +1 -1
- package/build/esm/ComboBox/hooks.d.ts +37 -37
- package/build/esm/ComboBox/hooks.js +175 -148
- package/build/esm/ComboBox/hooks.js.map +1 -1
- package/build/esm/ComboBox/index.d.ts +8 -8
- package/build/esm/ComboBox/index.js.map +1 -1
- package/build/esm/ComboBox/makeHash.d.ts +1 -1
- package/build/esm/ComboBox/makeHash.js +3 -6
- package/build/esm/ComboBox/makeHash.js.map +1 -1
- package/build/esm/ComboBox/scopeQuery.d.ts +1 -1
- package/build/esm/ComboBox/scopeQuery.js.map +1 -1
- package/build/esm/FocusLock/FocusLock.d.ts +9 -9
- package/build/esm/FocusLock/FocusLock.js +26 -32
- package/build/esm/FocusLock/FocusLock.js.map +1 -1
- package/build/esm/FocusLock/index.d.ts +1 -1
- package/build/esm/FocusLock/index.js.map +1 -1
- package/build/esm/FocusLock/tabUtils.d.ts +3 -3
- package/build/esm/FocusLock/tabUtils.js +5 -7
- package/build/esm/FocusLock/tabUtils.js.map +1 -1
- package/build/esm/FocusLock/useFocusLock.d.ts +7 -7
- package/build/esm/FocusLock/useFocusLock.js +14 -19
- package/build/esm/FocusLock/useFocusLock.js.map +1 -1
- package/build/esm/List/List.d.ts +7 -7
- package/build/esm/List/List.js +9 -11
- package/build/esm/List/List.js.map +1 -1
- package/build/esm/List/ListItem.d.ts +7 -7
- package/build/esm/List/ListItem.js +9 -11
- package/build/esm/List/ListItem.js.map +1 -1
- package/build/esm/List/context.d.ts +4 -4
- package/build/esm/List/context.js +6 -6
- package/build/esm/List/context.js.map +1 -1
- package/build/esm/List/index.d.ts +2 -2
- package/build/esm/List/index.js.map +1 -1
- package/build/esm/Menu/ContextMenuTrigger.d.ts +11 -11
- package/build/esm/Menu/ContextMenuTrigger.js +32 -37
- package/build/esm/Menu/ContextMenuTrigger.js.map +1 -1
- package/build/esm/Menu/Menu.d.ts +10 -10
- package/build/esm/Menu/Menu.js +33 -49
- package/build/esm/Menu/Menu.js.map +1 -1
- package/build/esm/Menu/MenuButton.d.ts +11 -11
- package/build/esm/Menu/MenuButton.js +28 -44
- package/build/esm/Menu/MenuButton.js.map +1 -1
- package/build/esm/Menu/MenuItem.d.ts +8 -8
- package/build/esm/Menu/MenuItem.js +29 -38
- package/build/esm/Menu/MenuItem.js.map +1 -1
- package/build/esm/Menu/MenuList.d.ts +7 -7
- package/build/esm/Menu/MenuList.js +61 -116
- package/build/esm/Menu/MenuList.js.map +1 -1
- package/build/esm/Menu/MenuPopover.d.ts +8 -8
- package/build/esm/Menu/MenuPopover.js +16 -19
- package/build/esm/Menu/MenuPopover.js.map +1 -1
- package/build/esm/Menu/context.d.ts +25 -25
- package/build/esm/Menu/context.js +14 -12
- package/build/esm/Menu/context.js.map +1 -1
- package/build/esm/Menu/fixtures/countryList.d.ts +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.d.ts +6 -6
- package/build/esm/Menu/index.js.map +1 -1
- package/build/esm/Menu/scope.d.ts +1 -1
- package/build/esm/Menu/scope.js.map +1 -1
- package/build/esm/Modal/Modal.d.ts +9 -9
- package/build/esm/Modal/Modal.js +13 -18
- package/build/esm/Modal/Modal.js.map +1 -1
- package/build/esm/Modal/ModalBackdrop.d.ts +10 -10
- package/build/esm/Modal/ModalBackdrop.js +24 -33
- package/build/esm/Modal/ModalBackdrop.js.map +1 -1
- package/build/esm/Modal/index.d.ts +2 -2
- package/build/esm/Modal/index.js.map +1 -1
- package/build/esm/Popper/Popper.d.ts +35 -35
- package/build/esm/Popper/Popper.js +44 -60
- package/build/esm/Popper/Popper.js.map +1 -1
- package/build/esm/Popper/PopperArrow.d.ts +6 -6
- package/build/esm/Popper/PopperArrow.js +11 -16
- package/build/esm/Popper/PopperArrow.js.map +1 -1
- package/build/esm/Popper/context.d.ts +6 -6
- package/build/esm/Popper/context.js +3 -5
- package/build/esm/Popper/context.js.map +1 -1
- package/build/esm/Popper/index.d.ts +3 -3
- package/build/esm/Popper/index.js.map +1 -1
- package/build/esm/Portal/Portal.d.ts +7 -7
- package/build/esm/Portal/Portal.js +9 -11
- package/build/esm/Portal/Portal.js.map +1 -1
- package/build/esm/Portal/PortalSelectorProvider.d.ts +8 -8
- package/build/esm/Portal/PortalSelectorProvider.js +6 -4
- package/build/esm/Portal/PortalSelectorProvider.js.map +1 -1
- package/build/esm/Portal/index.d.ts +2 -2
- package/build/esm/Portal/index.js.map +1 -1
- package/build/esm/RadioButton/RadioButton.d.ts +10 -10
- package/build/esm/RadioButton/RadioButton.js +17 -23
- package/build/esm/RadioButton/RadioButton.js.map +1 -1
- package/build/esm/RadioButton/RadioGroup.d.ts +12 -12
- package/build/esm/RadioButton/RadioGroup.js +19 -28
- package/build/esm/RadioButton/RadioGroup.js.map +1 -1
- package/build/esm/RadioButton/context.d.ts +9 -9
- package/build/esm/RadioButton/context.js +8 -6
- package/build/esm/RadioButton/context.js.map +1 -1
- package/build/esm/RadioButton/index.d.ts +2 -2
- package/build/esm/RadioButton/index.js.map +1 -1
- package/build/esm/SkipNav/SkipNav.d.ts +7 -7
- package/build/esm/SkipNav/SkipNav.js +9 -11
- package/build/esm/SkipNav/SkipNav.js.map +1 -1
- package/build/esm/SkipNav/index.d.ts +1 -1
- package/build/esm/SkipNav/index.js.map +1 -1
- package/build/esm/Slider/Slider.d.ts +197 -197
- package/build/esm/Slider/Slider.js +422 -489
- package/build/esm/Slider/Slider.js.map +1 -1
- package/build/esm/Slider/index.d.ts +1 -1
- package/build/esm/Slider/index.js.map +1 -1
- package/build/esm/Spinner/Spinner.d.ts +12 -12
- package/build/esm/Spinner/Spinner.js +31 -59
- package/build/esm/Spinner/Spinner.js.map +1 -1
- package/build/esm/Spinner/SpinnerButton.d.ts +8 -8
- package/build/esm/Spinner/SpinnerButton.js +14 -19
- package/build/esm/Spinner/SpinnerButton.js.map +1 -1
- package/build/esm/Spinner/context.d.ts +12 -12
- package/build/esm/Spinner/context.js +8 -7
- package/build/esm/Spinner/context.js.map +1 -1
- package/build/esm/Spinner/index.d.ts +2 -2
- package/build/esm/Spinner/index.js.map +1 -1
- package/build/esm/Tabs/Tab.d.ts +7 -7
- package/build/esm/Tabs/Tab.js +32 -50
- package/build/esm/Tabs/Tab.js.map +1 -1
- package/build/esm/Tabs/TabList.d.ts +9 -9
- package/build/esm/Tabs/TabList.js +24 -34
- package/build/esm/Tabs/TabList.js.map +1 -1
- package/build/esm/Tabs/TabPanel.d.ts +8 -8
- package/build/esm/Tabs/TabPanel.js +16 -23
- package/build/esm/Tabs/TabPanel.js.map +1 -1
- package/build/esm/Tabs/TabPanels.d.ts +8 -8
- package/build/esm/Tabs/TabPanels.js +15 -20
- package/build/esm/Tabs/TabPanels.js.map +1 -1
- package/build/esm/Tabs/Tabs.d.ts +10 -10
- package/build/esm/Tabs/Tabs.js +17 -33
- package/build/esm/Tabs/Tabs.js.map +1 -1
- package/build/esm/Tabs/context.d.ts +17 -17
- package/build/esm/Tabs/context.js +16 -13
- package/build/esm/Tabs/context.js.map +1 -1
- package/build/esm/Tabs/index.d.ts +5 -5
- package/build/esm/Tabs/index.js.map +1 -1
- package/build/esm/Tabs/scopeQuery.d.ts +1 -1
- package/build/esm/Tabs/scopeQuery.js.map +1 -1
- package/build/esm/Tooltip/Tooltip.d.ts +10 -10
- package/build/esm/Tooltip/Tooltip.js +20 -30
- package/build/esm/Tooltip/Tooltip.js.map +1 -1
- package/build/esm/Tooltip/index.d.ts +1 -1
- package/build/esm/Tooltip/index.js.map +1 -1
- package/build/esm/Tooltip/stateMachine.d.ts +28 -28
- package/build/esm/Tooltip/stateMachine.js +95 -81
- package/build/esm/Tooltip/stateMachine.js.map +1 -1
- package/build/esm/Tooltip/useTooltip.d.ts +10 -10
- package/build/esm/Tooltip/useTooltip.js +38 -50
- package/build/esm/Tooltip/useTooltip.js.map +1 -1
- package/build/esm/hooks/index.d.ts +13 -13
- package/build/esm/hooks/index.js.map +1 -1
- package/build/esm/hooks/useAutoFocus.d.ts +2 -2
- package/build/esm/hooks/useAutoFocus.js +3 -3
- package/build/esm/hooks/useAutoFocus.js.map +1 -1
- package/build/esm/hooks/useChildrenCounter.d.ts +7 -7
- package/build/esm/hooks/useChildrenCounter.js +6 -8
- package/build/esm/hooks/useChildrenCounter.js.map +1 -1
- package/build/esm/hooks/useControlledState.d.ts +3 -3
- package/build/esm/hooks/useControlledState.js +6 -16
- package/build/esm/hooks/useControlledState.js.map +1 -1
- package/build/esm/hooks/useFocusReturn.d.ts +2 -2
- package/build/esm/hooks/useFocusReturn.js +8 -12
- package/build/esm/hooks/useFocusReturn.js.map +1 -1
- package/build/esm/hooks/useFocusState.d.ts +11 -11
- package/build/esm/hooks/useFocusState.js +9 -15
- package/build/esm/hooks/useFocusState.js.map +1 -1
- package/build/esm/hooks/useGestureHandlers.d.ts +52 -52
- package/build/esm/hooks/useGestureHandlers.js +80 -100
- package/build/esm/hooks/useGestureHandlers.js.map +1 -1
- package/build/esm/hooks/useMeasure.d.ts +7 -7
- package/build/esm/hooks/useMeasure.js +7 -15
- package/build/esm/hooks/useMeasure.js.map +1 -1
- package/build/esm/hooks/useOnClickOutside.d.ts +2 -2
- package/build/esm/hooks/useOnClickOutside.js +4 -6
- package/build/esm/hooks/useOnClickOutside.js.map +1 -1
- package/build/esm/hooks/useOnKeyDown.d.ts +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 +24 -24
- package/build/esm/hooks/useReducerMachine.js +15 -26
- package/build/esm/hooks/useReducerMachine.js.map +1 -1
- package/build/esm/hooks/useRemoveBodyScroll.d.ts +2 -2
- package/build/esm/hooks/useRemoveBodyScroll.js +9 -14
- package/build/esm/hooks/useRemoveBodyScroll.js.map +1 -1
- package/build/esm/hooks/useScope.d.ts +11 -11
- package/build/esm/hooks/useScope.js +12 -14
- package/build/esm/hooks/useScope.js.map +1 -1
- package/build/esm/hooks/useThrottle.d.ts +1 -1
- package/build/esm/hooks/useThrottle.js +5 -10
- package/build/esm/hooks/useThrottle.js.map +1 -1
- package/build/esm/index.d.ts +15 -15
- 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.d.ts +3 -3
- 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.d.ts +1 -1
- package/build/esm/utils/can-use-dom.js.map +1 -1
- package/build/esm/utils/clamp.d.ts +1 -1
- package/build/esm/utils/clamp.js.map +1 -1
- package/build/esm/utils/context.d.ts +7 -7
- package/build/esm/utils/context.js +13 -20
- package/build/esm/utils/context.js.map +1 -1
- package/build/esm/utils/create-subscription.d.ts +4 -4
- 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.d.ts +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.d.ts +10 -10
- package/build/esm/utils/index.js.map +1 -1
- package/build/esm/utils/is-right-click.d.ts +6 -6
- package/build/esm/utils/is-right-click.js +4 -4
- package/build/esm/utils/is-right-click.js.map +1 -1
- package/build/esm/utils/owner-document.d.ts +7 -7
- package/build/esm/utils/owner-document.js +6 -6
- package/build/esm/utils/owner-document.js.map +1 -1
- package/build/esm/utils/polymorphic.d.ts +39 -39
- package/build/esm/utils/polymorphic.js.map +1 -1
- package/build/esm/utils/rubber-band-clamp.d.ts +2 -2
- 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.d.ts +16 -16
- package/build/esm/utils/use-stable-callback.js +24 -26
- package/build/esm/utils/use-stable-callback.js.map +1 -1
- package/build/esm/utils/wrap-event.d.ts +3 -3
- 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.story.tsx +74 -74
- package/src/Accordion/Accordion.tsx +59 -59
- package/src/Accordion/AccordionBody.tsx +52 -52
- package/src/Accordion/AccordionHeader.tsx +166 -167
- package/src/Accordion/AccordionItem.tsx +50 -50
- package/src/Accordion/context.ts +37 -37
- package/src/Accordion/index.ts +4 -4
- package/src/Accordion/scopeQuery.ts +7 -7
- package/src/Accordion/styles.css +21 -21
- package/src/CheckBox/CheckBox.tsx +41 -41
- package/src/CheckBox/index.ts +1 -1
- package/src/ComboBox/ComboBox.story.tsx +120 -120
- package/src/ComboBox/Combobox.tsx +148 -148
- package/src/ComboBox/ComboboxButton.tsx +61 -61
- package/src/ComboBox/ComboboxInput.tsx +187 -187
- package/src/ComboBox/ComboboxLabel.tsx +33 -33
- package/src/ComboBox/ComboboxList.tsx +47 -47
- package/src/ComboBox/ComboboxOption.tsx +110 -111
- package/src/ComboBox/ComboboxPopover.tsx +64 -64
- package/src/ComboBox/cities.ts +23194 -23194
- package/src/ComboBox/context.ts +35 -35
- package/src/ComboBox/hooks.tsx +448 -451
- package/src/ComboBox/index.ts +8 -8
- package/src/ComboBox/makeHash.ts +19 -19
- package/src/ComboBox/scopeQuery.ts +6 -6
- package/src/ComboBox/styles.css +32 -32
- package/src/FocusLock/FocusLock.tsx +66 -66
- package/src/FocusLock/index.ts +1 -1
- package/src/FocusLock/tabUtils.ts +40 -40
- package/src/FocusLock/useFocusLock.ts +55 -56
- package/src/List/List.story.tsx +18 -18
- package/src/List/List.tsx +17 -17
- package/src/List/ListItem.tsx +23 -23
- package/src/List/context.ts +19 -19
- package/src/List/index.ts +2 -2
- package/src/Menu/ContextMenu.story.tsx +73 -73
- package/src/Menu/ContextMenuTrigger.tsx +76 -76
- package/src/Menu/Menu.story.tsx +160 -160
- package/src/Menu/Menu.tsx +82 -83
- package/src/Menu/MenuButton.tsx +83 -83
- package/src/Menu/MenuComplex.story.tsx +58 -58
- package/src/Menu/MenuItem.tsx +87 -88
- package/src/Menu/MenuList.tsx +254 -254
- package/src/Menu/MenuPopover.tsx +35 -35
- package/src/Menu/context.ts +44 -44
- package/src/Menu/fixtures/countryList.ts +198 -198
- package/src/Menu/index.ts +6 -6
- package/src/Menu/scope.ts +7 -7
- package/src/Menu/styles.css +42 -42
- package/src/Modal/Modal.story.tsx +262 -258
- package/src/Modal/Modal.tsx +48 -48
- package/src/Modal/ModalBackdrop.tsx +78 -78
- package/src/Modal/NavDrawer.story.tsx +161 -158
- package/src/Modal/index.ts +2 -2
- package/src/Modal/styles.css +46 -46
- package/src/Popper/Popper.story.tsx +279 -263
- package/src/Popper/Popper.tsx +1 -1
- package/src/Popper/PopperArrow.tsx +35 -35
- package/src/Popper/context.ts +10 -10
- package/src/Popper/index.ts +3 -3
- package/src/Popper/styles.css +60 -60
- package/src/RadioButton/RadioButton.story.tsx +78 -77
- package/src/RadioButton/RadioButton.tsx +55 -55
- package/src/RadioButton/RadioGroup.tsx +60 -60
- package/src/RadioButton/context.ts +17 -17
- package/src/RadioButton/index.ts +2 -2
- package/src/SkipNav/SkipNav.tsx +16 -16
- package/src/SkipNav/index.tsx +1 -1
- package/src/Slider/Slider.story.tsx +45 -45
- package/src/Slider/Slider.tsx +1115 -1120
- package/src/Slider/index.ts +1 -1
- package/src/Slider/styles.css +131 -131
- package/src/Spinner/Spinner.story.tsx +31 -31
- package/src/Spinner/Spinner.tsx +117 -117
- package/src/Spinner/SpinnerButton.tsx +54 -54
- package/src/Spinner/context.ts +20 -20
- package/src/Spinner/index.ts +2 -2
- package/src/Spinner/styles.css +23 -23
- package/src/Tabs/Tab.story.tsx +80 -80
- package/src/Tabs/Tab.tsx +136 -136
- package/src/Tabs/TabList.tsx +71 -71
- package/src/Tabs/TabPanel.tsx +53 -53
- package/src/Tabs/TabPanels.tsx +30 -30
- package/src/Tabs/Tabs.tsx +46 -46
- package/src/Tabs/context.ts +30 -30
- package/src/Tabs/index.tsx +5 -5
- package/src/Tabs/scopeQuery.ts +6 -6
- package/src/Tooltip/Tooltip.story.tsx +61 -61
- package/src/Tooltip/Tooltip.tsx +53 -50
- package/src/Tooltip/index.ts +1 -1
- package/src/Tooltip/stateMachine.ts +192 -192
- package/src/Tooltip/styles.css +17 -17
- package/src/Tooltip/useTooltip.ts +136 -136
- package/src/hooks/index.ts +13 -13
- package/src/hooks/useAutoFocus.ts +22 -22
- package/src/hooks/useChildrenCounter.ts +51 -51
- package/src/hooks/useControlledState.ts +1 -6
- package/src/hooks/useFocusReturn.ts +43 -43
- package/src/hooks/useFocusState.ts +30 -30
- package/src/hooks/useGestureHandlers.ts +282 -286
- package/src/hooks/useMeasure.ts +33 -33
- package/src/hooks/useOnClickOutside.ts +32 -32
- package/src/hooks/useOnKeyDown.ts +19 -19
- package/src/hooks/useReducerMachine.ts +60 -60
- package/src/hooks/useRemoveBodyScroll.ts +38 -39
- package/src/hooks/useScope.ts +52 -52
- package/src/hooks/useThrottle.ts +19 -19
- package/src/index.ts +20 -20
- package/src/styles.d.ts +1 -0
- package/src/utils/assign-ref.ts +27 -27
- package/src/utils/can-use-dom.ts +7 -7
- package/src/utils/clamp.ts +3 -3
- package/src/utils/context.tsx +48 -48
- package/src/utils/create-subscription.ts +16 -16
- package/src/utils/get-circular-index.ts +7 -7
- package/src/utils/index.ts +10 -10
- package/src/utils/is-right-click.ts +14 -14
- package/src/utils/owner-document.ts +13 -13
- package/src/utils/polymorphic.ts +82 -78
- package/src/utils/rubber-band-clamp.ts +25 -25
- package/src/utils/use-stable-callback.ts +57 -58
- package/src/utils/wrap-event.ts +22 -22
|
@@ -1,30 +1,24 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
1
|
import { useState } from 'react';
|
|
3
2
|
import { wrapEvent } from '../utils/wrap-event';
|
|
4
3
|
export function useFocusState() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
setHasFocus = _useState2[1];
|
|
13
|
-
|
|
14
|
-
var handleFocus = function handleFocus() {
|
|
4
|
+
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
5
|
+
const {
|
|
6
|
+
onFocus,
|
|
7
|
+
onBlur
|
|
8
|
+
} = props;
|
|
9
|
+
const [hasFocus, setHasFocus] = useState(false);
|
|
10
|
+
const handleFocus = () => {
|
|
15
11
|
setHasFocus(true);
|
|
16
12
|
};
|
|
17
|
-
|
|
18
|
-
var handleBlur = function handleBlur() {
|
|
13
|
+
const handleBlur = () => {
|
|
19
14
|
setHasFocus(false);
|
|
20
15
|
};
|
|
21
|
-
|
|
22
16
|
return {
|
|
23
17
|
bind: {
|
|
24
18
|
onFocus: wrapEvent(onFocus, handleFocus),
|
|
25
19
|
onBlur: wrapEvent(onBlur, handleBlur)
|
|
26
20
|
},
|
|
27
|
-
hasFocus
|
|
21
|
+
hasFocus
|
|
28
22
|
};
|
|
29
23
|
}
|
|
30
24
|
//# sourceMappingURL=useFocusState.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusState.js","names":["useState","wrapEvent","useFocusState","props","onFocus","onBlur","hasFocus","setHasFocus","handleFocus","handleBlur","bind"],"sources":["../../../src/hooks/useFocusState.ts"],"sourcesContent":["import type { FocusEventHandler } from 'react';\
|
|
1
|
+
{"version":3,"file":"useFocusState.js","names":["useState","wrapEvent","useFocusState","props","arguments","length","undefined","onFocus","onBlur","hasFocus","setHasFocus","handleFocus","handleBlur","bind"],"sources":["../../../src/hooks/useFocusState.ts"],"sourcesContent":["import type { FocusEventHandler } from 'react';\nimport { useState } from 'react';\n\nimport { wrapEvent } from '../utils/wrap-event';\n\nexport function useFocusState<T>(\n props: {\n onFocus?: FocusEventHandler<T>;\n onBlur?: FocusEventHandler<T>;\n } = {}\n) {\n const { onFocus, onBlur } = props;\n const [hasFocus, setHasFocus] = useState(false);\n\n const handleFocus = () => {\n setHasFocus(true);\n };\n\n const handleBlur = () => {\n setHasFocus(false);\n };\n\n return {\n bind: {\n onFocus: wrapEvent(onFocus, handleFocus),\n onBlur: wrapEvent(onBlur, handleBlur),\n },\n hasFocus,\n };\n}\n"],"mappings":"AACA,SAASA,QAAQ,QAAQ,OAAO;AAEhC,SAASC,SAAS,QAAQ,qBAAqB;AAE/C,OAAO,SAASC,aAAaA,CAAA,EAK3B;EAAA,IAJAC,KAGC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAEN,MAAM;IAAEG,OAAO;IAAEC;EAAO,CAAC,GAAGL,KAAK;EACjC,MAAM,CAACM,QAAQ,EAAEC,WAAW,CAAC,GAAGV,QAAQ,CAAC,KAAK,CAAC;EAE/C,MAAMW,WAAW,GAAGA,CAAA,KAAM;IACxBD,WAAW,CAAC,IAAI,CAAC;EACnB,CAAC;EAED,MAAME,UAAU,GAAGA,CAAA,KAAM;IACvBF,WAAW,CAAC,KAAK,CAAC;EACpB,CAAC;EAED,OAAO;IACLG,IAAI,EAAE;MACJN,OAAO,EAAEN,SAAS,CAACM,OAAO,EAAEI,WAAW,CAAC;MACxCH,MAAM,EAAEP,SAAS,CAACO,MAAM,EAAEI,UAAU;IACtC,CAAC;IACDH;EACF,CAAC;AACH","ignoreList":[]}
|
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
import type { MutableRefObject, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
|
|
2
|
-
export interface GestureHandlersState {
|
|
3
|
-
target: null | EventTarget;
|
|
4
|
-
x: number;
|
|
5
|
-
xDelta: number;
|
|
6
|
-
xDeltaPercent: number;
|
|
7
|
-
xInitial: number;
|
|
8
|
-
xPrev: number;
|
|
9
|
-
xVelocity: number;
|
|
10
|
-
y: number;
|
|
11
|
-
yDelta: number;
|
|
12
|
-
yDeltaPercent: number;
|
|
13
|
-
yInitial: number;
|
|
14
|
-
yPrev: number;
|
|
15
|
-
yVelocity: number;
|
|
16
|
-
startTime: number;
|
|
17
|
-
down: boolean;
|
|
18
|
-
scrollLocked: boolean;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export interface GestureHandlersReturn {
|
|
22
|
-
onMouseDown: (e: ReactMouseEvent<HTMLElement>) => void;
|
|
23
|
-
onTouchStart: (e: ReactTouchEvent<HTMLElement>) => void;
|
|
24
|
-
}
|
|
25
|
-
export interface GestureHandlerOptions {
|
|
26
|
-
ensureTargetIsContainer?: boolean;
|
|
27
|
-
minTouchDelta?: number;
|
|
28
|
-
}
|
|
29
|
-
export declare const initialGestureHandlersState: GestureHandlersState;
|
|
30
|
-
export declare function gestureHandlers(set: SetStateFunc<GestureHandlersState>, containerRef?: MutableRefObject<HTMLElement | null>, options?: GestureHandlerOptions): GestureHandlersReturn;
|
|
31
|
-
export declare const useGestureHandlers: (containerRef: MutableRefObject<HTMLElement | null> | undefined, onGesture: (e: GestureHandlersState) => void, options?: GestureHandlerOptions) => {
|
|
32
|
-
state: {
|
|
33
|
-
target: null | EventTarget;
|
|
34
|
-
x: number;
|
|
35
|
-
xDelta: number;
|
|
36
|
-
xDeltaPercent: number;
|
|
37
|
-
xInitial: number;
|
|
38
|
-
xPrev: number;
|
|
39
|
-
xVelocity: number;
|
|
40
|
-
y: number;
|
|
41
|
-
yDelta: number;
|
|
42
|
-
yDeltaPercent: number;
|
|
43
|
-
yInitial: number;
|
|
44
|
-
yPrev: number;
|
|
45
|
-
yVelocity: number;
|
|
46
|
-
startTime: number;
|
|
47
|
-
down: boolean;
|
|
48
|
-
scrollLocked: boolean;
|
|
49
|
-
};
|
|
50
|
-
handlers: GestureHandlersReturn;
|
|
51
|
-
};
|
|
52
|
-
export {};
|
|
1
|
+
import type { MutableRefObject, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
|
|
2
|
+
export interface GestureHandlersState {
|
|
3
|
+
target: null | EventTarget;
|
|
4
|
+
x: number;
|
|
5
|
+
xDelta: number;
|
|
6
|
+
xDeltaPercent: number;
|
|
7
|
+
xInitial: number;
|
|
8
|
+
xPrev: number;
|
|
9
|
+
xVelocity: number;
|
|
10
|
+
y: number;
|
|
11
|
+
yDelta: number;
|
|
12
|
+
yDeltaPercent: number;
|
|
13
|
+
yInitial: number;
|
|
14
|
+
yPrev: number;
|
|
15
|
+
yVelocity: number;
|
|
16
|
+
startTime: number;
|
|
17
|
+
down: boolean;
|
|
18
|
+
scrollLocked: boolean;
|
|
19
|
+
}
|
|
20
|
+
type SetStateFunc<S> = (state: (prevState: Readonly<S>) => S, callback?: () => void) => void;
|
|
21
|
+
export interface GestureHandlersReturn {
|
|
22
|
+
onMouseDown: (e: ReactMouseEvent<HTMLElement>) => void;
|
|
23
|
+
onTouchStart: (e: ReactTouchEvent<HTMLElement>) => void;
|
|
24
|
+
}
|
|
25
|
+
export interface GestureHandlerOptions {
|
|
26
|
+
ensureTargetIsContainer?: boolean;
|
|
27
|
+
minTouchDelta?: number;
|
|
28
|
+
}
|
|
29
|
+
export declare const initialGestureHandlersState: GestureHandlersState;
|
|
30
|
+
export declare function gestureHandlers(set: SetStateFunc<GestureHandlersState>, containerRef?: MutableRefObject<HTMLElement | null>, options?: GestureHandlerOptions): GestureHandlersReturn;
|
|
31
|
+
export declare const useGestureHandlers: (containerRef: MutableRefObject<HTMLElement | null> | undefined, onGesture: (e: GestureHandlersState) => void, options?: GestureHandlerOptions) => {
|
|
32
|
+
state: {
|
|
33
|
+
target: null | EventTarget;
|
|
34
|
+
x: number;
|
|
35
|
+
xDelta: number;
|
|
36
|
+
xDeltaPercent: number;
|
|
37
|
+
xInitial: number;
|
|
38
|
+
xPrev: number;
|
|
39
|
+
xVelocity: number;
|
|
40
|
+
y: number;
|
|
41
|
+
yDelta: number;
|
|
42
|
+
yDeltaPercent: number;
|
|
43
|
+
yInitial: number;
|
|
44
|
+
yPrev: number;
|
|
45
|
+
yVelocity: number;
|
|
46
|
+
startTime: number;
|
|
47
|
+
down: boolean;
|
|
48
|
+
scrollLocked: boolean;
|
|
49
|
+
};
|
|
50
|
+
handlers: GestureHandlersReturn;
|
|
51
|
+
};
|
|
52
|
+
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
1
|
import { useRef } from 'react';
|
|
3
2
|
import { getOwnerDocument } from '../utils';
|
|
4
|
-
export
|
|
3
|
+
export const initialGestureHandlersState = {
|
|
5
4
|
target: null,
|
|
6
5
|
x: 0,
|
|
7
6
|
xDelta: 0,
|
|
@@ -19,42 +18,43 @@ export var initialGestureHandlersState = {
|
|
|
19
18
|
down: false,
|
|
20
19
|
scrollLocked: false
|
|
21
20
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
var VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
|
|
21
|
+
const FRAMERATE_CONST = 1000 / 60; // 60 fps
|
|
22
|
+
const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
|
|
25
23
|
export function gestureHandlers(set, containerRef) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
24
|
+
let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
25
|
+
const {
|
|
26
|
+
ensureTargetIsContainer = false,
|
|
27
|
+
minTouchDelta = 0
|
|
28
|
+
} = options;
|
|
29
|
+
|
|
30
|
+
// Common handlers
|
|
31
|
+
const handleUp = () => {
|
|
32
|
+
set(state => {
|
|
33
|
+
const deltaTime = Date.now() - state.startTime;
|
|
34
|
+
const xDelta = state.x - state.xInitial;
|
|
35
|
+
const yDelta = state.y - state.yInitial;
|
|
36
|
+
const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
|
|
37
|
+
const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
|
|
38
|
+
const newState = {
|
|
39
|
+
...state,
|
|
40
|
+
xVelocity,
|
|
41
|
+
yVelocity,
|
|
43
42
|
target: null,
|
|
44
43
|
down: false
|
|
45
|
-
}
|
|
46
|
-
|
|
44
|
+
};
|
|
47
45
|
return newState;
|
|
48
46
|
});
|
|
49
47
|
};
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
const handleDown = e => {
|
|
49
|
+
const {
|
|
50
|
+
target,
|
|
51
|
+
pageX,
|
|
52
|
+
pageY
|
|
53
|
+
} = e;
|
|
54
|
+
set(state => {
|
|
55
|
+
const newState = {
|
|
56
|
+
...state,
|
|
57
|
+
target,
|
|
58
58
|
x: pageX,
|
|
59
59
|
xDelta: 0,
|
|
60
60
|
xDeltaPercent: 0,
|
|
@@ -70,96 +70,84 @@ export function gestureHandlers(set, containerRef) {
|
|
|
70
70
|
startTime: Date.now(),
|
|
71
71
|
down: true,
|
|
72
72
|
scrollLocked: false
|
|
73
|
-
}
|
|
74
|
-
|
|
73
|
+
};
|
|
75
74
|
return newState;
|
|
76
75
|
});
|
|
77
76
|
};
|
|
78
|
-
|
|
79
77
|
function calcVelocity(deltaSpace, deltaTime, prevVelocity) {
|
|
80
78
|
if (deltaTime < 1) {
|
|
81
79
|
deltaTime = 1;
|
|
82
80
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
var depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);
|
|
81
|
+
const speed = deltaSpace / deltaTime;
|
|
82
|
+
const depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);
|
|
86
83
|
return speed * depr + prevVelocity * (1 - depr);
|
|
87
84
|
}
|
|
88
|
-
|
|
89
85
|
function handleMove(e) {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
const {
|
|
87
|
+
pageX,
|
|
88
|
+
pageY
|
|
89
|
+
} = e;
|
|
93
90
|
if (e.cancelable) {
|
|
94
91
|
// prevent drag & drop behaviour from browser
|
|
95
92
|
e.preventDefault && e.preventDefault();
|
|
96
93
|
}
|
|
97
|
-
|
|
98
|
-
set(function (state) {
|
|
94
|
+
set(state => {
|
|
99
95
|
function getDeltaSum(currentPos, initialPos, prevPos) {
|
|
100
96
|
if (state.scrollLocked || Math.abs(currentPos - initialPos) >= minTouchDelta) {
|
|
101
97
|
state.scrollLocked = true;
|
|
102
98
|
return currentPos - prevPos;
|
|
103
99
|
}
|
|
104
|
-
|
|
105
100
|
return 0;
|
|
106
101
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
xDeltaPercent: xDeltaPercent,
|
|
102
|
+
const target = containerRef && containerRef.current || e.target;
|
|
103
|
+
const deltaTime = Date.now() - state.startTime;
|
|
104
|
+
const width = target ? target.offsetWidth : NaN;
|
|
105
|
+
const xDelta = state.xDelta + getDeltaSum(pageX, state.xInitial, state.x);
|
|
106
|
+
const xDeltaPercent = xDelta * 100 / width;
|
|
107
|
+
const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
|
|
108
|
+
const height = target ? target.offsetHeight : NaN;
|
|
109
|
+
const yDelta = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);
|
|
110
|
+
const yDeltaPercent = yDelta * 100 / height;
|
|
111
|
+
const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
|
|
112
|
+
const newState = {
|
|
113
|
+
...state,
|
|
114
|
+
xDelta,
|
|
115
|
+
xDeltaPercent,
|
|
122
116
|
x: pageX,
|
|
123
117
|
xPrev: state.x,
|
|
124
|
-
xVelocity
|
|
125
|
-
yDelta
|
|
126
|
-
yDeltaPercent
|
|
118
|
+
xVelocity,
|
|
119
|
+
yDelta,
|
|
120
|
+
yDeltaPercent,
|
|
127
121
|
y: pageY,
|
|
128
122
|
yPrev: state.y,
|
|
129
|
-
yVelocity
|
|
130
|
-
}
|
|
131
|
-
|
|
123
|
+
yVelocity
|
|
124
|
+
};
|
|
132
125
|
return newState;
|
|
133
126
|
});
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
/* eslint-disable @typescript-eslint/no-use-before-define */
|
|
127
|
+
}
|
|
137
128
|
|
|
129
|
+
// Touch handlers
|
|
138
130
|
|
|
139
131
|
function handleTouchMove(e) {
|
|
140
132
|
if (e.cancelable) {
|
|
141
133
|
// prevent drag & drop behaviour from browser
|
|
142
134
|
e.preventDefault();
|
|
143
135
|
}
|
|
144
|
-
|
|
145
136
|
handleMove(e.touches.item(0));
|
|
146
137
|
}
|
|
147
|
-
|
|
148
138
|
function handleTouchStart(e) {
|
|
149
139
|
// making sure we're not dragging the element when more than one finger press the screen
|
|
150
|
-
|
|
151
|
-
|
|
140
|
+
const {
|
|
141
|
+
touches
|
|
142
|
+
} = e;
|
|
152
143
|
if (touches.length > 1) {
|
|
153
144
|
return;
|
|
154
145
|
}
|
|
155
|
-
|
|
156
146
|
if (ensureTargetIsContainer && containerRef && e.target !== containerRef.current) {
|
|
157
147
|
return;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
var ownerDocument = getOwnerDocument(e.currentTarget);
|
|
162
|
-
var ownerWindow = ownerDocument.defaultView || window;
|
|
148
|
+
}
|
|
149
|
+
const ownerDocument = getOwnerDocument(e.currentTarget);
|
|
150
|
+
const ownerWindow = ownerDocument.defaultView || window;
|
|
163
151
|
ownerWindow.addEventListener('touchmove', handleTouchMove, {
|
|
164
152
|
passive: false
|
|
165
153
|
});
|
|
@@ -167,58 +155,50 @@ export function gestureHandlers(set, containerRef) {
|
|
|
167
155
|
ownerWindow.addEventListener('touchcancel', handleTouchEnd);
|
|
168
156
|
handleDown(e.touches.item(0));
|
|
169
157
|
}
|
|
170
|
-
|
|
171
158
|
function handleTouchEnd() {
|
|
172
159
|
this.removeEventListener('touchmove', handleTouchMove);
|
|
173
160
|
this.removeEventListener('touchend', handleTouchEnd);
|
|
174
161
|
this.removeEventListener('touchcancel', handleTouchEnd);
|
|
175
162
|
handleUp();
|
|
176
|
-
}
|
|
177
|
-
|
|
163
|
+
}
|
|
178
164
|
|
|
165
|
+
// Mouse handlers
|
|
179
166
|
function handleMouseDown(e) {
|
|
180
167
|
if (ensureTargetIsContainer && containerRef && e.target !== containerRef.current) {
|
|
181
168
|
return;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
var ownerDocument = getOwnerDocument(e.currentTarget);
|
|
186
|
-
var ownerWindow = ownerDocument.defaultView || window;
|
|
187
|
-
|
|
169
|
+
}
|
|
170
|
+
const ownerDocument = getOwnerDocument(e.currentTarget);
|
|
171
|
+
const ownerWindow = ownerDocument.defaultView || window;
|
|
188
172
|
if (e.button === 0) {
|
|
189
173
|
ownerWindow.addEventListener('mousemove', handleMove);
|
|
190
174
|
ownerWindow.addEventListener('mouseup', handleMouseUp);
|
|
191
175
|
handleDown(e);
|
|
192
176
|
}
|
|
193
177
|
}
|
|
194
|
-
|
|
195
178
|
function handleMouseUp() {
|
|
196
179
|
this.removeEventListener('mousemove', handleMove);
|
|
197
180
|
this.removeEventListener('mouseup', handleMouseUp);
|
|
198
181
|
handleUp();
|
|
199
182
|
}
|
|
200
|
-
/* eslint-enable @typescript-eslint/no-use-before-define */
|
|
201
|
-
|
|
202
|
-
|
|
203
183
|
return {
|
|
204
184
|
onMouseDown: handleMouseDown,
|
|
205
185
|
onTouchStart: handleTouchStart
|
|
206
186
|
};
|
|
207
187
|
}
|
|
208
|
-
export
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
188
|
+
export const useGestureHandlers = function (containerRef, onGesture) {
|
|
189
|
+
let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
190
|
+
const state = useRef({
|
|
191
|
+
...initialGestureHandlersState
|
|
192
|
+
});
|
|
193
|
+
const set = cb => {
|
|
213
194
|
state.current = cb(state.current);
|
|
214
195
|
onGesture && onGesture(state.current);
|
|
215
196
|
return state.current;
|
|
216
197
|
};
|
|
217
|
-
|
|
218
|
-
var handlers = gestureHandlers(set, containerRef, options);
|
|
198
|
+
const handlers = gestureHandlers(set, containerRef, options);
|
|
219
199
|
return {
|
|
220
200
|
state: state.current,
|
|
221
|
-
handlers
|
|
201
|
+
handlers
|
|
222
202
|
};
|
|
223
203
|
};
|
|
224
204
|
//# sourceMappingURL=useGestureHandlers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGestureHandlers.js","names":["useRef","getOwnerDocument","initialGestureHandlersState","target","x","xDelta","xDeltaPercent","xInitial","xPrev","xVelocity","y","yDelta","yDeltaPercent","yInitial","yPrev","yVelocity","startTime","down","scrollLocked","FRAMERATE_CONST","VELOCITY_DEPR_FACTOR","gestureHandlers","set","containerRef","options","ensureTargetIsContainer","minTouchDelta","handleUp","state","deltaTime","Date","now","calcVelocity","newState","handleDown","e","pageX","pageY","deltaSpace","prevVelocity","speed","depr","Math","min","handleMove","cancelable","preventDefault","getDeltaSum","currentPos","initialPos","prevPos","abs","current","width","offsetWidth","NaN","height","offsetHeight","handleTouchMove","touches","item","handleTouchStart","length","ownerDocument","currentTarget","ownerWindow","defaultView","window","addEventListener","passive","handleTouchEnd","removeEventListener","handleMouseDown","button","handleMouseUp","onMouseDown","onTouchStart","useGestureHandlers","onGesture","cb","handlers"],"sources":["../../../src/hooks/useGestureHandlers.ts"],"sourcesContent":["import type {\r\n MutableRefObject,\r\n MouseEvent as ReactMouseEvent,\r\n TouchEvent as ReactTouchEvent,\r\n} from 'react';\r\nimport { useRef } from 'react';\r\n\r\nimport { getOwnerDocument } from '../utils';\r\n\r\nexport interface GestureHandlersState {\r\n target: null | EventTarget;\r\n x: number;\r\n xDelta: number;\r\n xDeltaPercent: number;\r\n xInitial: number;\r\n xPrev: number;\r\n xVelocity: number;\r\n y: number;\r\n yDelta: number;\r\n yDeltaPercent: number;\r\n yInitial: number;\r\n yPrev: number;\r\n yVelocity: number;\r\n startTime: number;\r\n down: boolean;\r\n scrollLocked: boolean;\r\n}\r\n\r\ntype SetStateFunc<S> = (\r\n state: (prevState: Readonly<S>) => S,\r\n callback?: () => void\r\n) => void;\r\n\r\nexport interface GestureHandlersReturn {\r\n onMouseDown: (e: ReactMouseEvent<HTMLElement>) => void;\r\n onTouchStart: (e: ReactTouchEvent<HTMLElement>) => void;\r\n}\r\n\r\nexport interface GestureHandlerOptions {\r\n ensureTargetIsContainer?: boolean;\r\n minTouchDelta?: number;\r\n}\r\n\r\nexport const initialGestureHandlersState: GestureHandlersState = {\r\n target: null,\r\n x: 0,\r\n xDelta: 0,\r\n xDeltaPercent: 0,\r\n xInitial: 0,\r\n xPrev: 0,\r\n xVelocity: 0,\r\n y: 0,\r\n yDelta: 0,\r\n yDeltaPercent: 0,\r\n yInitial: 0,\r\n yPrev: 0,\r\n yVelocity: 0,\r\n startTime: 0,\r\n down: false,\r\n scrollLocked: false,\r\n};\r\n\r\nconst FRAMERATE_CONST = 1000 / 60; // 60 fps\r\nconst VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;\r\n\r\nexport function gestureHandlers(\r\n set: SetStateFunc<GestureHandlersState>,\r\n containerRef?: MutableRefObject<HTMLElement | null>,\r\n options: GestureHandlerOptions = {}\r\n): GestureHandlersReturn {\r\n const { ensureTargetIsContainer = false, minTouchDelta = 0 } = options;\r\n\r\n // Common handlers\r\n const handleUp = () => {\r\n set((state: GestureHandlersState) => {\r\n const deltaTime = Date.now() - state.startTime;\r\n const xDelta = state.x - state.xInitial;\r\n const yDelta = state.y - state.yInitial;\r\n const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);\r\n const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);\r\n const newState: GestureHandlersState = {\r\n ...state,\r\n xVelocity,\r\n yVelocity,\r\n target: null,\r\n down: false,\r\n };\r\n\r\n return newState;\r\n });\r\n };\r\n\r\n const handleDown = (e: MouseEvent) => {\r\n const { target, pageX, pageY } = e;\r\n\r\n set((state: GestureHandlersState) => {\r\n const newState = {\r\n ...state,\r\n target,\r\n x: pageX,\r\n xDelta: 0,\r\n xDeltaPercent: 0,\r\n xVelocity: 0,\r\n xInitial: pageX,\r\n xPrev: pageX,\r\n y: pageY,\r\n yDelta: 0,\r\n yDeltaPercent: 0,\r\n yVelocity: 0,\r\n yInitial: pageY,\r\n yPrev: pageY,\r\n startTime: Date.now(),\r\n down: true,\r\n scrollLocked: false,\r\n };\r\n\r\n return newState;\r\n });\r\n };\r\n\r\n function calcVelocity(\r\n deltaSpace: number,\r\n deltaTime: number,\r\n prevVelocity: number\r\n ) {\r\n if (deltaTime < 1) {\r\n deltaTime = 1;\r\n }\r\n const speed = deltaSpace / deltaTime;\r\n const depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);\r\n return speed * depr + prevVelocity * (1 - depr);\r\n }\r\n\r\n function handleMove(e: MouseEvent) {\r\n const { pageX, pageY } = e;\r\n if (e.cancelable) {\r\n // prevent drag & drop behaviour from browser\r\n e.preventDefault && e.preventDefault();\r\n }\r\n\r\n set((state: GestureHandlersState) => {\r\n function getDeltaSum(\r\n currentPos: number,\r\n initialPos: number,\r\n prevPos: number\r\n ): number {\r\n if (\r\n state.scrollLocked ||\r\n Math.abs(currentPos - initialPos) >= minTouchDelta\r\n ) {\r\n state.scrollLocked = true;\r\n return currentPos - prevPos;\r\n }\r\n return 0;\r\n }\r\n\r\n const target =\r\n (containerRef && containerRef.current) || (e as any).target;\r\n\r\n const deltaTime = Date.now() - state.startTime;\r\n\r\n const width = target ? target.offsetWidth : NaN;\r\n const xDelta = state.xDelta + getDeltaSum(pageX, state.xInitial, state.x);\r\n const xDeltaPercent = (xDelta * 100) / width;\r\n const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);\r\n\r\n const height = target ? target.offsetHeight : NaN;\r\n const yDelta = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);\r\n const yDeltaPercent = (yDelta * 100) / height;\r\n const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);\r\n\r\n const newState = {\r\n ...state,\r\n xDelta,\r\n xDeltaPercent,\r\n x: pageX,\r\n xPrev: state.x,\r\n xVelocity,\r\n yDelta,\r\n yDeltaPercent,\r\n y: pageY,\r\n yPrev: state.y,\r\n yVelocity,\r\n };\r\n\r\n return newState;\r\n });\r\n }\r\n\r\n // Touch handlers\r\n\r\n /* eslint-disable @typescript-eslint/no-use-before-define */\r\n function handleTouchMove(e: TouchEvent) {\r\n if (e.cancelable) {\r\n // prevent drag & drop behaviour from browser\r\n e.preventDefault();\r\n }\r\n handleMove(e.touches.item(0) as any);\r\n }\r\n\r\n function handleTouchStart(e: ReactTouchEvent<HTMLElement>) {\r\n // making sure we're not dragging the element when more than one finger press the screen\r\n const { touches } = e;\r\n if (touches.length > 1) {\r\n return;\r\n }\r\n\r\n if (\r\n ensureTargetIsContainer &&\r\n containerRef &&\r\n e.target !== containerRef.current\r\n ) {\r\n return;\r\n }\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\r\n const ownerDocument = getOwnerDocument(e.currentTarget)!;\r\n const ownerWindow = ownerDocument.defaultView || window;\r\n ownerWindow.addEventListener('touchmove', handleTouchMove, {\r\n passive: false,\r\n });\r\n ownerWindow.addEventListener('touchend', handleTouchEnd);\r\n ownerWindow.addEventListener('touchcancel', handleTouchEnd);\r\n handleDown(e.touches.item(0) as any);\r\n }\r\n\r\n function handleTouchEnd(this: Window) {\r\n this.removeEventListener('touchmove', handleTouchMove);\r\n this.removeEventListener('touchend', handleTouchEnd);\r\n this.removeEventListener('touchcancel', handleTouchEnd);\r\n handleUp();\r\n }\r\n\r\n // Mouse handlers\r\n function handleMouseDown(e: ReactMouseEvent<HTMLElement>) {\r\n if (\r\n ensureTargetIsContainer &&\r\n containerRef &&\r\n e.target !== containerRef.current\r\n ) {\r\n return;\r\n }\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\r\n const ownerDocument = getOwnerDocument(e.currentTarget)!;\r\n const ownerWindow = ownerDocument.defaultView || window;\r\n if (e.button === 0) {\r\n ownerWindow.addEventListener('mousemove', handleMove);\r\n ownerWindow.addEventListener('mouseup', handleMouseUp);\r\n handleDown(e as any);\r\n }\r\n }\r\n\r\n function handleMouseUp(this: Window) {\r\n this.removeEventListener('mousemove', handleMove);\r\n this.removeEventListener('mouseup', handleMouseUp);\r\n handleUp();\r\n }\r\n /* eslint-enable @typescript-eslint/no-use-before-define */\r\n\r\n return {\r\n onMouseDown: handleMouseDown,\r\n onTouchStart: handleTouchStart,\r\n };\r\n}\r\n\r\nexport const useGestureHandlers = (\r\n containerRef: MutableRefObject<HTMLElement | null> | undefined,\r\n onGesture: (e: GestureHandlersState) => void,\r\n options: GestureHandlerOptions = {}\r\n) => {\r\n const state = useRef({ ...initialGestureHandlersState });\r\n\r\n const set = (\r\n cb: (prevState: GestureHandlersState) => GestureHandlersState\r\n ) => {\r\n state.current = cb(state.current);\r\n onGesture && onGesture(state.current);\r\n\r\n return state.current;\r\n };\r\n\r\n const handlers = gestureHandlers(set, containerRef, options);\r\n\r\n return { state: state.current, handlers };\r\n};\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useGestureHandlers.js","names":["useRef","getOwnerDocument","initialGestureHandlersState","target","x","xDelta","xDeltaPercent","xInitial","xPrev","xVelocity","y","yDelta","yDeltaPercent","yInitial","yPrev","yVelocity","startTime","down","scrollLocked","FRAMERATE_CONST","VELOCITY_DEPR_FACTOR","gestureHandlers","set","containerRef","options","arguments","length","undefined","ensureTargetIsContainer","minTouchDelta","handleUp","state","deltaTime","Date","now","calcVelocity","newState","handleDown","e","pageX","pageY","deltaSpace","prevVelocity","speed","depr","Math","min","handleMove","cancelable","preventDefault","getDeltaSum","currentPos","initialPos","prevPos","abs","current","width","offsetWidth","NaN","height","offsetHeight","handleTouchMove","touches","item","handleTouchStart","ownerDocument","currentTarget","ownerWindow","defaultView","window","addEventListener","passive","handleTouchEnd","removeEventListener","handleMouseDown","button","handleMouseUp","onMouseDown","onTouchStart","useGestureHandlers","onGesture","cb","handlers"],"sources":["../../../src/hooks/useGestureHandlers.ts"],"sourcesContent":["import type {\n MutableRefObject,\n MouseEvent as ReactMouseEvent,\n TouchEvent as ReactTouchEvent,\n} from 'react';\nimport { useRef } from 'react';\n\nimport { getOwnerDocument } from '../utils';\n\nexport interface GestureHandlersState {\n target: null | EventTarget;\n x: number;\n xDelta: number;\n xDeltaPercent: number;\n xInitial: number;\n xPrev: number;\n xVelocity: number;\n y: number;\n yDelta: number;\n yDeltaPercent: number;\n yInitial: number;\n yPrev: number;\n yVelocity: number;\n startTime: number;\n down: boolean;\n scrollLocked: boolean;\n}\n\ntype SetStateFunc<S> = (\n state: (prevState: Readonly<S>) => S,\n callback?: () => void\n) => void;\n\nexport interface GestureHandlersReturn {\n onMouseDown: (e: ReactMouseEvent<HTMLElement>) => void;\n onTouchStart: (e: ReactTouchEvent<HTMLElement>) => void;\n}\n\nexport interface GestureHandlerOptions {\n ensureTargetIsContainer?: boolean;\n minTouchDelta?: number;\n}\n\nexport const initialGestureHandlersState: GestureHandlersState = {\n target: null,\n x: 0,\n xDelta: 0,\n xDeltaPercent: 0,\n xInitial: 0,\n xPrev: 0,\n xVelocity: 0,\n y: 0,\n yDelta: 0,\n yDeltaPercent: 0,\n yInitial: 0,\n yPrev: 0,\n yVelocity: 0,\n startTime: 0,\n down: false,\n scrollLocked: false,\n};\n\nconst FRAMERATE_CONST = 1000 / 60; // 60 fps\nconst VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;\n\nexport function gestureHandlers(\n set: SetStateFunc<GestureHandlersState>,\n containerRef?: MutableRefObject<HTMLElement | null>,\n options: GestureHandlerOptions = {}\n): GestureHandlersReturn {\n const { ensureTargetIsContainer = false, minTouchDelta = 0 } = options;\n\n // Common handlers\n const handleUp = () => {\n set((state: GestureHandlersState) => {\n const deltaTime = Date.now() - state.startTime;\n const xDelta = state.x - state.xInitial;\n const yDelta = state.y - state.yInitial;\n const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);\n const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);\n const newState: GestureHandlersState = {\n ...state,\n xVelocity,\n yVelocity,\n target: null,\n down: false,\n };\n\n return newState;\n });\n };\n\n const handleDown = (e: MouseEvent) => {\n const { target, pageX, pageY } = e;\n\n set((state: GestureHandlersState) => {\n const newState = {\n ...state,\n target,\n x: pageX,\n xDelta: 0,\n xDeltaPercent: 0,\n xVelocity: 0,\n xInitial: pageX,\n xPrev: pageX,\n y: pageY,\n yDelta: 0,\n yDeltaPercent: 0,\n yVelocity: 0,\n yInitial: pageY,\n yPrev: pageY,\n startTime: Date.now(),\n down: true,\n scrollLocked: false,\n };\n\n return newState;\n });\n };\n\n function calcVelocity(\n deltaSpace: number,\n deltaTime: number,\n prevVelocity: number\n ) {\n if (deltaTime < 1) {\n deltaTime = 1;\n }\n const speed = deltaSpace / deltaTime;\n const depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);\n return speed * depr + prevVelocity * (1 - depr);\n }\n\n function handleMove(e: MouseEvent) {\n const { pageX, pageY } = e;\n if (e.cancelable) {\n // prevent drag & drop behaviour from browser\n e.preventDefault && e.preventDefault();\n }\n\n set((state: GestureHandlersState) => {\n function getDeltaSum(\n currentPos: number,\n initialPos: number,\n prevPos: number\n ): number {\n if (\n state.scrollLocked ||\n Math.abs(currentPos - initialPos) >= minTouchDelta\n ) {\n state.scrollLocked = true;\n return currentPos - prevPos;\n }\n return 0;\n }\n\n const target =\n (containerRef && containerRef.current) || (e as any).target;\n\n const deltaTime = Date.now() - state.startTime;\n\n const width = target ? target.offsetWidth : NaN;\n const xDelta = state.xDelta + getDeltaSum(pageX, state.xInitial, state.x);\n const xDeltaPercent = (xDelta * 100) / width;\n const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);\n\n const height = target ? target.offsetHeight : NaN;\n const yDelta = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);\n const yDeltaPercent = (yDelta * 100) / height;\n const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);\n\n const newState = {\n ...state,\n xDelta,\n xDeltaPercent,\n x: pageX,\n xPrev: state.x,\n xVelocity,\n yDelta,\n yDeltaPercent,\n y: pageY,\n yPrev: state.y,\n yVelocity,\n };\n\n return newState;\n });\n }\n\n // Touch handlers\n\n function handleTouchMove(e: TouchEvent) {\n if (e.cancelable) {\n // prevent drag & drop behaviour from browser\n e.preventDefault();\n }\n handleMove(e.touches.item(0) as any);\n }\n\n function handleTouchStart(e: ReactTouchEvent<HTMLElement>) {\n // making sure we're not dragging the element when more than one finger press the screen\n const { touches } = e;\n if (touches.length > 1) {\n return;\n }\n\n if (\n ensureTargetIsContainer &&\n containerRef &&\n e.target !== containerRef.current\n ) {\n return;\n }\n\n const ownerDocument = getOwnerDocument(e.currentTarget)!;\n const ownerWindow = ownerDocument.defaultView || window;\n ownerWindow.addEventListener('touchmove', handleTouchMove, {\n passive: false,\n });\n ownerWindow.addEventListener('touchend', handleTouchEnd);\n ownerWindow.addEventListener('touchcancel', handleTouchEnd);\n handleDown(e.touches.item(0) as any);\n }\n\n function handleTouchEnd(this: Window) {\n this.removeEventListener('touchmove', handleTouchMove);\n this.removeEventListener('touchend', handleTouchEnd);\n this.removeEventListener('touchcancel', handleTouchEnd);\n handleUp();\n }\n\n // Mouse handlers\n function handleMouseDown(e: ReactMouseEvent<HTMLElement>) {\n if (\n ensureTargetIsContainer &&\n containerRef &&\n e.target !== containerRef.current\n ) {\n return;\n }\n\n const ownerDocument = getOwnerDocument(e.currentTarget)!;\n const ownerWindow = ownerDocument.defaultView || window;\n if (e.button === 0) {\n ownerWindow.addEventListener('mousemove', handleMove);\n ownerWindow.addEventListener('mouseup', handleMouseUp);\n handleDown(e as any);\n }\n }\n\n function handleMouseUp(this: Window) {\n this.removeEventListener('mousemove', handleMove);\n this.removeEventListener('mouseup', handleMouseUp);\n handleUp();\n }\n\n return {\n onMouseDown: handleMouseDown,\n onTouchStart: handleTouchStart,\n };\n}\n\nexport const useGestureHandlers = (\n containerRef: MutableRefObject<HTMLElement | null> | undefined,\n onGesture: (e: GestureHandlersState) => void,\n options: GestureHandlerOptions = {}\n) => {\n const state = useRef({ ...initialGestureHandlersState });\n\n const set = (\n cb: (prevState: GestureHandlersState) => GestureHandlersState\n ) => {\n state.current = cb(state.current);\n onGesture && onGesture(state.current);\n\n return state.current;\n };\n\n const handlers = gestureHandlers(set, containerRef, options);\n\n return { state: state.current, handlers };\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { MutableRefObject } from 'react';
|
|
2
|
-
export declare function useMeasure(ref: MutableRefObject<HTMLElement | null>): {
|
|
3
|
-
left: number;
|
|
4
|
-
top: number;
|
|
5
|
-
width: number;
|
|
6
|
-
height: number;
|
|
7
|
-
};
|
|
1
|
+
import type { MutableRefObject } from 'react';
|
|
2
|
+
export declare function useMeasure(ref: MutableRefObject<HTMLElement | null>): {
|
|
3
|
+
left: number;
|
|
4
|
+
top: number;
|
|
5
|
+
width: number;
|
|
6
|
+
height: number;
|
|
7
|
+
};
|
|
@@ -1,31 +1,23 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
1
|
import { useRef, useState, useEffect } from 'react';
|
|
3
2
|
export function useMeasure(ref) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var _useState = useState({
|
|
3
|
+
const ro = useRef(null);
|
|
4
|
+
const [bounds, setBounds] = useState({
|
|
7
5
|
left: 0,
|
|
8
6
|
top: 0,
|
|
9
7
|
width: 0,
|
|
10
8
|
height: 0
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
bounds = _useState2[0],
|
|
14
|
-
setBounds = _useState2[1];
|
|
15
|
-
|
|
16
|
-
useEffect(function () {
|
|
9
|
+
});
|
|
10
|
+
useEffect(() => {
|
|
17
11
|
if (ro.current === null) {
|
|
18
|
-
ro.current = new ResizeObserver(
|
|
19
|
-
|
|
12
|
+
ro.current = new ResizeObserver(entries => {
|
|
13
|
+
const entry = entries[0];
|
|
20
14
|
setBounds(entry.contentRect);
|
|
21
15
|
});
|
|
22
16
|
}
|
|
23
|
-
|
|
24
17
|
if (ref.current) {
|
|
25
18
|
ro.current.observe(ref.current);
|
|
26
19
|
}
|
|
27
|
-
|
|
28
|
-
return function () {
|
|
20
|
+
return () => {
|
|
29
21
|
if (ro.current) {
|
|
30
22
|
ro.current.disconnect();
|
|
31
23
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMeasure.js","names":["useRef","useState","useEffect","useMeasure","ref","ro","
|
|
1
|
+
{"version":3,"file":"useMeasure.js","names":["useRef","useState","useEffect","useMeasure","ref","ro","bounds","setBounds","left","top","width","height","current","ResizeObserver","entries","entry","contentRect","observe","disconnect"],"sources":["../../../src/hooks/useMeasure.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useRef, useState, useEffect } from 'react';\n\nexport function useMeasure(ref: MutableRefObject<HTMLElement | null>) {\n const ro = useRef<ResizeObserver | null>(null);\n const [bounds, setBounds] = useState({\n left: 0,\n top: 0,\n width: 0,\n height: 0,\n });\n\n useEffect(() => {\n if (ro.current === null) {\n ro.current = new ResizeObserver((entries: any) => {\n const entry = entries[0];\n setBounds(entry.contentRect);\n });\n }\n\n if (ref.current) {\n ro.current.observe(ref.current);\n }\n\n return () => {\n if (ro.current) {\n ro.current.disconnect();\n }\n };\n }, [ref]);\n\n return bounds;\n}\n"],"mappings":"AACA,SAASA,MAAM,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAEnD,OAAO,SAASC,UAAUA,CAACC,GAAyC,EAAE;EACpE,MAAMC,EAAE,GAAGL,MAAM,CAAwB,IAAI,CAAC;EAC9C,MAAM,CAACM,MAAM,EAAEC,SAAS,CAAC,GAAGN,QAAQ,CAAC;IACnCO,IAAI,EAAE,CAAC;IACPC,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV,CAAC,CAAC;EAEFT,SAAS,CAAC,MAAM;IACd,IAAIG,EAAE,CAACO,OAAO,KAAK,IAAI,EAAE;MACvBP,EAAE,CAACO,OAAO,GAAG,IAAIC,cAAc,CAAEC,OAAY,IAAK;QAChD,MAAMC,KAAK,GAAGD,OAAO,CAAC,CAAC,CAAC;QACxBP,SAAS,CAACQ,KAAK,CAACC,WAAW,CAAC;MAC9B,CAAC,CAAC;IACJ;IAEA,IAAIZ,GAAG,CAACQ,OAAO,EAAE;MACfP,EAAE,CAACO,OAAO,CAACK,OAAO,CAACb,GAAG,CAACQ,OAAO,CAAC;IACjC;IAEA,OAAO,MAAM;MACX,IAAIP,EAAE,CAACO,OAAO,EAAE;QACdP,EAAE,CAACO,OAAO,CAACM,UAAU,CAAC,CAAC;MACzB;IACF,CAAC;EACH,CAAC,EAAE,CAACd,GAAG,CAAC,CAAC;EAET,OAAOE,MAAM;AACf","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { RefObject } from 'react';
|
|
2
|
-
export declare function useOnClickOutside(ref: RefObject<any>, handler: (e: PointerEvent) => void, active?: boolean): void;
|
|
1
|
+
import type { RefObject } from 'react';
|
|
2
|
+
export declare function useOnClickOutside(ref: RefObject<any>, handler: (e: PointerEvent) => void, active?: boolean): void;
|
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
import { useEffect, useCallback } from 'react';
|
|
2
2
|
export function useOnClickOutside(ref, handler) {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
let active = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
4
|
+
const listener = useCallback(event => {
|
|
5
5
|
// Do nothing if clicking ref's element or descendent elements
|
|
6
6
|
if (!ref.current || ref.current.contains(event.target)) {
|
|
7
7
|
return;
|
|
8
8
|
}
|
|
9
|
-
|
|
10
9
|
handler && handler(event);
|
|
11
10
|
}, [ref, handler]);
|
|
12
|
-
useEffect(
|
|
11
|
+
useEffect(() => {
|
|
13
12
|
if (active) {
|
|
14
13
|
document.addEventListener('pointerup', listener);
|
|
15
|
-
return
|
|
14
|
+
return () => {
|
|
16
15
|
document.removeEventListener('pointerup', listener);
|
|
17
16
|
};
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
return;
|
|
21
19
|
}, [listener, active]);
|
|
22
20
|
}
|