@mantine/core 9.5.1 → 9.6.0
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/_virtual/_rolldown/runtime.cjs +1 -1
- package/cjs/components/Accordion/Accordion.cjs.map +1 -1
- package/cjs/components/Accordion/AccordionChevron.cjs.map +1 -1
- package/cjs/components/Accordion/AccordionControl/AccordionControl.cjs.map +1 -1
- package/cjs/components/Accordion/AccordionItem/AccordionItem.cjs.map +1 -1
- package/cjs/components/Accordion/AccordionPanel/AccordionPanel.cjs.map +1 -1
- package/cjs/components/ActionBar/ActionBar.cjs +94 -0
- package/cjs/components/ActionBar/ActionBar.cjs.map +1 -0
- package/cjs/components/ActionBar/ActionBar.context.cjs +8 -0
- package/cjs/components/ActionBar/ActionBar.context.cjs.map +1 -0
- package/cjs/components/ActionBar/ActionBar.module.cjs +10 -0
- package/cjs/components/ActionBar/ActionBar.module.cjs.map +1 -0
- package/cjs/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.cjs +33 -0
- package/cjs/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.cjs.map +1 -0
- package/cjs/components/ActionBar/ActionBarDivider/ActionBarDivider.cjs +30 -0
- package/cjs/components/ActionBar/ActionBarDivider/ActionBarDivider.cjs.map +1 -0
- package/cjs/components/ActionIcon/ActionIcon.cjs.map +1 -1
- package/cjs/components/ActionIcon/ActionIconGroup/ActionIconGroup.cjs +16 -15
- package/cjs/components/ActionIcon/ActionIconGroup/ActionIconGroup.cjs.map +1 -1
- package/cjs/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.cjs +15 -14
- package/cjs/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.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 +5 -4
- package/cjs/components/AngleSlider/AngleSlider.cjs.map +1 -1
- package/cjs/components/AppShell/AppShell.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellAside/AppShellAside.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellFooter/AppShellFooter.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellHeader/AppShellHeader.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellMain/AppShellMain.cjs +2 -1
- package/cjs/components/AppShell/AppShellMain/AppShellMain.cjs.map +1 -1
- package/cjs/components/AppShell/use-resizing/use-resizing.cjs.map +1 -1
- package/cjs/components/AspectRatio/AspectRatio.cjs +14 -13
- package/cjs/components/AspectRatio/AspectRatio.cjs.map +1 -1
- package/cjs/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/cjs/components/Avatar/Avatar.cjs.map +1 -1
- package/cjs/components/Avatar/AvatarGroup/AvatarGroup.cjs.map +1 -1
- package/cjs/components/Avatar/AvatarPlaceholderIcon.cjs.map +1 -1
- package/cjs/components/BackgroundImage/BackgroundImage.cjs +14 -13
- package/cjs/components/BackgroundImage/BackgroundImage.cjs.map +1 -1
- package/cjs/components/Badge/Badge.cjs.map +1 -1
- package/cjs/components/Blockquote/Blockquote.cjs +6 -5
- 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/ButtonGroup/ButtonGroup.cjs +16 -15
- package/cjs/components/Button/ButtonGroup/ButtonGroup.cjs.map +1 -1
- package/cjs/components/Button/ButtonGroupSection/ButtonGroupSection.cjs +15 -14
- package/cjs/components/Button/ButtonGroupSection/ButtonGroupSection.cjs.map +1 -1
- package/cjs/components/Card/Card.cjs.map +1 -1
- package/cjs/components/Cascader/Cascader.cjs +10 -5
- package/cjs/components/Cascader/Cascader.cjs.map +1 -1
- package/cjs/components/Cascader/CascaderColumns.cjs +2 -1
- package/cjs/components/Cascader/CascaderColumns.cjs.map +1 -1
- package/cjs/components/Cascader/get-cascader-columns.cjs.map +1 -1
- package/cjs/components/Cascader/use-cascader-safe-area.cjs.map +1 -1
- package/cjs/components/Cascader/use-cascader.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckIcon.cjs +6 -5
- package/cjs/components/Checkbox/CheckIcon.cjs.map +1 -1
- package/cjs/components/Checkbox/Checkbox.cjs +1 -1
- package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxCard/CheckboxCard.cjs +2 -1
- package/cjs/components/Checkbox/CheckboxCard/CheckboxCard.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxGroup/CheckboxGroup.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs.map +1 -1
- package/cjs/components/Chip/Chip.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/CloseButton/CloseIcon.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/ColorInput/EyeDropperIcon.cjs.map +1 -1
- package/cjs/components/ColorPicker/ColorPicker.cjs.map +1 -1
- package/cjs/components/ColorPicker/ColorPicker.context.cjs.map +1 -1
- package/cjs/components/ColorPicker/ColorSlider/ColorSlider.cjs +4 -6
- package/cjs/components/ColorPicker/ColorSlider/ColorSlider.cjs.map +1 -1
- package/cjs/components/ColorPicker/Saturation/Saturation.cjs +4 -6
- package/cjs/components/ColorPicker/Saturation/Saturation.cjs.map +1 -1
- package/cjs/components/ColorPicker/Swatches/Swatches.cjs.map +1 -1
- package/cjs/components/ColorSwatch/ColorSwatch.cjs.map +1 -1
- package/cjs/components/Combobox/Combobox.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxChevron/ComboboxChevron.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxEmpty/ComboboxEmpty.cjs +2 -1
- package/cjs/components/Combobox/ComboboxEmpty/ComboboxEmpty.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs +10 -9
- package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxFooter/ComboboxFooter.cjs +2 -1
- package/cjs/components/Combobox/ComboboxFooter/ComboboxFooter.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxGroup/ComboboxGroup.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxHeader/ComboboxHeader.cjs +2 -1
- package/cjs/components/Combobox/ComboboxHeader/ComboboxHeader.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxOption/ComboboxOption.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxOptions/ComboboxOptions.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxSearch/ComboboxSearch.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs +10 -9
- package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs.map +1 -1
- package/cjs/components/Combobox/OptionsDropdown/OptionsDropdown.cjs.map +1 -1
- package/cjs/components/Combobox/OptionsDropdown/default-options-filter.cjs.map +1 -1
- package/cjs/components/Combobox/get-options-lockup/get-option-by-label.cjs +17 -0
- package/cjs/components/Combobox/get-options-lockup/get-option-by-label.cjs.map +1 -0
- package/cjs/components/Combobox/is-external-input-change/is-external-input-change.cjs +17 -0
- package/cjs/components/Combobox/is-external-input-change/is-external-input-change.cjs.map +1 -0
- package/cjs/components/Combobox/use-combobox/get-index/get-index.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox/get-index/get-virtualized-index.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox/use-combobox.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox/use-virtualized-combobox.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map +1 -1
- package/cjs/components/Combobox/use-pills-reorder/use-pills-reorder.cjs.map +1 -1
- package/cjs/components/ComboboxPopover/ComboboxPopover.cjs.map +1 -1
- package/cjs/components/ComboboxPopover/ComboboxPopoverTarget.cjs +13 -12
- package/cjs/components/ComboboxPopover/ComboboxPopoverTarget.cjs.map +1 -1
- package/cjs/components/CopyButton/CopyButton.cjs.map +1 -1
- package/cjs/components/DataList/DataList.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/Drawer/Drawer.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerBody.cjs +2 -1
- package/cjs/components/Drawer/DrawerBody.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerCloseButton.cjs +2 -1
- package/cjs/components/Drawer/DrawerCloseButton.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerContent.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerHeader.cjs +2 -1
- package/cjs/components/Drawer/DrawerHeader.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerOverlay.cjs +2 -1
- package/cjs/components/Drawer/DrawerOverlay.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerRoot.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerStack.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerTitle.cjs +2 -1
- package/cjs/components/Drawer/DrawerTitle.cjs.map +1 -1
- package/cjs/components/EmptyState/EmptyState.cjs.map +1 -1
- package/cjs/components/EmptyState/EmptyStateActions/EmptyStateActions.cjs +2 -1
- package/cjs/components/EmptyState/EmptyStateActions/EmptyStateActions.cjs.map +1 -1
- package/cjs/components/EmptyState/EmptyStateDescription/EmptyStateDescription.cjs +2 -1
- package/cjs/components/EmptyState/EmptyStateDescription/EmptyStateDescription.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/FloatingIndicator/FloatingIndicator.cjs.map +1 -1
- package/cjs/components/FloatingIndicator/use-floating-indicator.cjs.map +1 -1
- package/cjs/components/FloatingWindow/FloatingWindow.cjs.map +1 -1
- package/cjs/components/FloatingWindow/FloatingWindowResizeHandle.cjs.map +1 -1
- package/cjs/components/FocusTrap/FocusTrap.cjs +2 -1
- package/cjs/components/FocusTrap/FocusTrap.cjs.map +1 -1
- package/cjs/components/Grid/Grid.cjs.map +1 -1
- package/cjs/components/Grid/GridCol/GridCol.cjs.map +1 -1
- package/cjs/components/Group/Group.cjs +16 -14
- package/cjs/components/Group/Group.cjs.map +1 -1
- package/cjs/components/Highlight/Highlight.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCard.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCardDropdown/HoverCardDropdown.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCardGroup/HoverCardGroup.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs.map +1 -1
- package/cjs/components/HoverCard/use-hover-card.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 -3
- package/cjs/components/Input/Input.cjs.map +1 -1
- package/cjs/components/Input/Input.context.cjs.map +1 -1
- package/cjs/components/Input/InputClearButton/InputClearButton.cjs.map +1 -1
- package/cjs/components/Input/InputClearSection/InputClearSection.cjs.map +1 -1
- package/cjs/components/Input/InputDescription/InputDescription.cjs +2 -1
- package/cjs/components/Input/InputDescription/InputDescription.cjs.map +1 -1
- package/cjs/components/Input/InputError/InputError.cjs +2 -1
- package/cjs/components/Input/InputError/InputError.cjs.map +1 -1
- package/cjs/components/Input/InputLabel/InputLabel.cjs.map +1 -1
- package/cjs/components/Input/InputPlaceholder/InputPlaceholder.cjs +13 -12
- package/cjs/components/Input/InputPlaceholder/InputPlaceholder.cjs.map +1 -1
- package/cjs/components/Input/InputSuccess/InputSuccess.cjs +2 -1
- package/cjs/components/Input/InputSuccess/InputSuccess.cjs.map +1 -1
- package/cjs/components/Input/InputWrapper/InputWrapper.cjs.map +1 -1
- package/cjs/components/Input/InputWrapper.context.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 +14 -13
- package/cjs/components/Kbd/Kbd.cjs.map +1 -1
- package/cjs/components/List/List.cjs.map +1 -1
- package/cjs/components/List/ListItem/ListItem.cjs.map +1 -1
- package/cjs/components/Loader/loaders/Bars.cjs.map +1 -1
- package/cjs/components/Loader/loaders/Dots.cjs.map +1 -1
- package/cjs/components/Loader/loaders/Oval.cjs.map +1 -1
- package/cjs/components/LoadingOverlay/LoadingOverlay.cjs.map +1 -1
- package/cjs/components/Mark/Mark.cjs +14 -13
- package/cjs/components/Mark/Mark.cjs.map +1 -1
- package/cjs/components/Marquee/Marquee.cjs.map +1 -1
- package/cjs/components/MaskInput/MaskInput.cjs +3 -2
- package/cjs/components/MaskInput/MaskInput.cjs.map +1 -1
- package/cjs/components/MaskInput/use-mask-input-props.cjs.map +1 -1
- package/cjs/components/Menu/Menu.cjs.map +1 -1
- package/cjs/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.cjs +4 -3
- package/cjs/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.cjs.map +1 -1
- package/cjs/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.context.cjs.map +1 -1
- package/cjs/components/Menu/MenuCheckboxItem/MenuCheckboxItem.cjs +2 -1
- package/cjs/components/Menu/MenuCheckboxItem/MenuCheckboxItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuContextMenu/MenuContextMenu.cjs +3 -2
- package/cjs/components/Menu/MenuContextMenu/MenuContextMenu.cjs.map +1 -1
- package/cjs/components/Menu/MenuDivider/MenuDivider.cjs +2 -1
- package/cjs/components/Menu/MenuDivider/MenuDivider.cjs.map +1 -1
- package/cjs/components/Menu/MenuDropdown/MenuDropdown.cjs.map +1 -1
- package/cjs/components/Menu/MenuItem/MenuItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuLabel/MenuLabel.cjs +2 -1
- package/cjs/components/Menu/MenuLabel/MenuLabel.cjs.map +1 -1
- package/cjs/components/Menu/MenuRadioGroup/MenuRadioGroup.cjs.map +1 -1
- package/cjs/components/Menu/MenuRadioGroup/MenuRadioGroup.context.cjs.map +1 -1
- package/cjs/components/Menu/MenuRadioItem/MenuRadioItem.cjs +2 -1
- package/cjs/components/Menu/MenuRadioItem/MenuRadioItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuSearch/MenuSearch.cjs.map +1 -1
- package/cjs/components/Menu/MenuSelectableItem/MenuSelectableItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuSub/MenuSub.cjs.map +1 -1
- package/cjs/components/Menu/MenuSub/MenuSub.context.cjs.map +1 -1
- package/cjs/components/Menu/MenuSubDropdown/MenuSubDropdown.cjs.map +1 -1
- package/cjs/components/Menu/MenuSubItem/MenuSubItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuTarget/MenuTarget.cjs.map +1 -1
- package/cjs/components/Menu/use-menu-type-ahead.cjs.map +1 -1
- package/cjs/components/Menubar/Menubar.cjs.map +1 -1
- package/cjs/components/Menubar/MenubarMenu/MenubarMenu.cjs.map +1 -1
- package/cjs/components/Menubar/MenubarTarget/MenubarTarget.cjs.map +1 -1
- package/cjs/components/Modal/Modal.cjs.map +1 -1
- package/cjs/components/Modal/ModalBody.cjs +2 -1
- package/cjs/components/Modal/ModalBody.cjs.map +1 -1
- package/cjs/components/Modal/ModalCloseButton.cjs +2 -1
- package/cjs/components/Modal/ModalCloseButton.cjs.map +1 -1
- package/cjs/components/Modal/ModalContent.cjs.map +1 -1
- package/cjs/components/Modal/ModalHeader.cjs +2 -1
- package/cjs/components/Modal/ModalHeader.cjs.map +1 -1
- package/cjs/components/Modal/ModalOverlay.cjs +2 -1
- package/cjs/components/Modal/ModalOverlay.cjs.map +1 -1
- package/cjs/components/Modal/ModalRoot.cjs.map +1 -1
- package/cjs/components/Modal/ModalStack.cjs.map +1 -1
- package/cjs/components/Modal/ModalTitle.cjs +2 -1
- package/cjs/components/Modal/ModalTitle.cjs.map +1 -1
- package/cjs/components/Modal/use-modals-stack.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBase.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseBody.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseCloseButton.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseContent.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseHeader.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseOverlay.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseTitle.cjs.map +1 -1
- package/cjs/components/ModalBase/use-lock-scroll.cjs.map +1 -1
- package/cjs/components/ModalBase/use-modal.cjs +2 -1
- package/cjs/components/ModalBase/use-modal.cjs.map +1 -1
- package/cjs/components/MultiSelect/MultiSelect.cjs +9 -0
- package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
- package/cjs/components/NativeSelect/NativeSelect.cjs.map +1 -1
- package/cjs/components/NativeSelect/NativeSelectOption.cjs.map +1 -1
- package/cjs/components/NavLink/NavLink.cjs.map +1 -1
- package/cjs/components/Notification/Notification.cjs +3 -3
- package/cjs/components/Notification/Notification.cjs.map +1 -1
- package/cjs/components/NumberInput/NumberInput.cjs +5 -3
- package/cjs/components/NumberInput/NumberInput.cjs.map +1 -1
- package/cjs/components/NumberInput/NumberInputChevron.cjs.map +1 -1
- package/cjs/components/OverflowList/OverflowList.cjs +4 -2
- package/cjs/components/OverflowList/OverflowList.cjs.map +1 -1
- package/cjs/components/OverflowList/use-dimensions.cjs.map +1 -1
- package/cjs/components/Overlay/Overlay.cjs +14 -13
- package/cjs/components/Overlay/Overlay.cjs.map +1 -1
- package/cjs/components/Pagination/Pagination.cjs +2 -1
- package/cjs/components/Pagination/Pagination.cjs.map +1 -1
- package/cjs/components/Pagination/Pagination.icons.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationDots/PaginationDots.cjs +2 -1
- package/cjs/components/Pagination/PaginationDots/PaginationDots.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationEdges/PaginationEdges.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationItems/PaginationItems.cjs +3 -2
- package/cjs/components/Pagination/PaginationItems/PaginationItems.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationLabel/PaginationLabel.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationRoot/PaginationRoot.cjs.map +1 -1
- package/cjs/components/Paper/Paper.cjs +1 -1
- package/cjs/components/Paper/Paper.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordToggleIcon.cjs.map +1 -1
- package/cjs/components/Pill/Pill.cjs.map +1 -1
- package/cjs/components/Pill/PillGroup/PillGroup.cjs.map +1 -1
- package/cjs/components/PillsInput/PillsInput.cjs.map +1 -1
- package/cjs/components/PillsInput/PillsInput.context.cjs.map +1 -1
- package/cjs/components/PillsInput/PillsInputField/PillsInputField.cjs.map +1 -1
- package/cjs/components/PinInput/PinInput.cjs +6 -5
- package/cjs/components/PinInput/PinInput.cjs.map +1 -1
- package/cjs/components/Popover/Popover.cjs.map +1 -1
- package/cjs/components/Popover/PopoverContextMenu/PopoverContextMenu.cjs +3 -2
- package/cjs/components/Popover/PopoverContextMenu/PopoverContextMenu.cjs.map +1 -1
- package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs.map +1 -1
- package/cjs/components/Popover/PopoverTarget/PopoverTarget.cjs.map +1 -1
- package/cjs/components/Popover/use-popover.cjs +16 -12
- package/cjs/components/Popover/use-popover.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/Progress/ProgressLabel/ProgressLabel.cjs +2 -1
- package/cjs/components/Progress/ProgressLabel/ProgressLabel.cjs.map +1 -1
- package/cjs/components/Progress/ProgressRoot/ProgressRoot.cjs.map +1 -1
- package/cjs/components/Radio/Radio.cjs.map +1 -1
- package/cjs/components/Radio/RadioCard/RadioCard.cjs.map +1 -1
- package/cjs/components/Radio/RadioGroup/RadioGroup.cjs.map +1 -1
- package/cjs/components/Radio/RadioIcon.cjs.map +1 -1
- package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs.map +1 -1
- package/cjs/components/Rating/Rating.cjs +6 -3
- package/cjs/components/Rating/Rating.cjs.map +1 -1
- package/cjs/components/Rating/RatingItem/RatingItem.cjs.map +1 -1
- package/cjs/components/Rating/StarSymbol/StarIcon.cjs.map +1 -1
- package/cjs/components/Rating/StarSymbol/StarSymbol.cjs +2 -1
- package/cjs/components/Rating/StarSymbol/StarSymbol.cjs.map +1 -1
- package/cjs/components/RingProgress/Curve/Curve.cjs.map +1 -1
- package/cjs/components/RingProgress/RingProgress.cjs.map +1 -1
- package/cjs/components/RollingNumber/DigitColumn.cjs.map +1 -1
- package/cjs/components/RollingNumber/RollingNumber.cjs +19 -13
- package/cjs/components/RollingNumber/RollingNumber.cjs.map +1 -1
- package/cjs/components/RollingNumber/RollingNumber.module.cjs +1 -0
- package/cjs/components/RollingNumber/RollingNumber.module.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollArea.cjs +8 -6
- package/cjs/components/ScrollArea/ScrollArea.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarScroll.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.cjs.map +1 -1
- package/cjs/components/ScrollArea/use-resize-observer.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/Select/Select.cjs +12 -0
- package/cjs/components/Select/Select.cjs.map +1 -1
- package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs.map +1 -1
- package/cjs/components/SimpleGrid/SimpleGrid.cjs.map +1 -1
- package/cjs/components/SimpleGrid/SimpleGridVariables.cjs +10 -8
- package/cjs/components/SimpleGrid/SimpleGridVariables.cjs.map +1 -1
- package/cjs/components/Skeleton/Skeleton.cjs +14 -13
- package/cjs/components/Skeleton/Skeleton.cjs.map +1 -1
- package/cjs/components/Slider/Marks/Marks.cjs +3 -2
- package/cjs/components/Slider/Marks/Marks.cjs.map +1 -1
- package/cjs/components/Slider/RangeSlider/RangeSlider.cjs +20 -11
- package/cjs/components/Slider/RangeSlider/RangeSlider.cjs.map +1 -1
- package/cjs/components/Slider/Slider/Slider.cjs +6 -6
- package/cjs/components/Slider/Slider/Slider.cjs.map +1 -1
- package/cjs/components/Slider/Thumb/Thumb.cjs.map +1 -1
- package/cjs/components/Slider/Track/Track.cjs.map +1 -1
- package/cjs/components/Splitter/GripIcon.cjs.map +1 -1
- package/cjs/components/Splitter/Splitter.cjs +8 -7
- package/cjs/components/Splitter/Splitter.cjs.map +1 -1
- package/cjs/components/Spoiler/Spoiler.cjs.map +1 -1
- package/cjs/components/Stack/Stack.cjs +14 -13
- package/cjs/components/Stack/Stack.cjs.map +1 -1
- package/cjs/components/Stepper/Stepper.cjs +6 -3
- package/cjs/components/Stepper/Stepper.cjs.map +1 -1
- package/cjs/components/Stepper/Stepper.context.cjs.map +1 -1
- package/cjs/components/Stepper/Stepper.module.cjs.map +1 -1
- package/cjs/components/Stepper/StepperStep/StepperStep.cjs +3 -2
- 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 +2 -2
- package/cjs/components/Table/Table.cjs.map +1 -1
- package/cjs/components/Table/TableScrollContainer.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/Tabs/TabsPanel/TabsPanel.cjs.map +1 -1
- package/cjs/components/Tabs/TabsTab/TabsTab.cjs.map +1 -1
- package/cjs/components/TagsInput/TagsInput.cjs +5 -1
- package/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
- package/cjs/components/Text/Text.cjs +18 -17
- package/cjs/components/Text/Text.cjs.map +1 -1
- package/cjs/components/TextInput/TextInput.cjs +6 -5
- package/cjs/components/TextInput/TextInput.cjs.map +1 -1
- package/cjs/components/Textarea/Autosize.cjs.map +1 -1
- package/cjs/components/ThemeIcon/ThemeIcon.cjs +14 -13
- 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.map +1 -1
- package/cjs/components/Title/Title.cjs +1 -1
- package/cjs/components/Title/Title.cjs.map +1 -1
- package/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/cjs/components/Tooltip/TooltipFloating/TooltipFloating.cjs +2 -2
- package/cjs/components/Tooltip/TooltipFloating/TooltipFloating.cjs.map +1 -1
- package/cjs/components/Tooltip/TooltipFloating/use-floating-tooltip.cjs +1 -0
- package/cjs/components/Tooltip/TooltipFloating/use-floating-tooltip.cjs.map +1 -1
- package/cjs/components/Tooltip/TooltipGroup/TooltipGroup.cjs.map +1 -1
- package/cjs/components/Tooltip/use-tooltip.cjs.map +1 -1
- package/cjs/components/Transition/Transition.cjs.map +1 -1
- package/cjs/components/Transition/use-transition.cjs.map +1 -1
- package/cjs/components/Tree/FlatTreeNode.cjs.map +1 -1
- package/cjs/components/Tree/Tree.cjs +2 -1
- package/cjs/components/Tree/Tree.cjs.map +1 -1
- package/cjs/components/Tree/TreeNode.cjs.map +1 -1
- package/cjs/components/Tree/use-tree-node-drag-drop.cjs.map +1 -1
- package/cjs/components/Tree/use-tree.cjs.map +1 -1
- package/cjs/components/TreeSelect/TreeSelect.cjs +14 -9
- package/cjs/components/TreeSelect/TreeSelect.cjs.map +1 -1
- package/cjs/components/TreeSelect/TreeSelectOption.cjs.map +1 -1
- package/cjs/components/Typography/Typography.cjs +12 -11
- package/cjs/components/Typography/Typography.cjs.map +1 -1
- package/cjs/components/Typography/Typography.module.cjs.map +1 -1
- package/cjs/components/UnstyledButton/UnstyledButton.cjs +12 -11
- package/cjs/components/UnstyledButton/UnstyledButton.cjs.map +1 -1
- package/cjs/components/VisuallyHidden/VisuallyHidden.cjs +12 -11
- package/cjs/components/VisuallyHidden/VisuallyHidden.cjs.map +1 -1
- package/cjs/core/Box/Box.cjs.map +1 -1
- package/cjs/core/Box/use-random-classname/use-random-classname.cjs.map +1 -1
- package/cjs/core/DirectionProvider/DirectionProvider.cjs +3 -2
- package/cjs/core/DirectionProvider/DirectionProvider.cjs.map +1 -1
- package/cjs/core/InlineStyles/InlineStyles.cjs.map +1 -1
- package/cjs/core/MantineProvider/Mantine.context.cjs.map +1 -1
- package/cjs/core/MantineProvider/MantineCssVariables/MantineCssVariables.cjs +4 -2
- package/cjs/core/MantineProvider/MantineCssVariables/MantineCssVariables.cjs.map +1 -1
- package/cjs/core/MantineProvider/MantineProvider.cjs +3 -3
- package/cjs/core/MantineProvider/MantineProvider.cjs.map +1 -1
- package/cjs/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs.map +1 -1
- package/cjs/core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.cjs.map +1 -1
- package/cjs/core/MantineProvider/merge-mantine-theme/merge-mantine-theme.cjs.map +1 -1
- package/cjs/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.cjs.map +1 -1
- package/cjs/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.cjs +2 -1
- package/cjs/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.cjs.map +1 -1
- package/cjs/core/MantineProvider/use-mantine-color-scheme/use-provider-color-scheme.cjs.map +1 -1
- package/cjs/core/MantineProvider/use-matches/use-matches.cjs.map +1 -1
- package/cjs/core/styles-api/use-styles/get-class-name/get-class-name.cjs.map +1 -1
- package/cjs/core/styles-api/use-styles/get-class-name/get-global-class-names/get-global-class-names.cjs.map +1 -1
- package/cjs/core/styles-api/use-styles/get-class-name/resolve-class-names/resolve-class-names.cjs.map +1 -1
- package/cjs/core/utils/create-safe-context/create-safe-context.cjs.map +1 -1
- package/cjs/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.cjs +0 -1
- package/cjs/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.cjs.map +1 -1
- package/cjs/core/utils/deep-merge/deep-merge.cjs +4 -3
- package/cjs/core/utils/deep-merge/deep-merge.cjs.map +1 -1
- package/cjs/core/utils/use-hovered/use-hovered.cjs.map +1 -1
- package/cjs/index.cjs +6 -0
- package/cjs/utils/Floating/use-context-menu-handlers.cjs.map +1 -1
- package/cjs/utils/Floating/use-delayed-hover.cjs.map +1 -1
- package/cjs/utils/InlineInput/InlineInput.cjs.map +1 -1
- package/cjs/utils/InputsGroupFieldset/InputsGroupFieldset.cjs.map +1 -1
- package/esm/components/Accordion/Accordion.mjs.map +1 -1
- package/esm/components/Accordion/AccordionChevron.mjs.map +1 -1
- package/esm/components/Accordion/AccordionControl/AccordionControl.mjs.map +1 -1
- package/esm/components/Accordion/AccordionItem/AccordionItem.mjs.map +1 -1
- package/esm/components/Accordion/AccordionPanel/AccordionPanel.mjs.map +1 -1
- package/esm/components/ActionBar/ActionBar.context.mjs +8 -0
- package/esm/components/ActionBar/ActionBar.context.mjs.map +1 -0
- package/esm/components/ActionBar/ActionBar.mjs +94 -0
- package/esm/components/ActionBar/ActionBar.mjs.map +1 -0
- package/esm/components/ActionBar/ActionBar.module.mjs +10 -0
- package/esm/components/ActionBar/ActionBar.module.mjs.map +1 -0
- package/esm/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.mjs +33 -0
- package/esm/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.mjs.map +1 -0
- package/esm/components/ActionBar/ActionBarDivider/ActionBarDivider.mjs +30 -0
- package/esm/components/ActionBar/ActionBarDivider/ActionBarDivider.mjs.map +1 -0
- package/esm/components/ActionIcon/ActionIcon.mjs.map +1 -1
- package/esm/components/ActionIcon/ActionIconGroup/ActionIconGroup.mjs +16 -15
- package/esm/components/ActionIcon/ActionIconGroup/ActionIconGroup.mjs.map +1 -1
- package/esm/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.mjs +15 -14
- package/esm/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.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/AngleSlider/AngleSlider.mjs +5 -4
- package/esm/components/AngleSlider/AngleSlider.mjs.map +1 -1
- package/esm/components/AppShell/AppShell.mjs.map +1 -1
- package/esm/components/AppShell/AppShellMain/AppShellMain.mjs +2 -1
- package/esm/components/AppShell/AppShellMain/AppShellMain.mjs.map +1 -1
- package/esm/components/AspectRatio/AspectRatio.mjs +14 -13
- package/esm/components/AspectRatio/AspectRatio.mjs.map +1 -1
- package/esm/components/Autocomplete/Autocomplete.mjs.map +1 -1
- package/esm/components/Avatar/Avatar.mjs.map +1 -1
- package/esm/components/Avatar/AvatarGroup/AvatarGroup.mjs.map +1 -1
- package/esm/components/Avatar/AvatarPlaceholderIcon.mjs.map +1 -1
- package/esm/components/BackgroundImage/BackgroundImage.mjs +14 -13
- package/esm/components/BackgroundImage/BackgroundImage.mjs.map +1 -1
- package/esm/components/Badge/Badge.mjs.map +1 -1
- package/esm/components/Blockquote/Blockquote.mjs +6 -5
- 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/ButtonGroup/ButtonGroup.mjs +16 -15
- package/esm/components/Button/ButtonGroup/ButtonGroup.mjs.map +1 -1
- package/esm/components/Button/ButtonGroupSection/ButtonGroupSection.mjs +15 -14
- package/esm/components/Button/ButtonGroupSection/ButtonGroupSection.mjs.map +1 -1
- package/esm/components/Card/Card.mjs.map +1 -1
- package/esm/components/Cascader/Cascader.mjs +10 -5
- package/esm/components/Cascader/Cascader.mjs.map +1 -1
- package/esm/components/Cascader/CascaderColumns.mjs +2 -1
- package/esm/components/Cascader/CascaderColumns.mjs.map +1 -1
- package/esm/components/Cascader/get-cascader-columns.mjs.map +1 -1
- package/esm/components/Checkbox/CheckIcon.mjs +6 -5
- package/esm/components/Checkbox/CheckIcon.mjs.map +1 -1
- package/esm/components/Checkbox/Checkbox.mjs +1 -1
- package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxCard/CheckboxCard.mjs +2 -1
- package/esm/components/Checkbox/CheckboxCard/CheckboxCard.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxGroup/CheckboxGroup.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map +1 -1
- package/esm/components/Chip/Chip.mjs.map +1 -1
- package/esm/components/CloseButton/CloseButton.mjs.map +1 -1
- package/esm/components/CloseButton/CloseIcon.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/ColorInput/EyeDropperIcon.mjs.map +1 -1
- package/esm/components/ColorPicker/ColorPicker.mjs.map +1 -1
- package/esm/components/ColorPicker/ColorSlider/ColorSlider.mjs +4 -6
- package/esm/components/ColorPicker/ColorSlider/ColorSlider.mjs.map +1 -1
- package/esm/components/ColorPicker/Saturation/Saturation.mjs +4 -6
- package/esm/components/ColorPicker/Saturation/Saturation.mjs.map +1 -1
- package/esm/components/ColorPicker/Swatches/Swatches.mjs.map +1 -1
- package/esm/components/ColorSwatch/ColorSwatch.mjs.map +1 -1
- package/esm/components/Combobox/Combobox.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxChevron/ComboboxChevron.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxEmpty/ComboboxEmpty.mjs +2 -1
- package/esm/components/Combobox/ComboboxEmpty/ComboboxEmpty.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs +10 -9
- package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxFooter/ComboboxFooter.mjs +2 -1
- package/esm/components/Combobox/ComboboxFooter/ComboboxFooter.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxGroup/ComboboxGroup.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxHeader/ComboboxHeader.mjs +2 -1
- package/esm/components/Combobox/ComboboxHeader/ComboboxHeader.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs +10 -9
- package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs.map +1 -1
- package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs.map +1 -1
- package/esm/components/Combobox/OptionsDropdown/default-options-filter.mjs.map +1 -1
- package/esm/components/Combobox/get-options-lockup/get-option-by-label.mjs +17 -0
- package/esm/components/Combobox/get-options-lockup/get-option-by-label.mjs.map +1 -0
- package/esm/components/Combobox/is-external-input-change/is-external-input-change.mjs +17 -0
- package/esm/components/Combobox/is-external-input-change/is-external-input-change.mjs.map +1 -0
- package/esm/components/Combobox/use-combobox/get-index/get-index.mjs.map +1 -1
- package/esm/components/Combobox/use-combobox/get-index/get-virtualized-index.mjs.map +1 -1
- package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map +1 -1
- package/esm/components/ComboboxPopover/ComboboxPopover.mjs.map +1 -1
- package/esm/components/ComboboxPopover/ComboboxPopoverTarget.mjs +13 -12
- package/esm/components/ComboboxPopover/ComboboxPopoverTarget.mjs.map +1 -1
- package/esm/components/DataList/DataList.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/Drawer/Drawer.mjs.map +1 -1
- package/esm/components/Drawer/DrawerBody.mjs +2 -1
- package/esm/components/Drawer/DrawerBody.mjs.map +1 -1
- package/esm/components/Drawer/DrawerCloseButton.mjs +2 -1
- package/esm/components/Drawer/DrawerCloseButton.mjs.map +1 -1
- package/esm/components/Drawer/DrawerContent.mjs.map +1 -1
- package/esm/components/Drawer/DrawerHeader.mjs +2 -1
- package/esm/components/Drawer/DrawerHeader.mjs.map +1 -1
- package/esm/components/Drawer/DrawerOverlay.mjs +2 -1
- package/esm/components/Drawer/DrawerOverlay.mjs.map +1 -1
- package/esm/components/Drawer/DrawerRoot.mjs.map +1 -1
- package/esm/components/Drawer/DrawerTitle.mjs +2 -1
- package/esm/components/Drawer/DrawerTitle.mjs.map +1 -1
- package/esm/components/EmptyState/EmptyState.mjs.map +1 -1
- package/esm/components/EmptyState/EmptyStateActions/EmptyStateActions.mjs +2 -1
- package/esm/components/EmptyState/EmptyStateActions/EmptyStateActions.mjs.map +1 -1
- package/esm/components/EmptyState/EmptyStateDescription/EmptyStateDescription.mjs +2 -1
- package/esm/components/EmptyState/EmptyStateDescription/EmptyStateDescription.mjs.map +1 -1
- package/esm/components/Fieldset/Fieldset.mjs.map +1 -1
- package/esm/components/FileInput/FileInput.mjs.map +1 -1
- package/esm/components/FloatingWindow/FloatingWindow.mjs.map +1 -1
- package/esm/components/FocusTrap/FocusTrap.mjs +2 -1
- package/esm/components/FocusTrap/FocusTrap.mjs.map +1 -1
- package/esm/components/Grid/Grid.mjs.map +1 -1
- package/esm/components/Group/Group.mjs +16 -14
- package/esm/components/Group/Group.mjs.map +1 -1
- package/esm/components/Highlight/Highlight.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCard.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCardGroup/HoverCardGroup.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs.map +1 -1
- package/esm/components/Indicator/Indicator.mjs.map +1 -1
- package/esm/components/Input/Input.mjs +3 -3
- package/esm/components/Input/Input.mjs.map +1 -1
- package/esm/components/Input/InputClearSection/InputClearSection.mjs.map +1 -1
- package/esm/components/Input/InputDescription/InputDescription.mjs +2 -1
- package/esm/components/Input/InputDescription/InputDescription.mjs.map +1 -1
- package/esm/components/Input/InputError/InputError.mjs +2 -1
- package/esm/components/Input/InputError/InputError.mjs.map +1 -1
- package/esm/components/Input/InputLabel/InputLabel.mjs.map +1 -1
- package/esm/components/Input/InputPlaceholder/InputPlaceholder.mjs +13 -12
- package/esm/components/Input/InputPlaceholder/InputPlaceholder.mjs.map +1 -1
- package/esm/components/Input/InputSuccess/InputSuccess.mjs +2 -1
- package/esm/components/Input/InputSuccess/InputSuccess.mjs.map +1 -1
- package/esm/components/Input/InputWrapper/InputWrapper.mjs.map +1 -1
- package/esm/components/InputBase/InputBase.mjs.map +1 -1
- package/esm/components/Kbd/Kbd.mjs +14 -13
- package/esm/components/Kbd/Kbd.mjs.map +1 -1
- package/esm/components/List/List.mjs.map +1 -1
- package/esm/components/List/ListItem/ListItem.mjs.map +1 -1
- package/esm/components/Loader/loaders/Bars.mjs.map +1 -1
- package/esm/components/Loader/loaders/Dots.mjs.map +1 -1
- package/esm/components/LoadingOverlay/LoadingOverlay.mjs.map +1 -1
- package/esm/components/Mark/Mark.mjs +14 -13
- package/esm/components/Mark/Mark.mjs.map +1 -1
- package/esm/components/Marquee/Marquee.mjs.map +1 -1
- package/esm/components/MaskInput/MaskInput.mjs +3 -2
- package/esm/components/MaskInput/MaskInput.mjs.map +1 -1
- package/esm/components/Menu/Menu.mjs.map +1 -1
- package/esm/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.mjs +4 -3
- package/esm/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.mjs.map +1 -1
- package/esm/components/Menu/MenuCheckboxItem/MenuCheckboxItem.mjs +2 -1
- package/esm/components/Menu/MenuCheckboxItem/MenuCheckboxItem.mjs.map +1 -1
- package/esm/components/Menu/MenuContextMenu/MenuContextMenu.mjs +3 -2
- package/esm/components/Menu/MenuContextMenu/MenuContextMenu.mjs.map +1 -1
- package/esm/components/Menu/MenuDivider/MenuDivider.mjs +2 -1
- package/esm/components/Menu/MenuDivider/MenuDivider.mjs.map +1 -1
- package/esm/components/Menu/MenuDropdown/MenuDropdown.mjs.map +1 -1
- package/esm/components/Menu/MenuItem/MenuItem.mjs.map +1 -1
- package/esm/components/Menu/MenuLabel/MenuLabel.mjs +2 -1
- package/esm/components/Menu/MenuLabel/MenuLabel.mjs.map +1 -1
- package/esm/components/Menu/MenuRadioItem/MenuRadioItem.mjs +2 -1
- package/esm/components/Menu/MenuRadioItem/MenuRadioItem.mjs.map +1 -1
- package/esm/components/Menu/MenuSelectableItem/MenuSelectableItem.mjs.map +1 -1
- package/esm/components/Menu/MenuSub/MenuSub.mjs.map +1 -1
- package/esm/components/Menu/MenuSubItem/MenuSubItem.mjs.map +1 -1
- package/esm/components/Menu/MenuTarget/MenuTarget.mjs.map +1 -1
- package/esm/components/Menubar/Menubar.mjs.map +1 -1
- package/esm/components/Menubar/MenubarMenu/MenubarMenu.mjs.map +1 -1
- package/esm/components/Menubar/MenubarTarget/MenubarTarget.mjs.map +1 -1
- package/esm/components/Modal/Modal.mjs.map +1 -1
- package/esm/components/Modal/ModalBody.mjs +2 -1
- package/esm/components/Modal/ModalBody.mjs.map +1 -1
- package/esm/components/Modal/ModalCloseButton.mjs +2 -1
- package/esm/components/Modal/ModalCloseButton.mjs.map +1 -1
- package/esm/components/Modal/ModalContent.mjs.map +1 -1
- package/esm/components/Modal/ModalHeader.mjs +2 -1
- package/esm/components/Modal/ModalHeader.mjs.map +1 -1
- package/esm/components/Modal/ModalOverlay.mjs +2 -1
- package/esm/components/Modal/ModalOverlay.mjs.map +1 -1
- package/esm/components/Modal/ModalRoot.mjs.map +1 -1
- package/esm/components/Modal/ModalTitle.mjs +2 -1
- package/esm/components/Modal/ModalTitle.mjs.map +1 -1
- package/esm/components/ModalBase/ModalBase.mjs.map +1 -1
- package/esm/components/ModalBase/ModalBaseContent.mjs.map +1 -1
- package/esm/components/ModalBase/ModalBaseOverlay.mjs.map +1 -1
- package/esm/components/ModalBase/use-modal.mjs +2 -1
- package/esm/components/ModalBase/use-modal.mjs.map +1 -1
- package/esm/components/MultiSelect/MultiSelect.mjs +9 -0
- package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
- package/esm/components/NativeSelect/NativeSelect.mjs.map +1 -1
- package/esm/components/NativeSelect/NativeSelectOption.mjs.map +1 -1
- package/esm/components/NavLink/NavLink.mjs.map +1 -1
- package/esm/components/Notification/Notification.mjs +3 -3
- package/esm/components/Notification/Notification.mjs.map +1 -1
- package/esm/components/NumberInput/NumberInput.mjs +5 -3
- package/esm/components/NumberInput/NumberInput.mjs.map +1 -1
- package/esm/components/NumberInput/NumberInputChevron.mjs.map +1 -1
- package/esm/components/OverflowList/OverflowList.mjs +4 -2
- package/esm/components/OverflowList/OverflowList.mjs.map +1 -1
- package/esm/components/Overlay/Overlay.mjs +14 -13
- package/esm/components/Overlay/Overlay.mjs.map +1 -1
- package/esm/components/Pagination/Pagination.icons.mjs.map +1 -1
- package/esm/components/Pagination/Pagination.mjs +2 -1
- package/esm/components/Pagination/Pagination.mjs.map +1 -1
- package/esm/components/Pagination/PaginationDots/PaginationDots.mjs +2 -1
- package/esm/components/Pagination/PaginationDots/PaginationDots.mjs.map +1 -1
- package/esm/components/Pagination/PaginationEdges/PaginationEdges.mjs.map +1 -1
- package/esm/components/Pagination/PaginationItems/PaginationItems.mjs +3 -2
- package/esm/components/Pagination/PaginationItems/PaginationItems.mjs.map +1 -1
- package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs.map +1 -1
- package/esm/components/Pagination/PaginationRoot/PaginationRoot.mjs.map +1 -1
- package/esm/components/Paper/Paper.mjs +1 -1
- package/esm/components/Paper/Paper.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordToggleIcon.mjs.map +1 -1
- package/esm/components/Pill/Pill.mjs.map +1 -1
- package/esm/components/Pill/PillGroup/PillGroup.mjs.map +1 -1
- package/esm/components/PillsInput/PillsInput.mjs.map +1 -1
- package/esm/components/PinInput/PinInput.mjs +6 -5
- package/esm/components/PinInput/PinInput.mjs.map +1 -1
- package/esm/components/Popover/Popover.mjs.map +1 -1
- package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs +3 -2
- package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs.map +1 -1
- package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs.map +1 -1
- package/esm/components/Popover/use-popover.mjs +16 -12
- package/esm/components/Popover/use-popover.mjs.map +1 -1
- package/esm/components/Progress/Progress.mjs.map +1 -1
- package/esm/components/Progress/ProgressLabel/ProgressLabel.mjs +2 -1
- package/esm/components/Progress/ProgressLabel/ProgressLabel.mjs.map +1 -1
- package/esm/components/Progress/ProgressRoot/ProgressRoot.mjs.map +1 -1
- package/esm/components/Radio/Radio.mjs.map +1 -1
- package/esm/components/Radio/RadioCard/RadioCard.mjs.map +1 -1
- package/esm/components/Radio/RadioGroup/RadioGroup.mjs.map +1 -1
- package/esm/components/Radio/RadioIcon.mjs.map +1 -1
- package/esm/components/Radio/RadioIndicator/RadioIndicator.mjs.map +1 -1
- package/esm/components/Rating/Rating.mjs +6 -3
- package/esm/components/Rating/Rating.mjs.map +1 -1
- package/esm/components/Rating/RatingItem/RatingItem.mjs.map +1 -1
- package/esm/components/Rating/StarSymbol/StarIcon.mjs.map +1 -1
- package/esm/components/Rating/StarSymbol/StarSymbol.mjs +2 -1
- package/esm/components/Rating/StarSymbol/StarSymbol.mjs.map +1 -1
- package/esm/components/RingProgress/Curve/Curve.mjs.map +1 -1
- package/esm/components/RingProgress/RingProgress.mjs.map +1 -1
- package/esm/components/RollingNumber/DigitColumn.mjs.map +1 -1
- package/esm/components/RollingNumber/RollingNumber.mjs +20 -14
- package/esm/components/RollingNumber/RollingNumber.mjs.map +1 -1
- package/esm/components/RollingNumber/RollingNumber.module.mjs +1 -0
- package/esm/components/RollingNumber/RollingNumber.module.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollArea.mjs +8 -6
- package/esm/components/ScrollArea/ScrollArea.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.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/Select/Select.mjs +12 -0
- package/esm/components/Select/Select.mjs.map +1 -1
- package/esm/components/SemiCircleProgress/SemiCircleProgress.mjs.map +1 -1
- package/esm/components/SimpleGrid/SimpleGrid.mjs.map +1 -1
- package/esm/components/SimpleGrid/SimpleGridVariables.mjs +10 -8
- package/esm/components/SimpleGrid/SimpleGridVariables.mjs.map +1 -1
- package/esm/components/Skeleton/Skeleton.mjs +14 -13
- package/esm/components/Skeleton/Skeleton.mjs.map +1 -1
- package/esm/components/Slider/Marks/Marks.mjs +3 -2
- package/esm/components/Slider/Marks/Marks.mjs.map +1 -1
- package/esm/components/Slider/RangeSlider/RangeSlider.mjs +20 -11
- package/esm/components/Slider/RangeSlider/RangeSlider.mjs.map +1 -1
- package/esm/components/Slider/Slider/Slider.mjs +6 -6
- package/esm/components/Slider/Slider/Slider.mjs.map +1 -1
- package/esm/components/Slider/Thumb/Thumb.mjs.map +1 -1
- package/esm/components/Slider/Track/Track.mjs.map +1 -1
- package/esm/components/Splitter/GripIcon.mjs.map +1 -1
- package/esm/components/Splitter/Splitter.mjs +8 -7
- package/esm/components/Splitter/Splitter.mjs.map +1 -1
- package/esm/components/Spoiler/Spoiler.mjs.map +1 -1
- package/esm/components/Stack/Stack.mjs +14 -13
- package/esm/components/Stack/Stack.mjs.map +1 -1
- package/esm/components/Stepper/Stepper.context.mjs.map +1 -1
- package/esm/components/Stepper/Stepper.mjs +6 -3
- package/esm/components/Stepper/Stepper.mjs.map +1 -1
- package/esm/components/Stepper/Stepper.module.mjs.map +1 -1
- package/esm/components/Stepper/StepperStep/StepperStep.mjs +3 -2
- 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 +2 -2
- package/esm/components/Table/Table.mjs.map +1 -1
- package/esm/components/Table/TableScrollContainer.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/Tabs/TabsPanel/TabsPanel.mjs.map +1 -1
- package/esm/components/Tabs/TabsTab/TabsTab.mjs.map +1 -1
- package/esm/components/TagsInput/TagsInput.mjs +5 -1
- package/esm/components/TagsInput/TagsInput.mjs.map +1 -1
- package/esm/components/Text/Text.mjs +18 -17
- package/esm/components/Text/Text.mjs.map +1 -1
- package/esm/components/TextInput/TextInput.mjs +6 -5
- package/esm/components/TextInput/TextInput.mjs.map +1 -1
- package/esm/components/ThemeIcon/ThemeIcon.mjs +14 -13
- 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.map +1 -1
- package/esm/components/Title/Title.mjs +1 -1
- package/esm/components/Title/Title.mjs.map +1 -1
- package/esm/components/Tooltip/Tooltip.mjs.map +1 -1
- package/esm/components/Tooltip/TooltipFloating/TooltipFloating.mjs +2 -2
- package/esm/components/Tooltip/TooltipFloating/TooltipFloating.mjs.map +1 -1
- package/esm/components/Tooltip/TooltipFloating/use-floating-tooltip.mjs +1 -0
- package/esm/components/Tooltip/TooltipFloating/use-floating-tooltip.mjs.map +1 -1
- package/esm/components/Tooltip/TooltipGroup/TooltipGroup.mjs.map +1 -1
- package/esm/components/Transition/Transition.mjs.map +1 -1
- package/esm/components/Tree/FlatTreeNode.mjs.map +1 -1
- package/esm/components/Tree/Tree.mjs +2 -1
- package/esm/components/Tree/Tree.mjs.map +1 -1
- package/esm/components/Tree/TreeNode.mjs.map +1 -1
- package/esm/components/Tree/use-tree.mjs.map +1 -1
- package/esm/components/TreeSelect/TreeSelect.mjs +14 -9
- package/esm/components/TreeSelect/TreeSelect.mjs.map +1 -1
- package/esm/components/TreeSelect/TreeSelectOption.mjs.map +1 -1
- package/esm/components/Typography/Typography.mjs +12 -11
- package/esm/components/Typography/Typography.mjs.map +1 -1
- package/esm/components/Typography/Typography.module.mjs.map +1 -1
- package/esm/components/UnstyledButton/UnstyledButton.mjs +12 -11
- package/esm/components/UnstyledButton/UnstyledButton.mjs.map +1 -1
- package/esm/components/VisuallyHidden/VisuallyHidden.mjs +12 -11
- package/esm/components/VisuallyHidden/VisuallyHidden.mjs.map +1 -1
- package/esm/core/DirectionProvider/DirectionProvider.mjs +3 -2
- package/esm/core/DirectionProvider/DirectionProvider.mjs.map +1 -1
- package/esm/core/InlineStyles/InlineStyles.mjs.map +1 -1
- package/esm/core/MantineProvider/MantineCssVariables/MantineCssVariables.mjs +4 -2
- package/esm/core/MantineProvider/MantineCssVariables/MantineCssVariables.mjs.map +1 -1
- package/esm/core/MantineProvider/MantineProvider.mjs +3 -3
- package/esm/core/MantineProvider/MantineProvider.mjs.map +1 -1
- package/esm/core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.mjs.map +1 -1
- package/esm/core/MantineProvider/merge-mantine-theme/merge-mantine-theme.mjs.map +1 -1
- package/esm/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.mjs +2 -1
- package/esm/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.mjs.map +1 -1
- package/esm/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.mjs +0 -1
- package/esm/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.mjs.map +1 -1
- package/esm/core/utils/deep-merge/deep-merge.mjs +4 -3
- package/esm/core/utils/deep-merge/deep-merge.mjs.map +1 -1
- package/esm/index.mjs +4 -1
- package/esm/utils/InlineInput/InlineInput.mjs.map +1 -1
- package/lib/components/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/AccordionChevron.d.ts +1 -1
- package/lib/components/ActionBar/ActionBar.context.d.ts +8 -0
- package/lib/components/ActionBar/ActionBar.d.ts +44 -0
- package/lib/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.d.ts +22 -0
- package/lib/components/ActionBar/ActionBarDivider/ActionBarDivider.d.ts +16 -0
- package/lib/components/ActionBar/index.d.ts +17 -0
- package/lib/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.d.ts +1 -1
- package/lib/components/Avatar/AvatarPlaceholderIcon.d.ts +1 -1
- package/lib/components/Cascader/CascaderColumns.d.ts +1 -1
- package/lib/components/Checkbox/CheckIcon.d.ts +2 -2
- package/lib/components/CloseButton/CloseIcon.d.ts +1 -1
- package/lib/components/ColorInput/EyeDropperIcon.d.ts +1 -1
- package/lib/components/ColorPicker/Saturation/Saturation.d.ts +1 -1
- package/lib/components/ColorPicker/Swatches/Swatches.d.ts +1 -1
- package/lib/components/ColorPicker/Thumb/Thumb.d.ts +1 -1
- package/lib/components/Combobox/Combobox.d.ts +1 -1
- package/lib/components/Combobox/ComboboxClearButton/ComboboxClearButton.d.ts +1 -1
- package/lib/components/Combobox/ComboboxHiddenInput/ComboboxHiddenInput.d.ts +1 -1
- package/lib/components/Combobox/OptionsDropdown/OptionsDropdown.d.ts +1 -1
- package/lib/components/Combobox/get-options-lockup/get-option-by-label.d.ts +8 -0
- package/lib/components/Combobox/is-external-input-change/is-external-input-change.d.ts +7 -0
- package/lib/components/ComboboxPopover/ComboboxPopover.d.ts +1 -1
- package/lib/components/CopyButton/CopyButton.d.ts +1 -1
- package/lib/components/Drawer/DrawerStack.d.ts +1 -1
- package/lib/components/FocusTrap/FocusTrap.d.ts +1 -1
- package/lib/components/Grid/GridCol/GridColVariables.d.ts +1 -1
- package/lib/components/Grid/GridVariables.d.ts +1 -1
- package/lib/components/HoverCard/HoverCard.d.ts +1 -1
- package/lib/components/HoverCard/HoverCardDropdown/HoverCardDropdown.d.ts +1 -1
- package/lib/components/HoverCard/HoverCardGroup/HoverCardGroup.d.ts +1 -1
- package/lib/components/HoverCard/HoverCardTarget/HoverCardTarget.d.ts +1 -1
- package/lib/components/Input/InputClearSection/InputClearSection.d.ts +1 -1
- package/lib/components/Input/index.d.ts +1 -1
- package/lib/components/Menu/Menu.d.ts +1 -1
- package/lib/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.d.ts +1 -1
- package/lib/components/Menu/MenuRadioGroup/MenuRadioGroup.d.ts +1 -1
- package/lib/components/Menu/MenuSelectableItem/MenuSelectableItem.d.ts +1 -1
- package/lib/components/Menu/MenuSub/MenuSub.d.ts +1 -1
- package/lib/components/Menu/MenuSubTarget/MenuSubTarget.d.ts +1 -1
- package/lib/components/Menu/MenuTarget/MenuTarget.d.ts +1 -1
- package/lib/components/Menubar/MenubarDropdown/MenubarDropdown.d.ts +1 -1
- package/lib/components/Menubar/MenubarMenu/MenubarMenu.d.ts +1 -1
- package/lib/components/Menubar/MenubarTarget/MenubarTarget.d.ts +1 -1
- package/lib/components/Modal/ModalStack.d.ts +1 -1
- package/lib/components/ModalBase/ModalBase.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseBody.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseCloseButton.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseContent.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseHeader.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseOverlay.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseTitle.d.ts +1 -1
- package/lib/components/ModalBase/NativeScrollArea.d.ts +1 -1
- package/lib/components/NativeSelect/NativeSelectOption.d.ts +1 -1
- package/lib/components/Notification/Notification.d.ts +2 -1
- package/lib/components/NumberFormatter/NumberFormatter.d.ts +1 -1
- package/lib/components/NumberInput/NumberInputChevron.d.ts +1 -1
- package/lib/components/Pagination/Pagination.icons.d.ts +5 -5
- package/lib/components/Pagination/PaginationItems/PaginationItems.d.ts +1 -1
- package/lib/components/PasswordInput/PasswordToggleIcon.d.ts +1 -1
- package/lib/components/Popover/Popover.d.ts +2 -2
- package/lib/components/Progress/Progress.d.ts +1 -1
- package/lib/components/Radio/RadioIcon.d.ts +1 -1
- package/lib/components/Rating/RatingItem/RatingItem.d.ts +1 -1
- package/lib/components/Rating/StarSymbol/StarIcon.d.ts +1 -1
- package/lib/components/Rating/StarSymbol/StarSymbol.d.ts +1 -1
- package/lib/components/RingProgress/Curve/Curve.d.ts +1 -1
- package/lib/components/RollingNumber/DigitColumn.d.ts +1 -1
- package/lib/components/RollingNumber/RollingNumber.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.d.ts +2 -2
- package/lib/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarScroll.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.d.ts +2 -2
- package/lib/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.d.ts +1 -1
- package/lib/components/SimpleGrid/SimpleGridVariables.d.ts +2 -2
- package/lib/components/Slider/Marks/Marks.d.ts +1 -1
- package/lib/components/Slider/SliderRoot/SliderRoot.d.ts +1 -1
- package/lib/components/Slider/Thumb/Thumb.d.ts +1 -1
- package/lib/components/Slider/Track/Track.d.ts +1 -1
- package/lib/components/Splitter/GripIcon.d.ts +2 -2
- package/lib/components/Stepper/Stepper.context.d.ts +1 -0
- package/lib/components/Stepper/Stepper.d.ts +3 -1
- package/lib/components/Table/TableDataRenderer.d.ts +1 -1
- package/lib/components/Textarea/Autosize.d.ts +1 -1
- package/lib/components/Tooltip/TooltipGroup/TooltipGroup.d.ts +1 -1
- package/lib/components/Transition/Transition.d.ts +1 -1
- package/lib/components/Tree/FlatTreeNode.d.ts +1 -1
- package/lib/components/Tree/Tree.d.ts +1 -1
- package/lib/components/Tree/TreeNode.d.ts +1 -1
- package/lib/components/TreeSelect/TreeSelectOption.d.ts +1 -1
- package/lib/components/index.d.ts +1 -0
- package/lib/core/DirectionProvider/DirectionProvider.d.ts +1 -1
- package/lib/core/InlineStyles/InlineStyles.d.ts +1 -1
- package/lib/core/MantineProvider/ColorSchemeScript/ColorSchemeScript.d.ts +1 -1
- package/lib/core/MantineProvider/MantineClasses/MantineClasses.d.ts +1 -1
- package/lib/core/MantineProvider/MantineCssVariables/MantineCssVariables.d.ts +1 -1
- package/lib/core/MantineProvider/MantineProvider.d.ts +5 -5
- package/lib/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.d.ts +1 -1
- package/lib/utils/Floating/FloatingArrow/FloatingArrow.d.ts +1 -1
- package/lib/utils/InlineInput/InlineInput.d.ts +1 -1
- package/lib/utils/InputsGroupFieldset/InputsGroupFieldset.d.ts +1 -1
- package/package.json +5 -5
- package/styles/ActionBar.css +13 -0
- package/styles/ActionBar.layer.css +14 -0
- package/styles/RollingNumber.css +21 -0
- package/styles/RollingNumber.layer.css +21 -0
- package/styles/Stepper.css +30 -0
- package/styles/Stepper.layer.css +30 -0
- package/styles/Typography.css +59 -0
- package/styles/Typography.layer.css +59 -0
- package/styles.css +165 -41
- package/styles.layer.css +165 -41
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionsDropdown.cjs","names":["isOptionsGroup","CheckIcon","classes","Combobox","useComboboxContext","defaultOptionsFilter","isEmptyComboboxData","ScrollArea"],"sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Primitive } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ScrollArea, ScrollAreaProps } from '../../ScrollArea/ScrollArea';\nimport { Combobox } from '../Combobox';\nimport { useComboboxContext } from '../Combobox.context';\nimport { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter<Value extends Primitive = string> = (\n input: FilterOptionsInput<Value>\n) => ComboboxParsedItem<Value>[];\n\nexport interface OptionsGroup {\n group: React.ReactNode;\n items: ComboboxItem<Primitive>[];\n}\n\nexport type OptionsData = (ComboboxItem<Primitive> | OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem<Primitive> | OptionsGroup;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive | Primitive[] | null;\n checkIconPosition?: 'left' | 'right';\n unstyled: boolean | undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({\n data,\n withCheckIcon,\n withAlignedLabels,\n value,\n checkIconPosition,\n unstyled,\n renderOption,\n}: OptionProps) {\n if (!isOptionsGroup(data)) {\n const checked = isValueChecked(value, data.value);\n const check =\n withCheckIcon &&\n (checked ? (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n ) : withAlignedLabels ? (\n <div className={classes.optionsDropdownCheckPlaceholder} />\n ) : null);\n\n const defaultContent = (\n <>\n {checkIconPosition === 'left' && check}\n <span>{data.label}</span>\n {checkIconPosition === 'right' && check}\n </>\n );\n\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' || undefined}\n data-checked={checked || undefined}\n aria-selected={checked}\n active={checked}\n >\n {typeof renderOption === 'function'\n ? renderOption({ option: data, checked })\n : defaultContent}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={`${item.value}`}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n checkIconPosition={checkIconPosition}\n renderOption={renderOption}\n />\n ));\n\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n data: OptionsData;\n filter: OptionsFilter<Primitive> | undefined;\n search: string | undefined;\n limit: number | undefined;\n withScrollArea: boolean | undefined;\n maxDropdownHeight: number | string | undefined;\n /** Overrides `floatingHeight` from the `Combobox` context, used by `Combobox`-based components */\n floatingHeight?: 'viewport';\n hidden?: boolean;\n hiddenWhenEmpty?: boolean;\n filterOptions?: boolean;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive | Primitive[] | null;\n checkIconPosition?: 'left' | 'right';\n nothingFoundMessage?: React.ReactNode;\n unstyled: boolean | undefined;\n labelId: string | undefined;\n 'aria-label': string | undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n scrollAreaProps: ScrollAreaProps | undefined;\n}\n\nexport function OptionsDropdown({\n data,\n hidden,\n hiddenWhenEmpty,\n filter,\n search,\n limit,\n maxDropdownHeight,\n floatingHeight,\n withScrollArea = true,\n filterOptions = true,\n withCheckIcon = false,\n withAlignedLabels = false,\n value,\n checkIconPosition,\n nothingFoundMessage,\n unstyled,\n labelId,\n renderOption,\n scrollAreaProps,\n 'aria-label': ariaLabel,\n}: OptionsDropdownProps) {\n const ctx = useComboboxContext();\n validateOptions(data);\n\n const shouldFilter = typeof search === 'string';\n const filteredData = shouldFilter\n ? (filter || defaultOptionsFilter)({\n options: data,\n search: filterOptions ? search : '',\n limit: limit ?? Infinity,\n })\n : data;\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item, index) => (\n <Option\n data={item}\n key={\n isOptionsGroup(item)\n ? `group-${typeof item.group === 'string' ? item.group : index}`\n : `${item.value}`\n }\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n renderOption={renderOption}\n />\n ));\n\n return (\n <Combobox.Dropdown hidden={hidden || (hiddenWhenEmpty && isEmpty)} data-composed>\n <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={\n (floatingHeight ?? ctx.floatingHeight) === 'viewport'\n ? 'var(--combobox-floating-options-max-height)'\n : (maxDropdownHeight ?? 220)\n }\n type=\"scroll\"\n scrollbarSize=\"var(--combobox-padding)\"\n offsetScrollbars=\"y\"\n {...scrollAreaProps}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAS,eAAe,OAAmD,aAAwB;CACjG,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,IAAI,UAAU;AACxE;AAEA,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;CACd,IAAI,CAACA,yBAAAA,eAAe,IAAI,GAAG;EACzB,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;EAChD,MAAM,QACJ,kBACC,UACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD,EAAW,WAAWC,wBAAAA,QAAQ,yBAA2B,CAAA,IACvD,oBACF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAWA,wBAAAA,QAAQ,gCAAkC,CAAA,IACxD;EAEN,MAAM,iBACJ,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;GACG,sBAAsB,UAAU;GACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;GACvB,sBAAsB,WAAW;EAClC,EAAA,CAAA;EAGJ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,SAAS,QAAV;GACE,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,YAAA,
|
|
1
|
+
{"version":3,"file":"OptionsDropdown.cjs","names":["isOptionsGroup","CheckIcon","classes","Combobox","cx","useComboboxContext","defaultOptionsFilter","isEmptyComboboxData","ScrollArea"],"sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Primitive } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ScrollArea, ScrollAreaProps } from '../../ScrollArea/ScrollArea';\nimport { Combobox } from '../Combobox';\nimport { useComboboxContext } from '../Combobox.context';\nimport { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter<Value extends Primitive = string> = (\n input: FilterOptionsInput<Value>\n) => ComboboxParsedItem<Value>[];\n\nexport interface OptionsGroup {\n group: React.ReactNode;\n items: ComboboxItem<Primitive>[];\n}\n\nexport type OptionsData = (ComboboxItem<Primitive> | OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem<Primitive> | OptionsGroup;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive | Primitive[] | null;\n checkIconPosition?: 'left' | 'right';\n unstyled: boolean | undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({\n data,\n withCheckIcon,\n withAlignedLabels,\n value,\n checkIconPosition,\n unstyled,\n renderOption,\n}: OptionProps) {\n if (!isOptionsGroup(data)) {\n const checked = isValueChecked(value, data.value);\n const check =\n withCheckIcon &&\n (checked ? (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n ) : withAlignedLabels ? (\n <div className={classes.optionsDropdownCheckPlaceholder} />\n ) : null);\n\n const defaultContent = (\n <>\n {checkIconPosition === 'left' && check}\n <span>{data.label}</span>\n {checkIconPosition === 'right' && check}\n </>\n );\n\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' || undefined}\n data-checked={checked || undefined}\n aria-selected={checked}\n active={checked}\n >\n {typeof renderOption === 'function'\n ? renderOption({ option: data, checked })\n : defaultContent}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={`${item.value}`}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n checkIconPosition={checkIconPosition}\n renderOption={renderOption}\n />\n ));\n\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n data: OptionsData;\n filter: OptionsFilter<Primitive> | undefined;\n search: string | undefined;\n limit: number | undefined;\n withScrollArea: boolean | undefined;\n maxDropdownHeight: number | string | undefined;\n /** Overrides `floatingHeight` from the `Combobox` context, used by `Combobox`-based components */\n floatingHeight?: 'viewport';\n hidden?: boolean;\n hiddenWhenEmpty?: boolean;\n filterOptions?: boolean;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive | Primitive[] | null;\n checkIconPosition?: 'left' | 'right';\n nothingFoundMessage?: React.ReactNode;\n unstyled: boolean | undefined;\n labelId: string | undefined;\n 'aria-label': string | undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n scrollAreaProps: ScrollAreaProps | undefined;\n}\n\nexport function OptionsDropdown({\n data,\n hidden,\n hiddenWhenEmpty,\n filter,\n search,\n limit,\n maxDropdownHeight,\n floatingHeight,\n withScrollArea = true,\n filterOptions = true,\n withCheckIcon = false,\n withAlignedLabels = false,\n value,\n checkIconPosition,\n nothingFoundMessage,\n unstyled,\n labelId,\n renderOption,\n scrollAreaProps,\n 'aria-label': ariaLabel,\n}: OptionsDropdownProps) {\n const ctx = useComboboxContext();\n validateOptions(data);\n\n const shouldFilter = typeof search === 'string';\n const filteredData = shouldFilter\n ? (filter || defaultOptionsFilter)({\n options: data,\n search: filterOptions ? search : '',\n limit: limit ?? Infinity,\n })\n : data;\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item, index) => (\n <Option\n data={item}\n key={\n isOptionsGroup(item)\n ? `group-${typeof item.group === 'string' ? item.group : index}`\n : `${item.value}`\n }\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n renderOption={renderOption}\n />\n ));\n\n return (\n <Combobox.Dropdown hidden={hidden || (hiddenWhenEmpty && isEmpty)} data-composed>\n <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={\n (floatingHeight ?? ctx.floatingHeight) === 'viewport'\n ? 'var(--combobox-floating-options-max-height)'\n : (maxDropdownHeight ?? 220)\n }\n type=\"scroll\"\n scrollbarSize=\"var(--combobox-padding)\"\n offsetScrollbars=\"y\"\n {...scrollAreaProps}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-options-filter.cjs","names":["isOptionsGroup"],"sources":["../../../../src/components/Combobox/OptionsDropdown/default-options-filter.ts"],"sourcesContent":["import { Primitive } from '../../../core';\nimport { ComboboxItem, ComboboxParsedItem } from '../Combobox.types';\nimport { isOptionsGroup } from './is-options-group';\n\nexport interface FilterOptionsInput<Value extends Primitive = Primitive> {\n options: ComboboxParsedItem<Value>[];\n search: string;\n limit: number;\n}\n\nexport function defaultOptionsFilter({\n options,\n search,\n limit,\n}: FilterOptionsInput): ComboboxParsedItem<Primitive>[] {\n const parsedSearch = search.trim().toLowerCase();\n const result: ComboboxParsedItem<Primitive>[] = [];\n\n for (let i = 0; i < options.length; i += 1) {\n const item = options[i];\n\n if (result.length === limit) {\n return result;\n }\n\n if (isOptionsGroup(item)) {\n result.push({\n group: item.group,\n items: defaultOptionsFilter({\n options: item.items,\n search,\n limit: limit - result.length,\n }) as ComboboxItem[],\n });\n }\n\n if (!isOptionsGroup(item)) {\n if (item.label.toLowerCase().includes(parsedSearch)) {\n result.push(item);\n }\n }\n }\n\n return result;\n}\n"],"mappings":";;;AAUA,SAAgB,qBAAqB,EACnC,SACA,QACA,SACsD;CACtD,MAAM,eAAe,OAAO,KAAK,CAAC,CAAC,YAAY;CAC/C,MAAM,SAA0C,CAAC;CAEjD,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;EAC1C,MAAM,OAAO,QAAQ;EAErB,IAAI,OAAO,WAAW,OACpB,OAAO;EAGT,IAAIA,yBAAAA,eAAe,IAAI,GACrB,OAAO,KAAK;GACV,OAAO,KAAK;GACZ,OAAO,qBAAqB;IAC1B,SAAS,KAAK;IACd;IACA,OAAO,QAAQ,OAAO;GACxB,CAAC;EACH,CAAC;EAGH,IAAI,CAACA,yBAAAA,eAAe,IAAI;
|
|
1
|
+
{"version":3,"file":"default-options-filter.cjs","names":["isOptionsGroup"],"sources":["../../../../src/components/Combobox/OptionsDropdown/default-options-filter.ts"],"sourcesContent":["import { Primitive } from '../../../core';\nimport { ComboboxItem, ComboboxParsedItem } from '../Combobox.types';\nimport { isOptionsGroup } from './is-options-group';\n\nexport interface FilterOptionsInput<Value extends Primitive = Primitive> {\n options: ComboboxParsedItem<Value>[];\n search: string;\n limit: number;\n}\n\nexport function defaultOptionsFilter({\n options,\n search,\n limit,\n}: FilterOptionsInput): ComboboxParsedItem<Primitive>[] {\n const parsedSearch = search.trim().toLowerCase();\n const result: ComboboxParsedItem<Primitive>[] = [];\n\n for (let i = 0; i < options.length; i += 1) {\n const item = options[i];\n\n if (result.length === limit) {\n return result;\n }\n\n if (isOptionsGroup(item)) {\n result.push({\n group: item.group,\n items: defaultOptionsFilter({\n options: item.items,\n search,\n limit: limit - result.length,\n }) as ComboboxItem[],\n });\n }\n\n if (!isOptionsGroup(item)) {\n if (item.label.toLowerCase().includes(parsedSearch)) {\n result.push(item);\n }\n }\n }\n\n return result;\n}\n"],"mappings":";;;AAUA,SAAgB,qBAAqB,EACnC,SACA,QACA,SACsD;CACtD,MAAM,eAAe,OAAO,KAAK,CAAC,CAAC,YAAY;CAC/C,MAAM,SAA0C,CAAC;CAEjD,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;EAC1C,MAAM,OAAO,QAAQ;EAErB,IAAI,OAAO,WAAW,OACpB,OAAO;EAGT,IAAIA,yBAAAA,eAAe,IAAI,GACrB,OAAO,KAAK;GACV,OAAO,KAAK;GACZ,OAAO,qBAAqB;IAC1B,SAAS,KAAK;IACd;IACA,OAAO,QAAQ,OAAO;GACxB,CAAC;EACH,CAAC;EAGH,IAAI,CAACA,yBAAAA,eAAe,IAAI,GAClB;OAAA,KAAK,MAAM,YAAY,CAAC,CAAC,SAAS,YAAY,GAChD,OAAO,KAAK,IAAI;EAAA;CAGtB;CAEA,OAAO;AACT"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@mantine/core/src/components/Combobox/get-options-lockup/get-option-by-label.ts
|
|
3
|
+
/**
|
|
4
|
+
* Finds an enabled option by its label, ignoring casing and surrounding whitespace. Returns
|
|
5
|
+
* `undefined` when the label is ambiguous: options with duplicate labels are valid data, and there
|
|
6
|
+
* is no way to tell which of them was meant.
|
|
7
|
+
*/
|
|
8
|
+
function getOptionByLabel(optionsLockup, label) {
|
|
9
|
+
const normalizedLabel = label.trim().toLowerCase();
|
|
10
|
+
if (normalizedLabel === "") return;
|
|
11
|
+
const matchedOptions = Object.values(optionsLockup).filter((option) => !option.disabled && option.label.trim().toLowerCase() === normalizedLabel);
|
|
12
|
+
return matchedOptions.length === 1 ? matchedOptions[0] : void 0;
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
exports.getOptionByLabel = getOptionByLabel;
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=get-option-by-label.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-option-by-label.cjs","names":[],"sources":["../../../../src/components/Combobox/get-options-lockup/get-option-by-label.ts"],"sourcesContent":["import { Primitive } from '../../../core';\nimport { ComboboxItem } from '../Combobox.types';\n\n/**\n * Finds an enabled option by its label, ignoring casing and surrounding whitespace. Returns\n * `undefined` when the label is ambiguous: options with duplicate labels are valid data, and there\n * is no way to tell which of them was meant.\n */\nexport function getOptionByLabel<Value extends Primitive = string>(\n optionsLockup: Record<PropertyKey, ComboboxItem<Value>>,\n label: string\n): ComboboxItem<Value> | undefined {\n const normalizedLabel = label.trim().toLowerCase();\n\n if (normalizedLabel === '') {\n return undefined;\n }\n\n const matchedOptions = Object.values(optionsLockup).filter(\n (option) => !option.disabled && option.label.trim().toLowerCase() === normalizedLabel\n );\n\n return matchedOptions.length === 1 ? matchedOptions[0] : undefined;\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,iBACd,eACA,OACiC;CACjC,MAAM,kBAAkB,MAAM,KAAK,CAAC,CAAC,YAAY;CAEjD,IAAI,oBAAoB,IACtB;CAGF,MAAM,iBAAiB,OAAO,OAAO,aAAa,CAAC,CAAC,QACjD,WAAW,CAAC,OAAO,YAAY,OAAO,MAAM,KAAK,CAAC,CAAC,YAAY,MAAM,eACxE;CAEA,OAAO,eAAe,WAAW,IAAI,eAAe,KAAK,KAAA;AAC3D"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_find_element_in_shadow_dom = require("../../../core/utils/find-element-in-shadow-dom/find-element-in-shadow-dom.cjs");
|
|
3
|
+
//#region packages/@mantine/core/src/components/Combobox/is-external-input-change/is-external-input-change.ts
|
|
4
|
+
/**
|
|
5
|
+
* Determines whether an input change was produced by something other than the user typing into the
|
|
6
|
+
* input – browser autofill, password managers and browser extensions all write to inputs without
|
|
7
|
+
* focusing them first. Combobox components reconcile the search value with the selected value on
|
|
8
|
+
* blur, which never happens for such writes.
|
|
9
|
+
*/
|
|
10
|
+
function isExternalInputChange(event) {
|
|
11
|
+
const target = event.currentTarget;
|
|
12
|
+
return require_find_element_in_shadow_dom.getRootElement(target).activeElement !== target;
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
exports.isExternalInputChange = isExternalInputChange;
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=is-external-input-change.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"is-external-input-change.cjs","names":["getRootElement"],"sources":["../../../../src/components/Combobox/is-external-input-change/is-external-input-change.ts"],"sourcesContent":["import { getRootElement } from '../../../core';\n\n/**\n * Determines whether an input change was produced by something other than the user typing into the\n * input – browser autofill, password managers and browser extensions all write to inputs without\n * focusing them first. Combobox components reconcile the search value with the selected value on\n * blur, which never happens for such writes.\n */\nexport function isExternalInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n const target = event.currentTarget;\n return getRootElement(target).activeElement !== target;\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,sBAAsB,OAA4C;CAChF,MAAM,SAAS,MAAM;CACrB,OAAOA,mCAAAA,eAAe,MAAM,CAAC,CAAC,kBAAkB;AAClD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-index.cjs","names":[],"sources":["../../../../../src/components/Combobox/use-combobox/get-index/get-index.ts"],"sourcesContent":["export function getPreviousIndex(\n currentIndex: number,\n elements: NodeListOf<HTMLDivElement> | HTMLDivElement[],\n loop: boolean\n) {\n for (let i = currentIndex - 1; i >= 0; i -= 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = elements.length - 1; i > -1; i -= 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getNextIndex(\n currentIndex: number,\n elements: NodeListOf<HTMLDivElement> | HTMLDivElement[],\n loop: boolean\n) {\n for (let i = currentIndex + 1; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = 0; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getFirstIndex(elements: NodeListOf<HTMLDivElement> | HTMLDivElement[]) {\n for (let i = 0; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n return -1;\n}\n"],"mappings":";;AAAA,SAAgB,iBACd,cACA,UACA,MACA;CACA,KAAK,IAAI,IAAI,eAAe,GAAG,KAAK,GAAG,KAAK,GAC1C,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAIX,IAAI;
|
|
1
|
+
{"version":3,"file":"get-index.cjs","names":[],"sources":["../../../../../src/components/Combobox/use-combobox/get-index/get-index.ts"],"sourcesContent":["export function getPreviousIndex(\n currentIndex: number,\n elements: NodeListOf<HTMLDivElement> | HTMLDivElement[],\n loop: boolean\n) {\n for (let i = currentIndex - 1; i >= 0; i -= 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = elements.length - 1; i > -1; i -= 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getNextIndex(\n currentIndex: number,\n elements: NodeListOf<HTMLDivElement> | HTMLDivElement[],\n loop: boolean\n) {\n for (let i = currentIndex + 1; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = 0; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getFirstIndex(elements: NodeListOf<HTMLDivElement> | HTMLDivElement[]) {\n for (let i = 0; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n return -1;\n}\n"],"mappings":";;AAAA,SAAgB,iBACd,cACA,UACA,MACA;CACA,KAAK,IAAI,IAAI,eAAe,GAAG,KAAK,GAAG,KAAK,GAC1C,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAIX,IAAI,MACG;OAAA,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,IAAI,KAAK,GAC7C,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,SAAgB,aACd,cACA,UACA,MACA;CACA,KAAK,IAAI,IAAI,eAAe,GAAG,IAAI,SAAS,QAAQ,KAAK,GACvD,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAIX,IAAI,MACG;OAAA,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GACxC,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,SAAgB,cAAc,UAAyD;CACrF,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GACxC,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAIX,OAAO;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-virtualized-index.cjs","names":[],"sources":["../../../../../src/components/Combobox/use-combobox/get-index/get-virtualized-index.ts"],"sourcesContent":["interface GetIndexProps {\n currentIndex: number;\n isOptionDisabled: (index: number) => boolean;\n totalOptionsCount: number;\n loop: boolean;\n}\n\nexport function getPreviousIndex({\n currentIndex,\n isOptionDisabled,\n totalOptionsCount,\n loop,\n}: GetIndexProps) {\n for (let i = currentIndex - 1; i >= 0; i -= 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = totalOptionsCount - 1; i > -1; i -= 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getNextIndex({\n currentIndex,\n isOptionDisabled,\n totalOptionsCount,\n loop,\n}: GetIndexProps) {\n for (let i = currentIndex + 1; i < totalOptionsCount; i += 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = 0; i < totalOptionsCount; i += 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\ninterface GetFirstIndexOptions {\n totalOptionsCount: number;\n isOptionDisabled: (index: number) => boolean;\n}\n\nexport function getFirstIndex({ totalOptionsCount, isOptionDisabled }: GetFirstIndexOptions) {\n for (let i = 0; i < totalOptionsCount; i += 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n\n return -1;\n}\n"],"mappings":";;AAOA,SAAgB,iBAAiB,EAC/B,cACA,kBACA,mBACA,QACgB;CAChB,KAAK,IAAI,IAAI,eAAe,GAAG,KAAK,GAAG,KAAK,GAC1C,IAAI,CAAC,iBAAiB,CAAC,GACrB,OAAO;CAIX,IAAI;
|
|
1
|
+
{"version":3,"file":"get-virtualized-index.cjs","names":[],"sources":["../../../../../src/components/Combobox/use-combobox/get-index/get-virtualized-index.ts"],"sourcesContent":["interface GetIndexProps {\n currentIndex: number;\n isOptionDisabled: (index: number) => boolean;\n totalOptionsCount: number;\n loop: boolean;\n}\n\nexport function getPreviousIndex({\n currentIndex,\n isOptionDisabled,\n totalOptionsCount,\n loop,\n}: GetIndexProps) {\n for (let i = currentIndex - 1; i >= 0; i -= 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = totalOptionsCount - 1; i > -1; i -= 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getNextIndex({\n currentIndex,\n isOptionDisabled,\n totalOptionsCount,\n loop,\n}: GetIndexProps) {\n for (let i = currentIndex + 1; i < totalOptionsCount; i += 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = 0; i < totalOptionsCount; i += 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\ninterface GetFirstIndexOptions {\n totalOptionsCount: number;\n isOptionDisabled: (index: number) => boolean;\n}\n\nexport function getFirstIndex({ totalOptionsCount, isOptionDisabled }: GetFirstIndexOptions) {\n for (let i = 0; i < totalOptionsCount; i += 1) {\n if (!isOptionDisabled(i)) {\n return i;\n }\n }\n\n return -1;\n}\n"],"mappings":";;AAOA,SAAgB,iBAAiB,EAC/B,cACA,kBACA,mBACA,QACgB;CAChB,KAAK,IAAI,IAAI,eAAe,GAAG,KAAK,GAAG,KAAK,GAC1C,IAAI,CAAC,iBAAiB,CAAC,GACrB,OAAO;CAIX,IAAI,MACG;OAAA,IAAI,IAAI,oBAAoB,GAAG,IAAI,IAAI,KAAK,GAC/C,IAAI,CAAC,iBAAiB,CAAC,GACrB,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,SAAgB,aAAa,EAC3B,cACA,kBACA,mBACA,QACgB;CAChB,KAAK,IAAI,IAAI,eAAe,GAAG,IAAI,mBAAmB,KAAK,GACzD,IAAI,CAAC,iBAAiB,CAAC,GACrB,OAAO;CAIX,IAAI,MACG;OAAA,IAAI,IAAI,GAAG,IAAI,mBAAmB,KAAK,GAC1C,IAAI,CAAC,iBAAiB,CAAC,GACrB,OAAO;CAAA;CAKb,OAAO;AACT;AAOA,SAAgB,cAAc,EAAE,mBAAmB,oBAA0C;CAC3F,KAAK,IAAI,IAAI,GAAG,IAAI,mBAAmB,KAAK,GAC1C,IAAI,CAAC,iBAAiB,CAAC,GACrB,OAAO;CAIX,OAAO;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-combobox.cjs","names":["getRootElement","findElementBySelector","findElementsBySelector","getNextIndex","getPreviousIndex","getFirstIndex"],"sources":["../../../../src/components/Combobox/use-combobox/use-combobox.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { findElementBySelector, findElementsBySelector, getRootElement } from '../../../core/utils';\nimport { getFirstIndex, getNextIndex, getPreviousIndex } from './get-index/get-index';\n\nexport type ComboboxDropdownEventSource = 'keyboard' | 'mouse' | 'unknown';\n\nexport interface ComboboxStore {\n /** Current dropdown opened state */\n dropdownOpened: boolean;\n\n /** Opens dropdown */\n openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /** Closes dropdown */\n closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /** Toggles dropdown opened state */\n toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /** Selected option index ref */\n selectedOptionIndex: number;\n\n /** Returns currently selected option index or `-1` if none of the options is selected */\n getSelectedOptionIndex: () => number;\n\n /** Selects `Combobox.Option` by index */\n selectOption: (index: number) => void;\n\n /** Selects first `Combobox.Option` with `active` prop.\n * If there are no such options, the function does nothing.\n */\n selectActiveOption: () => string | null;\n\n /** Selects first `Combobox.Option` that is not disabled.\n * If there are no such options, the function does nothing.\n * */\n selectFirstOption: () => string | null;\n\n /** Selects next `Combobox.Option` that is not disabled.\n * If the current option is the last one, the function selects first option, if `loop` is true.\n */\n selectNextOption: () => string | null;\n\n /** Selects previous `Combobox.Option` that is not disabled.\n * If the current option is the first one, the function selects last option, if `loop` is true.\n * */\n selectPreviousOption: () => string | null;\n\n /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */\n resetSelectedOption: () => void;\n\n /** Triggers `onClick` event of selected option.\n * If there is no selected option, the function does nothing.\n */\n clickSelectedOption: () => void;\n\n /** Updates selected option index to currently selected or active option.\n * The function is required to be used with searchable components to update selected option index\n * when options list changes based on search query.\n */\n updateSelectedOptionIndex: (\n target?: 'active' | 'selected' | number,\n options?: { scrollIntoView?: boolean }\n ) => void;\n\n /** List id, used for `aria-*` attributes */\n listId: string | null;\n\n /** Sets list id */\n setListId: (id: string) => void;\n\n /** Ref of `Combobox.Search` input */\n searchRef: React.RefObject<HTMLInputElement | null>;\n\n /** Moves focus to `Combobox.Search` input */\n focusSearchInput: () => void;\n\n /** Ref of the target element */\n targetRef: React.RefObject<HTMLElement | null>;\n\n /** Moves focus to the target element */\n focusTarget: () => void;\n}\n\nexport interface UseComboboxOptions {\n /** Default value for `dropdownOpened`, `false` by default. Used when the component is uncontrolled */\n defaultOpened?: boolean;\n\n /** Controlled `dropdownOpened` state. When set, the dropdown opened state is controlled by the parent component */\n opened?: boolean;\n\n /** Called when `dropdownOpened` state changes. Required for controlled mode */\n onOpenedChange?: (opened: boolean) => void;\n\n /** Called when dropdown closes with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown closure */\n onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /** Called when dropdown opens with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown opening */\n onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /** Determines whether arrow key presses should loop through items (first to last and last to first). Defaults to `true` */\n loop?: boolean;\n\n /** `behavior` passed down to `element.scrollIntoView`. Controls the scrolling animation when options are scrolled into view. Defaults to `'instant'` */\n scrollBehavior?: ScrollBehavior;\n}\n\nexport function useCombobox({\n defaultOpened,\n opened,\n onOpenedChange,\n onDropdownClose,\n onDropdownOpen,\n loop = true,\n scrollBehavior = 'instant',\n}: UseComboboxOptions = {}): ComboboxStore {\n const [dropdownOpened, setDropdownOpened] = useUncontrolled({\n value: opened,\n defaultValue: defaultOpened,\n finalValue: false,\n onChange: onOpenedChange,\n });\n\n const listId = useRef<string | null>(null);\n const selectedOptionIndex = useRef<number>(-1);\n const searchRef = useRef<HTMLInputElement | null>(null);\n const targetRef = useRef<HTMLElement | null>(null);\n const focusSearchTimeout = useRef<number>(-1);\n const focusTargetTimeout = useRef<number>(-1);\n const selectedIndexUpdateTimeout = useRef<number>(-1);\n\n const openDropdown: ComboboxStore['openDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (!dropdownOpened) {\n setDropdownOpened(true);\n onDropdownOpen?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownOpen, dropdownOpened]\n );\n\n const closeDropdown: ComboboxStore['closeDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n setDropdownOpened(false);\n onDropdownClose?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownClose, dropdownOpened]\n );\n\n const toggleDropdown: ComboboxStore['toggleDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n closeDropdown(eventSource);\n } else {\n openDropdown(eventSource);\n }\n },\n [closeDropdown, openDropdown, dropdownOpened]\n );\n\n const clearSelectedItem = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const selected = findElementBySelector(`#${listId.current} [data-combobox-selected]`, root);\n selected?.removeAttribute('data-combobox-selected');\n selected?.removeAttribute('aria-selected');\n }, []);\n\n const selectOption = useCallback(\n (index: number) => {\n const root = getRootElement(targetRef.current);\n const list = findElementBySelector(`#${listId.current!}`, root);\n const items = list\n ? findElementsBySelector<HTMLDivElement>('[data-combobox-option]', list)\n : null;\n\n if (!items) {\n return null;\n }\n\n const nextIndex = index >= items!.length ? 0 : index < 0 ? items!.length - 1 : index;\n selectedOptionIndex.current = nextIndex;\n\n if (items?.[nextIndex] && !items[nextIndex].hasAttribute('data-combobox-disabled')) {\n clearSelectedItem();\n items[nextIndex].setAttribute('data-combobox-selected', 'true');\n items[nextIndex].setAttribute('aria-selected', 'true');\n items[nextIndex].scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n return items[nextIndex].id;\n }\n\n return null;\n },\n [scrollBehavior, clearSelectedItem]\n );\n\n const selectActiveOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const activeOption = findElementBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-active]`,\n root\n );\n\n if (activeOption) {\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const index = items.findIndex((option) => option === activeOption);\n return selectOption(index);\n }\n\n return selectOption(0);\n }, [selectOption]);\n\n const selectNextOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getNextIndex(selectedOptionIndex.current, items, loop));\n }, [selectOption, loop]);\n\n const selectPreviousOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getPreviousIndex(selectedOptionIndex.current, items, loop));\n }, [selectOption, loop]);\n\n const selectFirstOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getFirstIndex(items));\n }, [selectOption]);\n\n const updateSelectedOptionIndex: ComboboxStore['updateSelectedOptionIndex'] = useCallback(\n (target = 'selected', options) => {\n if (typeof target === 'number') {\n selectedOptionIndex.current = target;\n const root = getRootElement(targetRef.current);\n\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n\n if (options?.scrollIntoView) {\n items[target]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n }\n return;\n }\n\n selectedIndexUpdateTimeout.current = window.setTimeout(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const index = items.findIndex((option) => option.hasAttribute(`data-combobox-${target}`));\n\n selectedOptionIndex.current = index;\n\n if (options?.scrollIntoView) {\n items[index]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n }\n }, 0);\n },\n []\n );\n\n const resetSelectedOption = useCallback(() => {\n selectedOptionIndex.current = -1;\n clearSelectedItem();\n }, [clearSelectedItem]);\n\n const clickSelectedOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const item = items?.[selectedOptionIndex.current];\n item?.click();\n }, []);\n\n const setListId = useCallback((id: string) => {\n listId.current = id;\n }, []);\n\n const focusSearchInput = useCallback(() => {\n focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);\n }, []);\n\n const focusTarget = useCallback(() => {\n focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);\n }, []);\n\n const getSelectedOptionIndex = useCallback(() => selectedOptionIndex.current, []);\n\n useEffect(\n () => () => {\n window.clearTimeout(focusSearchTimeout.current);\n window.clearTimeout(focusTargetTimeout.current);\n window.clearTimeout(selectedIndexUpdateTimeout.current);\n },\n []\n );\n\n return {\n dropdownOpened,\n openDropdown,\n closeDropdown,\n toggleDropdown,\n\n selectedOptionIndex: selectedOptionIndex.current,\n getSelectedOptionIndex,\n selectOption,\n selectFirstOption,\n selectActiveOption,\n selectNextOption,\n selectPreviousOption,\n resetSelectedOption,\n updateSelectedOptionIndex,\n\n listId: listId.current,\n setListId,\n clickSelectedOption,\n\n searchRef,\n focusSearchInput,\n\n targetRef,\n focusTarget,\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-combobox.cjs","names":["useUncontrolled","useRef","useCallback","getRootElement","findElementBySelector","findElementsBySelector","getNextIndex","getPreviousIndex","getFirstIndex"],"sources":["../../../../src/components/Combobox/use-combobox/use-combobox.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { findElementBySelector, findElementsBySelector, getRootElement } from '../../../core/utils';\nimport { getFirstIndex, getNextIndex, getPreviousIndex } from './get-index/get-index';\n\nexport type ComboboxDropdownEventSource = 'keyboard' | 'mouse' | 'unknown';\n\nexport interface ComboboxStore {\n /** Current dropdown opened state */\n dropdownOpened: boolean;\n\n /** Opens dropdown */\n openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /** Closes dropdown */\n closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /** Toggles dropdown opened state */\n toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /** Selected option index ref */\n selectedOptionIndex: number;\n\n /** Returns currently selected option index or `-1` if none of the options is selected */\n getSelectedOptionIndex: () => number;\n\n /** Selects `Combobox.Option` by index */\n selectOption: (index: number) => void;\n\n /** Selects first `Combobox.Option` with `active` prop.\n * If there are no such options, the function does nothing.\n */\n selectActiveOption: () => string | null;\n\n /** Selects first `Combobox.Option` that is not disabled.\n * If there are no such options, the function does nothing.\n * */\n selectFirstOption: () => string | null;\n\n /** Selects next `Combobox.Option` that is not disabled.\n * If the current option is the last one, the function selects first option, if `loop` is true.\n */\n selectNextOption: () => string | null;\n\n /** Selects previous `Combobox.Option` that is not disabled.\n * If the current option is the first one, the function selects last option, if `loop` is true.\n * */\n selectPreviousOption: () => string | null;\n\n /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */\n resetSelectedOption: () => void;\n\n /** Triggers `onClick` event of selected option.\n * If there is no selected option, the function does nothing.\n */\n clickSelectedOption: () => void;\n\n /** Updates selected option index to currently selected or active option.\n * The function is required to be used with searchable components to update selected option index\n * when options list changes based on search query.\n */\n updateSelectedOptionIndex: (\n target?: 'active' | 'selected' | number,\n options?: { scrollIntoView?: boolean }\n ) => void;\n\n /** List id, used for `aria-*` attributes */\n listId: string | null;\n\n /** Sets list id */\n setListId: (id: string) => void;\n\n /** Ref of `Combobox.Search` input */\n searchRef: React.RefObject<HTMLInputElement | null>;\n\n /** Moves focus to `Combobox.Search` input */\n focusSearchInput: () => void;\n\n /** Ref of the target element */\n targetRef: React.RefObject<HTMLElement | null>;\n\n /** Moves focus to the target element */\n focusTarget: () => void;\n}\n\nexport interface UseComboboxOptions {\n /** Default value for `dropdownOpened`, `false` by default. Used when the component is uncontrolled */\n defaultOpened?: boolean;\n\n /** Controlled `dropdownOpened` state. When set, the dropdown opened state is controlled by the parent component */\n opened?: boolean;\n\n /** Called when `dropdownOpened` state changes. Required for controlled mode */\n onOpenedChange?: (opened: boolean) => void;\n\n /** Called when dropdown closes with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown closure */\n onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /** Called when dropdown opens with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown opening */\n onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /** Determines whether arrow key presses should loop through items (first to last and last to first). Defaults to `true` */\n loop?: boolean;\n\n /** `behavior` passed down to `element.scrollIntoView`. Controls the scrolling animation when options are scrolled into view. Defaults to `'instant'` */\n scrollBehavior?: ScrollBehavior;\n}\n\nexport function useCombobox({\n defaultOpened,\n opened,\n onOpenedChange,\n onDropdownClose,\n onDropdownOpen,\n loop = true,\n scrollBehavior = 'instant',\n}: UseComboboxOptions = {}): ComboboxStore {\n const [dropdownOpened, setDropdownOpened] = useUncontrolled({\n value: opened,\n defaultValue: defaultOpened,\n finalValue: false,\n onChange: onOpenedChange,\n });\n\n const listId = useRef<string | null>(null);\n const selectedOptionIndex = useRef<number>(-1);\n const searchRef = useRef<HTMLInputElement | null>(null);\n const targetRef = useRef<HTMLElement | null>(null);\n const focusSearchTimeout = useRef<number>(-1);\n const focusTargetTimeout = useRef<number>(-1);\n const selectedIndexUpdateTimeout = useRef<number>(-1);\n\n const openDropdown: ComboboxStore['openDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (!dropdownOpened) {\n setDropdownOpened(true);\n onDropdownOpen?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownOpen, dropdownOpened]\n );\n\n const closeDropdown: ComboboxStore['closeDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n setDropdownOpened(false);\n onDropdownClose?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownClose, dropdownOpened]\n );\n\n const toggleDropdown: ComboboxStore['toggleDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n closeDropdown(eventSource);\n } else {\n openDropdown(eventSource);\n }\n },\n [closeDropdown, openDropdown, dropdownOpened]\n );\n\n const clearSelectedItem = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const selected = findElementBySelector(`#${listId.current} [data-combobox-selected]`, root);\n selected?.removeAttribute('data-combobox-selected');\n selected?.removeAttribute('aria-selected');\n }, []);\n\n const selectOption = useCallback(\n (index: number) => {\n const root = getRootElement(targetRef.current);\n const list = findElementBySelector(`#${listId.current!}`, root);\n const items = list\n ? findElementsBySelector<HTMLDivElement>('[data-combobox-option]', list)\n : null;\n\n if (!items) {\n return null;\n }\n\n const nextIndex = index >= items!.length ? 0 : index < 0 ? items!.length - 1 : index;\n selectedOptionIndex.current = nextIndex;\n\n if (items?.[nextIndex] && !items[nextIndex].hasAttribute('data-combobox-disabled')) {\n clearSelectedItem();\n items[nextIndex].setAttribute('data-combobox-selected', 'true');\n items[nextIndex].setAttribute('aria-selected', 'true');\n items[nextIndex].scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n return items[nextIndex].id;\n }\n\n return null;\n },\n [scrollBehavior, clearSelectedItem]\n );\n\n const selectActiveOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const activeOption = findElementBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-active]`,\n root\n );\n\n if (activeOption) {\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const index = items.findIndex((option) => option === activeOption);\n return selectOption(index);\n }\n\n return selectOption(0);\n }, [selectOption]);\n\n const selectNextOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getNextIndex(selectedOptionIndex.current, items, loop));\n }, [selectOption, loop]);\n\n const selectPreviousOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getPreviousIndex(selectedOptionIndex.current, items, loop));\n }, [selectOption, loop]);\n\n const selectFirstOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getFirstIndex(items));\n }, [selectOption]);\n\n const updateSelectedOptionIndex: ComboboxStore['updateSelectedOptionIndex'] = useCallback(\n (target = 'selected', options) => {\n if (typeof target === 'number') {\n selectedOptionIndex.current = target;\n const root = getRootElement(targetRef.current);\n\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n\n if (options?.scrollIntoView) {\n items[target]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n }\n return;\n }\n\n selectedIndexUpdateTimeout.current = window.setTimeout(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const index = items.findIndex((option) => option.hasAttribute(`data-combobox-${target}`));\n\n selectedOptionIndex.current = index;\n\n if (options?.scrollIntoView) {\n items[index]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n }\n }, 0);\n },\n []\n );\n\n const resetSelectedOption = useCallback(() => {\n selectedOptionIndex.current = -1;\n clearSelectedItem();\n }, [clearSelectedItem]);\n\n const clickSelectedOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const item = items?.[selectedOptionIndex.current];\n item?.click();\n }, []);\n\n const setListId = useCallback((id: string) => {\n listId.current = id;\n }, []);\n\n const focusSearchInput = useCallback(() => {\n focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);\n }, []);\n\n const focusTarget = useCallback(() => {\n focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);\n }, []);\n\n const getSelectedOptionIndex = useCallback(() => selectedOptionIndex.current, []);\n\n useEffect(\n () => () => {\n window.clearTimeout(focusSearchTimeout.current);\n window.clearTimeout(focusTargetTimeout.current);\n window.clearTimeout(selectedIndexUpdateTimeout.current);\n },\n []\n );\n\n return {\n dropdownOpened,\n openDropdown,\n closeDropdown,\n toggleDropdown,\n\n selectedOptionIndex: selectedOptionIndex.current,\n getSelectedOptionIndex,\n selectOption,\n selectFirstOption,\n selectActiveOption,\n selectNextOption,\n selectPreviousOption,\n resetSelectedOption,\n updateSelectedOptionIndex,\n\n listId: listId.current,\n setListId,\n clickSelectedOption,\n\n searchRef,\n focusSearchInput,\n\n targetRef,\n focusTarget,\n };\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-virtualized-combobox.cjs","names":["getNextIndex","getPreviousIndex","getFirstIndex"],"sources":["../../../../src/components/Combobox/use-combobox/use-virtualized-combobox.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { getFirstIndex, getNextIndex, getPreviousIndex } from './get-index/get-virtualized-index';\nimport { ComboboxDropdownEventSource, ComboboxStore } from './use-combobox';\n\nexport interface UseVirtualizedComboboxOptions {\n /** Default value for `dropdownOpened`, `false` by default */\n defaultOpened?: boolean;\n\n /** Controlled `dropdownOpened` state */\n opened?: boolean;\n\n /** Called when `dropdownOpened` state changes */\n onOpenedChange?: (opened: boolean) => void;\n\n /** Called when dropdown closes */\n onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /** Called when dropdown opens */\n onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */\n loop?: boolean;\n\n /** Function to determine whether the option is disabled */\n isOptionDisabled?: (optionIndex: number) => boolean;\n\n /** Total number of options in the virtualized list. Required for proper keyboard navigation and index calculations. */\n totalOptionsCount: number;\n\n /** Function that returns the id of the option at the given index. Required for setting aria attributes and element references. */\n getOptionId: (index: number) => string | null;\n\n /** Current selected option index. Must be controlled by parent component. */\n selectedOptionIndex: number;\n\n /** Callback to update the selected option index. Called when user navigates or selects options. */\n setSelectedOptionIndex: (index: number) => void;\n\n /** Currently active/highlighted option index. Used to determine which option to select when selectActiveOption is called. */\n activeOptionIndex?: number;\n\n /** Called when the selected option is submitted (e.g., via Enter key or clicking). Receives the selected option index. */\n onSelectedOptionSubmit: (index: number) => void;\n}\n\nexport function useVirtualizedCombobox(\n {\n defaultOpened,\n opened,\n onOpenedChange,\n onDropdownClose,\n onDropdownOpen,\n loop = true,\n totalOptionsCount,\n isOptionDisabled = () => false,\n getOptionId,\n selectedOptionIndex,\n setSelectedOptionIndex,\n activeOptionIndex,\n onSelectedOptionSubmit,\n }: UseVirtualizedComboboxOptions = {\n totalOptionsCount: 0,\n getOptionId: () => null,\n selectedOptionIndex: -1,\n setSelectedOptionIndex: () => {},\n onSelectedOptionSubmit: () => {},\n }\n): ComboboxStore {\n const [dropdownOpened, setDropdownOpened] = useUncontrolled({\n value: opened,\n defaultValue: defaultOpened,\n finalValue: false,\n onChange: onOpenedChange,\n });\n\n const listId = useRef<string | null>(null);\n const searchRef = useRef<HTMLInputElement | null>(null);\n const targetRef = useRef<HTMLElement | null>(null);\n const focusSearchTimeout = useRef<number>(-1);\n const focusTargetTimeout = useRef<number>(-1);\n\n const openDropdown: ComboboxStore['openDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (!dropdownOpened) {\n setDropdownOpened(true);\n onDropdownOpen?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownOpen, dropdownOpened]\n );\n\n const closeDropdown: ComboboxStore['closeDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n setDropdownOpened(false);\n onDropdownClose?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownClose, dropdownOpened]\n );\n\n const toggleDropdown: ComboboxStore['toggleDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n closeDropdown(eventSource);\n } else {\n openDropdown(eventSource);\n }\n },\n [closeDropdown, openDropdown, dropdownOpened]\n );\n\n const selectOption = useCallback(\n (index: number) => {\n if (totalOptionsCount === 0) {\n setSelectedOptionIndex(-1);\n return null;\n }\n\n const nextIndex = index >= totalOptionsCount ? 0 : index < 0 ? totalOptionsCount - 1 : index;\n\n if (isOptionDisabled(nextIndex)) {\n return null;\n }\n\n setSelectedOptionIndex(nextIndex);\n return getOptionId(nextIndex);\n },\n [totalOptionsCount, isOptionDisabled, setSelectedOptionIndex, getOptionId]\n );\n\n const selectActiveOption = useCallback(\n () => selectOption(activeOptionIndex ?? 0),\n [selectOption, activeOptionIndex]\n );\n\n const selectNextOption = useCallback(\n () =>\n selectOption(\n getNextIndex({\n currentIndex: selectedOptionIndex,\n isOptionDisabled,\n totalOptionsCount,\n loop,\n })\n ),\n [selectOption, selectedOptionIndex, isOptionDisabled, totalOptionsCount, loop]\n );\n\n const selectPreviousOption = useCallback(\n () =>\n selectOption(\n getPreviousIndex({\n currentIndex: selectedOptionIndex,\n isOptionDisabled,\n totalOptionsCount,\n loop,\n })\n ),\n [selectOption, selectedOptionIndex, isOptionDisabled, totalOptionsCount, loop]\n );\n\n const selectFirstOption = useCallback(\n () => selectOption(getFirstIndex({ isOptionDisabled, totalOptionsCount })),\n [selectOption, isOptionDisabled, totalOptionsCount]\n );\n\n const resetSelectedOption = useCallback(() => {\n setSelectedOptionIndex(-1);\n }, [setSelectedOptionIndex]);\n\n const clickSelectedOption = useCallback(() => {\n if (\n selectedOptionIndex >= 0 &&\n selectedOptionIndex < totalOptionsCount &&\n !isOptionDisabled(selectedOptionIndex)\n ) {\n onSelectedOptionSubmit?.(selectedOptionIndex);\n }\n }, [selectedOptionIndex, totalOptionsCount, isOptionDisabled, onSelectedOptionSubmit]);\n\n const setListId = useCallback((id: string) => {\n listId.current = id;\n }, []);\n\n const focusSearchInput = useCallback(() => {\n focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);\n }, []);\n\n const focusTarget = useCallback(() => {\n focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);\n }, []);\n\n useEffect(\n () => () => {\n window.clearTimeout(focusSearchTimeout.current);\n window.clearTimeout(focusTargetTimeout.current);\n },\n []\n );\n\n const getSelectedOptionIndex = useCallback(() => selectedOptionIndex, [selectedOptionIndex]);\n\n const updateSelectedOptionIndex: ComboboxStore['updateSelectedOptionIndex'] = useCallback(\n (index?: 'active' | 'selected' | number) => {\n if (typeof index === 'number') {\n setSelectedOptionIndex(index);\n }\n\n if (index === 'active' && typeof activeOptionIndex === 'number') {\n setSelectedOptionIndex(activeOptionIndex);\n }\n },\n [setSelectedOptionIndex, activeOptionIndex]\n );\n\n return {\n dropdownOpened,\n openDropdown,\n closeDropdown,\n toggleDropdown,\n\n selectedOptionIndex,\n getSelectedOptionIndex,\n selectOption,\n selectFirstOption,\n selectActiveOption,\n selectNextOption,\n selectPreviousOption,\n resetSelectedOption,\n updateSelectedOptionIndex,\n\n listId: listId.current,\n setListId,\n clickSelectedOption,\n\n searchRef,\n focusSearchInput,\n\n targetRef,\n focusTarget,\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-virtualized-combobox.cjs","names":["useUncontrolled","useRef","useCallback","getNextIndex","getPreviousIndex","getFirstIndex"],"sources":["../../../../src/components/Combobox/use-combobox/use-virtualized-combobox.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { getFirstIndex, getNextIndex, getPreviousIndex } from './get-index/get-virtualized-index';\nimport { ComboboxDropdownEventSource, ComboboxStore } from './use-combobox';\n\nexport interface UseVirtualizedComboboxOptions {\n /** Default value for `dropdownOpened`, `false` by default */\n defaultOpened?: boolean;\n\n /** Controlled `dropdownOpened` state */\n opened?: boolean;\n\n /** Called when `dropdownOpened` state changes */\n onOpenedChange?: (opened: boolean) => void;\n\n /** Called when dropdown closes */\n onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /** Called when dropdown opens */\n onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */\n loop?: boolean;\n\n /** Function to determine whether the option is disabled */\n isOptionDisabled?: (optionIndex: number) => boolean;\n\n /** Total number of options in the virtualized list. Required for proper keyboard navigation and index calculations. */\n totalOptionsCount: number;\n\n /** Function that returns the id of the option at the given index. Required for setting aria attributes and element references. */\n getOptionId: (index: number) => string | null;\n\n /** Current selected option index. Must be controlled by parent component. */\n selectedOptionIndex: number;\n\n /** Callback to update the selected option index. Called when user navigates or selects options. */\n setSelectedOptionIndex: (index: number) => void;\n\n /** Currently active/highlighted option index. Used to determine which option to select when selectActiveOption is called. */\n activeOptionIndex?: number;\n\n /** Called when the selected option is submitted (e.g., via Enter key or clicking). Receives the selected option index. */\n onSelectedOptionSubmit: (index: number) => void;\n}\n\nexport function useVirtualizedCombobox(\n {\n defaultOpened,\n opened,\n onOpenedChange,\n onDropdownClose,\n onDropdownOpen,\n loop = true,\n totalOptionsCount,\n isOptionDisabled = () => false,\n getOptionId,\n selectedOptionIndex,\n setSelectedOptionIndex,\n activeOptionIndex,\n onSelectedOptionSubmit,\n }: UseVirtualizedComboboxOptions = {\n totalOptionsCount: 0,\n getOptionId: () => null,\n selectedOptionIndex: -1,\n setSelectedOptionIndex: () => {},\n onSelectedOptionSubmit: () => {},\n }\n): ComboboxStore {\n const [dropdownOpened, setDropdownOpened] = useUncontrolled({\n value: opened,\n defaultValue: defaultOpened,\n finalValue: false,\n onChange: onOpenedChange,\n });\n\n const listId = useRef<string | null>(null);\n const searchRef = useRef<HTMLInputElement | null>(null);\n const targetRef = useRef<HTMLElement | null>(null);\n const focusSearchTimeout = useRef<number>(-1);\n const focusTargetTimeout = useRef<number>(-1);\n\n const openDropdown: ComboboxStore['openDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (!dropdownOpened) {\n setDropdownOpened(true);\n onDropdownOpen?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownOpen, dropdownOpened]\n );\n\n const closeDropdown: ComboboxStore['closeDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n setDropdownOpened(false);\n onDropdownClose?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownClose, dropdownOpened]\n );\n\n const toggleDropdown: ComboboxStore['toggleDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n closeDropdown(eventSource);\n } else {\n openDropdown(eventSource);\n }\n },\n [closeDropdown, openDropdown, dropdownOpened]\n );\n\n const selectOption = useCallback(\n (index: number) => {\n if (totalOptionsCount === 0) {\n setSelectedOptionIndex(-1);\n return null;\n }\n\n const nextIndex = index >= totalOptionsCount ? 0 : index < 0 ? totalOptionsCount - 1 : index;\n\n if (isOptionDisabled(nextIndex)) {\n return null;\n }\n\n setSelectedOptionIndex(nextIndex);\n return getOptionId(nextIndex);\n },\n [totalOptionsCount, isOptionDisabled, setSelectedOptionIndex, getOptionId]\n );\n\n const selectActiveOption = useCallback(\n () => selectOption(activeOptionIndex ?? 0),\n [selectOption, activeOptionIndex]\n );\n\n const selectNextOption = useCallback(\n () =>\n selectOption(\n getNextIndex({\n currentIndex: selectedOptionIndex,\n isOptionDisabled,\n totalOptionsCount,\n loop,\n })\n ),\n [selectOption, selectedOptionIndex, isOptionDisabled, totalOptionsCount, loop]\n );\n\n const selectPreviousOption = useCallback(\n () =>\n selectOption(\n getPreviousIndex({\n currentIndex: selectedOptionIndex,\n isOptionDisabled,\n totalOptionsCount,\n loop,\n })\n ),\n [selectOption, selectedOptionIndex, isOptionDisabled, totalOptionsCount, loop]\n );\n\n const selectFirstOption = useCallback(\n () => selectOption(getFirstIndex({ isOptionDisabled, totalOptionsCount })),\n [selectOption, isOptionDisabled, totalOptionsCount]\n );\n\n const resetSelectedOption = useCallback(() => {\n setSelectedOptionIndex(-1);\n }, [setSelectedOptionIndex]);\n\n const clickSelectedOption = useCallback(() => {\n if (\n selectedOptionIndex >= 0 &&\n selectedOptionIndex < totalOptionsCount &&\n !isOptionDisabled(selectedOptionIndex)\n ) {\n onSelectedOptionSubmit?.(selectedOptionIndex);\n }\n }, [selectedOptionIndex, totalOptionsCount, isOptionDisabled, onSelectedOptionSubmit]);\n\n const setListId = useCallback((id: string) => {\n listId.current = id;\n }, []);\n\n const focusSearchInput = useCallback(() => {\n focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);\n }, []);\n\n const focusTarget = useCallback(() => {\n focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);\n }, []);\n\n useEffect(\n () => () => {\n window.clearTimeout(focusSearchTimeout.current);\n window.clearTimeout(focusTargetTimeout.current);\n },\n []\n );\n\n const getSelectedOptionIndex = useCallback(() => selectedOptionIndex, [selectedOptionIndex]);\n\n const updateSelectedOptionIndex: ComboboxStore['updateSelectedOptionIndex'] = useCallback(\n (index?: 'active' | 'selected' | number) => {\n if (typeof index === 'number') {\n setSelectedOptionIndex(index);\n }\n\n if (index === 'active' && typeof activeOptionIndex === 'number') {\n setSelectedOptionIndex(activeOptionIndex);\n }\n },\n [setSelectedOptionIndex, activeOptionIndex]\n );\n\n return {\n dropdownOpened,\n openDropdown,\n closeDropdown,\n toggleDropdown,\n\n selectedOptionIndex,\n getSelectedOptionIndex,\n selectOption,\n selectFirstOption,\n selectActiveOption,\n selectNextOption,\n selectPreviousOption,\n resetSelectedOption,\n updateSelectedOptionIndex,\n\n listId: listId.current,\n setListId,\n clickSelectedOption,\n\n searchRef,\n focusSearchInput,\n\n targetRef,\n focusTarget,\n };\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-combobox-target-props.cjs","names":["useComboboxContext"],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n targetType: 'input' | 'button' | undefined;\n withAriaAttributes: boolean | undefined;\n withKeyboardNavigation: boolean | undefined;\n withExpandedAttribute: boolean | undefined;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n onClick: React.MouseEventHandler<HTMLInputElement> | undefined;\n autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n onKeyDown,\n onClick,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n}: UseComboboxTargetPropsInput) {\n const ctx = useComboboxContext();\n const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (ctx.readOnly) {\n return;\n }\n\n if (withKeyboardNavigation) {\n // Ignore during composition in IME\n if (event.nativeEvent.isComposing) {\n return;\n }\n\n if (event.nativeEvent.code === 'ArrowDown') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectNextOption());\n }\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectPreviousOption());\n }\n }\n\n if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n // This is a workaround for handling differences in behavior of isComposing property in Safari\n // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n // oxlint-disable-next-line typescript/no-deprecated\n if (event.nativeEvent.keyCode === 229) {\n return;\n }\n\n const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n event.preventDefault();\n ctx.store.clickSelectedOption();\n } else if (targetType === 'button') {\n event.preventDefault();\n ctx.store.openDropdown('keyboard');\n }\n }\n\n if (event.key === 'Escape') {\n ctx.store.closeDropdown('keyboard');\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (targetType === 'button') {\n event.preventDefault();\n ctx.store.toggleDropdown('keyboard');\n }\n }\n }\n };\n\n const ariaAttributes = withAriaAttributes\n ? {\n ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n 'aria-haspopup': 'listbox' as const,\n 'aria-expanded': withExpandedAttribute\n ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n : undefined,\n 'aria-controls':\n ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n 'aria-activedescendant': ctx.store.dropdownOpened\n ? selectedOptionId || undefined\n : undefined,\n autoComplete,\n 'data-expanded': ctx.store.dropdownOpened || undefined,\n 'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n }\n : {};\n\n const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {\n // Safari does not give keyboard focus to non-text-input elements (including\n // readOnly inputs rendered as buttons) on click, which prevents onKeyDown\n // from firing. Explicitly focus the target when targetType is 'button'.\n if (targetType === 'button') {\n event.currentTarget.focus();\n }\n\n onClick?.(event);\n };\n\n return {\n ...ariaAttributes,\n onKeyDown: handleKeyDown,\n onClick: handleClick,\n };\n}\n"],"mappings":";;;;AAaA,SAAgB,uBAAuB,EACrC,WACA,SACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAMA,yBAAAA,mBAAmB;CAC/B,MAAM,CAAC,kBAAkB,wBAAA,
|
|
1
|
+
{"version":3,"file":"use-combobox-target-props.cjs","names":["useComboboxContext","useState"],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n targetType: 'input' | 'button' | undefined;\n withAriaAttributes: boolean | undefined;\n withKeyboardNavigation: boolean | undefined;\n withExpandedAttribute: boolean | undefined;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n onClick: React.MouseEventHandler<HTMLInputElement> | undefined;\n autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n onKeyDown,\n onClick,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n}: UseComboboxTargetPropsInput) {\n const ctx = useComboboxContext();\n const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (ctx.readOnly) {\n return;\n }\n\n if (withKeyboardNavigation) {\n // Ignore during composition in IME\n if (event.nativeEvent.isComposing) {\n return;\n }\n\n if (event.nativeEvent.code === 'ArrowDown') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectNextOption());\n }\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectPreviousOption());\n }\n }\n\n if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n // This is a workaround for handling differences in behavior of isComposing property in Safari\n // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n // oxlint-disable-next-line typescript/no-deprecated\n if (event.nativeEvent.keyCode === 229) {\n return;\n }\n\n const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n event.preventDefault();\n ctx.store.clickSelectedOption();\n } else if (targetType === 'button') {\n event.preventDefault();\n ctx.store.openDropdown('keyboard');\n }\n }\n\n if (event.key === 'Escape') {\n ctx.store.closeDropdown('keyboard');\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (targetType === 'button') {\n event.preventDefault();\n ctx.store.toggleDropdown('keyboard');\n }\n }\n }\n };\n\n const ariaAttributes = withAriaAttributes\n ? {\n ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n 'aria-haspopup': 'listbox' as const,\n 'aria-expanded': withExpandedAttribute\n ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n : undefined,\n 'aria-controls':\n ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n 'aria-activedescendant': ctx.store.dropdownOpened\n ? selectedOptionId || undefined\n : undefined,\n autoComplete,\n 'data-expanded': ctx.store.dropdownOpened || undefined,\n 'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n }\n : {};\n\n const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {\n // Safari does not give keyboard focus to non-text-input elements (including\n // readOnly inputs rendered as buttons) on click, which prevents onKeyDown\n // from firing. Explicitly focus the target when targetType is 'button'.\n if (targetType === 'button') {\n event.currentTarget.focus();\n }\n\n onClick?.(event);\n };\n\n return {\n ...ariaAttributes,\n onKeyDown: handleKeyDown,\n onClick: handleClick,\n };\n}\n"],"mappings":";;;;AAaA,SAAgB,uBAAuB,EACrC,WACA,SACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAMA,yBAAAA,mBAAmB;CAC/B,MAAM,CAAC,kBAAkB,wBAAA,GAAuBC,MAAAA,SAAAA,CAAwB,IAAI;CAE5E,MAAM,iBAAiB,UAAiD;EACtE,YAAY,KAAK;EAEjB,IAAI,IAAI,UACN;EAGF,IAAI,wBAAwB;GAE1B,IAAI,MAAM,YAAY,aACpB;GAGF,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,MAAM,eAAe;IAErB,IAAI,CAAC,IAAI,MAAM,gBAAgB;KAC7B,IAAI,MAAM,aAAa,UAAU;KACjC,oBAAoB,IAAI,MAAM,mBAAmB,CAAC;KAClD,IAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,KAAK,CAAC;IAC1E,OACE,oBAAoB,IAAI,MAAM,iBAAiB,CAAC;GAEpD;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW;IACxC,MAAM,eAAe;IAErB,IAAI,CAAC,IAAI,MAAM,gBAAgB;KAC7B,IAAI,MAAM,aAAa,UAAU;KACjC,oBAAoB,IAAI,MAAM,mBAAmB,CAAC;KAClD,IAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,KAAK,CAAC;IAC1E,OACE,oBAAoB,IAAI,MAAM,qBAAqB,CAAC;GAExD;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;IAIlF,IAAI,MAAM,YAAY,YAAY,KAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,uBAAuB;IAE7D,IAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;KAC1D,MAAM,eAAe;KACrB,IAAI,MAAM,oBAAoB;IAChC,OAAO,IAAI,eAAe,UAAU;KAClC,MAAM,eAAe;KACrB,IAAI,MAAM,aAAa,UAAU;IACnC;GACF;GAEA,IAAI,MAAM,QAAQ,UAChB,IAAI,MAAM,cAAc,UAAU;GAGpC,IAAI,MAAM,YAAY,SAAS,SACzB;QAAA,eAAe,UAAU;KAC3B,MAAM,eAAe;KACrB,IAAI,MAAM,eAAe,UAAU;IACrC;;EAEJ;CACF;CAEA,MAAM,iBAAiB,qBACnB;EACE,GAAI,wBAAwB,EAAE,MAAM,WAAoB,IAAI,CAAC;EAC7D,iBAAiB;EACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;EACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;EACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;EACJ;EACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;EAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;CAC/D,IACA,CAAC;CAEL,MAAM,eAAe,UAA8C;EAIjE,IAAI,eAAe,UACjB,MAAM,cAAc,MAAM;EAG5B,UAAU,KAAK;CACjB;CAEA,OAAO;EACL,GAAG;EACH,WAAW;EACX,SAAS;CACX;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pills-reorder.cjs","names":["movePill"],"sources":["../../../../src/components/Combobox/use-pills-reorder/use-pills-reorder.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { movePill, PillReorderPosition } from './move-pill';\n\nexport interface PillReorderProps {\n draggable: boolean;\n tabIndex: number;\n 'data-mantine-pill-index': number;\n 'aria-keyshortcuts': string;\n onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n onDragStart: (event: React.DragEvent<HTMLElement>) => void;\n onDragOver: (event: React.DragEvent<HTMLElement>) => void;\n onDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n onDrop: (event: React.DragEvent<HTMLElement>) => void;\n onDragEnd: (event: React.DragEvent<HTMLElement>) => void;\n onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport interface PillsReorderListProps {\n ref?: (node: HTMLDivElement | null) => void;\n}\n\nexport interface UsePillsReorderInput<T> {\n value: T[];\n onChange: (value: T[]) => void;\n enabled: boolean | undefined;\n}\n\ninterface PillDragState {\n draggedIndex: number | null;\n currentDropTarget: HTMLElement | null;\n}\n\ninterface PendingFocus<T> {\n container: HTMLElement | null;\n index: number;\n expectedValue: T[];\n}\n\nconst findSearchInput = (container: HTMLElement): HTMLInputElement | null => {\n const lastChild = container.lastElementChild;\n if (!lastChild) {\n return null;\n }\n if (lastChild instanceof HTMLInputElement) {\n return lastChild;\n }\n return lastChild.querySelector<HTMLInputElement>('input');\n};\n\nconst valuesMatch = <T>(a: T[], b: T[]): boolean => {\n if (a === b) {\n return true;\n }\n if (a.length !== b.length) {\n return false;\n }\n for (let i = 0; i < a.length; i += 1) {\n if (a[i] !== b[i]) {\n return false;\n }\n }\n return true;\n};\n\nexport function usePillsReorder<T>({ value, onChange, enabled }: UsePillsReorderInput<T>) {\n const dragStateRef = useRef<PillDragState>({ draggedIndex: null, currentDropTarget: null });\n const pendingFocusRef = useRef<PendingFocus<T> | null>(null);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const valueRef = useRef(value);\n valueRef.current = value;\n\n useEffect(() => {\n const pending = pendingFocusRef.current;\n if (!pending) {\n return;\n }\n pendingFocusRef.current = null;\n if (!valuesMatch(valueRef.current, pending.expectedValue)) {\n return;\n }\n pending.container\n ?.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${pending.index}\"]`)\n ?.focus();\n });\n\n const setContainer = useCallback((node: HTMLDivElement | null) => {\n containerRef.current = node;\n }, []);\n\n const getListProps = (): PillsReorderListProps => {\n if (!enabled) {\n return {};\n }\n return { ref: setContainer };\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (!enabled || event.key !== 'ArrowLeft') {\n return;\n }\n\n const input = event.currentTarget;\n const caretAtStart =\n input.value.length === 0 || (input.selectionStart === 0 && input.selectionEnd === 0);\n if (!caretAtStart) {\n return;\n }\n\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const pills = container.querySelectorAll<HTMLElement>('[data-mantine-pill-index]');\n if (pills.length === 0) {\n return;\n }\n\n event.preventDefault();\n pills[pills.length - 1].focus();\n };\n\n const getPillProps = (index: number): PillReorderProps | undefined => {\n if (!enabled) {\n return undefined;\n }\n\n return {\n draggable: true,\n tabIndex: -1,\n 'data-mantine-pill-index': index,\n 'aria-keyshortcuts': 'Alt+ArrowLeft Alt+ArrowRight',\n onMouseDown: (event) => {\n if (event.button === 0) {\n event.stopPropagation();\n }\n },\n onDragStart: (event) => {\n event.stopPropagation();\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', String(index));\n dragStateRef.current.draggedIndex = index;\n\n const target = event.currentTarget;\n const rect = target.getBoundingClientRect();\n const ghost = target.cloneNode(true) as HTMLElement;\n ghost.removeAttribute('data-dragging');\n ghost.removeAttribute('data-drag-over');\n ghost.style.position = 'fixed';\n ghost.style.top = '-9999px';\n ghost.style.left = '-9999px';\n ghost.style.width = `${rect.width}px`;\n ghost.style.height = `${rect.height}px`;\n ghost.style.pointerEvents = 'none';\n document.body.appendChild(ghost);\n event.dataTransfer.setDragImage(ghost, event.clientX - rect.left, event.clientY - rect.top);\n\n setTimeout(() => ghost.parentNode?.removeChild(ghost), 0);\n\n requestAnimationFrame(() => {\n target.setAttribute('data-dragging', 'true');\n });\n },\n onDragOver: (event) => {\n const { draggedIndex } = dragStateRef.current;\n if (draggedIndex === null || draggedIndex === index) {\n return;\n }\n\n const target = event.currentTarget;\n const rect = target.getBoundingClientRect();\n const x = event.clientX - rect.left;\n const isRtl = getComputedStyle(target).direction === 'rtl';\n const isStart = isRtl ? x > rect.width / 2 : x < rect.width / 2;\n const position: PillReorderPosition = isStart ? 'before' : 'after';\n\n event.preventDefault();\n event.stopPropagation();\n event.dataTransfer.dropEffect = 'move';\n\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget && prevTarget !== target) {\n prevTarget.removeAttribute('data-drag-over');\n }\n\n target.setAttribute('data-drag-over', position);\n dragStateRef.current.currentDropTarget = target;\n },\n onDragLeave: (event) => {\n const target = event.currentTarget;\n const related = event.relatedTarget as Node | null;\n if (related && target.contains(related)) {\n return;\n }\n\n target.removeAttribute('data-drag-over');\n if (dragStateRef.current.currentDropTarget === target) {\n dragStateRef.current.currentDropTarget = null;\n }\n },\n onDrop: (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n const target = event.currentTarget;\n const position = target.getAttribute('data-drag-over') as PillReorderPosition | null;\n target.removeAttribute('data-drag-over');\n\n const { draggedIndex } = dragStateRef.current;\n if (draggedIndex !== null && position && draggedIndex !== index) {\n const nextValue = movePill(valueRef.current, draggedIndex, index, position);\n if (nextValue !== valueRef.current) {\n onChange(nextValue);\n }\n }\n\n dragStateRef.current.draggedIndex = null;\n dragStateRef.current.currentDropTarget = null;\n },\n onDragEnd: (event) => {\n const target = event.currentTarget;\n target.removeAttribute('data-dragging');\n\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget) {\n prevTarget.removeAttribute('data-drag-over');\n }\n\n dragStateRef.current.draggedIndex = null;\n dragStateRef.current.currentDropTarget = null;\n },\n onKeyDown: (event) => {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n return;\n }\n\n const target = event.currentTarget;\n const isRtl = getComputedStyle(target).direction === 'rtl';\n const movingForward = isRtl ? event.key === 'ArrowLeft' : event.key === 'ArrowRight';\n const targetIndex = movingForward ? index + 1 : index - 1;\n\n if (event.altKey) {\n if (targetIndex < 0 || targetIndex >= valueRef.current.length) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const position: PillReorderPosition = movingForward ? 'after' : 'before';\n const nextValue = movePill(valueRef.current, index, targetIndex, position);\n if (nextValue === valueRef.current) {\n return;\n }\n\n pendingFocusRef.current = {\n container: target.parentElement,\n index: targetIndex,\n expectedValue: nextValue,\n };\n onChange(nextValue);\n return;\n }\n\n if (targetIndex < 0) {\n return;\n }\n\n const container = target.parentElement;\n if (!container) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n if (targetIndex >= valueRef.current.length) {\n findSearchInput(container)?.focus();\n return;\n }\n\n container.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${targetIndex}\"]`)?.focus();\n },\n };\n };\n\n return { getPillProps, getListProps, handleInputKeyDown };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-pills-reorder.cjs","names":["useRef","useCallback","movePill"],"sources":["../../../../src/components/Combobox/use-pills-reorder/use-pills-reorder.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { movePill, PillReorderPosition } from './move-pill';\n\nexport interface PillReorderProps {\n draggable: boolean;\n tabIndex: number;\n 'data-mantine-pill-index': number;\n 'aria-keyshortcuts': string;\n onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n onDragStart: (event: React.DragEvent<HTMLElement>) => void;\n onDragOver: (event: React.DragEvent<HTMLElement>) => void;\n onDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n onDrop: (event: React.DragEvent<HTMLElement>) => void;\n onDragEnd: (event: React.DragEvent<HTMLElement>) => void;\n onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport interface PillsReorderListProps {\n ref?: (node: HTMLDivElement | null) => void;\n}\n\nexport interface UsePillsReorderInput<T> {\n value: T[];\n onChange: (value: T[]) => void;\n enabled: boolean | undefined;\n}\n\ninterface PillDragState {\n draggedIndex: number | null;\n currentDropTarget: HTMLElement | null;\n}\n\ninterface PendingFocus<T> {\n container: HTMLElement | null;\n index: number;\n expectedValue: T[];\n}\n\nconst findSearchInput = (container: HTMLElement): HTMLInputElement | null => {\n const lastChild = container.lastElementChild;\n if (!lastChild) {\n return null;\n }\n if (lastChild instanceof HTMLInputElement) {\n return lastChild;\n }\n return lastChild.querySelector<HTMLInputElement>('input');\n};\n\nconst valuesMatch = <T>(a: T[], b: T[]): boolean => {\n if (a === b) {\n return true;\n }\n if (a.length !== b.length) {\n return false;\n }\n for (let i = 0; i < a.length; i += 1) {\n if (a[i] !== b[i]) {\n return false;\n }\n }\n return true;\n};\n\nexport function usePillsReorder<T>({ value, onChange, enabled }: UsePillsReorderInput<T>) {\n const dragStateRef = useRef<PillDragState>({ draggedIndex: null, currentDropTarget: null });\n const pendingFocusRef = useRef<PendingFocus<T> | null>(null);\n const containerRef = useRef<HTMLDivElement | null>(null);\n const valueRef = useRef(value);\n valueRef.current = value;\n\n useEffect(() => {\n const pending = pendingFocusRef.current;\n if (!pending) {\n return;\n }\n pendingFocusRef.current = null;\n if (!valuesMatch(valueRef.current, pending.expectedValue)) {\n return;\n }\n pending.container\n ?.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${pending.index}\"]`)\n ?.focus();\n });\n\n const setContainer = useCallback((node: HTMLDivElement | null) => {\n containerRef.current = node;\n }, []);\n\n const getListProps = (): PillsReorderListProps => {\n if (!enabled) {\n return {};\n }\n return { ref: setContainer };\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (!enabled || event.key !== 'ArrowLeft') {\n return;\n }\n\n const input = event.currentTarget;\n const caretAtStart =\n input.value.length === 0 || (input.selectionStart === 0 && input.selectionEnd === 0);\n if (!caretAtStart) {\n return;\n }\n\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const pills = container.querySelectorAll<HTMLElement>('[data-mantine-pill-index]');\n if (pills.length === 0) {\n return;\n }\n\n event.preventDefault();\n pills[pills.length - 1].focus();\n };\n\n const getPillProps = (index: number): PillReorderProps | undefined => {\n if (!enabled) {\n return undefined;\n }\n\n return {\n draggable: true,\n tabIndex: -1,\n 'data-mantine-pill-index': index,\n 'aria-keyshortcuts': 'Alt+ArrowLeft Alt+ArrowRight',\n onMouseDown: (event) => {\n if (event.button === 0) {\n event.stopPropagation();\n }\n },\n onDragStart: (event) => {\n event.stopPropagation();\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', String(index));\n dragStateRef.current.draggedIndex = index;\n\n const target = event.currentTarget;\n const rect = target.getBoundingClientRect();\n const ghost = target.cloneNode(true) as HTMLElement;\n ghost.removeAttribute('data-dragging');\n ghost.removeAttribute('data-drag-over');\n ghost.style.position = 'fixed';\n ghost.style.top = '-9999px';\n ghost.style.left = '-9999px';\n ghost.style.width = `${rect.width}px`;\n ghost.style.height = `${rect.height}px`;\n ghost.style.pointerEvents = 'none';\n document.body.appendChild(ghost);\n event.dataTransfer.setDragImage(ghost, event.clientX - rect.left, event.clientY - rect.top);\n\n setTimeout(() => ghost.parentNode?.removeChild(ghost), 0);\n\n requestAnimationFrame(() => {\n target.setAttribute('data-dragging', 'true');\n });\n },\n onDragOver: (event) => {\n const { draggedIndex } = dragStateRef.current;\n if (draggedIndex === null || draggedIndex === index) {\n return;\n }\n\n const target = event.currentTarget;\n const rect = target.getBoundingClientRect();\n const x = event.clientX - rect.left;\n const isRtl = getComputedStyle(target).direction === 'rtl';\n const isStart = isRtl ? x > rect.width / 2 : x < rect.width / 2;\n const position: PillReorderPosition = isStart ? 'before' : 'after';\n\n event.preventDefault();\n event.stopPropagation();\n event.dataTransfer.dropEffect = 'move';\n\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget && prevTarget !== target) {\n prevTarget.removeAttribute('data-drag-over');\n }\n\n target.setAttribute('data-drag-over', position);\n dragStateRef.current.currentDropTarget = target;\n },\n onDragLeave: (event) => {\n const target = event.currentTarget;\n const related = event.relatedTarget as Node | null;\n if (related && target.contains(related)) {\n return;\n }\n\n target.removeAttribute('data-drag-over');\n if (dragStateRef.current.currentDropTarget === target) {\n dragStateRef.current.currentDropTarget = null;\n }\n },\n onDrop: (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n const target = event.currentTarget;\n const position = target.getAttribute('data-drag-over') as PillReorderPosition | null;\n target.removeAttribute('data-drag-over');\n\n const { draggedIndex } = dragStateRef.current;\n if (draggedIndex !== null && position && draggedIndex !== index) {\n const nextValue = movePill(valueRef.current, draggedIndex, index, position);\n if (nextValue !== valueRef.current) {\n onChange(nextValue);\n }\n }\n\n dragStateRef.current.draggedIndex = null;\n dragStateRef.current.currentDropTarget = null;\n },\n onDragEnd: (event) => {\n const target = event.currentTarget;\n target.removeAttribute('data-dragging');\n\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget) {\n prevTarget.removeAttribute('data-drag-over');\n }\n\n dragStateRef.current.draggedIndex = null;\n dragStateRef.current.currentDropTarget = null;\n },\n onKeyDown: (event) => {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n return;\n }\n\n const target = event.currentTarget;\n const isRtl = getComputedStyle(target).direction === 'rtl';\n const movingForward = isRtl ? event.key === 'ArrowLeft' : event.key === 'ArrowRight';\n const targetIndex = movingForward ? index + 1 : index - 1;\n\n if (event.altKey) {\n if (targetIndex < 0 || targetIndex >= valueRef.current.length) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const position: PillReorderPosition = movingForward ? 'after' : 'before';\n const nextValue = movePill(valueRef.current, index, targetIndex, position);\n if (nextValue === valueRef.current) {\n return;\n }\n\n pendingFocusRef.current = {\n container: target.parentElement,\n index: targetIndex,\n expectedValue: nextValue,\n };\n onChange(nextValue);\n return;\n }\n\n if (targetIndex < 0) {\n return;\n }\n\n const container = target.parentElement;\n if (!container) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n if (targetIndex >= valueRef.current.length) {\n findSearchInput(container)?.focus();\n return;\n }\n\n container.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${targetIndex}\"]`)?.focus();\n },\n };\n };\n\n return { getPillProps, getListProps, handleInputKeyDown };\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxPopover.cjs","names":["isOptionsGroup","Combobox","CheckIcon","comboboxClasses","defaultOptionsFilter","isEmptyComboboxData","ScrollArea","genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","OptionsDropdown","ComboboxPopoverTarget"],"sources":["../../../src/components/ComboboxPopover/ComboboxPopover.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Factory,\n genericFactory,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n Combobox,\n ComboboxData,\n ComboboxItem,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxProps,\n defaultOptionsFilter,\n getOptionsLockup,\n getParsedComboboxData,\n isOptionsGroup,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport { ComboboxParsedItem } from '../Combobox/Combobox.types';\nimport { isEmptyComboboxData } from '../Combobox/OptionsDropdown/is-empty-combobox-data';\nimport { ScrollArea, ScrollAreaProps } from '../ScrollArea';\nimport { ComboboxPopoverValue } from './ComboboxPopover.types';\nimport { ComboboxPopoverTarget } from './ComboboxPopoverTarget';\nimport comboboxClasses from '../Combobox/Combobox.module.css';\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\ninterface OptionProps {\n data: ComboboxParsedItem<Primitive>;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive | Primitive[] | null;\n checkIconPosition?: 'left' | 'right';\n unstyled: boolean | undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction Option({\n data,\n withCheckIcon,\n withAlignedLabels,\n value,\n checkIconPosition,\n unstyled,\n renderOption,\n}: OptionProps) {\n if (isOptionsGroup(data)) {\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={`${item.value}`}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n checkIconPosition={checkIconPosition}\n renderOption={renderOption}\n />\n ));\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n }\n\n const checked = isValueChecked(value, data.value);\n const check =\n withCheckIcon &&\n (checked ? (\n <CheckIcon className={comboboxClasses.optionsDropdownCheckIcon} />\n ) : withAlignedLabels ? (\n <div className={comboboxClasses.optionsDropdownCheckPlaceholder} />\n ) : null);\n\n const defaultContent = (\n <>\n {checkIconPosition === 'left' && check}\n <span>{data.label}</span>\n {checkIconPosition === 'right' && check}\n </>\n );\n\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [comboboxClasses.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' || undefined}\n data-checked={checked || undefined}\n aria-selected={checked}\n active={checked}\n >\n {typeof renderOption === 'function'\n ? renderOption({ option: data, checked })\n : defaultContent}\n </Combobox.Option>\n );\n}\n\ninterface SearchableDropdownProps {\n data: ComboboxParsedItem<Primitive>[];\n filter: OptionsFilter<Primitive> | undefined;\n search: string;\n limit: number | undefined;\n nothingFoundMessage: React.ReactNode | undefined;\n withScrollArea: boolean | undefined;\n maxDropdownHeight: number | string | undefined;\n value: Primitive | Primitive[] | null;\n checkIconPosition: 'left' | 'right' | undefined;\n withCheckIcon: boolean | undefined;\n withAlignedLabels: boolean | undefined;\n unstyled: boolean | undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n scrollAreaProps: ScrollAreaProps | undefined;\n onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nfunction SearchableDropdown({\n data,\n filter,\n search,\n limit,\n nothingFoundMessage,\n withScrollArea = true,\n maxDropdownHeight,\n value,\n checkIconPosition,\n withCheckIcon = false,\n withAlignedLabels = false,\n unstyled,\n renderOption,\n scrollAreaProps,\n onSearchChange,\n}: SearchableDropdownProps) {\n const filteredData = (filter || defaultOptionsFilter)({\n options: data,\n search,\n limit: limit ?? Infinity,\n });\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item, index) => (\n <Option\n data={item}\n key={\n isOptionsGroup(item)\n ? `group-${typeof item.group === 'string' ? item.group : index}`\n : `${item.value}`\n }\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n renderOption={renderOption}\n />\n ));\n\n return (\n <Combobox.Dropdown data-composed>\n <Combobox.Search value={search} onChange={onSearchChange} placeholder=\"Search...\" />\n <Combobox.Options>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={maxDropdownHeight ?? 220}\n type=\"scroll\"\n scrollbarSize=\"var(--combobox-padding)\"\n offsetScrollbars=\"y\"\n {...scrollAreaProps}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n\nexport type ComboboxPopoverStylesNames = ComboboxLikeStylesNames;\n\nexport interface ComboboxPopoverProps<\n Multiple extends boolean = false,\n Value extends Primitive = string,\n> extends StylesApiProps<ComboboxPopoverFactory> {\n /** If set, multiple items can be selected at the same time */\n multiple?: Multiple;\n\n /** Controlled component value */\n value?: ComboboxPopoverValue<Multiple, Value>;\n\n /** Uncontrolled component default value */\n defaultValue?: ComboboxPopoverValue<Multiple, Value>;\n\n /** Called when value changes */\n onChange?: (value: ComboboxPopoverValue<Multiple, Value>) => void;\n\n /** Data used to generate options */\n data?: ComboboxData<Value>;\n\n /** Controlled dropdown opened state */\n dropdownOpened?: boolean;\n\n /** Uncontrolled dropdown initial opened state */\n defaultDropdownOpened?: boolean;\n\n /** Called when dropdown opens */\n onDropdownOpen?: () => void;\n\n /** Called when dropdown closes */\n onDropdownClose?: () => void;\n\n /** Called when option is submitted from dropdown with mouse click or Enter key */\n onOptionSubmit?: (value: Value) => void;\n\n /** Props passed down to Combobox component */\n comboboxProps?: ComboboxProps;\n\n /** Function based on which items are filtered and sorted */\n filter?: OptionsFilter<Value>;\n\n /** Maximum number of options displayed at a time @default Infinity */\n limit?: number;\n\n /** Determines whether the options should be wrapped with ScrollArea.AutoSize @default true */\n withScrollArea?: boolean;\n\n /** max-height of the dropdown @default 250 */\n maxDropdownHeight?: number | string;\n\n /** If set, the first option is selected when dropdown opens @default false */\n selectFirstOptionOnDropdownOpen?: 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 /** Allows searching through options @default false */\n searchable?: boolean;\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 (only for single mode) @default true */\n allowDeselect?: boolean;\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 /** Props passed down to the hidden input */\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /** Hidden input name for form submission */\n name?: string;\n\n /** Hidden input form for form submission */\n form?: string;\n\n /** Content of the component */\n children?: React.ReactNode;\n\n /** Divider used to separate values in the hidden input value attribute @default ',' */\n hiddenInputValuesDivider?: string;\n}\n\nexport type ComboboxPopoverFactory = Factory<{\n props: ComboboxPopoverProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxPopoverStylesNames;\n signature: <Multiple extends boolean = false, Value extends Primitive = string>(\n props: ComboboxPopoverProps<Multiple, Value>\n ) => React.JSX.Element;\n staticComponents: {\n Target: typeof ComboboxPopoverTarget;\n };\n}>;\n\nconst defaultProps = {\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n hiddenInputValuesDivider: ',',\n} satisfies Partial<ComboboxPopoverProps>;\n\nexport const ComboboxPopover = genericFactory<ComboboxPopoverFactory>((_props) => {\n const props = useProps('ComboboxPopover', defaultProps as any, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n children,\n multiple,\n value,\n defaultValue,\n onChange,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n selectFirstOptionOnDropdownOpen,\n withCheckIcon,\n withAlignedLabels,\n checkIconPosition,\n nothingFoundMessage,\n searchable,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n renderOption,\n scrollAreaProps,\n hiddenInputProps,\n name,\n form,\n hiddenInputValuesDivider,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: multiple ? ([] as any) : null,\n onChange,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (searchable) {\n combobox.focusSearchInput();\n }\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n if (searchable) {\n combobox.focusTarget();\n }\n },\n });\n\n const handleSearchChange = (val: string) => {\n setSearchValue(val);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ComboboxPopoverFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleOptionSubmit = (val: string) => {\n onOptionSubmit?.(val as any);\n const option = optionsLockup[val];\n\n if (multiple) {\n const currentValue = Array.isArray(_value) ? _value : [];\n if (currentValue.includes(option.value)) {\n setValue(currentValue.filter((v: any) => v !== option.value) as any);\n } else {\n setValue([...currentValue, option.value] as any);\n }\n combobox.updateSelectedOptionIndex('selected');\n } else {\n const nextValue = allowDeselect && `${option.value}` === `${_value}` ? null : option.value;\n setValue(nextValue as any);\n combobox.closeDropdown();\n }\n\n if (searchable) {\n handleSearchChange('');\n }\n };\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"ComboboxPopover\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n attributes={attributes}\n onOptionSubmit={handleOptionSubmit}\n {...comboboxProps}\n {...others}\n >\n {children}\n {searchable ? (\n <SearchableDropdown\n data={parsedData as any}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={_searchValue}\n limit={limit}\n nothingFoundMessage={nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n unstyled={unstyled}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n onSearchChange={(event) => {\n handleSearchChange(event.currentTarget.value);\n }}\n />\n ) : (\n <OptionsDropdown\n data={parsedData as any}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={undefined}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={false}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n labelId={undefined}\n aria-label={undefined}\n />\n )}\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n value={_value}\n form={form}\n valuesDivider={hiddenInputValuesDivider}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nComboboxPopover.classes = Combobox.classes;\nComboboxPopover.displayName = '@mantine/core/ComboboxPopover';\nComboboxPopover.Target = ComboboxPopoverTarget;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboboxPopover.cjs","names":["isOptionsGroup","Combobox","CheckIcon","comboboxClasses","cx","defaultOptionsFilter","isEmptyComboboxData","ScrollArea","genericFactory","useProps","useMemo","getParsedComboboxData","getOptionsLockup","useUncontrolled","useCombobox","useResolvedStylesApi","OptionsDropdown","ComboboxPopoverTarget"],"sources":["../../../src/components/ComboboxPopover/ComboboxPopover.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Factory,\n genericFactory,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n Combobox,\n ComboboxData,\n ComboboxItem,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxProps,\n defaultOptionsFilter,\n getOptionsLockup,\n getParsedComboboxData,\n isOptionsGroup,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport { ComboboxParsedItem } from '../Combobox/Combobox.types';\nimport { isEmptyComboboxData } from '../Combobox/OptionsDropdown/is-empty-combobox-data';\nimport { ScrollArea, ScrollAreaProps } from '../ScrollArea';\nimport { ComboboxPopoverValue } from './ComboboxPopover.types';\nimport { ComboboxPopoverTarget } from './ComboboxPopoverTarget';\nimport comboboxClasses from '../Combobox/Combobox.module.css';\n\nfunction isValueChecked(value: Primitive | Primitive[] | undefined | null, optionValue: Primitive) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\ninterface OptionProps {\n data: ComboboxParsedItem<Primitive>;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive | Primitive[] | null;\n checkIconPosition?: 'left' | 'right';\n unstyled: boolean | undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction Option({\n data,\n withCheckIcon,\n withAlignedLabels,\n value,\n checkIconPosition,\n unstyled,\n renderOption,\n}: OptionProps) {\n if (isOptionsGroup(data)) {\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={`${item.value}`}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n checkIconPosition={checkIconPosition}\n renderOption={renderOption}\n />\n ));\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n }\n\n const checked = isValueChecked(value, data.value);\n const check =\n withCheckIcon &&\n (checked ? (\n <CheckIcon className={comboboxClasses.optionsDropdownCheckIcon} />\n ) : withAlignedLabels ? (\n <div className={comboboxClasses.optionsDropdownCheckPlaceholder} />\n ) : null);\n\n const defaultContent = (\n <>\n {checkIconPosition === 'left' && check}\n <span>{data.label}</span>\n {checkIconPosition === 'right' && check}\n </>\n );\n\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [comboboxClasses.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' || undefined}\n data-checked={checked || undefined}\n aria-selected={checked}\n active={checked}\n >\n {typeof renderOption === 'function'\n ? renderOption({ option: data, checked })\n : defaultContent}\n </Combobox.Option>\n );\n}\n\ninterface SearchableDropdownProps {\n data: ComboboxParsedItem<Primitive>[];\n filter: OptionsFilter<Primitive> | undefined;\n search: string;\n limit: number | undefined;\n nothingFoundMessage: React.ReactNode | undefined;\n withScrollArea: boolean | undefined;\n maxDropdownHeight: number | string | undefined;\n value: Primitive | Primitive[] | null;\n checkIconPosition: 'left' | 'right' | undefined;\n withCheckIcon: boolean | undefined;\n withAlignedLabels: boolean | undefined;\n unstyled: boolean | undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n scrollAreaProps: ScrollAreaProps | undefined;\n onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nfunction SearchableDropdown({\n data,\n filter,\n search,\n limit,\n nothingFoundMessage,\n withScrollArea = true,\n maxDropdownHeight,\n value,\n checkIconPosition,\n withCheckIcon = false,\n withAlignedLabels = false,\n unstyled,\n renderOption,\n scrollAreaProps,\n onSearchChange,\n}: SearchableDropdownProps) {\n const filteredData = (filter || defaultOptionsFilter)({\n options: data,\n search,\n limit: limit ?? Infinity,\n });\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item, index) => (\n <Option\n data={item}\n key={\n isOptionsGroup(item)\n ? `group-${typeof item.group === 'string' ? item.group : index}`\n : `${item.value}`\n }\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n renderOption={renderOption}\n />\n ));\n\n return (\n <Combobox.Dropdown data-composed>\n <Combobox.Search value={search} onChange={onSearchChange} placeholder=\"Search...\" />\n <Combobox.Options>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={maxDropdownHeight ?? 220}\n type=\"scroll\"\n scrollbarSize=\"var(--combobox-padding)\"\n offsetScrollbars=\"y\"\n {...scrollAreaProps}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n\nexport type ComboboxPopoverStylesNames = ComboboxLikeStylesNames | 'search';\n\nexport interface ComboboxPopoverProps<\n Multiple extends boolean = false,\n Value extends Primitive = string,\n> extends StylesApiProps<ComboboxPopoverFactory> {\n /** If set, multiple items can be selected at the same time */\n multiple?: Multiple;\n\n /** Controlled component value */\n value?: ComboboxPopoverValue<Multiple, Value>;\n\n /** Uncontrolled component default value */\n defaultValue?: ComboboxPopoverValue<Multiple, Value>;\n\n /** Called when value changes */\n onChange?: (value: ComboboxPopoverValue<Multiple, Value>) => void;\n\n /** Data used to generate options */\n data?: ComboboxData<Value>;\n\n /** Controlled dropdown opened state */\n dropdownOpened?: boolean;\n\n /** Uncontrolled dropdown initial opened state */\n defaultDropdownOpened?: boolean;\n\n /** Called when dropdown opens */\n onDropdownOpen?: () => void;\n\n /** Called when dropdown closes */\n onDropdownClose?: () => void;\n\n /** Called when option is submitted from dropdown with mouse click or Enter key */\n onOptionSubmit?: (value: Value) => void;\n\n /** Props passed down to Combobox component */\n comboboxProps?: ComboboxProps;\n\n /** Function based on which items are filtered and sorted */\n filter?: OptionsFilter<Value>;\n\n /** Maximum number of options displayed at a time @default Infinity */\n limit?: number;\n\n /** Determines whether the options should be wrapped with ScrollArea.AutoSize @default true */\n withScrollArea?: boolean;\n\n /** max-height of the dropdown @default 250 */\n maxDropdownHeight?: number | string;\n\n /** If set, the first option is selected when dropdown opens @default false */\n selectFirstOptionOnDropdownOpen?: 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 /** Allows searching through options @default false */\n searchable?: boolean;\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 (only for single mode) @default true */\n allowDeselect?: boolean;\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 /** Props passed down to the hidden input */\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /** Hidden input name for form submission */\n name?: string;\n\n /** Hidden input form for form submission */\n form?: string;\n\n /** Content of the component */\n children?: React.ReactNode;\n\n /** Divider used to separate values in the hidden input value attribute @default ',' */\n hiddenInputValuesDivider?: string;\n}\n\nexport type ComboboxPopoverFactory = Factory<{\n props: ComboboxPopoverProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxPopoverStylesNames;\n signature: <Multiple extends boolean = false, Value extends Primitive = string>(\n props: ComboboxPopoverProps<Multiple, Value>\n ) => React.JSX.Element;\n staticComponents: {\n Target: typeof ComboboxPopoverTarget;\n };\n}>;\n\nconst defaultProps = {\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n hiddenInputValuesDivider: ',',\n} satisfies Partial<ComboboxPopoverProps>;\n\nexport const ComboboxPopover = genericFactory<ComboboxPopoverFactory>((_props) => {\n const props = useProps('ComboboxPopover', defaultProps as any, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n children,\n multiple,\n value,\n defaultValue,\n onChange,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n selectFirstOptionOnDropdownOpen,\n withCheckIcon,\n withAlignedLabels,\n checkIconPosition,\n nothingFoundMessage,\n searchable,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n renderOption,\n scrollAreaProps,\n hiddenInputProps,\n name,\n form,\n hiddenInputValuesDivider,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: multiple ? ([] as any) : null,\n onChange,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (searchable) {\n combobox.focusSearchInput();\n }\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n if (searchable) {\n combobox.focusTarget();\n }\n },\n });\n\n const handleSearchChange = (val: string) => {\n setSearchValue(val);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ComboboxPopoverFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleOptionSubmit = (val: string) => {\n onOptionSubmit?.(val as any);\n const option = optionsLockup[val];\n\n if (multiple) {\n const currentValue = Array.isArray(_value) ? _value : [];\n if (currentValue.includes(option.value)) {\n setValue(currentValue.filter((v: any) => v !== option.value) as any);\n } else {\n setValue([...currentValue, option.value] as any);\n }\n combobox.updateSelectedOptionIndex('selected');\n } else {\n const nextValue = allowDeselect && `${option.value}` === `${_value}` ? null : option.value;\n setValue(nextValue as any);\n combobox.closeDropdown();\n }\n\n if (searchable) {\n handleSearchChange('');\n }\n };\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"ComboboxPopover\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n attributes={attributes}\n onOptionSubmit={handleOptionSubmit}\n {...comboboxProps}\n {...others}\n >\n {children}\n {searchable ? (\n <SearchableDropdown\n data={parsedData as any}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={_searchValue}\n limit={limit}\n nothingFoundMessage={nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n unstyled={unstyled}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n onSearchChange={(event) => {\n handleSearchChange(event.currentTarget.value);\n }}\n />\n ) : (\n <OptionsDropdown\n data={parsedData as any}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={undefined}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={false}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n labelId={undefined}\n aria-label={undefined}\n />\n )}\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n value={_value}\n form={form}\n valuesDivider={hiddenInputValuesDivider}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nComboboxPopover.classes = Combobox.classes;\nComboboxPopover.displayName = '@mantine/core/ComboboxPopover';\nComboboxPopover.Target = ComboboxPopoverTarget;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAS,eAAe,OAAmD,aAAwB;CACjG,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,IAAI,UAAU;AACxE;AAYA,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;CACd,IAAIA,yBAAAA,eAAe,IAAI,GAAG;EACxB,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,MAAM;GACC;GAEG;GACK;GACI;GACA;GACL;EACf,GANM,GAAG,KAAK,OAMd,CACF;EACD,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,SAAS,OAAV;GAAgB,OAAO,KAAK;GAAQ,UAAA;EAAwB,CAAA;CACrE;CAEA,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;CAChD,MAAM,QACJ,kBACC,UACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD,EAAW,WAAWC,wBAAAA,QAAgB,yBAA2B,CAAA,IAC/D,oBACF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAWA,wBAAAA,QAAgB,gCAAkC,CAAA,IAChE;CAEN,MAAM,iBACJ,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,sBAAsB,UAAU;EACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;EACvB,sBAAsB,WAAW;CAClC,EAAA,CAAA;CAGJ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,iBAAAA,SAAS,QAAV;EACE,OAAO,KAAK;EACZ,UAAU,KAAK;EACf,YAAA,GAAWG,KAAAA,QAAAA,CAAG,GAAGD,wBAAAA,QAAgB,wBAAwB,CAAC,SAAS,CAAC;EACpE,gBAAc,sBAAsB,WAAW,KAAA;EAC/C,gBAAc,WAAW,KAAA;EACzB,iBAAe;EACf,QAAQ;EAEP,UAAA,OAAO,iBAAiB,aACrB,aAAa;GAAE,QAAQ;GAAM;EAAQ,CAAC,IACtC;CACW,CAAA;AAErB;AAoBA,SAAS,mBAAmB,EAC1B,MACA,QACA,QACA,OACA,qBACA,iBAAiB,MACjB,mBACA,OACA,mBACA,gBAAgB,OAChB,oBAAoB,OACpB,UACA,cACA,iBACA,kBAC0B;CAC1B,MAAM,gBAAgB,UAAUE,+BAAAA,qBAAAA,CAAsB;EACpD,SAAS;EACT;EACA,OAAO,SAAS;CAClB,CAAC;CACD,MAAM,UAAUC,+BAAAA,oBAAoB,YAAY;CAEhD,MAAM,UAAU,aAAa,KAAK,MAAM,UACtC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,MAAM;EAMS;EACI;EACZ;EACY;EACT;EACI;CACf,GAVGN,yBAAAA,eAAe,IAAI,IACf,SAAS,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,UACvD,GAAG,KAAK,OAQf,CACF;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,SAAS,UAAV;EAAmB,iBAAA;EAAnB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,iBAAAA,SAAS,QAAV;GAAiB,OAAO;GAAQ,UAAU;GAAgB,aAAY;EAAa,CAAA,GACnF,iBAAA,GAAA,kBAAA,KAAA,CAACA,iBAAAA,SAAS,SAAV,EAAA,UAAA,CACG,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAACM,mBAAAA,WAAW,UAAZ;GACE,KAAK,qBAAqB;GAC1B,MAAK;GACL,eAAc;GACd,kBAAiB;GACjB,GAAI;GAEH,UAAA;EACkB,CAAA,IAErB,SAED,WAAW,uBAAuB,iBAAA,GAAA,kBAAA,IAAA,CAACN,iBAAAA,SAAS,OAAV,EAAA,UAAiB,oBAAoC,CAAA,CACxE,EAAA,CAAA,CACD;;AAEvB;AAqHA,MAAM,eAAe;CACnB,eAAe;CACf,eAAe;CACf,mBAAmB;CACnB,0BAA0B;AAC5B;AAEA,MAAa,kBAAkBO,gBAAAA,gBAAwC,WAAW;CAChF,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,cAAqB,MAAM;CACrE,MAAM,EACJ,YACA,QACA,UACA,MACA,UACA,UACA,OACA,cACA,UACA,MACA,gBACA,uBACA,gBACA,iBACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,iCACA,eACA,mBACA,mBACA,qBACA,YACA,aACA,oBACA,gBACA,eACA,cACA,iBACA,kBACA,MACA,MACA,0BACA,YACA,GAAG,WACD;CAEJ,MAAM,cAAA,GAAaC,MAAAA,QAAAA,OAAcC,iCAAAA,sBAAsB,IAAI,GAAG,CAAC,IAAI,CAAC;CACpE,MAAM,iBAAA,GAAgBD,MAAAA,QAAAA,OAAcE,2BAAAA,iBAAiB,UAAU,GAAG,CAAC,UAAU,CAAC;CAE9E,MAAM,CAAC,QAAQ,aAAA,GAAYC,eAAAA,gBAAAA,CAAgB;EACzC;EACA;EACA,YAAY,WAAY,CAAC,IAAY;EACrC;CACF,CAAC;CAED,MAAM,CAAC,cAAc,mBAAA,GAAkBA,eAAAA,gBAAAA,CAAgB;EACrD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,WAAWC,qBAAAA,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,YACF,SAAS,iBAAiB;GAE5B,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;GAC7B,IAAI,YACF,SAAS,YAAY;EAEzB;CACF,CAAC;CAED,MAAM,sBAAsB,QAAgB;EAC1C,eAAe,GAAG;EAClB,SAAS,oBAAoB;CAC/B;CAEA,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAA6C;EAC1F;EACA;EACA;CACF,CAAC;CAED,MAAM,sBAAsB,QAAgB;EAC1C,iBAAiB,GAAU;EAC3B,MAAM,SAAS,cAAc;EAE7B,IAAI,UAAU;GACZ,MAAM,eAAe,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC;GACvD,IAAI,aAAa,SAAS,OAAO,KAAK,GACpC,SAAS,aAAa,QAAQ,MAAW,MAAM,OAAO,KAAK,CAAQ;QAEnE,SAAS,CAAC,GAAG,cAAc,OAAO,KAAK,CAAQ;GAEjD,SAAS,0BAA0B,UAAU;EAC/C,OAAO;GACL,MAAM,YAAY,iBAAiB,GAAG,OAAO,YAAY,GAAG,WAAW,OAAO,OAAO;GACrF,SAAS,SAAgB;GACzB,SAAS,cAAc;EACzB;EAEA,IAAI,YACF,mBAAmB,EAAE;CAEzB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACd,iBAAAA,UAAD;EACE,OAAO;EACP,kBAAiB;EACjB,YAAY;EACZ,QAAQ;EACE;EACE;EACZ,gBAAgB;EAChB,GAAI;EACJ,GAAI;EATN,UAAA,CAWG,UACA,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD;GACE,MAAM;GACE;GACR,QAAQ;GACD;GACc;GACL;GACG;GACnB,OAAO;GACY;GACJ;GACI;GACT;GACI;GACG;GACjB,iBAAiB,UAAU;IACzB,mBAAmB,MAAM,cAAc,KAAK;GAC9C;EACD,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAACe,wBAAAA,iBAAD;GACE,MAAM;GACE;GACR,QAAQ,KAAA;GACD;GACP,iBAAiB,CAAC;GACF;GACG;GACnB,eAAe;GACf,OAAO;GACY;GACJ;GACI;GACE;GACX;GACI;GACG;GACjB,SAAS,KAAA;GACT,cAAY,KAAA;EACb,CAAA,CAEK;CACV,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAACf,iBAAAA,SAAS,aAAV;EACQ;EACN,OAAO;EACD;EACN,eAAe;EACf,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN,CAAC;AAED,gBAAgB,UAAUA,iBAAAA,SAAS;AACnC,gBAAgB,cAAc;AAC9B,gBAAgB,SAASgB,8BAAAA"}
|
|
@@ -17,19 +17,20 @@ const ComboboxPopoverTarget = require_factory.factory((props) => {
|
|
|
17
17
|
if (!child) throw new Error("ComboboxPopover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
|
|
18
18
|
const ctx = require_Combobox_context.useComboboxContext();
|
|
19
19
|
const targetRef = (0, _mantine_hooks.useMergedRef)(ref, ctx.store.targetRef, require_get_ref_prop.getRefProp(child));
|
|
20
|
+
const targetProps = require_use_combobox_target_props.useComboboxTargetProps({
|
|
21
|
+
targetType: "button",
|
|
22
|
+
withAriaAttributes: true,
|
|
23
|
+
withKeyboardNavigation: true,
|
|
24
|
+
withExpandedAttribute: true,
|
|
25
|
+
onKeyDown: child.props.onKeyDown,
|
|
26
|
+
onClick: (event) => {
|
|
27
|
+
ctx.store.toggleDropdown();
|
|
28
|
+
child.props.onClick?.(event);
|
|
29
|
+
},
|
|
30
|
+
autoComplete: "off"
|
|
31
|
+
});
|
|
20
32
|
const clonedElement = (0, react.cloneElement)(child, {
|
|
21
|
-
...
|
|
22
|
-
targetType: "button",
|
|
23
|
-
withAriaAttributes: true,
|
|
24
|
-
withKeyboardNavigation: true,
|
|
25
|
-
withExpandedAttribute: true,
|
|
26
|
-
onKeyDown: child.props.onKeyDown,
|
|
27
|
-
onClick: (event) => {
|
|
28
|
-
ctx.store.toggleDropdown();
|
|
29
|
-
child.props.onClick?.(event);
|
|
30
|
-
},
|
|
31
|
-
autoComplete: "off"
|
|
32
|
-
}),
|
|
33
|
+
...targetProps,
|
|
33
34
|
...others,
|
|
34
35
|
[refProp]: targetRef
|
|
35
36
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxPopoverTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","getRefProp","useComboboxTargetProps","Popover"],"sources":["../../../src/components/ComboboxPopover/ComboboxPopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../core';\nimport { useComboboxContext } from '../Combobox/Combobox.context';\nimport { useComboboxTargetProps } from '../Combobox/use-combobox-target-props/use-combobox-target-props';\nimport { Popover } from '../Popover';\n\nexport interface ComboboxPopoverTargetProps {\n children: React.ReactNode;\n\n /** Key of the prop that is used to access element ref @default 'ref' */\n refProp?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n} satisfies Partial<ComboboxPopoverTargetProps>;\n\nexport type ComboboxPopoverTargetFactory = Factory<{\n props: ComboboxPopoverTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxPopoverTarget = factory<ComboboxPopoverTargetFactory>((props) => {\n const { children, refProp, ref, ...others } = useProps(\n 'ComboboxPopoverTarget',\n defaultProps,\n props\n );\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'ComboboxPopover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = useComboboxContext();\n const targetRef = useMergedRef(ref, ctx.store.targetRef, getRefProp(child));\n\n const targetProps = useComboboxTargetProps({\n targetType: 'button',\n withAriaAttributes: true,\n withKeyboardNavigation: true,\n withExpandedAttribute: true,\n onKeyDown: (child.props as any).onKeyDown,\n onClick: (event) => {\n ctx.store.toggleDropdown();\n (child.props as any).onClick?.(event);\n },\n autoComplete: 'off',\n });\n\n const clonedElement = cloneElement(child, {\n ...targetProps,\n ...others,\n [refProp!]: targetRef,\n } as any);\n\n return <Popover.Target refProp={refProp}>{clonedElement}</Popover.Target>;\n});\n\nComboboxPopoverTarget.displayName = '@mantine/core/ComboboxPopoverTarget';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,eAAe,EACnB,SAAS,MACX;AAQA,MAAa,wBAAwBA,gBAAAA,SAAuC,UAAU;CACpF,MAAM,EAAE,UAAU,SAAS,KAAK,GAAG,WAAWC,kBAAAA,SAC5C,yBACA,cACA,KACF;CAEA,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,0KACF;CAGF,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,aAAA,
|
|
1
|
+
{"version":3,"file":"ComboboxPopoverTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useMergedRef","getRefProp","useComboboxTargetProps","cloneElement","Popover"],"sources":["../../../src/components/ComboboxPopover/ComboboxPopoverTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../core';\nimport { useComboboxContext } from '../Combobox/Combobox.context';\nimport { useComboboxTargetProps } from '../Combobox/use-combobox-target-props/use-combobox-target-props';\nimport { Popover } from '../Popover';\n\nexport interface ComboboxPopoverTargetProps {\n children: React.ReactNode;\n\n /** Key of the prop that is used to access element ref @default 'ref' */\n refProp?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n} satisfies Partial<ComboboxPopoverTargetProps>;\n\nexport type ComboboxPopoverTargetFactory = Factory<{\n props: ComboboxPopoverTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxPopoverTarget = factory<ComboboxPopoverTargetFactory>((props) => {\n const { children, refProp, ref, ...others } = useProps(\n 'ComboboxPopoverTarget',\n defaultProps,\n props\n );\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'ComboboxPopover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = useComboboxContext();\n const targetRef = useMergedRef(ref, ctx.store.targetRef, getRefProp(child));\n\n const targetProps = useComboboxTargetProps({\n targetType: 'button',\n withAriaAttributes: true,\n withKeyboardNavigation: true,\n withExpandedAttribute: true,\n onKeyDown: (child.props as any).onKeyDown,\n onClick: (event) => {\n ctx.store.toggleDropdown();\n (child.props as any).onClick?.(event);\n },\n autoComplete: 'off',\n });\n\n const clonedElement = cloneElement(child, {\n ...targetProps,\n ...others,\n [refProp!]: targetRef,\n } as any);\n\n return <Popover.Target refProp={refProp}>{clonedElement}</Popover.Target>;\n});\n\nComboboxPopoverTarget.displayName = '@mantine/core/ComboboxPopoverTarget';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,eAAe,EACnB,SAAS,MACX;AAQA,MAAa,wBAAwBA,gBAAAA,SAAuC,UAAU;CACpF,MAAM,EAAE,UAAU,SAAS,KAAK,GAAG,WAAWC,kBAAAA,SAC5C,yBACA,cACA,KACF;CAEA,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,0KACF;CAGF,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,aAAA,GAAYC,eAAAA,aAAAA,CAAa,KAAK,IAAI,MAAM,WAAWC,qBAAAA,WAAW,KAAK,CAAC;CAE1E,MAAM,cAAcC,kCAAAA,uBAAuB;EACzC,YAAY;EACZ,oBAAoB;EACpB,wBAAwB;EACxB,uBAAuB;EACvB,WAAY,MAAM,MAAc;EAChC,UAAU,UAAU;GAClB,IAAI,MAAM,eAAe;GACzB,MAAO,MAAc,UAAU,KAAK;EACtC;EACA,cAAc;CAChB,CAAC;CAED,MAAM,iBAAA,GAAgBC,MAAAA,aAAAA,CAAa,OAAO;EACxC,GAAG;EACH,GAAG;GACF,UAAW;CACd,CAAQ;CAER,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,QAAT;EAAyB;EAAU,UAAA;CAA8B,CAAA;AAC1E,CAAC;AAED,sBAAsB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyButton.cjs","names":["useProps"],"sources":["../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import { useClipboard } from '@mantine/hooks';\nimport { useProps } from '../../core';\n\nexport interface CopyButtonProps {\n /** Children callback, provides current status and copy function as an argument */\n children: (payload: { copied: boolean; copy: () => void }) => React.ReactNode;\n\n /** Value that is copied to the clipboard when the button is clicked */\n value: string;\n\n /** Copied status timeout in ms @default 1000 */\n timeout?: number;\n}\n\nconst defaultProps = {\n timeout: 1000,\n} satisfies Partial<CopyButtonProps>;\n\nexport function CopyButton(props: CopyButtonProps) {\n const { children, timeout, value, ...others } = useProps('CopyButton', defaultProps, props);\n const clipboard = useClipboard({ timeout });\n const copy = () => clipboard.copy(value);\n return <>{children({ copy, copied: clipboard.copied, ...others })}</>;\n}\n\nCopyButton.displayName = '@mantine/core/CopyButton';\n\nexport namespace CopyButton {\n export type Props = CopyButtonProps;\n}\n"],"mappings":";;;;;AAcA,MAAM,eAAe,EACnB,SAAS,IACX;AAEA,SAAgB,WAAW,OAAwB;CACjD,MAAM,EAAE,UAAU,SAAS,OAAO,GAAG,WAAWA,kBAAAA,SAAS,cAAc,cAAc,KAAK;CAC1F,MAAM,aAAA,
|
|
1
|
+
{"version":3,"file":"CopyButton.cjs","names":["useProps","useClipboard"],"sources":["../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import { useClipboard } from '@mantine/hooks';\nimport { useProps } from '../../core';\n\nexport interface CopyButtonProps {\n /** Children callback, provides current status and copy function as an argument */\n children: (payload: { copied: boolean; copy: () => void }) => React.ReactNode;\n\n /** Value that is copied to the clipboard when the button is clicked */\n value: string;\n\n /** Copied status timeout in ms @default 1000 */\n timeout?: number;\n}\n\nconst defaultProps = {\n timeout: 1000,\n} satisfies Partial<CopyButtonProps>;\n\nexport function CopyButton(props: CopyButtonProps) {\n const { children, timeout, value, ...others } = useProps('CopyButton', defaultProps, props);\n const clipboard = useClipboard({ timeout });\n const copy = () => clipboard.copy(value);\n return <>{children({ copy, copied: clipboard.copied, ...others })}</>;\n}\n\nCopyButton.displayName = '@mantine/core/CopyButton';\n\nexport namespace CopyButton {\n export type Props = CopyButtonProps;\n}\n"],"mappings":";;;;;AAcA,MAAM,eAAe,EACnB,SAAS,IACX;AAEA,SAAgB,WAAW,OAAwB;CACjD,MAAM,EAAE,UAAU,SAAS,OAAO,GAAG,WAAWA,kBAAAA,SAAS,cAAc,cAAc,KAAK;CAC1F,MAAM,aAAA,GAAYC,eAAAA,aAAAA,CAAa,EAAE,QAAQ,CAAC;CAC1C,MAAM,aAAa,UAAU,KAAK,KAAK;CACvC,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UAAG,SAAS;EAAE;EAAM,QAAQ,UAAU;EAAQ,GAAG;CAAO,CAAC,EAAI,CAAA;AACtE;AAEA,WAAW,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataList.cjs","names":["createVarsResolver","getFontSize","getLineHeight","getSpacing","factory","useProps","useStyles","DataListProvider","Box","classes","DataListItem","DataListItemLabel","DataListItemValue"],"sources":["../../../src/components/DataList/DataList.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getFontSize,\n getLineHeight,\n getSpacing,\n MantineSize,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { DataListProvider } from './DataList.context';\nimport { DataListItem, DataListItemStylesNames } from './DataListItem/DataListItem';\nimport {\n DataListItemLabel,\n DataListItemLabelStylesNames,\n} from './DataListItemLabel/DataListItemLabel';\nimport {\n DataListItemValue,\n DataListItemValueStylesNames,\n} from './DataListItemValue/DataListItemValue';\nimport classes from './DataList.module.css';\n\nexport type DataListStylesNames =\n | 'root'\n | DataListItemStylesNames\n | DataListItemLabelStylesNames\n | DataListItemValueStylesNames;\n\nexport type DataListCssVariables = {\n root: '--data-list-fz' | '--data-list-lh' | '--data-list-gap' | '--data-list-label-width';\n};\n\nexport interface DataListProps\n extends BoxProps, StylesApiProps<DataListFactory>, ElementProps<'dl'> {\n /** DataList.Item components */\n children?: React.ReactNode;\n\n /** Controls `font-size` and `line-height` @default 'sm' */\n size?: MantineSize;\n\n /** Key of `theme.spacing` or any valid CSS value to set gap between items @default 'sm' */\n gap?: MantineSpacing;\n\n /** Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Adds border between items @default false */\n withDivider?: boolean;\n\n /** Controls min-width of the label (dt) element, any valid CSS value @default '120px' */\n labelWidth?: React.CSSProperties['minWidth'];\n}\n\nexport type DataListFactory = Factory<{\n props: DataListProps;\n ref: HTMLDListElement;\n stylesNames: DataListStylesNames;\n vars: DataListCssVariables;\n staticComponents: {\n Item: typeof DataListItem;\n ItemLabel: typeof DataListItemLabel;\n ItemValue: typeof DataListItemValue;\n };\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n} satisfies Partial<DataListProps>;\n\nconst varsResolver = createVarsResolver<DataListFactory>((_, { size, gap, labelWidth }) => ({\n root: {\n '--data-list-fz': getFontSize(size),\n '--data-list-lh': getLineHeight(size),\n '--data-list-gap': getSpacing(gap),\n '--data-list-label-width':\n labelWidth !== undefined\n ? typeof labelWidth === 'number'\n ? `${labelWidth}px`\n : labelWidth\n : undefined,\n },\n}));\n\nexport const DataList = factory<DataListFactory>((_props) => {\n const props = useProps('DataList', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n gap,\n orientation,\n withDivider,\n labelWidth,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DataListFactory>({\n name: 'DataList',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <DataListProvider value={{ getStyles }}>\n <Box<any>\n {...getStyles('root')}\n component=\"dl\"\n mod={[{ orientation, 'with-divider': withDivider }, mod]}\n {...others}\n >\n {children}\n </Box>\n </DataListProvider>\n );\n});\n\nDataList.classes = classes;\nDataList.varsResolver = varsResolver;\nDataList.displayName = '@mantine/core/DataList';\nDataList.Item = DataListItem;\nDataList.ItemLabel = DataListItemLabel;\nDataList.ItemValue = DataListItemValue;\n"],"mappings":";;;;;;;;;;;;;;AAuEA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAeA,6BAAAA,oBAAqC,GAAG,EAAE,MAAM,KAAK,kBAAkB,EAC1F,MAAM;CACJ,kBAAkBC,iBAAAA,YAAY,IAAI;CAClC,kBAAkBC,iBAAAA,cAAc,IAAI;CACpC,mBAAmBC,iBAAAA,WAAW,GAAG;CACjC,2BACE,eAAe,KAAA,IACX,OAAO,eAAe,WACpB,GAAG,WAAW,MACd,aACF,KAAA;AACR,EACF,EAAE;AAEF,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,KACA,aACA,aACA,YACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;EAAkB,OAAO,EAAE,UAAU;
|
|
1
|
+
{"version":3,"file":"DataList.cjs","names":["createVarsResolver","getFontSize","getLineHeight","getSpacing","factory","useProps","useStyles","DataListProvider","Box","classes","DataListItem","DataListItemLabel","DataListItemValue"],"sources":["../../../src/components/DataList/DataList.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getFontSize,\n getLineHeight,\n getSpacing,\n MantineSize,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { DataListProvider } from './DataList.context';\nimport { DataListItem, DataListItemStylesNames } from './DataListItem/DataListItem';\nimport {\n DataListItemLabel,\n DataListItemLabelStylesNames,\n} from './DataListItemLabel/DataListItemLabel';\nimport {\n DataListItemValue,\n DataListItemValueStylesNames,\n} from './DataListItemValue/DataListItemValue';\nimport classes from './DataList.module.css';\n\nexport type DataListStylesNames =\n | 'root'\n | DataListItemStylesNames\n | DataListItemLabelStylesNames\n | DataListItemValueStylesNames;\n\nexport type DataListCssVariables = {\n root: '--data-list-fz' | '--data-list-lh' | '--data-list-gap' | '--data-list-label-width';\n};\n\nexport interface DataListProps\n extends BoxProps, StylesApiProps<DataListFactory>, ElementProps<'dl'> {\n /** DataList.Item components */\n children?: React.ReactNode;\n\n /** Controls `font-size` and `line-height` @default 'sm' */\n size?: MantineSize;\n\n /** Key of `theme.spacing` or any valid CSS value to set gap between items @default 'sm' */\n gap?: MantineSpacing;\n\n /** Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Adds border between items @default false */\n withDivider?: boolean;\n\n /** Controls min-width of the label (dt) element, any valid CSS value @default '120px' */\n labelWidth?: React.CSSProperties['minWidth'];\n}\n\nexport type DataListFactory = Factory<{\n props: DataListProps;\n ref: HTMLDListElement;\n stylesNames: DataListStylesNames;\n vars: DataListCssVariables;\n staticComponents: {\n Item: typeof DataListItem;\n ItemLabel: typeof DataListItemLabel;\n ItemValue: typeof DataListItemValue;\n };\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n} satisfies Partial<DataListProps>;\n\nconst varsResolver = createVarsResolver<DataListFactory>((_, { size, gap, labelWidth }) => ({\n root: {\n '--data-list-fz': getFontSize(size),\n '--data-list-lh': getLineHeight(size),\n '--data-list-gap': getSpacing(gap),\n '--data-list-label-width':\n labelWidth !== undefined\n ? typeof labelWidth === 'number'\n ? `${labelWidth}px`\n : labelWidth\n : undefined,\n },\n}));\n\nexport const DataList = factory<DataListFactory>((_props) => {\n const props = useProps('DataList', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n gap,\n orientation,\n withDivider,\n labelWidth,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DataListFactory>({\n name: 'DataList',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <DataListProvider value={{ getStyles }}>\n <Box<any>\n {...getStyles('root')}\n component=\"dl\"\n mod={[{ orientation, 'with-divider': withDivider }, mod]}\n {...others}\n >\n {children}\n </Box>\n </DataListProvider>\n );\n});\n\nDataList.classes = classes;\nDataList.varsResolver = varsResolver;\nDataList.displayName = '@mantine/core/DataList';\nDataList.Item = DataListItem;\nDataList.ItemLabel = DataListItemLabel;\nDataList.ItemValue = DataListItemValue;\n"],"mappings":";;;;;;;;;;;;;;AAuEA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAeA,6BAAAA,oBAAqC,GAAG,EAAE,MAAM,KAAK,kBAAkB,EAC1F,MAAM;CACJ,kBAAkBC,iBAAAA,YAAY,IAAI;CAClC,kBAAkBC,iBAAAA,cAAc,IAAI;CACpC,mBAAmBC,iBAAAA,WAAW,GAAG;CACjC,2BACE,eAAe,KAAA,IACX,OAAO,eAAe,WACpB,GAAG,WAAW,MACd,aACF,KAAA;AACR,EACF,EAAE;AAEF,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,KACA,aACA,aACA,YACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;EAAkB,OAAO,EAAE,UAAU;EACnC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,GAAI,UAAU,MAAM;GACpB,WAAU;GACV,KAAK,CAAC;IAAE;IAAa,gBAAgB;GAAY,GAAG,GAAG;GACvD,GAAI;GAEH;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAOC,qBAAAA;AAChB,SAAS,YAAYC,0BAAAA;AACrB,SAAS,YAAYC,0BAAAA"}
|