@mantine/core 9.0.0-alpha.7 → 9.0.1
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/cjs/components/Accordion/Accordion.cjs.map +1 -1
- package/cjs/components/Accordion/Accordion.module.cjs.map +1 -1
- package/cjs/components/ActionIcon/ActionIcon.cjs.map +1 -1
- package/cjs/components/Affix/Affix.cjs.map +1 -1
- package/cjs/components/Alert/Alert.cjs.map +1 -1
- package/cjs/components/Anchor/Anchor.cjs.map +1 -1
- package/cjs/components/AngleSlider/AngleSlider.cjs.map +1 -1
- package/cjs/components/AppShell/AppShell.cjs.map +1 -1
- package/cjs/components/AspectRatio/AspectRatio.cjs.map +1 -1
- package/cjs/components/Autocomplete/Autocomplete.cjs +1 -1
- package/cjs/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/cjs/components/Avatar/Avatar.cjs.map +1 -1
- package/cjs/components/BackgroundImage/BackgroundImage.cjs.map +1 -1
- package/cjs/components/Badge/Badge.cjs.map +1 -1
- package/cjs/components/Blockquote/Blockquote.cjs.map +1 -1
- package/cjs/components/Breadcrumbs/Breadcrumbs.cjs.map +1 -1
- package/cjs/components/Burger/Burger.cjs.map +1 -1
- package/cjs/components/Button/Button.cjs.map +1 -1
- package/cjs/components/Button/Button.module.cjs.map +1 -1
- package/cjs/components/Card/Card.cjs.map +1 -1
- package/cjs/components/Center/Center.cjs.map +1 -1
- package/cjs/components/Checkbox/Checkbox.cjs +2 -1
- package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxGroup/CheckboxGroup.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs +2 -1
- package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs.map +1 -1
- package/cjs/components/Chip/Chip.cjs.map +1 -1
- package/cjs/components/Chip/Chip.module.cjs.map +1 -1
- package/cjs/components/Chip/ChipGroup/ChipGroup.cjs.map +1 -1
- package/cjs/components/CloseButton/CloseButton.cjs.map +1 -1
- package/cjs/components/Code/Code.cjs.map +1 -1
- package/cjs/components/Collapse/Collapse.cjs.map +1 -1
- package/cjs/components/ColorInput/ColorInput.cjs.map +1 -1
- package/cjs/components/ColorPicker/AlphaSlider/AlphaSlider.cjs.map +1 -1
- package/cjs/components/ColorPicker/ColorPicker.cjs.map +1 -1
- package/cjs/components/ColorPicker/HueSlider/HueSlider.cjs.map +1 -1
- package/cjs/components/ColorSwatch/ColorSwatch.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs +1 -0
- package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map +1 -1
- package/cjs/components/Container/Container.cjs.map +1 -1
- package/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/cjs/components/Divider/Divider.cjs.map +1 -1
- package/cjs/components/Fieldset/Fieldset.cjs.map +1 -1
- package/cjs/components/FileButton/FileButton.cjs.map +1 -1
- package/cjs/components/FileInput/FileInput.cjs.map +1 -1
- package/cjs/components/Flex/Flex.cjs.map +1 -1
- package/cjs/components/FloatingIndicator/FloatingIndicator.cjs.map +1 -1
- package/cjs/components/FloatingWindow/FloatingWindow.cjs.map +1 -1
- package/cjs/components/Grid/Grid.cjs.map +1 -1
- package/cjs/components/Group/Group.cjs.map +1 -1
- package/cjs/components/Highlight/Highlight.cjs.map +1 -1
- package/cjs/components/Image/Image.cjs.map +1 -1
- package/cjs/components/Indicator/Indicator.cjs.map +1 -1
- package/cjs/components/Input/Input.cjs +3 -2
- package/cjs/components/Input/Input.cjs.map +1 -1
- package/cjs/components/InputBase/InputBase.cjs.map +1 -1
- package/cjs/components/JsonInput/JsonInput.cjs.map +1 -1
- package/cjs/components/Kbd/Kbd.cjs.map +1 -1
- package/cjs/components/List/List.cjs.map +1 -1
- package/cjs/components/Loader/Loader.cjs.map +1 -1
- package/cjs/components/LoadingOverlay/LoadingOverlay.cjs +1 -0
- package/cjs/components/LoadingOverlay/LoadingOverlay.cjs.map +1 -1
- package/cjs/components/Mark/Mark.cjs.map +1 -1
- package/cjs/components/Marquee/Marquee.cjs.map +1 -1
- package/cjs/components/Menu/Menu.cjs.map +1 -1
- package/cjs/components/Modal/Modal.cjs.map +1 -1
- package/cjs/components/MultiSelect/MultiSelect.cjs +3 -1
- package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
- package/cjs/components/NativeSelect/NativeSelect.cjs +4 -1
- package/cjs/components/NativeSelect/NativeSelect.cjs.map +1 -1
- package/cjs/components/NavLink/NavLink.cjs.map +1 -1
- package/cjs/components/Notification/Notification.cjs.map +1 -1
- package/cjs/components/NumberInput/NumberInput.cjs +1 -0
- package/cjs/components/NumberInput/NumberInput.cjs.map +1 -1
- package/cjs/components/OverflowList/OverflowList.cjs.map +1 -1
- package/cjs/components/Overlay/Overlay.cjs.map +1 -1
- package/cjs/components/Pagination/Pagination.cjs.map +1 -1
- package/cjs/components/Paper/Paper.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs +4 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
- package/cjs/components/Pill/Pill.cjs.map +1 -1
- package/cjs/components/Pill/Pill.module.cjs.map +1 -1
- package/cjs/components/PillsInput/PillsInput.cjs.map +1 -1
- package/cjs/components/PinInput/PinInput.cjs.map +1 -1
- package/cjs/components/Popover/Popover.cjs +9 -0
- package/cjs/components/Popover/Popover.cjs.map +1 -1
- package/cjs/components/Portal/OptionalPortal.cjs.map +1 -1
- package/cjs/components/Portal/Portal.cjs.map +1 -1
- package/cjs/components/Progress/Progress.cjs.map +1 -1
- package/cjs/components/Radio/Radio.cjs.map +1 -1
- package/cjs/components/Radio/RadioGroup/RadioGroup.cjs.map +1 -1
- package/cjs/components/Rating/Rating.cjs.map +1 -1
- package/cjs/components/RingProgress/RingProgress.cjs +1 -0
- package/cjs/components/RingProgress/RingProgress.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollArea.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.cjs.map +1 -1
- package/cjs/components/Scroller/Scroller.cjs.map +1 -1
- package/cjs/components/SegmentedControl/SegmentedControl.cjs.map +1 -1
- package/cjs/components/SegmentedControl/SegmentedControl.module.cjs.map +1 -1
- package/cjs/components/Select/Select.cjs +1 -0
- package/cjs/components/Select/Select.cjs.map +1 -1
- package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs +1 -2
- package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs.map +1 -1
- package/cjs/components/SimpleGrid/SimpleGrid.cjs.map +1 -1
- package/cjs/components/Skeleton/Skeleton.cjs.map +1 -1
- package/cjs/components/Slider/RangeSlider/RangeSlider.cjs.map +1 -1
- package/cjs/components/Slider/Slider/Slider.cjs.map +1 -1
- package/cjs/components/Slider/Slider.module.cjs.map +1 -1
- package/cjs/components/Space/Space.cjs.map +1 -1
- package/cjs/components/Spoiler/Spoiler.cjs.map +1 -1
- package/cjs/components/Stack/Stack.cjs.map +1 -1
- package/cjs/components/Stepper/Stepper.cjs.map +1 -1
- package/cjs/components/Stepper/Stepper.module.cjs +1 -0
- package/cjs/components/Stepper/Stepper.module.cjs.map +1 -1
- package/cjs/components/Stepper/StepperStep/StepperStep.cjs +8 -5
- package/cjs/components/Stepper/StepperStep/StepperStep.cjs.map +1 -1
- package/cjs/components/Switch/Switch.cjs.map +1 -1
- package/cjs/components/Switch/SwitchGroup/SwitchGroup.cjs.map +1 -1
- package/cjs/components/Table/Table.cjs.map +1 -1
- package/cjs/components/TableOfContents/TableOfContents.cjs.map +1 -1
- package/cjs/components/Tabs/Tabs.cjs.map +1 -1
- package/cjs/components/TagsInput/TagsInput.cjs +3 -1
- package/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
- package/cjs/components/Text/Text.cjs.map +1 -1
- package/cjs/components/TextInput/TextInput.cjs.map +1 -1
- package/cjs/components/Textarea/Textarea.cjs.map +1 -1
- package/cjs/components/ThemeIcon/ThemeIcon.cjs.map +1 -1
- package/cjs/components/Timeline/Timeline.cjs.map +1 -1
- package/cjs/components/Timeline/TimelineItem/TimelineItem.cjs +1 -1
- package/cjs/components/Timeline/TimelineItem/TimelineItem.cjs.map +1 -1
- package/cjs/components/Title/Title.cjs.map +1 -1
- package/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/cjs/components/Tree/Tree.cjs.map +1 -1
- package/cjs/components/Typography/Typography.cjs.map +1 -1
- package/cjs/components/UnstyledButton/UnstyledButton.cjs.map +1 -1
- package/cjs/components/VisuallyHidden/VisuallyHidden.cjs.map +1 -1
- package/cjs/core/MantineProvider/color-scheme-managers/local-storage-manager.cjs.map +1 -1
- package/cjs/core/MantineProvider/default-theme.cjs +1 -1
- package/cjs/core/MantineProvider/default-theme.cjs.map +1 -1
- package/cjs/core/utils/find-element-ancestor/find-element-ancestor.cjs.map +1 -1
- package/esm/components/Accordion/Accordion.mjs.map +1 -1
- package/esm/components/Accordion/Accordion.module.mjs.map +1 -1
- package/esm/components/ActionIcon/ActionIcon.mjs.map +1 -1
- package/esm/components/Affix/Affix.mjs.map +1 -1
- package/esm/components/Alert/Alert.mjs.map +1 -1
- package/esm/components/Anchor/Anchor.mjs.map +1 -1
- package/esm/components/AngleSlider/AngleSlider.mjs.map +1 -1
- package/esm/components/AppShell/AppShell.mjs.map +1 -1
- package/esm/components/AspectRatio/AspectRatio.mjs.map +1 -1
- package/esm/components/Autocomplete/Autocomplete.mjs +1 -1
- package/esm/components/Autocomplete/Autocomplete.mjs.map +1 -1
- package/esm/components/Avatar/Avatar.mjs.map +1 -1
- package/esm/components/BackgroundImage/BackgroundImage.mjs.map +1 -1
- package/esm/components/Badge/Badge.mjs.map +1 -1
- package/esm/components/Blockquote/Blockquote.mjs.map +1 -1
- package/esm/components/Breadcrumbs/Breadcrumbs.mjs.map +1 -1
- package/esm/components/Burger/Burger.mjs.map +1 -1
- package/esm/components/Button/Button.mjs.map +1 -1
- package/esm/components/Button/Button.module.mjs.map +1 -1
- package/esm/components/Card/Card.mjs.map +1 -1
- package/esm/components/Center/Center.mjs.map +1 -1
- package/esm/components/Checkbox/Checkbox.mjs +2 -1
- package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxGroup/CheckboxGroup.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs +2 -1
- package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map +1 -1
- package/esm/components/Chip/Chip.mjs.map +1 -1
- package/esm/components/Chip/Chip.module.mjs.map +1 -1
- package/esm/components/Chip/ChipGroup/ChipGroup.mjs.map +1 -1
- package/esm/components/CloseButton/CloseButton.mjs.map +1 -1
- package/esm/components/Code/Code.mjs.map +1 -1
- package/esm/components/Collapse/Collapse.mjs.map +1 -1
- package/esm/components/ColorInput/ColorInput.mjs.map +1 -1
- package/esm/components/ColorPicker/AlphaSlider/AlphaSlider.mjs.map +1 -1
- package/esm/components/ColorPicker/ColorPicker.mjs.map +1 -1
- package/esm/components/ColorPicker/HueSlider/HueSlider.mjs.map +1 -1
- package/esm/components/ColorSwatch/ColorSwatch.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs +1 -0
- package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs.map +1 -1
- package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map +1 -1
- package/esm/components/Container/Container.mjs.map +1 -1
- package/esm/components/Dialog/Dialog.mjs.map +1 -1
- package/esm/components/Divider/Divider.mjs.map +1 -1
- package/esm/components/Fieldset/Fieldset.mjs.map +1 -1
- package/esm/components/FileButton/FileButton.mjs.map +1 -1
- package/esm/components/FileInput/FileInput.mjs.map +1 -1
- package/esm/components/Flex/Flex.mjs.map +1 -1
- package/esm/components/FloatingIndicator/FloatingIndicator.mjs.map +1 -1
- package/esm/components/FloatingWindow/FloatingWindow.mjs.map +1 -1
- package/esm/components/Grid/Grid.mjs.map +1 -1
- package/esm/components/Group/Group.mjs.map +1 -1
- package/esm/components/Highlight/Highlight.mjs.map +1 -1
- package/esm/components/Image/Image.mjs.map +1 -1
- package/esm/components/Indicator/Indicator.mjs.map +1 -1
- package/esm/components/Input/Input.mjs +3 -2
- package/esm/components/Input/Input.mjs.map +1 -1
- package/esm/components/InputBase/InputBase.mjs.map +1 -1
- package/esm/components/JsonInput/JsonInput.mjs.map +1 -1
- package/esm/components/Kbd/Kbd.mjs.map +1 -1
- package/esm/components/List/List.mjs.map +1 -1
- package/esm/components/Loader/Loader.mjs.map +1 -1
- package/esm/components/LoadingOverlay/LoadingOverlay.mjs +1 -0
- package/esm/components/LoadingOverlay/LoadingOverlay.mjs.map +1 -1
- package/esm/components/Mark/Mark.mjs.map +1 -1
- package/esm/components/Marquee/Marquee.mjs.map +1 -1
- package/esm/components/Menu/Menu.mjs.map +1 -1
- package/esm/components/Modal/Modal.mjs.map +1 -1
- package/esm/components/MultiSelect/MultiSelect.mjs +3 -1
- package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
- package/esm/components/NativeSelect/NativeSelect.mjs +4 -1
- package/esm/components/NativeSelect/NativeSelect.mjs.map +1 -1
- package/esm/components/NavLink/NavLink.mjs.map +1 -1
- package/esm/components/Notification/Notification.mjs.map +1 -1
- package/esm/components/NumberInput/NumberInput.mjs +1 -0
- package/esm/components/NumberInput/NumberInput.mjs.map +1 -1
- package/esm/components/OverflowList/OverflowList.mjs.map +1 -1
- package/esm/components/Overlay/Overlay.mjs.map +1 -1
- package/esm/components/Pagination/Pagination.mjs.map +1 -1
- package/esm/components/Paper/Paper.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordInput.mjs +4 -1
- package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
- package/esm/components/Pill/Pill.mjs.map +1 -1
- package/esm/components/Pill/Pill.module.mjs.map +1 -1
- package/esm/components/PillsInput/PillsInput.mjs.map +1 -1
- package/esm/components/PinInput/PinInput.mjs.map +1 -1
- package/esm/components/Popover/Popover.mjs +9 -0
- package/esm/components/Popover/Popover.mjs.map +1 -1
- package/esm/components/Portal/OptionalPortal.mjs.map +1 -1
- package/esm/components/Portal/Portal.mjs.map +1 -1
- package/esm/components/Progress/Progress.mjs.map +1 -1
- package/esm/components/Radio/Radio.mjs.map +1 -1
- package/esm/components/Radio/RadioGroup/RadioGroup.mjs.map +1 -1
- package/esm/components/Rating/Rating.mjs.map +1 -1
- package/esm/components/RingProgress/RingProgress.mjs +1 -0
- package/esm/components/RingProgress/RingProgress.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollArea.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.mjs.map +1 -1
- package/esm/components/Scroller/Scroller.mjs.map +1 -1
- package/esm/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/esm/components/SegmentedControl/SegmentedControl.module.mjs.map +1 -1
- package/esm/components/Select/Select.mjs +1 -0
- package/esm/components/Select/Select.mjs.map +1 -1
- package/esm/components/SemiCircleProgress/SemiCircleProgress.mjs +1 -2
- package/esm/components/SemiCircleProgress/SemiCircleProgress.mjs.map +1 -1
- package/esm/components/SimpleGrid/SimpleGrid.mjs.map +1 -1
- package/esm/components/Skeleton/Skeleton.mjs.map +1 -1
- package/esm/components/Slider/RangeSlider/RangeSlider.mjs.map +1 -1
- package/esm/components/Slider/Slider/Slider.mjs.map +1 -1
- package/esm/components/Slider/Slider.module.mjs.map +1 -1
- package/esm/components/Space/Space.mjs.map +1 -1
- package/esm/components/Spoiler/Spoiler.mjs.map +1 -1
- package/esm/components/Stack/Stack.mjs.map +1 -1
- package/esm/components/Stepper/Stepper.mjs.map +1 -1
- package/esm/components/Stepper/Stepper.module.mjs +1 -0
- package/esm/components/Stepper/Stepper.module.mjs.map +1 -1
- package/esm/components/Stepper/StepperStep/StepperStep.mjs +8 -5
- package/esm/components/Stepper/StepperStep/StepperStep.mjs.map +1 -1
- package/esm/components/Switch/Switch.mjs.map +1 -1
- package/esm/components/Switch/SwitchGroup/SwitchGroup.mjs.map +1 -1
- package/esm/components/Table/Table.mjs.map +1 -1
- package/esm/components/TableOfContents/TableOfContents.mjs.map +1 -1
- package/esm/components/Tabs/Tabs.mjs.map +1 -1
- package/esm/components/TagsInput/TagsInput.mjs +3 -1
- package/esm/components/TagsInput/TagsInput.mjs.map +1 -1
- package/esm/components/Text/Text.mjs.map +1 -1
- package/esm/components/TextInput/TextInput.mjs.map +1 -1
- package/esm/components/Textarea/Textarea.mjs.map +1 -1
- package/esm/components/ThemeIcon/ThemeIcon.mjs.map +1 -1
- package/esm/components/Timeline/Timeline.mjs.map +1 -1
- package/esm/components/Timeline/TimelineItem/TimelineItem.mjs +1 -1
- package/esm/components/Timeline/TimelineItem/TimelineItem.mjs.map +1 -1
- package/esm/components/Title/Title.mjs.map +1 -1
- package/esm/components/Tooltip/Tooltip.mjs.map +1 -1
- package/esm/components/Tree/Tree.mjs.map +1 -1
- package/esm/components/Typography/Typography.mjs.map +1 -1
- package/esm/components/UnstyledButton/UnstyledButton.mjs.map +1 -1
- package/esm/components/VisuallyHidden/VisuallyHidden.mjs.map +1 -1
- package/esm/core/MantineProvider/color-scheme-managers/local-storage-manager.mjs.map +1 -1
- package/esm/core/MantineProvider/default-theme.mjs +1 -1
- package/esm/core/MantineProvider/default-theme.mjs.map +1 -1
- package/esm/core/utils/find-element-ancestor/find-element-ancestor.mjs.map +1 -1
- package/lib/components/Accordion/Accordion.d.ts +21 -3
- package/lib/components/Accordion/index.d.ts +0 -17
- package/lib/components/ActionIcon/ActionIcon.d.ts +20 -2
- package/lib/components/ActionIcon/index.d.ts +0 -18
- package/lib/components/Affix/Affix.d.ts +6 -0
- package/lib/components/Affix/index.d.ts +0 -6
- package/lib/components/Alert/Alert.d.ts +6 -0
- package/lib/components/Alert/index.d.ts +0 -6
- package/lib/components/Anchor/Anchor.d.ts +7 -0
- package/lib/components/Anchor/index.d.ts +0 -8
- package/lib/components/AngleSlider/AngleSlider.d.ts +6 -0
- package/lib/components/AngleSlider/index.d.ts +0 -6
- package/lib/components/AppShell/AppShell.d.ts +30 -6
- package/lib/components/AppShell/index.d.ts +0 -24
- package/lib/components/AspectRatio/AspectRatio.d.ts +6 -0
- package/lib/components/AspectRatio/index.d.ts +0 -6
- package/lib/components/Autocomplete/Autocomplete.d.ts +6 -0
- package/lib/components/Autocomplete/index.d.ts +0 -6
- package/lib/components/Avatar/Avatar.d.ts +15 -1
- package/lib/components/Avatar/index.d.ts +0 -14
- package/lib/components/BackgroundImage/BackgroundImage.d.ts +6 -0
- package/lib/components/BackgroundImage/index.d.ts +0 -6
- package/lib/components/Badge/Badge.d.ts +7 -0
- package/lib/components/Badge/index.d.ts +0 -7
- package/lib/components/Blockquote/Blockquote.d.ts +6 -0
- package/lib/components/Blockquote/index.d.ts +0 -6
- package/lib/components/Breadcrumbs/Breadcrumbs.d.ts +6 -0
- package/lib/components/Breadcrumbs/index.d.ts +0 -7
- package/lib/components/Burger/Burger.d.ts +6 -0
- package/lib/components/Burger/index.d.ts +0 -6
- package/lib/components/Button/Button.d.ts +22 -2
- package/lib/components/Button/index.d.ts +0 -20
- package/lib/components/Card/Card.d.ts +11 -1
- package/lib/components/Card/index.d.ts +0 -10
- package/lib/components/Center/Center.d.ts +5 -0
- package/lib/components/Center/index.d.ts +0 -5
- package/lib/components/Checkbox/Checkbox.d.ts +29 -3
- package/lib/components/Checkbox/CheckboxGroup/CheckboxGroup.d.ts +8 -8
- package/lib/components/Checkbox/index.d.ts +0 -26
- package/lib/components/Chip/Chip.d.ts +12 -1
- package/lib/components/Chip/ChipGroup/ChipGroup.d.ts +8 -8
- package/lib/components/Chip/index.d.ts +0 -11
- package/lib/components/CloseButton/CloseButton.d.ts +7 -0
- package/lib/components/CloseButton/index.d.ts +0 -7
- package/lib/components/Code/Code.d.ts +6 -0
- package/lib/components/Code/index.d.ts +0 -6
- package/lib/components/Collapse/Collapse.d.ts +4 -0
- package/lib/components/Collapse/index.d.ts +0 -4
- package/lib/components/ColorInput/ColorInput.d.ts +6 -0
- package/lib/components/ColorInput/index.d.ts +0 -6
- package/lib/components/ColorPicker/AlphaSlider/AlphaSlider.d.ts +4 -0
- package/lib/components/ColorPicker/ColorPicker.d.ts +6 -0
- package/lib/components/ColorPicker/HueSlider/HueSlider.d.ts +4 -0
- package/lib/components/ColorPicker/index.d.ts +0 -14
- package/lib/components/ColorSwatch/ColorSwatch.d.ts +6 -0
- package/lib/components/ColorSwatch/index.d.ts +0 -6
- package/lib/components/Container/Container.d.ts +6 -0
- package/lib/components/Container/index.d.ts +0 -6
- package/lib/components/Dialog/Dialog.d.ts +6 -0
- package/lib/components/Dialog/index.d.ts +0 -6
- package/lib/components/Divider/Divider.d.ts +7 -0
- package/lib/components/Divider/index.d.ts +0 -7
- package/lib/components/Fieldset/Fieldset.d.ts +6 -0
- package/lib/components/Fieldset/index.d.ts +0 -6
- package/lib/components/FileButton/FileButton.d.ts +4 -0
- package/lib/components/FileButton/index.d.ts +0 -4
- package/lib/components/FileInput/FileInput.d.ts +4 -0
- package/lib/components/FileInput/index.d.ts +0 -4
- package/lib/components/Flex/Flex.d.ts +5 -0
- package/lib/components/Flex/index.d.ts +0 -5
- package/lib/components/FloatingIndicator/FloatingIndicator.d.ts +6 -0
- package/lib/components/FloatingIndicator/index.d.ts +0 -6
- package/lib/components/FloatingWindow/FloatingWindow.d.ts +5 -0
- package/lib/components/FloatingWindow/index.d.ts +0 -5
- package/lib/components/Grid/Grid.d.ts +13 -2
- package/lib/components/Grid/index.d.ts +0 -11
- package/lib/components/Group/Group.d.ts +7 -0
- package/lib/components/Group/index.d.ts +0 -7
- package/lib/components/Highlight/Highlight.d.ts +5 -0
- package/lib/components/Highlight/index.d.ts +0 -5
- package/lib/components/Image/Image.d.ts +6 -0
- package/lib/components/Image/index.d.ts +0 -6
- package/lib/components/Indicator/Indicator.d.ts +6 -0
- package/lib/components/Indicator/index.d.ts +0 -6
- package/lib/components/Input/Input.d.ts +51 -7
- package/lib/components/Input/index.d.ts +0 -42
- package/lib/components/InputBase/InputBase.d.ts +4 -0
- package/lib/components/InputBase/index.d.ts +0 -4
- package/lib/components/JsonInput/JsonInput.d.ts +4 -0
- package/lib/components/JsonInput/index.d.ts +0 -4
- package/lib/components/Kbd/Kbd.d.ts +6 -0
- package/lib/components/Kbd/index.d.ts +0 -6
- package/lib/components/List/List.d.ts +12 -1
- package/lib/components/List/index.d.ts +0 -11
- package/lib/components/Loader/Loader.d.ts +6 -0
- package/lib/components/Loader/index.d.ts +0 -6
- package/lib/components/LoadingOverlay/LoadingOverlay.d.ts +6 -0
- package/lib/components/LoadingOverlay/index.d.ts +0 -6
- package/lib/components/Mark/Mark.d.ts +6 -0
- package/lib/components/Mark/index.d.ts +0 -6
- package/lib/components/Marquee/Marquee.d.ts +6 -0
- package/lib/components/Marquee/index.d.ts +0 -6
- package/lib/components/Menu/Menu.d.ts +43 -6
- package/lib/components/Menu/index.d.ts +0 -33
- package/lib/components/Modal/Modal.d.ts +37 -7
- package/lib/components/Modal/index.d.ts +0 -30
- package/lib/components/MultiSelect/MultiSelect.d.ts +5 -0
- package/lib/components/MultiSelect/index.d.ts +0 -6
- package/lib/components/NativeSelect/NativeSelect.d.ts +5 -0
- package/lib/components/NativeSelect/index.d.ts +0 -6
- package/lib/components/NavLink/NavLink.d.ts +7 -0
- package/lib/components/NavLink/index.d.ts +0 -7
- package/lib/components/Notification/Notification.d.ts +6 -0
- package/lib/components/Notification/index.d.ts +0 -6
- package/lib/components/NumberInput/NumberInput.d.ts +7 -0
- package/lib/components/NumberInput/index.d.ts +0 -7
- package/lib/components/OverflowList/OverflowList.d.ts +6 -0
- package/lib/components/OverflowList/index.d.ts +0 -6
- package/lib/components/Overlay/Overlay.d.ts +6 -0
- package/lib/components/Overlay/index.d.ts +0 -6
- package/lib/components/Pagination/Pagination.d.ts +25 -4
- package/lib/components/Pagination/index.d.ts +0 -21
- package/lib/components/Paper/Paper.d.ts +7 -0
- package/lib/components/Paper/index.d.ts +0 -7
- package/lib/components/PasswordInput/PasswordInput.d.ts +6 -0
- package/lib/components/PasswordInput/index.d.ts +0 -6
- package/lib/components/Pill/Pill.d.ts +14 -1
- package/lib/components/Pill/index.d.ts +0 -13
- package/lib/components/PillsInput/PillsInput.d.ts +12 -1
- package/lib/components/PillsInput/index.d.ts +0 -10
- package/lib/components/PinInput/PinInput.d.ts +5 -0
- package/lib/components/PinInput/index.d.ts +0 -5
- package/lib/components/Popover/Popover.d.ts +9 -0
- package/lib/components/Portal/OptionalPortal.d.ts +3 -0
- package/lib/components/Portal/Portal.d.ts +3 -0
- package/lib/components/Portal/index.d.ts +0 -6
- package/lib/components/Progress/Progress.d.ts +19 -3
- package/lib/components/Progress/index.d.ts +0 -15
- package/lib/components/Radio/Radio.d.ts +29 -3
- package/lib/components/Radio/RadioGroup/RadioGroup.d.ts +8 -8
- package/lib/components/Radio/index.d.ts +0 -26
- package/lib/components/Rating/Rating.d.ts +5 -0
- package/lib/components/Rating/index.d.ts +0 -5
- package/lib/components/RingProgress/RingProgress.d.ts +7 -0
- package/lib/components/RingProgress/index.d.ts +0 -7
- package/lib/components/ScrollArea/ScrollArea.d.ts +10 -0
- package/lib/components/ScrollArea/index.d.ts +0 -10
- package/lib/components/Scroller/Scroller.d.ts +6 -0
- package/lib/components/Scroller/index.d.ts +0 -6
- package/lib/components/SegmentedControl/SegmentedControl.d.ts +7 -0
- package/lib/components/SegmentedControl/index.d.ts +0 -8
- package/lib/components/Select/Select.d.ts +5 -0
- package/lib/components/Select/index.d.ts +0 -6
- package/lib/components/SemiCircleProgress/SemiCircleProgress.d.ts +6 -0
- package/lib/components/SemiCircleProgress/index.d.ts +0 -6
- package/lib/components/SimpleGrid/SimpleGrid.d.ts +5 -0
- package/lib/components/SimpleGrid/index.d.ts +0 -5
- package/lib/components/Skeleton/Skeleton.d.ts +6 -0
- package/lib/components/Skeleton/index.d.ts +0 -6
- package/lib/components/Slider/RangeSlider/RangeSlider.d.ts +8 -0
- package/lib/components/Slider/Slider/Slider.d.ts +7 -0
- package/lib/components/Slider/index.d.ts +0 -15
- package/lib/components/Space/Space.d.ts +4 -0
- package/lib/components/Space/index.d.ts +0 -5
- package/lib/components/Spoiler/Spoiler.d.ts +6 -0
- package/lib/components/Spoiler/index.d.ts +0 -6
- package/lib/components/Stack/Stack.d.ts +6 -0
- package/lib/components/Stack/index.d.ts +0 -6
- package/lib/components/Stepper/Stepper.d.ts +18 -3
- package/lib/components/Stepper/StepperStep/StepperStep.d.ts +1 -1
- package/lib/components/Stepper/index.d.ts +0 -14
- package/lib/components/Switch/Switch.d.ts +13 -1
- package/lib/components/Switch/SwitchGroup/SwitchGroup.d.ts +8 -8
- package/lib/components/Switch/index.d.ts +0 -12
- package/lib/components/Table/Table.d.ts +35 -2
- package/lib/components/Table/index.d.ts +0 -32
- package/lib/components/TableOfContents/TableOfContents.d.ts +7 -0
- package/lib/components/TableOfContents/index.d.ts +0 -7
- package/lib/components/Tabs/Tabs.d.ts +24 -3
- package/lib/components/Tabs/index.d.ts +0 -20
- package/lib/components/TagsInput/TagsInput.d.ts +5 -0
- package/lib/components/TagsInput/index.d.ts +0 -5
- package/lib/components/Text/Text.d.ts +7 -0
- package/lib/components/Text/index.d.ts +0 -7
- package/lib/components/TextInput/TextInput.d.ts +4 -0
- package/lib/components/TextInput/index.d.ts +0 -4
- package/lib/components/Textarea/Textarea.d.ts +4 -0
- package/lib/components/Textarea/index.d.ts +0 -4
- package/lib/components/ThemeIcon/ThemeIcon.d.ts +7 -0
- package/lib/components/ThemeIcon/index.d.ts +0 -7
- package/lib/components/Timeline/Timeline.d.ts +12 -1
- package/lib/components/Timeline/index.d.ts +0 -11
- package/lib/components/Title/Title.d.ts +8 -0
- package/lib/components/Title/index.d.ts +0 -8
- package/lib/components/Tooltip/Tooltip.d.ts +15 -2
- package/lib/components/Tooltip/index.d.ts +0 -13
- package/lib/components/Tree/Tree.d.ts +7 -0
- package/lib/components/Tree/index.d.ts +0 -7
- package/lib/components/Typography/Typography.d.ts +5 -0
- package/lib/components/Typography/index.d.ts +0 -5
- package/lib/components/UnstyledButton/UnstyledButton.d.ts +5 -0
- package/lib/components/UnstyledButton/index.d.ts +0 -5
- package/lib/components/VisuallyHidden/VisuallyHidden.d.ts +3 -0
- package/lib/components/VisuallyHidden/index.d.ts +0 -3
- package/package.json +2 -2
- package/styles/Accordion.css +0 -4
- package/styles/Accordion.layer.css +0 -4
- package/styles/Button.css +2 -0
- package/styles/Button.layer.css +2 -0
- package/styles/Chip.css +2 -0
- package/styles/Chip.layer.css +2 -0
- package/styles/Pill.css +5 -2
- package/styles/Pill.layer.css +5 -2
- package/styles/SegmentedControl.css +3 -3
- package/styles/SegmentedControl.layer.css +3 -3
- package/styles/Slider.css +10 -10
- package/styles/Slider.layer.css +10 -10
- package/styles/Stepper.css +4 -0
- package/styles/Stepper.layer.css +4 -0
- package/styles/default-css-variables.css +1 -1
- package/styles/default-css-variables.layer.css +1 -1
- package/styles.css +27 -20
- package/styles.layer.css +27 -20
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scroller.cjs","names":["createVarsResolver","rem","getThemeColor","factory","useProps","useStyles","Box","UnstyledButton","AccordionChevron","classes"],"sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["import { Ref } from 'react';\nimport { useScroller } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { AccordionChevron } from '../Accordion';\nimport { UnstyledButton } from '../UnstyledButton';\nimport classes from './Scroller.module.css';\n\nexport type ScrollerStylesNames = 'root' | 'container' | 'content' | 'control' | 'chevron';\nexport type ScrollerCssVariables = {\n root: '--scroller-control-size' | '--scroller-background-color';\n};\n\nexport interface ScrollerProps\n extends BoxProps, StylesApiProps<ScrollerFactory>, ElementProps<'div'> {\n /** Content to display */\n children: React.ReactNode;\n\n /** Amount of pixels to scroll when clicking the control buttons, `200` by default */\n scrollAmount?: number;\n\n /** Size of the control buttons, @default 60px */\n controlSize?: string | number;\n\n /** Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default */\n edgeGradientColor?: string;\n\n /** Props passed to the start control button */\n startControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed to the end control button */\n endControlProps?: React.ComponentProps<'button'>;\n\n /** Icon component for the start control, AccordionChevron by default */\n startControlIcon?: React.ReactNode;\n\n /** Icon component for the end control, AccordionChevron by default */\n endControlIcon?: React.ReactNode;\n\n /** Determines whether start control should always be visible regardless of scroll position, `false` by default */\n showStartControl?: boolean;\n\n /** Determines whether end control should always be visible regardless of scroll position, `false` by default */\n showEndControl?: boolean;\n\n /** Determines whether content can be scrolled by dragging with mouse, `true` by default */\n draggable?: boolean;\n\n /** Ref for the scroll container element */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport type ScrollerFactory = Factory<{\n props: ScrollerProps;\n ref: HTMLDivElement;\n stylesNames: ScrollerStylesNames;\n vars: ScrollerCssVariables;\n}>;\n\nconst defaultProps: Partial<ScrollerProps> = {\n scrollAmount: 200,\n draggable: true,\n};\n\nconst varsResolver = createVarsResolver<ScrollerFactory>(\n (theme, { controlSize, edgeGradientColor }) => ({\n root: {\n '--scroller-control-size': rem(controlSize),\n '--scroller-background-color': edgeGradientColor\n ? getThemeColor(edgeGradientColor, theme)\n : undefined,\n },\n })\n);\n\nexport const Scroller = factory<ScrollerFactory>((_props) => {\n const props = useProps('Scroller', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n scrollAmount,\n controlSize,\n edgeGradientColor,\n startControlProps,\n endControlProps,\n startControlIcon,\n endControlIcon,\n showStartControl,\n showEndControl,\n draggable,\n mod,\n ref,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<ScrollerFactory>({\n name: 'Scroller',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n attributes,\n });\n\n const scroller = useScroller({\n scrollAmount,\n draggable,\n });\n\n const showStart = showStartControl || scroller.canScrollStart;\n const showEnd = showEndControl || scroller.canScrollEnd;\n\n return (\n <Box {...getStyles('root')} ref={ref} mod={mod} {...others}>\n <UnstyledButton\n {...getStyles('control')}\n onClick={scroller.scrollStart}\n data-position=\"start\"\n data-hidden={!showStart || undefined}\n aria-label=\"Scroll left\"\n tabIndex={showStart ? 0 : -1}\n {...startControlProps}\n >\n {startControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n </UnstyledButton>\n\n <div\n {...getStyles('container')}\n ref={scroller.ref}\n role=\"presentation\"\n data-draggable={draggable || undefined}\n {...scroller.dragHandlers}\n >\n <div {...getStyles('content')}>{children}</div>\n </div>\n\n <UnstyledButton\n {...getStyles('control')}\n onClick={scroller.scrollEnd}\n data-position=\"end\"\n data-hidden={!showEnd || undefined}\n aria-label=\"Scroll right\"\n tabIndex={showEnd ? 0 : -1}\n {...endControlProps}\n >\n {endControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n </UnstyledButton>\n </Box>\n );\n});\n\nScroller.classes = classes;\nScroller.varsResolver = varsResolver;\nScroller.displayName = '@mantine/core/Scroller';\n"],"mappings":";;;;;;;;;;;;;;;AAsEA,MAAM,eAAuC;CAC3C,cAAc;CACd,WAAW;CACZ;AAED,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,aAAa,yBAAyB,EAC9C,MAAM;CACJ,2BAA2BC,YAAAA,IAAI,YAAY;CAC3C,+BAA+B,oBAC3BC,wBAAAA,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACL,EACF,EACF;AAED,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,cACA,aACA,mBACA,mBACA,iBACA,kBACA,gBACA,kBACA,gBACA,WACA,KACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAA,GAAA,eAAA,aAAuB;EAC3B;EACA;EACD,CAAC;CAEF,MAAM,YAAY,oBAAoB,SAAS;CAC/C,MAAM,UAAU,kBAAkB,SAAS;AAE3C,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAO;EAAU;EAAK,GAAI;YAApD;GACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,aAAa,KAAA;IAC3B,cAAW;IACX,UAAU,YAAY,IAAI;IAC1B,GAAI;cAEH,oBAAoB,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IACpD,CAAA;GAEjB,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,GAAI,UAAU,YAAY;IAC1B,KAAK,SAAS;IACd,MAAK;IACL,kBAAgB,aAAa,KAAA;IAC7B,GAAI,SAAS;cAEb,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,GAAI,UAAU,UAAU;KAAG;KAAe,CAAA;IAC3C,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAACD,uBAAAA,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,WAAW,KAAA;IACzB,cAAW;IACX,UAAU,UAAU,IAAI;IACxB,GAAI;cAEH,kBAAkB,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IAClD,CAAA;GACb;;EAER;AAEF,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}
|
|
1
|
+
{"version":3,"file":"Scroller.cjs","names":["createVarsResolver","rem","getThemeColor","factory","useProps","useStyles","Box","UnstyledButton","AccordionChevron","classes"],"sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["import { Ref } from 'react';\nimport { useScroller } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { AccordionChevron } from '../Accordion';\nimport { UnstyledButton } from '../UnstyledButton';\nimport classes from './Scroller.module.css';\n\nexport type ScrollerStylesNames = 'root' | 'container' | 'content' | 'control' | 'chevron';\nexport type ScrollerCssVariables = {\n root: '--scroller-control-size' | '--scroller-background-color';\n};\n\nexport interface ScrollerProps\n extends BoxProps, StylesApiProps<ScrollerFactory>, ElementProps<'div'> {\n /** Content to display */\n children: React.ReactNode;\n\n /** Amount of pixels to scroll when clicking the control buttons, `200` by default */\n scrollAmount?: number;\n\n /** Size of the control buttons, @default 60px */\n controlSize?: string | number;\n\n /** Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default */\n edgeGradientColor?: string;\n\n /** Props passed to the start control button */\n startControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed to the end control button */\n endControlProps?: React.ComponentProps<'button'>;\n\n /** Icon component for the start control, AccordionChevron by default */\n startControlIcon?: React.ReactNode;\n\n /** Icon component for the end control, AccordionChevron by default */\n endControlIcon?: React.ReactNode;\n\n /** Determines whether start control should always be visible regardless of scroll position, `false` by default */\n showStartControl?: boolean;\n\n /** Determines whether end control should always be visible regardless of scroll position, `false` by default */\n showEndControl?: boolean;\n\n /** Determines whether content can be scrolled by dragging with mouse, `true` by default */\n draggable?: boolean;\n\n /** Ref for the scroll container element */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport type ScrollerFactory = Factory<{\n props: ScrollerProps;\n ref: HTMLDivElement;\n stylesNames: ScrollerStylesNames;\n vars: ScrollerCssVariables;\n}>;\n\nconst defaultProps: Partial<ScrollerProps> = {\n scrollAmount: 200,\n draggable: true,\n};\n\nconst varsResolver = createVarsResolver<ScrollerFactory>(\n (theme, { controlSize, edgeGradientColor }) => ({\n root: {\n '--scroller-control-size': rem(controlSize),\n '--scroller-background-color': edgeGradientColor\n ? getThemeColor(edgeGradientColor, theme)\n : undefined,\n },\n })\n);\n\nexport const Scroller = factory<ScrollerFactory>((_props) => {\n const props = useProps('Scroller', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n scrollAmount,\n controlSize,\n edgeGradientColor,\n startControlProps,\n endControlProps,\n startControlIcon,\n endControlIcon,\n showStartControl,\n showEndControl,\n draggable,\n mod,\n ref,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<ScrollerFactory>({\n name: 'Scroller',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n attributes,\n });\n\n const scroller = useScroller({\n scrollAmount,\n draggable,\n });\n\n const showStart = showStartControl || scroller.canScrollStart;\n const showEnd = showEndControl || scroller.canScrollEnd;\n\n return (\n <Box {...getStyles('root')} ref={ref} mod={mod} {...others}>\n <UnstyledButton\n {...getStyles('control')}\n onClick={scroller.scrollStart}\n data-position=\"start\"\n data-hidden={!showStart || undefined}\n aria-label=\"Scroll left\"\n tabIndex={showStart ? 0 : -1}\n {...startControlProps}\n >\n {startControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n </UnstyledButton>\n\n <div\n {...getStyles('container')}\n ref={scroller.ref}\n role=\"presentation\"\n data-draggable={draggable || undefined}\n {...scroller.dragHandlers}\n >\n <div {...getStyles('content')}>{children}</div>\n </div>\n\n <UnstyledButton\n {...getStyles('control')}\n onClick={scroller.scrollEnd}\n data-position=\"end\"\n data-hidden={!showEnd || undefined}\n aria-label=\"Scroll right\"\n tabIndex={showEnd ? 0 : -1}\n {...endControlProps}\n >\n {endControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n </UnstyledButton>\n </Box>\n );\n});\n\nScroller.classes = classes;\nScroller.varsResolver = varsResolver;\nScroller.displayName = '@mantine/core/Scroller';\n\nexport namespace Scroller {\n export type Props = ScrollerProps;\n export type StylesNames = ScrollerStylesNames;\n export type CssVariables = ScrollerCssVariables;\n export type Factory = ScrollerFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsEA,MAAM,eAAuC;CAC3C,cAAc;CACd,WAAW;CACZ;AAED,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,aAAa,yBAAyB,EAC9C,MAAM;CACJ,2BAA2BC,YAAAA,IAAI,YAAY;CAC3C,+BAA+B,oBAC3BC,wBAAAA,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACL,EACF,EACF;AAED,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,cACA,aACA,mBACA,mBACA,iBACA,kBACA,gBACA,kBACA,gBACA,WACA,KACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAA,GAAA,eAAA,aAAuB;EAC3B;EACA;EACD,CAAC;CAEF,MAAM,YAAY,oBAAoB,SAAS;CAC/C,MAAM,UAAU,kBAAkB,SAAS;AAE3C,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAO;EAAU;EAAK,GAAI;YAApD;GACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,aAAa,KAAA;IAC3B,cAAW;IACX,UAAU,YAAY,IAAI;IAC1B,GAAI;cAEH,oBAAoB,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IACpD,CAAA;GAEjB,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,GAAI,UAAU,YAAY;IAC1B,KAAK,SAAS;IACd,MAAK;IACL,kBAAgB,aAAa,KAAA;IAC7B,GAAI,SAAS;cAEb,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,GAAI,UAAU,UAAU;KAAG;KAAe,CAAA;IAC3C,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAACD,uBAAAA,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,WAAW,KAAA;IACzB,cAAW;IACX,UAAU,UAAU,IAAI;IACxB,GAAI;cAEH,kBAAkB,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IAClD,CAAA;GACb;;EAER;AAEF,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.cjs","names":["createVarsResolver","getRadius","getThemeColor","getSize","getFontSize","genericFactory","useProps","useStyles","useMantineTheme","isPrimitive","Box","getContrastColor","FloatingIndicator","classes"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n randomId,\n useId,\n useMergedRef,\n useMounted,\n useShallowEffect,\n useUncontrolled,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n Factory,\n genericFactory,\n getContrastColor,\n getFontSize,\n getRadius,\n getSize,\n getThemeColor,\n isPrimitive,\n MantineColor,\n MantineRadius,\n MantineSize,\n Primitive,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '../../core';\nimport { FloatingIndicator } from '../FloatingIndicator';\nimport classes from './SegmentedControl.module.css';\n\nexport type SegmentedControlStylesNames =\n | 'root'\n | 'input'\n | 'label'\n | 'control'\n | 'indicator'\n | 'innerLabel';\nexport type SegmentedControlCssVariables = {\n root:\n | '--sc-radius'\n | '--sc-color'\n | '--sc-font-size'\n | '--sc-padding'\n | '--sc-shadow'\n | '--sc-transition-duration'\n | '--sc-transition-timing-function';\n};\n\nexport interface SegmentedControlItem<Value = string> {\n value: Value;\n label: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends Primitive = string>\n extends\n BoxProps,\n StylesApiProps<SegmentedControlFactory>,\n ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n /** Data based on which controls are rendered */\n data: (Value | SegmentedControlItem<Value>)[];\n\n /** Controlled component value */\n value?: Value;\n\n /** Uncontrolled component default value */\n defaultValue?: Value;\n\n /** Called when value changes */\n onChange?: (value: Value) => void;\n\n /** Determines whether the component is disabled */\n disabled?: boolean;\n\n /** Name attribute for the radio group. A random name is auto-generated if not provided */\n name?: string;\n\n /** Determines whether the component should take 100% width of its parent @default false */\n fullWidth?: boolean;\n\n /** Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode */\n color?: MantineColor;\n\n /** Controls `font-size`, `padding` and `height` properties @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Indicator `transition-duration` in ms, set `0` to turn off transitions @default 200 */\n transitionDuration?: number;\n\n /** Indicator `transition-timing-function` property @default ease */\n transitionTimingFunction?: string;\n\n /** Component orientation @default 'horizontal' */\n orientation?: 'vertical' | 'horizontal';\n\n /** If set to `false`, prevents changing the value */\n readOnly?: boolean;\n\n /** If set, automatically adjusts label text color for optimal contrast against the indicator background color */\n autoContrast?: boolean;\n\n /** Determines whether there should be borders between items @default true */\n withItemsBorders?: boolean;\n}\n\nexport type SegmentedControlFactory = Factory<{\n props: SegmentedControlProps;\n ref: HTMLDivElement;\n stylesNames: SegmentedControlStylesNames;\n vars: SegmentedControlCssVariables;\n signature: <Value extends Primitive = string>(\n props: SegmentedControlProps<Value>\n ) => React.JSX.Element | null;\n}>;\n\nconst defaultProps = {\n withItemsBorders: true,\n} satisfies Partial<SegmentedControlProps>;\n\nconst varsResolver = createVarsResolver<SegmentedControlFactory>(\n (theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({\n root: {\n '--sc-radius': radius === undefined ? undefined : getRadius(radius),\n '--sc-color': color ? getThemeColor(color, theme) : undefined,\n '--sc-shadow': color ? undefined : 'var(--mantine-shadow-xs)',\n '--sc-transition-duration':\n transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n '--sc-transition-timing-function': transitionTimingFunction,\n '--sc-padding': getSize(size, 'sc-padding'),\n '--sc-font-size': getFontSize(size),\n },\n })\n);\n\nexport const SegmentedControl = genericFactory<SegmentedControlFactory>((_props) => {\n const props = useProps('SegmentedControl', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n value,\n defaultValue,\n onChange,\n size,\n name,\n disabled,\n readOnly,\n fullWidth,\n orientation,\n radius,\n color,\n transitionDuration,\n transitionTimingFunction,\n variant,\n autoContrast,\n withItemsBorders,\n mod,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<SegmentedControlFactory>({\n name: 'SegmentedControl',\n props: props as any,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const theme = useMantineTheme();\n\n const _data = data.map((item) => (isPrimitive(item) ? { label: `${item}`, value: item } : item));\n\n const initialized = useMounted();\n const [key, setKey] = useState(randomId());\n const [parent, setParent] = useState<HTMLElement | null>(null);\n const [refs, setRefs] = useState<Record<string, HTMLElement | null>>({});\n const setElementRef = (element: HTMLElement | null, val: string) => {\n refs[val] = element;\n setRefs(refs);\n };\n\n const [_value, handleValueChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: Array.isArray(data)\n ? (_data.find((item) => !item.disabled)?.value ?? (data[0] as any)?.value ?? null)\n : null,\n onChange,\n });\n\n const uuid = useId(name);\n\n const controls = _data.map((item) => (\n <Box\n {...getStyles('control')}\n mod={{ active: _value === item.value, orientation }}\n key={`${item.value}`}\n >\n <input\n {...getStyles('input')}\n disabled={disabled || item.disabled}\n type=\"radio\"\n name={uuid}\n value={`${item.value}`}\n id={`${uuid}-${item.value}`}\n checked={_value === item.value}\n onChange={() => !readOnly && handleValueChange(item.value)}\n data-focus-ring={theme.focusRing}\n key={`${item.value}-input`}\n />\n\n <Box\n component=\"label\"\n {...getStyles('label')}\n mod={{\n active: _value === item.value && !(disabled || item.disabled),\n disabled: disabled || item.disabled,\n 'read-only': readOnly,\n }}\n htmlFor={`${uuid}-${item.value}`}\n ref={(node) => setElementRef(node, `${item.value}`)}\n __vars={{\n '--sc-label-color':\n color !== undefined ? getContrastColor({ color, theme, autoContrast }) : undefined,\n }}\n key={`${item.value}-label`}\n >\n <span {...getStyles('innerLabel')}>{item.label}</span>\n </Box>\n </Box>\n ));\n\n const mergedRef = useMergedRef(ref, (node) => setParent(node));\n\n useShallowEffect(() => {\n setKey(randomId());\n }, [data.length]);\n\n if (data.length === 0) {\n return null;\n }\n\n return (\n <Box\n {...getStyles('root')}\n variant={variant}\n size={size}\n ref={mergedRef}\n mod={[\n {\n 'full-width': fullWidth,\n orientation,\n initialized,\n 'with-items-borders': withItemsBorders,\n },\n mod,\n ]}\n {...others}\n role=\"radiogroup\"\n data-disabled={disabled}\n >\n {typeof _value !== 'undefined' && (\n <FloatingIndicator\n target={refs[`${_value}`]}\n parent={parent}\n component=\"span\"\n transitionDuration=\"var(--sc-transition-duration)\"\n key={key}\n {...getStyles('indicator')}\n />\n )}\n\n {controls}\n </Box>\n );\n});\n\nSegmentedControl.classes = classes;\nSegmentedControl.varsResolver = varsResolver;\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SegmentedControl.cjs","names":["createVarsResolver","getRadius","getThemeColor","getSize","getFontSize","genericFactory","useProps","useStyles","useMantineTheme","isPrimitive","Box","getContrastColor","FloatingIndicator","classes"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n randomId,\n useId,\n useMergedRef,\n useMounted,\n useShallowEffect,\n useUncontrolled,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n Factory,\n genericFactory,\n getContrastColor,\n getFontSize,\n getRadius,\n getSize,\n getThemeColor,\n isPrimitive,\n MantineColor,\n MantineRadius,\n MantineSize,\n Primitive,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '../../core';\nimport { FloatingIndicator } from '../FloatingIndicator';\nimport classes from './SegmentedControl.module.css';\n\nexport type SegmentedControlStylesNames =\n | 'root'\n | 'input'\n | 'label'\n | 'control'\n | 'indicator'\n | 'innerLabel';\nexport type SegmentedControlCssVariables = {\n root:\n | '--sc-radius'\n | '--sc-color'\n | '--sc-font-size'\n | '--sc-padding'\n | '--sc-shadow'\n | '--sc-transition-duration'\n | '--sc-transition-timing-function';\n};\n\nexport interface SegmentedControlItem<Value = string> {\n value: Value;\n label: React.ReactNode;\n disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends Primitive = string>\n extends\n BoxProps,\n StylesApiProps<SegmentedControlFactory>,\n ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n /** Data based on which controls are rendered */\n data: (Value | SegmentedControlItem<Value>)[];\n\n /** Controlled component value */\n value?: Value;\n\n /** Uncontrolled component default value */\n defaultValue?: Value;\n\n /** Called when value changes */\n onChange?: (value: Value) => void;\n\n /** Determines whether the component is disabled */\n disabled?: boolean;\n\n /** Name attribute for the radio group. A random name is auto-generated if not provided */\n name?: string;\n\n /** Determines whether the component should take 100% width of its parent @default false */\n fullWidth?: boolean;\n\n /** Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode */\n color?: MantineColor;\n\n /** Controls `font-size`, `padding` and `height` properties @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Indicator `transition-duration` in ms, set `0` to turn off transitions @default 200 */\n transitionDuration?: number;\n\n /** Indicator `transition-timing-function` property @default ease */\n transitionTimingFunction?: string;\n\n /** Component orientation @default 'horizontal' */\n orientation?: 'vertical' | 'horizontal';\n\n /** If set to `false`, prevents changing the value */\n readOnly?: boolean;\n\n /** If set, automatically adjusts label text color for optimal contrast against the indicator background color */\n autoContrast?: boolean;\n\n /** Determines whether there should be borders between items @default true */\n withItemsBorders?: boolean;\n}\n\nexport type SegmentedControlFactory = Factory<{\n props: SegmentedControlProps;\n ref: HTMLDivElement;\n stylesNames: SegmentedControlStylesNames;\n vars: SegmentedControlCssVariables;\n signature: <Value extends Primitive = string>(\n props: SegmentedControlProps<Value>\n ) => React.JSX.Element | null;\n}>;\n\nconst defaultProps = {\n withItemsBorders: true,\n} satisfies Partial<SegmentedControlProps>;\n\nconst varsResolver = createVarsResolver<SegmentedControlFactory>(\n (theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({\n root: {\n '--sc-radius': radius === undefined ? undefined : getRadius(radius),\n '--sc-color': color ? getThemeColor(color, theme) : undefined,\n '--sc-shadow': color ? undefined : 'var(--mantine-shadow-xs)',\n '--sc-transition-duration':\n transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n '--sc-transition-timing-function': transitionTimingFunction,\n '--sc-padding': getSize(size, 'sc-padding'),\n '--sc-font-size': getFontSize(size),\n },\n })\n);\n\nexport const SegmentedControl = genericFactory<SegmentedControlFactory>((_props) => {\n const props = useProps('SegmentedControl', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n value,\n defaultValue,\n onChange,\n size,\n name,\n disabled,\n readOnly,\n fullWidth,\n orientation,\n radius,\n color,\n transitionDuration,\n transitionTimingFunction,\n variant,\n autoContrast,\n withItemsBorders,\n mod,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<SegmentedControlFactory>({\n name: 'SegmentedControl',\n props: props as any,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const theme = useMantineTheme();\n\n const _data = data.map((item) => (isPrimitive(item) ? { label: `${item}`, value: item } : item));\n\n const initialized = useMounted();\n const [key, setKey] = useState(randomId());\n const [parent, setParent] = useState<HTMLElement | null>(null);\n const [refs, setRefs] = useState<Record<string, HTMLElement | null>>({});\n const setElementRef = (element: HTMLElement | null, val: string) => {\n refs[val] = element;\n setRefs(refs);\n };\n\n const [_value, handleValueChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: Array.isArray(data)\n ? (_data.find((item) => !item.disabled)?.value ?? (data[0] as any)?.value ?? null)\n : null,\n onChange,\n });\n\n const uuid = useId(name);\n\n const controls = _data.map((item) => (\n <Box\n {...getStyles('control')}\n mod={{ active: _value === item.value, orientation }}\n key={`${item.value}`}\n >\n <input\n {...getStyles('input')}\n disabled={disabled || item.disabled}\n type=\"radio\"\n name={uuid}\n value={`${item.value}`}\n id={`${uuid}-${item.value}`}\n checked={_value === item.value}\n onChange={() => !readOnly && handleValueChange(item.value)}\n data-focus-ring={theme.focusRing}\n key={`${item.value}-input`}\n />\n\n <Box\n component=\"label\"\n {...getStyles('label')}\n mod={{\n active: _value === item.value && !(disabled || item.disabled),\n disabled: disabled || item.disabled,\n 'read-only': readOnly,\n }}\n htmlFor={`${uuid}-${item.value}`}\n ref={(node) => setElementRef(node, `${item.value}`)}\n __vars={{\n '--sc-label-color':\n color !== undefined ? getContrastColor({ color, theme, autoContrast }) : undefined,\n }}\n key={`${item.value}-label`}\n >\n <span {...getStyles('innerLabel')}>{item.label}</span>\n </Box>\n </Box>\n ));\n\n const mergedRef = useMergedRef(ref, (node) => setParent(node));\n\n useShallowEffect(() => {\n setKey(randomId());\n }, [data.length]);\n\n if (data.length === 0) {\n return null;\n }\n\n return (\n <Box\n {...getStyles('root')}\n variant={variant}\n size={size}\n ref={mergedRef}\n mod={[\n {\n 'full-width': fullWidth,\n orientation,\n initialized,\n 'with-items-borders': withItemsBorders,\n },\n mod,\n ]}\n {...others}\n role=\"radiogroup\"\n data-disabled={disabled}\n >\n {typeof _value !== 'undefined' && (\n <FloatingIndicator\n target={refs[`${_value}`]}\n parent={parent}\n component=\"span\"\n transitionDuration=\"var(--sc-transition-duration)\"\n key={key}\n {...getStyles('indicator')}\n />\n )}\n\n {controls}\n </Box>\n );\n});\n\nSegmentedControl.classes = classes;\nSegmentedControl.varsResolver = varsResolver;\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n\nexport namespace SegmentedControl {\n export type CssVariables = SegmentedControlCssVariables;\n export type Factory = SegmentedControlFactory;\n export type Item<Value extends Primitive = string> = SegmentedControlItem<Value>;\n export type Props<Value extends Primitive = string> = SegmentedControlProps<Value>;\n export type StylesNames = SegmentedControlStylesNames;\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n --sc-padding-xs: 2px 6px;\n --sc-padding-sm: 3px 10px;\n --sc-padding-md: 4px 14px;\n --sc-padding-lg: 7px 16px;\n --sc-padding-xl: 10px 20px;\n\n --sc-transition-duration: 200ms;\n --sc-padding: var(--sc-padding-sm);\n --sc-transition-timing-function: ease;\n --sc-font-size: var(--mantine-font-size-sm);\n\n position: relative;\n display: inline-flex;\n flex-direction: row;\n width: auto;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n overflow: hidden;\n padding: 4px;\n\n &:where([data-full-width]) {\n display: flex;\n }\n\n &:where([data-orientation='vertical']) {\n display: flex;\n flex-direction: column;\n width: max-content;\n\n &:where([data-full-width]) {\n width: auto;\n }\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n}\n\n.indicator {\n position: absolute;\n display: block;\n z-index: 1;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n}\n\n.label {\n -webkit-tap-highlight-color: transparent;\n font-weight: var(--mantine-font-weight-medium);\n display: block;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n font-size: var(--sc-font-size);\n padding: var(--sc-padding);\n transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n cursor: pointer;\n\n /* outline is controlled by .input */\n outline: var(--segmented-control-outline, none);\n\n @mixin where-light {\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-1);\n }\n\n &:where([data-read-only]) {\n cursor: default;\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n }\n\n &:where([data-active]) {\n @mixin where-light {\n color: var(--sc-label-color, var(--mantine-color-black));\n }\n\n @mixin where-dark {\n color: var(--sc-label-color, var(--mantine-color-white));\n }\n\n &::before {\n .root:where([data-initialized]) & {\n display: none;\n }\n content: '';\n inset: 0;\n z-index: 0;\n position: absolute;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n }\n }\n\n &:where(:not([data-disabled], [data-active], [data-read-only])) {\n @mixin hover {\n @mixin where-light {\n color: var(--mantine-color-black);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n }\n }\n }\n\n fieldset:disabled & {\n @mixin hover {\n color: var(--mantine-color-disabled-color) !important;\n }\n }\n}\n\n.input {\n height: 0;\n width: 0;\n position: absolute;\n overflow: hidden;\n white-space: nowrap;\n opacity: 0;\n\n &[data-focus-ring='auto'] {\n &:focus:focus-visible {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n\n &[data-focus-ring='always'] {\n &:focus {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n}\n\n.control {\n position: relative;\n flex: 1;\n z-index: 2;\n transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n .root[data-with-items-borders] :where(&)::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n background-color: var(--separator-color);\n width: 1px;\n transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n }\n\n &[data-orientation='vertical'] {\n &::before {\n top: 0;\n inset-inline: 0;\n bottom: auto;\n height: 1px;\n width: auto;\n }\n }\n\n @mixin where-light {\n --separator-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --separator-color: var(--mantine-color-dark-4);\n }\n\n &:first-of-type {\n &::before {\n --separator-color: transparent;\n }\n }\n\n &[data-active] {\n [data-mantine-color-scheme] & {\n &,\n & + .control {\n &::before {\n --separator-color: transparent;\n }\n }\n }\n }\n}\n\n.innerLabel {\n position: relative;\n z-index: 2;\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n --sc-padding-xs: 2px 6px;\n --sc-padding-sm: 3px 10px;\n --sc-padding-md: 4px 14px;\n --sc-padding-lg: 7px 16px;\n --sc-padding-xl: 10px 20px;\n\n --sc-transition-duration: 200ms;\n --sc-padding: var(--sc-padding-sm);\n --sc-transition-timing-function: ease;\n --sc-font-size: var(--mantine-font-size-sm);\n\n position: relative;\n display: inline-flex;\n flex-direction: row;\n width: auto;\n border-radius: var(--sc-radius, var(--mantine-radius-default));\n overflow: hidden;\n padding: 4px;\n\n &:where([data-full-width]) {\n display: flex;\n }\n\n &:where([data-orientation='vertical']) {\n display: flex;\n flex-direction: column;\n width: max-content;\n\n &:where([data-full-width]) {\n width: auto;\n }\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n}\n\n.indicator {\n position: absolute;\n display: block;\n z-index: 1;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n}\n\n.label {\n -webkit-tap-highlight-color: transparent;\n font-weight: var(--mantine-font-weight-medium);\n display: block;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n font-size: var(--sc-font-size);\n padding: var(--sc-padding);\n transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n cursor: pointer;\n\n /* outline is controlled by .input */\n outline: var(--segmented-control-outline, none);\n\n @mixin where-light {\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-1);\n }\n\n &:where([data-read-only]) {\n cursor: default;\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n }\n\n &:where([data-active]) {\n @mixin where-light {\n color: var(--sc-label-color, var(--mantine-color-black));\n }\n\n @mixin where-dark {\n color: var(--sc-label-color, var(--mantine-color-white));\n }\n\n &::before {\n .root:where([data-initialized]) & {\n display: none;\n }\n content: '';\n inset: 0;\n z-index: 0;\n position: absolute;\n border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n @mixin where-light {\n box-shadow: var(--sc-shadow, none);\n background-color: var(--sc-color, var(--mantine-color-white));\n }\n\n @mixin where-dark {\n box-shadow: none;\n background-color: var(--sc-color, var(--mantine-color-dark-5));\n }\n }\n }\n\n &:where(:not([data-disabled], [data-active], [data-read-only])) {\n @mixin hover {\n @mixin where-light {\n color: var(--mantine-color-black);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n }\n }\n }\n\n fieldset:disabled & {\n @mixin hover {\n color: var(--mantine-color-disabled-color) !important;\n }\n }\n}\n\n.input {\n height: 0;\n width: 0;\n position: absolute;\n overflow: hidden;\n white-space: nowrap;\n opacity: 0;\n\n &[data-focus-ring='auto'] {\n &:focus:focus-visible {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n\n &[data-focus-ring='always'] {\n &:focus {\n & + .label {\n --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n }\n }\n }\n}\n\n.control {\n position: relative;\n flex: 1;\n z-index: 2;\n transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n .root[data-with-items-borders] :where(&)::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n background-color: var(--separator-color);\n width: 1px;\n transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n }\n\n &[data-orientation='vertical'] {\n &::before {\n top: 0;\n inset-inline: 0;\n bottom: auto;\n height: 1px;\n width: auto;\n }\n }\n\n @mixin where-light {\n --separator-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --separator-color: var(--mantine-color-dark-4);\n }\n\n &:first-of-type {\n &::before {\n --separator-color: transparent;\n }\n }\n\n &[data-active] {\n [data-mantine-color-scheme] & {\n &,\n & + .control {\n &::before {\n --separator-color: transparent;\n }\n }\n }\n }\n}\n\n.innerLabel {\n position: relative;\n z-index: 2;\n}\n"],"mappings":""}
|
|
@@ -14,6 +14,7 @@ let _mantine_hooks = require("@mantine/hooks");
|
|
|
14
14
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
15
15
|
//#region packages/@mantine/core/src/components/Select/Select.tsx
|
|
16
16
|
const defaultProps = {
|
|
17
|
+
size: "sm",
|
|
17
18
|
withCheckIcon: true,
|
|
18
19
|
allowDeselect: true,
|
|
19
20
|
checkIconPosition: "left",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<SelectFactory>,\n ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n /** Controlled component value */\n value?: Value | null;\n\n /** Uncontrolled component default value */\n defaultValue?: Value | null;\n\n /** Called when value changes */\n onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\n\n /** Determines whether the select should be searchable @default false */\n searchable?: boolean;\n\n /** Displays check icon near the selected option label @default true */\n withCheckIcon?: boolean;\n\n /** Aligns unchecked labels with the checked one @default false */\n withAlignedLabels?: boolean;\n\n /** Position of the check icon relative to the option label @default 'left' */\n checkIconPosition?: 'left' | 'right';\n\n /** Message displayed when no options match the search query or when there is no data */\n nothingFoundMessage?: React.ReactNode;\n\n /** Controlled search value */\n searchValue?: string;\n\n /** Default search value */\n defaultSearchValue?: string;\n\n /** Called when search changes */\n onSearchChange?: (value: string) => void;\n\n /** Allows deselecting the selected option by clicking it @default true */\n allowDeselect?: boolean;\n\n /** Displays clear button in the right section when component has value @default false */\n clearable?: boolean;\n\n /** Determines how the clear button and rightSection are rendered @default 'both' */\n clearSectionMode?: ClearSectionMode;\n\n /** Props passed down to the clear button */\n clearButtonProps?: InputClearButtonProps;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n scrollAreaProps?: ScrollAreaProps;\n\n /** Controls color of the default chevron, by default depends on the color scheme */\n chevronColor?: MantineColor;\n\n /** Automatically selects the highlighted option when input loses focus @default false */\n autoSelectOnBlur?: boolean;\n\n /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n props: SelectProps;\n ref: HTMLInputElement;\n stylesNames: SelectStylesNames;\n variant: InputVariant;\n signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n const props = useProps('Select', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownClose,\n onDropdownOpen,\n onFocus,\n onBlur,\n onClick,\n onChange,\n data,\n value,\n defaultValue,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n readOnly,\n disabled,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n size,\n searchable,\n rightSection,\n checkIconPosition,\n withCheckIcon,\n withAlignedLabels,\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n error,\n rightSectionPointerEvents,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n scrollAreaProps,\n __defaultRightSection,\n __clearSection,\n __clearable,\n chevronColor,\n autoSelectOnBlur,\n openOnFocus,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n const _id = useId(id);\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedOption =\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]\n : undefined;\n const previousSelectedOption = usePrevious(selectedOption);\n\n const [search, setSearch, searchControlled] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: selectedOption ? selectedOption.label : '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n } else {\n combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleSearchChange = (value: string) => {\n setSearch(value);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n props,\n styles,\n classNames,\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, search]);\n\n useEffect(() => {\n if (value === null) {\n handleSearchChange('');\n }\n\n if (\n value != null &&\n selectedOption &&\n (previousSelectedOption?.value !== selectedOption.value ||\n previousSelectedOption?.label !== selectedOption.label)\n ) {\n handleSearchChange(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n useEffect(() => {\n if (!controlled && !searchControlled) {\n handleSearchChange(\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]?.label\n : retainedSelectedOptions.current[`${_value}`]?.label || ''\n : ''\n );\n }\n }, [optionsLockup, _value]);\n\n useEffect(() => {\n if (_value) {\n if (`${_value}` in optionsLockup) {\n retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n }\n }\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue(null, null);\n handleSearchChange('');\n onClear?.();\n }}\n />\n );\n\n const _clearable = clearable && !!_value && !disabled && !readOnly;\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"Select\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n readOnly={readOnly}\n size={size}\n attributes={attributes}\n keepMounted={autoSelectOnBlur}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n const optionLockup = allowDeselect\n ? `${optionsLockup[val].value}` === `${_value}`\n ? null\n : optionsLockup[val]\n : optionsLockup[val];\n\n const nextValue = optionLockup ? optionLockup.value : null;\n\n nextValue !== _value && setValue(nextValue as any, optionLockup);\n !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n <Combobox.Target\n targetType={searchable ? 'input' : 'button'}\n autoComplete={autoComplete}\n withExpandedAttribute\n >\n <InputBase\n id={_id}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n {...others}\n size={size}\n __staticSelector=\"Select\"\n disabled={disabled}\n readOnly={readOnly || !searchable}\n value={search}\n onChange={(event) => {\n handleSearchChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n openOnFocus && !!searchable && combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n !!searchable && combobox.closeDropdown();\n const optionLockup =\n _value != null &&\n (`${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]);\n handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n onBlur?.(event);\n }}\n onClick={(event) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n pointer={!searchable}\n error={error}\n attributes={attributes}\n />\n </Combobox.Target>\n <OptionsDropdown\n data={parsedData as any}\n hidden={readOnly || disabled}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={search}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={!!searchable && selectedOption?.label !== search}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={others.label ? `${_id}-label` : undefined}\n aria-label={others.label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n value={_value}\n name={name}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<SelectFactory>,\n ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n /** Controlled component value */\n value?: Value | null;\n\n /** Uncontrolled component default value */\n defaultValue?: Value | null;\n\n /** Called when value changes */\n onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\n\n /** Determines whether the select should be searchable @default false */\n searchable?: boolean;\n\n /** Displays check icon near the selected option label @default true */\n withCheckIcon?: boolean;\n\n /** Aligns unchecked labels with the checked one @default false */\n withAlignedLabels?: boolean;\n\n /** Position of the check icon relative to the option label @default 'left' */\n checkIconPosition?: 'left' | 'right';\n\n /** Message displayed when no options match the search query or when there is no data */\n nothingFoundMessage?: React.ReactNode;\n\n /** Controlled search value */\n searchValue?: string;\n\n /** Default search value */\n defaultSearchValue?: string;\n\n /** Called when search changes */\n onSearchChange?: (value: string) => void;\n\n /** Allows deselecting the selected option by clicking it @default true */\n allowDeselect?: boolean;\n\n /** Displays clear button in the right section when component has value @default false */\n clearable?: boolean;\n\n /** Determines how the clear button and rightSection are rendered @default 'both' */\n clearSectionMode?: ClearSectionMode;\n\n /** Props passed down to the clear button */\n clearButtonProps?: InputClearButtonProps;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n scrollAreaProps?: ScrollAreaProps;\n\n /** Controls color of the default chevron, by default depends on the color scheme */\n chevronColor?: MantineColor;\n\n /** Automatically selects the highlighted option when input loses focus @default false */\n autoSelectOnBlur?: boolean;\n\n /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n props: SelectProps;\n ref: HTMLInputElement;\n stylesNames: SelectStylesNames;\n variant: InputVariant;\n signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n const props = useProps('Select', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownClose,\n onDropdownOpen,\n onFocus,\n onBlur,\n onClick,\n onChange,\n data,\n value,\n defaultValue,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n readOnly,\n disabled,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n size,\n searchable,\n rightSection,\n checkIconPosition,\n withCheckIcon,\n withAlignedLabels,\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n error,\n rightSectionPointerEvents,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n scrollAreaProps,\n __defaultRightSection,\n __clearSection,\n __clearable,\n chevronColor,\n autoSelectOnBlur,\n openOnFocus,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n const _id = useId(id);\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedOption =\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]\n : undefined;\n const previousSelectedOption = usePrevious(selectedOption);\n\n const [search, setSearch, searchControlled] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: selectedOption ? selectedOption.label : '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n } else {\n combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleSearchChange = (value: string) => {\n setSearch(value);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n props,\n styles,\n classNames,\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, search]);\n\n useEffect(() => {\n if (value === null) {\n handleSearchChange('');\n }\n\n if (\n value != null &&\n selectedOption &&\n (previousSelectedOption?.value !== selectedOption.value ||\n previousSelectedOption?.label !== selectedOption.label)\n ) {\n handleSearchChange(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n useEffect(() => {\n if (!controlled && !searchControlled) {\n handleSearchChange(\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]?.label\n : retainedSelectedOptions.current[`${_value}`]?.label || ''\n : ''\n );\n }\n }, [optionsLockup, _value]);\n\n useEffect(() => {\n if (_value) {\n if (`${_value}` in optionsLockup) {\n retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n }\n }\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue(null, null);\n handleSearchChange('');\n onClear?.();\n }}\n />\n );\n\n const _clearable = clearable && !!_value && !disabled && !readOnly;\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"Select\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n readOnly={readOnly}\n size={size}\n attributes={attributes}\n keepMounted={autoSelectOnBlur}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n const optionLockup = allowDeselect\n ? `${optionsLockup[val].value}` === `${_value}`\n ? null\n : optionsLockup[val]\n : optionsLockup[val];\n\n const nextValue = optionLockup ? optionLockup.value : null;\n\n nextValue !== _value && setValue(nextValue as any, optionLockup);\n !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n <Combobox.Target\n targetType={searchable ? 'input' : 'button'}\n autoComplete={autoComplete}\n withExpandedAttribute\n >\n <InputBase\n id={_id}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n {...others}\n size={size}\n __staticSelector=\"Select\"\n disabled={disabled}\n readOnly={readOnly || !searchable}\n value={search}\n onChange={(event) => {\n handleSearchChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n openOnFocus && !!searchable && combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n !!searchable && combobox.closeDropdown();\n const optionLockup =\n _value != null &&\n (`${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]);\n handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n onBlur?.(event);\n }}\n onClick={(event) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n pointer={!searchable}\n error={error}\n attributes={attributes}\n />\n </Combobox.Target>\n <OptionsDropdown\n data={parsedData as any}\n hidden={readOnly || disabled}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={search}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={!!searchable && selectedOption?.label !== search}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={others.label ? `${_id}-label` : undefined}\n aria-label={others.label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n value={_value}\n name={name}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n export type Props<Value extends Primitive = string> = SelectProps<Value>;\n export type StylesNames = SelectStylesNames;\n export type Factory = SelectFactory;\n}\n"],"mappings":"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"}
|
|
@@ -65,8 +65,7 @@ const SemiCircleProgress = require_factory.factory((_props) => {
|
|
|
65
65
|
"data-orientation": orientation,
|
|
66
66
|
children: label
|
|
67
67
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
68
|
-
|
|
69
|
-
height: size / 2,
|
|
68
|
+
viewBox: `0 0 ${size} ${size / 2}`,
|
|
70
69
|
...getStyles("svg"),
|
|
71
70
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
72
71
|
cx: coordinateForCircle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemiCircleProgress.cjs","names":["createVarsResolver","getThemeColor","rem","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/SemiCircleProgress/SemiCircleProgress.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './SemiCircleProgress.module.css';\n\nexport type SemiCircleProgressStylesNames =\n | 'root'\n | 'svg'\n | 'emptySegment'\n | 'filledSegment'\n | 'label';\n\nexport type SemiCircleProgressCssVariables = {\n root:\n | '--scp-filled-segment-color'\n | '--scp-empty-segment-color'\n | '--scp-rotation'\n | '--scp-transition-duration'\n | '--scp-thickness';\n};\n\nexport interface SemiCircleProgressProps\n extends BoxProps, StylesApiProps<SemiCircleProgressFactory>, ElementProps<'div'> {\n /** Progress value from `0` to `100` */\n value: number;\n\n /** Width of the component and diameter of the full circle in px. The visible SVG height will be size/2 @default 200 */\n size?: number;\n\n /** Stroke width of the circle segments in px @default 12 */\n thickness?: number;\n\n /** Orientation of the circle @default 'up' */\n orientation?: 'up' | 'down';\n\n /** Direction from which the circle is filled @default 'left-to-right' */\n fillDirection?: 'right-to-left' | 'left-to-right';\n\n /** Key of `theme.colors` or any valid CSS color value @default theme.primaryColor */\n filledSegmentColor?: MantineColor;\n\n /** Key of `theme.colors` or any valid CSS color value @default 'gray.2' in light mode, 'dark.4' in dark mode */\n emptySegmentColor?: MantineColor;\n\n /** Transition duration for the filled segment progress changes in ms. Does not affect color transitions @default 0 */\n transitionDuration?: number;\n\n /** Label rendered inside the circle */\n label?: React.ReactNode;\n\n /** Label position relative to the circle center @default 'bottom' */\n labelPosition?: 'center' | 'bottom';\n}\n\nexport type SemiCircleProgressFactory = Factory<{\n props: SemiCircleProgressProps;\n ref: HTMLDivElement;\n stylesNames: SemiCircleProgressStylesNames;\n vars: SemiCircleProgressCssVariables;\n}>;\n\nconst defaultProps = {\n size: 200,\n thickness: 12,\n orientation: 'up',\n fillDirection: 'left-to-right',\n labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>;\n\nfunction getRotation({\n orientation,\n fillDirection,\n}: Pick<SemiCircleProgressProps, 'orientation' | 'fillDirection'>) {\n if (orientation === 'down') {\n if (fillDirection === 'right-to-left') {\n return 'rotate(180deg) rotateY(180deg)';\n }\n return 'rotate(180deg)';\n }\n if (fillDirection === 'left-to-right') {\n return 'rotateY(180deg)';\n }\n\n return undefined;\n}\n\nconst varsResolver = createVarsResolver<SemiCircleProgressFactory>(\n (\n theme,\n {\n filledSegmentColor,\n emptySegmentColor,\n orientation,\n fillDirection,\n transitionDuration,\n thickness,\n }\n ) => ({\n root: {\n '--scp-filled-segment-color': filledSegmentColor\n ? getThemeColor(filledSegmentColor, theme)\n : undefined,\n '--scp-empty-segment-color': emptySegmentColor\n ? getThemeColor(emptySegmentColor, theme)\n : undefined,\n '--scp-rotation': getRotation({ orientation, fillDirection }),\n '--scp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,\n '--scp-thickness': rem(thickness),\n },\n })\n);\n\nexport const SemiCircleProgress = factory<SemiCircleProgressFactory>((_props) => {\n const props = useProps('SemiCircleProgress', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n thickness,\n value,\n orientation,\n fillDirection,\n filledSegmentColor,\n emptySegmentColor,\n transitionDuration,\n label,\n labelPosition,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<SemiCircleProgressFactory>({\n name: 'SemiCircleProgress',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const coordinateForCircle = size / 2;\n const radius = (size - 2 * thickness) / 2;\n const circumference = Math.PI * radius;\n const semiCirclePercentage = clamp(value, 0, 100) * (circumference / 100);\n\n return (\n <Box size={size} {...getStyles('root')} {...others}>\n {label && (\n <div {...getStyles('label')} data-position={labelPosition} data-orientation={orientation}>\n {label}\n </div>\n )}\n\n <svg
|
|
1
|
+
{"version":3,"file":"SemiCircleProgress.cjs","names":["createVarsResolver","getThemeColor","rem","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/SemiCircleProgress/SemiCircleProgress.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './SemiCircleProgress.module.css';\n\nexport type SemiCircleProgressStylesNames =\n | 'root'\n | 'svg'\n | 'emptySegment'\n | 'filledSegment'\n | 'label';\n\nexport type SemiCircleProgressCssVariables = {\n root:\n | '--scp-filled-segment-color'\n | '--scp-empty-segment-color'\n | '--scp-rotation'\n | '--scp-transition-duration'\n | '--scp-thickness';\n};\n\nexport interface SemiCircleProgressProps\n extends BoxProps, StylesApiProps<SemiCircleProgressFactory>, ElementProps<'div'> {\n /** Progress value from `0` to `100` */\n value: number;\n\n /** Width of the component and diameter of the full circle in px. The visible SVG height will be size/2 @default 200 */\n size?: number;\n\n /** Stroke width of the circle segments in px @default 12 */\n thickness?: number;\n\n /** Orientation of the circle @default 'up' */\n orientation?: 'up' | 'down';\n\n /** Direction from which the circle is filled @default 'left-to-right' */\n fillDirection?: 'right-to-left' | 'left-to-right';\n\n /** Key of `theme.colors` or any valid CSS color value @default theme.primaryColor */\n filledSegmentColor?: MantineColor;\n\n /** Key of `theme.colors` or any valid CSS color value @default 'gray.2' in light mode, 'dark.4' in dark mode */\n emptySegmentColor?: MantineColor;\n\n /** Transition duration for the filled segment progress changes in ms. Does not affect color transitions @default 0 */\n transitionDuration?: number;\n\n /** Label rendered inside the circle */\n label?: React.ReactNode;\n\n /** Label position relative to the circle center @default 'bottom' */\n labelPosition?: 'center' | 'bottom';\n}\n\nexport type SemiCircleProgressFactory = Factory<{\n props: SemiCircleProgressProps;\n ref: HTMLDivElement;\n stylesNames: SemiCircleProgressStylesNames;\n vars: SemiCircleProgressCssVariables;\n}>;\n\nconst defaultProps = {\n size: 200,\n thickness: 12,\n orientation: 'up',\n fillDirection: 'left-to-right',\n labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>;\n\nfunction getRotation({\n orientation,\n fillDirection,\n}: Pick<SemiCircleProgressProps, 'orientation' | 'fillDirection'>) {\n if (orientation === 'down') {\n if (fillDirection === 'right-to-left') {\n return 'rotate(180deg) rotateY(180deg)';\n }\n return 'rotate(180deg)';\n }\n if (fillDirection === 'left-to-right') {\n return 'rotateY(180deg)';\n }\n\n return undefined;\n}\n\nconst varsResolver = createVarsResolver<SemiCircleProgressFactory>(\n (\n theme,\n {\n filledSegmentColor,\n emptySegmentColor,\n orientation,\n fillDirection,\n transitionDuration,\n thickness,\n }\n ) => ({\n root: {\n '--scp-filled-segment-color': filledSegmentColor\n ? getThemeColor(filledSegmentColor, theme)\n : undefined,\n '--scp-empty-segment-color': emptySegmentColor\n ? getThemeColor(emptySegmentColor, theme)\n : undefined,\n '--scp-rotation': getRotation({ orientation, fillDirection }),\n '--scp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,\n '--scp-thickness': rem(thickness),\n },\n })\n);\n\nexport const SemiCircleProgress = factory<SemiCircleProgressFactory>((_props) => {\n const props = useProps('SemiCircleProgress', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n thickness,\n value,\n orientation,\n fillDirection,\n filledSegmentColor,\n emptySegmentColor,\n transitionDuration,\n label,\n labelPosition,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<SemiCircleProgressFactory>({\n name: 'SemiCircleProgress',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const coordinateForCircle = size / 2;\n const radius = (size - 2 * thickness) / 2;\n const circumference = Math.PI * radius;\n const semiCirclePercentage = clamp(value, 0, 100) * (circumference / 100);\n\n return (\n <Box size={size} {...getStyles('root')} {...others}>\n {label && (\n <div {...getStyles('label')} data-position={labelPosition} data-orientation={orientation}>\n {label}\n </div>\n )}\n\n <svg viewBox={`0 0 ${size} ${size / 2}`} {...getStyles('svg')}>\n <circle\n cx={coordinateForCircle}\n cy={coordinateForCircle}\n r={radius}\n fill=\"none\"\n stroke=\"var(--scp-empty-segment-color)\"\n strokeWidth={thickness}\n strokeDasharray={circumference}\n {...getStyles('emptySegment', { style: { strokeDashoffset: circumference } })}\n />\n\n <circle\n cx={coordinateForCircle}\n cy={coordinateForCircle}\n r={radius}\n fill=\"none\"\n stroke=\"var(--scp-filled-segment-color)\"\n strokeWidth={thickness}\n strokeDasharray={circumference}\n {...getStyles('filledSegment', { style: { strokeDashoffset: semiCirclePercentage } })}\n />\n </svg>\n </Box>\n );\n});\n\nSemiCircleProgress.displayName = '@mantine/core/SemiCircleProgress';\nSemiCircleProgress.classes = classes;\nSemiCircleProgress.varsResolver = varsResolver;\n\nexport namespace SemiCircleProgress {\n export type Props = SemiCircleProgressProps;\n export type StylesNames = SemiCircleProgressStylesNames;\n export type CssVariables = SemiCircleProgressCssVariables;\n export type Factory = SemiCircleProgressFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;CACX,aAAa;CACb,eAAe;CACf,eAAe;CAChB;AAED,SAAS,YAAY,EACnB,aACA,iBACiE;AACjE,KAAI,gBAAgB,QAAQ;AAC1B,MAAI,kBAAkB,gBACpB,QAAO;AAET,SAAO;;AAET,KAAI,kBAAkB,gBACpB,QAAO;;AAMX,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EACE,oBACA,mBACA,aACA,eACA,oBACA,iBAEE,EACJ,MAAM;CACJ,8BAA8B,qBAC1BC,wBAAAA,cAAc,oBAAoB,MAAM,GACxC,KAAA;CACJ,6BAA6B,oBACzBA,wBAAAA,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACJ,kBAAkB,YAAY;EAAE;EAAa;EAAe,CAAC;CAC7D,6BAA6B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;CAC9E,mBAAmBC,YAAAA,IAAI,UAAU;CAClC,EACF,EACF;AAED,MAAa,qBAAqBC,gBAAAA,SAAoC,WAAW;CAC/E,MAAM,QAAQC,kBAAAA,SAAS,sBAAsB,cAAc,OAAO;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,WACA,OACA,aACA,eACA,oBACA,mBACA,oBACA,OACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAqC;EACrD,MAAM;EACN,SAAA,kCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsB,OAAO;CACnC,MAAM,UAAU,OAAO,IAAI,aAAa;CACxC,MAAM,gBAAgB,KAAK,KAAK;CAChC,MAAM,wBAAA,GAAA,eAAA,OAA6B,OAAO,GAAG,IAAI,IAAI,gBAAgB;AAErE,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAW;EAAM,GAAI,UAAU,OAAO;EAAE,GAAI;YAA5C,CACG,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,iBAAe;GAAe,oBAAkB;aAC1E;GACG,CAAA,EAGR,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,SAAS,OAAO,KAAK,GAAG,OAAO;GAAK,GAAI,UAAU,MAAM;aAA7D,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,eAAe,EAAE,CAAC;IAC7E,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,sBAAsB,EAAE,CAAC;IACrF,CAAA,CACE;KACF;;EAER;AAEF,mBAAmB,cAAc;AACjC,mBAAmB,UAAUC,kCAAAA;AAC7B,mBAAmB,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleGrid.cjs","names":["factory","useProps","useStyles","useRandomClassName","SimpleGridContainerVariables","Box","SimpleGridMediaVariables","classes"],"sources":["../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n Factory,\n factory,\n MantineSpacing,\n StyleProp,\n StylesApiProps,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { SimpleGridContainerVariables, SimpleGridMediaVariables } from './SimpleGridVariables';\nimport classes from './SimpleGrid.module.css';\n\nexport type SimpleGridStylesNames = 'root' | 'container';\n\nexport interface SimpleGridProps\n extends BoxProps, StylesApiProps<SimpleGridFactory>, ElementProps<'div'> {\n /** Number of columns @default 1 */\n cols?: StyleProp<number>;\n\n /** Spacing between columns @default 'md' */\n spacing?: StyleProp<MantineSpacing>;\n\n /** Spacing between rows. When not set, falls back to spacing value @default undefined */\n verticalSpacing?: StyleProp<MantineSpacing>;\n\n /** Determines type of queries that are used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Minimum column width when using auto-fit/auto-fill. When set, cols prop is ignored */\n minColWidth?: string | number;\n\n /** Grid repeat type when minColWidth is set @default 'auto-fill' */\n autoFlow?: 'auto-fit' | 'auto-fill';\n\n /** Sets the size of implicitly created grid rows */\n autoRows?: string;\n}\n\nexport type SimpleGridFactory = Factory<{\n props: SimpleGridProps;\n ref: HTMLDivElement;\n stylesNames: SimpleGridStylesNames;\n}>;\n\nconst defaultProps = {\n cols: 1,\n spacing: 'md',\n type: 'media',\n} satisfies Partial<SimpleGridProps>;\n\nexport const SimpleGrid = factory<SimpleGridFactory>((_props) => {\n const props = useProps('SimpleGrid', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n cols,\n verticalSpacing,\n spacing,\n type,\n minColWidth,\n autoFlow,\n autoRows,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<SimpleGridFactory>({\n name: 'SimpleGrid',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const responsiveClassName = useRandomClassName();\n\n const autoColsAttr = minColWidth !== undefined ? autoFlow || 'auto-fill' : undefined;\n\n if (type === 'container') {\n return (\n <>\n <SimpleGridContainerVariables {...props} selector={`.${responsiveClassName}`} />\n <div {...getStyles('container')}>\n <Box\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n data-auto-cols={autoColsAttr}\n />\n </div>\n </>\n );\n }\n\n return (\n <>\n <SimpleGridMediaVariables {...props} selector={`.${responsiveClassName}`} />\n <Box\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n data-auto-cols={autoColsAttr}\n />\n </>\n );\n});\n\nSimpleGrid.classes = classes;\nSimpleGrid.displayName = '@mantine/core/SimpleGrid';\n"],"mappings":";;;;;;;;;;;AAgDA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,MAAM;CACP;AAED,MAAa,aAAaA,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,iBACA,SACA,MACA,aACA,UACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsBC,6BAAAA,oBAAoB;CAEhD,MAAM,eAAe,gBAAgB,KAAA,IAAY,YAAY,cAAc,KAAA;AAE3E,KAAI,SAAS,YACX,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,8BAAD;EAA8B,GAAI;EAAO,UAAU,IAAI;EAAyB,CAAA,EAChF,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI,UAAU,YAAY;YAC7B,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;GACzD,GAAI;GACJ,kBAAgB;GAChB,CAAA;EACE,CAAA,CACL,EAAA,CAAA;AAIP,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,0BAAD;EAA0B,GAAI;EAAO,UAAU,IAAI;EAAyB,CAAA,EAC5E,iBAAA,GAAA,kBAAA,KAACD,YAAAA,KAAD;EACE,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;EACzD,GAAI;EACJ,kBAAgB;EAChB,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,WAAW,UAAUE,0BAAAA;AACrB,WAAW,cAAc"}
|
|
1
|
+
{"version":3,"file":"SimpleGrid.cjs","names":["factory","useProps","useStyles","useRandomClassName","SimpleGridContainerVariables","Box","SimpleGridMediaVariables","classes"],"sources":["../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n Factory,\n factory,\n MantineSpacing,\n StyleProp,\n StylesApiProps,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { SimpleGridContainerVariables, SimpleGridMediaVariables } from './SimpleGridVariables';\nimport classes from './SimpleGrid.module.css';\n\nexport type SimpleGridStylesNames = 'root' | 'container';\n\nexport interface SimpleGridProps\n extends BoxProps, StylesApiProps<SimpleGridFactory>, ElementProps<'div'> {\n /** Number of columns @default 1 */\n cols?: StyleProp<number>;\n\n /** Spacing between columns @default 'md' */\n spacing?: StyleProp<MantineSpacing>;\n\n /** Spacing between rows. When not set, falls back to spacing value @default undefined */\n verticalSpacing?: StyleProp<MantineSpacing>;\n\n /** Determines type of queries that are used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Minimum column width when using auto-fit/auto-fill. When set, cols prop is ignored */\n minColWidth?: string | number;\n\n /** Grid repeat type when minColWidth is set @default 'auto-fill' */\n autoFlow?: 'auto-fit' | 'auto-fill';\n\n /** Sets the size of implicitly created grid rows */\n autoRows?: string;\n}\n\nexport type SimpleGridFactory = Factory<{\n props: SimpleGridProps;\n ref: HTMLDivElement;\n stylesNames: SimpleGridStylesNames;\n}>;\n\nconst defaultProps = {\n cols: 1,\n spacing: 'md',\n type: 'media',\n} satisfies Partial<SimpleGridProps>;\n\nexport const SimpleGrid = factory<SimpleGridFactory>((_props) => {\n const props = useProps('SimpleGrid', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n cols,\n verticalSpacing,\n spacing,\n type,\n minColWidth,\n autoFlow,\n autoRows,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<SimpleGridFactory>({\n name: 'SimpleGrid',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const responsiveClassName = useRandomClassName();\n\n const autoColsAttr = minColWidth !== undefined ? autoFlow || 'auto-fill' : undefined;\n\n if (type === 'container') {\n return (\n <>\n <SimpleGridContainerVariables {...props} selector={`.${responsiveClassName}`} />\n <div {...getStyles('container')}>\n <Box\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n data-auto-cols={autoColsAttr}\n />\n </div>\n </>\n );\n }\n\n return (\n <>\n <SimpleGridMediaVariables {...props} selector={`.${responsiveClassName}`} />\n <Box\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n data-auto-cols={autoColsAttr}\n />\n </>\n );\n});\n\nSimpleGrid.classes = classes;\nSimpleGrid.displayName = '@mantine/core/SimpleGrid';\n\nexport namespace SimpleGrid {\n export type Props = SimpleGridProps;\n export type StylesNames = SimpleGridStylesNames;\n export type Factory = SimpleGridFactory;\n}\n"],"mappings":";;;;;;;;;;;AAgDA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,MAAM;CACP;AAED,MAAa,aAAaA,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,iBACA,SACA,MACA,aACA,UACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsBC,6BAAAA,oBAAoB;CAEhD,MAAM,eAAe,gBAAgB,KAAA,IAAY,YAAY,cAAc,KAAA;AAE3E,KAAI,SAAS,YACX,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,8BAAD;EAA8B,GAAI;EAAO,UAAU,IAAI;EAAyB,CAAA,EAChF,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI,UAAU,YAAY;YAC7B,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;GACzD,GAAI;GACJ,kBAAgB;GAChB,CAAA;EACE,CAAA,CACL,EAAA,CAAA;AAIP,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,0BAAD;EAA0B,GAAI;EAAO,UAAU,IAAI;EAAyB,CAAA,EAC5E,iBAAA,GAAA,kBAAA,KAACD,YAAAA,KAAD;EACE,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;EACzD,GAAI;EACJ,kBAAgB;EAChB,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,WAAW,UAAUE,0BAAAA;AACrB,WAAW,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.cjs","names":["createVarsResolver","rem","getRadius","factory","useProps","Box","useStyles","classes"],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Skeleton.module.css';\n\nexport type SkeletonStylesNames = 'root';\nexport type SkeletonCssVariables = {\n root: '--skeleton-width' | '--skeleton-height' | '--skeleton-radius';\n};\n\nexport interface SkeletonProps\n extends BoxProps, StylesApiProps<SkeletonFactory>, ElementProps<'div'> {\n /** Determines whether Skeleton overlay should be displayed @default true */\n visible?: boolean;\n\n /** Skeleton `height`, numbers are converted to rem @default auto */\n height?: React.CSSProperties['height'];\n\n /** Skeleton `width`, numbers are converted to rem, ignored when `circle` prop is set. @default 100% */\n width?: React.CSSProperties['width'];\n\n /** If set, Skeleton `width` and `border-radius` are equal to its `height` @default false */\n circle?: boolean;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n radius?: React.CSSProperties['borderRadius'];\n\n /** Enables animation @default true */\n animate?: boolean;\n}\n\nexport type SkeletonFactory = Factory<{\n props: SkeletonProps;\n ref: HTMLDivElement;\n stylesNames: SkeletonStylesNames;\n vars: SkeletonCssVariables;\n}>;\n\nconst defaultProps = {\n visible: true,\n animate: true,\n} satisfies Partial<SkeletonProps>;\n\nconst varsResolver = createVarsResolver<SkeletonFactory>(\n (_, { width, height, radius, circle }) => ({\n root: {\n '--skeleton-height': rem(height),\n '--skeleton-width': circle ? rem(height) : rem(width),\n '--skeleton-radius': circle ? '1000px' : radius === undefined ? undefined : getRadius(radius),\n },\n })\n);\n\nexport const Skeleton = factory<SkeletonFactory>((_props) => {\n const props = useProps('Skeleton', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n width,\n height,\n circle,\n visible,\n radius,\n animate,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<SkeletonFactory>({\n name: 'Skeleton',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return <Box {...getStyles('root')} mod={[{ visible, animate }, mod]} {...others} />;\n});\n\nSkeleton.classes = classes;\nSkeleton.varsResolver = varsResolver;\nSkeleton.displayName = '@mantine/core/Skeleton';\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAM,eAAe;CACnB,SAAS;CACT,SAAS;CACV;AAED,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,OAAO,QAAQ,QAAQ,cAAc,EACzC,MAAM;CACJ,qBAAqBC,YAAAA,IAAI,OAAO;CAChC,oBAAoB,SAASA,YAAAA,IAAI,OAAO,GAAGA,YAAAA,IAAI,MAAM;CACrD,qBAAqB,SAAS,WAAW,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CAC9F,EACF,EACF;AAED,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,QACA,SACA,QACA,SACA,KACA,YACA,GAAG,WACD;AAgBJ,QAAO,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,GAdMC,mBAAAA,UAA2B;GAC3C,MAAM;GACN,SAAA,wBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,CAEwB,OAAO;EAAE,KAAK,CAAC;GAAE;GAAS;GAAS,EAAE,IAAI;EAAE,GAAI;EAAU,CAAA;EACnF;AAEF,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}
|
|
1
|
+
{"version":3,"file":"Skeleton.cjs","names":["createVarsResolver","rem","getRadius","factory","useProps","Box","useStyles","classes"],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Skeleton.module.css';\n\nexport type SkeletonStylesNames = 'root';\nexport type SkeletonCssVariables = {\n root: '--skeleton-width' | '--skeleton-height' | '--skeleton-radius';\n};\n\nexport interface SkeletonProps\n extends BoxProps, StylesApiProps<SkeletonFactory>, ElementProps<'div'> {\n /** Determines whether Skeleton overlay should be displayed @default true */\n visible?: boolean;\n\n /** Skeleton `height`, numbers are converted to rem @default auto */\n height?: React.CSSProperties['height'];\n\n /** Skeleton `width`, numbers are converted to rem, ignored when `circle` prop is set. @default 100% */\n width?: React.CSSProperties['width'];\n\n /** If set, Skeleton `width` and `border-radius` are equal to its `height` @default false */\n circle?: boolean;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n radius?: React.CSSProperties['borderRadius'];\n\n /** Enables animation @default true */\n animate?: boolean;\n}\n\nexport type SkeletonFactory = Factory<{\n props: SkeletonProps;\n ref: HTMLDivElement;\n stylesNames: SkeletonStylesNames;\n vars: SkeletonCssVariables;\n}>;\n\nconst defaultProps = {\n visible: true,\n animate: true,\n} satisfies Partial<SkeletonProps>;\n\nconst varsResolver = createVarsResolver<SkeletonFactory>(\n (_, { width, height, radius, circle }) => ({\n root: {\n '--skeleton-height': rem(height),\n '--skeleton-width': circle ? rem(height) : rem(width),\n '--skeleton-radius': circle ? '1000px' : radius === undefined ? undefined : getRadius(radius),\n },\n })\n);\n\nexport const Skeleton = factory<SkeletonFactory>((_props) => {\n const props = useProps('Skeleton', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n width,\n height,\n circle,\n visible,\n radius,\n animate,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<SkeletonFactory>({\n name: 'Skeleton',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return <Box {...getStyles('root')} mod={[{ visible, animate }, mod]} {...others} />;\n});\n\nSkeleton.classes = classes;\nSkeleton.varsResolver = varsResolver;\nSkeleton.displayName = '@mantine/core/Skeleton';\n\nexport namespace Skeleton {\n export type Props = SkeletonProps;\n export type StylesNames = SkeletonStylesNames;\n export type CssVariables = SkeletonCssVariables;\n export type Factory = SkeletonFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAM,eAAe;CACnB,SAAS;CACT,SAAS;CACV;AAED,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,OAAO,QAAQ,QAAQ,cAAc,EACzC,MAAM;CACJ,qBAAqBC,YAAAA,IAAI,OAAO;CAChC,oBAAoB,SAASA,YAAAA,IAAI,OAAO,GAAGA,YAAAA,IAAI,MAAM;CACrD,qBAAqB,SAAS,WAAW,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CAC9F,EACF,EACF;AAED,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,QACA,SACA,QACA,SACA,KACA,YACA,GAAG,WACD;AAgBJ,QAAO,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,GAdMC,mBAAAA,UAA2B;GAC3C,MAAM;GACN,SAAA,wBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,CAEwB,OAAO;EAAE,KAAK,CAAC;GAAE;GAAS;GAAS,EAAE,IAAI;EAAE,GAAI;EAAU,CAAA;EACnF;AAEF,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeSlider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","findClosestNumber","getLastMarkValue","getFirstMarkValue","getPreviousMarkValue","getNextMarkValue","getFloatingValue","getChangeValue","getClientPosition","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n findClosestNumber,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n rem,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getClientPosition } from '../utils/get-client-position/get-client-position';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n getFirstMarkValue,\n getLastMarkValue,\n getNextMarkValue,\n getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport type RangeSliderValue = [number, number];\n\nexport interface RangeSliderProps\n extends\n BoxProps,\n StylesApiProps<RangeSliderFactory>,\n ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n color?: MantineColor;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n radius?: MantineRadius;\n\n /** Controls size of the track @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Minimal possible value @default 0 */\n min?: number;\n\n /** Maximum possible value @default 100 */\n max?: number;\n\n /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n domain?: [number, number];\n\n /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n step?: number;\n\n /** Number of significant digits after the decimal point */\n precision?: number;\n\n /** Controlled component value */\n value?: RangeSliderValue;\n\n /** Uncontrolled component default value */\n defaultValue?: RangeSliderValue;\n\n /** Called when value changes */\n onChange?: (value: RangeSliderValue) => void;\n\n /** Called when user stops dragging slider or changes value with arrows */\n onChangeEnd?: (value: RangeSliderValue) => void;\n\n /** Hidden input name, use with uncontrolled component */\n name?: string;\n\n /** Marks displayed on the track */\n marks?: SliderMark[];\n\n /** Function to generate label or any react node to render instead, set to null to disable label */\n label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n labelTransitionProps?: TransitionOverride;\n\n /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n labelAlwaysOn?: boolean;\n\n /** Determines whether the label should be displayed when the slider is hovered @default true */\n showLabelOnHover?: boolean;\n\n /** Content rendered inside thumb */\n thumbChildren?: React.ReactNode;\n\n /** Disables slider */\n disabled?: boolean;\n\n /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n thumbSize?: number | string;\n\n /** A transformation function to change the scale of the slider */\n scale?: (value: number) => number;\n\n /** Determines whether track values representation should be inverted @default false */\n inverted?: boolean;\n\n /** Slider orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min). @default 10 */\n minRange?: number;\n\n /** Maximum range interval @default Infinity */\n maxRange?: number;\n\n /** `aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided) */\n thumbLabel?: string;\n\n /** First thumb `aria-label` */\n thumbFromLabel?: string;\n\n /** Second thumb `aria-label` */\n thumbToLabel?: string;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: React.ComponentProps<'input'>;\n\n /** Determines whether the selection should be only allowed from the given marks array @default false */\n restrictToMarks?: boolean;\n\n /** Props passed down to thumb element based on the thumb index */\n thumbProps?: (index: 0 | 1) => React.ComponentProps<'div'>;\n\n /** Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached @default true */\n pushOnOverlap?: boolean;\n}\n\nexport type RangeSliderFactory = Factory<{\n props: RangeSliderProps;\n ref: HTMLDivElement;\n stylesNames: SliderStylesNames;\n vars: SliderCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<RangeSliderFactory>(\n (theme, { size, color, thumbSize, radius }) => ({\n root: {\n '--slider-size': getSize(size, 'slider-size'),\n '--slider-color': color ? getThemeColor(color, theme) : undefined,\n '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n '--slider-thumb-size':\n thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n },\n })\n);\n\nconst defaultProps = {\n min: 0,\n max: 100,\n minRange: 10,\n step: 1,\n marks: [],\n label: (f) => f,\n labelTransitionProps: { transition: 'fade', duration: 0 },\n labelAlwaysOn: false,\n showLabelOnHover: true,\n disabled: false,\n pushOnOverlap: true,\n scale: (v) => v,\n size: 'md',\n maxRange: Infinity,\n} satisfies Partial<RangeSliderProps>;\n\nexport const RangeSlider = factory<RangeSliderFactory>((_props) => {\n const props = useProps('RangeSlider', defaultProps, _props);\n const {\n classNames,\n styles,\n value,\n onChange,\n onChangeEnd,\n size,\n min,\n max,\n domain,\n minRange,\n maxRange,\n step,\n precision: _precision,\n defaultValue,\n name,\n marks,\n label,\n labelTransitionProps,\n labelAlwaysOn,\n thumbFromLabel,\n thumbToLabel,\n showLabelOnHover,\n thumbChildren,\n disabled,\n unstyled,\n scale,\n inverted,\n orientation,\n className,\n style,\n vars,\n hiddenInputProps,\n restrictToMarks,\n thumbProps,\n pushOnOverlap,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<RangeSliderFactory>({\n name: 'RangeSlider',\n props,\n classes,\n classNames,\n className,\n styles,\n style,\n attributes,\n vars,\n varsResolver,\n unstyled,\n });\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n const { dir } = useDirection();\n const [focused, setFocused] = useState(-1);\n const [hovered, setHovered] = useState(false);\n const [_value, setValue] = useUncontrolled<RangeSliderValue>({\n value,\n defaultValue,\n finalValue: [min, max],\n onChange,\n });\n const valueRef = useRef(_value);\n const thumbs = useRef<HTMLDivElement[]>([]);\n const root = useRef<HTMLDivElement>(null);\n const thumbIndex = useRef<number | undefined>(undefined);\n const [domainMin, domainMax] = domain || [min!, max!];\n const positions = [\n getPosition({ value: _value[0], min: domainMin, max: domainMax }),\n getPosition({ value: _value[1], min: domainMin, max: domainMax }),\n ];\n\n const precision = _precision ?? getPrecision(step);\n\n const _setValue = (val: RangeSliderValue) => {\n setValue(val);\n valueRef.current = val;\n };\n\n useEffect(\n () => {\n if (Array.isArray(value)) {\n valueRef.current = value;\n }\n },\n Array.isArray(value) ? [value[0], value[1]] : [null, null]\n );\n\n const setRangedValue = (val: number, index: number, triggerChangeEnd: boolean) => {\n if (index === -1) {\n return;\n }\n\n const clone: RangeSliderValue = [...valueRef.current];\n\n if (restrictToMarks && marks) {\n const closest = findClosestNumber(\n val,\n marks.map((m) => m.value)\n );\n\n const current = clone[index];\n clone[index] = closest;\n const otherIndex = index === 0 ? 1 : 0;\n\n const lastMarkValue = getLastMarkValue(marks);\n const firstMarkValue = getFirstMarkValue(marks);\n\n if (closest === lastMarkValue && clone[otherIndex] === lastMarkValue) {\n clone[index] = current;\n } else if (closest === firstMarkValue && clone[otherIndex] === firstMarkValue) {\n clone[index] = current;\n } else if (closest === clone[otherIndex]) {\n if (current > clone[otherIndex]) {\n clone[otherIndex] = getPreviousMarkValue(closest, marks);\n } else {\n clone[otherIndex] = getNextMarkValue(closest, marks);\n }\n }\n } else {\n const clampedVal = clamp(val, min!, max!);\n clone[index] = clampedVal;\n\n if (index === 0) {\n if (clampedVal > clone[1] - (minRange - 0.000000001)) {\n if (pushOnOverlap) {\n clone[1] = Math.min(val + minRange, max);\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n\n if (clampedVal > (max - (minRange - 0.000000001) || min)) {\n clone[index] = valueRef.current[index];\n }\n\n if (clone[1] - val > maxRange) {\n if (pushOnOverlap) {\n clone[1] = val + maxRange;\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n }\n\n if (index === 1) {\n if (clampedVal < clone[0] + minRange) {\n if (pushOnOverlap) {\n clone[0] = Math.max(val - minRange, min);\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n\n if (clampedVal < clone[0] + minRange) {\n clone[index] = valueRef.current[index];\n }\n\n if (clampedVal - clone[0] > maxRange) {\n if (pushOnOverlap) {\n clone[0] = val - maxRange;\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n }\n }\n\n clone[0] = getFloatingValue(clone[0], precision);\n clone[1] = getFloatingValue(clone[1], precision);\n\n if (clone[0] > clone[1]) {\n const temp = clone[0];\n clone[0] = clone[1];\n clone[1] = temp;\n }\n\n _setValue(clone);\n\n if (triggerChangeEnd) {\n onChangeEnd?.(valueRef.current);\n }\n };\n\n const handleChange = (val: number) => {\n if (!disabled && thumbIndex.current !== undefined) {\n const nextValue = getChangeValue({\n value: val,\n min: domainMin,\n max: domainMax,\n step,\n precision,\n });\n setRangedValue(nextValue, thumbIndex.current, false);\n }\n };\n\n const { ref: useMoveRef, active } = useMove(\n ({ x, y }) => handleChange(orientation === 'vertical' ? 1 - y : x),\n { onScrubEnd: () => !disabled && onChangeEnd?.(valueRef.current) },\n dir\n );\n\n function handleThumbMouseDown(index: number) {\n thumbIndex.current = index;\n }\n\n const handleTrackMouseDownCapture = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n if (containerRef.current) {\n containerRef.current.focus();\n const rect = containerRef.current.getBoundingClientRect();\n const changePosition = getClientPosition(event.nativeEvent, orientation);\n\n const changeValue =\n orientation === 'vertical'\n ? getChangeValue({\n value: rect.bottom - changePosition,\n max,\n min,\n step,\n containerWidth: rect.height,\n })\n : getChangeValue({\n value: changePosition - rect.left,\n max,\n min,\n step,\n containerWidth: rect.width,\n });\n\n const nearestHandle =\n Math.abs(_value[0] - changeValue) > Math.abs(_value[1] - changeValue) ? 1 : 0;\n const _nearestHandle =\n orientation === 'vertical'\n ? nearestHandle\n : dir === 'ltr'\n ? nearestHandle\n : nearestHandle === 1\n ? 0\n : 1;\n\n thumbIndex.current = _nearestHandle;\n }\n };\n\n const getFocusedThumbIndex = () => {\n if (focused !== 1 && focused !== 0) {\n setFocused(0);\n return 0;\n }\n\n return focused;\n };\n\n const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n const nextValue =\n restrictToMarks && marks\n ? getNextMarkValue(valueRef.current[focusedIndex], marks)\n : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax);\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowRight': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n\n const nextValue =\n restrictToMarks && marks\n ? (dir === 'rtl' ? getPreviousMarkValue : getNextMarkValue)(\n valueRef.current[focusedIndex],\n marks\n )\n : Math.min(\n Math.max(\n dir === 'rtl'\n ? valueRef.current[focusedIndex] - step\n : valueRef.current[focusedIndex] + step,\n domainMin\n ),\n domainMax\n );\n\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowDown': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n const nextValue =\n restrictToMarks && marks\n ? getPreviousMarkValue(valueRef.current[focusedIndex], marks)\n : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax);\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowLeft': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n\n const nextValue =\n restrictToMarks && marks\n ? (dir === 'rtl' ? getNextMarkValue : getPreviousMarkValue)(\n valueRef.current[focusedIndex],\n marks\n )\n : Math.min(\n Math.max(\n dir === 'rtl'\n ? valueRef.current[focusedIndex] + step\n : valueRef.current[focusedIndex] - step,\n domainMin\n ),\n domainMax\n );\n\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n default: {\n break;\n }\n }\n }\n };\n\n const sharedThumbProps = {\n max,\n min,\n size,\n labelTransitionProps,\n labelAlwaysOn,\n orientation,\n onBlur: () => setFocused(-1),\n };\n\n const hasArrayThumbChildren = Array.isArray(thumbChildren);\n\n return (\n <SliderProvider value={{ getStyles }}>\n <SliderRoot\n {...others}\n size={size}\n ref={useMergedRef(ref, root)}\n disabled={disabled}\n orientation={orientation}\n onMouseDownCapture={() => root.current?.focus()}\n onKeyDownCapture={() => {\n if (thumbs.current[0]?.parentElement?.contains(document.activeElement)) {\n return;\n }\n thumbs.current[0]?.focus();\n }}\n >\n <Track\n offset={positions[0]}\n marksOffset={_value[0]}\n filled={positions[1] - positions[0]}\n marks={marks}\n inverted={inverted}\n min={domainMin}\n max={domainMax}\n value={_value[1]}\n disabled={disabled}\n containerProps={{\n ref: useMergedRef(containerRef, useMoveRef) as any,\n onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n onTouchStartCapture: handleTrackMouseDownCapture,\n onTouchEndCapture: () => {\n thumbIndex.current = -1;\n },\n onMouseDownCapture: handleTrackMouseDownCapture,\n onMouseUpCapture: () => {\n thumbIndex.current = -1;\n },\n onKeyDownCapture: handleTrackKeydownCapture,\n }}\n >\n <Thumb\n {...sharedThumbProps}\n value={scale(_value[0])}\n position={positions[0]}\n dragging={active}\n label={\n typeof label === 'function'\n ? label(getFloatingValue(scale(_value[0]), precision))\n : label\n }\n ref={(node) => {\n if (node) {\n thumbs.current[0] = node;\n }\n }}\n thumbLabel={thumbFromLabel}\n onMouseDown={() => handleThumbMouseDown(0)}\n onFocus={() => setFocused(0)}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n {...thumbProps?.(0)}\n >\n {hasArrayThumbChildren ? thumbChildren[0] : thumbChildren}\n </Thumb>\n\n <Thumb\n {...sharedThumbProps}\n thumbLabel={thumbToLabel}\n value={scale(_value[1])}\n position={positions[1]}\n dragging={active}\n label={\n typeof label === 'function'\n ? label(getFloatingValue(scale(_value[1]), precision))\n : label\n }\n ref={(node) => {\n if (node) {\n thumbs.current[1] = node;\n }\n }}\n onMouseDown={() => handleThumbMouseDown(1)}\n onFocus={() => setFocused(1)}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n {...thumbProps?.(1)}\n >\n {hasArrayThumbChildren ? thumbChildren[1] : thumbChildren}\n </Thumb>\n </Track>\n\n <input type=\"hidden\" name={`${name}_from`} value={_value[0]} {...hiddenInputProps} />\n <input type=\"hidden\" name={`${name}_to`} value={_value[1]} {...hiddenInputProps} />\n </SliderRoot>\n </SliderProvider>\n );\n});\n\nRangeSlider.classes = classes;\nRangeSlider.varsResolver = varsResolver;\nRangeSlider.displayName = '@mantine/core/RangeSlider';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RangeSlider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","findClosestNumber","getLastMarkValue","getFirstMarkValue","getPreviousMarkValue","getNextMarkValue","getFloatingValue","getChangeValue","getClientPosition","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n findClosestNumber,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n rem,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getClientPosition } from '../utils/get-client-position/get-client-position';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n getFirstMarkValue,\n getLastMarkValue,\n getNextMarkValue,\n getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport type RangeSliderValue = [number, number];\n\nexport interface RangeSliderProps\n extends\n BoxProps,\n StylesApiProps<RangeSliderFactory>,\n ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n color?: MantineColor;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n radius?: MantineRadius;\n\n /** Controls size of the track @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Minimal possible value @default 0 */\n min?: number;\n\n /** Maximum possible value @default 100 */\n max?: number;\n\n /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n domain?: [number, number];\n\n /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n step?: number;\n\n /** Number of significant digits after the decimal point */\n precision?: number;\n\n /** Controlled component value */\n value?: RangeSliderValue;\n\n /** Uncontrolled component default value */\n defaultValue?: RangeSliderValue;\n\n /** Called when value changes */\n onChange?: (value: RangeSliderValue) => void;\n\n /** Called when user stops dragging slider or changes value with arrows */\n onChangeEnd?: (value: RangeSliderValue) => void;\n\n /** Hidden input name, use with uncontrolled component */\n name?: string;\n\n /** Marks displayed on the track */\n marks?: SliderMark[];\n\n /** Function to generate label or any react node to render instead, set to null to disable label */\n label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n labelTransitionProps?: TransitionOverride;\n\n /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n labelAlwaysOn?: boolean;\n\n /** Determines whether the label should be displayed when the slider is hovered @default true */\n showLabelOnHover?: boolean;\n\n /** Content rendered inside thumb */\n thumbChildren?: React.ReactNode;\n\n /** Disables slider */\n disabled?: boolean;\n\n /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n thumbSize?: number | string;\n\n /** A transformation function to change the scale of the slider */\n scale?: (value: number) => number;\n\n /** Determines whether track values representation should be inverted @default false */\n inverted?: boolean;\n\n /** Slider orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min). @default 10 */\n minRange?: number;\n\n /** Maximum range interval @default Infinity */\n maxRange?: number;\n\n /** `aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided) */\n thumbLabel?: string;\n\n /** First thumb `aria-label` */\n thumbFromLabel?: string;\n\n /** Second thumb `aria-label` */\n thumbToLabel?: string;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: React.ComponentProps<'input'>;\n\n /** Determines whether the selection should be only allowed from the given marks array @default false */\n restrictToMarks?: boolean;\n\n /** Props passed down to thumb element based on the thumb index */\n thumbProps?: (index: 0 | 1) => React.ComponentProps<'div'>;\n\n /** Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached @default true */\n pushOnOverlap?: boolean;\n}\n\nexport type RangeSliderFactory = Factory<{\n props: RangeSliderProps;\n ref: HTMLDivElement;\n stylesNames: SliderStylesNames;\n vars: SliderCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<RangeSliderFactory>(\n (theme, { size, color, thumbSize, radius }) => ({\n root: {\n '--slider-size': getSize(size, 'slider-size'),\n '--slider-color': color ? getThemeColor(color, theme) : undefined,\n '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n '--slider-thumb-size':\n thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n },\n })\n);\n\nconst defaultProps = {\n min: 0,\n max: 100,\n minRange: 10,\n step: 1,\n marks: [],\n label: (f) => f,\n labelTransitionProps: { transition: 'fade', duration: 0 },\n labelAlwaysOn: false,\n showLabelOnHover: true,\n disabled: false,\n pushOnOverlap: true,\n scale: (v) => v,\n size: 'md',\n maxRange: Infinity,\n} satisfies Partial<RangeSliderProps>;\n\nexport const RangeSlider = factory<RangeSliderFactory>((_props) => {\n const props = useProps('RangeSlider', defaultProps, _props);\n const {\n classNames,\n styles,\n value,\n onChange,\n onChangeEnd,\n size,\n min,\n max,\n domain,\n minRange,\n maxRange,\n step,\n precision: _precision,\n defaultValue,\n name,\n marks,\n label,\n labelTransitionProps,\n labelAlwaysOn,\n thumbFromLabel,\n thumbToLabel,\n showLabelOnHover,\n thumbChildren,\n disabled,\n unstyled,\n scale,\n inverted,\n orientation,\n className,\n style,\n vars,\n hiddenInputProps,\n restrictToMarks,\n thumbProps,\n pushOnOverlap,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<RangeSliderFactory>({\n name: 'RangeSlider',\n props,\n classes,\n classNames,\n className,\n styles,\n style,\n attributes,\n vars,\n varsResolver,\n unstyled,\n });\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n const { dir } = useDirection();\n const [focused, setFocused] = useState(-1);\n const [hovered, setHovered] = useState(false);\n const [_value, setValue] = useUncontrolled<RangeSliderValue>({\n value,\n defaultValue,\n finalValue: [min, max],\n onChange,\n });\n const valueRef = useRef(_value);\n const thumbs = useRef<HTMLDivElement[]>([]);\n const root = useRef<HTMLDivElement>(null);\n const thumbIndex = useRef<number | undefined>(undefined);\n const [domainMin, domainMax] = domain || [min!, max!];\n const positions = [\n getPosition({ value: _value[0], min: domainMin, max: domainMax }),\n getPosition({ value: _value[1], min: domainMin, max: domainMax }),\n ];\n\n const precision = _precision ?? getPrecision(step);\n\n const _setValue = (val: RangeSliderValue) => {\n setValue(val);\n valueRef.current = val;\n };\n\n useEffect(\n () => {\n if (Array.isArray(value)) {\n valueRef.current = value;\n }\n },\n Array.isArray(value) ? [value[0], value[1]] : [null, null]\n );\n\n const setRangedValue = (val: number, index: number, triggerChangeEnd: boolean) => {\n if (index === -1) {\n return;\n }\n\n const clone: RangeSliderValue = [...valueRef.current];\n\n if (restrictToMarks && marks) {\n const closest = findClosestNumber(\n val,\n marks.map((m) => m.value)\n );\n\n const current = clone[index];\n clone[index] = closest;\n const otherIndex = index === 0 ? 1 : 0;\n\n const lastMarkValue = getLastMarkValue(marks);\n const firstMarkValue = getFirstMarkValue(marks);\n\n if (closest === lastMarkValue && clone[otherIndex] === lastMarkValue) {\n clone[index] = current;\n } else if (closest === firstMarkValue && clone[otherIndex] === firstMarkValue) {\n clone[index] = current;\n } else if (closest === clone[otherIndex]) {\n if (current > clone[otherIndex]) {\n clone[otherIndex] = getPreviousMarkValue(closest, marks);\n } else {\n clone[otherIndex] = getNextMarkValue(closest, marks);\n }\n }\n } else {\n const clampedVal = clamp(val, min!, max!);\n clone[index] = clampedVal;\n\n if (index === 0) {\n if (clampedVal > clone[1] - (minRange - 0.000000001)) {\n if (pushOnOverlap) {\n clone[1] = Math.min(val + minRange, max);\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n\n if (clampedVal > (max - (minRange - 0.000000001) || min)) {\n clone[index] = valueRef.current[index];\n }\n\n if (clone[1] - val > maxRange) {\n if (pushOnOverlap) {\n clone[1] = val + maxRange;\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n }\n\n if (index === 1) {\n if (clampedVal < clone[0] + minRange) {\n if (pushOnOverlap) {\n clone[0] = Math.max(val - minRange, min);\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n\n if (clampedVal < clone[0] + minRange) {\n clone[index] = valueRef.current[index];\n }\n\n if (clampedVal - clone[0] > maxRange) {\n if (pushOnOverlap) {\n clone[0] = val - maxRange;\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n }\n }\n\n clone[0] = getFloatingValue(clone[0], precision);\n clone[1] = getFloatingValue(clone[1], precision);\n\n if (clone[0] > clone[1]) {\n const temp = clone[0];\n clone[0] = clone[1];\n clone[1] = temp;\n }\n\n _setValue(clone);\n\n if (triggerChangeEnd) {\n onChangeEnd?.(valueRef.current);\n }\n };\n\n const handleChange = (val: number) => {\n if (!disabled && thumbIndex.current !== undefined) {\n const nextValue = getChangeValue({\n value: val,\n min: domainMin,\n max: domainMax,\n step,\n precision,\n });\n setRangedValue(nextValue, thumbIndex.current, false);\n }\n };\n\n const { ref: useMoveRef, active } = useMove(\n ({ x, y }) => handleChange(orientation === 'vertical' ? 1 - y : x),\n { onScrubEnd: () => !disabled && onChangeEnd?.(valueRef.current) },\n dir\n );\n\n function handleThumbMouseDown(index: number) {\n thumbIndex.current = index;\n }\n\n const handleTrackMouseDownCapture = (\n event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n if (containerRef.current) {\n containerRef.current.focus();\n const rect = containerRef.current.getBoundingClientRect();\n const changePosition = getClientPosition(event.nativeEvent, orientation);\n\n const changeValue =\n orientation === 'vertical'\n ? getChangeValue({\n value: rect.bottom - changePosition,\n max,\n min,\n step,\n containerWidth: rect.height,\n })\n : getChangeValue({\n value: changePosition - rect.left,\n max,\n min,\n step,\n containerWidth: rect.width,\n });\n\n const nearestHandle =\n Math.abs(_value[0] - changeValue) > Math.abs(_value[1] - changeValue) ? 1 : 0;\n const _nearestHandle =\n orientation === 'vertical'\n ? nearestHandle\n : dir === 'ltr'\n ? nearestHandle\n : nearestHandle === 1\n ? 0\n : 1;\n\n thumbIndex.current = _nearestHandle;\n }\n };\n\n const getFocusedThumbIndex = () => {\n if (focused !== 1 && focused !== 0) {\n setFocused(0);\n return 0;\n }\n\n return focused;\n };\n\n const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n const nextValue =\n restrictToMarks && marks\n ? getNextMarkValue(valueRef.current[focusedIndex], marks)\n : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax);\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowRight': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n\n const nextValue =\n restrictToMarks && marks\n ? (dir === 'rtl' ? getPreviousMarkValue : getNextMarkValue)(\n valueRef.current[focusedIndex],\n marks\n )\n : Math.min(\n Math.max(\n dir === 'rtl'\n ? valueRef.current[focusedIndex] - step\n : valueRef.current[focusedIndex] + step,\n domainMin\n ),\n domainMax\n );\n\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowDown': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n const nextValue =\n restrictToMarks && marks\n ? getPreviousMarkValue(valueRef.current[focusedIndex], marks)\n : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax);\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowLeft': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n\n const nextValue =\n restrictToMarks && marks\n ? (dir === 'rtl' ? getNextMarkValue : getPreviousMarkValue)(\n valueRef.current[focusedIndex],\n marks\n )\n : Math.min(\n Math.max(\n dir === 'rtl'\n ? valueRef.current[focusedIndex] + step\n : valueRef.current[focusedIndex] - step,\n domainMin\n ),\n domainMax\n );\n\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n default: {\n break;\n }\n }\n }\n };\n\n const sharedThumbProps = {\n max,\n min,\n size,\n labelTransitionProps,\n labelAlwaysOn,\n orientation,\n onBlur: () => setFocused(-1),\n };\n\n const hasArrayThumbChildren = Array.isArray(thumbChildren);\n\n return (\n <SliderProvider value={{ getStyles }}>\n <SliderRoot\n {...others}\n size={size}\n ref={useMergedRef(ref, root)}\n disabled={disabled}\n orientation={orientation}\n onMouseDownCapture={() => root.current?.focus()}\n onKeyDownCapture={() => {\n if (thumbs.current[0]?.parentElement?.contains(document.activeElement)) {\n return;\n }\n thumbs.current[0]?.focus();\n }}\n >\n <Track\n offset={positions[0]}\n marksOffset={_value[0]}\n filled={positions[1] - positions[0]}\n marks={marks}\n inverted={inverted}\n min={domainMin}\n max={domainMax}\n value={_value[1]}\n disabled={disabled}\n containerProps={{\n ref: useMergedRef(containerRef, useMoveRef) as any,\n onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n onTouchStartCapture: handleTrackMouseDownCapture,\n onTouchEndCapture: () => {\n thumbIndex.current = -1;\n },\n onMouseDownCapture: handleTrackMouseDownCapture,\n onMouseUpCapture: () => {\n thumbIndex.current = -1;\n },\n onKeyDownCapture: handleTrackKeydownCapture,\n }}\n >\n <Thumb\n {...sharedThumbProps}\n value={scale(_value[0])}\n position={positions[0]}\n dragging={active}\n label={\n typeof label === 'function'\n ? label(getFloatingValue(scale(_value[0]), precision))\n : label\n }\n ref={(node) => {\n if (node) {\n thumbs.current[0] = node;\n }\n }}\n thumbLabel={thumbFromLabel}\n onMouseDown={() => handleThumbMouseDown(0)}\n onFocus={() => setFocused(0)}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n {...thumbProps?.(0)}\n >\n {hasArrayThumbChildren ? thumbChildren[0] : thumbChildren}\n </Thumb>\n\n <Thumb\n {...sharedThumbProps}\n thumbLabel={thumbToLabel}\n value={scale(_value[1])}\n position={positions[1]}\n dragging={active}\n label={\n typeof label === 'function'\n ? label(getFloatingValue(scale(_value[1]), precision))\n : label\n }\n ref={(node) => {\n if (node) {\n thumbs.current[1] = node;\n }\n }}\n onMouseDown={() => handleThumbMouseDown(1)}\n onFocus={() => setFocused(1)}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n {...thumbProps?.(1)}\n >\n {hasArrayThumbChildren ? thumbChildren[1] : thumbChildren}\n </Thumb>\n </Track>\n\n <input type=\"hidden\" name={`${name}_from`} value={_value[0]} {...hiddenInputProps} />\n <input type=\"hidden\" name={`${name}_to`} value={_value[1]} {...hiddenInputProps} />\n </SliderRoot>\n </SliderProvider>\n );\n});\n\nRangeSlider.classes = classes;\nRangeSlider.varsResolver = varsResolver;\nRangeSlider.displayName = '@mantine/core/RangeSlider';\n\nexport namespace RangeSlider {\n export type Props = RangeSliderProps;\n export type Value = RangeSliderValue;\n export type Factory = RangeSliderFactory;\n export type StylesNames = SliderStylesNames;\n export type CssVariables = SliderCssVariables;\n export type Mark = SliderMark;\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","getChangeValue","findClosestNumber","getNextMarkValue","getFloatingValue","getPreviousMarkValue","getFirstMarkValue","getLastMarkValue","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n findClosestNumber,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n rem,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n getFirstMarkValue,\n getLastMarkValue,\n getNextMarkValue,\n getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport interface SliderProps\n extends BoxProps, StylesApiProps<SliderFactory>, ElementProps<'div', 'onChange'> {\n /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n color?: MantineColor;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n radius?: MantineRadius;\n\n /** Controls size of the track @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Minimal possible value @default 0 */\n min?: number;\n\n /** Maximum possible value @default 100 */\n max?: number;\n\n /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n domain?: [number, number];\n\n /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n step?: number;\n\n /** Number of significant digits after the decimal point */\n precision?: number;\n\n /** Controlled component value */\n value?: number;\n\n /** Uncontrolled component default value */\n defaultValue?: number;\n\n /** Called when value changes */\n onChange?: (value: number) => void;\n\n /** Called when user stops dragging slider or changes value with arrows */\n onChangeEnd?: (value: number) => void;\n\n /** Hidden input name, use with uncontrolled component */\n name?: string;\n\n /** Marks displayed on the track */\n marks?: SliderMark[];\n\n /** Function to generate label or any react node to render instead, set to null to disable label */\n label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n labelTransitionProps?: TransitionOverride;\n\n /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n labelAlwaysOn?: boolean;\n\n /** Thumb `aria-label` */\n thumbLabel?: string;\n\n /** Determines whether the label should be displayed when the slider is hovered @default true */\n showLabelOnHover?: boolean;\n\n /** Content rendered inside thumb */\n thumbChildren?: React.ReactNode;\n\n /** Disables slider */\n disabled?: boolean;\n\n /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n thumbSize?: number | string;\n\n /** A transformation function to change the scale of the slider */\n scale?: (value: number) => number;\n\n /** Determines whether track value representation should be inverted @default false */\n inverted?: boolean;\n\n /** Slider orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: React.ComponentProps<'input'>;\n\n /** Determines whether the selection should be only allowed from the given marks array @default false */\n restrictToMarks?: boolean;\n\n /** Props passed down to thumb element */\n thumbProps?: React.ComponentProps<'div'>;\n}\n\nexport type SliderFactory = Factory<{\n props: SliderProps;\n ref: HTMLDivElement;\n stylesNames: SliderStylesNames;\n vars: SliderCssVariables;\n}>;\n\nconst defaultProps = {\n radius: 'xl',\n min: 0,\n max: 100,\n step: 1,\n marks: [],\n label: (f) => f,\n labelTransitionProps: { transition: 'fade', duration: 0 },\n thumbLabel: '',\n showLabelOnHover: true,\n scale: (v) => v,\n size: 'md',\n} satisfies Partial<SliderProps>;\n\nconst varsResolver = createVarsResolver<SliderFactory>(\n (theme, { size, color, thumbSize, radius }) => ({\n root: {\n '--slider-size': getSize(size, 'slider-size'),\n '--slider-color': color ? getThemeColor(color, theme) : undefined,\n '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n '--slider-thumb-size':\n thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n },\n })\n);\n\nexport const Slider = factory<SliderFactory>((_props) => {\n const props = useProps('Slider', defaultProps, _props);\n const {\n classNames,\n styles,\n value,\n onChange,\n onChangeEnd,\n size,\n min,\n max,\n domain,\n step,\n precision: _precision,\n defaultValue,\n name,\n marks,\n label,\n labelTransitionProps,\n labelAlwaysOn,\n thumbLabel,\n showLabelOnHover,\n thumbChildren,\n disabled,\n unstyled,\n scale,\n inverted,\n orientation,\n className,\n style,\n vars,\n hiddenInputProps,\n restrictToMarks,\n thumbProps,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<SliderFactory>({\n name: 'Slider',\n props,\n classes,\n classNames,\n className,\n styles,\n style,\n attributes,\n vars,\n varsResolver,\n unstyled,\n });\n\n const { dir } = useDirection();\n const [hovered, setHovered] = useState(false);\n const [_value, setValue] = useUncontrolled({\n value: typeof value === 'number' ? clamp(value, min, max) : value,\n defaultValue: typeof defaultValue === 'number' ? clamp(defaultValue, min, max) : defaultValue,\n finalValue: clamp(0, min, max),\n onChange,\n });\n\n const valueRef = useRef(_value);\n const onChangeEndRef = useRef(onChangeEnd);\n\n useEffect(() => {\n onChangeEndRef.current = onChangeEnd;\n }, [onChangeEnd]);\n\n const root = useRef<HTMLDivElement>(null);\n const thumb = useRef<HTMLDivElement>(null);\n const [domainMin, domainMax] = domain || [min, max];\n const position = getPosition({ value: _value, min: domainMin, max: domainMax });\n const scaledValue = scale!(_value);\n const _label = typeof label === 'function' ? label(scaledValue) : label;\n const precision = _precision ?? getPrecision(step);\n\n const handleChange = useCallback(\n ({ x }: { x: number }) => {\n if (!disabled) {\n const nextValue = getChangeValue({\n value: x,\n min: domainMin,\n max: domainMax,\n step,\n precision,\n });\n const clampedValue = clamp(nextValue, min!, max!);\n setValue(\n restrictToMarks && marks?.length\n ? findClosestNumber(\n clampedValue,\n marks.map((mark) => mark.value)\n )\n : clampedValue\n );\n valueRef.current = clampedValue;\n }\n },\n [disabled, min, max, domainMin, domainMax, step, precision, setValue, marks, restrictToMarks]\n );\n\n const handleScrubEnd = useCallback(() => {\n if (!disabled && onChangeEndRef.current) {\n const finalValue =\n restrictToMarks && marks?.length\n ? findClosestNumber(\n valueRef.current,\n marks.map((mark) => mark.value)\n )\n : valueRef.current;\n onChangeEndRef.current(finalValue);\n }\n }, [disabled, marks, restrictToMarks]);\n\n const { ref: container, active } = useMove(\n ({ x, y }) => handleChange({ x: orientation === 'vertical' ? 1 - y : x }),\n { onScrubEnd: handleScrubEnd },\n dir\n );\n\n const callOnChangeEnd = useCallback(\n (value: number) => {\n if (!disabled && onChangeEndRef.current) {\n onChangeEndRef.current(value);\n }\n },\n [disabled]\n );\n\n const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n const nextValue = getNextMarkValue(_value, marks);\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n const nextValue = getFloatingValue(\n Math.min(Math.max(_value + step, domainMin), domainMax),\n precision\n );\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n case 'ArrowRight': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n const nextValue =\n dir === 'rtl' ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n const nextValue = getFloatingValue(\n Math.min(Math.max(dir === 'rtl' ? _value - step : _value + step, domainMin), domainMax),\n precision\n );\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n case 'ArrowDown': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n const nextValue = getPreviousMarkValue(_value, marks);\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n const nextValue = getFloatingValue(\n Math.min(Math.max(_value - step, domainMin), domainMax),\n precision\n );\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n case 'ArrowLeft': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n const nextValue =\n dir === 'rtl' ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n const nextValue = getFloatingValue(\n Math.min(Math.max(dir === 'rtl' ? _value + step : _value - step, domainMin), domainMax),\n precision\n );\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n case 'Home': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n setValue(getFirstMarkValue(marks));\n callOnChangeEnd(getFirstMarkValue(marks));\n break;\n }\n\n setValue(min);\n callOnChangeEnd(min);\n break;\n }\n\n case 'End': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n setValue(getLastMarkValue(marks));\n callOnChangeEnd(getLastMarkValue(marks));\n break;\n }\n\n setValue(max);\n callOnChangeEnd(max);\n break;\n }\n\n default: {\n break;\n }\n }\n }\n };\n\n return (\n <SliderProvider value={{ getStyles }}>\n <SliderRoot\n {...others}\n ref={useMergedRef(ref, root)}\n onKeyDownCapture={handleTrackKeydownCapture}\n onMouseDownCapture={() => root.current?.focus()}\n size={size}\n disabled={disabled}\n orientation={orientation}\n >\n <Track\n inverted={inverted}\n offset={0}\n filled={position}\n marks={marks}\n min={domainMin}\n max={domainMax}\n value={scaledValue}\n disabled={disabled}\n containerProps={{\n ref: container,\n onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n }}\n >\n <Thumb\n max={domainMax}\n min={domainMin}\n value={scaledValue}\n position={position}\n dragging={active}\n label={_label}\n ref={thumb as any}\n labelTransitionProps={labelTransitionProps}\n labelAlwaysOn={labelAlwaysOn}\n thumbLabel={thumbLabel}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n orientation={orientation}\n {...thumbProps}\n >\n {thumbChildren}\n </Thumb>\n </Track>\n\n <input type=\"hidden\" name={name} value={scaledValue} {...hiddenInputProps} />\n </SliderRoot>\n </SliderProvider>\n );\n});\n\nSlider.classes = classes;\nSlider.varsResolver = varsResolver;\nSlider.displayName = '@mantine/core/Slider';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","getChangeValue","findClosestNumber","getNextMarkValue","getFloatingValue","getPreviousMarkValue","getFirstMarkValue","getLastMarkValue","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n findClosestNumber,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n rem,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n getFirstMarkValue,\n getLastMarkValue,\n getNextMarkValue,\n getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport interface SliderProps\n extends BoxProps, StylesApiProps<SliderFactory>, ElementProps<'div', 'onChange'> {\n /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n color?: MantineColor;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n radius?: MantineRadius;\n\n /** Controls size of the track @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Minimal possible value @default 0 */\n min?: number;\n\n /** Maximum possible value @default 100 */\n max?: number;\n\n /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n domain?: [number, number];\n\n /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n step?: number;\n\n /** Number of significant digits after the decimal point */\n precision?: number;\n\n /** Controlled component value */\n value?: number;\n\n /** Uncontrolled component default value */\n defaultValue?: number;\n\n /** Called when value changes */\n onChange?: (value: number) => void;\n\n /** Called when user stops dragging slider or changes value with arrows */\n onChangeEnd?: (value: number) => void;\n\n /** Hidden input name, use with uncontrolled component */\n name?: string;\n\n /** Marks displayed on the track */\n marks?: SliderMark[];\n\n /** Function to generate label or any react node to render instead, set to null to disable label */\n label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n labelTransitionProps?: TransitionOverride;\n\n /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n labelAlwaysOn?: boolean;\n\n /** Thumb `aria-label` */\n thumbLabel?: string;\n\n /** Determines whether the label should be displayed when the slider is hovered @default true */\n showLabelOnHover?: boolean;\n\n /** Content rendered inside thumb */\n thumbChildren?: React.ReactNode;\n\n /** Disables slider */\n disabled?: boolean;\n\n /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n thumbSize?: number | string;\n\n /** A transformation function to change the scale of the slider */\n scale?: (value: number) => number;\n\n /** Determines whether track value representation should be inverted @default false */\n inverted?: boolean;\n\n /** Slider orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: React.ComponentProps<'input'>;\n\n /** Determines whether the selection should be only allowed from the given marks array @default false */\n restrictToMarks?: boolean;\n\n /** Props passed down to thumb element */\n thumbProps?: React.ComponentProps<'div'>;\n}\n\nexport type SliderFactory = Factory<{\n props: SliderProps;\n ref: HTMLDivElement;\n stylesNames: SliderStylesNames;\n vars: SliderCssVariables;\n}>;\n\nconst defaultProps = {\n radius: 'xl',\n min: 0,\n max: 100,\n step: 1,\n marks: [],\n label: (f) => f,\n labelTransitionProps: { transition: 'fade', duration: 0 },\n thumbLabel: '',\n showLabelOnHover: true,\n scale: (v) => v,\n size: 'md',\n} satisfies Partial<SliderProps>;\n\nconst varsResolver = createVarsResolver<SliderFactory>(\n (theme, { size, color, thumbSize, radius }) => ({\n root: {\n '--slider-size': getSize(size, 'slider-size'),\n '--slider-color': color ? getThemeColor(color, theme) : undefined,\n '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n '--slider-thumb-size':\n thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n },\n })\n);\n\nexport const Slider = factory<SliderFactory>((_props) => {\n const props = useProps('Slider', defaultProps, _props);\n const {\n classNames,\n styles,\n value,\n onChange,\n onChangeEnd,\n size,\n min,\n max,\n domain,\n step,\n precision: _precision,\n defaultValue,\n name,\n marks,\n label,\n labelTransitionProps,\n labelAlwaysOn,\n thumbLabel,\n showLabelOnHover,\n thumbChildren,\n disabled,\n unstyled,\n scale,\n inverted,\n orientation,\n className,\n style,\n vars,\n hiddenInputProps,\n restrictToMarks,\n thumbProps,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<SliderFactory>({\n name: 'Slider',\n props,\n classes,\n classNames,\n className,\n styles,\n style,\n attributes,\n vars,\n varsResolver,\n unstyled,\n });\n\n const { dir } = useDirection();\n const [hovered, setHovered] = useState(false);\n const [_value, setValue] = useUncontrolled({\n value: typeof value === 'number' ? clamp(value, min, max) : value,\n defaultValue: typeof defaultValue === 'number' ? clamp(defaultValue, min, max) : defaultValue,\n finalValue: clamp(0, min, max),\n onChange,\n });\n\n const valueRef = useRef(_value);\n const onChangeEndRef = useRef(onChangeEnd);\n\n useEffect(() => {\n onChangeEndRef.current = onChangeEnd;\n }, [onChangeEnd]);\n\n const root = useRef<HTMLDivElement>(null);\n const thumb = useRef<HTMLDivElement>(null);\n const [domainMin, domainMax] = domain || [min, max];\n const position = getPosition({ value: _value, min: domainMin, max: domainMax });\n const scaledValue = scale!(_value);\n const _label = typeof label === 'function' ? label(scaledValue) : label;\n const precision = _precision ?? getPrecision(step);\n\n const handleChange = useCallback(\n ({ x }: { x: number }) => {\n if (!disabled) {\n const nextValue = getChangeValue({\n value: x,\n min: domainMin,\n max: domainMax,\n step,\n precision,\n });\n const clampedValue = clamp(nextValue, min!, max!);\n setValue(\n restrictToMarks && marks?.length\n ? findClosestNumber(\n clampedValue,\n marks.map((mark) => mark.value)\n )\n : clampedValue\n );\n valueRef.current = clampedValue;\n }\n },\n [disabled, min, max, domainMin, domainMax, step, precision, setValue, marks, restrictToMarks]\n );\n\n const handleScrubEnd = useCallback(() => {\n if (!disabled && onChangeEndRef.current) {\n const finalValue =\n restrictToMarks && marks?.length\n ? findClosestNumber(\n valueRef.current,\n marks.map((mark) => mark.value)\n )\n : valueRef.current;\n onChangeEndRef.current(finalValue);\n }\n }, [disabled, marks, restrictToMarks]);\n\n const { ref: container, active } = useMove(\n ({ x, y }) => handleChange({ x: orientation === 'vertical' ? 1 - y : x }),\n { onScrubEnd: handleScrubEnd },\n dir\n );\n\n const callOnChangeEnd = useCallback(\n (value: number) => {\n if (!disabled && onChangeEndRef.current) {\n onChangeEndRef.current(value);\n }\n },\n [disabled]\n );\n\n const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n const nextValue = getNextMarkValue(_value, marks);\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n const nextValue = getFloatingValue(\n Math.min(Math.max(_value + step, domainMin), domainMax),\n precision\n );\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n case 'ArrowRight': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n const nextValue =\n dir === 'rtl' ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n const nextValue = getFloatingValue(\n Math.min(Math.max(dir === 'rtl' ? _value - step : _value + step, domainMin), domainMax),\n precision\n );\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n case 'ArrowDown': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n const nextValue = getPreviousMarkValue(_value, marks);\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n const nextValue = getFloatingValue(\n Math.min(Math.max(_value - step, domainMin), domainMax),\n precision\n );\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n case 'ArrowLeft': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n const nextValue =\n dir === 'rtl' ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n const nextValue = getFloatingValue(\n Math.min(Math.max(dir === 'rtl' ? _value + step : _value - step, domainMin), domainMax),\n precision\n );\n setValue(nextValue);\n callOnChangeEnd(nextValue);\n break;\n }\n\n case 'Home': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n setValue(getFirstMarkValue(marks));\n callOnChangeEnd(getFirstMarkValue(marks));\n break;\n }\n\n setValue(min);\n callOnChangeEnd(min);\n break;\n }\n\n case 'End': {\n event.preventDefault();\n thumb.current?.focus();\n\n if (restrictToMarks && marks) {\n setValue(getLastMarkValue(marks));\n callOnChangeEnd(getLastMarkValue(marks));\n break;\n }\n\n setValue(max);\n callOnChangeEnd(max);\n break;\n }\n\n default: {\n break;\n }\n }\n }\n };\n\n return (\n <SliderProvider value={{ getStyles }}>\n <SliderRoot\n {...others}\n ref={useMergedRef(ref, root)}\n onKeyDownCapture={handleTrackKeydownCapture}\n onMouseDownCapture={() => root.current?.focus()}\n size={size}\n disabled={disabled}\n orientation={orientation}\n >\n <Track\n inverted={inverted}\n offset={0}\n filled={position}\n marks={marks}\n min={domainMin}\n max={domainMax}\n value={scaledValue}\n disabled={disabled}\n containerProps={{\n ref: container,\n onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n }}\n >\n <Thumb\n max={domainMax}\n min={domainMin}\n value={scaledValue}\n position={position}\n dragging={active}\n label={_label}\n ref={thumb as any}\n labelTransitionProps={labelTransitionProps}\n labelAlwaysOn={labelAlwaysOn}\n thumbLabel={thumbLabel}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n orientation={orientation}\n {...thumbProps}\n >\n {thumbChildren}\n </Thumb>\n </Track>\n\n <input type=\"hidden\" name={name} value={scaledValue} {...hiddenInputProps} />\n </SliderRoot>\n </SliderProvider>\n );\n});\n\nSlider.classes = classes;\nSlider.varsResolver = varsResolver;\nSlider.displayName = '@mantine/core/Slider';\n\nexport namespace Slider {\n export type Props = SliderProps;\n export type StylesNames = SliderStylesNames;\n export type CssVariables = SliderCssVariables;\n export type Factory = SliderFactory;\n export type Mark = SliderMark;\n}\n"],"mappings":"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"}
|