@yamada-ui/react 2.2.5-dev-20260727050304 → 2.2.5-dev-20260727071034
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/dist/cjs/components/accordion/accordion.cjs.map +1 -1
- package/dist/cjs/components/action-bar/action-bar.cjs.map +1 -1
- package/dist/cjs/components/airy/airy.cjs.map +1 -1
- package/dist/cjs/components/alert/alert.cjs.map +1 -1
- package/dist/cjs/components/alpha-slider/alpha-slider.cjs.map +1 -1
- package/dist/cjs/components/autocomplete/autocomplete.cjs.map +1 -1
- package/dist/cjs/components/autocomplete/use-autocomplete.cjs.map +1 -1
- package/dist/cjs/components/avatar/avatar-group.cjs.map +1 -1
- package/dist/cjs/components/avatar/avatar.cjs.map +1 -1
- package/dist/cjs/components/blockquote/blockquote.cjs.map +1 -1
- package/dist/cjs/components/breadcrumb/breadcrumb.cjs.map +1 -1
- package/dist/cjs/components/button/button-group.cjs.map +1 -1
- package/dist/cjs/components/button/button.cjs.map +1 -1
- package/dist/cjs/components/calendar/calendar.cjs.map +1 -1
- package/dist/cjs/components/calendar/use-calendar.cjs.map +1 -1
- package/dist/cjs/components/carousel/carousel.cjs.map +1 -1
- package/dist/cjs/components/chart/cartesian-chart.cjs.map +1 -1
- package/dist/cjs/components/chart/chart.cjs.map +1 -1
- package/dist/cjs/components/chart/polar-chart.cjs.map +1 -1
- package/dist/cjs/components/checkbox/checkbox-group.cjs.map +1 -1
- package/dist/cjs/components/checkbox/checkbox.cjs.map +1 -1
- package/dist/cjs/components/checkbox-card/checkbox-card-group.cjs.map +1 -1
- package/dist/cjs/components/checkbox-card/checkbox-card.cjs.map +1 -1
- package/dist/cjs/components/circle-progress/circle-progress.cjs.map +1 -1
- package/dist/cjs/components/collapse/collapse.cjs.map +1 -1
- package/dist/cjs/components/color-picker/color-picker.cjs.map +1 -1
- package/dist/cjs/components/color-selector/color-selector.cjs.map +1 -1
- package/dist/cjs/components/color-swatch/color-swatch-group.cjs.map +1 -1
- package/dist/cjs/components/color-swatch/color-swatch.cjs.map +1 -1
- package/dist/cjs/components/data-list/data-list.cjs.map +1 -1
- package/dist/cjs/components/date-picker/date-picker.cjs.map +1 -1
- package/dist/cjs/components/date-picker/use-date-picker.cjs.map +1 -1
- package/dist/cjs/components/drawer/drawer.cjs.map +1 -1
- package/dist/cjs/components/dropzone/dropzone.cjs.map +1 -1
- package/dist/cjs/components/editable/editable.cjs.map +1 -1
- package/dist/cjs/components/empty-state/empty-state.cjs.map +1 -1
- package/dist/cjs/components/fade/fade.cjs.map +1 -1
- package/dist/cjs/components/fade-scale/fade-scale.cjs.map +1 -1
- package/dist/cjs/components/field/field.cjs.map +1 -1
- package/dist/cjs/components/fieldset/fieldset.cjs.map +1 -1
- package/dist/cjs/components/file-input/file-input.cjs.map +1 -1
- package/dist/cjs/components/flip/flip.cjs.map +1 -1
- package/dist/cjs/components/focus-lock/focus-lock.cjs.map +1 -1
- package/dist/cjs/components/form/form.cjs.map +1 -1
- package/dist/cjs/components/format/format-byte.cjs.map +1 -1
- package/dist/cjs/components/format/format-date-time.cjs.map +1 -1
- package/dist/cjs/components/format/format-number.cjs.map +1 -1
- package/dist/cjs/components/highlight/highlight.cjs.map +1 -1
- package/dist/cjs/components/hue-slider/hue-slider.cjs.map +1 -1
- package/dist/cjs/components/icon/icons/circle-euro-icon.cjs +14 -0
- package/dist/cjs/components/icon/icons/circle-euro-icon.cjs.map +1 -0
- package/dist/cjs/components/icon/icons/index.cjs +9 -3
- package/dist/cjs/components/icon/icons/index.cjs.map +1 -1
- package/dist/cjs/components/icon/icons/scan-box-icon.cjs +14 -0
- package/dist/cjs/components/icon/icons/scan-box-icon.cjs.map +1 -0
- package/dist/cjs/components/icon/icons/server-plus-icon.cjs +14 -0
- package/dist/cjs/components/icon/icons/server-plus-icon.cjs.map +1 -0
- package/dist/cjs/components/icon/index.cjs +6 -2
- package/dist/cjs/components/indicator/indicator.cjs.map +1 -1
- package/dist/cjs/components/infinite-scroll-area/infinite-scroll-area.cjs.map +1 -1
- package/dist/cjs/components/input/input-group.cjs.map +1 -1
- package/dist/cjs/components/link-box/link-box.cjs.map +1 -1
- package/dist/cjs/components/list/list.cjs.map +1 -1
- package/dist/cjs/components/loading/audio.cjs.map +1 -1
- package/dist/cjs/components/loading/background.cjs.map +1 -1
- package/dist/cjs/components/loading/circles.cjs.map +1 -1
- package/dist/cjs/components/loading/dots.cjs.map +1 -1
- package/dist/cjs/components/loading/grid.cjs.map +1 -1
- package/dist/cjs/components/loading/loading-provider.cjs.map +1 -1
- package/dist/cjs/components/loading/oval.cjs.map +1 -1
- package/dist/cjs/components/loading/page.cjs.map +1 -1
- package/dist/cjs/components/loading/puff.cjs.map +1 -1
- package/dist/cjs/components/loading/rings.cjs.map +1 -1
- package/dist/cjs/components/loading/screen.cjs.map +1 -1
- package/dist/cjs/components/loading/suspense.cjs.map +1 -1
- package/dist/cjs/components/menu/menu.cjs.map +1 -1
- package/dist/cjs/components/menu/use-menu.cjs.map +1 -1
- package/dist/cjs/components/modal/modal.cjs.map +1 -1
- package/dist/cjs/components/native-accordion/native-accordion.cjs.map +1 -1
- package/dist/cjs/components/native-popover/native-popover.cjs.map +1 -1
- package/dist/cjs/components/native-select/native-select.cjs.map +1 -1
- package/dist/cjs/components/native-select/use-native-select.cjs.map +1 -1
- package/dist/cjs/components/native-table/native-table.cjs.map +1 -1
- package/dist/cjs/components/notice/notice-provider.cjs.map +1 -1
- package/dist/cjs/components/notice/notice.cjs.map +1 -1
- package/dist/cjs/components/notice/use-notice.cjs.map +1 -1
- package/dist/cjs/components/number-input/number-input.cjs.map +1 -1
- package/dist/cjs/components/pagination/pagination.cjs.map +1 -1
- package/dist/cjs/components/password-input/password-input.cjs.map +1 -1
- package/dist/cjs/components/password-input/strength-meter.cjs.map +1 -1
- package/dist/cjs/components/picture/picture.cjs.map +1 -1
- package/dist/cjs/components/pin-input/pin-input.cjs.map +1 -1
- package/dist/cjs/components/popover/popover.cjs.map +1 -1
- package/dist/cjs/components/progress/progress.cjs.map +1 -1
- package/dist/cjs/components/qr-code/qr-code.cjs.map +1 -1
- package/dist/cjs/components/radio/radio-group.cjs.map +1 -1
- package/dist/cjs/components/radio/radio.cjs.map +1 -1
- package/dist/cjs/components/radio-card/radio-card-group.cjs.map +1 -1
- package/dist/cjs/components/radio-card/radio-card.cjs.map +1 -1
- package/dist/cjs/components/rating/rating.cjs.map +1 -1
- package/dist/cjs/components/reorder/reorder.cjs.map +1 -1
- package/dist/cjs/components/resizable/resizable.cjs.map +1 -1
- package/dist/cjs/components/ripple/ripple.cjs.map +1 -1
- package/dist/cjs/components/rotate/rotate.cjs.map +1 -1
- package/dist/cjs/components/saturation-slider/saturation-slider.cjs.map +1 -1
- package/dist/cjs/components/saturation-slider/use-saturation-slider.cjs.map +1 -1
- package/dist/cjs/components/segmented-control/segmented-control.cjs.map +1 -1
- package/dist/cjs/components/select/select.cjs.map +1 -1
- package/dist/cjs/components/select/use-select.cjs.map +1 -1
- package/dist/cjs/components/sidebar/sidebar.cjs.map +1 -1
- package/dist/cjs/components/skeleton/skeleton-text.cjs.map +1 -1
- package/dist/cjs/components/slide/slide.cjs.map +1 -1
- package/dist/cjs/components/slide-fade/slide-fade.cjs.map +1 -1
- package/dist/cjs/components/slider/slider.cjs.map +1 -1
- package/dist/cjs/components/slot/slot.cjs.map +1 -1
- package/dist/cjs/components/snacks/snacks.cjs.map +1 -1
- package/dist/cjs/components/stack/stack.cjs.map +1 -1
- package/dist/cjs/components/stack/z-stack.cjs.map +1 -1
- package/dist/cjs/components/stat/stat.cjs.map +1 -1
- package/dist/cjs/components/status/status.cjs.map +1 -1
- package/dist/cjs/components/steps/steps.cjs.map +1 -1
- package/dist/cjs/components/switch/switch.cjs.map +1 -1
- package/dist/cjs/components/table/table.cjs.map +1 -1
- package/dist/cjs/components/tabs/tabs.cjs.map +1 -1
- package/dist/cjs/components/tag/tag.cjs.map +1 -1
- package/dist/cjs/components/timeline/timeline.cjs.map +1 -1
- package/dist/cjs/components/tip/tip.cjs.map +1 -1
- package/dist/cjs/components/toggle/toggle-group.cjs.map +1 -1
- package/dist/cjs/components/tooltip/tooltip.cjs.map +1 -1
- package/dist/cjs/components/tree/tree.cjs.map +1 -1
- package/dist/cjs/components/tree/use-tree.cjs.map +1 -1
- package/dist/cjs/core/components/create-component.cjs.map +1 -1
- package/dist/cjs/core/system/breakpoint.cjs.map +1 -1
- package/dist/cjs/core/system/environment-provider.cjs.map +1 -1
- package/dist/cjs/core/system/styled.cjs.map +1 -1
- package/dist/cjs/core/system/theme-provider.cjs.map +1 -1
- package/dist/cjs/hooks/use-async-callback/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-breakpoint/use-breakpoint.cjs.map +1 -1
- package/dist/cjs/hooks/use-combobox/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-field-sizing/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-outside-click/index.cjs.map +1 -1
- package/dist/cjs/index.cjs +9 -3
- package/dist/cjs/providers/ui-provider/ui-provider.cjs.map +1 -1
- package/dist/cjs/utils/store.cjs.map +1 -1
- package/dist/esm/components/accordion/accordion.js.map +1 -1
- package/dist/esm/components/action-bar/action-bar.js.map +1 -1
- package/dist/esm/components/airy/airy.js.map +1 -1
- package/dist/esm/components/alert/alert.js.map +1 -1
- package/dist/esm/components/alpha-slider/alpha-slider.js.map +1 -1
- package/dist/esm/components/autocomplete/autocomplete.js.map +1 -1
- package/dist/esm/components/autocomplete/use-autocomplete.js.map +1 -1
- package/dist/esm/components/avatar/avatar-group.js.map +1 -1
- package/dist/esm/components/avatar/avatar.js.map +1 -1
- package/dist/esm/components/blockquote/blockquote.js.map +1 -1
- package/dist/esm/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/esm/components/button/button-group.js.map +1 -1
- package/dist/esm/components/button/button.js.map +1 -1
- package/dist/esm/components/calendar/calendar.js.map +1 -1
- package/dist/esm/components/calendar/use-calendar.js.map +1 -1
- package/dist/esm/components/carousel/carousel.js.map +1 -1
- package/dist/esm/components/chart/cartesian-chart.js.map +1 -1
- package/dist/esm/components/chart/chart.js.map +1 -1
- package/dist/esm/components/chart/polar-chart.js.map +1 -1
- package/dist/esm/components/checkbox/checkbox-group.js.map +1 -1
- package/dist/esm/components/checkbox/checkbox.js.map +1 -1
- package/dist/esm/components/checkbox-card/checkbox-card-group.js.map +1 -1
- package/dist/esm/components/checkbox-card/checkbox-card.js.map +1 -1
- package/dist/esm/components/circle-progress/circle-progress.js.map +1 -1
- package/dist/esm/components/collapse/collapse.js.map +1 -1
- package/dist/esm/components/color-picker/color-picker.js.map +1 -1
- package/dist/esm/components/color-selector/color-selector.js.map +1 -1
- package/dist/esm/components/color-swatch/color-swatch-group.js.map +1 -1
- package/dist/esm/components/color-swatch/color-swatch.js.map +1 -1
- package/dist/esm/components/data-list/data-list.js.map +1 -1
- package/dist/esm/components/date-picker/date-picker.js.map +1 -1
- package/dist/esm/components/date-picker/use-date-picker.js.map +1 -1
- package/dist/esm/components/drawer/drawer.js.map +1 -1
- package/dist/esm/components/dropzone/dropzone.js.map +1 -1
- package/dist/esm/components/editable/editable.js.map +1 -1
- package/dist/esm/components/empty-state/empty-state.js.map +1 -1
- package/dist/esm/components/fade/fade.js.map +1 -1
- package/dist/esm/components/fade-scale/fade-scale.js.map +1 -1
- package/dist/esm/components/field/field.js.map +1 -1
- package/dist/esm/components/fieldset/fieldset.js.map +1 -1
- package/dist/esm/components/file-input/file-input.js.map +1 -1
- package/dist/esm/components/flip/flip.js.map +1 -1
- package/dist/esm/components/focus-lock/focus-lock.js.map +1 -1
- package/dist/esm/components/form/form.js.map +1 -1
- package/dist/esm/components/format/format-byte.js.map +1 -1
- package/dist/esm/components/format/format-date-time.js.map +1 -1
- package/dist/esm/components/format/format-number.js.map +1 -1
- package/dist/esm/components/highlight/highlight.js.map +1 -1
- package/dist/esm/components/hue-slider/hue-slider.js.map +1 -1
- package/dist/esm/components/icon/icons/circle-euro-icon.js +14 -0
- package/dist/esm/components/icon/icons/circle-euro-icon.js.map +1 -0
- package/dist/esm/components/icon/icons/index.js +7 -3
- package/dist/esm/components/icon/icons/index.js.map +1 -1
- package/dist/esm/components/icon/icons/scan-box-icon.js +14 -0
- package/dist/esm/components/icon/icons/scan-box-icon.js.map +1 -0
- package/dist/esm/components/icon/icons/server-plus-icon.js +14 -0
- package/dist/esm/components/icon/icons/server-plus-icon.js.map +1 -0
- package/dist/esm/components/icon/index.js +4 -2
- package/dist/esm/components/indicator/indicator.js.map +1 -1
- package/dist/esm/components/infinite-scroll-area/infinite-scroll-area.js.map +1 -1
- package/dist/esm/components/input/input-group.js.map +1 -1
- package/dist/esm/components/link-box/link-box.js.map +1 -1
- package/dist/esm/components/list/list.js.map +1 -1
- package/dist/esm/components/loading/audio.js.map +1 -1
- package/dist/esm/components/loading/background.js.map +1 -1
- package/dist/esm/components/loading/circles.js.map +1 -1
- package/dist/esm/components/loading/dots.js.map +1 -1
- package/dist/esm/components/loading/grid.js.map +1 -1
- package/dist/esm/components/loading/loading-provider.js.map +1 -1
- package/dist/esm/components/loading/oval.js.map +1 -1
- package/dist/esm/components/loading/page.js.map +1 -1
- package/dist/esm/components/loading/puff.js.map +1 -1
- package/dist/esm/components/loading/rings.js.map +1 -1
- package/dist/esm/components/loading/screen.js.map +1 -1
- package/dist/esm/components/loading/suspense.js.map +1 -1
- package/dist/esm/components/menu/menu.js.map +1 -1
- package/dist/esm/components/menu/use-menu.js.map +1 -1
- package/dist/esm/components/modal/modal.js.map +1 -1
- package/dist/esm/components/native-accordion/native-accordion.js.map +1 -1
- package/dist/esm/components/native-popover/native-popover.js.map +1 -1
- package/dist/esm/components/native-select/native-select.js.map +1 -1
- package/dist/esm/components/native-select/use-native-select.js.map +1 -1
- package/dist/esm/components/native-table/native-table.js.map +1 -1
- package/dist/esm/components/notice/notice-provider.js.map +1 -1
- package/dist/esm/components/notice/notice.js.map +1 -1
- package/dist/esm/components/notice/use-notice.js.map +1 -1
- package/dist/esm/components/number-input/number-input.js.map +1 -1
- package/dist/esm/components/pagination/pagination.js.map +1 -1
- package/dist/esm/components/password-input/password-input.js.map +1 -1
- package/dist/esm/components/password-input/strength-meter.js.map +1 -1
- package/dist/esm/components/picture/picture.js.map +1 -1
- package/dist/esm/components/pin-input/pin-input.js.map +1 -1
- package/dist/esm/components/popover/popover.js.map +1 -1
- package/dist/esm/components/progress/progress.js.map +1 -1
- package/dist/esm/components/qr-code/qr-code.js.map +1 -1
- package/dist/esm/components/radio/radio-group.js.map +1 -1
- package/dist/esm/components/radio/radio.js.map +1 -1
- package/dist/esm/components/radio-card/radio-card-group.js.map +1 -1
- package/dist/esm/components/radio-card/radio-card.js.map +1 -1
- package/dist/esm/components/rating/rating.js.map +1 -1
- package/dist/esm/components/reorder/reorder.js.map +1 -1
- package/dist/esm/components/resizable/resizable.js.map +1 -1
- package/dist/esm/components/ripple/ripple.js.map +1 -1
- package/dist/esm/components/rotate/rotate.js.map +1 -1
- package/dist/esm/components/saturation-slider/saturation-slider.js.map +1 -1
- package/dist/esm/components/saturation-slider/use-saturation-slider.js.map +1 -1
- package/dist/esm/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/esm/components/select/select.js.map +1 -1
- package/dist/esm/components/select/use-select.js.map +1 -1
- package/dist/esm/components/sidebar/sidebar.js.map +1 -1
- package/dist/esm/components/skeleton/skeleton-text.js.map +1 -1
- package/dist/esm/components/slide/slide.js.map +1 -1
- package/dist/esm/components/slide-fade/slide-fade.js.map +1 -1
- package/dist/esm/components/slider/slider.js.map +1 -1
- package/dist/esm/components/slot/slot.js.map +1 -1
- package/dist/esm/components/snacks/snacks.js.map +1 -1
- package/dist/esm/components/stack/stack.js.map +1 -1
- package/dist/esm/components/stack/z-stack.js.map +1 -1
- package/dist/esm/components/stat/stat.js.map +1 -1
- package/dist/esm/components/status/status.js.map +1 -1
- package/dist/esm/components/steps/steps.js.map +1 -1
- package/dist/esm/components/switch/switch.js.map +1 -1
- package/dist/esm/components/table/table.js.map +1 -1
- package/dist/esm/components/tabs/tabs.js.map +1 -1
- package/dist/esm/components/tag/tag.js.map +1 -1
- package/dist/esm/components/timeline/timeline.js.map +1 -1
- package/dist/esm/components/tip/tip.js.map +1 -1
- package/dist/esm/components/toggle/toggle-group.js.map +1 -1
- package/dist/esm/components/tooltip/tooltip.js.map +1 -1
- package/dist/esm/components/tree/tree.js.map +1 -1
- package/dist/esm/components/tree/use-tree.js.map +1 -1
- package/dist/esm/core/components/create-component.js.map +1 -1
- package/dist/esm/core/system/breakpoint.js.map +1 -1
- package/dist/esm/core/system/environment-provider.js.map +1 -1
- package/dist/esm/core/system/styled.js.map +1 -1
- package/dist/esm/core/system/theme-provider.js.map +1 -1
- package/dist/esm/hooks/use-breakpoint/use-breakpoint.js.map +1 -1
- package/dist/esm/hooks/use-combobox/index.js.map +1 -1
- package/dist/esm/hooks/use-field-sizing/index.js.map +1 -1
- package/dist/esm/hooks/use-outside-click/index.js.map +1 -1
- package/dist/esm/index.js +7 -3
- package/dist/esm/providers/ui-provider/ui-provider.js.map +1 -1
- package/dist/esm/utils/store.js.map +1 -1
- package/dist/types/components/icon/icons/circle-euro-icon.d.ts +13 -0
- package/dist/types/components/icon/icons/index.d.ts +5 -3
- package/dist/types/components/icon/icons/index.types.d.ts +1 -1
- package/dist/types/components/icon/icons/scan-box-icon.d.ts +13 -0
- package/dist/types/components/icon/icons/server-plus-icon.d.ts +13 -0
- package/dist/types/components/icon/index.d.ts +4 -2
- package/dist/types/components/menu/use-menu.d.ts +1 -1
- package/dist/types/components/number-input/number-input.style.d.ts +1 -1
- package/dist/types/index.d.ts +5 -3
- package/package.json +5 -5
- package/dist/cjs/components/icon/icons/circle-euro-sign-icon.cjs +0 -14
- package/dist/cjs/components/icon/icons/circle-euro-sign-icon.cjs.map +0 -1
- package/dist/esm/components/icon/icons/circle-euro-sign-icon.js +0 -14
- package/dist/esm/components/icon/icons/circle-euro-sign-icon.js.map +0 -1
- package/dist/types/components/icon/icons/circle-euro-sign-icon.d.ts +0 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-picker.js","names":["Popover.Root","InputGroup.Root","InputGroup.Element","Popover.Trigger","ColorSelector.Root","Popover.Content"],"sources":["../../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { ColorPickerStyle } from \"./color-picker.style\"\nimport type {\n UseColorPickerProps,\n UseColorPickerReturn,\n} from \"./use-color-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { ColorSelector } from \"../color-selector\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { useGroupItemProps } from \"../group\"\nimport { PipetteIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { colorPickerStyle } from \"./color-picker.style\"\nimport { useColorPicker } from \"./use-color-picker\"\n\ninterface ComponentContext\n extends\n Pick<ColorPickerProps, \"inputProps\">,\n Pick<\n UseColorPickerReturn,\n \"getEyeDropperProps\" | \"getInputProps\" | \"value\"\n > {}\n\nexport interface ColorPickerProps\n extends\n Omit<HTMLStyledProps, \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\">,\n Merge<UseColorPickerProps, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n Pick<\n ColorSelector.RootProps,\n | \"alphaSliderProps\"\n | \"colorSwatches\"\n | \"colorSwatchGroupColumns\"\n | \"colorSwatchGroupLabel\"\n | \"colorSwatchGroupLabelProps\"\n | \"colorSwatchGroupProps\"\n | \"colorSwatchItemProps\"\n | \"hueSliderProps\"\n | \"saturationSliderProps\"\n >,\n ThemeProps<ColorPickerStyle>,\n UseInputBorderProps {\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end-start'\n */\n placement?: Popover.RootProps[\"placement\"]\n /**\n * If `true`, the color swatch component will be displayed.\n *\n * @default true\n */\n withColorSwatch?: boolean\n /**\n * If `true`, the eye dropper component will be displayed.\n *\n * @default true\n */\n withEyeDropper?: boolean\n /**\n * Props for the color swatch component.\n */\n colorSwatchProps?: ColorPickerColorSwatchProps\n /**\n * Props for content element.\n */\n contentProps?: ColorPickerContentProps\n /**\n * The props for the input element.\n */\n elementProps?: InputGroup.ElementProps\n /**\n * The props for the end element.\n */\n endElementProps?: InputGroup.ElementProps\n /**\n * Props for the eye dropper component.\n */\n eyeDropperProps?: ColorPickerEyeDropperProps\n /**\n * The props for the field component.\n */\n fieldProps?: ColorPickerFieldProps\n /**\n * The props for the input element.\n */\n inputProps?: HTMLStyledProps<\"input\">\n /**\n * Props for root element.\n */\n rootProps?: InputGroup.RootProps\n /**\n * Props for the selector component.\n */\n selectorProps?: ColorSelector.RootProps\n /**\n * The props for the start element.\n */\n startElementProps?: InputGroup.ElementProps\n}\n\nconst {\n ComponentContext,\n PropsContext: ColorPickerPropsContext,\n useComponentContext,\n usePropsContext: useColorPickerPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ColorPickerProps, ColorPickerStyle, ComponentContext>(\n \"color-picker\",\n colorPickerStyle,\n)\n\nexport { ColorPickerPropsContext, useColorPickerPropsContext }\n\n/**\n * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.\n *\n * @see https://yamada-ui.com/docs/components/color-picker\n */\nexport const ColorPicker = withProvider<\"input\", ColorPickerProps, \"size\">(\n (props) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n size,\n animationScheme = \"block-start\",\n colorSwatches,\n colorSwatchGroupColumns,\n colorSwatchGroupLabel,\n duration,\n errorBorderColor,\n focusBorderColor,\n withColorSwatch = true,\n withEyeDropper = true,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n colorSwatchProps,\n contentProps,\n elementProps,\n endElementProps,\n eyeDropperProps,\n fieldProps,\n hueSliderProps,\n inputProps,\n rootProps,\n saturationSliderProps,\n selectorProps,\n startElementProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const {\n value,\n getContentProps,\n getEyeDropperProps,\n getFieldProps,\n getInputProps,\n getRootProps,\n getSelectorProps,\n popoverProps,\n } = useColorPicker({ ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const componentContext = useMemo(\n () => ({ value, getEyeDropperProps, getInputProps, inputProps }),\n [getEyeDropperProps, getInputProps, inputProps, value],\n )\n\n return (\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <InputGroup.Root\n {...mergeProps(\n { className, css, colorScheme },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n {withColorSwatch ? (\n <InputGroup.Element\n {...mergeProps(elementProps, startElementProps)()}\n >\n <ColorPickerColorSwatch {...colorSwatchProps} />\n </InputGroup.Element>\n ) : null}\n\n <Popover.Trigger>\n <ColorPickerField\n {...getFieldProps({ ...varProps, ...fieldProps })}\n />\n </Popover.Trigger>\n\n {withEyeDropper ? (\n <InputGroup.Element\n {...mergeProps(\n { clickable: true },\n elementProps,\n endElementProps,\n )()}\n >\n <ColorPickerEyeDropper\n {...getEyeDropperProps(eyeDropperProps)}\n />\n </InputGroup.Element>\n ) : null}\n </InputGroup.Root>\n\n <ColorPickerContent\n {...cast<ColorPickerContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n <ColorSelector.Root\n size={size}\n {...getSelectorProps({\n colorSwatches,\n colorSwatchGroupColumns,\n colorSwatchGroupLabel,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n ...selectorProps,\n })}\n />\n </ColorPickerContent>\n </Popover.Root>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\"] },\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface ColorPickerFieldProps extends HTMLStyledProps {}\n\nconst ColorPickerField = withContext<\"div\", ColorPickerFieldProps>(\n \"div\",\n \"field\",\n)({ \"data-group-propagate\": \"\" }, (props) => {\n const { getInputProps, inputProps } = useComponentContext()\n\n return {\n children: <ColorPickerInput {...getInputProps(inputProps)} />,\n ...props,\n }\n})\n\ninterface ColorPickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst ColorPickerInput = withContext<\"input\", ColorPickerInputProps>(\n \"input\",\n \"input\",\n)()\n\ninterface ColorPickerColorSwatchProps extends ColorSwatchProps {}\n\nconst ColorPickerColorSwatch = withContext<\"div\", ColorPickerColorSwatchProps>(\n ColorSwatch,\n \"colorSwatch\",\n)(undefined, (props) => {\n const { value } = useComponentContext()\n\n return { variant: \"circle\", color: value, ...props }\n})\n\ninterface ColorPickerEyeDropperProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst ColorPickerEyeDropper = withContext<\"div\", ColorPickerEyeDropperProps>(\n \"div\",\n \"eyeDropper\",\n)(undefined, ({ children, icon, ...rest }) => {\n const { getEyeDropperProps } = useComponentContext()\n\n return getEyeDropperProps({\n children: icon || children || <PipetteIcon />,\n ...rest,\n })\n})\n\ninterface ColorPickerContentProps extends Popover.ContentProps {}\n\nconst ColorPickerContent = withContext<\"div\", ColorPickerContentProps>(\n Popover.Content,\n \"content\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgHA,MAAM,EACJ,kBACA,cAAc,yBACd,qBACA,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,UAAU;CACT,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,MACA,kBAAkB,eAClB,eACA,yBACA,uBACA,UACA,kBACA,kBACA,kBAAkB,MAClB,iBAAiB,MACjB,kBACA,4BACA,uBACA,sBACA,kBACA,cACA,cACA,iBACA,iBACA,YACA,gBACA,YACA,WACA,uBACA,eACA,mBACA,GAAG,UAEH,kBAAkB,KAAK;CAC3B,MAAM,oBAAoB,qBAAqB,IAAI;CACnD,MAAM,EACJ,OACA,iBACA,oBACA,eACA,eACA,cACA,kBACA,iBACE,eAAe;EAAE,GAAG;EAAM,GAAG;CAAkB,CAAC;CACpD,MAAM,qBAAqB,eAClB;EACL;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAiB;EAAU;CAAY,CAC1C;CACA,MAAM,WAAW,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,mBAAmB,eAChB;EAAE;EAAO;EAAoB;EAAe;CAAW,IAC9D;EAAC;EAAoB;EAAe;EAAY;CAAK,CACvD;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,qBAACA,aAAD;GAAc,GAAI;aAAlB,CACE,qBAACC,gBAAD;IACE,GAAI,WACF;KAAE;KAAW;KAAK;IAAY,GAC9B,aAAa,cAAc,GAC3B,SACF,CAAC,CAAC;cALJ;KAOG,kBACC,oBAACC,cAAD;MACE,GAAI,WAAW,cAAc,iBAAiB,CAAC,CAAC;gBAEhD,oBAAC,wBAAD,EAAwB,GAAI,iBAAmB,CAAA;KAC7B,CAAA,IAClB;KAEJ,oBAACC,gBAAD,EAAA,UACE,oBAAC,kBAAD,EACE,GAAI,cAAc;MAAE,GAAG;MAAU,GAAG;KAAW,CAAC,EACjD,CAAA,EACc,CAAA;KAEhB,iBACC,oBAACD,cAAD;MACE,GAAI,WACF,EAAE,WAAW,KAAK,GAClB,cACA,eACF,CAAC,CAAC;gBAEF,oBAAC,uBAAD,EACE,GAAI,mBAAmB,eAAe,EACvC,CAAA;KACiB,CAAA,IAClB;IACW;OAEjB,oBAAC,oBAAD;IACE,IAAA,GAAA,cAAA,KAAA,CACE,iBAAA,GAAA,cAAA,KAAA,CAAgC,YAAY,CAAC,CAC/C;cAEA,oBAACE,mBAAD;KACQ;KACN,GAAI,iBAAiB;MACnB;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA,GAAG;KACL,CAAC;IACF,CAAA;GACiB,CAAA,CACR;;CACE,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,MAAM,EAAE,CAC5B,CAAC,EAAE,UAAU;CAGX,OAAO,WAFS,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,mBAAmB,YACvB,OACA,OACF,CAAC,CAAC,EAAE,wBAAwB,GAAG,IAAI,UAAU;CAC3C,MAAM,EAAE,eAAe,eAAe,oBAAoB;CAE1D,OAAO;EACL,UAAU,oBAAC,kBAAD,EAAkB,GAAI,cAAc,UAAU,EAAI,CAAA;EAC5D,GAAG;CACL;AACF,CAAC;AAID,MAAM,mBAAmB,YACvB,SACA,OACF,CAAC,CAAC;AAIF,MAAM,yBAAyB,YAC7B,aACA,aACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO;EAAE,SAAS;EAAU,OAAO;EAAO,GAAG;CAAM;AACrD,CAAC;AAMD,MAAM,wBAAwB,YAC5B,OACA,YACF,CAAC,CAAC,KAAA,IAAY,EAAE,UAAU,MAAM,GAAG,WAAW;CAC5C,MAAM,EAAE,uBAAuB,oBAAoB;CAEnD,OAAO,mBAAmB;EACxB,UAAU,QAAQ,YAAY,oBAAC,aAAD,CAAc,CAAA;EAC5C,GAAG;CACL,CAAC;AACH,CAAC;AAID,MAAM,qBAAqB,YACzBC,gBACA,SACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"color-picker.js","names":["Popover.Root","InputGroup.Root","InputGroup.Element","Popover.Trigger","ColorSelector.Root","Popover.Content"],"sources":["../../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { ColorPickerStyle } from \"./color-picker.style\"\nimport type {\n UseColorPickerProps,\n UseColorPickerReturn,\n} from \"./use-color-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { ColorSelector } from \"../color-selector\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { useGroupItemProps } from \"../group\"\nimport { PipetteIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { colorPickerStyle } from \"./color-picker.style\"\nimport { useColorPicker } from \"./use-color-picker\"\n\ninterface ComponentContext\n extends\n Pick<ColorPickerProps, \"inputProps\">,\n Pick<\n UseColorPickerReturn,\n \"getEyeDropperProps\" | \"getInputProps\" | \"value\"\n > {}\n\nexport interface ColorPickerProps\n extends\n Omit<HTMLStyledProps, \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\">,\n Merge<UseColorPickerProps, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n Pick<\n ColorSelector.RootProps,\n | \"alphaSliderProps\"\n | \"colorSwatches\"\n | \"colorSwatchGroupColumns\"\n | \"colorSwatchGroupLabel\"\n | \"colorSwatchGroupLabelProps\"\n | \"colorSwatchGroupProps\"\n | \"colorSwatchItemProps\"\n | \"hueSliderProps\"\n | \"saturationSliderProps\"\n >,\n ThemeProps<ColorPickerStyle>,\n UseInputBorderProps {\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end-start'\n */\n placement?: Popover.RootProps[\"placement\"]\n /**\n * If `true`, the color swatch component will be displayed.\n *\n * @default true\n */\n withColorSwatch?: boolean\n /**\n * If `true`, the eye dropper component will be displayed.\n *\n * @default true\n */\n withEyeDropper?: boolean\n /**\n * Props for the color swatch component.\n */\n colorSwatchProps?: ColorPickerColorSwatchProps\n /**\n * Props for content element.\n */\n contentProps?: ColorPickerContentProps\n /**\n * The props for the input element.\n */\n elementProps?: InputGroup.ElementProps\n /**\n * The props for the end element.\n */\n endElementProps?: InputGroup.ElementProps\n /**\n * Props for the eye dropper component.\n */\n eyeDropperProps?: ColorPickerEyeDropperProps\n /**\n * The props for the field component.\n */\n fieldProps?: ColorPickerFieldProps\n /**\n * The props for the input element.\n */\n inputProps?: HTMLStyledProps<\"input\">\n /**\n * Props for root element.\n */\n rootProps?: InputGroup.RootProps\n /**\n * Props for the selector component.\n */\n selectorProps?: ColorSelector.RootProps\n /**\n * The props for the start element.\n */\n startElementProps?: InputGroup.ElementProps\n}\n\nconst {\n ComponentContext,\n PropsContext: ColorPickerPropsContext,\n useComponentContext,\n usePropsContext: useColorPickerPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ColorPickerProps, ColorPickerStyle, ComponentContext>(\n \"color-picker\",\n colorPickerStyle,\n)\n\nexport { ColorPickerPropsContext, useColorPickerPropsContext }\n\n/**\n * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.\n *\n * @see https://yamada-ui.com/docs/components/color-picker\n */\nexport const ColorPicker = withProvider<\"input\", ColorPickerProps, \"size\">(\n (props) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n size,\n animationScheme = \"block-start\",\n colorSwatches,\n colorSwatchGroupColumns,\n colorSwatchGroupLabel,\n duration,\n errorBorderColor,\n focusBorderColor,\n withColorSwatch = true,\n withEyeDropper = true,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n colorSwatchProps,\n contentProps,\n elementProps,\n endElementProps,\n eyeDropperProps,\n fieldProps,\n hueSliderProps,\n inputProps,\n rootProps,\n saturationSliderProps,\n selectorProps,\n startElementProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const {\n value,\n getContentProps,\n getEyeDropperProps,\n getFieldProps,\n getInputProps,\n getRootProps,\n getSelectorProps,\n popoverProps,\n } = useColorPicker({ ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const componentContext = useMemo(\n () => ({ value, getEyeDropperProps, getInputProps, inputProps }),\n [getEyeDropperProps, getInputProps, inputProps, value],\n )\n\n return (\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <InputGroup.Root\n {...mergeProps(\n { className, css, colorScheme },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n {withColorSwatch ? (\n <InputGroup.Element\n {...mergeProps(elementProps, startElementProps)()}\n >\n <ColorPickerColorSwatch {...colorSwatchProps} />\n </InputGroup.Element>\n ) : null}\n\n <Popover.Trigger>\n <ColorPickerField\n {...getFieldProps({ ...varProps, ...fieldProps })}\n />\n </Popover.Trigger>\n\n {withEyeDropper ? (\n <InputGroup.Element\n {...mergeProps(\n { clickable: true },\n elementProps,\n endElementProps,\n )()}\n >\n <ColorPickerEyeDropper\n {...getEyeDropperProps(eyeDropperProps)}\n />\n </InputGroup.Element>\n ) : null}\n </InputGroup.Root>\n\n <ColorPickerContent\n {...cast<ColorPickerContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n <ColorSelector.Root\n size={size}\n {...getSelectorProps({\n colorSwatches,\n colorSwatchGroupColumns,\n colorSwatchGroupLabel,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n ...selectorProps,\n })}\n />\n </ColorPickerContent>\n </Popover.Root>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\"] },\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface ColorPickerFieldProps extends HTMLStyledProps {}\n\nconst ColorPickerField = withContext<\"div\", ColorPickerFieldProps>(\n \"div\",\n \"field\",\n)({ \"data-group-propagate\": \"\" }, (props) => {\n const { getInputProps, inputProps } = useComponentContext()\n\n return {\n children: <ColorPickerInput {...getInputProps(inputProps)} />,\n ...props,\n }\n})\n\ninterface ColorPickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst ColorPickerInput = withContext<\"input\", ColorPickerInputProps>(\n \"input\",\n \"input\",\n)()\n\ninterface ColorPickerColorSwatchProps extends ColorSwatchProps {}\n\nconst ColorPickerColorSwatch = withContext<\"div\", ColorPickerColorSwatchProps>(\n ColorSwatch,\n \"colorSwatch\",\n)(undefined, (props) => {\n const { value } = useComponentContext()\n\n return { variant: \"circle\", color: value, ...props }\n})\n\ninterface ColorPickerEyeDropperProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst ColorPickerEyeDropper = withContext<\"div\", ColorPickerEyeDropperProps>(\n \"div\",\n \"eyeDropper\",\n)(undefined, ({ children, icon, ...rest }) => {\n const { getEyeDropperProps } = useComponentContext()\n\n return getEyeDropperProps({\n children: icon || children || <PipetteIcon />,\n ...rest,\n })\n})\n\ninterface ColorPickerContentProps extends Popover.ContentProps {}\n\nconst ColorPickerContent = withContext<\"div\", ColorPickerContentProps>(\n Popover.Content,\n \"content\",\n)()\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-selector.js","names":["SaturationSlider.Root","HueSlider.Root","AlphaSlider.Root"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n UseColorSelectorProps,\n UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n extends\n Pick<\n ColorSelectorRootProps,\n | \"alphaSliderProps\"\n | \"colorSwatches\"\n | \"colorSwatchGroupLabelProps\"\n | \"colorSwatchGroupProps\"\n | \"colorSwatchItemProps\"\n | \"hueSliderProps\"\n | \"saturationSliderProps\"\n | \"shape\"\n | \"size\"\n >,\n Pick<\n UseColorSelectorReturn,\n | \"alpha\"\n | \"getAlphaSliderProps\"\n | \"getColorSwatchGroupLabelProps\"\n | \"getColorSwatchGroupProps\"\n | \"getColorSwatchItemProps\"\n | \"getEyeDropperProps\"\n | \"getHueSliderProps\"\n | \"getSaturationSliderProps\"\n > {}\n\nexport interface ColorSelectorRootProps\n extends\n Merge<HTMLStyledProps, UseColorSelectorProps>,\n ThemeProps<ColorSelectorStyle> {\n /**\n * An array of colors in one of the supported formats.\n * Used to render swatches list below the color selector.\n */\n colorSwatches?: string[]\n /**\n * The number of columns in the color swatch group.\n *\n * @default 8\n */\n colorSwatchGroupColumns?: StyleValue<number>\n /**\n * The label of the color swatch group.\n */\n colorSwatchGroupLabel?: ReactNode\n /**\n * If `true`, the alpha slider will be displayed.\n *\n * @default false\n */\n withAlpha?: boolean\n /**\n * Props for the alpha slider.\n */\n alphaSliderProps?: ColorSelectorAlphaSliderProps\n /**\n * Props for the color swatch group label.\n */\n colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n /**\n * Props for the color swatch group.\n */\n colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n /**\n * Props for the color swatch item.\n */\n colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n /**\n * Props for the hue slider.\n */\n hueSliderProps?: ColorSelectorHueSliderProps\n /**\n * Props for the saturation slider.\n */\n saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n ComponentContext,\n PropsContext: ColorSelectorPropsContext,\n useComponentContext,\n usePropsContext: useColorSelectorPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n ColorSelectorRootProps,\n ColorSelectorStyle,\n ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/**\n * `ColorSelector` is a component used by the user to select a color.\n *\n * @see https://yamada-ui.com/docs/components/color-selector\n */\nexport const ColorSelectorRoot = withProvider<\n \"div\",\n ColorSelectorRootProps,\n \"shape\" | \"size\"\n>(\n ({\n size,\n children,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n withAlpha,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n ...rest\n }) => {\n const {\n alpha,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n } = useColorSelector(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n <ColorSelectorSaturationSlider />\n <ColorSelectorHueSlider />\n <ColorSelectorAlphaSlider />\n\n {colorSwatchGroupLabel ? (\n <ColorSelectorColorSwatchGroupLabel>\n {colorSwatchGroupLabel}\n </ColorSelectorColorSwatchGroupLabel>\n ) : null}\n {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n </>\n )\n }, [children, colorSwatchGroupLabel, colorSwatches])\n const context = useMemo(\n () => ({\n size,\n alpha: withAlpha ?? alpha,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n hueSliderProps,\n saturationSliderProps,\n }),\n [\n size,\n withAlpha,\n alpha,\n shape,\n colorSwatches,\n colorSwatchGroupLabel,\n alphaSliderProps,\n getAlphaSliderProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n \"input\",\n ColorSelectorSaturationSliderProps\n>((props) => {\n const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n useComponentContext()\n\n return (\n <SaturationSlider.Root\n size={size}\n shape={shape}\n {...getSaturationSliderProps(mergeProps(saturationSliderProps, props)())}\n />\n )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n \"input\",\n ColorSelectorHueSliderProps\n>((props) => {\n const { size, shape, getHueSliderProps, hueSliderProps } =\n useComponentContext()\n\n return (\n <HueSlider.Root\n size={size}\n shape={shape}\n {...getHueSliderProps(mergeProps(hueSliderProps, props)())}\n />\n )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n \"input\",\n ColorSelectorAlphaSliderProps\n>((props) => {\n const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n useComponentContext()\n\n if (!alpha) return null\n\n return (\n <AlphaSlider.Root\n size={size}\n shape={shape}\n {...getAlphaSliderProps(mergeProps(alphaSliderProps, props)())}\n />\n )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n /**\n * The icon to display in the eye dropper.\n */\n icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n \"div\",\n ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n const { getEyeDropperProps } = useComponentContext()\n\n return getEyeDropperProps({\n children: icon || children || <PipetteIcon />,\n ...rest,\n })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n \"span\",\n ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n useComponentContext()\n\n return getColorSwatchGroupLabelProps(\n mergeProps(colorSwatchGroupLabelProps, props)(),\n )\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n \"div\",\n ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n useComponentContext()\n const computedChildren =\n children ??\n colorSwatchGroupProps?.children ??\n colorSwatches?.map((value, index) => (\n <ColorSelectorColorSwatchItem key={index} value={value} />\n ))\n\n return getColorSwatchGroupProps(\n mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })(),\n )\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n ColorSwatchProps,\n \"color\"\n> {\n /**\n * The value of the color swatch.\n */\n value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n \"div\",\n ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n const { colorSwatchItemProps, getColorSwatchItemProps } =\n useComponentContext()\n\n return getColorSwatchItemProps(mergeProps(colorSwatchItemProps, props)())\n})\n"],"mappings":";;;;;;;;;;;;;;;AAkGA,MAAM,EACJ,kBACA,cAAc,2BACd,qBACA,iBAAiB,8BACjB,aACA,iBACE,oBAIF,kBAAkB,kBAAkB;;;;;;AAStC,MAAa,oBAAoB,cAK9B,EACC,MACA,UACA,eACA,uBACA,OACA,WACA,kBACA,4BACA,uBACA,sBACA,gBACA,uBACA,GAAG,WACC;CACJ,MAAM,EACJ,OACA,qBACA,+BACA,0BACA,yBACA,oBACA,mBACA,cACA,6BACE,iBAAiB,IAAI;CACzB,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,qBAAA,YAAA,EAAA,UAAA;GACE,oBAAC,+BAAD,CAAgC,CAAA;GAChC,oBAAC,wBAAD,CAAyB,CAAA;GACzB,oBAAC,0BAAD,CAA2B,CAAA;GAE1B,wBACC,oBAAC,oCAAD,EAAA,UACG,sBACiC,CAAA,IAClC;GACH,gBAAgB,oBAAC,+BAAD,CAAgC,CAAA,IAAI;EACrD,EAAA,CAAA;CAEN,GAAG;EAAC;EAAU;EAAuB;CAAa,CAAC;CACnD,MAAM,UAAU,eACP;EACL;EACA,OAAO,aAAa;EACpB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,oBAAC,OAAO,KAAR;GAAY,GAAI,aAAa;aAAI;EAA6B,CAAA;CAC9C,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,QAAQ,OAAO,EAAE,CACrC,CAAC,CAAC,KAAA,IAAY,EAAE,0BAA0B,GAAG,GAAG,YAAY;CAC1D,gCAAgC,QAAQ,uBAAuB;CAC/D,GAAG;AACL,EAAE;AAKF,MAAa,gCAAgC,aAG1C,UAAU;CACX,MAAM,EAAE,MAAM,OAAO,0BAA0B,0BAC7C,oBAAoB;CAEtB,OACE,oBAACA,sBAAD;EACQ;EACC;EACP,GAAI,yBAAyB,WAAW,uBAAuB,KAAK,CAAC,CAAC,CAAC;CACxE,CAAA;AAEL,GAAG,kBAAkB,CAAC,CAAC;AAIvB,MAAa,yBAAyB,aAGnC,UAAU;CACX,MAAM,EAAE,MAAM,OAAO,mBAAmB,mBACtC,oBAAoB;CAEtB,OACE,oBAACC,eAAD;EACQ;EACC;EACP,GAAI,kBAAkB,WAAW,gBAAgB,KAAK,CAAC,CAAC,CAAC;CAC1D,CAAA;AAEL,GAAG,WAAW,CAAC,CAAC;AAIhB,MAAa,2BAA2B,aAGrC,UAAU;CACX,MAAM,EAAE,MAAM,OAAO,OAAO,kBAAkB,wBAC5C,oBAAoB;CAEtB,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAACC,iBAAD;EACQ;EACC;EACP,GAAI,oBAAoB,WAAW,kBAAkB,KAAK,CAAC,CAAC,CAAC;CAC9D,CAAA;AAEL,GAAG,aAAa,CAAC,CAAC;AASlB,MAAa,0BAA0B,YAGrC,OAAO,YAAY,CAAC,CAAC,KAAA,IAAY,EAAE,UAAU,MAAM,GAAG,WAAW;CACjE,MAAM,EAAE,uBAAuB,oBAAoB;CAEnD,OAAO,mBAAmB;EACxB,UAAU,QAAQ,YAAY,oBAAC,aAAD,CAAc,CAAA;EAC5C,GAAG;CACL,CAAC;AACH,CAAC;AAID,MAAa,qCAAqC,YAGhD,QAAQ,uBAAuB,CAAC,CAAC,KAAA,IAAY,UAAU;CACvD,MAAM,EAAE,4BAA4B,kCAClC,oBAAoB;CAEtB,OAAO,8BACL,WAAW,4BAA4B,KAAK,CAAC,CAAC,CAChD;AACF,CAAC;AAID,MAAa,gCAAgC,YAG3C,OAAO,kBAAkB,CAAC,CAAC,KAAA,IAAY,EAAE,UAAU,GAAG,WAAW;CACjE,MAAM,EAAE,eAAe,uBAAuB,6BAC5C,oBAAoB;CAQtB,OAAO,yBACL,WAAW,uBAAuB,MAAM,EAAE,UAP1C,YACA,uBAAuB,YACvB,eAAe,KAAK,OAAO,UACzB,oBAAC,8BAAD,EAAiD,MAAQ,GAAtB,KAAsB,CAC1D,EAGoE,CAAC,CAAC,CAAC,CAC1E;AACF,CAAC;AAYD,MAAa,+BAA+B,YAG1C,aAAa,iBAAiB,CAAC,CAAC,KAAA,IAAY,UAAU;CACtD,MAAM,EAAE,sBAAsB,4BAC5B,oBAAoB;CAEtB,OAAO,wBAAwB,WAAW,sBAAsB,KAAK,CAAC,CAAC,CAAC;AAC1E,CAAC"}
|
|
1
|
+
{"version":3,"file":"color-selector.js","names":["SaturationSlider.Root","HueSlider.Root","AlphaSlider.Root"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n UseColorSelectorProps,\n UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n extends\n Pick<\n ColorSelectorRootProps,\n | \"alphaSliderProps\"\n | \"colorSwatches\"\n | \"colorSwatchGroupLabelProps\"\n | \"colorSwatchGroupProps\"\n | \"colorSwatchItemProps\"\n | \"hueSliderProps\"\n | \"saturationSliderProps\"\n | \"shape\"\n | \"size\"\n >,\n Pick<\n UseColorSelectorReturn,\n | \"alpha\"\n | \"getAlphaSliderProps\"\n | \"getColorSwatchGroupLabelProps\"\n | \"getColorSwatchGroupProps\"\n | \"getColorSwatchItemProps\"\n | \"getEyeDropperProps\"\n | \"getHueSliderProps\"\n | \"getSaturationSliderProps\"\n > {}\n\nexport interface ColorSelectorRootProps\n extends\n Merge<HTMLStyledProps, UseColorSelectorProps>,\n ThemeProps<ColorSelectorStyle> {\n /**\n * An array of colors in one of the supported formats.\n * Used to render swatches list below the color selector.\n */\n colorSwatches?: string[]\n /**\n * The number of columns in the color swatch group.\n *\n * @default 8\n */\n colorSwatchGroupColumns?: StyleValue<number>\n /**\n * The label of the color swatch group.\n */\n colorSwatchGroupLabel?: ReactNode\n /**\n * If `true`, the alpha slider will be displayed.\n *\n * @default false\n */\n withAlpha?: boolean\n /**\n * Props for the alpha slider.\n */\n alphaSliderProps?: ColorSelectorAlphaSliderProps\n /**\n * Props for the color swatch group label.\n */\n colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n /**\n * Props for the color swatch group.\n */\n colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n /**\n * Props for the color swatch item.\n */\n colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n /**\n * Props for the hue slider.\n */\n hueSliderProps?: ColorSelectorHueSliderProps\n /**\n * Props for the saturation slider.\n */\n saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n ComponentContext,\n PropsContext: ColorSelectorPropsContext,\n useComponentContext,\n usePropsContext: useColorSelectorPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n ColorSelectorRootProps,\n ColorSelectorStyle,\n ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/**\n * `ColorSelector` is a component used by the user to select a color.\n *\n * @see https://yamada-ui.com/docs/components/color-selector\n */\nexport const ColorSelectorRoot = withProvider<\n \"div\",\n ColorSelectorRootProps,\n \"shape\" | \"size\"\n>(\n ({\n size,\n children,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n withAlpha,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n ...rest\n }) => {\n const {\n alpha,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getRootProps,\n getSaturationSliderProps,\n } = useColorSelector(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n <ColorSelectorSaturationSlider />\n <ColorSelectorHueSlider />\n <ColorSelectorAlphaSlider />\n\n {colorSwatchGroupLabel ? (\n <ColorSelectorColorSwatchGroupLabel>\n {colorSwatchGroupLabel}\n </ColorSelectorColorSwatchGroupLabel>\n ) : null}\n {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n </>\n )\n }, [children, colorSwatchGroupLabel, colorSwatches])\n const context = useMemo(\n () => ({\n size,\n alpha: withAlpha ?? alpha,\n colorSwatches,\n colorSwatchGroupLabel,\n shape,\n alphaSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n getAlphaSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n hueSliderProps,\n saturationSliderProps,\n }),\n [\n size,\n withAlpha,\n alpha,\n shape,\n colorSwatches,\n colorSwatchGroupLabel,\n alphaSliderProps,\n getAlphaSliderProps,\n getEyeDropperProps,\n getHueSliderProps,\n getSaturationSliderProps,\n getColorSwatchGroupLabelProps,\n getColorSwatchGroupProps,\n getColorSwatchItemProps,\n hueSliderProps,\n saturationSliderProps,\n colorSwatchGroupLabelProps,\n colorSwatchGroupProps,\n colorSwatchItemProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n \"input\",\n ColorSelectorSaturationSliderProps\n>((props) => {\n const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n useComponentContext()\n\n return (\n <SaturationSlider.Root\n size={size}\n shape={shape}\n {...getSaturationSliderProps(mergeProps(saturationSliderProps, props)())}\n />\n )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n \"input\",\n ColorSelectorHueSliderProps\n>((props) => {\n const { size, shape, getHueSliderProps, hueSliderProps } =\n useComponentContext()\n\n return (\n <HueSlider.Root\n size={size}\n shape={shape}\n {...getHueSliderProps(mergeProps(hueSliderProps, props)())}\n />\n )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n \"input\",\n ColorSelectorAlphaSliderProps\n>((props) => {\n const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n useComponentContext()\n\n if (!alpha) return null\n\n return (\n <AlphaSlider.Root\n size={size}\n shape={shape}\n {...getAlphaSliderProps(mergeProps(alphaSliderProps, props)())}\n />\n )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n /**\n * The icon to display in the eye dropper.\n */\n icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n \"div\",\n ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n const { getEyeDropperProps } = useComponentContext()\n\n return getEyeDropperProps({\n children: icon || children || <PipetteIcon />,\n ...rest,\n })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n \"span\",\n ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n useComponentContext()\n\n return getColorSwatchGroupLabelProps(\n mergeProps(colorSwatchGroupLabelProps, props)(),\n )\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n \"div\",\n ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n useComponentContext()\n const computedChildren =\n children ??\n colorSwatchGroupProps?.children ??\n colorSwatches?.map((value, index) => (\n <ColorSelectorColorSwatchItem key={index} value={value} />\n ))\n\n return getColorSwatchGroupProps(\n mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })(),\n )\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n ColorSwatchProps,\n \"color\"\n> {\n /**\n * The value of the color swatch.\n */\n value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n \"div\",\n ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n const { colorSwatchItemProps, getColorSwatchItemProps } =\n useComponentContext()\n\n return getColorSwatchItemProps(mergeProps(colorSwatchItemProps, props)())\n})\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-swatch-group.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch-group.tsx"],"sourcesContent":["import type { Component, CSSProps } from \"../../core\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { Grid } from \"../grid\"\nimport { ColorSwatch } from \"./color-swatch\"\n\nexport interface ColorSwatchGroupProps extends Omit<ColorSwatchProps, \"color\"> {\n /**\n * The color used for the swatch element.\n *\n * @default '#ffffff00'\n */\n items?: CSSProps[\"color\"][]\n /**\n * The props for the `ColorSwatch` component.\n */\n itemProps?: ColorSwatchProps\n}\n\n/**\n * `ColorSwatchGroup` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatchGroup = (({\n items = [],\n layers,\n withShadow = true,\n itemProps,\n ...rest\n}: ColorSwatchGroupProps) => {\n const { t } = useI18n(\"colorSwatch\")\n\n if (items.length > 4)\n console.warn(\"ColorSwatchGroup: doesn't support more than 4 items\")\n\n const empty = items.length === 0\n const threeColors = items.length === 3\n\n if (empty)\n return (\n <ColorSwatch\n aria-label={t(\"Color swatch group\")}\n layers={layers}\n overflow=\"hidden\"\n withShadow={withShadow}\n {...rest}\n />\n )\n else\n return (\n <ColorSwatch\n aria-label={t(\"Color swatch group\")}\n layers={withShadow ? [{ boxShadow: \"inner\" }] : []}\n {...rest}\n >\n <Grid templateColumns=\"repeat(2, 1fr)\">\n {items.map((color, index) => (\n <ColorSwatch\n key={index}\n boxSize=\"inherit\"\n color={color}\n gridColumn={threeColors && !index ? \"1 / 3\" : undefined}\n rounded=\"0\"\n w={threeColors && !index ? \"unset\" : undefined}\n withShadow={false}\n {...itemProps}\n />\n ))}\n </Grid>\n </ColorSwatch>\n )\n}) as Component<\"div\", ColorSwatchGroupProps>\n"],"mappings":";;;;;;;;;;AAwBA,MAAa,qBAAqB,EAChC,QAAQ,CAAC,GACT,QACA,aAAa,MACb,WACA,GAAG,WACwB;CAC3B,MAAM,EAAE,MAAM,QAAQ,aAAa;CAEnC,IAAI,MAAM,SAAS,GACjB,QAAQ,KAAK,qDAAqD;CAEpE,MAAM,QAAQ,MAAM,WAAW;CAC/B,MAAM,cAAc,MAAM,WAAW;CAErC,IAAI,OACF,OACE,oBAAC,aAAD;EACE,cAAY,EAAE,oBAAoB;EAC1B;EACR,UAAS;EACG;EACZ,GAAI;CACL,CAAA;MAGH,OACE,oBAAC,aAAD;EACE,cAAY,EAAE,oBAAoB;EAClC,QAAQ,aAAa,CAAC,EAAE,WAAW,QAAQ,CAAC,IAAI,CAAC;EACjD,GAAI;
|
|
1
|
+
{"version":3,"file":"color-swatch-group.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch-group.tsx"],"sourcesContent":["import type { Component, CSSProps } from \"../../core\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { Grid } from \"../grid\"\nimport { ColorSwatch } from \"./color-swatch\"\n\nexport interface ColorSwatchGroupProps extends Omit<ColorSwatchProps, \"color\"> {\n /**\n * The color used for the swatch element.\n *\n * @default '#ffffff00'\n */\n items?: CSSProps[\"color\"][]\n /**\n * The props for the `ColorSwatch` component.\n */\n itemProps?: ColorSwatchProps\n}\n\n/**\n * `ColorSwatchGroup` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatchGroup = (({\n items = [],\n layers,\n withShadow = true,\n itemProps,\n ...rest\n}: ColorSwatchGroupProps) => {\n const { t } = useI18n(\"colorSwatch\")\n\n if (items.length > 4)\n console.warn(\"ColorSwatchGroup: doesn't support more than 4 items\")\n\n const empty = items.length === 0\n const threeColors = items.length === 3\n\n if (empty)\n return (\n <ColorSwatch\n aria-label={t(\"Color swatch group\")}\n layers={layers}\n overflow=\"hidden\"\n withShadow={withShadow}\n {...rest}\n />\n )\n else\n return (\n <ColorSwatch\n aria-label={t(\"Color swatch group\")}\n layers={withShadow ? [{ boxShadow: \"inner\" }] : []}\n {...rest}\n >\n <Grid templateColumns=\"repeat(2, 1fr)\">\n {items.map((color, index) => (\n <ColorSwatch\n key={index}\n boxSize=\"inherit\"\n color={color}\n gridColumn={threeColors && !index ? \"1 / 3\" : undefined}\n rounded=\"0\"\n w={threeColors && !index ? \"unset\" : undefined}\n withShadow={false}\n {...itemProps}\n />\n ))}\n </Grid>\n </ColorSwatch>\n )\n}) as Component<\"div\", ColorSwatchGroupProps>\n"],"mappings":";;;;;;;;;;AAwBA,MAAa,qBAAqB,EAChC,QAAQ,CAAC,GACT,QACA,aAAa,MACb,WACA,GAAG,WACwB;CAC3B,MAAM,EAAE,MAAM,QAAQ,aAAa;CAEnC,IAAI,MAAM,SAAS,GACjB,QAAQ,KAAK,qDAAqD;CAEpE,MAAM,QAAQ,MAAM,WAAW;CAC/B,MAAM,cAAc,MAAM,WAAW;CAErC,IAAI,OACF,OACE,oBAAC,aAAD;EACE,cAAY,EAAE,oBAAoB;EAC1B;EACR,UAAS;EACG;EACZ,GAAI;CACL,CAAA;MAGH,OACE,oBAAC,aAAD;EACE,cAAY,EAAE,oBAAoB;EAClC,QAAQ,aAAa,CAAC,EAAE,WAAW,QAAQ,CAAC,IAAI,CAAC;EACjD,GAAI;EAEJ,UAAA,oBAAC,MAAD;GAAM,iBAAgB;GACnB,UAAA,MAAM,KAAK,OAAO,UACjB,oBAAC,aAAD;IAEE,SAAQ;IACD;IACP,YAAY,eAAe,CAAC,QAAQ,UAAU,KAAA;IAC9C,SAAQ;IACR,GAAG,eAAe,CAAC,QAAQ,UAAU,KAAA;IACrC,YAAY;IACZ,GAAI;GACL,GARM,KAQN,CACF;EACG,CAAA;CACK,CAAA;AAEnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-swatch.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n bgImage: [\n \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n ].join(\", \"),\n bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n background: CSSProps[\"color\"],\n withShadow: boolean,\n): HTMLStyledProps[] => {\n const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n return layers\n}\n\nexport interface ColorSwatchProps\n extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n /**\n * The color used for the swatch element.\n *\n * @default '#ffffff00'\n */\n color?: CSSProps[\"color\"]\n /**\n * The overlay used for the swatch element.\n */\n layers?: HTMLStyledProps[]\n /**\n * If `true`, the swatch element has an inner `box-shadow`.\n *\n * @default true\n */\n withShadow?: boolean\n}\n\nconst {\n PropsContext: ColorSwatchPropsContext,\n usePropsContext: useColorSwatchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n \"color-swatch\",\n colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n ({\n children,\n color = \"#ffffff00\",\n withShadow = true,\n layers = defaultLayers(color, withShadow),\n ...rest\n }) => {\n return (\n <styled.div\n aria-label={isString(color) ? color : undefined}\n aria-roledescription=\"color swatch\"\n role=\"img\"\n {...rest}\n >\n {children}\n {layers.map((props, index) => (\n <ColorSwatchOverlay key={index} {...props} />\n ))}\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n \"div\",\n \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,qBAAC,OAAO,KAAR;EACE,eAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;
|
|
1
|
+
{"version":3,"file":"color-swatch.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n bgImage: [\n \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n ].join(\", \"),\n bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n background: CSSProps[\"color\"],\n withShadow: boolean,\n): HTMLStyledProps[] => {\n const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n return layers\n}\n\nexport interface ColorSwatchProps\n extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n /**\n * The color used for the swatch element.\n *\n * @default '#ffffff00'\n */\n color?: CSSProps[\"color\"]\n /**\n * The overlay used for the swatch element.\n */\n layers?: HTMLStyledProps[]\n /**\n * If `true`, the swatch element has an inner `box-shadow`.\n *\n * @default true\n */\n withShadow?: boolean\n}\n\nconst {\n PropsContext: ColorSwatchPropsContext,\n usePropsContext: useColorSwatchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n \"color-swatch\",\n colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n ({\n children,\n color = \"#ffffff00\",\n withShadow = true,\n layers = defaultLayers(color, withShadow),\n ...rest\n }) => {\n return (\n <styled.div\n aria-label={isString(color) ? color : undefined}\n aria-roledescription=\"color swatch\"\n role=\"img\"\n {...rest}\n >\n {children}\n {layers.map((props, index) => (\n <ColorSwatchOverlay key={index} {...props} />\n ))}\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n \"div\",\n \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,qBAAC,OAAO,KAAR;EACE,eAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;EAJN,UAAA,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,oBAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-list.js","names":[],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n getValidChildren,\n isArray,\n isEmpty,\n omitChildren,\n pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n /**\n * If provided, generate elements based on items.\n */\n items?: DataListItem[]\n /**\n * The props for the data list description component.\n */\n descriptionProps?: DataListDescriptionProps\n /**\n * The props for the data list term component.\n */\n termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n DataListRootProps,\n \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n ComponentContext,\n PropsContext: DataListPropsContext,\n useComponentContext,\n usePropsContext: useDataListPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n \"data-list\",\n dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n const col = useMemo(() => {\n let col = 0\n\n if (children) {\n const validChildren = getValidChildren(children)\n const dataListItems = pickChildren(validChildren, DataListItem)\n\n dataListItems.forEach(({ props }) => {\n const validChildren = getValidChildren(props.children)\n const pickedChildren = pickChildren(\n validChildren,\n DataListTerm,\n DataListDescription,\n )\n\n col = Math.max(col, pickedChildren.length)\n })\n } else {\n items.forEach(({ description, term }) => {\n const termCount = !term ? 0 : isArray(term) ? term.length : 1\n const descriptionCount = !description\n ? 0\n : isArray(description)\n ? description.length\n : 1\n\n col = Math.max(col, termCount + descriptionCount)\n })\n }\n\n return col\n }, [children, items])\n const computedChildren = useMemo(\n () =>\n items.map((props, index) => <DataListItem key={index} {...props} />),\n [items],\n )\n const context = useMemo(\n () => ({\n descriptionProps,\n termProps,\n }),\n [descriptionProps, termProps],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n {children ?? computedChildren}\n </styled.dl>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n /**\n * The data list description to use.\n */\n description?: ReactNode | ReactNode[]\n /**\n * The data list term to use.\n */\n term?: ReactNode | ReactNode[]\n /**\n * The props for the data list description component.\n */\n descriptionProps?: DataListDescriptionProps\n /**\n * The props for the data list term component.\n */\n termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n ({\n children,\n description,\n term,\n descriptionProps: customDescriptionProps,\n termProps: customTermProps,\n ...rest\n }) => {\n const { descriptionProps, termProps } = useComponentContext()\n\n const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n const validChildren = getValidChildren(children)\n\n if (isEmpty(validChildren)) return [children]\n\n const customTerms = pickChildren(validChildren, DataListTerm)\n const customDescriptions = pickChildren(\n validChildren,\n DataListDescription,\n )\n const omittedChildren = omitChildren(\n validChildren,\n DataListTerm,\n DataListDescription,\n )\n\n return [omittedChildren, customTerms, customDescriptions] as const\n }, [children])\n\n return (\n <styled.div {...rest}>\n {!isEmpty(customTerms) ? (\n customTerms\n ) : isArray(term) ? (\n term.map((item, index) => (\n <DataListTerm\n key={index}\n {...mergeProps(termProps, customTermProps)()}\n >\n {item}\n </DataListTerm>\n ))\n ) : (\n <DataListTerm {...mergeProps(termProps, customTermProps)()}>\n {term}\n </DataListTerm>\n )}\n\n {!isEmpty(customDescriptions) ? (\n customDescriptions\n ) : isArray(description) ? (\n description.map((item, index) => (\n <DataListDescription\n key={index}\n {...mergeProps(descriptionProps, customDescriptionProps)()}\n >\n {item}\n </DataListDescription>\n ))\n ) : (\n <DataListDescription\n {...mergeProps(descriptionProps, customDescriptionProps)()}\n >\n {description}\n </DataListDescription>\n )}\n\n {omittedChildren}\n </styled.div>\n )\n },\n \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n \"dd\",\n \"description\",\n)()\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACE,oBACF,aACA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,OAAO,UAAU,QAAQ,CAAC,GAAG,kBAAkB,WAAW,GAAG,WAAW;CACzE,MAAM,MAAM,cAAc;EACxB,IAAI,MAAM;EAEV,IAAI,UAIF,aAHsB,iBAAiB,QACQ,GAAG,YAEtC,CAAC,CAAC,SAAS,EAAE,YAAY;GAEnC,MAAM,iBAAiB,aADD,iBAAiB,MAAM,QAE/B,GACZ,cACA,mBACF;GAEA,MAAM,KAAK,IAAI,KAAK,eAAe,MAAM;EAC3C,CAAC;OAED,MAAM,SAAS,EAAE,aAAa,WAAW;GACvC,MAAM,YAAY,CAAC,OAAO,KAAA,GAAA,cAAA,QAAA,CAAY,IAAI,IAAI,KAAK,SAAS;GAC5D,MAAM,mBAAmB,CAAC,cACtB,KAAA,GAAA,cAAA,QAAA,CACQ,WAAW,IACjB,YAAY,SACZ;GAEN,MAAM,KAAK,IAAI,KAAK,YAAY,gBAAgB;EAClD,CAAC;EAGH,OAAO;CACT,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,mBAAmB,cAErB,MAAM,KAAK,OAAO,UAAU,oBAAC,cAAD,EAA0B,GAAI,MAAQ,GAAnB,KAAmB,CAAC,GACrE,CAAC,KAAK,CACR;CACA,MAAM,UAAU,eACP;EACL;EACA;CACF,IACA,CAAC,kBAAkB,SAAS,CAC9B;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO;
|
|
1
|
+
{"version":3,"file":"data-list.js","names":[],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n getValidChildren,\n isArray,\n isEmpty,\n omitChildren,\n pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n /**\n * If provided, generate elements based on items.\n */\n items?: DataListItem[]\n /**\n * The props for the data list description component.\n */\n descriptionProps?: DataListDescriptionProps\n /**\n * The props for the data list term component.\n */\n termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n DataListRootProps,\n \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n ComponentContext,\n PropsContext: DataListPropsContext,\n useComponentContext,\n usePropsContext: useDataListPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n \"data-list\",\n dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n const col = useMemo(() => {\n let col = 0\n\n if (children) {\n const validChildren = getValidChildren(children)\n const dataListItems = pickChildren(validChildren, DataListItem)\n\n dataListItems.forEach(({ props }) => {\n const validChildren = getValidChildren(props.children)\n const pickedChildren = pickChildren(\n validChildren,\n DataListTerm,\n DataListDescription,\n )\n\n col = Math.max(col, pickedChildren.length)\n })\n } else {\n items.forEach(({ description, term }) => {\n const termCount = !term ? 0 : isArray(term) ? term.length : 1\n const descriptionCount = !description\n ? 0\n : isArray(description)\n ? description.length\n : 1\n\n col = Math.max(col, termCount + descriptionCount)\n })\n }\n\n return col\n }, [children, items])\n const computedChildren = useMemo(\n () =>\n items.map((props, index) => <DataListItem key={index} {...props} />),\n [items],\n )\n const context = useMemo(\n () => ({\n descriptionProps,\n termProps,\n }),\n [descriptionProps, termProps],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n {children ?? computedChildren}\n </styled.dl>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n /**\n * The data list description to use.\n */\n description?: ReactNode | ReactNode[]\n /**\n * The data list term to use.\n */\n term?: ReactNode | ReactNode[]\n /**\n * The props for the data list description component.\n */\n descriptionProps?: DataListDescriptionProps\n /**\n * The props for the data list term component.\n */\n termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n ({\n children,\n description,\n term,\n descriptionProps: customDescriptionProps,\n termProps: customTermProps,\n ...rest\n }) => {\n const { descriptionProps, termProps } = useComponentContext()\n\n const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n const validChildren = getValidChildren(children)\n\n if (isEmpty(validChildren)) return [children]\n\n const customTerms = pickChildren(validChildren, DataListTerm)\n const customDescriptions = pickChildren(\n validChildren,\n DataListDescription,\n )\n const omittedChildren = omitChildren(\n validChildren,\n DataListTerm,\n DataListDescription,\n )\n\n return [omittedChildren, customTerms, customDescriptions] as const\n }, [children])\n\n return (\n <styled.div {...rest}>\n {!isEmpty(customTerms) ? (\n customTerms\n ) : isArray(term) ? (\n term.map((item, index) => (\n <DataListTerm\n key={index}\n {...mergeProps(termProps, customTermProps)()}\n >\n {item}\n </DataListTerm>\n ))\n ) : (\n <DataListTerm {...mergeProps(termProps, customTermProps)()}>\n {term}\n </DataListTerm>\n )}\n\n {!isEmpty(customDescriptions) ? (\n customDescriptions\n ) : isArray(description) ? (\n description.map((item, index) => (\n <DataListDescription\n key={index}\n {...mergeProps(descriptionProps, customDescriptionProps)()}\n >\n {item}\n </DataListDescription>\n ))\n ) : (\n <DataListDescription\n {...mergeProps(descriptionProps, customDescriptionProps)()}\n >\n {description}\n </DataListDescription>\n )}\n\n {omittedChildren}\n </styled.div>\n )\n },\n \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n \"dd\",\n \"description\",\n)()\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Calendar.Root","Popover.Content"],"sources":["../../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { DatePickerStyle } from \"./date-picker.style\"\nimport type { UseDatePickerProps, UseDatePickerReturn } from \"./use-date-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useFieldSizing } from \"../../hooks/use-field-sizing\"\nimport { cast, isArray, isDate, isObject, mergeRefs } from \"../../utils\"\nimport { Calendar } from \"../calendar\"\nimport { useGroupItemProps } from \"../group\"\nimport { CalendarIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { datePickerStyle } from \"./date-picker.style\"\nimport { useDatePicker } from \"./use-date-picker\"\n\ninterface ComponentContext\n extends\n Pick<UseDatePickerReturn, \"getInputProps\" | \"range\" | \"separator\">,\n Pick<DatePickerProps, \"inputProps\"> {}\n\nexport interface DatePickerProps<\n Multiple extends boolean = false,\n Range extends boolean = false,\n>\n extends\n Omit<\n HTMLStyledProps,\n \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n >,\n Merge<UseDatePickerProps<Multiple, Range>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<DatePickerStyle>,\n UseInputBorderProps {\n /**\n * If `true`, display the clear icon.\n *\n * @default true\n */\n clearable?: boolean\n /**\n * The icon to be used in the clear button.\n */\n clearIcon?: ReactNode\n /**\n * The icon to be used in the date picker.\n */\n icon?: ReactNode\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end-start'\n */\n placement?: Popover.RootProps[\"placement\"]\n /**\n * The size of the calendar component.\n */\n calendarProps?: Calendar.RootProps<Multiple, Range>\n /**\n * Props for content element.\n */\n contentProps?: DatePickerContentProps\n /**\n * The props for the end element.\n */\n elementProps?: InputGroup.ElementProps\n /**\n * Props for icon element.\n */\n iconProps?: DatePickerIconProps\n /**\n * The props for the input element.\n */\n inputProps?: HTMLStyledProps<\"input\">\n /**\n * Props for root element.\n */\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: DatePickerPropsContext,\n useComponentContext,\n usePropsContext: useDatePickerPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<DatePickerProps, DatePickerStyle, ComponentContext>(\n \"date-picker\",\n datePickerStyle,\n)\n\nexport { DatePickerPropsContext, useDatePickerPropsContext }\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see https://yamada-ui.com/docs/components/date-picker\n */\nexport const DatePicker = withProvider(\n <Multiple extends boolean = false, Range extends boolean = false>(\n props: DatePickerProps<Multiple, Range>,\n ) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n size,\n animationScheme = \"block-start\",\n children,\n clearable = true,\n clearIcon = <XIcon />,\n duration,\n errorBorderColor,\n focusBorderColor,\n icon,\n calendarProps,\n contentProps,\n elementProps,\n iconProps,\n inputProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const {\n children: fieldChildren,\n range,\n separator,\n value,\n getCalendarProps,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n popoverProps,\n } = useDatePicker({ ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const selectProps = useMemo<Calendar.RootProps[\"selectProps\"]>(\n () => ({ contentProps: { portalProps: { disabled: true } } }),\n [],\n )\n const componentContext = useMemo(\n () => ({ range, separator, getInputProps, inputProps }),\n [getInputProps, inputProps, range, separator],\n )\n const hasValue = isArray(value)\n ? !!value.length\n : isObject(value) && !isDate(value)\n ? !!value.end || !!value.start\n : !!value\n\n return (\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <InputGroup.Root\n {...mergeProps(\n { className, css, colorScheme },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n <Popover.Trigger>\n <DatePickerField {...getFieldProps({ ...varProps })}>\n {fieldChildren}\n </DatePickerField>\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <DatePickerIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <DatePickerIcon icon={icon} {...getIconProps(iconProps)} />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <DatePickerContent\n {...cast<DatePickerContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n <Calendar.Root\n colorScheme={colorScheme}\n size={size}\n fixed={false}\n selectProps={selectProps}\n {...getCalendarProps(calendarProps)}\n >\n {children}\n </Calendar.Root>\n </DatePickerContent>\n </Popover.Root>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\"] },\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n}) as GenericsComponent<{\n <Multiple extends boolean = false, Range extends boolean = false>(\n props: DatePickerProps<Multiple, Range>,\n ): ReactElement\n}>\n\ninterface DatePickerFieldProps extends HTMLStyledProps {}\n\nconst DatePickerField = withContext<\"div\", DatePickerFieldProps>(\n \"div\",\n \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n const { range, separator, getInputProps, inputProps } = useComponentContext()\n const computedChildren = useMemo(() => {\n if (range)\n return (\n <>\n <DatePickerAdjustInput\n {...getInputProps({ align: \"start\", ...inputProps })}\n />\n <DatePickerSeparator>{separator}</DatePickerSeparator>\n <DatePickerAdjustInput\n {...getInputProps({ align: \"end\", ...inputProps })}\n />\n </>\n )\n else\n return (\n <>\n {children}\n <DatePickerInput {...getInputProps(inputProps)} />\n </>\n )\n }, [children, getInputProps, inputProps, range, separator])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\ninterface DatePickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerInput = withContext<\"input\", DatePickerInputProps>(\n \"input\",\n \"input\",\n)()\n\ninterface DatePickerAdjustInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerAdjustInput = withContext<\"input\", DatePickerAdjustInputProps>(\n ({ ref, placeholder, value, ...rest }) => {\n const { ref: inputRef, text } = useFieldSizing({\n value: value?.toString() || placeholder,\n })\n\n return (\n <>\n {text}\n\n <styled.input\n ref={mergeRefs(ref, inputRef)}\n placeholder={placeholder}\n value={value}\n {...rest}\n />\n </>\n )\n },\n [\"input\", \"adjust\"],\n)()\n\ninterface DatePickerSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst DatePickerSeparator = withContext<\"span\", DatePickerSeparatorProps>(\n \"span\",\n \"separator\",\n)()\n\ninterface DatePickerIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst DatePickerIcon = withContext<\"div\", DatePickerIconProps>(\"div\", \"icon\")(\n undefined,\n ({ children, icon, ...rest }) => ({\n children: icon || children || <CalendarIcon />,\n ...rest,\n }),\n)\n\ninterface DatePickerContentProps extends Popover.ContentProps {}\n\nconst DatePickerContent = withContext<\"div\", DatePickerContentProps>(\n Popover.Content,\n \"content\",\n)()\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"date-picker.js","names":["Popover.Root","InputGroup.Root","Popover.Trigger","InputGroup.Element","Calendar.Root","Popover.Content"],"sources":["../../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n GenericsComponent,\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { DatePickerStyle } from \"./date-picker.style\"\nimport type { UseDatePickerProps, UseDatePickerReturn } from \"./use-date-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useFieldSizing } from \"../../hooks/use-field-sizing\"\nimport { cast, isArray, isDate, isObject, mergeRefs } from \"../../utils\"\nimport { Calendar } from \"../calendar\"\nimport { useGroupItemProps } from \"../group\"\nimport { CalendarIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { datePickerStyle } from \"./date-picker.style\"\nimport { useDatePicker } from \"./use-date-picker\"\n\ninterface ComponentContext\n extends\n Pick<UseDatePickerReturn, \"getInputProps\" | \"range\" | \"separator\">,\n Pick<DatePickerProps, \"inputProps\"> {}\n\nexport interface DatePickerProps<\n Multiple extends boolean = false,\n Range extends boolean = false,\n>\n extends\n Omit<\n HTMLStyledProps,\n \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n >,\n Merge<UseDatePickerProps<Multiple, Range>, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<DatePickerStyle>,\n UseInputBorderProps {\n /**\n * If `true`, display the clear icon.\n *\n * @default true\n */\n clearable?: boolean\n /**\n * The icon to be used in the clear button.\n */\n clearIcon?: ReactNode\n /**\n * The icon to be used in the date picker.\n */\n icon?: ReactNode\n /**\n * The placement of the popper relative to its reference.\n *\n * @default 'end-start'\n */\n placement?: Popover.RootProps[\"placement\"]\n /**\n * The size of the calendar component.\n */\n calendarProps?: Calendar.RootProps<Multiple, Range>\n /**\n * Props for content element.\n */\n contentProps?: DatePickerContentProps\n /**\n * The props for the end element.\n */\n elementProps?: InputGroup.ElementProps\n /**\n * Props for icon element.\n */\n iconProps?: DatePickerIconProps\n /**\n * The props for the input element.\n */\n inputProps?: HTMLStyledProps<\"input\">\n /**\n * Props for root element.\n */\n rootProps?: InputGroup.RootProps\n}\n\nconst {\n ComponentContext,\n PropsContext: DatePickerPropsContext,\n useComponentContext,\n usePropsContext: useDatePickerPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<DatePickerProps, DatePickerStyle, ComponentContext>(\n \"date-picker\",\n datePickerStyle,\n)\n\nexport { DatePickerPropsContext, useDatePickerPropsContext }\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see https://yamada-ui.com/docs/components/date-picker\n */\nexport const DatePicker = withProvider(\n <Multiple extends boolean = false, Range extends boolean = false>(\n props: DatePickerProps<Multiple, Range>,\n ) => {\n const [\n groupItemProps,\n {\n className,\n css,\n colorScheme,\n size,\n animationScheme = \"block-start\",\n children,\n clearable = true,\n clearIcon = <XIcon />,\n duration,\n errorBorderColor,\n focusBorderColor,\n icon,\n calendarProps,\n contentProps,\n elementProps,\n iconProps,\n inputProps,\n rootProps,\n ...rest\n },\n ] = useGroupItemProps(props)\n const popoverStyleProps = usePopoverStyleProps(rest)\n const {\n children: fieldChildren,\n range,\n separator,\n value,\n getCalendarProps,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n popoverProps,\n } = useDatePicker({ ...rest, ...popoverStyleProps })\n const mergedPopoverProps = useMemo<Popover.RootProps>(\n () => ({\n animationScheme,\n duration,\n ...popoverProps,\n }),\n [animationScheme, duration, popoverProps],\n )\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const selectProps = useMemo<Calendar.RootProps[\"selectProps\"]>(\n () => ({ contentProps: { portalProps: { disabled: true } } }),\n [],\n )\n const componentContext = useMemo(\n () => ({ range, separator, getInputProps, inputProps }),\n [getInputProps, inputProps, range, separator],\n )\n const hasValue = isArray(value)\n ? !!value.length\n : isObject(value) && !isDate(value)\n ? !!value.end || !!value.start\n : !!value\n\n return (\n <ComponentContext value={componentContext}>\n <Popover.Root {...mergedPopoverProps}>\n <InputGroup.Root\n {...mergeProps(\n { className, css, colorScheme },\n getRootProps(groupItemProps),\n rootProps,\n )()}\n >\n <Popover.Trigger>\n <DatePickerField {...getFieldProps({ ...varProps })}>\n {fieldChildren}\n </DatePickerField>\n </Popover.Trigger>\n\n <InputGroup.Element\n {...{ clickable: clearable && hasValue, ...elementProps }}\n >\n {clearable && hasValue ? (\n <DatePickerIcon\n icon={clearIcon}\n {...getClearIconProps(iconProps)}\n />\n ) : (\n <DatePickerIcon icon={icon} {...getIconProps(iconProps)} />\n )}\n </InputGroup.Element>\n </InputGroup.Root>\n\n <DatePickerContent\n {...cast<DatePickerContentProps>(\n getContentProps(cast<HTMLProps>(contentProps)),\n )}\n >\n <Calendar.Root\n colorScheme={colorScheme}\n size={size}\n fixed={false}\n selectProps={selectProps}\n {...getCalendarProps(calendarProps)}\n >\n {children}\n </Calendar.Root>\n </DatePickerContent>\n </Popover.Root>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"size\"] },\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n}) as GenericsComponent<{\n <Multiple extends boolean = false, Range extends boolean = false>(\n props: DatePickerProps<Multiple, Range>,\n ): ReactElement\n}>\n\ninterface DatePickerFieldProps extends HTMLStyledProps {}\n\nconst DatePickerField = withContext<\"div\", DatePickerFieldProps>(\n \"div\",\n \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n const { range, separator, getInputProps, inputProps } = useComponentContext()\n const computedChildren = useMemo(() => {\n if (range)\n return (\n <>\n <DatePickerAdjustInput\n {...getInputProps({ align: \"start\", ...inputProps })}\n />\n <DatePickerSeparator>{separator}</DatePickerSeparator>\n <DatePickerAdjustInput\n {...getInputProps({ align: \"end\", ...inputProps })}\n />\n </>\n )\n else\n return (\n <>\n {children}\n <DatePickerInput {...getInputProps(inputProps)} />\n </>\n )\n }, [children, getInputProps, inputProps, range, separator])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\ninterface DatePickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerInput = withContext<\"input\", DatePickerInputProps>(\n \"input\",\n \"input\",\n)()\n\ninterface DatePickerAdjustInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerAdjustInput = withContext<\"input\", DatePickerAdjustInputProps>(\n ({ ref, placeholder, value, ...rest }) => {\n const { ref: inputRef, text } = useFieldSizing({\n value: value?.toString() || placeholder,\n })\n\n return (\n <>\n {text}\n\n <styled.input\n ref={mergeRefs(ref, inputRef)}\n placeholder={placeholder}\n value={value}\n {...rest}\n />\n </>\n )\n },\n [\"input\", \"adjust\"],\n)()\n\ninterface DatePickerSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst DatePickerSeparator = withContext<\"span\", DatePickerSeparatorProps>(\n \"span\",\n \"separator\",\n)()\n\ninterface DatePickerIconProps extends HTMLStyledProps {\n icon?: ReactNode\n}\n\nconst DatePickerIcon = withContext<\"div\", DatePickerIconProps>(\"div\", \"icon\")(\n undefined,\n ({ children, icon, ...rest }) => ({\n children: icon || children || <CalendarIcon />,\n ...rest,\n }),\n)\n\ninterface DatePickerContentProps extends Popover.ContentProps {}\n\nconst DatePickerContent = withContext<\"div\", DatePickerContentProps>(\n Popover.Content,\n \"content\",\n)()\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-date-picker.js","names":[],"sources":["../../../../src/components/date-picker/use-date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { Dict } from \"../../utils\"\nimport type {\n CalendarFormat,\n MaybeDateValue,\n UseCalendarProps,\n} from \"../calendar\"\nimport type { FieldProps } from \"../field\"\nimport dayjs from \"dayjs\"\nimport {\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n cast,\n contains,\n dataAttr,\n focusTransfer,\n handlerAll,\n isActiveElement,\n isArray,\n isComposing,\n isDate,\n isNumber,\n isObject,\n mergeRefs,\n runIfFn,\n runKeyAction,\n useUpdateEffect,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport {\n DEFAULT_MAX_DATE,\n DEFAULT_MIN_DATE,\n getAdjustedMonth,\n isAfterDate,\n isBeforeDate,\n isIncludeDates,\n updateMaybeDateValue,\n useCalendarProps,\n} from \"../calendar\"\nimport { useFieldProps } from \"../field\"\nimport { useDateTimeFormat } from \"../format\"\n\nexport interface DatePickerFormat extends CalendarFormat {\n input?: Intl.DateTimeFormatOptions | null\n}\n\ntype InputAlign = \"end\" | \"start\"\ntype MaybeInputValue<Range extends boolean = false> = Range extends true\n ? { end?: string; start?: string }\n : string | undefined\n\ninterface DatePickerRenderProps {\n count: number\n date: Date\n focused: boolean\n index: number\n separator: string\n value: string\n onClear: () => void\n max?: number\n}\n\nexport interface DatePickerRender {\n (props: DatePickerRenderProps): ReactNode\n}\n\nconst defaultRender: DatePickerRender = ({\n count,\n focused,\n index,\n max,\n separator,\n value,\n}) => {\n const last = count - 1 === index\n\n return (\n <span style={{ marginInlineEnd: \"var(--gap)\" }}>\n {value}\n {((!isNumber(max) || count < max) && focused) || !last ? separator : null}\n </span>\n )\n}\n\nexport interface UseDatePickerProps<\n Multiple extends boolean = false,\n Range extends boolean = false,\n>\n extends\n Omit<UseCalendarProps<Multiple, Range>, \"format\" | \"ref\">,\n Omit<\n UseComboboxProps,\n \"defaultValue\" | \"initialFocusValue\" | \"onChange\" | \"ref\" | \"value\"\n >,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /**\n * If `true`, allows input.\n *\n * @default true\n */\n allowInput?: boolean\n /**\n * If `true`, allows input of dates beyond the `minDate` and `maxDate` restrictions.\n *\n * @default true\n */\n allowInputBeyond?: boolean\n /**\n * If `true`, the date picker will be closed when the input value changes.\n *\n * @default false\n */\n closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n /**\n * The initial value of the input.\n */\n defaultInputValue?: MaybeInputValue<Range>\n /**\n * If `true`, the input will be focused when the clear icon is clicked.\n *\n * @default true\n */\n focusOnClear?: boolean\n /**\n * The format used for conversion.\n * Check the docs to see the format of possible modifiers you can pass.\n *\n * @see https://day.js.org/docs/en/display/format#list-of-localized-formats\n */\n format?: DatePickerFormat\n /**\n * The `id` attribute of the input element.\n */\n id?: string\n /**\n * The value of the input.\n */\n inputValue?: MaybeInputValue<Range>\n /**\n * The `name` attribute of the input element.\n */\n name?: string\n /**\n * If `true`, the date picker will be opened when the input value changes.\n *\n * @default true\n */\n openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n /**\n * If `true`, the date picker will be opened when the input is focused.\n *\n * @default true\n */\n openOnFocus?: boolean\n /**\n * The pattern used to check the input element.\n */\n pattern?: RegExp\n /**\n * The placeholder for date picker.\n */\n placeholder?: string\n /**\n * The visual separator between each value.\n *\n * @default ','\n */\n separator?: string\n /**\n * The callback invoked when input value state changes.\n */\n onInputChange?: (value: MaybeInputValue<Range>) => void\n /**\n * Function that converts the input value to Date type.\n */\n parseDate?: (value: string) => Date | undefined\n /**\n * The function to render the selected date.\n */\n render?: (props: DatePickerRenderProps) => ReactNode\n}\n\nexport const useDatePicker = <\n Multiple extends boolean = false,\n Range extends boolean = false,\n>({\n maxDate = DEFAULT_MAX_DATE,\n minDate = DEFAULT_MIN_DATE,\n ...props\n}: UseDatePickerProps<Multiple, Range> = {}) => {\n if (dayjs(minDate).isAfter(dayjs(maxDate))) maxDate = minDate\n\n const { getDocument } = useEnvironment()\n const { locale: defaultLocale, t } = useI18n(\"datePicker\")\n const {\n props: {\n id,\n ref,\n name,\n allowInput = true,\n allowInputBeyond = false,\n closeOnChange = false,\n multiple = false,\n closeOnSelect = !multiple,\n defaultInputValue,\n defaultMonth = new Date(),\n range = false,\n defaultValue = (range\n ? { end: undefined, start: undefined }\n : multiple\n ? []\n : undefined) as MaybeDateValue<Multiple, Range>,\n disabled,\n focusOnClear = true,\n format,\n inputValue: inputValueProp,\n locale = defaultLocale,\n max,\n month: monthProp,\n openOnChange = true,\n openOnClick = true,\n openOnFocus = true,\n parseDate,\n pattern,\n placeholder: placeholderProp,\n placement = \"end-start\",\n readOnly,\n render = defaultRender,\n required,\n separator = range ? \"-\" : \",\",\n value: valueProp,\n onChange: onChangeProp,\n onChangeMonth: onChangeMonthProp,\n onInputChange: onInputChangeProp,\n ...computedProps\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const dateTimeFormat = useDateTimeFormat({ locale })\n const { calendarFormat, inputFormat } = useMemo(() => {\n const { input: inputFormat, ...calendarFormat } = format ?? {}\n const defaultInputFormat: Intl.DateTimeFormatOptions = {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n }\n\n return {\n calendarFormat,\n inputFormat:\n inputFormat !== null ? (inputFormat ?? defaultInputFormat) : undefined,\n }\n }, [format])\n const [calendarProps, rest] = useCalendarProps<Multiple, Range>(computedProps)\n const { excludeDate } = calendarProps\n const fieldRef = useRef<HTMLDivElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const startInputRef = useRef<HTMLInputElement>(null)\n const endInputRef = useRef<HTMLInputElement>(null)\n const focusByClickRef = useRef<boolean>(false)\n const [focused, setFocused] = useState(false)\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue as MaybeDateValue<Multiple, Range>,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [month, setMonth] = useControllableState({\n defaultValue: () => {\n let value = defaultMonth\n\n if (dayjs(minDate).isAfter(dayjs(defaultMonth)))\n value = dayjs(minDate).set(\"date\", 1).toDate()\n\n if (valueProp) value = getAdjustedMonth(valueProp, value)\n else if (defaultValue) value = getAdjustedMonth(defaultValue, value)\n\n return value\n },\n value: monthProp,\n onChange: onChangeMonthProp,\n })\n const stringToDate = useCallback(\n (value: string, start: Date = minDate, end: Date = maxDate) => {\n let date = parseDate?.(value)\n\n if (!date && dayjs(value).isValid())\n date = dayjs(value).locale(locale).toDate()\n\n if (date == null) return undefined\n if (excludeDate?.(date)) return undefined\n\n if (!allowInputBeyond) {\n if (isBeforeDate(date, start)) date = start\n if (isAfterDate(date, end)) date = end\n }\n\n return date\n },\n [allowInputBeyond, excludeDate, locale, maxDate, minDate, parseDate],\n )\n const dateToString = useCallback(\n (date?: Date) => {\n if (date == null) return \"\"\n\n return dateTimeFormat(date, inputFormat)\n },\n [dateTimeFormat, inputFormat],\n )\n const [inputValue, setInputValue] = useControllableState({\n defaultValue: () => {\n if (defaultInputValue)\n if (isObject(defaultInputValue)) {\n if (dayjs(defaultInputValue.start).isValid())\n defaultInputValue.start = dateTimeFormat(\n dayjs(defaultInputValue.start).toDate(),\n inputFormat,\n )\n\n if (dayjs(defaultInputValue.end).isValid())\n defaultInputValue.end = dateTimeFormat(\n dayjs(defaultInputValue.end).toDate(),\n inputFormat,\n )\n\n return defaultInputValue\n } else {\n if (dayjs(defaultInputValue).isValid())\n return dateTimeFormat(\n dayjs(defaultInputValue).toDate(),\n inputFormat,\n ) as MaybeInputValue<Range>\n else return defaultInputValue\n }\n else if (isDate(value))\n return dateToString(value) as MaybeInputValue<Range>\n else if (isObject(value) && !isArray(value))\n return {\n end: dateToString(value.end),\n start: dateToString(value.start),\n } as MaybeInputValue<Range>\n else return \"\" as MaybeInputValue<Range>\n },\n value: inputValueProp,\n onChange: onInputChangeProp,\n })\n const {\n interactive,\n open,\n getContentProps: getComboboxContentProps,\n getTriggerProps,\n popoverProps,\n onClose,\n onOpen,\n } = useCombobox({\n disabled,\n matchWidth: false,\n openOnClick: false,\n openOnEnter: !allowInput,\n openOnSpace: !allowInput,\n placement,\n readOnly,\n transferFocus: false,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n })\n const children = useMemo<ReactNode>(() => {\n if (!isArray(value)) return null\n\n const count = value.length\n\n return value.map((date, index) => {\n const value = dateToString(date)\n\n const onClear = (ev?: MouseEvent<HTMLElement>) => {\n ev?.preventDefault()\n ev?.stopPropagation()\n\n setValue(\n (prev) =>\n updateMaybeDateValue(date, max)(prev) as MaybeDateValue<\n Multiple,\n Range\n >,\n )\n }\n\n const component = render({\n count,\n date,\n focused,\n index,\n max,\n separator,\n value,\n onClear,\n })\n\n if (isValidElement<Dict>(component))\n return cloneElement(component, { ...component.props, key: index })\n else return component\n })\n }, [dateToString, focused, max, render, separator, setValue, value])\n const { endPlaceholder, startPlaceholder } = useMemo(() => {\n if (range) {\n const startPlaceholder =\n placeholderProp ?? dateTimeFormat(new Date(), inputFormat)\n const endPlaceholder =\n placeholderProp ??\n dateTimeFormat(dayjs().add(1, \"day\").toDate(), inputFormat)\n\n return { endPlaceholder, startPlaceholder }\n } else {\n const placeholder =\n placeholderProp ?? dateTimeFormat(new Date(), inputFormat)\n\n return { endPlaceholder: placeholder, startPlaceholder: placeholder }\n }\n }, [dateTimeFormat, inputFormat, placeholderProp, range])\n\n const onChange = useCallback(\n (value: MaybeDateValue<Multiple, Range>) => {\n setValue(value)\n\n if (isArray(value)) setInputValue(\"\" as MaybeInputValue<Range>)\n else if (isObject(value) && !isDate(value))\n setInputValue({\n end: dateToString(value.end),\n start: dateToString(value.start),\n } as MaybeInputValue<Range>)\n else setInputValue(dateToString(value) as MaybeInputValue<Range>)\n\n if (!closeOnSelect) return\n\n if (isObject(value) && !isArray(value) && !isDate(value)) {\n if (value.end && value.start) onClose()\n } else {\n onClose()\n }\n },\n [setValue, closeOnSelect, setInputValue, dateToString, onClose],\n )\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!allowInput) return\n if (isArray(value) && value.length === max) return\n\n if (runIfFn(closeOnChange, ev)) onClose()\n else if (runIfFn(openOnChange, ev)) onOpen()\n\n let inputValue = ev.target.value\n\n if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n if (isArray(value)) {\n const date = stringToDate(inputValue)\n\n setInputValue(inputValue as MaybeInputValue<Range>)\n\n if (date) setMonth(dayjs(date).set(\"date\", 1).toDate())\n } else if (isObject(value) && !isDate(value)) {\n const align = contains(endInputRef.current, ev.target) ? \"end\" : \"start\"\n const minDate =\n value.start && align === \"end\"\n ? dayjs(value.start).add(1, \"day\").toDate()\n : undefined\n const maxDate =\n value.end && align === \"start\"\n ? dayjs(value.end).subtract(1, \"day\").toDate()\n : undefined\n const date = stringToDate(inputValue, minDate, maxDate)\n\n setInputValue((prev) =>\n isObject(prev)\n ? Object.assign({}, prev, { [align]: inputValue })\n : prev,\n )\n setValue((prev) =>\n isObject(prev) && !isDate(prev) ? { ...prev, [align]: date } : prev,\n )\n } else {\n const date = stringToDate(inputValue)\n\n setInputValue(inputValue as MaybeInputValue<Range>)\n setValue(date as MaybeDateValue<Multiple, Range>)\n }\n },\n [\n allowInput,\n closeOnChange,\n max,\n onClose,\n onOpen,\n openOnChange,\n pattern,\n setInputValue,\n setMonth,\n setValue,\n stringToDate,\n value,\n ],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (disabled || isComposing(ev)) return\n\n const inputValue = cast<HTMLInputElement>(ev.target).value\n\n runKeyAction(\n ev,\n {\n Backspace: (ev) => {\n if (isArray(value)) {\n if (inputValue.length) return\n\n ev.preventDefault()\n\n setValue((prev) =>\n isArray(prev)\n ? (prev.slice(0, -1) as MaybeDateValue<Multiple, Range>)\n : prev,\n )\n } else if (isObject(value) && !isDate(value)) {\n if (inputValue.length) return\n if (!contains(endInputRef.current, ev.target)) return\n\n ev.preventDefault()\n\n setInputValue({ end: \"\", start: \"\" } as MaybeInputValue<Range>)\n setValue({ end: undefined, start: undefined } as MaybeDateValue<\n Multiple,\n Range\n >)\n\n startInputRef.current?.focus()\n }\n },\n Enter: (ev) => {\n if (!open || !inputValue.length) return\n\n if (isObject(value) && !isArray(value) && !isDate(value)) {\n const align = contains(endInputRef.current, ev.target)\n ? \"end\"\n : \"start\"\n const minDate =\n value.start && align === \"end\"\n ? dayjs(value.start).add(1, \"day\").toDate()\n : undefined\n const maxDate =\n value.end && align === \"start\"\n ? dayjs(value.end).subtract(1, \"day\").toDate()\n : undefined\n const date = stringToDate(inputValue, minDate, maxDate)\n\n if (!date) return\n\n ev.preventDefault()\n\n setInputValue((prev) =>\n isObject(prev)\n ? Object.assign({}, prev, { [align]: dateToString(date) })\n : prev,\n )\n setValue((prev) =>\n isObject(prev) && !isDate(prev)\n ? { ...prev, [align]: date }\n : prev,\n )\n\n if (align === \"start\") endInputRef.current?.focus()\n } else {\n const date = stringToDate(inputValue)\n\n if (!date) return\n\n ev.preventDefault()\n\n if (isArray(value)) {\n setInputValue(\"\" as MaybeInputValue<Range>)\n\n setValue((prev) =>\n isArray(prev) &&\n !isIncludeDates(date, prev) &&\n (!isNumber(max) || prev.length < max)\n ? ([...prev, date] as MaybeDateValue<Multiple, Range>)\n : prev,\n )\n } else {\n setInputValue(dateToString(date) as MaybeInputValue<Range>)\n setValue(date as MaybeDateValue<Multiple, Range>)\n }\n }\n },\n },\n { preventDefault: false },\n )\n },\n [\n dateToString,\n disabled,\n max,\n open,\n setInputValue,\n setValue,\n stringToDate,\n value,\n ],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!interactive) return\n\n focusByClickRef.current = true\n\n if (allowInput)\n if (isObject(value) && !isArray(value) && !isDate(value))\n if (\n startInputRef.current &&\n contains(startInputRef.current, ev.target)\n ) {\n if (!isActiveElement(startInputRef.current, getDocument()!))\n ev.defaultPrevented = true\n\n startInputRef.current.focus()\n } else if (\n endInputRef.current &&\n contains(endInputRef.current, ev.target)\n ) {\n if (!isActiveElement(endInputRef.current, getDocument()!))\n ev.defaultPrevented = true\n\n endInputRef.current.focus()\n } else {\n startInputRef.current?.focus()\n }\n else startInputRef.current?.focus()\n\n if (openOnClick) onOpen()\n },\n [allowInput, interactive, onOpen, openOnClick, value, getDocument],\n )\n\n const onMouseDown = useCallback(\n (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n if (!openOnFocus) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [openOnFocus],\n )\n\n const onFieldFocus = useCallback(() => {\n if (allowInput) return\n\n if (openOnFocus) onOpen()\n\n focusByClickRef.current = false\n }, [allowInput, onOpen, openOnFocus])\n\n const onInputFocus = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n ev.preventDefault()\n ev.stopPropagation()\n\n setFocused(true)\n\n if (openOnFocus && !focusByClickRef.current) onOpen()\n\n focusByClickRef.current = false\n },\n [onOpen, openOnFocus],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n setFocused(false)\n\n if (\n contains(fieldRef.current, ev.relatedTarget) ||\n contains(contentRef.current, ev.relatedTarget)\n )\n ev.preventDefault()\n else if (isArray(value)) setInputValue(\"\" as MaybeInputValue<Range>)\n else if (isObject(value) && !isDate(value))\n setInputValue((prev) =>\n isObject(prev)\n ? ({\n end: dateToString(value.end),\n start: dateToString(value.start),\n } as MaybeInputValue<Range>)\n : prev,\n )\n else setInputValue(dateToString(value) as MaybeInputValue<Range>)\n },\n [dateToString, setInputValue, value],\n )\n\n const onClear = useCallback(() => {\n if (!interactive) return\n\n setValue((prev) => {\n if (isDate(prev)) return undefined as MaybeDateValue<Multiple, Range>\n else if (isArray(prev))\n return [] as unknown as MaybeDateValue<Multiple, Range>\n else if (isObject(prev))\n return { end: undefined, start: undefined } as MaybeDateValue<\n Multiple,\n Range\n >\n else return prev\n })\n\n setInputValue(\n (range ? { end: \"\", start: \"\" } : \"\") as MaybeInputValue<Range>,\n )\n\n if (focusOnClear)\n if (allowInput) startInputRef.current?.focus()\n else fieldRef.current?.focus()\n }, [allowInput, focusOnClear, interactive, range, setInputValue, setValue])\n\n useEffect(() => {\n if (!open) return\n\n return focusTransfer(\n contentRef.current,\n allowInput ? startInputRef.current : fieldRef.current,\n )\n }, [allowInput, open])\n\n useUpdateEffect(() => {\n setMonth((prev) => getAdjustedMonth(value, prev))\n }, [value, range])\n\n useUpdateEffect(() => {\n if (isArray(valueProp)) return\n\n if (isObject(valueProp) && !isDate(valueProp))\n setInputValue({\n end: dateToString(valueProp.end),\n start: dateToString(valueProp.start),\n } as MaybeInputValue<Range>)\n else setInputValue(dateToString(valueProp) as MaybeInputValue<Range>)\n }, [valueProp])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n \"data-range\": dataAttr(range),\n ...dataProps,\n ...props,\n }),\n [dataProps, range],\n )\n\n const getFieldProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getTriggerProps({\n ref: mergeRefs(ref, fieldRef),\n \"aria-haspopup\": \"dialog\",\n tabIndex: !allowInput ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFieldFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n\n [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n )\n\n const getInputProps: PropGetter<\"input\", { align?: InputAlign }> =\n useCallback(\n ({ align = \"start\", ...props } = {}) => {\n const inputProps: HTMLProps<\"input\"> = {\n style: {\n ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n ...props.style,\n },\n autoComplete: \"off\",\n disabled,\n readOnly,\n required,\n tabIndex: allowInput ? 0 : -1,\n ...dataProps,\n ...props,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onFocus: handlerAll(props.onFocus, onInputFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }\n\n if (isObject(inputValue)) {\n if (align === \"start\") {\n inputProps.ref = mergeRefs(props.ref, ref, startInputRef)\n inputProps.value = inputValue.start\n inputProps.placeholder = startPlaceholder\n } else {\n inputProps.ref = mergeRefs(props.ref, ref, endInputRef)\n inputProps.value = inputValue.end\n inputProps.placeholder = endPlaceholder\n }\n\n if (!inputValue.start && align === \"start\") {\n inputProps.id = id\n inputProps.name = name\n }\n\n if (!!inputValue.start && align === \"end\") {\n inputProps.id = id\n inputProps.name = name\n }\n } else {\n inputProps.ref = mergeRefs(props.ref, ref, startInputRef)\n inputProps.value = inputValue\n inputProps.id = id\n inputProps.name = name\n\n if (isArray(value)) {\n inputProps.style = {\n ...(!focused && !!value.length\n ? visuallyHiddenAttributes.style\n : {}),\n ...inputProps.style,\n }\n inputProps.placeholder = !value.length\n ? startPlaceholder\n : undefined\n inputProps[\"data-max\"] = dataAttr(\n isNumber(max) && value.length >= max,\n )\n } else {\n inputProps.placeholder = startPlaceholder\n }\n }\n\n return inputProps\n },\n [\n allowInput,\n dataProps,\n disabled,\n endPlaceholder,\n focused,\n id,\n inputValue,\n max,\n name,\n onBlur,\n onInputFocus,\n onInputChange,\n onKeyDown,\n onMouseDown,\n readOnly,\n ref,\n required,\n startPlaceholder,\n value,\n ],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getComboboxContentProps({\n ref: mergeRefs(ref, contentRef),\n role: \"dialog\",\n ...props,\n }),\n [getComboboxContentProps],\n )\n\n const getCalendarProps: PropGetter<UseCalendarProps<Multiple, Range>> =\n useCallback(\n (props) =>\n ({\n disabled: !interactive,\n format: calendarFormat,\n locale,\n max,\n maxDate,\n minDate,\n month,\n multiple,\n range,\n value,\n onChange,\n onChangeMonth: setMonth,\n ...calendarProps,\n ...props,\n }) as UseCalendarProps<Multiple, Range>,\n [\n interactive,\n calendarFormat,\n locale,\n max,\n maxDate,\n minDate,\n month,\n multiple,\n range,\n value,\n onChange,\n setMonth,\n calendarProps,\n ],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n const getClearIconProps: PropGetter = useCallback(\n (props = {}) =>\n getIconProps({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Clear value\"),\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClear),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, { Enter: onClear, Space: onClear }),\n ),\n }),\n [getIconProps, interactive, onClear, t],\n )\n\n return {\n children,\n dateToString,\n inputValue,\n interactive,\n month,\n open,\n range,\n separator,\n setInputValue,\n setMonth,\n setValue,\n stringToDate,\n value,\n getCalendarProps,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n popoverProps,\n onChange,\n onClose,\n onInputChange,\n onOpen,\n }\n}\n\nexport type UseDatePickerReturn = ReturnType<typeof useDatePicker>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-date-picker.js","names":[],"sources":["../../../../src/components/date-picker/use-date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { Dict } from \"../../utils\"\nimport type {\n CalendarFormat,\n MaybeDateValue,\n UseCalendarProps,\n} from \"../calendar\"\nimport type { FieldProps } from \"../field\"\nimport dayjs from \"dayjs\"\nimport {\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n ariaAttr,\n cast,\n contains,\n dataAttr,\n focusTransfer,\n handlerAll,\n isActiveElement,\n isArray,\n isComposing,\n isDate,\n isNumber,\n isObject,\n mergeRefs,\n runIfFn,\n runKeyAction,\n useUpdateEffect,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport {\n DEFAULT_MAX_DATE,\n DEFAULT_MIN_DATE,\n getAdjustedMonth,\n isAfterDate,\n isBeforeDate,\n isIncludeDates,\n updateMaybeDateValue,\n useCalendarProps,\n} from \"../calendar\"\nimport { useFieldProps } from \"../field\"\nimport { useDateTimeFormat } from \"../format\"\n\nexport interface DatePickerFormat extends CalendarFormat {\n input?: Intl.DateTimeFormatOptions | null\n}\n\ntype InputAlign = \"end\" | \"start\"\ntype MaybeInputValue<Range extends boolean = false> = Range extends true\n ? { end?: string; start?: string }\n : string | undefined\n\ninterface DatePickerRenderProps {\n count: number\n date: Date\n focused: boolean\n index: number\n separator: string\n value: string\n onClear: () => void\n max?: number\n}\n\nexport interface DatePickerRender {\n (props: DatePickerRenderProps): ReactNode\n}\n\nconst defaultRender: DatePickerRender = ({\n count,\n focused,\n index,\n max,\n separator,\n value,\n}) => {\n const last = count - 1 === index\n\n return (\n <span style={{ marginInlineEnd: \"var(--gap)\" }}>\n {value}\n {((!isNumber(max) || count < max) && focused) || !last ? separator : null}\n </span>\n )\n}\n\nexport interface UseDatePickerProps<\n Multiple extends boolean = false,\n Range extends boolean = false,\n>\n extends\n Omit<UseCalendarProps<Multiple, Range>, \"format\" | \"ref\">,\n Omit<\n UseComboboxProps,\n \"defaultValue\" | \"initialFocusValue\" | \"onChange\" | \"ref\" | \"value\"\n >,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /**\n * If `true`, allows input.\n *\n * @default true\n */\n allowInput?: boolean\n /**\n * If `true`, allows input of dates beyond the `minDate` and `maxDate` restrictions.\n *\n * @default true\n */\n allowInputBeyond?: boolean\n /**\n * If `true`, the date picker will be closed when the input value changes.\n *\n * @default false\n */\n closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n /**\n * The initial value of the input.\n */\n defaultInputValue?: MaybeInputValue<Range>\n /**\n * If `true`, the input will be focused when the clear icon is clicked.\n *\n * @default true\n */\n focusOnClear?: boolean\n /**\n * The format used for conversion.\n * Check the docs to see the format of possible modifiers you can pass.\n *\n * @see https://day.js.org/docs/en/display/format#list-of-localized-formats\n */\n format?: DatePickerFormat\n /**\n * The `id` attribute of the input element.\n */\n id?: string\n /**\n * The value of the input.\n */\n inputValue?: MaybeInputValue<Range>\n /**\n * The `name` attribute of the input element.\n */\n name?: string\n /**\n * If `true`, the date picker will be opened when the input value changes.\n *\n * @default true\n */\n openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n /**\n * If `true`, the date picker will be opened when the input is focused.\n *\n * @default true\n */\n openOnFocus?: boolean\n /**\n * The pattern used to check the input element.\n */\n pattern?: RegExp\n /**\n * The placeholder for date picker.\n */\n placeholder?: string\n /**\n * The visual separator between each value.\n *\n * @default ','\n */\n separator?: string\n /**\n * The callback invoked when input value state changes.\n */\n onInputChange?: (value: MaybeInputValue<Range>) => void\n /**\n * Function that converts the input value to Date type.\n */\n parseDate?: (value: string) => Date | undefined\n /**\n * The function to render the selected date.\n */\n render?: (props: DatePickerRenderProps) => ReactNode\n}\n\nexport const useDatePicker = <\n Multiple extends boolean = false,\n Range extends boolean = false,\n>({\n maxDate = DEFAULT_MAX_DATE,\n minDate = DEFAULT_MIN_DATE,\n ...props\n}: UseDatePickerProps<Multiple, Range> = {}) => {\n if (dayjs(minDate).isAfter(dayjs(maxDate))) maxDate = minDate\n\n const { getDocument } = useEnvironment()\n const { locale: defaultLocale, t } = useI18n(\"datePicker\")\n const {\n props: {\n id,\n ref,\n name,\n allowInput = true,\n allowInputBeyond = false,\n closeOnChange = false,\n multiple = false,\n closeOnSelect = !multiple,\n defaultInputValue,\n defaultMonth = new Date(),\n range = false,\n defaultValue = (range\n ? { end: undefined, start: undefined }\n : multiple\n ? []\n : undefined) as MaybeDateValue<Multiple, Range>,\n disabled,\n focusOnClear = true,\n format,\n inputValue: inputValueProp,\n locale = defaultLocale,\n max,\n month: monthProp,\n openOnChange = true,\n openOnClick = true,\n openOnFocus = true,\n parseDate,\n pattern,\n placeholder: placeholderProp,\n placement = \"end-start\",\n readOnly,\n render = defaultRender,\n required,\n separator = range ? \"-\" : \",\",\n value: valueProp,\n onChange: onChangeProp,\n onChangeMonth: onChangeMonthProp,\n onInputChange: onInputChangeProp,\n ...computedProps\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const dateTimeFormat = useDateTimeFormat({ locale })\n const { calendarFormat, inputFormat } = useMemo(() => {\n const { input: inputFormat, ...calendarFormat } = format ?? {}\n const defaultInputFormat: Intl.DateTimeFormatOptions = {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n }\n\n return {\n calendarFormat,\n inputFormat:\n inputFormat !== null ? (inputFormat ?? defaultInputFormat) : undefined,\n }\n }, [format])\n const [calendarProps, rest] = useCalendarProps<Multiple, Range>(computedProps)\n const { excludeDate } = calendarProps\n const fieldRef = useRef<HTMLDivElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const startInputRef = useRef<HTMLInputElement>(null)\n const endInputRef = useRef<HTMLInputElement>(null)\n const focusByClickRef = useRef<boolean>(false)\n const [focused, setFocused] = useState(false)\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue as MaybeDateValue<Multiple, Range>,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [month, setMonth] = useControllableState({\n defaultValue: () => {\n let value = defaultMonth\n\n if (dayjs(minDate).isAfter(dayjs(defaultMonth)))\n value = dayjs(minDate).set(\"date\", 1).toDate()\n\n if (valueProp) value = getAdjustedMonth(valueProp, value)\n else if (defaultValue) value = getAdjustedMonth(defaultValue, value)\n\n return value\n },\n value: monthProp,\n onChange: onChangeMonthProp,\n })\n const stringToDate = useCallback(\n (value: string, start: Date = minDate, end: Date = maxDate) => {\n let date = parseDate?.(value)\n\n if (!date && dayjs(value).isValid())\n date = dayjs(value).locale(locale).toDate()\n\n if (date == null) return undefined\n if (excludeDate?.(date)) return undefined\n\n if (!allowInputBeyond) {\n if (isBeforeDate(date, start)) date = start\n if (isAfterDate(date, end)) date = end\n }\n\n return date\n },\n [allowInputBeyond, excludeDate, locale, maxDate, minDate, parseDate],\n )\n const dateToString = useCallback(\n (date?: Date) => {\n if (date == null) return \"\"\n\n return dateTimeFormat(date, inputFormat)\n },\n [dateTimeFormat, inputFormat],\n )\n const [inputValue, setInputValue] = useControllableState({\n defaultValue: () => {\n if (defaultInputValue)\n if (isObject(defaultInputValue)) {\n if (dayjs(defaultInputValue.start).isValid())\n defaultInputValue.start = dateTimeFormat(\n dayjs(defaultInputValue.start).toDate(),\n inputFormat,\n )\n\n if (dayjs(defaultInputValue.end).isValid())\n defaultInputValue.end = dateTimeFormat(\n dayjs(defaultInputValue.end).toDate(),\n inputFormat,\n )\n\n return defaultInputValue\n } else {\n if (dayjs(defaultInputValue).isValid())\n return dateTimeFormat(\n dayjs(defaultInputValue).toDate(),\n inputFormat,\n ) as MaybeInputValue<Range>\n else return defaultInputValue\n }\n else if (isDate(value))\n return dateToString(value) as MaybeInputValue<Range>\n else if (isObject(value) && !isArray(value))\n return {\n end: dateToString(value.end),\n start: dateToString(value.start),\n } as MaybeInputValue<Range>\n else return \"\" as MaybeInputValue<Range>\n },\n value: inputValueProp,\n onChange: onInputChangeProp,\n })\n const {\n interactive,\n open,\n getContentProps: getComboboxContentProps,\n getTriggerProps,\n popoverProps,\n onClose,\n onOpen,\n } = useCombobox({\n disabled,\n matchWidth: false,\n openOnClick: false,\n openOnEnter: !allowInput,\n openOnSpace: !allowInput,\n placement,\n readOnly,\n transferFocus: false,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...rest,\n })\n const children = useMemo<ReactNode>(() => {\n if (!isArray(value)) return null\n\n const count = value.length\n\n return value.map((date, index) => {\n const value = dateToString(date)\n\n const onClear = (ev?: MouseEvent<HTMLElement>) => {\n ev?.preventDefault()\n ev?.stopPropagation()\n\n setValue(\n (prev) =>\n updateMaybeDateValue(date, max)(prev) as MaybeDateValue<\n Multiple,\n Range\n >,\n )\n }\n\n const component = render({\n count,\n date,\n focused,\n index,\n max,\n separator,\n value,\n onClear,\n })\n\n if (isValidElement<Dict>(component))\n return cloneElement(component, { ...component.props, key: index })\n else return component\n })\n }, [dateToString, focused, max, render, separator, setValue, value])\n const { endPlaceholder, startPlaceholder } = useMemo(() => {\n if (range) {\n const startPlaceholder =\n placeholderProp ?? dateTimeFormat(new Date(), inputFormat)\n const endPlaceholder =\n placeholderProp ??\n dateTimeFormat(dayjs().add(1, \"day\").toDate(), inputFormat)\n\n return { endPlaceholder, startPlaceholder }\n } else {\n const placeholder =\n placeholderProp ?? dateTimeFormat(new Date(), inputFormat)\n\n return { endPlaceholder: placeholder, startPlaceholder: placeholder }\n }\n }, [dateTimeFormat, inputFormat, placeholderProp, range])\n\n const onChange = useCallback(\n (value: MaybeDateValue<Multiple, Range>) => {\n setValue(value)\n\n if (isArray(value)) setInputValue(\"\" as MaybeInputValue<Range>)\n else if (isObject(value) && !isDate(value))\n setInputValue({\n end: dateToString(value.end),\n start: dateToString(value.start),\n } as MaybeInputValue<Range>)\n else setInputValue(dateToString(value) as MaybeInputValue<Range>)\n\n if (!closeOnSelect) return\n\n if (isObject(value) && !isArray(value) && !isDate(value)) {\n if (value.end && value.start) onClose()\n } else {\n onClose()\n }\n },\n [setValue, closeOnSelect, setInputValue, dateToString, onClose],\n )\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!allowInput) return\n if (isArray(value) && value.length === max) return\n\n if (runIfFn(closeOnChange, ev)) onClose()\n else if (runIfFn(openOnChange, ev)) onOpen()\n\n let inputValue = ev.target.value\n\n if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n if (isArray(value)) {\n const date = stringToDate(inputValue)\n\n setInputValue(inputValue as MaybeInputValue<Range>)\n\n if (date) setMonth(dayjs(date).set(\"date\", 1).toDate())\n } else if (isObject(value) && !isDate(value)) {\n const align = contains(endInputRef.current, ev.target) ? \"end\" : \"start\"\n const minDate =\n value.start && align === \"end\"\n ? dayjs(value.start).add(1, \"day\").toDate()\n : undefined\n const maxDate =\n value.end && align === \"start\"\n ? dayjs(value.end).subtract(1, \"day\").toDate()\n : undefined\n const date = stringToDate(inputValue, minDate, maxDate)\n\n setInputValue((prev) =>\n isObject(prev)\n ? Object.assign({}, prev, { [align]: inputValue })\n : prev,\n )\n setValue((prev) =>\n isObject(prev) && !isDate(prev) ? { ...prev, [align]: date } : prev,\n )\n } else {\n const date = stringToDate(inputValue)\n\n setInputValue(inputValue as MaybeInputValue<Range>)\n setValue(date as MaybeDateValue<Multiple, Range>)\n }\n },\n [\n allowInput,\n closeOnChange,\n max,\n onClose,\n onOpen,\n openOnChange,\n pattern,\n setInputValue,\n setMonth,\n setValue,\n stringToDate,\n value,\n ],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (disabled || isComposing(ev)) return\n\n const inputValue = cast<HTMLInputElement>(ev.target).value\n\n runKeyAction(\n ev,\n {\n Backspace: (ev) => {\n if (isArray(value)) {\n if (inputValue.length) return\n\n ev.preventDefault()\n\n setValue((prev) =>\n isArray(prev)\n ? (prev.slice(0, -1) as MaybeDateValue<Multiple, Range>)\n : prev,\n )\n } else if (isObject(value) && !isDate(value)) {\n if (inputValue.length) return\n if (!contains(endInputRef.current, ev.target)) return\n\n ev.preventDefault()\n\n setInputValue({ end: \"\", start: \"\" } as MaybeInputValue<Range>)\n setValue({ end: undefined, start: undefined } as MaybeDateValue<\n Multiple,\n Range\n >)\n\n startInputRef.current?.focus()\n }\n },\n Enter: (ev) => {\n if (!open || !inputValue.length) return\n\n if (isObject(value) && !isArray(value) && !isDate(value)) {\n const align = contains(endInputRef.current, ev.target)\n ? \"end\"\n : \"start\"\n const minDate =\n value.start && align === \"end\"\n ? dayjs(value.start).add(1, \"day\").toDate()\n : undefined\n const maxDate =\n value.end && align === \"start\"\n ? dayjs(value.end).subtract(1, \"day\").toDate()\n : undefined\n const date = stringToDate(inputValue, minDate, maxDate)\n\n if (!date) return\n\n ev.preventDefault()\n\n setInputValue((prev) =>\n isObject(prev)\n ? Object.assign({}, prev, { [align]: dateToString(date) })\n : prev,\n )\n setValue((prev) =>\n isObject(prev) && !isDate(prev)\n ? { ...prev, [align]: date }\n : prev,\n )\n\n if (align === \"start\") endInputRef.current?.focus()\n } else {\n const date = stringToDate(inputValue)\n\n if (!date) return\n\n ev.preventDefault()\n\n if (isArray(value)) {\n setInputValue(\"\" as MaybeInputValue<Range>)\n\n setValue((prev) =>\n isArray(prev) &&\n !isIncludeDates(date, prev) &&\n (!isNumber(max) || prev.length < max)\n ? ([...prev, date] as MaybeDateValue<Multiple, Range>)\n : prev,\n )\n } else {\n setInputValue(dateToString(date) as MaybeInputValue<Range>)\n setValue(date as MaybeDateValue<Multiple, Range>)\n }\n }\n },\n },\n { preventDefault: false },\n )\n },\n [\n dateToString,\n disabled,\n max,\n open,\n setInputValue,\n setValue,\n stringToDate,\n value,\n ],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!interactive) return\n\n focusByClickRef.current = true\n\n if (allowInput)\n if (isObject(value) && !isArray(value) && !isDate(value))\n if (\n startInputRef.current &&\n contains(startInputRef.current, ev.target)\n ) {\n if (!isActiveElement(startInputRef.current, getDocument()!))\n ev.defaultPrevented = true\n\n startInputRef.current.focus()\n } else if (\n endInputRef.current &&\n contains(endInputRef.current, ev.target)\n ) {\n if (!isActiveElement(endInputRef.current, getDocument()!))\n ev.defaultPrevented = true\n\n endInputRef.current.focus()\n } else {\n startInputRef.current?.focus()\n }\n else startInputRef.current?.focus()\n\n if (openOnClick) onOpen()\n },\n [allowInput, interactive, onOpen, openOnClick, value, getDocument],\n )\n\n const onMouseDown = useCallback(\n (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n if (!openOnFocus) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [openOnFocus],\n )\n\n const onFieldFocus = useCallback(() => {\n if (allowInput) return\n\n if (openOnFocus) onOpen()\n\n focusByClickRef.current = false\n }, [allowInput, onOpen, openOnFocus])\n\n const onInputFocus = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n ev.preventDefault()\n ev.stopPropagation()\n\n setFocused(true)\n\n if (openOnFocus && !focusByClickRef.current) onOpen()\n\n focusByClickRef.current = false\n },\n [onOpen, openOnFocus],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLInputElement>) => {\n setFocused(false)\n\n if (\n contains(fieldRef.current, ev.relatedTarget) ||\n contains(contentRef.current, ev.relatedTarget)\n )\n ev.preventDefault()\n else if (isArray(value)) setInputValue(\"\" as MaybeInputValue<Range>)\n else if (isObject(value) && !isDate(value))\n setInputValue((prev) =>\n isObject(prev)\n ? ({\n end: dateToString(value.end),\n start: dateToString(value.start),\n } as MaybeInputValue<Range>)\n : prev,\n )\n else setInputValue(dateToString(value) as MaybeInputValue<Range>)\n },\n [dateToString, setInputValue, value],\n )\n\n const onClear = useCallback(() => {\n if (!interactive) return\n\n setValue((prev) => {\n if (isDate(prev)) return undefined as MaybeDateValue<Multiple, Range>\n else if (isArray(prev))\n return [] as unknown as MaybeDateValue<Multiple, Range>\n else if (isObject(prev))\n return { end: undefined, start: undefined } as MaybeDateValue<\n Multiple,\n Range\n >\n else return prev\n })\n\n setInputValue(\n (range ? { end: \"\", start: \"\" } : \"\") as MaybeInputValue<Range>,\n )\n\n if (focusOnClear)\n if (allowInput) startInputRef.current?.focus()\n else fieldRef.current?.focus()\n }, [allowInput, focusOnClear, interactive, range, setInputValue, setValue])\n\n useEffect(() => {\n if (!open) return\n\n return focusTransfer(\n contentRef.current,\n allowInput ? startInputRef.current : fieldRef.current,\n )\n }, [allowInput, open])\n\n useUpdateEffect(() => {\n setMonth((prev) => getAdjustedMonth(value, prev))\n }, [value, range])\n\n useUpdateEffect(() => {\n if (isArray(valueProp)) return\n\n if (isObject(valueProp) && !isDate(valueProp))\n setInputValue({\n end: dateToString(valueProp.end),\n start: dateToString(valueProp.start),\n } as MaybeInputValue<Range>)\n else setInputValue(dateToString(valueProp) as MaybeInputValue<Range>)\n }, [valueProp])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n \"data-range\": dataAttr(range),\n ...dataProps,\n ...props,\n }),\n [dataProps, range],\n )\n\n const getFieldProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getTriggerProps({\n ref: mergeRefs(ref, fieldRef),\n \"aria-haspopup\": \"dialog\",\n tabIndex: !allowInput ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFieldFocus),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }),\n\n [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n )\n\n const getInputProps: PropGetter<\"input\", { align?: InputAlign }> =\n useCallback(\n ({ align = \"start\", ...props } = {}) => {\n const inputProps: HTMLProps<\"input\"> = {\n style: {\n ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n ...props.style,\n },\n autoComplete: \"off\",\n disabled,\n readOnly,\n required,\n tabIndex: allowInput ? 0 : -1,\n ...dataProps,\n ...props,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onFocus: handlerAll(props.onFocus, onInputFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n }\n\n if (isObject(inputValue)) {\n if (align === \"start\") {\n inputProps.ref = mergeRefs(props.ref, ref, startInputRef)\n inputProps.value = inputValue.start\n inputProps.placeholder = startPlaceholder\n } else {\n inputProps.ref = mergeRefs(props.ref, ref, endInputRef)\n inputProps.value = inputValue.end\n inputProps.placeholder = endPlaceholder\n }\n\n if (!inputValue.start && align === \"start\") {\n inputProps.id = id\n inputProps.name = name\n }\n\n if (!!inputValue.start && align === \"end\") {\n inputProps.id = id\n inputProps.name = name\n }\n } else {\n inputProps.ref = mergeRefs(props.ref, ref, startInputRef)\n inputProps.value = inputValue\n inputProps.id = id\n inputProps.name = name\n\n if (isArray(value)) {\n inputProps.style = {\n ...(!focused && !!value.length\n ? visuallyHiddenAttributes.style\n : {}),\n ...inputProps.style,\n }\n inputProps.placeholder = !value.length\n ? startPlaceholder\n : undefined\n inputProps[\"data-max\"] = dataAttr(\n isNumber(max) && value.length >= max,\n )\n } else {\n inputProps.placeholder = startPlaceholder\n }\n }\n\n return inputProps\n },\n [\n allowInput,\n dataProps,\n disabled,\n endPlaceholder,\n focused,\n id,\n inputValue,\n max,\n name,\n onBlur,\n onInputFocus,\n onInputChange,\n onKeyDown,\n onMouseDown,\n readOnly,\n ref,\n required,\n startPlaceholder,\n value,\n ],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) =>\n getComboboxContentProps({\n ref: mergeRefs(ref, contentRef),\n role: \"dialog\",\n ...props,\n }),\n [getComboboxContentProps],\n )\n\n const getCalendarProps: PropGetter<UseCalendarProps<Multiple, Range>> =\n useCallback(\n (props) =>\n ({\n disabled: !interactive,\n format: calendarFormat,\n locale,\n max,\n maxDate,\n minDate,\n month,\n multiple,\n range,\n value,\n onChange,\n onChangeMonth: setMonth,\n ...calendarProps,\n ...props,\n }) as UseCalendarProps<Multiple, Range>,\n [\n interactive,\n calendarFormat,\n locale,\n max,\n maxDate,\n minDate,\n month,\n multiple,\n range,\n value,\n onChange,\n setMonth,\n calendarProps,\n ],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props) => ({ ...dataProps, ...props }),\n [dataProps],\n )\n\n const getClearIconProps: PropGetter = useCallback(\n (props = {}) =>\n getIconProps({\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-label\": t(\"Clear value\"),\n role: \"button\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n onClick: handlerAll(props.onClick, onClear),\n onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n runKeyAction(ev, { Enter: onClear, Space: onClear }),\n ),\n }),\n [getIconProps, interactive, onClear, t],\n )\n\n return {\n children,\n dateToString,\n inputValue,\n interactive,\n month,\n open,\n range,\n separator,\n setInputValue,\n setMonth,\n setValue,\n stringToDate,\n value,\n getCalendarProps,\n getClearIconProps,\n getContentProps,\n getFieldProps,\n getIconProps,\n getInputProps,\n getRootProps,\n popoverProps,\n onChange,\n onClose,\n onInputChange,\n onOpen,\n }\n}\n\nexport type UseDatePickerReturn = ReturnType<typeof useDatePicker>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","names":["motion"],"sources":["../../../../src/components/drawer/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { SlideProps } from \"../slide\"\nimport type { DrawerStyle } from \"./drawer.style\"\nimport type { UseDrawerProps, UseDrawerReturn } from \"./use-drawer\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { Slide } from \"../slide\"\nimport { drawerStyle } from \"./drawer.style\"\nimport { useDrawer } from \"./use-drawer\"\n\ninterface ComponentContext\n extends\n Omit<UseDrawerReturn, \"getRootProps\">,\n Pick<\n DrawerRootProps,\n \"duration\" | \"placement\" | \"withCloseButton\" | \"withDragBar\"\n > {}\n\nexport interface DrawerRootProps\n extends\n ThemeProps<DrawerStyle>,\n Omit<UseDrawerProps, \"placement\" | \"title\">,\n Pick<\n FocusLockProps,\n | \"autoFocus\"\n | \"finalFocusRef\"\n | \"initialFocusRef\"\n | \"lockFocusAcrossFrames\"\n | \"restoreFocus\"\n >,\n ShorthandDrawerContentProps {\n /**\n * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n *\n * @default false.\n */\n allowPinchZoom?: boolean\n /**\n * If `true`, scrolling will be disabled on the `body` when the drawer opens.\n *\n * @default true\n */\n blockScrollOnMount?: boolean\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProps[\"duration\"]\n /**\n * The modal trigger to use.\n */\n trigger?: ReactNode\n /**\n * If `true`, display the drawer close button.\n *\n * @default true\n */\n withCloseButton?: boolean\n /**\n * If `true`, display the drag bar when `closeOnDrag` is `true`.\n *\n * @default true\n */\n withDragBar?: boolean\n /**\n * If `true`, display the drawer overlay.\n *\n * @default true\n */\n withOverlay?: boolean\n /**\n * Props to be forwarded to the portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * Callback function to run side effects after the drawer has closed.\n */\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: DrawerPropsContext,\n useComponentContext,\n usePropsContext: useDrawerPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<DrawerRootProps, DrawerStyle, ComponentContext>(\n \"drawer\",\n drawerStyle,\n)\n\nexport { DrawerPropsContext, useDrawerPropsContext }\n\n/**\n * `Drawer` is a component for a panel that appears from the edge of the screen.\n *\n * @see https://yamada-ui.com/docs/components/drawer\n */\nexport const DrawerRoot = withProvider<\"div\", DrawerRootProps, \"placement\">(\n ({\n allowPinchZoom = false,\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n closeOnDrag,\n dragConstraints,\n dragElastic,\n dragOffset,\n dragVelocity,\n duration = { enter: 0.4, exit: 0.3 },\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n placement: placementProp,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = !closeOnDrag,\n withDragBar = true,\n withOverlay = true,\n portalProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const placement = useValue(placementProp)\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n DrawerOpenTrigger,\n DrawerOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useDrawer({\n closeOnDrag,\n dragConstraints,\n dragElastic,\n dragOffset,\n dragVelocity,\n placement,\n ...props,\n })\n const customOpenTrigger = trigger ? (\n <DrawerOpenTrigger>{trigger}</DrawerOpenTrigger>\n ) : null\n\n const context = useMemo(\n () => ({\n duration,\n open,\n placement,\n withCloseButton,\n withDragBar,\n ...rest,\n }),\n [duration, open, withDragBar, placement, withCloseButton, rest],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <DrawerOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandDrawerContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"placement\"] },\n)()\n\nexport interface DrawerOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerOpenTrigger = withContext<\"button\", DrawerOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface DrawerCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerCloseTrigger = withContext<\n \"button\",\n DrawerCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n undefined,\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n },\n)\n\nexport interface DrawerCloseButtonProps extends CloseButtonProps {}\n\nexport const DrawerCloseButton = withContext<\"button\", DrawerCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface DrawerOverlayProps extends HTMLMotionProps {}\n\nexport const DrawerOverlay = withContext<\"div\", DrawerOverlayProps>((props) => {\n const { duration, getOverlayProps } = useComponentContext()\n\n return (\n <motion.div\n animate=\"enter\"\n custom={{ duration }}\n exit=\"exit\"\n initial=\"exit\"\n variants={fadeVariants}\n {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n />\n )\n}, \"overlay\")()\n\nexport interface DrawerContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const DrawerContent = withContext<\"div\", DrawerContentProps>(\n ({ children, ...rest }) => {\n const {\n closeOnDrag,\n duration,\n open,\n placement,\n withCloseButton,\n withDragBar,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton, customDragBar] =\n useSplitChildren(children, DrawerCloseButton, DrawerDragBar)\n\n return (\n <Slide\n as=\"section\"\n duration={duration}\n open={open}\n placement={placement}\n {...(getContentProps(rest) as SlideProps)}\n >\n {customCloseButton ?? (withCloseButton ? <DrawerCloseButton /> : null)}\n {customDragBar ??\n (withDragBar && closeOnDrag ? <DrawerDragBar /> : null)}\n\n {omittedChildren}\n </Slide>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandDrawerContentProps {\n /**\n * The drawer body to use.\n */\n body?: DrawerBodyProps | ReactNode\n /**\n * The drawer cancel button to use.\n */\n cancel?: ButtonProps | ReactNode\n /**\n * The drawer footer to use.\n */\n footer?: DrawerFooterProps | ReactNode\n /**\n * The drawer header to use.\n */\n header?: DrawerHeaderProps | ReactNode\n /**\n * The drawer middle button to use.\n */\n middle?: ButtonProps | ReactNode\n /**\n * The drawer success button to use.\n */\n success?: ButtonProps | ReactNode\n /**\n * The drawer title to use.\n */\n title?: DrawerTitleProps | ReactNode\n /**\n * The callback invoked when cancel button clicked.\n */\n onCancel?: (onClose: () => void) => void\n /**\n * The callback invoked when middle button clicked.\n */\n onMiddle?: (onClose: () => void) => void\n /**\n * The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandDrawerContent: FC<ShorthandDrawerContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(DrawerHeader, header)\n const customTitle = wrapOrPassProps(DrawerTitle, title)\n const customBody = wrapOrPassProps(DrawerBody, body)\n const customFooter = wrapOrPassProps(DrawerFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <DrawerContent>\n {customHeader ??\n (customTitle ? <DrawerHeader>{customTitle}</DrawerHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel || customMiddle || customSuccess ? (\n <DrawerFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </DrawerFooter>\n ) : null)}\n </DrawerContent>\n )\n}\n\nexport interface DrawerDragBarProps extends HTMLStyledProps {}\n\nexport const DrawerDragBar = withContext<\"div\", DrawerDragBarProps>(\n \"div\",\n \"dragBar\",\n)(undefined, (props) => {\n const { getDragBarProps } = useComponentContext()\n\n return { ...getDragBarProps(props) }\n})\n\nexport interface DrawerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const DrawerHeader = withContext<\"header\", DrawerHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return { ...getHeaderProps(props) }\n})\n\nexport interface DrawerTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const DrawerTitle = withContext<\"h2\", DrawerTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface DrawerBodyProps extends HTMLStyledProps {}\n\nexport const DrawerBody = withContext<\"div\", DrawerBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(props) }\n },\n)\n\nexport interface DrawerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const DrawerFooter = withContext<\"footer\", DrawerFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"drawer.js","names":["motion"],"sources":["../../../../src/components/drawer/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { SlideProps } from \"../slide\"\nimport type { DrawerStyle } from \"./drawer.style\"\nimport type { UseDrawerProps, UseDrawerReturn } from \"./use-drawer\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { Slide } from \"../slide\"\nimport { drawerStyle } from \"./drawer.style\"\nimport { useDrawer } from \"./use-drawer\"\n\ninterface ComponentContext\n extends\n Omit<UseDrawerReturn, \"getRootProps\">,\n Pick<\n DrawerRootProps,\n \"duration\" | \"placement\" | \"withCloseButton\" | \"withDragBar\"\n > {}\n\nexport interface DrawerRootProps\n extends\n ThemeProps<DrawerStyle>,\n Omit<UseDrawerProps, \"placement\" | \"title\">,\n Pick<\n FocusLockProps,\n | \"autoFocus\"\n | \"finalFocusRef\"\n | \"initialFocusRef\"\n | \"lockFocusAcrossFrames\"\n | \"restoreFocus\"\n >,\n ShorthandDrawerContentProps {\n /**\n * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n *\n * @default false.\n */\n allowPinchZoom?: boolean\n /**\n * If `true`, scrolling will be disabled on the `body` when the drawer opens.\n *\n * @default true\n */\n blockScrollOnMount?: boolean\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProps[\"duration\"]\n /**\n * The modal trigger to use.\n */\n trigger?: ReactNode\n /**\n * If `true`, display the drawer close button.\n *\n * @default true\n */\n withCloseButton?: boolean\n /**\n * If `true`, display the drag bar when `closeOnDrag` is `true`.\n *\n * @default true\n */\n withDragBar?: boolean\n /**\n * If `true`, display the drawer overlay.\n *\n * @default true\n */\n withOverlay?: boolean\n /**\n * Props to be forwarded to the portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * Callback function to run side effects after the drawer has closed.\n */\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: DrawerPropsContext,\n useComponentContext,\n usePropsContext: useDrawerPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<DrawerRootProps, DrawerStyle, ComponentContext>(\n \"drawer\",\n drawerStyle,\n)\n\nexport { DrawerPropsContext, useDrawerPropsContext }\n\n/**\n * `Drawer` is a component for a panel that appears from the edge of the screen.\n *\n * @see https://yamada-ui.com/docs/components/drawer\n */\nexport const DrawerRoot = withProvider<\"div\", DrawerRootProps, \"placement\">(\n ({\n allowPinchZoom = false,\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n closeOnDrag,\n dragConstraints,\n dragElastic,\n dragOffset,\n dragVelocity,\n duration = { enter: 0.4, exit: 0.3 },\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n placement: placementProp,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = !closeOnDrag,\n withDragBar = true,\n withOverlay = true,\n portalProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const placement = useValue(placementProp)\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n DrawerOpenTrigger,\n DrawerOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useDrawer({\n closeOnDrag,\n dragConstraints,\n dragElastic,\n dragOffset,\n dragVelocity,\n placement,\n ...props,\n })\n const customOpenTrigger = trigger ? (\n <DrawerOpenTrigger>{trigger}</DrawerOpenTrigger>\n ) : null\n\n const context = useMemo(\n () => ({\n duration,\n open,\n placement,\n withCloseButton,\n withDragBar,\n ...rest,\n }),\n [duration, open, withDragBar, placement, withCloseButton, rest],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <DrawerOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandDrawerContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"placement\"] },\n)()\n\nexport interface DrawerOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerOpenTrigger = withContext<\"button\", DrawerOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface DrawerCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerCloseTrigger = withContext<\n \"button\",\n DrawerCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n undefined,\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n },\n)\n\nexport interface DrawerCloseButtonProps extends CloseButtonProps {}\n\nexport const DrawerCloseButton = withContext<\"button\", DrawerCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface DrawerOverlayProps extends HTMLMotionProps {}\n\nexport const DrawerOverlay = withContext<\"div\", DrawerOverlayProps>((props) => {\n const { duration, getOverlayProps } = useComponentContext()\n\n return (\n <motion.div\n animate=\"enter\"\n custom={{ duration }}\n exit=\"exit\"\n initial=\"exit\"\n variants={fadeVariants}\n {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n />\n )\n}, \"overlay\")()\n\nexport interface DrawerContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const DrawerContent = withContext<\"div\", DrawerContentProps>(\n ({ children, ...rest }) => {\n const {\n closeOnDrag,\n duration,\n open,\n placement,\n withCloseButton,\n withDragBar,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton, customDragBar] =\n useSplitChildren(children, DrawerCloseButton, DrawerDragBar)\n\n return (\n <Slide\n as=\"section\"\n duration={duration}\n open={open}\n placement={placement}\n {...(getContentProps(rest) as SlideProps)}\n >\n {customCloseButton ?? (withCloseButton ? <DrawerCloseButton /> : null)}\n {customDragBar ??\n (withDragBar && closeOnDrag ? <DrawerDragBar /> : null)}\n\n {omittedChildren}\n </Slide>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandDrawerContentProps {\n /**\n * The drawer body to use.\n */\n body?: DrawerBodyProps | ReactNode\n /**\n * The drawer cancel button to use.\n */\n cancel?: ButtonProps | ReactNode\n /**\n * The drawer footer to use.\n */\n footer?: DrawerFooterProps | ReactNode\n /**\n * The drawer header to use.\n */\n header?: DrawerHeaderProps | ReactNode\n /**\n * The drawer middle button to use.\n */\n middle?: ButtonProps | ReactNode\n /**\n * The drawer success button to use.\n */\n success?: ButtonProps | ReactNode\n /**\n * The drawer title to use.\n */\n title?: DrawerTitleProps | ReactNode\n /**\n * The callback invoked when cancel button clicked.\n */\n onCancel?: (onClose: () => void) => void\n /**\n * The callback invoked when middle button clicked.\n */\n onMiddle?: (onClose: () => void) => void\n /**\n * The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandDrawerContent: FC<ShorthandDrawerContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(DrawerHeader, header)\n const customTitle = wrapOrPassProps(DrawerTitle, title)\n const customBody = wrapOrPassProps(DrawerBody, body)\n const customFooter = wrapOrPassProps(DrawerFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <DrawerContent>\n {customHeader ??\n (customTitle ? <DrawerHeader>{customTitle}</DrawerHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel || customMiddle || customSuccess ? (\n <DrawerFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </DrawerFooter>\n ) : null)}\n </DrawerContent>\n )\n}\n\nexport interface DrawerDragBarProps extends HTMLStyledProps {}\n\nexport const DrawerDragBar = withContext<\"div\", DrawerDragBarProps>(\n \"div\",\n \"dragBar\",\n)(undefined, (props) => {\n const { getDragBarProps } = useComponentContext()\n\n return { ...getDragBarProps(props) }\n})\n\nexport interface DrawerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const DrawerHeader = withContext<\"header\", DrawerHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return { ...getHeaderProps(props) }\n})\n\nexport interface DrawerTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const DrawerTitle = withContext<\"h2\", DrawerTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface DrawerBodyProps extends HTMLStyledProps {}\n\nexport const DrawerBody = withContext<\"div\", DrawerBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(props) }\n },\n)\n\nexport interface DrawerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const DrawerFooter = withContext<\"footer\", DrawerFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
|