@yamada-ui/react 2.0.10-dev-20260224132828 → 2.0.10-dev-20260226033228
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/use-accordion.cjs.map +1 -1
- package/dist/cjs/components/airy/airy.cjs.map +1 -1
- package/dist/cjs/components/autocomplete/use-autocomplete.cjs.map +1 -1
- package/dist/cjs/components/avatar/use-avatar.cjs.map +1 -1
- package/dist/cjs/components/button/button.cjs.map +1 -1
- package/dist/cjs/components/calendar/use-calendar.cjs.map +1 -1
- package/dist/cjs/components/checkbox/use-checkbox.cjs.map +1 -1
- package/dist/cjs/components/color-picker/use-color-picker.cjs.map +1 -1
- package/dist/cjs/components/date-picker/use-date-picker.cjs.map +1 -1
- package/dist/cjs/components/dropzone/use-dropzone.cjs.map +1 -1
- package/dist/cjs/components/field/field.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/for/for.cjs.map +1 -1
- package/dist/cjs/components/highlight/highlight.cjs.map +1 -1
- package/dist/cjs/components/infinite-scroll-area/use-infinite-scroll.cjs.map +1 -1
- package/dist/cjs/components/loading/loading-provider.cjs.map +1 -1
- package/dist/cjs/components/menu/use-menu.cjs.map +1 -1
- package/dist/cjs/components/notice/use-notice.cjs.map +1 -1
- package/dist/cjs/components/pagination/use-pagination.cjs.map +1 -1
- package/dist/cjs/components/password-input/use-strength-meter.cjs.map +1 -1
- package/dist/cjs/components/picture/picture.cjs.map +1 -1
- package/dist/cjs/components/pin-input/use-pin-input.cjs.map +1 -1
- package/dist/cjs/components/radio/use-radio.cjs.map +1 -1
- package/dist/cjs/components/rating/use-rating.cjs.map +1 -1
- package/dist/cjs/components/resizable/use-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/use-saturation-slider.cjs.map +1 -1
- package/dist/cjs/components/scroll-area/use-scroll-area.cjs.map +1 -1
- package/dist/cjs/components/segmented-control/use-segmented-control.cjs.map +1 -1
- package/dist/cjs/components/select/use-select.cjs.map +1 -1
- package/dist/cjs/components/slider/slider.cjs.map +1 -1
- package/dist/cjs/components/slider/use-slider.cjs.map +1 -1
- package/dist/cjs/components/snacks/snacks.cjs.map +1 -1
- package/dist/cjs/components/switch/use-switch.cjs.map +1 -1
- package/dist/cjs/components/table/table.cjs.map +1 -1
- package/dist/cjs/components/textarea/use-autosize.cjs.map +1 -1
- package/dist/cjs/components/toggle/use-toggle-group.cjs.map +1 -1
- package/dist/cjs/core/components/use-component-style.cjs.map +1 -1
- package/dist/cjs/core/css/styles.cjs.map +1 -1
- package/dist/cjs/core/css/utils.cjs.map +1 -1
- package/dist/cjs/core/system/breakpoint.cjs.map +1 -1
- package/dist/cjs/core/system/color-mode-provider.cjs.map +1 -1
- package/dist/cjs/core/system/layer.cjs.map +1 -1
- package/dist/cjs/core/system/storage-script.cjs.map +1 -1
- package/dist/cjs/core/system/styled.cjs.map +1 -1
- package/dist/cjs/core/system/use-system-color-mode.cjs.map +1 -1
- package/dist/cjs/hooks/use-async/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-boolean/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-clickable/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-combobox/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-controllable-state/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-local-storage/index.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/i18n-provider.cjs.map +1 -1
- package/dist/cjs/utils/context.cjs.map +1 -1
- package/dist/cjs/utils/store.cjs.map +1 -1
- package/dist/esm/components/accordion/use-accordion.js.map +1 -1
- package/dist/esm/components/airy/airy.js.map +1 -1
- package/dist/esm/components/autocomplete/use-autocomplete.js.map +1 -1
- package/dist/esm/components/avatar/use-avatar.js.map +1 -1
- package/dist/esm/components/button/button.js.map +1 -1
- package/dist/esm/components/calendar/use-calendar.js.map +1 -1
- package/dist/esm/components/checkbox/use-checkbox.js.map +1 -1
- package/dist/esm/components/color-picker/use-color-picker.js.map +1 -1
- package/dist/esm/components/date-picker/use-date-picker.js.map +1 -1
- package/dist/esm/components/dropzone/use-dropzone.js.map +1 -1
- package/dist/esm/components/field/field.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/for/for.js.map +1 -1
- package/dist/esm/components/highlight/highlight.js.map +1 -1
- package/dist/esm/components/infinite-scroll-area/use-infinite-scroll.js.map +1 -1
- package/dist/esm/components/loading/loading-provider.js.map +1 -1
- package/dist/esm/components/menu/use-menu.js.map +1 -1
- package/dist/esm/components/notice/use-notice.js.map +1 -1
- package/dist/esm/components/pagination/use-pagination.js.map +1 -1
- package/dist/esm/components/password-input/use-strength-meter.js.map +1 -1
- package/dist/esm/components/picture/picture.js.map +1 -1
- package/dist/esm/components/pin-input/use-pin-input.js.map +1 -1
- package/dist/esm/components/radio/use-radio.js.map +1 -1
- package/dist/esm/components/rating/use-rating.js.map +1 -1
- package/dist/esm/components/resizable/use-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/use-saturation-slider.js.map +1 -1
- package/dist/esm/components/scroll-area/use-scroll-area.js.map +1 -1
- package/dist/esm/components/segmented-control/use-segmented-control.js.map +1 -1
- package/dist/esm/components/select/use-select.js.map +1 -1
- package/dist/esm/components/slider/slider.js.map +1 -1
- package/dist/esm/components/slider/use-slider.js.map +1 -1
- package/dist/esm/components/snacks/snacks.js.map +1 -1
- package/dist/esm/components/switch/use-switch.js.map +1 -1
- package/dist/esm/components/table/table.js.map +1 -1
- package/dist/esm/components/textarea/use-autosize.js.map +1 -1
- package/dist/esm/components/toggle/use-toggle-group.js.map +1 -1
- package/dist/esm/core/components/use-component-style.js.map +1 -1
- package/dist/esm/core/css/styles.js.map +1 -1
- package/dist/esm/core/css/utils.js.map +1 -1
- package/dist/esm/core/system/breakpoint.js.map +1 -1
- package/dist/esm/core/system/color-mode-provider.js.map +1 -1
- package/dist/esm/core/system/layer.js.map +1 -1
- package/dist/esm/core/system/storage-script.js.map +1 -1
- package/dist/esm/core/system/styled.js.map +1 -1
- package/dist/esm/core/system/use-system-color-mode.js.map +1 -1
- package/dist/esm/hooks/use-async/index.js.map +1 -1
- package/dist/esm/hooks/use-boolean/index.js.map +1 -1
- package/dist/esm/hooks/use-clickable/index.js.map +1 -1
- package/dist/esm/hooks/use-combobox/index.js.map +1 -1
- package/dist/esm/hooks/use-controllable-state/index.js.map +1 -1
- package/dist/esm/hooks/use-local-storage/index.js.map +1 -1
- package/dist/esm/providers/i18n-provider/i18n-provider.js.map +1 -1
- package/dist/esm/utils/context.js.map +1 -1
- package/dist/esm/utils/store.js.map +1 -1
- package/dist/types/components/accordion/accordion.d.ts +2 -2
- package/dist/types/components/accordion/use-accordion.d.ts +15 -15
- package/dist/types/components/airy/airy.d.ts +10 -10
- package/dist/types/components/alert/alert.d.ts +2 -2
- package/dist/types/components/alpha-slider/alpha-slider.d.ts +2 -2
- package/dist/types/components/aspect-ratio/aspect-ratio.d.ts +2 -2
- package/dist/types/components/autocomplete/autocomplete.d.ts +2 -2
- package/dist/types/components/autocomplete/autocomplete.style.d.ts +1 -1
- package/dist/types/components/autocomplete/use-autocomplete.d.ts +18 -18
- package/dist/types/components/avatar/avatar.d.ts +5 -5
- package/dist/types/components/avatar/use-avatar-group.d.ts +2 -2
- package/dist/types/components/avatar/use-avatar.d.ts +19 -19
- package/dist/types/components/badge/badge.d.ts +2 -2
- package/dist/types/components/bleed/bleed.d.ts +2 -2
- package/dist/types/components/blockquote/blockquote.d.ts +2 -2
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +2 -2
- package/dist/types/components/breadcrumb/use-breadcrumb.d.ts +2 -2
- package/dist/types/components/button/button.d.ts +8 -8
- package/dist/types/components/button/icon-button.d.ts +2 -2
- package/dist/types/components/calendar/calendar.d.ts +2 -2
- package/dist/types/components/calendar/calendar.style.d.ts +2 -2
- package/dist/types/components/calendar/use-calendar.d.ts +12 -12
- package/dist/types/components/card/card.d.ts +2 -2
- package/dist/types/components/carousel/carousel.d.ts +2 -2
- package/dist/types/components/carousel/use-carousel.d.ts +3 -3
- package/dist/types/components/center/center.d.ts +2 -2
- package/dist/types/components/checkbox/checkbox.d.ts +4 -4
- package/dist/types/components/checkbox/use-checkbox-group.d.ts +2 -2
- package/dist/types/components/checkbox/use-checkbox.d.ts +8 -8
- package/dist/types/components/checkbox-card/checkbox-card.d.ts +4 -4
- package/dist/types/components/circle-progress/circle-progress.d.ts +2 -2
- package/dist/types/components/close-button/close-button.d.ts +2 -2
- package/dist/types/components/code/code.d.ts +2 -2
- package/dist/types/components/collapse/collapse.d.ts +2 -2
- package/dist/types/components/color-picker/color-picker.d.ts +2 -2
- package/dist/types/components/color-picker/use-color-picker.d.ts +12 -12
- package/dist/types/components/color-selector/color-selector.d.ts +2 -2
- package/dist/types/components/color-selector/color-selector.style.d.ts +2 -2
- package/dist/types/components/color-selector/use-color-selector.d.ts +3 -3
- package/dist/types/components/color-swatch/color-swatch.d.ts +2 -2
- package/dist/types/components/container/container.d.ts +2 -2
- package/dist/types/components/data-list/data-list.d.ts +2 -2
- package/dist/types/components/date-picker/date-picker.d.ts +2 -2
- package/dist/types/components/date-picker/use-date-picker.d.ts +21 -21
- package/dist/types/components/drawer/drawer.d.ts +2 -2
- package/dist/types/components/drawer/drawer.style.d.ts +2 -2
- package/dist/types/components/dropzone/dropzone.d.ts +4 -4
- package/dist/types/components/dropzone/use-dropzone.d.ts +4 -4
- package/dist/types/components/editable/editable.d.ts +4 -4
- package/dist/types/components/editable/use-editable.d.ts +2 -2
- package/dist/types/components/em/em.d.ts +2 -2
- package/dist/types/components/empty-state/empty-state.d.ts +2 -2
- package/dist/types/components/fade/fade.d.ts +2 -2
- package/dist/types/components/field/field.d.ts +4 -4
- package/dist/types/components/field/use-field-props.d.ts +3 -3
- package/dist/types/components/fieldset/fieldset.d.ts +3 -3
- package/dist/types/components/file-button/file-button.d.ts +2 -2
- package/dist/types/components/file-button/use-file-button.d.ts +18 -18
- package/dist/types/components/file-input/file-input.d.ts +8 -8
- package/dist/types/components/file-input/file-input.style.d.ts +1 -1
- package/dist/types/components/file-input/use-file-input.d.ts +15 -15
- package/dist/types/components/flex/flex.d.ts +2 -2
- package/dist/types/components/flip/flip.d.ts +12 -12
- package/dist/types/components/float/float.d.ts +2 -2
- package/dist/types/components/for/for.d.ts +8 -8
- package/dist/types/components/format/format-byte.d.ts +4 -4
- package/dist/types/components/format/format-date-time.d.ts +4 -4
- package/dist/types/components/format/format-number.d.ts +2 -2
- package/dist/types/components/grid/grid-item.d.ts +2 -2
- package/dist/types/components/grid/grid.d.ts +2 -2
- package/dist/types/components/group/group.d.ts +2 -2
- package/dist/types/components/group/use-group.d.ts +2 -2
- package/dist/types/components/heading/heading.d.ts +2 -2
- package/dist/types/components/highlight/highlight.d.ts +4 -4
- package/dist/types/components/hue-slider/hue-slider.d.ts +3 -3
- package/dist/types/components/icon/icon.d.ts +5 -5
- package/dist/types/components/image/image.d.ts +2 -2
- package/dist/types/components/indicator/indicator.d.ts +4 -4
- package/dist/types/components/infinite-scroll-area/infinite-scroll-area.d.ts +2 -2
- package/dist/types/components/infinite-scroll-area/use-infinite-scroll.d.ts +2 -2
- package/dist/types/components/input/input-addon.d.ts +2 -2
- package/dist/types/components/input/input-element.d.ts +2 -2
- package/dist/types/components/input/input.d.ts +2 -2
- package/dist/types/components/kbd/kbd.d.ts +2 -2
- package/dist/types/components/link/link.d.ts +2 -2
- package/dist/types/components/link-box/link-box.d.ts +2 -2
- package/dist/types/components/list/list.d.ts +2 -2
- package/dist/types/components/loading/loading-provider.d.ts +3 -3
- package/dist/types/components/loading/loading.d.ts +3 -3
- package/dist/types/components/mark/mark.d.ts +2 -2
- package/dist/types/components/menu/menu.d.ts +2 -2
- package/dist/types/components/menu/use-menu.d.ts +17 -17
- package/dist/types/components/modal/modal.d.ts +2 -2
- package/dist/types/components/modal/modal.style.d.ts +2 -2
- package/dist/types/components/native-select/native-select.d.ts +2 -2
- package/dist/types/components/native-table/native-table.d.ts +4 -4
- package/dist/types/components/notice/notice.style.d.ts +1 -1
- package/dist/types/components/notice/use-notice.d.ts +4 -4
- package/dist/types/components/number-input/number-input.d.ts +2 -2
- package/dist/types/components/number-input/number-input.style.d.ts +1 -1
- package/dist/types/components/pagination/pagination.d.ts +2 -2
- package/dist/types/components/pagination/use-pagination.d.ts +6 -6
- package/dist/types/components/password-input/password-input.d.ts +2 -2
- package/dist/types/components/password-input/strength-meter.d.ts +2 -2
- package/dist/types/components/password-input/use-password-input.d.ts +2 -2
- package/dist/types/components/password-input/use-strength-meter.d.ts +4 -4
- package/dist/types/components/picture/picture.d.ts +4 -4
- package/dist/types/components/pin-input/pin-input.d.ts +2 -2
- package/dist/types/components/pin-input/use-pin-input.d.ts +18 -18
- package/dist/types/components/popover/popover.d.ts +2 -2
- package/dist/types/components/progress/progress.d.ts +4 -4
- package/dist/types/components/progress/use-progress.d.ts +706 -706
- package/dist/types/components/radio/radio.d.ts +4 -4
- package/dist/types/components/radio/use-radio-group.d.ts +2 -2
- package/dist/types/components/radio/use-radio.d.ts +8 -8
- package/dist/types/components/radio-card/radio-card.d.ts +4 -4
- package/dist/types/components/rating/use-rating.d.ts +16 -16
- package/dist/types/components/reorder/reorder.d.ts +2 -2
- package/dist/types/components/reorder/use-reorder.d.ts +3 -3
- package/dist/types/components/resizable/resizable.d.ts +2 -2
- package/dist/types/components/resizable/use-resizable.d.ts +8 -8
- package/dist/types/components/ripple/ripple.d.ts +8 -8
- package/dist/types/components/ripple/use-ripple.d.ts +2 -2
- package/dist/types/components/rotate/rotate.d.ts +10 -10
- package/dist/types/components/saturation-slider/saturation-slider.d.ts +2 -2
- package/dist/types/components/saturation-slider/use-saturation-slider.d.ts +15 -15
- package/dist/types/components/scroll-area/scroll-area.d.ts +2 -2
- package/dist/types/components/scroll-area/use-scroll-area.d.ts +6 -6
- package/dist/types/components/segmented-control/segmented-control.d.ts +2 -2
- package/dist/types/components/segmented-control/use-segmented-control.d.ts +13 -13
- package/dist/types/components/select/select.d.ts +2 -2
- package/dist/types/components/select/use-select.d.ts +16 -16
- package/dist/types/components/simple-grid/simple-grid.d.ts +2 -2
- package/dist/types/components/skeleton/skeleton.d.ts +2 -2
- package/dist/types/components/slide/slide.d.ts +2 -2
- package/dist/types/components/slide-fade/slide-fade.d.ts +2 -2
- package/dist/types/components/slider/slider.d.ts +7 -7
- package/dist/types/components/slider/use-slider.d.ts +16 -16
- package/dist/types/components/snacks/snacks.d.ts +4 -4
- package/dist/types/components/stack/h-stack.d.ts +2 -2
- package/dist/types/components/stack/stack.d.ts +2 -2
- package/dist/types/components/stack/v-stack.d.ts +2 -2
- package/dist/types/components/stack/z-stack.d.ts +2 -2
- package/dist/types/components/stat/stat.d.ts +2 -2
- package/dist/types/components/status/status.d.ts +2 -2
- package/dist/types/components/steps/steps.d.ts +2 -2
- package/dist/types/components/steps/use-steps.d.ts +10 -10
- package/dist/types/components/switch/switch.d.ts +2 -2
- package/dist/types/components/switch/use-switch.d.ts +8 -8
- package/dist/types/components/table/table.d.ts +3 -3
- package/dist/types/components/tabs/tabs.d.ts +2 -2
- package/dist/types/components/tabs/use-tabs.d.ts +16 -16
- package/dist/types/components/tag/tag.d.ts +2 -2
- package/dist/types/components/tag/tag.style.d.ts +1 -1
- package/dist/types/components/text/text.d.ts +2 -2
- package/dist/types/components/textarea/textarea.d.ts +2 -2
- package/dist/types/components/textarea/use-autosize.d.ts +2 -2
- package/dist/types/components/timeline/timeline.d.ts +5 -5
- package/dist/types/components/timeline/timeline.style.d.ts +2 -2
- package/dist/types/components/toggle/toggle.d.ts +5 -5
- package/dist/types/components/toggle/use-toggle-group.d.ts +3 -3
- package/dist/types/components/toggle/use-toggle.d.ts +2 -2
- package/dist/types/components/tooltip/tooltip.d.ts +2 -2
- package/dist/types/components/visually-hidden/visually-hidden.d.ts +2 -2
- package/dist/types/components/wrap/wrap.d.ts +2 -2
- package/dist/types/core/components/create-component.d.ts +7 -7
- package/dist/types/core/components/use-component-style.d.ts +1 -1
- package/dist/types/core/css/index.types.d.ts +1 -1
- package/dist/types/core/css/styles.d.ts +219 -219
- package/dist/types/core/css/utils.d.ts +1 -1
- package/dist/types/core/generated-theme-tokens.types.d.ts +1 -1
- package/dist/types/core/system/breakpoint.d.ts +3 -3
- package/dist/types/core/system/color-mode-provider.d.ts +4 -4
- package/dist/types/core/system/index.types.d.ts +6 -6
- package/dist/types/core/system/layer.d.ts +1 -1
- package/dist/types/core/system/storage-script.d.ts +5 -5
- package/dist/types/core/system/styled.d.ts +4 -4
- package/dist/types/core/system/system-provider.d.ts +2 -2
- package/dist/types/core/system/use-system-color-mode.d.ts +1 -1
- package/dist/types/hooks/use-async/index.d.ts +13 -13
- package/dist/types/hooks/use-boolean/index.d.ts +1 -1
- package/dist/types/hooks/use-breakpoint/use-breakpoint-state.d.ts +2 -2
- package/dist/types/hooks/use-clickable/index.d.ts +4 -4
- package/dist/types/hooks/use-combobox/index.d.ts +1 -1
- package/dist/types/hooks/use-controllable-state/index.d.ts +2 -2
- package/dist/types/hooks/use-descendants/index.d.ts +2 -2
- package/dist/types/hooks/use-hover/index.d.ts +2 -2
- package/dist/types/hooks/use-local-storage/index.d.ts +1 -1
- package/dist/types/hooks/use-popper/index.d.ts +2 -2
- package/dist/types/hooks/use-resize-observer/index.d.ts +3 -3
- package/dist/types/providers/i18n-provider/i18n-provider.d.ts +4 -4
- package/dist/types/providers/ui-provider/ui-provider.d.ts +2 -2
- package/dist/types/utils/children.d.ts +2 -2
- package/dist/types/utils/context.d.ts +3 -3
- package/dist/types/utils/store.d.ts +2 -2
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loading-provider.cjs","names":["LoadingProvider: FC<LoadingProviderProps>","Screen","Page","Background","Controller: FC<ControllerProps>","loadingCount","props: LoadingSharedProps","AnimatePresence","Portal","RemoveScroll"],"sources":["../../../../src/components/loading/loading-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode, RefObject } from \"react\"\nimport type { LoadingConfig, LoadingScheme, ThemeConfig } from \"../../core\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createContext, createRef, use, useMemo, useRef, useState } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { assignRef, isNumber, useUpdateEffect } from \"../../utils\"\nimport { Portal } from \"../portal\"\nimport { Background } from \"./background\"\nimport { Page } from \"./page\"\nimport { Screen } from \"./screen\"\n\ninterface LoadingMethods {\n /**\n * Function to finish loading.\n */\n finish: () => void\n /**\n * Function to forcefully update the loading state.\n *\n * Please be careful, as it will forcefully overwrite the state of the loading component.\n */\n force: (state: Partial<LoadingState>) => void\n /**\n * Function to start loading.\n *\n * If you specify a `message` etc. as an argument, the loading will change accordingly.\n */\n start: (options?: LoadingOptions) => void\n /**\n * Function to update loading.\n *\n * If you specify a `message` etc. as an argument, the loading will change accordingly.\n */\n update: (options: LoadingOptions) => void\n}\n\nexport interface LoadingOptions {\n duration?: null | number\n loadingScheme?: LoadingScheme\n message?: ReactNode\n}\n\ninterface LoadingState {\n duration: null | number\n loadingCount: number\n loadingScheme: LoadingScheme\n message: ReactNode | undefined\n}\n\ninterface LoadingContext {\n /**\n * The background loading methods.\n */\n background: LoadingMethods\n /**\n * The page loading methods.\n */\n page: LoadingMethods\n /**\n * The screen loading methods.\n */\n screen: LoadingMethods\n}\n\nconst LoadingContext = createContext({} as LoadingContext)\n\nconst createController = () => ({\n finish: createRef<LoadingMethods[\"finish\"]>(),\n force: createRef<LoadingMethods[\"force\"]>(),\n start: createRef<LoadingMethods[\"start\"]>(),\n update: createRef<LoadingMethods[\"update\"]>(),\n})\n\ntype Controller = ReturnType<typeof createController>\n\nconst createMethods = (refs: RefObject<Controller>): LoadingMethods => ({\n finish: () => refs.current.finish.current?.(),\n force: (state) => refs.current.force.current?.(state),\n start: (props) => refs.current.start.current?.(props),\n update: (props) => refs.current.update.current?.(props),\n})\n\nconst incrementCount = (prev: number) => prev + 1\nconst decrementCount = (prev: number) => (prev === 0 ? prev : prev - 1)\n\nexport interface LoadingProviderProps extends PropsWithChildren<\n ThemeConfig[\"loading\"]\n> {}\n\nexport const LoadingProvider: FC<LoadingProviderProps> = ({\n background: backgroundConfig,\n children,\n page: pageConfig,\n screen: screenConfig,\n}) => {\n const screen = useRef(createController())\n const page = useRef(createController())\n const background = useRef(createController())\n\n const value = useMemo(\n () => ({\n background: createMethods(background),\n page: createMethods(page),\n screen: createMethods(screen),\n }),\n [],\n )\n\n return (\n <LoadingContext value={value}>\n {children}\n\n <Controller ref={screen} {...screenConfig} component={Screen} />\n\n <Controller ref={page} {...pageConfig} component={Page} />\n\n <Controller\n ref={background}\n {...backgroundConfig}\n blockScrollOnMount={backgroundConfig?.blockScrollOnMount ?? false}\n component={Background}\n />\n </LoadingContext>\n )\n}\n\nexport interface LoadingSharedProps {\n duration: null | number\n
|
|
1
|
+
{"version":3,"file":"loading-provider.cjs","names":["LoadingProvider: FC<LoadingProviderProps>","Screen","Page","Background","Controller: FC<ControllerProps>","loadingCount","props: LoadingSharedProps","AnimatePresence","Portal","RemoveScroll"],"sources":["../../../../src/components/loading/loading-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode, RefObject } from \"react\"\nimport type { LoadingConfig, LoadingScheme, ThemeConfig } from \"../../core\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createContext, createRef, use, useMemo, useRef, useState } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { assignRef, isNumber, useUpdateEffect } from \"../../utils\"\nimport { Portal } from \"../portal\"\nimport { Background } from \"./background\"\nimport { Page } from \"./page\"\nimport { Screen } from \"./screen\"\n\ninterface LoadingMethods {\n /**\n * Function to finish loading.\n */\n finish: () => void\n /**\n * Function to forcefully update the loading state.\n *\n * Please be careful, as it will forcefully overwrite the state of the loading component.\n */\n force: (state: Partial<LoadingState>) => void\n /**\n * Function to start loading.\n *\n * If you specify a `message` etc. as an argument, the loading will change accordingly.\n */\n start: (options?: LoadingOptions) => void\n /**\n * Function to update loading.\n *\n * If you specify a `message` etc. as an argument, the loading will change accordingly.\n */\n update: (options: LoadingOptions) => void\n}\n\nexport interface LoadingOptions {\n duration?: null | number\n loadingScheme?: LoadingScheme\n message?: ReactNode\n}\n\ninterface LoadingState {\n duration: null | number\n loadingCount: number\n loadingScheme: LoadingScheme\n message: ReactNode | undefined\n}\n\ninterface LoadingContext {\n /**\n * The background loading methods.\n */\n background: LoadingMethods\n /**\n * The page loading methods.\n */\n page: LoadingMethods\n /**\n * The screen loading methods.\n */\n screen: LoadingMethods\n}\n\nconst LoadingContext = createContext({} as LoadingContext)\n\nconst createController = () => ({\n finish: createRef<LoadingMethods[\"finish\"]>(),\n force: createRef<LoadingMethods[\"force\"]>(),\n start: createRef<LoadingMethods[\"start\"]>(),\n update: createRef<LoadingMethods[\"update\"]>(),\n})\n\ntype Controller = ReturnType<typeof createController>\n\nconst createMethods = (refs: RefObject<Controller>): LoadingMethods => ({\n finish: () => refs.current.finish.current?.(),\n force: (state) => refs.current.force.current?.(state),\n start: (props) => refs.current.start.current?.(props),\n update: (props) => refs.current.update.current?.(props),\n})\n\nconst incrementCount = (prev: number) => prev + 1\nconst decrementCount = (prev: number) => (prev === 0 ? prev : prev - 1)\n\nexport interface LoadingProviderProps extends PropsWithChildren<\n ThemeConfig[\"loading\"]\n> {}\n\nexport const LoadingProvider: FC<LoadingProviderProps> = ({\n background: backgroundConfig,\n children,\n page: pageConfig,\n screen: screenConfig,\n}) => {\n const screen = useRef(createController())\n const page = useRef(createController())\n const background = useRef(createController())\n\n const value = useMemo(\n () => ({\n background: createMethods(background),\n page: createMethods(page),\n screen: createMethods(screen),\n }),\n [],\n )\n\n return (\n <LoadingContext value={value}>\n {children}\n\n <Controller ref={screen} {...screenConfig} component={Screen} />\n\n <Controller ref={page} {...pageConfig} component={Page} />\n\n <Controller\n ref={background}\n {...backgroundConfig}\n blockScrollOnMount={backgroundConfig?.blockScrollOnMount ?? false}\n component={Background}\n />\n </LoadingContext>\n )\n}\n\nexport interface LoadingSharedProps {\n duration: null | number\n loadingScheme: LoadingScheme\n message: ReactNode | undefined\n onFinish: () => void\n initial?: boolean | string\n}\n\ninterface ControllerProps extends LoadingConfig {\n component: FC<LoadingSharedProps>\n ref: RefObject<Controller>\n}\n\nconst Controller: FC<ControllerProps> = ({\n ref,\n allowPinchZoom = false,\n blockScrollOnMount = true,\n component: Component,\n duration: durationProp = null,\n loadingCount: loadingCountProp = 0,\n loadingScheme: loadingSchemeProp = \"oval\",\n}) => {\n const loading = useRef<boolean>(false)\n const [{ duration, loadingCount, loadingScheme, message }, setState] =\n useState<LoadingState>({\n duration: durationProp,\n loadingCount: loadingCountProp,\n loadingScheme: loadingSchemeProp,\n message: undefined,\n })\n\n const { finish, force, start, update } = useMemo<LoadingMethods>(\n () => ({\n finish: () => {\n loading.current = false\n\n setState(({ loadingCount }) => ({\n duration: durationProp,\n loadingCount: decrementCount(loadingCount),\n loadingScheme: loadingSchemeProp,\n message: undefined,\n }))\n },\n\n force: ({\n duration = durationProp,\n loadingCount = 0,\n loadingScheme = loadingSchemeProp,\n message,\n }) => {\n loading.current = !!loadingCount\n\n setState({\n duration,\n loadingCount,\n loadingScheme,\n message,\n })\n },\n\n start: ({\n duration = durationProp,\n loadingScheme = loadingSchemeProp,\n message,\n } = {}) => {\n loading.current = true\n\n setState(({ loadingCount }) => ({\n duration,\n loadingCount: incrementCount(loadingCount),\n loadingScheme,\n message,\n }))\n },\n\n update: (next) => setState((prev) => ({ ...prev, ...next })),\n }),\n [durationProp, loadingSchemeProp],\n )\n\n assignRef(ref.current.start, start)\n assignRef(ref.current.finish, finish)\n assignRef(ref.current.update, update)\n assignRef(ref.current.force, force)\n\n const props: LoadingSharedProps = {\n duration,\n initial: loadingCountProp > 0 ? false : \"initial\",\n loadingScheme,\n message,\n onFinish: finish,\n }\n\n useUpdateEffect(() => {\n if (loadingCountProp > 0 || isNumber(durationProp))\n setState({\n duration: durationProp,\n loadingCount: loadingCountProp,\n loadingScheme: loadingSchemeProp,\n message: undefined,\n })\n }, [loadingCountProp, durationProp, loadingSchemeProp])\n\n return (\n <AnimatePresence initial={false}>\n {loadingCount ? (\n <Portal>\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <Component {...props} />\n </RemoveScroll>\n </Portal>\n ) : null}\n </AnimatePresence>\n )\n}\n\n/**\n * `useLoading` is a custom hook for controlling the loading of the application.\n *\n * @see https://yamada-ui.com/docs/hooks/use-loading\n */\nexport const useLoading = (): LoadingContext => {\n const { background, page, screen } = use(LoadingContext)\n\n const context = useMemo(\n () => ({ background, page, screen }),\n [background, page, screen],\n )\n\n return context\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-menu.cjs","names":["createDescendants","createContext","useDisclosure","getTriggerProps: PropGetter","getContextTriggerProps: PropGetter","getContentProps: PropGetter","mergeRefs","getSeparatorProps: PropGetter","useControllableState","value"],"sources":["../../../../src/components/menu/use-menu.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent, MouseEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Descendant, Descendants } from \"../../hooks/use-descendants\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport {\n ariaAttr,\n assignRef,\n createContext,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isString,\n isTruthyDataAttr,\n mergeRefs,\n noop,\n runKeyAction,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype SubMenuDirection = \"end\" | \"start\"\n\ninterface MenuDescendantProps {\n id: string\n}\ntype MenuDescendant = Descendant<HTMLDivElement, MenuDescendantProps>\n\nconst {\n DescendantsContext: MenuDescendantsContext,\n useDescendant: useMenuDescendant,\n useDescendantRegister: useMenuDescendantRegister,\n useDescendants: useMenuDescendants,\n} = createDescendants<HTMLDivElement, MenuDescendantProps>()\n\nexport { MenuDescendantsContext, useMenuDescendant, useMenuDescendants }\n\ninterface MenuContext extends Pick<\n UseMenuReturn,\n | \"onActiveDescendant\"\n | \"onClose\"\n | \"onCloseSubMenu\"\n | \"onOpen\"\n | \"onSelect\"\n | \"subMenu\"\n | \"subMenuDirection\"\n> {}\n\nconst [MenuContext, useMenuContext] = createContext<MenuContext>({\n name: \"MenuContext\",\n})\n\ninterface MenuGroupContext extends Pick<UseMenuGroupReturn, \"getLabelProps\"> {}\n\nconst [MenuGroupContext, useMenuGroupContext] = createContext<MenuGroupContext>(\n {\n name: \"MenuGroupContext\",\n },\n)\n\ninterface MainMenuContext {\n closeOnSelect?: boolean\n descendants: Descendants<HTMLDivElement, MenuDescendantProps>\n onActiveDescendant: (descendant?: MenuDescendant) => void\n onCloseRef: RefObject<() => void>\n onSelect: (value?: string, closeOnSelect?: boolean) => void\n}\n\nconst [MainMenuContext, useMainMenuContext] = createContext<MainMenuContext>({\n name: \"MainMenuContext\",\n strict: false,\n})\n\ninterface MenuOptionGroupContext {\n type: \"checkbox\" | \"radio\"\n value: string | string[]\n onChange?: (value: string) => void\n}\n\nconst [MenuOptionGroupContext, useMenuOptionGroupContext] =\n createContext<MenuOptionGroupContext>({\n name: \"MenuOptionGroupContext\",\n })\n\nexport {\n MainMenuContext,\n MenuContext,\n MenuGroupContext,\n MenuOptionGroupContext,\n useMainMenuContext,\n useMenuContext,\n useMenuGroupContext,\n useMenuOptionGroupContext,\n}\n\nexport interface UseMenuProps extends Omit<UseDisclosureProps, \"timing\"> {\n /**\n * If `true`, the menu item will be closed when selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n /**\n * If `true`, the menu will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The direction of the sub menu.\n *\n * @default 'end'\n */\n subMenuDirection?: SubMenuDirection\n /**\n * Callback invoked when a menu item is selected.\n */\n onSelect?: (value?: string) => void\n}\n\nexport const useMenu = ({\n closeOnSelect,\n defaultOpen,\n disabled = false,\n open: openProp,\n subMenuDirection = \"end\",\n onClose: onCloseProp,\n onOpen: onOpenProp,\n onSelect: onSelectProp,\n}: UseMenuProps = {}) => {\n const triggerId = useId()\n const contentId = useId()\n const descendants = useMenuDescendants()\n const updateRef = useRef<() => void>(noop)\n const onCloseRef = useRef<() => void>(noop)\n const contentRef = useRef<HTMLDivElement>(null)\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const onCloseSubMenu = useCallback(() => onCloseRef.current(), [])\n const onActiveDescendant = useCallback(\n (\n descendant?: MenuDescendant,\n options: FocusOptions = { preventScroll: true },\n ) => {\n if (!contentRef.current || !descendant || disabled) return\n\n contentRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n descendants.active(descendant, options)\n },\n [descendants, disabled],\n )\n const { mainCloseOnSelect, subMenu, getSubMenuProps, onMainSelect } =\n useSubMenu({\n descendants,\n disabled,\n open,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onOpen,\n })\n\n closeOnSelect ??= mainCloseOnSelect ?? true\n\n const onSelect = useCallback(\n (value?: string, closeOnSelectProp = closeOnSelect) => {\n if (disabled) return\n\n onSelectProp?.(value)\n onMainSelect?.(value, closeOnSelectProp)\n\n if (!closeOnSelectProp) return\n\n onClose()\n },\n [closeOnSelect, disabled, onClose, onMainSelect, onSelectProp],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n\n if (!open) {\n onOpen()\n } else {\n onClose()\n }\n },\n [disabled, onClose, onOpen, open],\n )\n\n const onContextMenu = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n onOpen()\n updateRef.current()\n },\n [disabled, onOpen],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n runKeyAction(ev, {\n ArrowDown: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n ArrowUp: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n })\n },\n Enter: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n Space: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n })\n },\n [descendants, disabled, onActiveDescendant, onOpen],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...getSubMenuProps({\n id: triggerId,\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"menu\",\n \"data-trigger\": dataAttr(true),\n role: \"button\",\n tabIndex: disabled ? -1 : 0,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n }),\n [contentId, disabled, getSubMenuProps, onClick, onKeyDown, open, triggerId],\n )\n\n const getContextTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n id: triggerId,\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"menu\",\n \"data-trigger\": dataAttr(true),\n role: \"application\",\n ...props,\n onContextMenu: handlerAll(props.onContextMenu, onContextMenu),\n }),\n [contentId, disabled, onContextMenu, open, triggerId],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id: contentId,\n \"aria-labelledby\": cx(ariaLabelledby, triggerId),\n role: \"menu\",\n ...props,\n ref: mergeRefs(ref, contentRef),\n }),\n [contentId, triggerId],\n )\n\n const getSeparatorProps: PropGetter = useCallback(\n (props) => ({ role: \"separator\", ...props }),\n [],\n )\n\n return {\n closeOnSelect,\n descendants,\n open,\n subMenu,\n subMenuDirection,\n updateRef,\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n onActiveDescendant,\n onClose,\n onCloseRef,\n onCloseSubMenu,\n onOpen,\n onSelect,\n }\n}\n\nexport type UseMenuReturn = ReturnType<typeof useMenu>\n\nexport interface UseSubMenuProps extends Omit<\n Required<UseDisclosureProps>,\n \"defaultOpen\" | \"timing\"\n> {\n descendants: Descendants<HTMLDivElement, MenuDescendantProps>\n disabled?: boolean\n subMenuDirection?: SubMenuDirection\n onActiveDescendant: (descendant?: MenuDescendant) => void\n}\n\nexport const useSubMenu = ({\n descendants,\n disabled = false,\n open,\n subMenuDirection = \"end\",\n onActiveDescendant,\n onClose,\n onOpen,\n}: UseSubMenuProps) => {\n const uuid = useId()\n const {\n closeOnSelect: mainCloseOnSelect,\n descendants: mainDescendants,\n onActiveDescendant: onActiveMainDescendant,\n onCloseRef,\n onSelect: onMainSelect,\n } = useMainMenuContext() ?? {}\n const subMenu = !!mainDescendants && !!onActiveMainDescendant\n const createRegister = useMenuDescendantRegister(mainDescendants)\n const triggerRef = useRef<HTMLDivElement>(null)\n\n const dataDisabled = useCallback((node?: HTMLDivElement | null) => {\n node ??= triggerRef.current\n\n if (!node) return false\n\n const dataDisabled = isTruthyDataAttr(node.getAttribute(\"data-disabled\"))\n\n return dataDisabled\n }, [])\n\n const ariaDisabled = useCallback((node?: HTMLDivElement | null) => {\n node ??= triggerRef.current\n\n if (!node) return false\n\n const ariaDisabled = isTruthyDataAttr(node.getAttribute(\"aria-disabled\"))\n\n return ariaDisabled\n }, [])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!subMenu) return\n\n ev.defaultPrevented = disabled || dataDisabled() || ariaDisabled()\n },\n [ariaDisabled, dataDisabled, disabled, subMenu],\n )\n\n const onMouseEnter = useCallback(() => {\n if (!subMenu || disabled || dataDisabled() || ariaDisabled()) return\n\n onOpen()\n }, [ariaDisabled, dataDisabled, disabled, onOpen, subMenu])\n\n const onMouseMove = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!subMenu || disabled || dataDisabled() || ariaDisabled()) return\n\n const descendant = descendants.value(triggerRef.current)\n\n onActiveMainDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n [\n ariaDisabled,\n dataDisabled,\n descendants,\n disabled,\n onActiveMainDescendant,\n subMenu,\n ],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (!subMenu || disabled) return\n\n const currentDescendant = open ? descendants : mainDescendants\n const onActiveCurrentDescendant = open\n ? onActiveDescendant\n : onActiveMainDescendant\n\n runKeyAction(ev, {\n ArrowDown: () => {\n const descendant = currentDescendant.enabledNextValue(\n triggerRef.current,\n )\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n ArrowUp: () => {\n const descendant = currentDescendant.enabledPrevValue(\n triggerRef.current,\n )\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n End: () => {\n const descendant = currentDescendant.enabledLastValue()\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n Home: () => {\n const descendant = currentDescendant.enabledFirstValue()\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n [subMenuDirection === \"end\" ? \"ArrowRight\" : \"ArrowLeft\"]: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n\n ev.defaultPrevented = true\n },\n })\n },\n [\n subMenu,\n disabled,\n open,\n descendants,\n mainDescendants,\n onActiveDescendant,\n onActiveMainDescendant,\n subMenuDirection,\n onOpen,\n ],\n )\n\n assignRef(onCloseRef, onClose)\n\n const getSubMenuProps: PropGetter = useCallback(\n ({ id = uuid, ref, ...props } = {}) => {\n const getDisabled = (node: HTMLDivElement) =>\n disabled || dataDisabled(node) || ariaDisabled(node)\n const register = createRegister({ id, disabled: getDisabled })\n\n return {\n role: subMenu ? \"menuitem\" : \"button\",\n ...props,\n ref: mergeRefs(ref, triggerRef, register),\n onClick: handlerAll(onClick, props.onClick),\n onKeyDown: handlerAll(onKeyDown, props.onKeyDown),\n onMouseEnter: handlerAll(onMouseEnter, props.onMouseEnter),\n onMouseMove: handlerAll(onMouseMove, props.onMouseMove),\n }\n },\n [\n uuid,\n subMenu,\n createRegister,\n onClick,\n onKeyDown,\n onMouseEnter,\n onMouseMove,\n disabled,\n dataDisabled,\n ariaDisabled,\n ],\n )\n\n return { mainCloseOnSelect, subMenu, getSubMenuProps, onMainSelect }\n}\n\nexport type UseSubMenuReturn = ReturnType<typeof useSubMenu>\n\nexport interface UseMenuGroupProps extends HTMLProps {}\n\nexport const useMenuGroup = ({\n \"aria-labelledby\": ariaLabelledbyProp,\n ...rest\n}: UseMenuGroupProps) => {\n const labelId = useId()\n\n const getGroupProps: PropGetter = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, labelId),\n role: \"group\",\n ...rest,\n ...props,\n }),\n [ariaLabelledbyProp, labelId, rest],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({ id: labelId, role: \"presentation\", ...props }),\n [labelId],\n )\n\n return { getGroupProps, getLabelProps }\n}\n\nexport type UseMenuGroupReturn = ReturnType<typeof useMenuGroup>\n\nexport interface UseMenuItemProps extends HTMLProps {\n /**\n * If `true`, the menu item will be closed when selected.\n */\n closeOnSelect?: boolean\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The value of the menu item.\n */\n value?: string\n}\n\nexport const useMenuItem = ({\n id,\n \"aria-disabled\": ariaDisabled,\n \"data-disabled\": dataDisabled,\n \"data-trigger\": dataTrigger,\n closeOnSelect,\n disabled = false,\n value,\n ...rest\n}: UseMenuItemProps) => {\n const trigger = isTruthyDataAttr(dataTrigger)\n const {\n subMenu,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onCloseSubMenu,\n onSelect,\n } = useMenuContext()\n const uuid = useId()\n const itemRef = useRef<HTMLDivElement>(null)\n const subMenuTrigger = subMenu && trigger\n\n id ??= uuid\n\n const { descendants, register } = useMenuDescendant({\n id,\n disabled: disabled || subMenuTrigger,\n })\n\n const onActive = useCallback(() => {\n if (disabled) return\n\n const descendant = descendants.value(itemRef.current)\n\n onActiveDescendant(descendant)\n }, [descendants, disabled, onActiveDescendant])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => {\n const descendant = descendants.enabledNextValue(itemRef.current)\n\n onActiveDescendant(descendant)\n },\n ArrowUp: () => {\n const descendant = descendants.enabledPrevValue(itemRef.current)\n\n onActiveDescendant(descendant)\n },\n End: () => {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n },\n Enter: () => onSelect(value, closeOnSelect),\n Home: () => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n },\n Space: () => onSelect(value, closeOnSelect),\n [subMenuDirection === \"end\" ? \"ArrowLeft\" : \"ArrowRight\"]: () => {\n if (!subMenu) return\n\n onClose()\n\n const descendant = descendants.firstValue()\n\n descendant?.node.focus()\n },\n })\n },\n [\n closeOnSelect,\n descendants,\n onActiveDescendant,\n onClose,\n onSelect,\n subMenu,\n subMenuDirection,\n value,\n ],\n )\n\n const getItemProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n role: \"menuitem\",\n tabIndex: -1,\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref, itemRef, register),\n onClick: handlerAll(props.onClick, rest.onClick, () =>\n onSelect(value, closeOnSelect),\n ),\n onFocus: handlerAll(props.onFocus, rest.onFocus, onActive),\n onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n onMouseMove: handlerAll(props.onMouseMove, rest.onMouseMove, () => {\n onCloseSubMenu()\n onActive()\n }),\n }),\n [\n id,\n ariaDisabled,\n disabled,\n dataDisabled,\n rest,\n register,\n onActive,\n onKeyDown,\n onSelect,\n value,\n closeOnSelect,\n onCloseSubMenu,\n ],\n )\n\n return {\n subMenuTrigger,\n getItemProps,\n }\n}\n\nexport type UseMenuItemReturn = ReturnType<typeof useMenuItem>\n\nexport type MenuOptionGroupType = \"checkbox\" | \"radio\"\nexport type MenuOptionGroupValue<Y extends MenuOptionGroupType> =\n Y extends \"checkbox\" ? string[] : string\n\nexport interface UseMenuOptionGroupProps<\n Y extends MenuOptionGroupType = \"checkbox\",\n M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n> {\n /**\n * The type of the menu option group.\n */\n type?: Y\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: M\n /**\n * The value of the menu item group.\n */\n value?: M\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: M) => void\n}\n\nexport const useMenuOptionGroup = <\n Y extends \"checkbox\" | \"radio\" = \"checkbox\",\n M extends Y extends \"checkbox\" ? string[] : string = Y extends \"checkbox\"\n ? string[]\n : string,\n>({\n type = \"checkbox\" as Y,\n defaultValue = (type === \"checkbox\" ? [] : \"\") as M,\n value: valueProp,\n onChange: onChangeProp,\n}: UseMenuOptionGroupProps<Y, M>) => {\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const radio = type === \"radio\"\n\n const onChange = useCallback(\n (selectedValue: string) => {\n setValue((prev) => {\n if (radio && isString(prev)) {\n return selectedValue as M\n } else if (!radio && isArray(prev)) {\n return (\n prev.includes(selectedValue)\n ? prev.filter((value) => value !== selectedValue)\n : prev.concat(selectedValue)\n ) as M\n } else {\n return prev\n }\n })\n },\n [radio, setValue],\n )\n\n useUpdateEffect(() => {\n setValue(valueProp!)\n }, [valueProp])\n\n return {\n type,\n value,\n onChange,\n }\n}\n\nexport type UseMenuOptionGroupReturn = ReturnType<typeof useMenuOptionGroup>\n\nexport interface UseMenuOptionItemProps extends UseMenuItemProps {\n /**\n * The value of the menu option item.\n */\n value: string\n}\n\nexport const useMenuOptionItem = ({\n disabled,\n value,\n ...rest\n}: UseMenuOptionItemProps) => {\n const { type, value: selectedValue, onChange } = useMenuOptionGroupContext()\n const { getItemProps } = useMenuItem({ disabled, value, ...rest })\n const radio = type === \"radio\" && isString(selectedValue)\n const checkbox = type === \"checkbox\" && isArray(selectedValue)\n const selected = radio\n ? value === selectedValue\n : checkbox\n ? selectedValue.includes(value)\n : false\n\n const getIndicatorProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n style: { opacity: selected ? 1 : 0, ...style },\n ...props,\n }),\n [selected],\n )\n\n const getOptionItemProps: PropGetter = useCallback(\n (props = {}) =>\n getItemProps({\n role: radio ? \"menuitemradio\" : \"menuitemcheckbox\",\n ...props,\n onClick: handlerAll(props.onClick, () =>\n !disabled ? onChange?.(value) : noop,\n ),\n }),\n [disabled, getItemProps, onChange, radio, value],\n )\n\n return {\n type,\n selected,\n getIndicatorProps,\n getOptionItemProps,\n }\n}\n\nexport type UseMenuOptionItemReturn = ReturnType<typeof useMenuOptionItem>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-menu.cjs","names":["createDescendants","createContext","useDisclosure","getTriggerProps: PropGetter","getContextTriggerProps: PropGetter","getContentProps: PropGetter","mergeRefs","getSeparatorProps: PropGetter","useControllableState","value"],"sources":["../../../../src/components/menu/use-menu.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent, MouseEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Descendant, Descendants } from \"../../hooks/use-descendants\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport {\n ariaAttr,\n assignRef,\n createContext,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isString,\n isTruthyDataAttr,\n mergeRefs,\n noop,\n runKeyAction,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype SubMenuDirection = \"end\" | \"start\"\n\ninterface MenuDescendantProps {\n id: string\n}\ntype MenuDescendant = Descendant<HTMLDivElement, MenuDescendantProps>\n\nconst {\n DescendantsContext: MenuDescendantsContext,\n useDescendant: useMenuDescendant,\n useDescendantRegister: useMenuDescendantRegister,\n useDescendants: useMenuDescendants,\n} = createDescendants<HTMLDivElement, MenuDescendantProps>()\n\nexport { MenuDescendantsContext, useMenuDescendant, useMenuDescendants }\n\ninterface MenuContext extends Pick<\n UseMenuReturn,\n | \"onActiveDescendant\"\n | \"onClose\"\n | \"onCloseSubMenu\"\n | \"onOpen\"\n | \"onSelect\"\n | \"subMenu\"\n | \"subMenuDirection\"\n> {}\n\nconst [MenuContext, useMenuContext] = createContext<MenuContext>({\n name: \"MenuContext\",\n})\n\ninterface MenuGroupContext extends Pick<UseMenuGroupReturn, \"getLabelProps\"> {}\n\nconst [MenuGroupContext, useMenuGroupContext] = createContext<MenuGroupContext>(\n {\n name: \"MenuGroupContext\",\n },\n)\n\ninterface MainMenuContext {\n descendants: Descendants<HTMLDivElement, MenuDescendantProps>\n onActiveDescendant: (descendant?: MenuDescendant) => void\n onCloseRef: RefObject<() => void>\n onSelect: (value?: string, closeOnSelect?: boolean) => void\n closeOnSelect?: boolean\n}\n\nconst [MainMenuContext, useMainMenuContext] = createContext<MainMenuContext>({\n name: \"MainMenuContext\",\n strict: false,\n})\n\ninterface MenuOptionGroupContext {\n type: \"checkbox\" | \"radio\"\n value: string | string[]\n onChange?: (value: string) => void\n}\n\nconst [MenuOptionGroupContext, useMenuOptionGroupContext] =\n createContext<MenuOptionGroupContext>({\n name: \"MenuOptionGroupContext\",\n })\n\nexport {\n MainMenuContext,\n MenuContext,\n MenuGroupContext,\n MenuOptionGroupContext,\n useMainMenuContext,\n useMenuContext,\n useMenuGroupContext,\n useMenuOptionGroupContext,\n}\n\nexport interface UseMenuProps extends Omit<UseDisclosureProps, \"timing\"> {\n /**\n * If `true`, the menu item will be closed when selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n /**\n * If `true`, the menu will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The direction of the sub menu.\n *\n * @default 'end'\n */\n subMenuDirection?: SubMenuDirection\n /**\n * Callback invoked when a menu item is selected.\n */\n onSelect?: (value?: string) => void\n}\n\nexport const useMenu = ({\n closeOnSelect,\n defaultOpen,\n disabled = false,\n open: openProp,\n subMenuDirection = \"end\",\n onClose: onCloseProp,\n onOpen: onOpenProp,\n onSelect: onSelectProp,\n}: UseMenuProps = {}) => {\n const triggerId = useId()\n const contentId = useId()\n const descendants = useMenuDescendants()\n const updateRef = useRef<() => void>(noop)\n const onCloseRef = useRef<() => void>(noop)\n const contentRef = useRef<HTMLDivElement>(null)\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const onCloseSubMenu = useCallback(() => onCloseRef.current(), [])\n const onActiveDescendant = useCallback(\n (\n descendant?: MenuDescendant,\n options: FocusOptions = { preventScroll: true },\n ) => {\n if (!contentRef.current || !descendant || disabled) return\n\n contentRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n descendants.active(descendant, options)\n },\n [descendants, disabled],\n )\n const { mainCloseOnSelect, subMenu, getSubMenuProps, onMainSelect } =\n useSubMenu({\n descendants,\n disabled,\n open,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onOpen,\n })\n\n closeOnSelect ??= mainCloseOnSelect ?? true\n\n const onSelect = useCallback(\n (value?: string, closeOnSelectProp = closeOnSelect) => {\n if (disabled) return\n\n onSelectProp?.(value)\n onMainSelect?.(value, closeOnSelectProp)\n\n if (!closeOnSelectProp) return\n\n onClose()\n },\n [closeOnSelect, disabled, onClose, onMainSelect, onSelectProp],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n\n if (!open) {\n onOpen()\n } else {\n onClose()\n }\n },\n [disabled, onClose, onOpen, open],\n )\n\n const onContextMenu = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n onOpen()\n updateRef.current()\n },\n [disabled, onOpen],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n runKeyAction(ev, {\n ArrowDown: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n ArrowUp: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n })\n },\n Enter: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n Space: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n })\n },\n [descendants, disabled, onActiveDescendant, onOpen],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...getSubMenuProps({\n id: triggerId,\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"menu\",\n \"data-trigger\": dataAttr(true),\n role: \"button\",\n tabIndex: disabled ? -1 : 0,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n }),\n [contentId, disabled, getSubMenuProps, onClick, onKeyDown, open, triggerId],\n )\n\n const getContextTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n id: triggerId,\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"menu\",\n \"data-trigger\": dataAttr(true),\n role: \"application\",\n ...props,\n onContextMenu: handlerAll(props.onContextMenu, onContextMenu),\n }),\n [contentId, disabled, onContextMenu, open, triggerId],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id: contentId,\n \"aria-labelledby\": cx(ariaLabelledby, triggerId),\n role: \"menu\",\n ...props,\n ref: mergeRefs(ref, contentRef),\n }),\n [contentId, triggerId],\n )\n\n const getSeparatorProps: PropGetter = useCallback(\n (props) => ({ role: \"separator\", ...props }),\n [],\n )\n\n return {\n closeOnSelect,\n descendants,\n open,\n subMenu,\n subMenuDirection,\n updateRef,\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n onActiveDescendant,\n onClose,\n onCloseRef,\n onCloseSubMenu,\n onOpen,\n onSelect,\n }\n}\n\nexport type UseMenuReturn = ReturnType<typeof useMenu>\n\nexport interface UseSubMenuProps extends Omit<\n Required<UseDisclosureProps>,\n \"defaultOpen\" | \"timing\"\n> {\n descendants: Descendants<HTMLDivElement, MenuDescendantProps>\n onActiveDescendant: (descendant?: MenuDescendant) => void\n disabled?: boolean\n subMenuDirection?: SubMenuDirection\n}\n\nexport const useSubMenu = ({\n descendants,\n disabled = false,\n open,\n subMenuDirection = \"end\",\n onActiveDescendant,\n onClose,\n onOpen,\n}: UseSubMenuProps) => {\n const uuid = useId()\n const {\n closeOnSelect: mainCloseOnSelect,\n descendants: mainDescendants,\n onActiveDescendant: onActiveMainDescendant,\n onCloseRef,\n onSelect: onMainSelect,\n } = useMainMenuContext() ?? {}\n const subMenu = !!mainDescendants && !!onActiveMainDescendant\n const createRegister = useMenuDescendantRegister(mainDescendants)\n const triggerRef = useRef<HTMLDivElement>(null)\n\n const dataDisabled = useCallback((node?: HTMLDivElement | null) => {\n node ??= triggerRef.current\n\n if (!node) return false\n\n const dataDisabled = isTruthyDataAttr(node.getAttribute(\"data-disabled\"))\n\n return dataDisabled\n }, [])\n\n const ariaDisabled = useCallback((node?: HTMLDivElement | null) => {\n node ??= triggerRef.current\n\n if (!node) return false\n\n const ariaDisabled = isTruthyDataAttr(node.getAttribute(\"aria-disabled\"))\n\n return ariaDisabled\n }, [])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!subMenu) return\n\n ev.defaultPrevented = disabled || dataDisabled() || ariaDisabled()\n },\n [ariaDisabled, dataDisabled, disabled, subMenu],\n )\n\n const onMouseEnter = useCallback(() => {\n if (!subMenu || disabled || dataDisabled() || ariaDisabled()) return\n\n onOpen()\n }, [ariaDisabled, dataDisabled, disabled, onOpen, subMenu])\n\n const onMouseMove = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!subMenu || disabled || dataDisabled() || ariaDisabled()) return\n\n const descendant = descendants.value(triggerRef.current)\n\n onActiveMainDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n [\n ariaDisabled,\n dataDisabled,\n descendants,\n disabled,\n onActiveMainDescendant,\n subMenu,\n ],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (!subMenu || disabled) return\n\n const currentDescendant = open ? descendants : mainDescendants\n const onActiveCurrentDescendant = open\n ? onActiveDescendant\n : onActiveMainDescendant\n\n runKeyAction(ev, {\n ArrowDown: () => {\n const descendant = currentDescendant.enabledNextValue(\n triggerRef.current,\n )\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n ArrowUp: () => {\n const descendant = currentDescendant.enabledPrevValue(\n triggerRef.current,\n )\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n End: () => {\n const descendant = currentDescendant.enabledLastValue()\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n Home: () => {\n const descendant = currentDescendant.enabledFirstValue()\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n [subMenuDirection === \"end\" ? \"ArrowRight\" : \"ArrowLeft\"]: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n\n ev.defaultPrevented = true\n },\n })\n },\n [\n subMenu,\n disabled,\n open,\n descendants,\n mainDescendants,\n onActiveDescendant,\n onActiveMainDescendant,\n subMenuDirection,\n onOpen,\n ],\n )\n\n assignRef(onCloseRef, onClose)\n\n const getSubMenuProps: PropGetter = useCallback(\n ({ id = uuid, ref, ...props } = {}) => {\n const getDisabled = (node: HTMLDivElement) =>\n disabled || dataDisabled(node) || ariaDisabled(node)\n const register = createRegister({ id, disabled: getDisabled })\n\n return {\n role: subMenu ? \"menuitem\" : \"button\",\n ...props,\n ref: mergeRefs(ref, triggerRef, register),\n onClick: handlerAll(onClick, props.onClick),\n onKeyDown: handlerAll(onKeyDown, props.onKeyDown),\n onMouseEnter: handlerAll(onMouseEnter, props.onMouseEnter),\n onMouseMove: handlerAll(onMouseMove, props.onMouseMove),\n }\n },\n [\n uuid,\n subMenu,\n createRegister,\n onClick,\n onKeyDown,\n onMouseEnter,\n onMouseMove,\n disabled,\n dataDisabled,\n ariaDisabled,\n ],\n )\n\n return { mainCloseOnSelect, subMenu, getSubMenuProps, onMainSelect }\n}\n\nexport type UseSubMenuReturn = ReturnType<typeof useSubMenu>\n\nexport interface UseMenuGroupProps extends HTMLProps {}\n\nexport const useMenuGroup = ({\n \"aria-labelledby\": ariaLabelledbyProp,\n ...rest\n}: UseMenuGroupProps) => {\n const labelId = useId()\n\n const getGroupProps: PropGetter = useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, labelId),\n role: \"group\",\n ...rest,\n ...props,\n }),\n [ariaLabelledbyProp, labelId, rest],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({ id: labelId, role: \"presentation\", ...props }),\n [labelId],\n )\n\n return { getGroupProps, getLabelProps }\n}\n\nexport type UseMenuGroupReturn = ReturnType<typeof useMenuGroup>\n\nexport interface UseMenuItemProps extends HTMLProps {\n /**\n * If `true`, the menu item will be closed when selected.\n */\n closeOnSelect?: boolean\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The value of the menu item.\n */\n value?: string\n}\n\nexport const useMenuItem = ({\n id,\n \"aria-disabled\": ariaDisabled,\n \"data-disabled\": dataDisabled,\n \"data-trigger\": dataTrigger,\n closeOnSelect,\n disabled = false,\n value,\n ...rest\n}: UseMenuItemProps) => {\n const trigger = isTruthyDataAttr(dataTrigger)\n const {\n subMenu,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onCloseSubMenu,\n onSelect,\n } = useMenuContext()\n const uuid = useId()\n const itemRef = useRef<HTMLDivElement>(null)\n const subMenuTrigger = subMenu && trigger\n\n id ??= uuid\n\n const { descendants, register } = useMenuDescendant({\n id,\n disabled: disabled || subMenuTrigger,\n })\n\n const onActive = useCallback(() => {\n if (disabled) return\n\n const descendant = descendants.value(itemRef.current)\n\n onActiveDescendant(descendant)\n }, [descendants, disabled, onActiveDescendant])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => {\n const descendant = descendants.enabledNextValue(itemRef.current)\n\n onActiveDescendant(descendant)\n },\n ArrowUp: () => {\n const descendant = descendants.enabledPrevValue(itemRef.current)\n\n onActiveDescendant(descendant)\n },\n End: () => {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n },\n Enter: () => onSelect(value, closeOnSelect),\n Home: () => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n },\n Space: () => onSelect(value, closeOnSelect),\n [subMenuDirection === \"end\" ? \"ArrowLeft\" : \"ArrowRight\"]: () => {\n if (!subMenu) return\n\n onClose()\n\n const descendant = descendants.firstValue()\n\n descendant?.node.focus()\n },\n })\n },\n [\n closeOnSelect,\n descendants,\n onActiveDescendant,\n onClose,\n onSelect,\n subMenu,\n subMenuDirection,\n value,\n ],\n )\n\n const getItemProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n role: \"menuitem\",\n tabIndex: -1,\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref, itemRef, register),\n onClick: handlerAll(props.onClick, rest.onClick, () =>\n onSelect(value, closeOnSelect),\n ),\n onFocus: handlerAll(props.onFocus, rest.onFocus, onActive),\n onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n onMouseMove: handlerAll(props.onMouseMove, rest.onMouseMove, () => {\n onCloseSubMenu()\n onActive()\n }),\n }),\n [\n id,\n ariaDisabled,\n disabled,\n dataDisabled,\n rest,\n register,\n onActive,\n onKeyDown,\n onSelect,\n value,\n closeOnSelect,\n onCloseSubMenu,\n ],\n )\n\n return {\n subMenuTrigger,\n getItemProps,\n }\n}\n\nexport type UseMenuItemReturn = ReturnType<typeof useMenuItem>\n\nexport type MenuOptionGroupType = \"checkbox\" | \"radio\"\nexport type MenuOptionGroupValue<Y extends MenuOptionGroupType> =\n Y extends \"checkbox\" ? string[] : string\n\nexport interface UseMenuOptionGroupProps<\n Y extends MenuOptionGroupType = \"checkbox\",\n M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n> {\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: M\n /**\n * The type of the menu option group.\n */\n type?: Y\n /**\n * The value of the menu item group.\n */\n value?: M\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: M) => void\n}\n\nexport const useMenuOptionGroup = <\n Y extends \"checkbox\" | \"radio\" = \"checkbox\",\n M extends Y extends \"checkbox\" ? string[] : string = Y extends \"checkbox\"\n ? string[]\n : string,\n>({\n type = \"checkbox\" as Y,\n defaultValue = (type === \"checkbox\" ? [] : \"\") as M,\n value: valueProp,\n onChange: onChangeProp,\n}: UseMenuOptionGroupProps<Y, M>) => {\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const radio = type === \"radio\"\n\n const onChange = useCallback(\n (selectedValue: string) => {\n setValue((prev) => {\n if (radio && isString(prev)) {\n return selectedValue as M\n } else if (!radio && isArray(prev)) {\n return (\n prev.includes(selectedValue)\n ? prev.filter((value) => value !== selectedValue)\n : prev.concat(selectedValue)\n ) as M\n } else {\n return prev\n }\n })\n },\n [radio, setValue],\n )\n\n useUpdateEffect(() => {\n setValue(valueProp!)\n }, [valueProp])\n\n return {\n type,\n value,\n onChange,\n }\n}\n\nexport type UseMenuOptionGroupReturn = ReturnType<typeof useMenuOptionGroup>\n\nexport interface UseMenuOptionItemProps extends UseMenuItemProps {\n /**\n * The value of the menu option item.\n */\n value: string\n}\n\nexport const useMenuOptionItem = ({\n disabled,\n value,\n ...rest\n}: UseMenuOptionItemProps) => {\n const { type, value: selectedValue, onChange } = useMenuOptionGroupContext()\n const { getItemProps } = useMenuItem({ disabled, value, ...rest })\n const radio = type === \"radio\" && isString(selectedValue)\n const checkbox = type === \"checkbox\" && isArray(selectedValue)\n const selected = radio\n ? value === selectedValue\n : checkbox\n ? selectedValue.includes(value)\n : false\n\n const getIndicatorProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n style: { opacity: selected ? 1 : 0, ...style },\n ...props,\n }),\n [selected],\n )\n\n const getOptionItemProps: PropGetter = useCallback(\n (props = {}) =>\n getItemProps({\n role: radio ? \"menuitemradio\" : \"menuitemcheckbox\",\n ...props,\n onClick: handlerAll(props.onClick, () =>\n !disabled ? onChange?.(value) : noop,\n ),\n }),\n [disabled, getItemProps, onChange, radio, value],\n )\n\n return {\n type,\n selected,\n getIndicatorProps,\n getOptionItemProps,\n }\n}\n\nexport type UseMenuOptionItemReturn = ReturnType<typeof useMenuOptionItem>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-notice.cjs","names":["useNoticeContext","useSystem","options","toast","NoticeItem"],"sources":["../../../../src/components/notice/use-notice.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, NoticeConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { StatusScheme } from \"../status\"\nimport { useCallback, useMemo } from \"react\"\nimport { toast } from \"sonner\"\nimport { useSystem } from \"../../core\"\nimport { isArray, omitObject } from \"../../utils\"\nimport { NoticeItem } from \"./notice\"\nimport { useNoticeContext } from \"./notice-provider\"\n\nexport interface UseNoticeOptions\n extends\n Omit<NoticeConfig, \"expand\">,\n Omit<Alert.RootProps, \"direction\" | \"id\" | \"status\" | \"title\">,\n Pick<Alert.LoadingProps, \"loadingScheme\"> {\n /**\n *
|
|
1
|
+
{"version":3,"file":"use-notice.cjs","names":["useNoticeContext","useSystem","options","toast","NoticeItem"],"sources":["../../../../src/components/notice/use-notice.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, NoticeConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { StatusScheme } from \"../status\"\nimport { useCallback, useMemo } from \"react\"\nimport { toast } from \"sonner\"\nimport { useSystem } from \"../../core\"\nimport { isArray, omitObject } from \"../../utils\"\nimport { NoticeItem } from \"./notice\"\nimport { useNoticeContext } from \"./notice-provider\"\n\nexport interface UseNoticeOptions\n extends\n Omit<NoticeConfig, \"expand\">,\n Omit<Alert.RootProps, \"direction\" | \"id\" | \"status\" | \"title\">,\n Pick<Alert.LoadingProps, \"loadingScheme\"> {\n /**\n * The description of the notice.\n */\n description?: ReactNode\n /**\n * Unique identifier for the notice.\n */\n id?: number | string\n /**\n * The status of the notice.\n */\n status?: StatusScheme\n /**\n * The title of the notice.\n */\n title?: ReactNode\n /**\n * If `true`, shows an icon.\n */\n withIcon?: boolean\n /**\n * Props for the close button.\n */\n closeButtonProps?: CloseButtonProps\n /**\n * Props for the content container.\n */\n contentProps?: HTMLStyledProps\n /**\n * Props for the description.\n */\n descriptionProps?: Alert.DescriptionProps\n /**\n * Props for the icon.\n */\n iconProps?: Alert.IconProps\n /**\n * Props for the loading component.\n */\n loadingProps?: Alert.LoadingProps\n /**\n * Props for the title.\n */\n titleProps?: Alert.TitleProps\n}\n\nexport interface NoticeComponentProps {\n onClose: () => void\n}\n\n/**\n * `useNotice` is a custom hook that controls the notifications of the application using Sonner.\n *\n * @see https://yamada-ui.com/docs/hooks/use-notice\n */\nexport const useNotice = (options: UseNoticeOptions = {}) => {\n const { getId, getLimit, updateLimit } = useNoticeContext()\n const { config } = useSystem()\n\n const systemOptions = useMemo(\n () => omitObject(config.notice ?? {}, [\"expand\"]),\n [config],\n )\n const defaultOptions = useMemo(\n () => ({ ...systemOptions, ...options }),\n [options, systemOptions],\n )\n\n const getOptions = useCallback(\n (options: UseNoticeOptions) => ({ ...defaultOptions, ...options }),\n [defaultOptions],\n )\n\n return useMemo(() => {\n const notice = (options: UseNoticeOptions = {}) => {\n options = getOptions(options)\n\n const {\n closable = true,\n closeStrategy = [\"click\", \"drag\"],\n duration,\n limit = 3,\n placement = \"start\",\n ...props\n } = options\n\n if (limit) {\n const currentLimit = getLimit(placement)\n\n if (currentLimit !== limit) updateLimit({ limit, placement })\n }\n\n const closeStrategies = isArray(closeStrategy)\n ? closeStrategy\n : [closeStrategy]\n\n const resolvedOptions = {\n dismissible: closeStrategies.includes(\"drag\") && closable,\n duration: duration ?? Number.POSITIVE_INFINITY,\n toasterId: getId(placement),\n }\n\n return toast.custom(\n (id) => (\n <NoticeItem\n {...props}\n id={id}\n closable={closable}\n closeStrategies={closeStrategies}\n />\n ),\n resolvedOptions,\n )\n }\n\n notice.close = (id: number | string) => toast.dismiss(id)\n\n notice.closeAll = () => toast.dismiss()\n\n notice.update = (id: number | string, options: UseNoticeOptions) => {\n toast.dismiss(id)\n\n return notice(options)\n }\n\n return notice\n }, [getLimit, getOptions, getId, updateLimit])\n}\n\nexport type UseNoticeReturn = ReturnType<typeof useNotice>\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0EA,MAAa,aAAa,UAA4B,EAAE,KAAK;CAC3D,MAAM,EAAE,OAAO,UAAU,gBAAgBA,0CAAkB;CAC3D,MAAM,EAAE,WAAWC,mCAAW;CAE9B,MAAM,2FACa,OAAO,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC,EACjD,CAAC,OAAO,CACT;CACD,MAAM,2CACG;EAAE,GAAG;EAAe,GAAG;EAAS,GACvC,CAAC,SAAS,cAAc,CACzB;CAED,MAAM,qCACH,eAA+B;EAAE,GAAG;EAAgB,GAAGC;EAAS,GACjE,CAAC,eAAe,CACjB;AAED,iCAAqB;EACnB,MAAM,UAAU,YAA4B,EAAE,KAAK;AACjD,eAAU,WAAWA,UAAQ;GAE7B,MAAM,EACJ,WAAW,MACX,gBAAgB,CAAC,SAAS,OAAO,EACjC,UACA,QAAQ,GACR,YAAY,SACZ,GAAG,UACDA;AAEJ,OAAI,OAGF;QAFqB,SAAS,UAAU,KAEnB,MAAO,aAAY;KAAE;KAAO;KAAW,CAAC;;GAG/D,MAAM,iEAA0B,cAAc,GAC1C,gBACA,CAAC,cAAc;GAEnB,MAAM,kBAAkB;IACtB,aAAa,gBAAgB,SAAS,OAAO,IAAI;IACjD,UAAU,YAAY,OAAO;IAC7B,WAAW,MAAM,UAAU;IAC5B;AAED,UAAOC,aAAM,QACV,OACC,2CAACC;IACC,GAAI;IACA;IACM;IACO;KACjB,EAEJ,gBACD;;AAGH,SAAO,SAAS,OAAwBD,aAAM,QAAQ,GAAG;AAEzD,SAAO,iBAAiBA,aAAM,SAAS;AAEvC,SAAO,UAAU,IAAqB,cAA8B;AAClE,gBAAM,QAAQ,GAAG;AAEjB,UAAO,OAAOD,UAAQ;;AAGxB,SAAO;IACN;EAAC;EAAU;EAAY;EAAO;EAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pagination.cjs","names":["createContext","useControllableState","useI18n","page","getRootProps: PropGetter","mergeRefs","getItemProps: PropGetter<\"button\", { page?: Page }>","getStartTriggerProps: PropGetter<\"button\">","getEndTriggerProps: PropGetter<\"button\">","getPrevTriggerProps: PropGetter<\"button\">"],"sources":["../../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { createContext, handlerAll, isNumber, mergeRefs } from \"../../utils\"\n\nexport type Page = \"ellipsis\" | number\n\ninterface PaginationContext extends Omit<UsePaginationReturn, \"getRootProps\"> {}\n\nconst [PaginationContext, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n })\n\nexport { PaginationContext, usePaginationContext }\n\nexport interface UsePaginationProps extends Omit<\n HTMLProps,\n \"onChange\" | \"page\"\n> {\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * The
|
|
1
|
+
{"version":3,"file":"use-pagination.cjs","names":["createContext","useControllableState","useI18n","page","getRootProps: PropGetter","mergeRefs","getItemProps: PropGetter<\"button\", { page?: Page }>","getStartTriggerProps: PropGetter<\"button\">","getEndTriggerProps: PropGetter<\"button\">","getPrevTriggerProps: PropGetter<\"button\">"],"sources":["../../../../src/components/pagination/use-pagination.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { createContext, handlerAll, isNumber, mergeRefs } from \"../../utils\"\n\nexport type Page = \"ellipsis\" | number\n\ninterface PaginationContext extends Omit<UsePaginationReturn, \"getRootProps\"> {}\n\nconst [PaginationContext, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n })\n\nexport { PaginationContext, usePaginationContext }\n\nexport interface UsePaginationProps extends Omit<\n HTMLProps,\n \"onChange\" | \"page\"\n> {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries = 1,\n defaultPage = 1,\n disabled = false,\n page,\n siblings = 1,\n total,\n onChange: onChangeProp,\n ...rest\n}: UsePaginationProps) => {\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n const { t } = useI18n(\"pagination\")\n const range = useMemo((): Page[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"ellipsis\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(Math.max(1, Math.min(total, page))),\n [setCurrentPage, total],\n )\n\n const onChangeStart = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onChangeEnd = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onChangePrev = useCallback(\n () => setCurrentPage((prev) => Math.max(1, prev - 1)),\n [setCurrentPage],\n )\n\n const onChangeNext = useCallback(\n () => setCurrentPage((prev) => Math.min(total, prev + 1)),\n [setCurrentPage, total],\n )\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref),\n \"aria-label\": t(\"Pagination\"),\n role: \"navigation\",\n }),\n [rest, t],\n )\n\n const getItemProps: PropGetter<\"button\", { page?: Page }> = useCallback(\n ({ page, ...props } = {}) => {\n if (isNumber(page)) {\n return {\n type: \"button\",\n \"aria-current\": currentPage === page ? \"page\" : undefined,\n \"aria-label\": t(\"Go to page {value}\", { value: page }),\n disabled,\n ...props,\n onClick: handlerAll(props.onClick, () => onChange(page)),\n }\n } else {\n return { ...props, \"data-ellipsis\": \"\" }\n }\n },\n [currentPage, t, onChange, disabled],\n )\n\n const getStartTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n type: \"button\",\n \"aria-label\": t(\"Go to first page\"),\n disabled: disabled || currentPage === 1,\n ...props,\n onClick: handlerAll(props.onClick, onChangeStart),\n }),\n [onChangeStart, t, disabled, currentPage],\n )\n\n const getEndTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n type: \"button\",\n \"aria-label\": t(\"Go to last page\"),\n disabled: disabled || currentPage === total,\n ...props,\n onClick: handlerAll(props.onClick, onChangeEnd),\n }),\n [onChangeEnd, t, disabled, currentPage, total],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n type: \"button\",\n \"aria-label\": t(\"Go to previous page\"),\n disabled: disabled || currentPage === 1,\n ...props,\n onClick: handlerAll(props.onClick, onChangePrev),\n }),\n [onChangePrev, t, disabled, currentPage],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n type: \"button\",\n \"aria-label\": t(\"Go to next page\"),\n disabled: disabled || currentPage === total,\n ...props,\n onClick: handlerAll(props.onClick, onChangeNext),\n }),\n [onChangeNext, t, disabled, currentPage, total],\n )\n\n return {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n\nconst computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-strength-meter.cjs","names":["useI18n","getRootProps: PropGetter"],"sources":["../../../../src/components/password-input/use-strength-meter.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\n\nexport interface UseStrengthMeterProps extends HTMLProps {\n /**\n * The
|
|
1
|
+
{"version":3,"file":"use-strength-meter.cjs","names":["useI18n","getRootProps: PropGetter"],"sources":["../../../../src/components/password-input/use-strength-meter.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\n\nexport interface UseStrengthMeterProps extends HTMLProps {\n /**\n * The value of the password strength meter.\n */\n value: number\n /**\n * The maximum value of the password strength meter.\n *\n * @default 4\n */\n max?: number\n}\n\nexport const useStrengthMeter = ({\n max = 4,\n value,\n ...rest\n}: UseStrengthMeterProps) => {\n const { t } = useI18n(\"passwordInput\")\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n \"aria-label\": t(\"Password strength meter\"),\n \"aria-valuemax\": max,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": value,\n role: \"meter\",\n ...rest,\n ...props,\n }),\n [max, rest, value, t],\n )\n\n const getIndicatorProps: RequiredPropGetter<\"div\", { index: number }> =\n useCallback(\n ({ index, ...props }) => ({\n \"data-selected\": dataAttr(index < value),\n ...props,\n }),\n [value],\n )\n\n return { getIndicatorProps, getRootProps }\n}\n\nexport type UseStrengthMeterReturn = ReturnType<typeof useStrengthMeter>\n"],"mappings":";;;;;;;;;AAoBA,MAAa,oBAAoB,EAC/B,MAAM,GACN,OACA,GAAG,WACwB;CAC3B,MAAM,EAAE,MAAMA,8BAAQ,gBAAgB;CAEtC,MAAMC,uCACH,WAAW;EACV,cAAc,EAAE,0BAA0B;EAC1C,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,MAAM;EACN,GAAG;EACH,GAAG;EACJ,GACD;EAAC;EAAK;EAAM;EAAO;EAAE,CACtB;AAWD,QAAO;EAAE,2CAPJ,EAAE,OAAO,GAAG,aAAa;GACxB,iEAA0B,QAAQ,MAAM;GACxC,GAAG;GACJ,GACD,CAAC,MAAM,CACR;EAEyB;EAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"picture.cjs","names":["Picture: FC<PictureProps>","useSystem","rest","tokenToValue","styled","Image","Source: FC<SourceProps>"],"sources":["../../../../src/components/picture/picture.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { HTMLStyledProps, ThemeTokens } from \"../../core\"\nimport type { AnyString } from \"../../utils\"\nimport type { ImageProps } from \"../image\"\nimport { useCallback, useMemo } from \"react\"\nimport { styled, tokenToValue, useSystem } from \"../../core\"\nimport { getPx, isUndefined } from \"../../utils\"\nimport { Image } from \"../image\"\n\nconst createQuery = (\n minW: number | string | undefined,\n maxW: number | string | undefined,\n) => {\n let media = \"\"\n\n if (minW) {\n media = `(min-width: ${minW}px)`\n\n if (maxW) media += ` and (max-width: ${maxW}px)`\n } else {\n media = `(max-width: ${maxW}px)`\n }\n\n return media\n}\n\nexport interface PictureSource extends SourceProps {\n /**\n * The
|
|
1
|
+
{"version":3,"file":"picture.cjs","names":["Picture: FC<PictureProps>","useSystem","rest","tokenToValue","styled","Image","Source: FC<SourceProps>"],"sources":["../../../../src/components/picture/picture.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { HTMLStyledProps, ThemeTokens } from \"../../core\"\nimport type { AnyString } from \"../../utils\"\nimport type { ImageProps } from \"../image\"\nimport { useCallback, useMemo } from \"react\"\nimport { styled, tokenToValue, useSystem } from \"../../core\"\nimport { getPx, isUndefined } from \"../../utils\"\nimport { Image } from \"../image\"\n\nconst createQuery = (\n minW: number | string | undefined,\n maxW: number | string | undefined,\n) => {\n let media = \"\"\n\n if (minW) {\n media = `(min-width: ${minW}px)`\n\n if (maxW) media += ` and (max-width: ${maxW}px)`\n } else {\n media = `(max-width: ${maxW}px)`\n }\n\n return media\n}\n\nexport interface PictureSource extends SourceProps {\n /**\n * The maximum width for the source.\n *\n * If media is set, media takes precedence.\n */\n maxW?: AnyString | number | ThemeTokens[\"sizes\"]\n /**\n * The minimum width for the source.\n *\n * If media is set, media takes precedence.\n */\n minW?: AnyString | number | ThemeTokens[\"sizes\"]\n /**\n * The source set for the source element.\n */\n srcSet?: string\n}\n\nexport interface PictureProps extends ImageProps {\n /**\n * If `true`, the sources will be sorted by the `minW` and `maxW` properties.\n *\n * @default true\n */\n enableSorting?: boolean\n /**\n * The sources for the picture element.\n */\n sources?: PictureSource[]\n /**\n * The props for the picture element.\n */\n pictureProps?: HTMLStyledProps<\"picture\">\n}\n\n/**\n * `Picture` is a component that uses the `picture` element to provide alternative images for different display or device scenarios.\n *\n * @see https://yamada-ui.com/docs/components/picture\n */\nexport const Picture: FC<PictureProps> = ({\n children,\n enableSorting = true,\n sources: sourcesProp = [],\n pictureProps,\n ...rest\n}) => {\n const system = useSystem()\n const { queriesObj } = system.breakpoints\n const { direction = \"down\", identifier = \"@media screen\" } =\n system.config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const compareSources = useCallback(\n (a: PictureSource, b: PictureSource) => {\n const k = direction === \"down\" ? \"maxW\" : \"minW\"\n\n if (isUndefined(a[k]) && !isUndefined(b[k])) return -1\n\n if (!isUndefined(a[k]) && isUndefined(b[k])) return 1\n\n return direction === \"down\"\n ? Number(a.maxW) - Number(b.maxW)\n : Number(b.minW) - Number(a.minW)\n },\n [direction],\n )\n\n const sources = useMemo(() => {\n const computedSources = sourcesProp.map(\n ({ maxW, media, minW, ...rest }) => {\n if (!media) {\n if (minW) minW = getPx(tokenToValue(system)(\"sizes\", minW))\n if (maxW) maxW = getPx(tokenToValue(system)(\"sizes\", maxW))\n\n media = createQuery(minW, maxW)\n\n return { ...rest, maxW, media, minW }\n } else {\n const { maxW, minW, query } = queriesObj[media] ?? {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return { ...rest, maxW, media, minW }\n }\n },\n )\n\n if (enableSorting) {\n return computedSources.sort(compareSources)\n } else {\n return computedSources\n }\n }, [\n sourcesProp,\n enableSorting,\n system,\n queriesObj,\n searchValue,\n compareSources,\n ])\n\n const sourceElements = useMemo(\n () =>\n sources.map(({ maxW: _maxW, minW: _minW, ...rest }, index) => (\n <styled.source key={index} {...rest} />\n )),\n [sources],\n )\n\n return (\n <styled.picture {...pictureProps}>\n {children ?? (\n <>\n {sourceElements}\n\n <Image {...rest} />\n </>\n )}\n </styled.picture>\n )\n}\n\nexport interface SourceProps extends HTMLStyledProps<\"source\"> {\n /**\n * The media query for the source.\n */\n media?: AnyString | ThemeTokens[\"breakpoints\"]\n}\n\nexport const Source: FC<SourceProps> = ({ media, ...rest }) => {\n const { breakpoints, config } = useSystem()\n const { queriesObj } = breakpoints\n const { identifier = \"@media screen\" } = config.breakpoint ?? {}\n const searchValue =\n identifier === \"@media screen\" ? \"@media screen and \" : `${identifier} `\n\n const { query } = media ? (queriesObj[media] ?? {}) : {}\n\n if (query) media = query.replace(searchValue, \"\")\n\n return <styled.source media={media} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;;AASA,MAAM,eACJ,MACA,SACG;CACH,IAAI,QAAQ;AAEZ,KAAI,MAAM;AACR,UAAQ,eAAe,KAAK;AAE5B,MAAI,KAAM,UAAS,oBAAoB,KAAK;OAE5C,SAAQ,eAAe,KAAK;AAG9B,QAAO;;;;;;;AA4CT,MAAaA,WAA6B,EACxC,UACA,gBAAgB,MAChB,SAAS,cAAc,EAAE,EACzB,cACA,GAAG,WACC;CACJ,MAAM,SAASC,mCAAW;CAC1B,MAAM,EAAE,eAAe,OAAO;CAC9B,MAAM,EAAE,YAAY,QAAQ,aAAa,oBACvC,OAAO,OAAO,cAAc,EAAE;CAChC,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,yCACH,GAAkB,MAAqB;EACtC,MAAM,IAAI,cAAc,SAAS,SAAS;AAE1C,yDAAgB,EAAE,GAAG,IAAI,oDAAa,EAAE,GAAG,CAAE,QAAO;AAEpD,MAAI,oDAAa,EAAE,GAAG,uDAAgB,EAAE,GAAG,CAAE,QAAO;AAEpD,SAAO,cAAc,SACjB,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,GAC/B,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK;IAErC,CAAC,UAAU,CACZ;CAED,MAAM,mCAAwB;EAC5B,MAAM,kBAAkB,YAAY,KACjC,EAAE,MAAM,OAAO,MAAM,GAAGC,aAAW;AAClC,OAAI,CAAC,OAAO;AACV,QAAI,KAAM,qDAAaC,2BAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAC3D,QAAI,KAAM,qDAAaA,2BAAa,OAAO,CAAC,SAAS,KAAK,CAAC;AAE3D,YAAQ,YAAY,MAAM,KAAK;AAE/B,WAAO;KAAE,GAAGD;KAAM;KAAM;KAAO;KAAM;UAChC;IACL,MAAM,EAAE,cAAM,cAAM,UAAU,WAAW,UAAU,EAAE;AAErD,QAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,WAAO;KAAE,GAAGA;KAAM;KAAM;KAAO;KAAM;;IAG1C;AAED,MAAI,cACF,QAAO,gBAAgB,KAAK,eAAe;MAE3C,QAAO;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,0CAEF,QAAQ,KAAK,EAAE,MAAM,OAAO,MAAM,OAAO,GAAGA,UAAQ,UAClD,2CAACE,uBAAO,UAAmB,GAAIF,UAAX,MAAmB,CACvC,EACJ,CAAC,QAAQ,CACV;AAED,QACE,2CAACE,uBAAO;EAAQ,GAAI;YACjB,YACC,qFACG,gBAED,2CAACC,uBAAM,GAAI,OAAQ,IAClB;GAEU;;AAWrB,MAAaC,UAA2B,EAAE,OAAO,GAAG,WAAW;CAC7D,MAAM,EAAE,aAAa,WAAWL,mCAAW;CAC3C,MAAM,EAAE,eAAe;CACvB,MAAM,EAAE,aAAa,oBAAoB,OAAO,cAAc,EAAE;CAChE,MAAM,cACJ,eAAe,kBAAkB,uBAAuB,GAAG,WAAW;CAExE,MAAM,EAAE,UAAU,QAAS,WAAW,UAAU,EAAE,GAAI,EAAE;AAExD,KAAI,MAAO,SAAQ,MAAM,QAAQ,aAAa,GAAG;AAEjD,QAAO,2CAACG,uBAAO;EAAc;EAAO,GAAI;GAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pin-input.cjs","names":["createDescendants","useFieldProps","useControllableState","values","value","nextValue","index","ev","getRootProps: PropGetter","props"],"sources":["../../../../src/components/pin-input/use-pin-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { cx, filterUndefined, handlerAll, runKeyAction } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst {\n DescendantsContext: PinInputDescendantsContext,\n useDescendant: usePinInputDescendant,\n useDescendants: usePinInputDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n PinInputDescendantsContext,\n usePinInputDescendant,\n usePinInputDescendants,\n}\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: UsePinInputProps[\"type\"]) => {\n const NUMERIC_REGEX = /^[0-9]+$/\n const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n return regex.test(value)\n}\n\nexport interface UsePinInputProps\n extends\n Omit<HTMLProps, \"defaultValue\" | \"mask\" | \"onChange\" | \"value\">,\n FieldProps {\n /**\n * The top-level id string that will be applied to the input fields.\n * The index of the input will be appended to this top-level id.\n */\n id?: string\n /**\n * The type of values the pin-input should allow.\n *\n * @default 'number'\n */\n type?: \"alphanumeric\" | \"number\"\n /**\n * If `true`, the pin input receives focus on mount.\n *\n * @default false\n */\n autoFocus?: boolean\n /**\n * The initial value of the pin input.\n */\n defaultValue?: string\n /**\n * The number of inputs to display.\n *\n * @default 4\n */\n items?: number\n /**\n * If `true`, focus will move automatically to the next input once filled.\n *\n * @default true\n */\n manageFocus?: boolean\n /**\n * If `true`, the input's value will be masked just like `type=password`.\n */\n mask?: boolean\n /**\n * If `true`, the pin input component signals to its fields that they should.\n */\n otp?: boolean\n /**\n * The placeholder for the pin input.\n *\n * @default '◯'\n */\n placeholder?: string\n /**\n * The value of the pin input.\n */\n value?: string\n /**\n * Function called on input change.\n */\n onChange?: (value: string) => void\n /**\n * Function called when all inputs have valid values.\n */\n onComplete?: (value: string) => void\n}\n\nexport const usePinInput = (props: UsePinInputProps = {}) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n type = \"number\",\n autoFocus,\n defaultValue,\n disabled,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"◯\",\n readOnly,\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const descendants = usePinInputDescendants()\n const [moveFocus, setMoveFocus] = useState<boolean>(true)\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [values, setValues] = useControllableState<string[]>({\n defaultValue: toArray(defaultValue) || [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(values.join(\"\")),\n })\n\n const focusNext = useCallback(\n (index: number) => {\n if (!moveFocus || !manageFocus) return\n\n const next = descendants.nextValue(index, false)\n\n if (!next) return\n\n requestAnimationFrame(() => next.node.focus())\n },\n [descendants, moveFocus, manageFocus],\n )\n\n const focusInputField = useCallback(\n (direction: \"next\" | \"prev\", index: number) => {\n const input =\n direction === \"next\"\n ? descendants.nextValue(index, false)\n : descendants.prevValue(index, false)\n\n if (!input) return\n\n const valueLength = input.node.value.length\n\n requestAnimationFrame(() => {\n input.node.focus()\n input.node.setSelectionRange(0, valueLength)\n })\n },\n [descendants],\n )\n\n const setValue = useCallback(\n (value: string, index: number, focus = true) => {\n let nextValues = [...values]\n\n nextValues[index] = value\n\n setValues(nextValues)\n\n nextValues = nextValues.filter(Boolean)\n\n const complete = value !== \"\" && nextValues.length === descendants.count()\n\n if (complete) {\n onComplete?.(nextValues.join(\"\"))\n descendants.value(index)?.node.blur()\n } else if (focus) {\n focusNext(index)\n }\n },\n [values, setValues, descendants, onComplete, focusNext],\n )\n\n const getNextValue = useCallback(\n (value: string | undefined, eventValue: string) => {\n let nextValue = eventValue\n\n if (!value?.length) return nextValue\n\n if (value.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ target }: ChangeEvent<HTMLInputElement>) => {\n const eventValue = target.value\n const currentValue = values[index]\n const nextValue = getNextValue(currentValue, eventValue)\n\n if (nextValue === \"\") {\n setValue(\"\", index)\n\n return\n }\n\n if (eventValue.length > 2) {\n if (!validate(eventValue, type)) return\n\n const nextValue = eventValue\n .split(\"\")\n .filter((_, index) => index < descendants.count())\n\n setValues(nextValue)\n\n if (nextValue.length === descendants.count()) {\n onComplete?.(nextValue.join(\"\"))\n descendants.value(index)?.node.blur()\n }\n } else {\n if (validate(nextValue, type)) setValue(nextValue, index)\n\n setMoveFocus(true)\n }\n },\n [descendants, getNextValue, onComplete, setValue, setValues, type, values],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLInputElement>) => {\n if (!manageFocus) return\n\n runKeyAction(\n ev,\n {\n ArrowLeft: (ev) => {\n ev.preventDefault()\n focusInputField(\"prev\", index)\n },\n ArrowRight: (ev) => {\n ev.preventDefault()\n focusInputField(\"next\", index)\n },\n Backspace: (ev) => {\n if ((ev.target as HTMLInputElement).value === \"\") {\n const prevInput = descendants.prevValue(index, false)\n\n if (!prevInput) return\n\n setValue(\"\", index - 1, false)\n prevInput.node.focus()\n setMoveFocus(true)\n } else {\n setMoveFocus(false)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [descendants, focusInputField, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n useEffect(() => {\n if (!autoFocus) return\n\n const firstValue = descendants.firstValue()\n\n if (!firstValue) return\n\n requestAnimationFrame(() => firstValue.node.focus())\n }, [autoFocus, descendants])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n role: \"group\",\n ...rest,\n ...props,\n }),\n [rest],\n )\n\n const getInputProps: RequiredPropGetter<\"input\", { index: number }> =\n useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, index, ...props }) => ({\n ...ariaProps,\n ...dataProps,\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n disabled,\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n readOnly,\n value: values[index] || \"\",\n ...filterUndefined(props),\n id: `${id}${index ? `-${index}` : \"\"}`,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n mask,\n type,\n labelId,\n otp,\n disabled,\n focusedIndex,\n readOnly,\n placeholder,\n values,\n id,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n ],\n )\n\n return {\n descendants,\n items,\n getInputProps,\n getRootProps,\n }\n}\n\nexport type UsePinInputReturn = ReturnType<typeof usePinInput>\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EACJ,oBAAoB,4BACpB,eAAe,uBACf,gBAAgB,2BACdA,uDAAqC;AAQzC,MAAM,WAAW,UAAmB,OAAO,MAAM,GAAG;AAEpD,MAAM,YAAY,OAAe,SAAmC;AAMlE,SAFc,SAAS,iBAFK,oBADN,YAKT,KAAK,MAAM;;AAoE1B,MAAa,eAAe,QAA0B,EAAE,KAAK;CAC3D,MAAM,yBAAc;CACpB,MAAM,EACJ,SAAS,EAAE,YAAY,EAAE,EACzB,OAAO,EACL,KAAK,MACL,OAAO,UACP,WACA,cACA,UACA,QAAQ,GACR,cAAc,MACd,MACA,MAAM,OACN,cAAc,KACd,UACA,OACA,UAAU,cACV,YACA,GAAG,QAEL,WACA,WACA,eACEC,sCAAc,MAAM;CACxB,MAAM,cAAc,wBAAwB;CAC5C,MAAM,CAAC,WAAW,oCAAkC,KAAK;CACzD,MAAM,CAAC,cAAc,uCAAoC,GAAG;CAC5D,MAAM,CAAC,QAAQ,aAAaC,gEAA+B;EACzD,cAAc,QAAQ,aAAa,IAAI,EAAE;EACzC,OAAO,QAAQ,MAAM;EACrB,WAAW,aAAW,eAAeC,SAAO,KAAK,GAAG,CAAC;EACtD,CAAC;CAEF,MAAM,oCACH,UAAkB;AACjB,MAAI,CAAC,aAAa,CAAC,YAAa;EAEhC,MAAM,OAAO,YAAY,UAAU,OAAO,MAAM;AAEhD,MAAI,CAAC,KAAM;AAEX,8BAA4B,KAAK,KAAK,OAAO,CAAC;IAEhD;EAAC;EAAa;EAAW;EAAY,CACtC;CAED,MAAM,0CACH,WAA4B,UAAkB;EAC7C,MAAM,QACJ,cAAc,SACV,YAAY,UAAU,OAAO,MAAM,GACnC,YAAY,UAAU,OAAO,MAAM;AAEzC,MAAI,CAAC,MAAO;EAEZ,MAAM,cAAc,MAAM,KAAK,MAAM;AAErC,8BAA4B;AAC1B,SAAM,KAAK,OAAO;AAClB,SAAM,KAAK,kBAAkB,GAAG,YAAY;IAC5C;IAEJ,CAAC,YAAY,CACd;CAED,MAAM,mCACH,SAAe,OAAe,QAAQ,SAAS;EAC9C,IAAI,aAAa,CAAC,GAAG,OAAO;AAE5B,aAAW,SAASC;AAEpB,YAAU,WAAW;AAErB,eAAa,WAAW,OAAO,QAAQ;AAIvC,MAFiBA,YAAU,MAAM,WAAW,WAAW,YAAY,OAAO,EAE5D;AACZ,gBAAa,WAAW,KAAK,GAAG,CAAC;AACjC,eAAY,MAAM,MAAM,EAAE,KAAK,MAAM;aAC5B,MACT,WAAU,MAAM;IAGpB;EAAC;EAAQ;EAAW;EAAa;EAAY;EAAU,CACxD;CAED,MAAM,uCACH,SAA2B,eAAuB;EACjD,IAAI,YAAY;AAEhB,MAAI,CAACA,SAAO,OAAQ,QAAO;AAE3B,MAAIA,QAAM,WAAW,WAAW,OAAO,EAAE,CAAC,CACxC,aAAY,WAAW,OAAO,EAAE;WACvBA,QAAM,WAAW,WAAW,OAAO,EAAE,CAAC,CAC/C,aAAY,WAAW,OAAO,EAAE;AAGlC,SAAO;IAET,EAAE,CACH;CAED,MAAM,mCACH,WACE,EAAE,aAA4C;EAC7C,MAAM,aAAa,OAAO;EAC1B,MAAM,eAAe,OAAO;EAC5B,MAAM,YAAY,aAAa,cAAc,WAAW;AAExD,MAAI,cAAc,IAAI;AACpB,YAAS,IAAI,MAAM;AAEnB;;AAGF,MAAI,WAAW,SAAS,GAAG;AACzB,OAAI,CAAC,SAAS,YAAY,KAAK,CAAE;GAEjC,MAAMC,cAAY,WACf,MAAM,GAAG,CACT,QAAQ,GAAG,YAAUC,UAAQ,YAAY,OAAO,CAAC;AAEpD,aAAUD,YAAU;AAEpB,OAAIA,YAAU,WAAW,YAAY,OAAO,EAAE;AAC5C,iBAAaA,YAAU,KAAK,GAAG,CAAC;AAChC,gBAAY,MAAM,MAAM,EAAE,KAAK,MAAM;;SAElC;AACL,OAAI,SAAS,WAAW,KAAK,CAAE,UAAS,WAAW,MAAM;AAEzD,gBAAa,KAAK;;IAGxB;EAAC;EAAa;EAAc;EAAY;EAAU;EAAW;EAAM;EAAO,CAC3E;CAED,MAAM,oCACH,WAAmB,OAAwC;AAC1D,MAAI,CAAC,YAAa;AAElB,2BACE,IACA;GACE,YAAY,SAAO;AACjB,SAAG,gBAAgB;AACnB,oBAAgB,QAAQ,MAAM;;GAEhC,aAAa,SAAO;AAClB,SAAG,gBAAgB;AACnB,oBAAgB,QAAQ,MAAM;;GAEhC,YAAY,SAAO;AACjB,QAAKE,KAAG,OAA4B,UAAU,IAAI;KAChD,MAAM,YAAY,YAAY,UAAU,OAAO,MAAM;AAErD,SAAI,CAAC,UAAW;AAEhB,cAAS,IAAI,QAAQ,GAAG,MAAM;AAC9B,eAAU,KAAK,OAAO;AACtB,kBAAa,KAAK;UAElB,cAAa,MAAM;;GAGxB,EACD,EAAE,gBAAgB,OAAO,CAC1B;IAEH;EAAC;EAAa;EAAiB;EAAa;EAAS,CACtD;CAED,MAAM,kCACH,gBAAwB,gBAAgB,MAAM,EAC/C,EAAE,CACH;CAED,MAAM,sCAA2B,gBAAgB,GAAG,EAAE,EAAE,CAAC;AAEzD,4BAAgB;AACd,MAAI,CAAC,UAAW;EAEhB,MAAM,aAAa,YAAY,YAAY;AAE3C,MAAI,CAAC,WAAY;AAEjB,8BAA4B,WAAW,KAAK,OAAO,CAAC;IACnD,CAAC,WAAW,YAAY,CAAC;CAE5B,MAAMC,uCACH,aAAW;EACV,MAAM;EACN,GAAG;EACH,GAAGC;EACJ,GACD,CAAC,KAAK,CACP;AA8CD,QAAO;EACL;EACA;EACA,uCA7CG,EAAE,mBAAmB,gBAAgB,OAAO,GAAGA,eAAa;GAC3D,GAAG;GACH,GAAG;GACH,MAAM,OAAO,aAAa,SAAS,WAAW,QAAQ;GACtD,6DAAsB,gBAAgB,QAAQ;GAC9C,cAAc,MAAM,kBAAkB;GACtC;GACA,WAAW,SAAS,WAAW,YAAY;GAC3C,aACE,iBAAiB,SAAS,CAAC,YAAY,CAACA,QAAM,WAC1C,KACA;GACN;GACA,OAAO,OAAO,UAAU;GACxB,0DAAmBA,QAAM;GACzB,IAAI,GAAG,KAAK,QAAQ,IAAI,UAAU;GAClC,0DAAmB,WAAW,QAAQA,QAAM,QAAQ,OAAO;GAC3D,4DAAqBA,QAAM,UAAU,SAAS,MAAM,CAAC;GACrD,2DAAoB,WAAW,SAASA,QAAM,SAAS,QAAQ,MAAM,CAAC;GACtE,6DAAsBA,QAAM,WAAW,UAAU,MAAM,CAAC;GACzD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAMD;EACD"}
|
|
1
|
+
{"version":3,"file":"use-pin-input.cjs","names":["createDescendants","useFieldProps","useControllableState","values","value","nextValue","index","ev","getRootProps: PropGetter","props"],"sources":["../../../../src/components/pin-input/use-pin-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { cx, filterUndefined, handlerAll, runKeyAction } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst {\n DescendantsContext: PinInputDescendantsContext,\n useDescendant: usePinInputDescendant,\n useDescendants: usePinInputDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n PinInputDescendantsContext,\n usePinInputDescendant,\n usePinInputDescendants,\n}\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: UsePinInputProps[\"type\"]) => {\n const NUMERIC_REGEX = /^[0-9]+$/\n const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n return regex.test(value)\n}\n\nexport interface UsePinInputProps\n extends\n Omit<HTMLProps, \"defaultValue\" | \"mask\" | \"onChange\" | \"value\">,\n FieldProps {\n /**\n * If `true`, the pin input receives focus on mount.\n *\n * @default false\n */\n autoFocus?: boolean\n /**\n * The initial value of the pin input.\n */\n defaultValue?: string\n /**\n * The top-level id string that will be applied to the input fields.\n * The index of the input will be appended to this top-level id.\n */\n id?: string\n /**\n * The number of inputs to display.\n *\n * @default 4\n */\n items?: number\n /**\n * If `true`, focus will move automatically to the next input once filled.\n *\n * @default true\n */\n manageFocus?: boolean\n /**\n * If `true`, the input's value will be masked just like `type=password`.\n */\n mask?: boolean\n /**\n * If `true`, the pin input component signals to its fields that they should.\n */\n otp?: boolean\n /**\n * The placeholder for the pin input.\n *\n * @default '◯'\n */\n placeholder?: string\n /**\n * The type of values the pin-input should allow.\n *\n * @default 'number'\n */\n type?: \"alphanumeric\" | \"number\"\n /**\n * The value of the pin input.\n */\n value?: string\n /**\n * Function called on input change.\n */\n onChange?: (value: string) => void\n /**\n * Function called when all inputs have valid values.\n */\n onComplete?: (value: string) => void\n}\n\nexport const usePinInput = (props: UsePinInputProps = {}) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n type = \"number\",\n autoFocus,\n defaultValue,\n disabled,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"◯\",\n readOnly,\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const descendants = usePinInputDescendants()\n const [moveFocus, setMoveFocus] = useState<boolean>(true)\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [values, setValues] = useControllableState<string[]>({\n defaultValue: toArray(defaultValue) || [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(values.join(\"\")),\n })\n\n const focusNext = useCallback(\n (index: number) => {\n if (!moveFocus || !manageFocus) return\n\n const next = descendants.nextValue(index, false)\n\n if (!next) return\n\n requestAnimationFrame(() => next.node.focus())\n },\n [descendants, moveFocus, manageFocus],\n )\n\n const focusInputField = useCallback(\n (direction: \"next\" | \"prev\", index: number) => {\n const input =\n direction === \"next\"\n ? descendants.nextValue(index, false)\n : descendants.prevValue(index, false)\n\n if (!input) return\n\n const valueLength = input.node.value.length\n\n requestAnimationFrame(() => {\n input.node.focus()\n input.node.setSelectionRange(0, valueLength)\n })\n },\n [descendants],\n )\n\n const setValue = useCallback(\n (value: string, index: number, focus = true) => {\n let nextValues = [...values]\n\n nextValues[index] = value\n\n setValues(nextValues)\n\n nextValues = nextValues.filter(Boolean)\n\n const complete = value !== \"\" && nextValues.length === descendants.count()\n\n if (complete) {\n onComplete?.(nextValues.join(\"\"))\n descendants.value(index)?.node.blur()\n } else if (focus) {\n focusNext(index)\n }\n },\n [values, setValues, descendants, onComplete, focusNext],\n )\n\n const getNextValue = useCallback(\n (value: string | undefined, eventValue: string) => {\n let nextValue = eventValue\n\n if (!value?.length) return nextValue\n\n if (value.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ target }: ChangeEvent<HTMLInputElement>) => {\n const eventValue = target.value\n const currentValue = values[index]\n const nextValue = getNextValue(currentValue, eventValue)\n\n if (nextValue === \"\") {\n setValue(\"\", index)\n\n return\n }\n\n if (eventValue.length > 2) {\n if (!validate(eventValue, type)) return\n\n const nextValue = eventValue\n .split(\"\")\n .filter((_, index) => index < descendants.count())\n\n setValues(nextValue)\n\n if (nextValue.length === descendants.count()) {\n onComplete?.(nextValue.join(\"\"))\n descendants.value(index)?.node.blur()\n }\n } else {\n if (validate(nextValue, type)) setValue(nextValue, index)\n\n setMoveFocus(true)\n }\n },\n [descendants, getNextValue, onComplete, setValue, setValues, type, values],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLInputElement>) => {\n if (!manageFocus) return\n\n runKeyAction(\n ev,\n {\n ArrowLeft: (ev) => {\n ev.preventDefault()\n focusInputField(\"prev\", index)\n },\n ArrowRight: (ev) => {\n ev.preventDefault()\n focusInputField(\"next\", index)\n },\n Backspace: (ev) => {\n if ((ev.target as HTMLInputElement).value === \"\") {\n const prevInput = descendants.prevValue(index, false)\n\n if (!prevInput) return\n\n setValue(\"\", index - 1, false)\n prevInput.node.focus()\n setMoveFocus(true)\n } else {\n setMoveFocus(false)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [descendants, focusInputField, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n useEffect(() => {\n if (!autoFocus) return\n\n const firstValue = descendants.firstValue()\n\n if (!firstValue) return\n\n requestAnimationFrame(() => firstValue.node.focus())\n }, [autoFocus, descendants])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n role: \"group\",\n ...rest,\n ...props,\n }),\n [rest],\n )\n\n const getInputProps: RequiredPropGetter<\"input\", { index: number }> =\n useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, index, ...props }) => ({\n ...ariaProps,\n ...dataProps,\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n disabled,\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n readOnly,\n value: values[index] || \"\",\n ...filterUndefined(props),\n id: `${id}${index ? `-${index}` : \"\"}`,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n mask,\n type,\n labelId,\n otp,\n disabled,\n focusedIndex,\n readOnly,\n placeholder,\n values,\n id,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n ],\n )\n\n return {\n descendants,\n items,\n getInputProps,\n getRootProps,\n }\n}\n\nexport type UsePinInputReturn = ReturnType<typeof usePinInput>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-radio.cjs","names":["useRadioGroupContext","useFieldProps","useControllableEventState","getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/radio/use-radio.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useRadioGroupContext } from \"./use-radio-group\"\n\nexport interface UseRadioProps<Y extends string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /**\n *
|
|
1
|
+
{"version":3,"file":"use-radio.cjs","names":["useRadioGroupContext","useFieldProps","useControllableEventState","getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/radio/use-radio.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useRadioGroupContext } from \"./use-radio-group\"\n\nexport interface UseRadioProps<Y extends string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /**\n * If `true`, the radio will be checked.\n */\n checked?: boolean\n /**\n * If `true`, the radio will be initially checked.\n *\n * @default false\n */\n defaultChecked?: boolean\n /**\n * id assigned to input.\n */\n id?: string\n /**\n * The name of the input field in a radio.\n */\n name?: string\n /**\n * The value of the radio.\n */\n value?: Y\n /**\n * The callback invoked when the radio is blurred.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the checked state changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n /**\n * The callback invoked when the radio is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <Y extends string = string>({\n \"aria-describedby\": ariaDescribedbyProp,\n ...props\n}: UseRadioProps<Y> = {}) => {\n const group = useRadioGroupContext()\n const {\n name: groupName,\n value: groupValue,\n getInputProps: getGroupInputProps,\n getLabelProps,\n } = group ?? {}\n const uuid = useId()\n const {\n props: {\n id,\n ref,\n name = groupName,\n checked: checkedProp,\n defaultChecked = false,\n disabled,\n readOnly,\n required,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps({\n id: group ? uuid : undefined,\n ...props,\n notSupportReadOnly: true,\n })\n const interactive = !(readOnly || disabled)\n const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n const resolvedChecked =\n !isUndefined(groupValue) && !isUndefined(value)\n ? groupValue === value\n : checkedProp\n const [checked, setChecked] = useControllableEventState({\n defaultValue: defaultChecked,\n value: resolvedChecked,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return (ev.defaultPrevented = true)\n\n setChecked(ev)\n },\n [setChecked, interactive],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => {\n const sharedProps = {\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n ...rest,\n ...props,\n }\n\n return getLabelProps?.(sharedProps) ?? sharedProps\n },\n [dataProps, getLabelProps, checked, rest],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ \"aria-describedby\": ariaDescribedby, ...props } = {}) => {\n const sharedProps = {\n ...dataProps,\n ...ariaProps,\n id,\n type: \"radio\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": checked,\n \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n \"data-checked\": dataAttr(checked),\n checked,\n disabled,\n readOnly,\n required,\n value,\n ...props,\n ref: mergeRefs(props.ref, ref),\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n return getGroupInputProps?.(sharedProps) ?? sharedProps\n },\n [\n id,\n name,\n checked,\n resolvedAriaDescribedby,\n disabled,\n readOnly,\n required,\n value,\n dataProps,\n ariaProps,\n ref,\n eventProps,\n onChange,\n getGroupInputProps,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-hidden\": \"true\",\n \"data-checked\": dataAttr(checked),\n ...props,\n }),\n [dataProps, checked],\n )\n\n return {\n checked,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAa,YAAuC,EAClD,oBAAoB,qBACpB,GAAG,UACiB,EAAE,KAAK;CAC3B,MAAM,QAAQA,8CAAsB;CACpC,MAAM,EACJ,MAAM,WACN,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,OAAO,WACP,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACEC,sCAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAcC,qEAA0B;EACtD,cAAc;EACd,OALA,oDAAa,WAAW,IAAI,oDAAa,MAAM,GAC3C,eAAe,QACf;EAIJ,UAAU;EACX,CAAC;CAEF,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,aAAW,GAAG;IAEhB,CAAC,YAAY,YAAY,CAC1B;CAED,MAAMC,uCACH,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,gEAAyB,QAAQ;GACjC,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAe;EAAS;EAAK,CAC1C;CAED,MAAMC,wCACH,EAAE,oBAAoBC,mBAAiB,GAAGF,YAAU,EAAE,KAAK;EAC1D,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOG,qCAAyB;GAChC,gBAAgB;GAChB,8DAAuB,yBAAyBD,kBAAgB;GAChE,gEAAyB,QAAQ;GACjC;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAKI,sBAAUJ,QAAM,KAAK,IAAI;GAC9B,0DAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,4DAAqBA,QAAM,UAAU,SAAS;GAC9C,2DAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAYD,QAAO;EACL;EACA,2CAXC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,gEAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAKC;EACA;EACA;EACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-rating.cjs","names":["createContext","useFieldProps","useControllableState","roundedValue","props","mergeRefs","value","getLabelProps: PropGetter<\"label\">","visuallyHiddenAttributes"],"sources":["../../../../src/components/rating/use-rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent, MouseEvent, TouchEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n clampNumber,\n createContext,\n dataAttr,\n handlerAll,\n mergeRefs,\n runKeyAction,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst getRoundedValue = (value: number, to: number) => {\n const rounded = Math.round(value / to) * to\n const precision = `${to}`.split(\".\")[1]?.length || 0\n\n return Number(rounded.toFixed(precision))\n}\n\nexport interface RatingContext extends Omit<UseRatingReturn, \"getRootProps\"> {}\n\nconst [RatingContext, useRatingContext] = createContext<RatingContext>({\n name: \"RatingContext\",\n})\n\nexport { RatingContext, useRatingContext }\n\nexport interface UseRatingProps\n extends FieldProps, Omit<HTMLProps, \"color\" | \"defaultValue\" | \"onChange\"> {\n /**\n * The top-level id string that will be applied to the rating.\n * The index of the rating item will be appended to this top-level id.\n */\n id?: string\n /**\n * The name of the input element.\n */\n name?: string\n /**\n * Number of controls that should be rendered.\n *\n * @default 5\n */\n count?: number\n /**\n * The initial value of the rating.\n *\n * @default 0\n */\n defaultValue?: number\n /**\n * Number of fractions each item can be divided into,\n *\n * @default 1\n */\n fractions?: number\n /**\n * If `true`, only the selected icons will be filled.\n *\n * @default false\n */\n highlightSelectedOnly?: boolean\n /**\n * The value of the rating.\n */\n value?: number\n /**\n * The callback invoked when value state changes.\n */\n onChange?: (value: number) => void\n /**\n * The callback invoked when hovering over the rating.\n */\n onHover?: (value: number) => void\n}\n\nexport const useRating = (props: UseRatingProps = {}) => {\n const uuid = useId()\n const {\n props: {\n id = uuid,\n name = uuid,\n count: countProp = 5,\n defaultValue = 0,\n disabled,\n fractions: fractionsProp = 1,\n highlightSelectedOnly = false,\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n onHover,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps({ ...props, notSupportReadOnly: true })\n const rootRef = useRef<HTMLDivElement>(null)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [hoveredValue, setHoveredValue] = useState(-1)\n const outsideRef = useRef(true)\n const fractions = Math.floor(fractionsProp)\n const count = Math.floor(countProp)\n const decimal = 1 / fractions\n const roundedValue = useMemo(\n () => getRoundedValue(value, decimal),\n [decimal, value],\n )\n const interactive = !(readOnly || disabled)\n const displayValue = hoveredValue !== -1 ? hoveredValue : roundedValue\n\n const getHoveredValue = useCallback(\n (x: number) => {\n if (!rootRef.current) return -1\n\n const { left, width } = rootRef.current.getBoundingClientRect()\n const itemWidth = width / count\n\n const hoveredValue = (x - left) / itemWidth\n\n const value = clampNumber(\n getRoundedValue(hoveredValue + decimal / 2, decimal),\n decimal,\n count,\n )\n\n return value\n },\n [count, decimal],\n )\n\n const onMouseEnter = useCallback(() => {\n if (interactive) outsideRef.current = false\n }, [interactive])\n\n const onMouseLeave = useCallback(() => {\n if (!interactive) return\n\n setHoveredValue(-1)\n outsideRef.current = true\n\n if (hoveredValue !== -1) onHover?.(-1)\n }, [hoveredValue, onHover, interactive, setHoveredValue])\n\n const onMouseMove = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled || readOnly) return\n\n const roundedValue = getHoveredValue(ev.clientX)\n\n setHoveredValue(roundedValue)\n\n if (roundedValue !== hoveredValue) onHover?.(roundedValue)\n },\n [disabled, getHoveredValue, hoveredValue, readOnly, onHover],\n )\n\n const onTouchStart = useCallback(\n (ev: TouchEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const el = ev.touches[0]\n\n if (!el) return\n\n const value = getHoveredValue(el.clientX)\n\n setValue(value)\n },\n [getHoveredValue, setValue],\n )\n\n const onTouchEnd = useCallback((ev: TouchEvent<HTMLDivElement>) => {\n ev.preventDefault()\n }, [])\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...eventProps,\n ...ariaProps,\n id,\n \"aria-label\": `${value} Stars`,\n \"aria-readonly\": ariaAttr(readOnly),\n role: \"radiogroup\",\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref, rootRef),\n onMouseEnter: handlerAll(\n props.onMouseEnter,\n rest.onMouseEnter,\n onMouseEnter,\n ),\n onMouseLeave: handlerAll(\n props.onMouseLeave,\n rest.onMouseLeave,\n onMouseLeave,\n ),\n onMouseMove: handlerAll(props.onMouseMove, rest.onMouseMove, onMouseMove),\n onTouchEnd: handlerAll(props.onTouchEnd, rest.onTouchEnd, onTouchEnd),\n onTouchStart: handlerAll(\n props.onTouchStart,\n rest.onTouchStart,\n onTouchStart,\n ),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n id,\n onMouseEnter,\n onMouseLeave,\n onMouseMove,\n onTouchEnd,\n onTouchStart,\n readOnly,\n rest,\n value,\n ],\n )\n\n return {\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n getRootProps,\n }\n}\n\nexport type UseRatingReturn = ReturnType<typeof useRating>\n\nexport interface UseRatingItemProps extends HTMLProps<\"label\"> {\n groupValue: number\n index: number\n}\n\nexport const useRatingItem = ({\n groupValue,\n index,\n ...rest\n}: UseRatingItemProps) => {\n const {\n id: rootId,\n name,\n decimal,\n disabled,\n displayValue,\n highlightSelectedOnly,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n ariaProps,\n dataProps,\n eventProps,\n } = useRatingContext()\n const fractionValue = decimal * (groupValue === 1 ? index : index + 1)\n const value = useMemo(\n () => getRoundedValue(groupValue - 1 + fractionValue, decimal),\n [decimal, fractionValue, groupValue],\n )\n const active = value === displayValue\n const checked = value === roundedValue\n const filled = highlightSelectedOnly\n ? value === displayValue\n : value <= displayValue\n const id = `${rootId}-${groupValue}-${value}`\n\n const onBlur = useCallback(() => {\n if (outsideRef.current) setHoveredValue(-1)\n }, [outsideRef, setHoveredValue])\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return\n\n const value = parseFloat(ev.target.value)\n\n setHoveredValue(value)\n },\n [interactive, setHoveredValue],\n )\n\n const onChange = useCallback(\n (value: number) => {\n if (!interactive) return\n\n setValue(value)\n },\n [interactive, setValue],\n )\n\n const onMouseDown = useCallback(() => {\n onChange(value)\n }, [onChange, value])\n\n const onTouchStart = useCallback(() => {\n onChange(value)\n }, [onChange, value])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n runKeyAction(ev, {\n Space: () => onChange(value),\n })\n },\n [onChange, value],\n )\n\n const getLabelProps: PropGetter<\"label\"> = useCallback(\n ({ style, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n htmlFor: id,\n \"data-active\": dataAttr(active),\n \"data-filled\": dataAttr(filled),\n ...rest,\n ...props,\n style: {\n ...style,\n zIndex: fractionValue !== 1 ? (active ? 1 : -1) : undefined,\n },\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n onTouchStart: handlerAll(props.onTouchStart, onTouchStart),\n }),\n [\n active,\n ariaProps,\n dataProps,\n filled,\n fractionValue,\n id,\n onMouseDown,\n onTouchStart,\n rest,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...eventProps,\n ...ariaProps,\n id,\n type: \"radio\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-label\": value.toString(),\n \"data-active\": dataAttr(active),\n \"data-checked\": dataAttr(checked),\n checked,\n disabled,\n readOnly,\n required,\n value,\n ...props,\n onBlur: handlerAll(onBlur, props.onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n value,\n active,\n checked,\n dataProps,\n eventProps,\n ariaProps,\n disabled,\n readOnly,\n required,\n onBlur,\n onInputChange,\n onKeyDown,\n ],\n )\n\n return {\n active,\n checked,\n filled,\n fractionValue,\n groupValue,\n value,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseRatingItemReturn = ReturnType<typeof useRatingItem>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-rating.cjs","names":["createContext","useFieldProps","useControllableState","roundedValue","props","mergeRefs","value","getLabelProps: PropGetter<\"label\">","visuallyHiddenAttributes"],"sources":["../../../../src/components/rating/use-rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent, MouseEvent, TouchEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n clampNumber,\n createContext,\n dataAttr,\n handlerAll,\n mergeRefs,\n runKeyAction,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst getRoundedValue = (value: number, to: number) => {\n const rounded = Math.round(value / to) * to\n const precision = `${to}`.split(\".\")[1]?.length || 0\n\n return Number(rounded.toFixed(precision))\n}\n\nexport interface RatingContext extends Omit<UseRatingReturn, \"getRootProps\"> {}\n\nconst [RatingContext, useRatingContext] = createContext<RatingContext>({\n name: \"RatingContext\",\n})\n\nexport { RatingContext, useRatingContext }\n\nexport interface UseRatingProps\n extends FieldProps, Omit<HTMLProps, \"color\" | \"defaultValue\" | \"onChange\"> {\n /**\n * Number of controls that should be rendered.\n *\n * @default 5\n */\n count?: number\n /**\n * The initial value of the rating.\n *\n * @default 0\n */\n defaultValue?: number\n /**\n * Number of fractions each item can be divided into,\n *\n * @default 1\n */\n fractions?: number\n /**\n * If `true`, only the selected icons will be filled.\n *\n * @default false\n */\n highlightSelectedOnly?: boolean\n /**\n * The top-level id string that will be applied to the rating.\n * The index of the rating item will be appended to this top-level id.\n */\n id?: string\n /**\n * The name of the input element.\n */\n name?: string\n /**\n * The value of the rating.\n */\n value?: number\n /**\n * The callback invoked when value state changes.\n */\n onChange?: (value: number) => void\n /**\n * The callback invoked when hovering over the rating.\n */\n onHover?: (value: number) => void\n}\n\nexport const useRating = (props: UseRatingProps = {}) => {\n const uuid = useId()\n const {\n props: {\n id = uuid,\n name = uuid,\n count: countProp = 5,\n defaultValue = 0,\n disabled,\n fractions: fractionsProp = 1,\n highlightSelectedOnly = false,\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n onHover,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps({ ...props, notSupportReadOnly: true })\n const rootRef = useRef<HTMLDivElement>(null)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [hoveredValue, setHoveredValue] = useState(-1)\n const outsideRef = useRef(true)\n const fractions = Math.floor(fractionsProp)\n const count = Math.floor(countProp)\n const decimal = 1 / fractions\n const roundedValue = useMemo(\n () => getRoundedValue(value, decimal),\n [decimal, value],\n )\n const interactive = !(readOnly || disabled)\n const displayValue = hoveredValue !== -1 ? hoveredValue : roundedValue\n\n const getHoveredValue = useCallback(\n (x: number) => {\n if (!rootRef.current) return -1\n\n const { left, width } = rootRef.current.getBoundingClientRect()\n const itemWidth = width / count\n\n const hoveredValue = (x - left) / itemWidth\n\n const value = clampNumber(\n getRoundedValue(hoveredValue + decimal / 2, decimal),\n decimal,\n count,\n )\n\n return value\n },\n [count, decimal],\n )\n\n const onMouseEnter = useCallback(() => {\n if (interactive) outsideRef.current = false\n }, [interactive])\n\n const onMouseLeave = useCallback(() => {\n if (!interactive) return\n\n setHoveredValue(-1)\n outsideRef.current = true\n\n if (hoveredValue !== -1) onHover?.(-1)\n }, [hoveredValue, onHover, interactive, setHoveredValue])\n\n const onMouseMove = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled || readOnly) return\n\n const roundedValue = getHoveredValue(ev.clientX)\n\n setHoveredValue(roundedValue)\n\n if (roundedValue !== hoveredValue) onHover?.(roundedValue)\n },\n [disabled, getHoveredValue, hoveredValue, readOnly, onHover],\n )\n\n const onTouchStart = useCallback(\n (ev: TouchEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const el = ev.touches[0]\n\n if (!el) return\n\n const value = getHoveredValue(el.clientX)\n\n setValue(value)\n },\n [getHoveredValue, setValue],\n )\n\n const onTouchEnd = useCallback((ev: TouchEvent<HTMLDivElement>) => {\n ev.preventDefault()\n }, [])\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...eventProps,\n ...ariaProps,\n id,\n \"aria-label\": `${value} Stars`,\n \"aria-readonly\": ariaAttr(readOnly),\n role: \"radiogroup\",\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref, rootRef),\n onMouseEnter: handlerAll(\n props.onMouseEnter,\n rest.onMouseEnter,\n onMouseEnter,\n ),\n onMouseLeave: handlerAll(\n props.onMouseLeave,\n rest.onMouseLeave,\n onMouseLeave,\n ),\n onMouseMove: handlerAll(props.onMouseMove, rest.onMouseMove, onMouseMove),\n onTouchEnd: handlerAll(props.onTouchEnd, rest.onTouchEnd, onTouchEnd),\n onTouchStart: handlerAll(\n props.onTouchStart,\n rest.onTouchStart,\n onTouchStart,\n ),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n id,\n onMouseEnter,\n onMouseLeave,\n onMouseMove,\n onTouchEnd,\n onTouchStart,\n readOnly,\n rest,\n value,\n ],\n )\n\n return {\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n getRootProps,\n }\n}\n\nexport type UseRatingReturn = ReturnType<typeof useRating>\n\nexport interface UseRatingItemProps extends HTMLProps<\"label\"> {\n groupValue: number\n index: number\n}\n\nexport const useRatingItem = ({\n groupValue,\n index,\n ...rest\n}: UseRatingItemProps) => {\n const {\n id: rootId,\n name,\n decimal,\n disabled,\n displayValue,\n highlightSelectedOnly,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n ariaProps,\n dataProps,\n eventProps,\n } = useRatingContext()\n const fractionValue = decimal * (groupValue === 1 ? index : index + 1)\n const value = useMemo(\n () => getRoundedValue(groupValue - 1 + fractionValue, decimal),\n [decimal, fractionValue, groupValue],\n )\n const active = value === displayValue\n const checked = value === roundedValue\n const filled = highlightSelectedOnly\n ? value === displayValue\n : value <= displayValue\n const id = `${rootId}-${groupValue}-${value}`\n\n const onBlur = useCallback(() => {\n if (outsideRef.current) setHoveredValue(-1)\n }, [outsideRef, setHoveredValue])\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return\n\n const value = parseFloat(ev.target.value)\n\n setHoveredValue(value)\n },\n [interactive, setHoveredValue],\n )\n\n const onChange = useCallback(\n (value: number) => {\n if (!interactive) return\n\n setValue(value)\n },\n [interactive, setValue],\n )\n\n const onMouseDown = useCallback(() => {\n onChange(value)\n }, [onChange, value])\n\n const onTouchStart = useCallback(() => {\n onChange(value)\n }, [onChange, value])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n runKeyAction(ev, {\n Space: () => onChange(value),\n })\n },\n [onChange, value],\n )\n\n const getLabelProps: PropGetter<\"label\"> = useCallback(\n ({ style, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n htmlFor: id,\n \"data-active\": dataAttr(active),\n \"data-filled\": dataAttr(filled),\n ...rest,\n ...props,\n style: {\n ...style,\n zIndex: fractionValue !== 1 ? (active ? 1 : -1) : undefined,\n },\n onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n onTouchStart: handlerAll(props.onTouchStart, onTouchStart),\n }),\n [\n active,\n ariaProps,\n dataProps,\n filled,\n fractionValue,\n id,\n onMouseDown,\n onTouchStart,\n rest,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...eventProps,\n ...ariaProps,\n id,\n type: \"radio\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-label\": value.toString(),\n \"data-active\": dataAttr(active),\n \"data-checked\": dataAttr(checked),\n checked,\n disabled,\n readOnly,\n required,\n value,\n ...props,\n onBlur: handlerAll(onBlur, props.onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n value,\n active,\n checked,\n dataProps,\n eventProps,\n ariaProps,\n disabled,\n readOnly,\n required,\n onBlur,\n onInputChange,\n onKeyDown,\n ],\n )\n\n return {\n active,\n checked,\n filled,\n fractionValue,\n groupValue,\n value,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseRatingItemReturn = ReturnType<typeof useRatingItem>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resizable.cjs","names":["createContext","getRootProps: PropGetter","getGroupProps: PropGetter<\n ResizableGroupProps,\n undefined,\n PanelGroupProps\n >","mergeRefs","ref","getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps>","getTriggerProps: PropGetter<\n ResizableTriggerProps,\n undefined,\n PanelResizeHandleProps\n >","getIconProps: PropGetter"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, MouseEventHandler, RefObject } from \"react\"\nimport type {\n ImperativePanelGroupHandle,\n ImperativePanelHandle,\n PanelGroupOnLayout,\n PanelGroupProps,\n PanelGroupStorage,\n PanelProps,\n PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport type {\n HTMLProps,\n HTMLRefAttributes,\n Orientation,\n PropGetter,\n} from \"../../core\"\nimport { useCallback, useId, useLayoutEffect, useRef, useState } from \"react\"\nimport {\n getPanelElement,\n getPanelGroupElement,\n getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n fnAll,\n handlerAll,\n mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<\n UseResizableReturn,\n \"getGroupProps\" | \"getRootProps\"\n> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n {\n name: \"ResizableContext\",\n },\n)\n\nexport { ResizableContext, useResizableContext }\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableGroupProps extends Omit<\n Partial<PanelGroupProps>,\n \"tagName\"\n> {\n /**\n * Ref of the resizable group callback.\n */\n ref?: RefObject<ResizableGroupControl>\n /**\n * The HTML element to render.\n */\n as?: keyof HTMLElementTagNameMap\n}\ninterface ResizableItemProps extends Omit<PanelProps, \"tagName\"> {\n /**\n * Ref of the resizable item callback.\n */\n ref?: RefObject<ResizableItemControl>\n /**\n * The HTML element to render.\n */\n as?: keyof HTMLElementTagNameMap\n}\ninterface ResizableTriggerProps\n extends Omit<PanelResizeHandleProps, \"tagName\">, HTMLRefAttributes {\n /**\n * The HTML element to render.\n */\n as?: keyof HTMLElementTagNameMap\n}\n\nexport interface UseResizableProps extends HTMLProps {\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<null | ResizableGroupControl>\n /**\n * If `true`, the resizable trigger will be disabled.\n */\n disabled?: boolean\n /**\n * Unit to resize by keyboard operation.\n *\n * @default 10\n */\n keyboardStep?: number\n /**\n * The orientation of the resizable.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * A callback that gets and sets a value in custom storage.\n */\n storage?: PanelGroupStorage\n /**\n * Key of value saved in storage.\n * By default, it is saved to `local storage`.\n */\n storageKey?: string\n /**\n * Props for resizable component.\n */\n groupProps?: ResizableGroupProps\n /**\n * The callback invoked when resizable items are resized.\n */\n onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n id,\n ref,\n controlRef: controlRefProp,\n disabled,\n keyboardStep,\n orientation = \"horizontal\",\n storage,\n storageKey,\n groupProps = {},\n onLayout,\n ...rest\n}: UseResizableProps = {}) => {\n const controlRef = useRef<ResizableGroupControl>(null)\n const uuid = useId()\n\n id ??= uuid\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => ({ ...rest, ...props }),\n [rest],\n )\n\n const getGroupProps: PropGetter<\n ResizableGroupProps,\n undefined,\n PanelGroupProps\n > = useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n autoSaveId: storageKey,\n direction: orientation,\n keyboardResizeBy: keyboardStep,\n storage,\n ...groupProps,\n ...props,\n ref: mergeRefs(ref, controlRefProp, controlRef),\n tagName: props.as ?? groupProps.as,\n onLayout: fnAll(props.onLayout, groupProps.onLayout, onLayout),\n }),\n [\n id,\n orientation,\n groupProps,\n controlRefProp,\n storageKey,\n keyboardStep,\n onLayout,\n storage,\n ],\n )\n\n useLayoutEffect(() => {\n const el = getPanelGroupElement(id) as HTMLDivElement | null\n\n assignRef(ref, el)\n }, [ref, id])\n\n return {\n controlRef,\n disabled,\n orientation,\n getGroupProps,\n getRootProps,\n }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n extends HTMLProps, Pick<ResizableItemProps, \"as\"> {\n /**\n * The collapsed size of the resizable item.\n */\n collapsedSize?: number\n /**\n * If `true`, the resizable item can be collapsed.\n *\n * @default false\n */\n collapsible?: boolean\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<null | ResizableItemControl>\n /**\n * The initial size of the resizable item.\n */\n defaultSize?: number\n /**\n * The maximum allowed value of the resizable item.\n */\n maxSize?: number\n /**\n * The minimum allowed value of the resizable item.\n */\n minSize?: number\n /**\n * Order for the resizable item.\n */\n order?: number\n /**\n * The callback invoked when resizable item are collapsed.\n */\n onCollapse?: () => void\n /**\n * The callback invoked when resizable item are expanded.\n */\n onExpand?: () => void\n /**\n * The callback invoked when resizable item are resized.\n */\n onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport const useResizableItem = ({\n id,\n ref,\n as,\n controlRef,\n onCollapse,\n onExpand,\n onResize,\n ...rest\n}: UseResizableItemProps) => {\n const uuid = useId()\n\n id ??= uuid\n\n const getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps> =\n useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n ref: mergeRefs(ref, controlRef),\n tagName: props.as ?? as,\n ...props,\n ...rest,\n onCollapse: fnAll(props.onCollapse, onCollapse),\n onExpand: fnAll(props.onExpand, onExpand),\n onResize: fnAll(props.onResize, onResize),\n }),\n [as, controlRef, id, onCollapse, onExpand, onResize, rest],\n )\n\n useLayoutEffect(() => {\n const el = getPanelElement(id) as HTMLDivElement | null\n\n assignRef(ref, el)\n }, [ref, id])\n\n return {\n getItemProps,\n }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n extends HTMLProps, Pick<ResizableTriggerProps, \"as\"> {\n /**\n * If `true`, the resizable trigger will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The callback invoked when resizable trigger are dragged.\n */\n onDragging?: (dragging: boolean) => void\n}\n\nexport const useResizableTrigger = ({\n id,\n ref,\n as,\n disabled,\n onDragging,\n ...rest\n}: UseResizableTriggerProps) => {\n const uuid = useId()\n const {\n controlRef,\n disabled: groupDisabled,\n orientation,\n } = useResizableContext()\n const [active, setActive] = useState<boolean>(false)\n const trulyDisabled = disabled || groupDisabled\n\n id ??= uuid\n\n const onDoubleClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const layout = controlRef.current?.getLayout()\n\n if (!layout) return\n\n const count = layout.length\n const size = 100 / count\n const nextLayout = layout.map(() => size)\n\n controlRef.current?.setLayout(nextLayout)\n },\n [controlRef],\n )\n\n const getTriggerProps: PropGetter<\n ResizableTriggerProps,\n undefined,\n PanelResizeHandleProps\n > = useCallback(\n (props = {}) =>\n ({\n id,\n \"aria-orientation\": orientation,\n \"data-active\": dataAttr(active),\n \"data-disabled\": dataAttr(trulyDisabled),\n disabled: trulyDisabled,\n tabIndex: trulyDisabled ? -1 : 0,\n tagName: props.as ?? as,\n ...rest,\n ...props,\n onDoubleClick: handlerAll(\n props.onDoubleClick as MouseEventHandler<HTMLDivElement> | undefined,\n rest.onDoubleClick,\n onDoubleClick,\n ),\n onDragging: fnAll(props.onDragging, onDragging, setActive),\n }) as unknown as PanelResizeHandleProps,\n [\n id,\n as,\n orientation,\n trulyDisabled,\n rest,\n onDoubleClick,\n onDragging,\n active,\n ],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-active\": dataAttr(active),\n \"data-icon\": \"\",\n ...props,\n }),\n [active],\n )\n\n useLayoutEffect(() => {\n const el = getResizeHandleElement(id) as HTMLDivElement | null\n\n assignRef(ref, el)\n }, [ref, id])\n\n return {\n getIconProps,\n getTriggerProps,\n }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-resizable.cjs","names":["createContext","getRootProps: PropGetter","getGroupProps: PropGetter<\n ResizableGroupProps,\n undefined,\n PanelGroupProps\n >","mergeRefs","ref","getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps>","getTriggerProps: PropGetter<\n ResizableTriggerProps,\n undefined,\n PanelResizeHandleProps\n >","getIconProps: PropGetter"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, MouseEventHandler, RefObject } from \"react\"\nimport type {\n ImperativePanelGroupHandle,\n ImperativePanelHandle,\n PanelGroupOnLayout,\n PanelGroupProps,\n PanelGroupStorage,\n PanelProps,\n PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport type {\n HTMLProps,\n HTMLRefAttributes,\n Orientation,\n PropGetter,\n} from \"../../core\"\nimport { useCallback, useId, useLayoutEffect, useRef, useState } from \"react\"\nimport {\n getPanelElement,\n getPanelGroupElement,\n getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n fnAll,\n handlerAll,\n mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<\n UseResizableReturn,\n \"getGroupProps\" | \"getRootProps\"\n> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n {\n name: \"ResizableContext\",\n },\n)\n\nexport { ResizableContext, useResizableContext }\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableGroupProps extends Omit<\n Partial<PanelGroupProps>,\n \"tagName\"\n> {\n /**\n * The HTML element to render.\n */\n as?: keyof HTMLElementTagNameMap\n /**\n * Ref of the resizable group callback.\n */\n ref?: RefObject<ResizableGroupControl>\n}\ninterface ResizableItemProps extends Omit<PanelProps, \"tagName\"> {\n /**\n * The HTML element to render.\n */\n as?: keyof HTMLElementTagNameMap\n /**\n * Ref of the resizable item callback.\n */\n ref?: RefObject<ResizableItemControl>\n}\ninterface ResizableTriggerProps\n extends Omit<PanelResizeHandleProps, \"tagName\">, HTMLRefAttributes {\n /**\n * The HTML element to render.\n */\n as?: keyof HTMLElementTagNameMap\n}\n\nexport interface UseResizableProps extends HTMLProps {\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<null | ResizableGroupControl>\n /**\n * If `true`, the resizable trigger will be disabled.\n */\n disabled?: boolean\n /**\n * Unit to resize by keyboard operation.\n *\n * @default 10\n */\n keyboardStep?: number\n /**\n * The orientation of the resizable.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * A callback that gets and sets a value in custom storage.\n */\n storage?: PanelGroupStorage\n /**\n * Key of value saved in storage.\n * By default, it is saved to `local storage`.\n */\n storageKey?: string\n /**\n * Props for resizable component.\n */\n groupProps?: ResizableGroupProps\n /**\n * The callback invoked when resizable items are resized.\n */\n onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n id,\n ref,\n controlRef: controlRefProp,\n disabled,\n keyboardStep,\n orientation = \"horizontal\",\n storage,\n storageKey,\n groupProps = {},\n onLayout,\n ...rest\n}: UseResizableProps = {}) => {\n const controlRef = useRef<ResizableGroupControl>(null)\n const uuid = useId()\n\n id ??= uuid\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => ({ ...rest, ...props }),\n [rest],\n )\n\n const getGroupProps: PropGetter<\n ResizableGroupProps,\n undefined,\n PanelGroupProps\n > = useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n autoSaveId: storageKey,\n direction: orientation,\n keyboardResizeBy: keyboardStep,\n storage,\n ...groupProps,\n ...props,\n ref: mergeRefs(ref, controlRefProp, controlRef),\n tagName: props.as ?? groupProps.as,\n onLayout: fnAll(props.onLayout, groupProps.onLayout, onLayout),\n }),\n [\n id,\n orientation,\n groupProps,\n controlRefProp,\n storageKey,\n keyboardStep,\n onLayout,\n storage,\n ],\n )\n\n useLayoutEffect(() => {\n const el = getPanelGroupElement(id) as HTMLDivElement | null\n\n assignRef(ref, el)\n }, [ref, id])\n\n return {\n controlRef,\n disabled,\n orientation,\n getGroupProps,\n getRootProps,\n }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n extends HTMLProps, Pick<ResizableItemProps, \"as\"> {\n /**\n * The collapsed size of the resizable item.\n */\n collapsedSize?: number\n /**\n * If `true`, the resizable item can be collapsed.\n *\n * @default false\n */\n collapsible?: boolean\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<null | ResizableItemControl>\n /**\n * The initial size of the resizable item.\n */\n defaultSize?: number\n /**\n * The maximum allowed value of the resizable item.\n */\n maxSize?: number\n /**\n * The minimum allowed value of the resizable item.\n */\n minSize?: number\n /**\n * Order for the resizable item.\n */\n order?: number\n /**\n * The callback invoked when resizable item are collapsed.\n */\n onCollapse?: () => void\n /**\n * The callback invoked when resizable item are expanded.\n */\n onExpand?: () => void\n /**\n * The callback invoked when resizable item are resized.\n */\n onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport const useResizableItem = ({\n id,\n ref,\n as,\n controlRef,\n onCollapse,\n onExpand,\n onResize,\n ...rest\n}: UseResizableItemProps) => {\n const uuid = useId()\n\n id ??= uuid\n\n const getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps> =\n useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n ref: mergeRefs(ref, controlRef),\n tagName: props.as ?? as,\n ...props,\n ...rest,\n onCollapse: fnAll(props.onCollapse, onCollapse),\n onExpand: fnAll(props.onExpand, onExpand),\n onResize: fnAll(props.onResize, onResize),\n }),\n [as, controlRef, id, onCollapse, onExpand, onResize, rest],\n )\n\n useLayoutEffect(() => {\n const el = getPanelElement(id) as HTMLDivElement | null\n\n assignRef(ref, el)\n }, [ref, id])\n\n return {\n getItemProps,\n }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n extends HTMLProps, Pick<ResizableTriggerProps, \"as\"> {\n /**\n * If `true`, the resizable trigger will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The callback invoked when resizable trigger are dragged.\n */\n onDragging?: (dragging: boolean) => void\n}\n\nexport const useResizableTrigger = ({\n id,\n ref,\n as,\n disabled,\n onDragging,\n ...rest\n}: UseResizableTriggerProps) => {\n const uuid = useId()\n const {\n controlRef,\n disabled: groupDisabled,\n orientation,\n } = useResizableContext()\n const [active, setActive] = useState<boolean>(false)\n const trulyDisabled = disabled || groupDisabled\n\n id ??= uuid\n\n const onDoubleClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const layout = controlRef.current?.getLayout()\n\n if (!layout) return\n\n const count = layout.length\n const size = 100 / count\n const nextLayout = layout.map(() => size)\n\n controlRef.current?.setLayout(nextLayout)\n },\n [controlRef],\n )\n\n const getTriggerProps: PropGetter<\n ResizableTriggerProps,\n undefined,\n PanelResizeHandleProps\n > = useCallback(\n (props = {}) =>\n ({\n id,\n \"aria-orientation\": orientation,\n \"data-active\": dataAttr(active),\n \"data-disabled\": dataAttr(trulyDisabled),\n disabled: trulyDisabled,\n tabIndex: trulyDisabled ? -1 : 0,\n tagName: props.as ?? as,\n ...rest,\n ...props,\n onDoubleClick: handlerAll(\n props.onDoubleClick as MouseEventHandler<HTMLDivElement> | undefined,\n rest.onDoubleClick,\n onDoubleClick,\n ),\n onDragging: fnAll(props.onDragging, onDragging, setActive),\n }) as unknown as PanelResizeHandleProps,\n [\n id,\n as,\n orientation,\n trulyDisabled,\n rest,\n onDoubleClick,\n onDragging,\n active,\n ],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-active\": dataAttr(active),\n \"data-icon\": \"\",\n ...props,\n }),\n [active],\n )\n\n useLayoutEffect(() => {\n const el = getResizeHandleElement(id) as HTMLDivElement | null\n\n assignRef(ref, el)\n }, [ref, id])\n\n return {\n getIconProps,\n getTriggerProps,\n }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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"}
|