@basic-ui/core 0.0.40 → 0.0.43
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 +1312 -464
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Accordion/Accordion.d.ts +7 -7
- package/build/esm/Accordion/Accordion.js +4 -4
- package/build/esm/Accordion/Accordion.js.map +1 -1
- package/build/esm/Accordion/AccordionBody.d.ts +5 -5
- package/build/esm/Accordion/AccordionBody.js +4 -4
- package/build/esm/Accordion/AccordionBody.js.map +1 -1
- package/build/esm/Accordion/AccordionHeader.d.ts +6 -6
- package/build/esm/Accordion/AccordionHeader.js +4 -4
- package/build/esm/Accordion/AccordionHeader.js.map +1 -1
- package/build/esm/Accordion/AccordionItem.d.ts +7 -7
- package/build/esm/Accordion/AccordionItem.js +2 -2
- package/build/esm/Accordion/AccordionItem.js.map +1 -1
- package/build/esm/Accordion/context.d.ts +3 -3
- package/build/esm/Accordion/context.js.map +1 -1
- package/build/esm/Accordion/index.d.ts +0 -0
- package/build/esm/Accordion/index.js.map +1 -1
- package/build/esm/Accordion/scopeQuery.d.ts +0 -0
- package/build/esm/Accordion/scopeQuery.js.map +1 -1
- package/build/esm/CheckBox/CheckBox.d.ts +6 -6
- package/build/esm/CheckBox/CheckBox.js +2 -2
- package/build/esm/CheckBox/CheckBox.js.map +1 -1
- package/build/esm/CheckBox/index.d.ts +0 -0
- package/build/esm/CheckBox/index.js.map +1 -1
- package/build/esm/ComboBox/Combobox.d.ts +10 -10
- package/build/esm/ComboBox/Combobox.js +3 -3
- package/build/esm/ComboBox/Combobox.js.map +1 -1
- package/build/esm/ComboBox/ComboboxButton.d.ts +8 -8
- package/build/esm/ComboBox/ComboboxButton.js +4 -4
- package/build/esm/ComboBox/ComboboxButton.js.map +1 -1
- package/build/esm/ComboBox/ComboboxInput.d.ts +10 -10
- package/build/esm/ComboBox/ComboboxInput.js +3 -3
- package/build/esm/ComboBox/ComboboxInput.js.map +1 -1
- package/build/esm/ComboBox/ComboboxLabel.d.ts +5 -5
- package/build/esm/ComboBox/ComboboxLabel.js +2 -2
- package/build/esm/ComboBox/ComboboxLabel.js.map +1 -1
- package/build/esm/ComboBox/ComboboxList.d.ts +6 -6
- package/build/esm/ComboBox/ComboboxList.js +3 -3
- package/build/esm/ComboBox/ComboboxList.js.map +1 -1
- package/build/esm/ComboBox/ComboboxOption.d.ts +7 -7
- package/build/esm/ComboBox/ComboboxOption.js +4 -4
- package/build/esm/ComboBox/ComboboxOption.js.map +1 -1
- package/build/esm/ComboBox/ComboboxPopover.d.ts +8 -8
- package/build/esm/ComboBox/ComboboxPopover.js +5 -5
- package/build/esm/ComboBox/ComboboxPopover.js.map +1 -1
- package/build/esm/ComboBox/cities.d.ts +0 -0
- package/build/esm/ComboBox/cities.js.map +1 -1
- package/build/esm/ComboBox/context.d.ts +10 -10
- package/build/esm/ComboBox/context.js.map +1 -1
- package/build/esm/ComboBox/hooks.d.ts +3 -3
- package/build/esm/ComboBox/hooks.js +11 -11
- package/build/esm/ComboBox/hooks.js.map +1 -1
- package/build/esm/ComboBox/index.d.ts +0 -0
- package/build/esm/ComboBox/index.js.map +1 -1
- package/build/esm/ComboBox/makeHash.d.ts +0 -0
- package/build/esm/ComboBox/makeHash.js.map +1 -1
- package/build/esm/ComboBox/scopeQuery.d.ts +0 -0
- package/build/esm/ComboBox/scopeQuery.js.map +1 -1
- package/build/esm/FocusLock/FocusLock.d.ts +7 -7
- package/build/esm/FocusLock/FocusLock.js +2 -2
- package/build/esm/FocusLock/FocusLock.js.map +1 -1
- package/build/esm/FocusLock/index.d.ts +0 -0
- package/build/esm/FocusLock/index.js.map +1 -1
- package/build/esm/FocusLock/tabUtils.d.ts +0 -0
- package/build/esm/FocusLock/tabUtils.js.map +1 -1
- package/build/esm/FocusLock/useFocusLock.d.ts +4 -4
- package/build/esm/FocusLock/useFocusLock.js.map +1 -1
- package/build/esm/List/List.d.ts +6 -6
- package/build/esm/List/List.js +2 -2
- package/build/esm/List/List.js.map +1 -1
- package/build/esm/List/ListItem.d.ts +6 -6
- package/build/esm/List/ListItem.js +2 -2
- package/build/esm/List/ListItem.js.map +1 -1
- package/build/esm/List/context.d.ts +0 -0
- package/build/esm/List/context.js.map +1 -1
- package/build/esm/List/index.d.ts +0 -0
- package/build/esm/List/index.js.map +1 -1
- package/build/esm/Menu/Menu.d.ts +6 -6
- package/build/esm/Menu/Menu.js +2 -2
- package/build/esm/Menu/Menu.js.map +1 -1
- package/build/esm/Menu/MenuButton.d.ts +10 -10
- package/build/esm/Menu/MenuButton.js +3 -3
- package/build/esm/Menu/MenuButton.js.map +1 -1
- package/build/esm/Menu/MenuItem.d.ts +6 -6
- package/build/esm/Menu/MenuItem.js +4 -4
- package/build/esm/Menu/MenuItem.js.map +1 -1
- package/build/esm/Menu/MenuList.d.ts +5 -5
- package/build/esm/Menu/MenuList.js +6 -6
- package/build/esm/Menu/MenuList.js.map +1 -1
- package/build/esm/Menu/MenuPopover.d.ts +5 -5
- package/build/esm/Menu/MenuPopover.js +2 -2
- package/build/esm/Menu/MenuPopover.js.map +1 -1
- package/build/esm/Menu/context.d.ts +2 -2
- package/build/esm/Menu/context.js.map +1 -1
- package/build/esm/Menu/index.d.ts +0 -0
- package/build/esm/Menu/index.js.map +1 -1
- package/build/esm/Menu/scope.d.ts +0 -0
- package/build/esm/Menu/scope.js.map +1 -1
- package/build/esm/Modal/Modal.d.ts +6 -7
- package/build/esm/Modal/Modal.js +5 -5
- package/build/esm/Modal/Modal.js.map +1 -1
- package/build/esm/Modal/ModalBackdrop.d.ts +6 -6
- package/build/esm/Modal/ModalBackdrop.js +6 -6
- package/build/esm/Modal/ModalBackdrop.js.map +1 -1
- package/build/esm/Modal/index.d.ts +0 -0
- package/build/esm/Modal/index.js.map +1 -1
- package/build/esm/Popper/Popper.d.ts +7 -7
- package/build/esm/Popper/Popper.js +6 -6
- package/build/esm/Popper/Popper.js.map +1 -1
- package/build/esm/Popper/PopperArrow.d.ts +5 -5
- package/build/esm/Popper/PopperArrow.js +5 -6
- package/build/esm/Popper/PopperArrow.js.map +1 -1
- package/build/esm/Popper/context.d.ts +0 -0
- package/build/esm/Popper/context.js.map +1 -1
- package/build/esm/Popper/index.d.ts +0 -0
- package/build/esm/Popper/index.js.map +1 -1
- package/build/esm/Portal/Portal.d.ts +0 -0
- package/build/esm/Portal/Portal.js.map +1 -1
- package/build/esm/Portal/index.d.ts +0 -0
- package/build/esm/Portal/index.js.map +1 -1
- package/build/esm/RadioButton/RadioButton.d.ts +6 -6
- package/build/esm/RadioButton/RadioButton.js +5 -3
- package/build/esm/RadioButton/RadioButton.js.map +1 -1
- package/build/esm/RadioButton/RadioGroup.d.ts +7 -7
- package/build/esm/RadioButton/RadioGroup.js +2 -2
- package/build/esm/RadioButton/RadioGroup.js.map +1 -1
- package/build/esm/RadioButton/context.d.ts +2 -2
- package/build/esm/RadioButton/context.js.map +1 -1
- package/build/esm/RadioButton/index.d.ts +0 -0
- package/build/esm/RadioButton/index.js.map +1 -1
- package/build/esm/SkipNav/SkipNav.d.ts +6 -6
- package/build/esm/SkipNav/SkipNav.js +2 -2
- package/build/esm/SkipNav/SkipNav.js.map +1 -1
- package/build/esm/SkipNav/index.d.ts +0 -0
- package/build/esm/SkipNav/index.js.map +1 -1
- package/build/esm/Slider/Slider.d.ts +218 -0
- package/build/esm/Slider/Slider.js +842 -0
- package/build/esm/Slider/Slider.js.map +1 -0
- package/build/esm/Slider/index.d.ts +1 -0
- package/build/esm/Slider/index.js +2 -0
- package/build/esm/Slider/index.js.map +1 -0
- package/build/esm/Spinner/Spinner.d.ts +7 -7
- package/build/esm/Spinner/Spinner.js +2 -2
- package/build/esm/Spinner/Spinner.js.map +1 -1
- package/build/esm/Spinner/SpinnerButton.d.ts +6 -6
- package/build/esm/Spinner/SpinnerButton.js +3 -3
- package/build/esm/Spinner/SpinnerButton.js.map +1 -1
- package/build/esm/Spinner/context.d.ts +2 -2
- package/build/esm/Spinner/context.js.map +1 -1
- package/build/esm/Spinner/index.d.ts +0 -0
- package/build/esm/Spinner/index.js.map +1 -1
- package/build/esm/Tabs/Tab.d.ts +6 -6
- package/build/esm/Tabs/Tab.js +3 -3
- package/build/esm/Tabs/Tab.js.map +1 -1
- package/build/esm/Tabs/TabList.d.ts +6 -6
- package/build/esm/Tabs/TabList.js +4 -4
- package/build/esm/Tabs/TabList.js.map +1 -1
- package/build/esm/Tabs/TabPanel.d.ts +6 -6
- package/build/esm/Tabs/TabPanel.js +4 -4
- package/build/esm/Tabs/TabPanel.js.map +1 -1
- package/build/esm/Tabs/TabPanels.d.ts +5 -5
- package/build/esm/Tabs/TabPanels.js +4 -4
- package/build/esm/Tabs/TabPanels.js.map +1 -1
- package/build/esm/Tabs/Tabs.d.ts +6 -6
- package/build/esm/Tabs/Tabs.js +2 -2
- package/build/esm/Tabs/Tabs.js.map +1 -1
- package/build/esm/Tabs/context.d.ts +2 -2
- package/build/esm/Tabs/context.js.map +1 -1
- package/build/esm/Tabs/index.d.ts +0 -0
- package/build/esm/Tabs/index.js.map +1 -1
- package/build/esm/Tabs/scopeQuery.d.ts +0 -0
- package/build/esm/Tabs/scopeQuery.js.map +1 -1
- package/build/esm/Tooltip/Tooltip.d.ts +7 -8
- package/build/esm/Tooltip/Tooltip.js +5 -3
- package/build/esm/Tooltip/Tooltip.js.map +1 -1
- package/build/esm/Tooltip/index.d.ts +0 -0
- package/build/esm/Tooltip/index.js.map +1 -1
- package/build/esm/Tooltip/stateMachine.d.ts +0 -0
- package/build/esm/Tooltip/stateMachine.js +9 -9
- package/build/esm/Tooltip/stateMachine.js.map +1 -1
- package/build/esm/Tooltip/useTooltip.d.ts +7 -7
- package/build/esm/Tooltip/useTooltip.js +6 -5
- package/build/esm/Tooltip/useTooltip.js.map +1 -1
- package/build/esm/hooks/index.d.ts +0 -0
- package/build/esm/hooks/index.js.map +1 -1
- package/build/esm/hooks/useAutoFocus.d.ts +2 -2
- package/build/esm/hooks/useAutoFocus.js.map +1 -1
- package/build/esm/hooks/useChildrenCounter.d.ts +0 -0
- package/build/esm/hooks/useChildrenCounter.js.map +1 -1
- package/build/esm/hooks/useControlledState.d.ts +2 -6
- package/build/esm/hooks/useControlledState.js +8 -7
- package/build/esm/hooks/useControlledState.js.map +1 -1
- package/build/esm/hooks/useFocusReturn.d.ts +0 -0
- package/build/esm/hooks/useFocusReturn.js +2 -2
- package/build/esm/hooks/useFocusReturn.js.map +1 -1
- package/build/esm/hooks/useFocusState.d.ts +5 -5
- package/build/esm/hooks/useFocusState.js +1 -1
- package/build/esm/hooks/useFocusState.js.map +1 -1
- package/build/esm/hooks/useGestureHandlers.d.ts +5 -5
- package/build/esm/hooks/useGestureHandlers.js +23 -15
- package/build/esm/hooks/useGestureHandlers.js.map +1 -1
- package/build/esm/hooks/useMeasure.d.ts +2 -2
- package/build/esm/hooks/useMeasure.js +0 -1
- package/build/esm/hooks/useMeasure.js.map +1 -1
- package/build/esm/hooks/useOnClickOutside.d.ts +2 -2
- package/build/esm/hooks/useOnClickOutside.js.map +1 -1
- package/build/esm/hooks/useOnKeyDown.d.ts +1 -1
- package/build/esm/hooks/useOnKeyDown.js +5 -5
- package/build/esm/hooks/useOnKeyDown.js.map +1 -1
- package/build/esm/hooks/useReducerMachine.d.ts +0 -0
- package/build/esm/hooks/useReducerMachine.js +2 -1
- package/build/esm/hooks/useReducerMachine.js.map +1 -1
- package/build/esm/hooks/useRemoveBodyScroll.d.ts +2 -1
- package/build/esm/hooks/useRemoveBodyScroll.js +12 -8
- package/build/esm/hooks/useRemoveBodyScroll.js.map +1 -1
- package/build/esm/hooks/useScope.d.ts +0 -0
- package/build/esm/hooks/useScope.js.map +1 -1
- package/build/esm/hooks/useThrottle.d.ts +0 -0
- package/build/esm/hooks/useThrottle.js.map +1 -1
- package/build/esm/index.d.ts +1 -0
- package/build/esm/index.js +1 -0
- package/build/esm/index.js.map +1 -1
- package/build/esm/utils/assign-ref.d.ts +3 -0
- package/build/esm/utils/{assignRef.js → assign-ref.js} +1 -1
- package/build/esm/utils/assign-ref.js.map +1 -0
- package/build/esm/utils/can-use-dom.d.ts +1 -0
- package/build/esm/utils/can-use-dom.js +4 -0
- package/build/esm/utils/can-use-dom.js.map +1 -0
- package/build/esm/utils/clamp.d.ts +0 -0
- package/build/esm/utils/clamp.js.map +1 -1
- package/build/esm/utils/context.d.ts +7 -0
- package/build/esm/utils/context.js +41 -0
- package/build/esm/utils/context.js.map +1 -0
- package/build/esm/utils/{createSubscription.d.ts → create-subscription.d.ts} +0 -0
- package/build/esm/utils/{createSubscription.js → create-subscription.js} +1 -1
- package/build/esm/utils/create-subscription.js.map +1 -0
- package/build/esm/utils/{getCircularIndex.d.ts → get-circular-index.d.ts} +0 -0
- package/build/esm/utils/{getCircularIndex.js → get-circular-index.js} +1 -1
- package/build/esm/utils/get-circular-index.js.map +1 -0
- package/build/esm/utils/index.d.ts +10 -4
- package/build/esm/utils/index.js +10 -4
- package/build/esm/utils/index.js.map +1 -1
- package/build/esm/utils/is-right-click.d.ts +6 -0
- package/build/esm/utils/is-right-click.js +9 -0
- package/build/esm/utils/is-right-click.js.map +1 -0
- package/build/esm/utils/owner-document.d.ts +7 -0
- package/build/esm/utils/owner-document.js +12 -0
- package/build/esm/utils/owner-document.js.map +1 -0
- package/build/esm/utils/polymorphic.d.ts +32 -0
- package/build/esm/utils/polymorphic.js +2 -0
- package/build/esm/utils/polymorphic.js.map +1 -0
- package/build/esm/utils/{rubberBandClamp.d.ts → rubber-band-clamp.d.ts} +0 -0
- package/build/esm/utils/{rubberBandClamp.js → rubber-band-clamp.js} +1 -1
- package/build/esm/utils/rubber-band-clamp.js.map +1 -0
- package/build/esm/utils/use-stable-callback.d.ts +16 -0
- package/build/esm/utils/use-stable-callback.js +43 -0
- package/build/esm/utils/use-stable-callback.js.map +1 -0
- package/build/esm/utils/wrap-event.d.ts +3 -0
- package/build/esm/utils/{wrapEvent.js → wrap-event.js} +1 -1
- package/build/esm/utils/wrap-event.js.map +1 -0
- package/build/tsconfig-build.tsbuildinfo +1 -0
- package/package.json +5 -6
- package/src/Accordion/Accordion.tsx +12 -6
- package/src/Accordion/AccordionBody.tsx +4 -5
- package/src/Accordion/AccordionHeader.tsx +30 -27
- package/src/Accordion/AccordionItem.tsx +12 -6
- package/src/Accordion/context.ts +3 -2
- package/src/CheckBox/CheckBox.tsx +5 -6
- package/src/ComboBox/ComboBox.story.tsx +3 -3
- package/src/ComboBox/Combobox.tsx +5 -8
- package/src/ComboBox/ComboboxButton.tsx +15 -9
- package/src/ComboBox/ComboboxInput.tsx +18 -10
- package/src/ComboBox/ComboboxLabel.tsx +4 -4
- package/src/ComboBox/ComboboxList.tsx +5 -6
- package/src/ComboBox/ComboboxOption.tsx +12 -8
- package/src/ComboBox/ComboboxPopover.tsx +15 -10
- package/src/ComboBox/context.ts +10 -9
- package/src/ComboBox/hooks.tsx +4 -3
- package/src/FocusLock/FocusLock.tsx +13 -7
- package/src/FocusLock/useFocusLock.ts +4 -3
- package/src/List/List.tsx +5 -5
- package/src/List/ListItem.tsx +5 -5
- package/src/Menu/Menu.story.tsx +2 -2
- package/src/Menu/Menu.tsx +13 -7
- package/src/Menu/MenuButton.tsx +13 -10
- package/src/Menu/MenuItem.tsx +15 -11
- package/src/Menu/MenuList.tsx +6 -6
- package/src/Menu/MenuPopover.tsx +4 -4
- package/src/Menu/context.ts +9 -4
- package/src/Modal/Modal.tsx +11 -7
- package/src/Modal/ModalBackdrop.tsx +16 -11
- package/src/Popper/Popper.tsx +7 -7
- package/src/Popper/PopperArrow.tsx +6 -8
- package/src/RadioButton/RadioButton.tsx +11 -6
- package/src/RadioButton/RadioGroup.tsx +11 -9
- package/src/RadioButton/context.ts +2 -4
- package/src/SkipNav/SkipNav.tsx +5 -5
- package/src/Slider/Slider.story.tsx +45 -0
- package/src/Slider/Slider.tsx +1106 -0
- package/src/Slider/index.ts +1 -0
- package/src/Slider/styles.css +131 -0
- package/src/Spinner/Spinner.tsx +13 -9
- package/src/Spinner/SpinnerButton.tsx +11 -6
- package/src/Spinner/context.ts +2 -3
- package/src/Tabs/Tab.tsx +13 -8
- package/src/Tabs/TabList.tsx +5 -5
- package/src/Tabs/TabPanel.tsx +5 -5
- package/src/Tabs/TabPanels.tsx +4 -4
- package/src/Tabs/Tabs.tsx +5 -7
- package/src/Tabs/context.ts +2 -3
- package/src/Tooltip/Tooltip.story.tsx +3 -3
- package/src/Tooltip/Tooltip.tsx +13 -7
- package/src/Tooltip/stateMachine.ts +9 -13
- package/src/Tooltip/useTooltip.ts +17 -11
- package/src/hooks/useAutoFocus.ts +2 -1
- package/src/hooks/useControlledState.ts +14 -14
- package/src/hooks/useFocusState.ts +4 -3
- package/src/hooks/useGestureHandlers.ts +33 -19
- package/src/hooks/useMeasure.ts +2 -2
- package/src/hooks/useOnClickOutside.ts +2 -2
- package/src/hooks/useOnKeyDown.ts +4 -3
- package/src/hooks/useRemoveBodyScroll.ts +18 -8
- package/src/index.ts +1 -0
- package/src/utils/{assignRef.ts → assign-ref.ts} +4 -4
- package/src/utils/can-use-dom.ts +7 -0
- package/src/utils/context.tsx +48 -0
- package/src/utils/{createSubscription.ts → create-subscription.ts} +0 -0
- package/src/utils/{getCircularIndex.ts → get-circular-index.ts} +0 -0
- package/src/utils/index.ts +10 -4
- package/src/utils/is-right-click.ts +14 -0
- package/src/utils/owner-document.ts +13 -0
- package/src/utils/polymorphic.ts +72 -0
- package/src/utils/{rubberBandClamp.ts → rubber-band-clamp.ts} +0 -0
- package/src/utils/use-stable-callback.ts +58 -0
- package/src/utils/wrap-event.ts +22 -0
- package/build/esm/hooks/useId.d.ts +0 -3
- package/build/esm/hooks/useId.js +0 -16
- package/build/esm/hooks/useId.js.map +0 -1
- package/build/esm/utils/assignRef.d.ts +0 -3
- package/build/esm/utils/assignRef.js.map +0 -1
- package/build/esm/utils/createSubscription.js.map +0 -1
- package/build/esm/utils/getCircularIndex.js.map +0 -1
- package/build/esm/utils/rubberBandClamp.js.map +0 -1
- package/build/esm/utils/wrapEvent.d.ts +0 -3
- package/build/esm/utils/wrapEvent.js.map +0 -1
- package/build/tsconfig.tsbuildinfo +0 -1
- package/src/utils/wrapEvent.ts +0 -20
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["placement", "strategy", "as", "innerAs", "anchorEl", "children", "modifiers", "usePortal", "style", "portalSelector", "distance", "skidding", "arrowPadding", "offsetFn"];
|
|
4
5
|
import { forwardRef, useRef, useEffect, useLayoutEffect, useMemo, memo } from 'react';
|
|
5
|
-
import * as React from 'react';
|
|
6
6
|
import { createPopper } from '@popperjs/core';
|
|
7
|
-
import { assignMultipleRefs } from '../utils/
|
|
7
|
+
import { assignMultipleRefs } from '../utils/assign-ref';
|
|
8
8
|
import { PopperProvider } from './context';
|
|
9
9
|
import { Portal } from '../Portal';
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -35,7 +35,7 @@ export var Popper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Popper(_
|
|
|
35
35
|
_ref$arrowPadding = _ref.arrowPadding,
|
|
36
36
|
arrowPadding = _ref$arrowPadding === void 0 ? 5 : _ref$arrowPadding,
|
|
37
37
|
offsetFn = _ref.offsetFn,
|
|
38
|
-
props = _objectWithoutProperties(_ref,
|
|
38
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
39
39
|
|
|
40
40
|
var arrowRef = useRef(null);
|
|
41
41
|
var popperRef = useRef(null);
|
|
@@ -51,7 +51,7 @@ export var Popper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Popper(_
|
|
|
51
51
|
var offsetModifier = {
|
|
52
52
|
name: 'offset',
|
|
53
53
|
options: {
|
|
54
|
-
offset: offsetFn
|
|
54
|
+
offset: offsetFn !== null && offsetFn !== void 0 ? offsetFn : [skidding, distance]
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
57
|
return [arrowModifier, offsetModifier];
|
|
@@ -73,7 +73,7 @@ export var Popper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Popper(_
|
|
|
73
73
|
useEnhancedEffect(function () {
|
|
74
74
|
var _popperEngineInstance;
|
|
75
75
|
|
|
76
|
-
(_popperEngineInstance = popperEngineInstance.current)
|
|
76
|
+
(_popperEngineInstance = popperEngineInstance.current) === null || _popperEngineInstance === void 0 ? void 0 : _popperEngineInstance.forceUpdate();
|
|
77
77
|
}, [props.hidden || props['aria-hidden']]);
|
|
78
78
|
var contextValue = {
|
|
79
79
|
arrowRef: arrowRef
|
|
@@ -81,7 +81,7 @@ export var Popper = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Popper(_
|
|
|
81
81
|
|
|
82
82
|
var ret = /*#__PURE__*/_jsx(PopperProvider, {
|
|
83
83
|
value: contextValue,
|
|
84
|
-
children: /*#__PURE__*/_jsx(Comp, _extends({}, props, {
|
|
84
|
+
children: /*#__PURE__*/_jsx(Comp, _extends(_extends({}, props), {}, {
|
|
85
85
|
as: innerAs,
|
|
86
86
|
ref: assignMultipleRefs(popperRef, forwardedRef),
|
|
87
87
|
style: _extends({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Popper.js","names":["forwardRef","useRef","useEffect","useLayoutEffect","useMemo","memo","createPopper","assignMultipleRefs","PopperProvider","Portal","useEnhancedEffect","window","emptyModifiers","Popper","forwardedRef","placement","strategy","as","Comp","innerAs","anchorEl","children","modifiers","usePortal","style","portalSelector","distance","skidding","arrowPadding","offsetFn","props","arrowRef","popperRef","popperEngineInstance","defaultModifiers","arrowModifier","name","options","element","padding","offsetModifier","offset","current","destroy","forceUpdate","hidden","contextValue","ret","position","left","top"],"sources":["../../../src/Popper/Popper.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, RefObject, ReactNode } from 'react';\nimport {\n forwardRef,\n useRef,\n useEffect,\n useLayoutEffect,\n useMemo,\n memo,\n} from 'react';\nimport type {\n Placement,\n Modifier,\n PositioningStrategy,\n Instance,\n Rect,\n} from '@popperjs/core';\nimport { createPopper } from '@popperjs/core';\nimport type { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\nimport type { ArrowModifier } from '@popperjs/core/lib/modifiers/arrow';\n\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport type { PopperContextProps } from './context';\nimport { PopperProvider } from './context';\nimport { Portal } from '../Portal';\n\nconst useEnhancedEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport type OffsetsFunction = (arg0: {\n popper: Rect;\n reference: Rect;\n placement: Placement;\n}) => [number | null | undefined, number | null | undefined];\n\nexport interface PopperProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n anchorEl: RefObject<HTMLElement>;\n children?: ReactNode;\n placement?: Placement;\n strategy?: PositioningStrategy;\n modifiers?: Array<Partial<Modifier<any, any>>>;\n usePortal?: boolean;\n portalSelector?: string;\n /**\n * Displaces the popper along the reference element.\n */\n skidding?: number;\n /**\n * Displaces the popper away from, or toward, the reference element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the reference.\n */\n distance?: number;\n /**\n * An optional function that must return a pair of [skidding, padding]. Useful for doing things like, displace the popper by 100%.\n */\n offsetFn?: OffsetsFunction;\n /**\n * If you don't want the arrow to reach the very edge of the popper (this is common if your popper has rounded corners using border-radius), you can apply some padding to it.\n */\n arrowPadding?: number;\n}\n\nconst emptyModifiers: Array<Partial<Modifier<any, any>>> = [];\nexport const Popper = memo(\n forwardRef<HTMLDivElement, PopperProps>(function Popper(\n {\n placement = 'bottom',\n strategy = 'absolute',\n as: Comp = 'div',\n innerAs,\n anchorEl,\n children,\n modifiers = emptyModifiers,\n usePortal = false,\n style = {},\n portalSelector = 'body',\n distance = 0,\n skidding = 0,\n arrowPadding = 5,\n offsetFn,\n ...props\n },\n forwardedRef\n ) {\n const arrowRef = useRef<HTMLSpanElement>(null);\n\n const popperRef = useRef<HTMLDivElement | null>(null);\n const popperEngineInstance = useRef<null | Instance>(null);\n\n const defaultModifiers: Array<Partial<Modifier<any, any>>> = useMemo(() => {\n const arrowModifier: Omit<ArrowModifier, 'enabled' | 'fn' | 'phase'> = {\n name: 'arrow',\n options: {\n element: '[data-popper-arrow]',\n padding: arrowPadding,\n },\n };\n const offsetModifier: Omit<OffsetModifier, 'enabled' | 'fn' | 'phase'> = {\n name: 'offset',\n options: {\n offset: offsetFn ?? [skidding, distance],\n },\n };\n\n return [arrowModifier, offsetModifier];\n }, [arrowPadding, distance, skidding, offsetFn]);\n\n useEnhancedEffect(() => {\n if (anchorEl && anchorEl.current && popperRef.current) {\n popperEngineInstance.current = createPopper(\n anchorEl.current,\n popperRef.current,\n {\n placement,\n strategy,\n modifiers: [...defaultModifiers, ...modifiers],\n }\n );\n }\n\n return () => {\n popperEngineInstance.current && popperEngineInstance.current.destroy();\n popperEngineInstance.current = null;\n };\n }, [anchorEl, modifiers, placement, strategy, defaultModifiers]);\n\n useEnhancedEffect(() => {\n popperEngineInstance.current?.forceUpdate();\n }, [props.hidden || props['aria-hidden']]);\n\n const contextValue: PopperContextProps = {\n arrowRef,\n };\n\n const ret = (\n <PopperProvider value={contextValue}>\n <Comp\n {...props}\n as={innerAs}\n ref={assignMultipleRefs(popperRef, forwardedRef)}\n style={{ position: 'fixed', left: -5000, top: -5000, ...style }}\n >\n {children}\n </Comp>\n </PopperProvider>\n );\n\n if (usePortal) {\n return <Portal selector={portalSelector}>{ret}</Portal>;\n }\n\n return ret;\n })\n);\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
export interface PopperArrowProps extends
|
|
3
|
-
as?:
|
|
4
|
-
innerAs?:
|
|
1
|
+
import type { ElementType, HTMLAttributes } from 'react';
|
|
2
|
+
export interface PopperArrowProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
as?: ElementType<any>;
|
|
4
|
+
innerAs?: ElementType<any>;
|
|
5
5
|
}
|
|
6
|
-
export declare const PopperArrow:
|
|
6
|
+
export declare const PopperArrow: import("react").ForwardRefExoticComponent<PopperArrowProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["as"];
|
|
3
4
|
import { forwardRef } from 'react';
|
|
4
|
-
import * as React from 'react';
|
|
5
5
|
import { usePopperContext } from './context';
|
|
6
|
-
import {
|
|
6
|
+
import { assignMultipleRefs } from '../utils/assign-ref';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
export var PopperArrow = /*#__PURE__*/forwardRef(function PopperArrow(_ref, _ref2) {
|
|
9
9
|
var _ref$as = _ref.as,
|
|
10
10
|
Comp = _ref$as === void 0 ? 'div' : _ref$as,
|
|
11
|
-
props = _objectWithoutProperties(_ref,
|
|
11
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
12
12
|
|
|
13
13
|
var ctx = usePopperContext();
|
|
14
14
|
|
|
@@ -16,14 +16,13 @@ export var PopperArrow = /*#__PURE__*/forwardRef(function PopperArrow(_ref, _ref
|
|
|
16
16
|
return null;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
return /*#__PURE__*/_jsx(Comp, _extends({}, props, {
|
|
19
|
+
return /*#__PURE__*/_jsx(Comp, _extends(_extends({}, props), {}, {
|
|
20
20
|
ref: function ref(node) {
|
|
21
21
|
if (node && ctx.arrowRef.current && ctx.arrowRef.current !== node) {
|
|
22
22
|
throw new Error('You can only render one <PopperArrow /> per <Popper> component');
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
assignRef(ctx.arrowRef, node);
|
|
25
|
+
assignMultipleRefs(_ref2, ctx.arrowRef)(node);
|
|
27
26
|
},
|
|
28
27
|
"data-popper-arrow": ""
|
|
29
28
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"PopperArrow.js","names":["forwardRef","usePopperContext","assignMultipleRefs","PopperArrow","ref","as","Comp","props","ctx","node","arrowRef","current","Error"],"sources":["../../../src/Popper/PopperArrow.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { usePopperContext } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\n\nexport interface PopperArrowProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n}\n\nexport const PopperArrow = forwardRef<HTMLDivElement, PopperArrowProps>(\n function PopperArrow({ as: Comp = 'div', ...props }, ref) {\n const ctx = usePopperContext();\n\n if (ctx === null) {\n return null;\n }\n\n return (\n <Comp\n {...props}\n ref={(node: HTMLDivElement | null) => {\n if (node && ctx.arrowRef.current && ctx.arrowRef.current !== node) {\n throw new Error(\n 'You can only render one <PopperArrow /> per <Popper> component'\n );\n }\n assignMultipleRefs(ref, ctx.arrowRef)(node);\n }}\n data-popper-arrow=\"\"\n />\n );\n }\n);\n"],"mappings":";;;AACA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,gBAAT,QAAiC,WAAjC;AACA,SAASC,kBAAT,QAAmC,qBAAnC;;AAOA,OAAO,IAAMC,WAAW,gBAAGH,UAAU,CACnC,SAASG,WAAT,OAAqDC,KAArD,EAA0D;EAAA,mBAAnCC,EAAmC;EAAA,IAA/BC,IAA+B,wBAAxB,KAAwB;EAAA,IAAdC,KAAc;;EACxD,IAAMC,GAAG,GAAGP,gBAAgB,EAA5B;;EAEA,IAAIO,GAAG,KAAK,IAAZ,EAAkB;IAChB,OAAO,IAAP;EACD;;EAED,oBACE,KAAC,IAAD,wBACMD,KADN;IAEE,GAAG,EAAE,aAACE,IAAD,EAAiC;MACpC,IAAIA,IAAI,IAAID,GAAG,CAACE,QAAJ,CAAaC,OAArB,IAAgCH,GAAG,CAACE,QAAJ,CAAaC,OAAb,KAAyBF,IAA7D,EAAmE;QACjE,MAAM,IAAIG,KAAJ,CACJ,gEADI,CAAN;MAGD;;MACDV,kBAAkB,CAACE,KAAD,EAAMI,GAAG,CAACE,QAAV,CAAlB,CAAsCD,IAAtC;IACD,CATH;IAUE,qBAAkB;EAVpB,GADF;AAcD,CAtBkC,CAA9B"}
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"context.js","names":["createContext","useContext","context","PopperProvider","Provider","usePopperContext"],"sources":["../../../src/Popper/context.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface PopperContextProps {\n arrowRef: MutableRefObject<HTMLSpanElement | null>;\n}\n\nconst context = createContext<PopperContextProps | null>(null);\nexport const PopperProvider = context.Provider;\nexport const usePopperContext = () => useContext(context);\n"],"mappings":"AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAMA,IAAMC,OAAO,gBAAGF,aAAa,CAA4B,IAA5B,CAA7B;AACA,OAAO,IAAMG,cAAc,GAAGD,OAAO,CAACE,QAA/B;AACP,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;EAAA,OAAMJ,UAAU,CAACC,OAAD,CAAhB;AAAA,CAAzB"}
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/Popper/index.ts"],"sourcesContent":["export * from './Popper';\nexport * from './PopperArrow';\nexport * from './context';\n"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,eAAd;AACA,cAAc,WAAd"}
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Portal.js","names":["createPortal","Portal","children","selector","window","dom","document","querySelector"],"sources":["../../../src/Portal/Portal.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n children?: ReactNode;\n selector?: string;\n}\n\nexport const Portal: FC<PortalProps> = ({ children, selector = 'body' }) => {\n if (typeof window === 'undefined') {\n return null;\n }\n\n const dom = document.querySelector(selector);\n if (dom) {\n return createPortal(<div data-portal=\"\">{children}</div>, dom);\n }\n\n return null;\n};\n"],"mappings":"AACA,SAASA,YAAT,QAA6B,WAA7B;;AAOA,OAAO,IAAMC,MAAuB,GAAG,SAA1BA,MAA0B,OAAqC;EAAA,IAAlCC,QAAkC,QAAlCA,QAAkC;EAAA,yBAAxBC,QAAwB;EAAA,IAAxBA,QAAwB,8BAAb,MAAa;;EAC1E,IAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;IACjC,OAAO,IAAP;EACD;;EAED,IAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAT,CAAuBJ,QAAvB,CAAZ;;EACA,IAAIE,GAAJ,EAAS;IACP,oBAAOL,YAAY,eAAC;MAAK,eAAY,EAAjB;MAAA,UAAqBE;IAArB,EAAD,EAAuCG,GAAvC,CAAnB;EACD;;EAED,OAAO,IAAP;AACD,CAXM"}
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/Portal/index.ts"],"sourcesContent":["export * from './Portal';\n"],"mappings":"AAAA,cAAc,UAAd"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { ElementType, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import type { RadioValue } from './context';
|
|
3
|
-
export interface RadioButtonProps extends Omit<
|
|
4
|
-
as?:
|
|
5
|
-
innerAs?:
|
|
6
|
-
children?:
|
|
3
|
+
export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
|
|
4
|
+
as?: ElementType<any>;
|
|
5
|
+
innerAs?: ElementType<any>;
|
|
6
|
+
children?: ReactNode;
|
|
7
7
|
checked?: boolean;
|
|
8
8
|
value: RadioValue;
|
|
9
9
|
}
|
|
10
|
-
export declare const RadioButton:
|
|
10
|
+
export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioButtonProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["as", "value", "onChange", "checked", "name"];
|
|
3
4
|
import { forwardRef } from 'react';
|
|
4
|
-
import * as React from 'react';
|
|
5
5
|
import { useRadioGroupContext } from './context';
|
|
6
6
|
import { wrapEvent } from '../utils';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -12,12 +12,14 @@ export var RadioButton = /*#__PURE__*/forwardRef(function RadioButton(props, for
|
|
|
12
12
|
onChangeProp = props.onChange,
|
|
13
13
|
checkedProp = props.checked,
|
|
14
14
|
nameProp = props.name,
|
|
15
|
-
otherProps = _objectWithoutProperties(props,
|
|
15
|
+
otherProps = _objectWithoutProperties(props, _excluded);
|
|
16
16
|
|
|
17
17
|
var radioGroupContext = useRadioGroupContext();
|
|
18
18
|
|
|
19
19
|
var handleChange = function handleChange(e) {
|
|
20
|
-
|
|
20
|
+
var _radioGroupContext$on;
|
|
21
|
+
|
|
22
|
+
radioGroupContext === null || radioGroupContext === void 0 ? void 0 : (_radioGroupContext$on = radioGroupContext.onChange) === null || _radioGroupContext$on === void 0 ? void 0 : _radioGroupContext$on.call(radioGroupContext, e, valueProp);
|
|
21
23
|
};
|
|
22
24
|
|
|
23
25
|
var checked = radioGroupContext ? radioGroupContext.value === valueProp : checkedProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["forwardRef","useRadioGroupContext","wrapEvent","RadioButton","props","forwardedRef","as","Comp","valueProp","value","onChangeProp","onChange","checkedProp","checked","nameProp","name","otherProps","radioGroupContext","handleChange","e","String"],"sources":["../../../src/RadioButton/RadioButton.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n ElementType,\n InputHTMLAttributes,\n ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\n\nimport type { RadioValue } from './context';\nimport { useRadioGroupContext } from './context';\nimport { wrapEvent } from '../utils';\n\nexport interface RadioButtonProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n children?: ReactNode;\n checked?: boolean;\n value: RadioValue;\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n function RadioButton(props, forwardedRef) {\n const {\n as: Comp = 'input',\n value: valueProp,\n onChange: onChangeProp,\n checked: checkedProp,\n name: nameProp,\n ...otherProps\n } = props;\n const radioGroupContext = useRadioGroupContext();\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n radioGroupContext?.onChange?.(e, valueProp);\n };\n\n const checked = radioGroupContext\n ? radioGroupContext.value === valueProp\n : checkedProp;\n\n return (\n <Comp\n ref={forwardedRef}\n type=\"radio\"\n checked={checked}\n aria-checked={String(checked)}\n name={radioGroupContext ? radioGroupContext.name : nameProp}\n onChange={wrapEvent(onChangeProp, handleChange)}\n value={valueProp}\n {...otherProps}\n />\n );\n }\n);\n"],"mappings":";;;AAMA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,oBAAT,QAAqC,WAArC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,IAAMC,WAAW,gBAAGH,UAAU,CACnC,SAASG,WAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA0C;EACxC,gBAOID,KAPJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,OADb;EAAA,IAESC,SAFT,GAOIJ,KAPJ,CAEEK,KAFF;EAAA,IAGYC,YAHZ,GAOIN,KAPJ,CAGEO,QAHF;EAAA,IAIWC,WAJX,GAOIR,KAPJ,CAIES,OAJF;EAAA,IAKQC,QALR,GAOIV,KAPJ,CAKEW,IALF;EAAA,IAMKC,UANL,4BAOIZ,KAPJ;;EAQA,IAAMa,iBAAiB,GAAGhB,oBAAoB,EAA9C;;EAEA,IAAMiB,YAAY,GAAG,SAAfA,YAAe,CAACC,CAAD,EAAsC;IAAA;;IACzDF,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,qCAAAA,iBAAiB,CAAEN,QAAnB,qFAAAM,iBAAiB,EAAaE,CAAb,EAAgBX,SAAhB,CAAjB;EACD,CAFD;;EAIA,IAAMK,OAAO,GAAGI,iBAAiB,GAC7BA,iBAAiB,CAACR,KAAlB,KAA4BD,SADC,GAE7BI,WAFJ;EAIA,oBACE,KAAC,IAAD;IACE,GAAG,EAAEP,YADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAEQ,OAHX;IAIE,gBAAcO,MAAM,CAACP,OAAD,CAJtB;IAKE,IAAI,EAAEI,iBAAiB,GAAGA,iBAAiB,CAACF,IAArB,GAA4BD,QALrD;IAME,QAAQ,EAAEZ,SAAS,CAACQ,YAAD,EAAeQ,YAAf,CANrB;IAOE,KAAK,EAAEV;EAPT,GAQMQ,UARN,EADF;AAYD,CAhCkC,CAA9B"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { ChangeEvent, ElementType, HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import type { RadioValue } from './context';
|
|
3
|
-
export interface RadioGroupProps extends Omit<
|
|
4
|
-
as?:
|
|
5
|
-
innerAs?:
|
|
6
|
-
children?:
|
|
3
|
+
export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value' | 'defaultValue'> {
|
|
4
|
+
as?: ElementType<any>;
|
|
5
|
+
innerAs?: ElementType<any>;
|
|
6
|
+
children?: ReactNode;
|
|
7
7
|
value?: RadioValue;
|
|
8
8
|
defaultValue?: RadioValue;
|
|
9
9
|
name?: string;
|
|
10
|
-
onChange?: (e:
|
|
10
|
+
onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
|
|
11
11
|
}
|
|
12
|
-
export declare const RadioGroup:
|
|
12
|
+
export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["as", "onChange", "value", "name", "defaultValue"];
|
|
4
5
|
import { forwardRef, useId } from 'react';
|
|
5
|
-
import * as React from 'react';
|
|
6
6
|
import { RadioGroupProvider } from './context';
|
|
7
7
|
import { useControlledState } from '../hooks';
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -13,7 +13,7 @@ export var RadioGroup = /*#__PURE__*/forwardRef(function RadioGroup(props, forwa
|
|
|
13
13
|
valueProp = props.value,
|
|
14
14
|
nameProp = props.name,
|
|
15
15
|
defaultValue = props.defaultValue,
|
|
16
|
-
otherProps = _objectWithoutProperties(props,
|
|
16
|
+
otherProps = _objectWithoutProperties(props, _excluded);
|
|
17
17
|
|
|
18
18
|
var _useControlledState = useControlledState(valueProp, onChangeProp, defaultValue, function (setValue) {
|
|
19
19
|
return function (e, value) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","names":["forwardRef","useId","RadioGroupProvider","useControlledState","RadioGroup","props","forwardedRef","as","Comp","onChangeProp","onChange","valueProp","value","nameProp","name","defaultValue","otherProps","setValue","e","fallbackId"],"sources":["../../../src/RadioButton/RadioGroup.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n ElementType,\n HTMLAttributes,\n ReactNode,\n} from 'react';\nimport { forwardRef, useId } from 'react';\n\nimport type { RadioValue } from './context';\nimport { RadioGroupProvider } from './context';\nimport { useControlledState } from '../hooks';\n\nexport interface RadioGroupProps\n extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'onChange' | 'value' | 'defaultValue'\n > {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n children?: ReactNode;\n value?: RadioValue;\n defaultValue?: RadioValue;\n name?: string;\n onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;\n}\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n function RadioGroup(props, forwardedRef) {\n const {\n as: Comp = 'div',\n onChange: onChangeProp,\n value: valueProp,\n name: nameProp,\n defaultValue,\n ...otherProps\n } = props;\n const [value, onChange] = useControlledState(\n valueProp,\n onChangeProp,\n defaultValue,\n (setValue) => (e, value) => {\n setValue(value);\n }\n );\n\n const fallbackId = useId();\n\n return (\n <RadioGroupProvider\n value={{\n value,\n onChange,\n name: nameProp || fallbackId,\n }}\n >\n <Comp ref={forwardedRef} role=\"radiogroup\" {...otherProps} />\n </RadioGroupProvider>\n );\n }\n);\n"],"mappings":";;;;AAMA,SAASA,UAAT,EAAqBC,KAArB,QAAkC,OAAlC;AAGA,SAASC,kBAAT,QAAmC,WAAnC;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAgBA,OAAO,IAAMC,UAAU,gBAAGJ,UAAU,CAClC,SAASI,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;EACvC,gBAOID,KAPJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,KADb;EAAA,IAEYC,YAFZ,GAOIJ,KAPJ,CAEEK,QAFF;EAAA,IAGSC,SAHT,GAOIN,KAPJ,CAGEO,KAHF;EAAA,IAIQC,QAJR,GAOIR,KAPJ,CAIES,IAJF;EAAA,IAKEC,YALF,GAOIV,KAPJ,CAKEU,YALF;EAAA,IAMKC,UANL,4BAOIX,KAPJ;;EAQA,0BAA0BF,kBAAkB,CAC1CQ,SAD0C,EAE1CF,YAF0C,EAG1CM,YAH0C,EAI1C,UAACE,QAAD;IAAA,OAAc,UAACC,CAAD,EAAIN,KAAJ,EAAc;MAC1BK,QAAQ,CAACL,KAAD,CAAR;IACD,CAFD;EAAA,CAJ0C,CAA5C;EAAA;EAAA,IAAOA,KAAP;EAAA,IAAcF,QAAd;;EASA,IAAMS,UAAU,GAAGlB,KAAK,EAAxB;EAEA,oBACE,KAAC,kBAAD;IACE,KAAK,EAAE;MACLW,KAAK,EAALA,KADK;MAELF,QAAQ,EAARA,QAFK;MAGLI,IAAI,EAAED,QAAQ,IAAIM;IAHb,CADT;IAAA,uBAOE,KAAC,IAAD;MAAM,GAAG,EAAEb,YAAX;MAAyB,IAAI,EAAC;IAA9B,GAA+CU,UAA/C;EAPF,EADF;AAWD,CAhCiC,CAA7B"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import type { ChangeEvent } from 'react';
|
|
2
2
|
export declare type RadioValue = string | number | boolean;
|
|
3
3
|
export interface RadioGroupContextProps {
|
|
4
4
|
value: RadioValue | undefined;
|
|
5
|
-
onChange?: (e:
|
|
5
|
+
onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
|
|
6
6
|
name: string | undefined;
|
|
7
7
|
}
|
|
8
8
|
export declare const RadioGroupProvider: import("react").Provider<RadioGroupContextProps | undefined>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"context.js","names":["createContext","useContext","RadioGroupContext","undefined","RadioGroupProvider","Provider","useRadioGroupContext"],"sources":["../../../src/RadioButton/context.ts"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport type RadioValue = string | number | boolean;\n\n// RadioGroup Component\nexport interface RadioGroupContextProps {\n value: RadioValue | undefined;\n onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;\n name: string | undefined;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextProps | undefined>(\n undefined\n);\nexport const { Provider: RadioGroupProvider } = RadioGroupContext;\nexport const useRadioGroupContext = () => useContext(RadioGroupContext);\n"],"mappings":"AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAWA,IAAMC,iBAAiB,gBAAGF,aAAa,CACrCG,SADqC,CAAvC;AAGO,IAAkBC,kBAAlB,GAAyCF,iBAAzC,CAAQG,QAAR;;AACP,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB;EAAA,OAAML,UAAU,CAACC,iBAAD,CAAhB;AAAA,CAA7B"}
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/RadioButton/index.ts"],"sourcesContent":["export * from './RadioButton';\nexport * from './RadioGroup';\n"],"mappings":"AAAA,cAAc,eAAd;AACA,cAAc,cAAd"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
export interface SkipNavProps extends
|
|
3
|
-
as?:
|
|
4
|
-
innerAs?:
|
|
5
|
-
children?:
|
|
1
|
+
import type { ElementType, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
as?: ElementType<any>;
|
|
4
|
+
innerAs?: ElementType<any>;
|
|
5
|
+
children?: ReactNode;
|
|
6
6
|
}
|
|
7
|
-
export declare const SkipNav:
|
|
7
|
+
export declare const SkipNav: import("react").ForwardRefExoticComponent<SkipNavProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["as"];
|
|
3
4
|
import { forwardRef } from 'react';
|
|
4
|
-
import * as React from 'react';
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
export var SkipNav = /*#__PURE__*/forwardRef(function SkipNav(props, forwardedRef) {
|
|
7
7
|
var _props$as = props.as,
|
|
8
8
|
Comp = _props$as === void 0 ? 'div' : _props$as,
|
|
9
|
-
otherProps = _objectWithoutProperties(props,
|
|
9
|
+
otherProps = _objectWithoutProperties(props, _excluded);
|
|
10
10
|
|
|
11
11
|
return /*#__PURE__*/_jsx(Comp, _extends({
|
|
12
12
|
ref: forwardedRef
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"SkipNav.js","names":["forwardRef","SkipNav","props","forwardedRef","as","Comp","otherProps"],"sources":["../../../src/SkipNav/SkipNav.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nexport interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType<any>;\n innerAs?: ElementType<any>;\n children?: ReactNode;\n}\n\nexport const SkipNav = forwardRef<HTMLDivElement, SkipNavProps>(\n function SkipNav(props, forwardedRef) {\n const { as: Comp = 'div', ...otherProps } = props;\n\n return <Comp ref={forwardedRef} {...otherProps} />;\n }\n);\n"],"mappings":";;;AACA,SAASA,UAAT,QAA2B,OAA3B;;AAQA,OAAO,IAAMC,OAAO,gBAAGD,UAAU,CAC/B,SAASC,OAAT,CAAiBC,KAAjB,EAAwBC,YAAxB,EAAsC;EACpC,gBAA4CD,KAA5C,CAAQE,EAAR;EAAA,IAAYC,IAAZ,0BAAmB,KAAnB;EAAA,IAA6BC,UAA7B,4BAA4CJ,KAA5C;;EAEA,oBAAO,KAAC,IAAD;IAAM,GAAG,EAAEC;EAAX,GAA6BG,UAA7B,EAAP;AACD,CAL8B,CAA1B"}
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/SkipNav/index.tsx"],"sourcesContent":["export * from './SkipNav';\n"],"mappings":"AAAA,cAAc,WAAd"}
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Welcome to @reach/slider!
|
|
3
|
+
*
|
|
4
|
+
* A UI input component where the user selects a value from within a given
|
|
5
|
+
* range. A Slider has a handle that can be moved along a track to change its
|
|
6
|
+
* value. When the user's mouse or focus is on the Slider's handle, the value
|
|
7
|
+
* can be incremented with keyboard controls.
|
|
8
|
+
*
|
|
9
|
+
* Random thoughts/notes:
|
|
10
|
+
* - Currently testing this against the behavior of the native input range
|
|
11
|
+
* element to get our slider on par. We'll explore animated and multi-handle
|
|
12
|
+
* sliders next.
|
|
13
|
+
* - We may want to research some use cases for reversed sliders in RTL
|
|
14
|
+
* languages if that's a thing
|
|
15
|
+
*
|
|
16
|
+
* @see Docs https://reach.tech/slider
|
|
17
|
+
* @see Source https://github.com/reach/reach-ui/tree/main/packages/slider
|
|
18
|
+
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#slider
|
|
19
|
+
* @see Example https://github.com/Stanko/aria-progress-range-slider
|
|
20
|
+
* @see Example http://www.oaa-accessibility.org/examplep/slider1/
|
|
21
|
+
*/
|
|
22
|
+
import type { ReactNode, KeyboardEvent } from 'react';
|
|
23
|
+
import type * as Polymorphic from '../utils/polymorphic';
|
|
24
|
+
declare type SliderOrientation = 'horizontal' | 'vertical';
|
|
25
|
+
declare type SliderHandleAlignment = 'center' | 'contain';
|
|
26
|
+
/**
|
|
27
|
+
* Slider
|
|
28
|
+
*
|
|
29
|
+
* @see Docs https://reach.tech/slider#slider
|
|
30
|
+
*/
|
|
31
|
+
declare const Slider: Polymorphic.ForwardRefComponent<"div", SliderProps>;
|
|
32
|
+
/**
|
|
33
|
+
* @see Docs https://reach.tech/slider#slider-props
|
|
34
|
+
*/
|
|
35
|
+
interface SliderProps {
|
|
36
|
+
/**
|
|
37
|
+
* `Slider` can accept `SliderMarker` children to enhance display of specific
|
|
38
|
+
* values along the track.
|
|
39
|
+
*
|
|
40
|
+
* @see Docs https://reach.tech/slider#slider-children
|
|
41
|
+
*/
|
|
42
|
+
children?: ReactNode;
|
|
43
|
+
/**
|
|
44
|
+
* The defaultValue is used to set an initial value for an uncontrolled
|
|
45
|
+
* Slider.
|
|
46
|
+
*
|
|
47
|
+
* @see Docs https://reach.tech/slider#slider-defaultvalue
|
|
48
|
+
*/
|
|
49
|
+
defaultValue?: number;
|
|
50
|
+
/**
|
|
51
|
+
* @see Docs https://reach.tech/slider#slider-disabled
|
|
52
|
+
*/
|
|
53
|
+
disabled?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Whether or not the slider should be disabled from user interaction.
|
|
56
|
+
*
|
|
57
|
+
* @see Docs https://reach.tech/slider#slider-value
|
|
58
|
+
*/
|
|
59
|
+
value?: number;
|
|
60
|
+
/**
|
|
61
|
+
* A function used to set a human-readable name for the slider.
|
|
62
|
+
*
|
|
63
|
+
* @see Docs https://reach.tech/slider#slider-getarialabel
|
|
64
|
+
*/
|
|
65
|
+
getAriaLabel?(value: number): string;
|
|
66
|
+
/**
|
|
67
|
+
* A function used to set a human-readable value text based on the slider's
|
|
68
|
+
* current value.
|
|
69
|
+
*
|
|
70
|
+
* @see Docs https://reach.tech/slider#slider-getariavaluetext
|
|
71
|
+
*/
|
|
72
|
+
getAriaValueText?(value: number): string;
|
|
73
|
+
/**
|
|
74
|
+
* When set to `center`, the slider's handle will be positioned directly
|
|
75
|
+
* centered over the slider's curremt value on the track. This means that when
|
|
76
|
+
* the slider is at its min or max value, a visiable slider handle will extend
|
|
77
|
+
* beyond the width (or height in vertical mode) of the slider track. When set
|
|
78
|
+
* to `contain`, the slider handle will always be contained within the bounds
|
|
79
|
+
* of the track, meaning its position will be slightly offset from the actual
|
|
80
|
+
* value depending on where it sits on the track.
|
|
81
|
+
*
|
|
82
|
+
* @see Docs https://reach.tech/slider#slider-handlealignment
|
|
83
|
+
*/
|
|
84
|
+
handleAlignment?: SliderHandleAlignment;
|
|
85
|
+
/**
|
|
86
|
+
* The maximum value of the slider. Defaults to `100`.
|
|
87
|
+
*
|
|
88
|
+
* @see Docs https://reach.tech/slider#slider-max
|
|
89
|
+
*/
|
|
90
|
+
max?: number;
|
|
91
|
+
/**
|
|
92
|
+
* The minimum value of the slider. Defaults to `0`.
|
|
93
|
+
*
|
|
94
|
+
* @see Docs https://reach.tech/slider#slider-min
|
|
95
|
+
*/
|
|
96
|
+
min?: number;
|
|
97
|
+
/**
|
|
98
|
+
* If the slider is used as a form input, it should accept a `name` prop to
|
|
99
|
+
* identify its value in context of the form.
|
|
100
|
+
*
|
|
101
|
+
* @see Docs https://reach.tech/slider#slider-name
|
|
102
|
+
*/
|
|
103
|
+
name?: string;
|
|
104
|
+
/**
|
|
105
|
+
* Callback that fires when the slider value changes. When the `value` prop is
|
|
106
|
+
* set, the Slider state becomes controlled and `onChange` must be used to
|
|
107
|
+
* update the value in response to user interaction.
|
|
108
|
+
*
|
|
109
|
+
* @see Docs https://reach.tech/slider#slider-onchange
|
|
110
|
+
*/
|
|
111
|
+
onChange?(e: SomePointerEvent | KeyboardEvent, newValue: number, props?: {
|
|
112
|
+
min?: number;
|
|
113
|
+
max?: number;
|
|
114
|
+
handlePosition?: string;
|
|
115
|
+
}): void;
|
|
116
|
+
onMouseDown?(event: MouseEvent): void;
|
|
117
|
+
onMouseMove?(event: MouseEvent): void;
|
|
118
|
+
onMouseUp?(event: MouseEvent): void;
|
|
119
|
+
onPointerDown?(event: PointerEvent): void;
|
|
120
|
+
onPointerUp?(event: PointerEvent): void;
|
|
121
|
+
onTouchEnd?(event: TouchEvent): void;
|
|
122
|
+
onTouchMove?(event: TouchEvent): void;
|
|
123
|
+
onTouchStart?(event: TouchEvent): void;
|
|
124
|
+
/**
|
|
125
|
+
* Sets the slider to horizontal or vertical mode.
|
|
126
|
+
*
|
|
127
|
+
* @see Docs https://reach.tech/slider#slider-orientation
|
|
128
|
+
*/
|
|
129
|
+
orientation?: SliderOrientation;
|
|
130
|
+
/**
|
|
131
|
+
* The step attribute is a number that specifies the granularity that the
|
|
132
|
+
* value must adhere to as it changes. Step sets minimum intervals of change,
|
|
133
|
+
* creating a "snap" effect when the handle is moved along the track.
|
|
134
|
+
*
|
|
135
|
+
* @see Docs https://reach.tech/slider#slider-step
|
|
136
|
+
*/
|
|
137
|
+
step?: number;
|
|
138
|
+
}
|
|
139
|
+
/**
|
|
140
|
+
* SliderInput
|
|
141
|
+
*
|
|
142
|
+
* The parent component of the slider interface. This is a lower level component
|
|
143
|
+
* if you need more control over styles or rendering the slider's inner
|
|
144
|
+
* components.
|
|
145
|
+
*
|
|
146
|
+
* @see Docs https://reach.tech/slider#sliderinput
|
|
147
|
+
*/
|
|
148
|
+
declare const SliderInput: Polymorphic.ForwardRefComponent<"div", SliderInputProps>;
|
|
149
|
+
/**
|
|
150
|
+
* @see Docs https://reach.tech/slider#sliderinput-props
|
|
151
|
+
*/
|
|
152
|
+
declare type SliderInputProps = Omit<SliderProps, 'children'> & {
|
|
153
|
+
/**
|
|
154
|
+
* Slider expects `<SliderTrack>` as its child; The track will accept all
|
|
155
|
+
* additional slider sub-components as children. It can also accept a
|
|
156
|
+
* function/render prop as its child to expose some of its internal state
|
|
157
|
+
* variables.
|
|
158
|
+
*
|
|
159
|
+
* @see Docs https://reach.tech/slider#sliderinput-children
|
|
160
|
+
*/
|
|
161
|
+
children: ReactNode | SliderChildrenRender;
|
|
162
|
+
};
|
|
163
|
+
declare const SliderTrack: Polymorphic.MemoComponent<"div", SliderTrackProps>;
|
|
164
|
+
/**
|
|
165
|
+
* @see Docs https://reach.tech/slider#slidertrack-props
|
|
166
|
+
*/
|
|
167
|
+
interface SliderTrackProps {
|
|
168
|
+
/**
|
|
169
|
+
* `SliderTrack` expects `<SliderHandle>`, at minimum, for the Slider to
|
|
170
|
+
* function. All other Slider subcomponents should be passed as children
|
|
171
|
+
* inside the `SliderTrack`.
|
|
172
|
+
*
|
|
173
|
+
* @see Docs https://reach.tech/slider#slidertrack-children
|
|
174
|
+
*/
|
|
175
|
+
children: ReactNode;
|
|
176
|
+
}
|
|
177
|
+
declare const SliderRange: Polymorphic.MemoComponent<"div", SliderRangeProps>;
|
|
178
|
+
/**
|
|
179
|
+
* `SliderRange` accepts any props that a HTML div component accepts.
|
|
180
|
+
* `SliderRange` will not accept or render any children.
|
|
181
|
+
*
|
|
182
|
+
* @see Docs https://reach.tech/slider#sliderrange-props
|
|
183
|
+
*/
|
|
184
|
+
interface SliderRangeProps {
|
|
185
|
+
}
|
|
186
|
+
declare const SliderHandle: Polymorphic.MemoComponent<"div", SliderHandleProps>;
|
|
187
|
+
/**
|
|
188
|
+
* `SliderRange` accepts any props that a HTML div component accepts.
|
|
189
|
+
*
|
|
190
|
+
* @see Docs https://reach.tech/slider#sliderhandle-props
|
|
191
|
+
*/
|
|
192
|
+
interface SliderHandleProps {
|
|
193
|
+
}
|
|
194
|
+
declare const SliderMarker: Polymorphic.MemoComponent<"div", SliderMarkerProps>;
|
|
195
|
+
/**
|
|
196
|
+
* @see Docs https://reach.tech/slider#slidermarker-props
|
|
197
|
+
*/
|
|
198
|
+
interface SliderMarkerProps {
|
|
199
|
+
/**
|
|
200
|
+
* The value to denote where the marker should appear along the track.
|
|
201
|
+
*
|
|
202
|
+
* @see Docs https://reach.tech/slider#slidermarker-value
|
|
203
|
+
*/
|
|
204
|
+
value: number;
|
|
205
|
+
}
|
|
206
|
+
declare type SomePointerEvent = TouchEvent | MouseEvent;
|
|
207
|
+
declare type SliderChildrenRender = (props: {
|
|
208
|
+
ariaValueText?: string | undefined;
|
|
209
|
+
hasFocus?: boolean;
|
|
210
|
+
id?: string | undefined;
|
|
211
|
+
sliderId?: string | undefined;
|
|
212
|
+
max?: number;
|
|
213
|
+
min?: number;
|
|
214
|
+
value?: number;
|
|
215
|
+
}) => JSX.Element;
|
|
216
|
+
export default Slider;
|
|
217
|
+
export type { SliderHandleProps, SliderInputProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderTrackProps, SliderHandleAlignment, SliderOrientation, };
|
|
218
|
+
export { Slider, SliderHandle, SliderInput, SliderMarker, SliderTrack, SliderRange, };
|