@yamada-ui/react 2.2.1-dev-20260428150301 → 2.2.1-dev-20260428151511
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/carousel/use-carousel.cjs +9 -8
- package/dist/cjs/components/carousel/use-carousel.cjs.map +1 -1
- package/dist/esm/components/carousel/use-carousel.js +9 -8
- package/dist/esm/components/carousel/use-carousel.js.map +1 -1
- package/dist/types/components/accordion/accordion.d.ts +2 -2
- package/dist/types/components/accordion/use-accordion.d.ts +11 -11
- package/dist/types/components/action-bar/action-bar.d.ts +2 -2
- package/dist/types/components/airy/airy.d.ts +2 -2
- package/dist/types/components/alert/alert.d.ts +2 -2
- package/dist/types/components/alert/alert.style.d.ts +1 -1
- 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 +5 -5
- package/dist/types/components/avatar/avatar.d.ts +5 -5
- package/dist/types/components/avatar/avatar.style.d.ts +1 -1
- package/dist/types/components/avatar/use-avatar-group.d.ts +2 -2
- 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 +2 -2
- 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 +8 -8
- 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/carousel.style.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/chart/area-chart.d.ts +2 -2
- package/dist/types/components/chart/bar-chart.d.ts +2 -2
- package/dist/types/components/chart/chart.d.ts +5 -5
- package/dist/types/components/chart/composed-chart.d.ts +2 -2
- package/dist/types/components/chart/donut-chart.d.ts +2 -2
- package/dist/types/components/chart/line-chart.d.ts +2 -2
- package/dist/types/components/chart/pie-chart.d.ts +2 -2
- package/dist/types/components/chart/radar-chart.d.ts +2 -2
- package/dist/types/components/chart/radial-chart.d.ts +2 -2
- package/dist/types/components/chart/use-chart.d.ts +2 -2
- package/dist/types/components/checkbox/checkbox.d.ts +5 -5
- package/dist/types/components/checkbox/checkbox.style.d.ts +1 -1
- package/dist/types/components/checkbox/use-checkbox-group.d.ts +2 -2
- package/dist/types/components/checkbox-card/checkbox-card.d.ts +5 -5
- package/dist/types/components/checkbox-card/checkbox-card.style.d.ts +1 -1
- 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 +2 -2
- package/dist/types/components/color-selector/color-selector.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/data-list/data-list.style.d.ts +1 -1
- package/dist/types/components/date-picker/date-picker.d.ts +2 -2
- package/dist/types/components/date-picker/use-date-picker.d.ts +4 -4
- package/dist/types/components/drawer/drawer.d.ts +2 -2
- package/dist/types/components/dropzone/dropzone.d.ts +5 -5
- package/dist/types/components/dropzone/dropzone.style.d.ts +1 -1
- 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/empty-state/empty-state.style.d.ts +2 -2
- package/dist/types/components/fade/fade.d.ts +2 -2
- package/dist/types/components/field/field.d.ts +3 -3
- 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 +2 -2
- 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 +4 -4
- package/dist/types/components/float/float.d.ts +2 -2
- package/dist/types/components/form/form.d.ts +3 -3
- package/dist/types/components/form/form.style.d.ts +1 -1
- 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/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/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 +2 -2
- 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/menu.style.d.ts +2 -2
- package/dist/types/components/menu/use-menu.d.ts +11 -11
- package/dist/types/components/modal/modal.d.ts +2 -2
- package/dist/types/components/native-accordion/native-accordion.d.ts +2 -2
- package/dist/types/components/native-accordion/use-native-accordion.d.ts +2 -2
- package/dist/types/components/native-popover/native-popover.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/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 +2 -2
- 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/strength-meter.style.d.ts +1 -1
- package/dist/types/components/password-input/use-password-input.d.ts +2 -2
- package/dist/types/components/pin-input/pin-input.d.ts +2 -2
- package/dist/types/components/pin-input/use-pin-input.d.ts +7 -7
- 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/qr-code/qr-code.d.ts +2 -2
- package/dist/types/components/radio/radio.d.ts +5 -5
- package/dist/types/components/radio/radio.style.d.ts +1 -1
- package/dist/types/components/radio/use-radio-group.d.ts +2 -2
- package/dist/types/components/radio-card/radio-card.d.ts +5 -5
- package/dist/types/components/radio-card/radio-card.style.d.ts +1 -1
- package/dist/types/components/rating/use-rating.d.ts +7 -7
- 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 +2 -2
- package/dist/types/components/ripple/ripple.d.ts +2 -2
- package/dist/types/components/ripple/use-ripple.d.ts +2 -2
- package/dist/types/components/rotate/rotate.d.ts +2 -2
- package/dist/types/components/saturation-slider/saturation-slider.d.ts +2 -2
- package/dist/types/components/saturation-slider/use-saturation-slider.d.ts +2 -2
- package/dist/types/components/scroll-area/scroll-area.d.ts +2 -2
- package/dist/types/components/segmented-control/segmented-control.d.ts +2 -2
- package/dist/types/components/segmented-control/segmented-control.style.d.ts +2 -2
- package/dist/types/components/segmented-control/use-segmented-control.d.ts +9 -9
- package/dist/types/components/select/select.d.ts +2 -2
- package/dist/types/components/select/select.style.d.ts +1 -1
- package/dist/types/components/select/use-select.d.ts +4 -4
- package/dist/types/components/separator/separator.d.ts +2 -2
- package/dist/types/components/sidebar/sidebar.d.ts +2 -2
- package/dist/types/components/sidebar/use-sidebar.d.ts +9 -9
- 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 +2 -2
- package/dist/types/components/slider/use-slider.d.ts +2 -2
- 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/stat/stat.style.d.ts +2 -2
- package/dist/types/components/status/status.d.ts +2 -2
- package/dist/types/components/status/status.style.d.ts +2 -2
- package/dist/types/components/steps/steps.d.ts +2 -2
- package/dist/types/components/steps/steps.style.d.ts +1 -1
- 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/table/table.d.ts +2 -2
- 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/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 +1 -1
- package/dist/types/components/toggle/toggle.d.ts +5 -5
- package/dist/types/components/toggle/use-toggle-group.d.ts +2 -2
- 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/tree/tree.d.ts +2 -2
- package/dist/types/components/tree/tree.style.d.ts +1 -1
- package/dist/types/components/tree/use-tree.d.ts +182 -182
- 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/system/color-mode-provider.d.ts +2 -2
- package/dist/types/core/system/storage-script.d.ts +3 -3
- package/dist/types/core/system/styled.d.ts +2 -2
- package/dist/types/core/system/system-provider.d.ts +2 -2
- package/dist/types/hooks/use-breakpoint/use-breakpoint-state.d.ts +2 -2
- package/dist/types/hooks/use-counter/index.d.ts +2 -2
- package/dist/types/hooks/use-descendants/index.d.ts +2 -2
- package/dist/types/providers/i18n-provider/i18n-provider.d.ts +3 -3
- package/dist/types/providers/ui-provider/ui-provider.d.ts +2 -2
- package/dist/types/utils/children.d.ts +2 -2
- package/package.json +2 -2
|
@@ -6,6 +6,8 @@ const require_dom = require('../../utils/dom.cjs');
|
|
|
6
6
|
const require_effect = require('../../utils/effect.cjs');
|
|
7
7
|
const require_ref = require('../../utils/ref.cjs');
|
|
8
8
|
const require_utils_index = require('../../utils/index.cjs');
|
|
9
|
+
const require_props = require('../../core/components/props.cjs');
|
|
10
|
+
require('../../core/index.cjs');
|
|
9
11
|
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
|
|
10
12
|
const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
|
|
11
13
|
require('../../providers/i18n-provider/index.cjs');
|
|
@@ -171,16 +173,15 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
|
|
|
171
173
|
skipSnaps,
|
|
172
174
|
slidesToScroll
|
|
173
175
|
]);
|
|
174
|
-
const getRootProps = (0, react.useCallback)(({ ref, ...props } = {}) => ({
|
|
176
|
+
const getRootProps = (0, react.useCallback)(({ ref, ...props } = {}) => require_props.mergeProps({
|
|
175
177
|
id,
|
|
176
178
|
"aria-roledescription": "carousel",
|
|
177
|
-
"data-orientation": orientation
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
}), [
|
|
179
|
+
"data-orientation": orientation
|
|
180
|
+
}, rest, {
|
|
181
|
+
ref,
|
|
182
|
+
onMouseEnter,
|
|
183
|
+
onMouseLeave
|
|
184
|
+
}, props)(), [
|
|
184
185
|
id,
|
|
185
186
|
onMouseEnter,
|
|
186
187
|
onMouseLeave,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-carousel.cjs","names":["createContext","useI18n","useControllableState","useIds","useBoolean","snapCount","total","index","getRootProps: PropGetter<\"section\">","mergeRefs","getListProps: PropGetter","getItemProps: RequiredPropGetter<\"div\", { index: number }>","indexProp","getPrevTriggerProps: PropGetter<\"button\">","getNextTriggerProps: PropGetter<\"button\">","getIndicatorsProps: PropGetter"],"sources":["../../../../src/components/carousel/use-carousel.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n EmblaCarouselType,\n EmblaOptionsType,\n EmblaPluginType,\n} from \"embla-carousel\"\nimport type { KeyboardEvent, RefObject } from \"react\"\nimport type {\n HTMLProps,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useBoolean } from \"../../hooks/use-boolean\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n isFunction,\n mergeRefs,\n runKeyAction,\n useIds,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype EmblaOptions = Required<EmblaOptionsType>\nexport type CarouselAlign = EmblaOptions[\"align\"]\nexport type CarouselContainScroll = EmblaOptions[\"containScroll\"]\nexport type CarouselInViewThreshold = EmblaOptions[\"inViewThreshold\"]\nexport type CarouselWatchDrag = EmblaOptions[\"watchDrag\"]\nexport type CarouselWatchResize = EmblaOptions[\"watchResize\"]\nexport type CarouselWatchSlides = EmblaOptions[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\nexport type CarouselPlugin = EmblaPluginType\n\nexport interface CarouselContext extends Omit<\n UseCarouselReturn,\n \"getRootProps\"\n> {}\n\nconst [CarouselContext, useCarouselContext] = createContext<CarouselContext>({\n name: \"CarouselContext\",\n})\n\nexport { CarouselContext, useCarouselContext }\n\nexport interface UseCarouselProps extends Omit<\n HTMLProps<\"section\">,\n \"onChange\"\n> {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: CarouselAlign\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: CarouselContainScroll\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | null>\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: CarouselInViewThreshold\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * Embla plugins to use.\n */\n plugins?: CarouselPlugin[]\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: CarouselWatchDrag\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: CarouselWatchResize\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: CarouselWatchSlides\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n id,\n align = \"center\",\n autoplay = false,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n index: indexProp,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n plugins = [],\n skipSnaps = false,\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize: watchResizeProp = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps = {}) => {\n const { t } = useI18n(\"carousel\")\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const [rootId, listId] = useIds()\n const [hover, { off: onMouseLeave, on: onMouseEnter }] = useBoolean()\n const timeoutId = useRef<NodeJS.Timeout | null>(null)\n const indicatorMapRef = useRef<Map<number, HTMLButtonElement | null>>(\n new Map(),\n )\n const listRef = useRef<HTMLDivElement>(null)\n const horizontal = orientation === \"horizontal\"\n const axis = horizontal ? \"x\" : \"y\"\n const [snapCount, setSnapCount] = useState(0)\n const [total, setTotal] = useState(0)\n const watchResize = useCallback<Extract<CarouselWatchResize, Function>>(\n (methods, entries) => {\n const result = isFunction(watchResizeProp)\n ? watchResizeProp(methods, entries)\n : true\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n\n return result\n },\n [watchResizeProp],\n )\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis,\n container: listRef.current,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n plugins,\n )\n\n id ??= rootId\n\n const onInit = useCallback((methods: CarouselControl) => {\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n }, [])\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setIndex(index)\n }, [carousel, setIndex])\n\n const onFocusIndicator = useCallback(\n (index: number) => {\n const el = indicatorMapRef.current.get(index)\n\n el?.focus()\n carousel?.scrollTo(index)\n },\n [carousel],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLButtonElement>) => {\n const lastIndex = snapCount - 1\n\n runKeyAction(ev, {\n ArrowDown: () => {\n if (horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowLeft: () => {\n if (!horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n ArrowRight: () => {\n if (!horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowUp: () => {\n if (horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n End: () => {\n onFocusIndicator(lastIndex)\n },\n Home: () => {\n onFocusIndicator(0)\n },\n })\n },\n [snapCount, horizontal, onFocusIndicator],\n )\n\n assignRef(controlRef, carousel)\n\n useEffect(() => {\n if (carousel) {\n carousel.on(\"reInit\", onInit)\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"reInit\", onInit)\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onInit, onScroll, onSelect])\n\n useEffect(() => {\n const stop = hover && stopMouseEnterAutoplay\n const last = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !stop && !last) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = null\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [autoplay, carousel, delay, hover, stopMouseEnterAutoplay])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (indexProp === undefined) return\n\n carousel.scrollTo(indexProp)\n }, [indexProp])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n }, [\n carousel,\n total,\n align,\n axis,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n ])\n\n const getRootProps: PropGetter<\"section\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n \"aria-roledescription\": \"carousel\",\n \"data-orientation\": orientation,\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref),\n onMouseEnter: handlerAll(props.onMouseEnter, onMouseEnter),\n onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n }),\n [id, onMouseEnter, onMouseLeave, rest, orientation],\n )\n\n const getListProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: listId,\n \"aria-live\": autoplay ? \"off\" : \"polite\",\n \"data-orientation\": orientation,\n ...props,\n ref: mergeRefs(ref, listRef, carouselRef),\n }),\n [autoplay, listId, orientation, carouselRef],\n )\n\n const getItemProps: RequiredPropGetter<\"div\", { index: number }> =\n useCallback(\n ({ index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n id: `${listId}-${indexProp}`,\n \"aria-label\": t(\"{page} of {total}\", { page, total }),\n \"aria-roledescription\": \"slide\",\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tabpanel\",\n ...props,\n }\n },\n [index, listId, total, orientation, t],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to previous slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollPrev(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollPrev()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to next slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollNext(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollNext()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getIndicatorsProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-label\": t(\"Slides\"),\n \"aria-orientation\": orientation,\n role: \"tablist\",\n ...props,\n }),\n [orientation, t],\n )\n\n const getIndicatorProps: RequiredPropGetter<\"button\", { index: number }> =\n useCallback(\n ({ ref, index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n type: \"button\" as const,\n \"aria-controls\": `${listId}-${indexProp}`,\n \"aria-label\": t(\"Go to {page} slide\", { page }),\n \"aria-selected\": selected,\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tab\",\n tabIndex: selected ? 0 : -1,\n ...props,\n ref: mergeRefs(ref, (node) => {\n indicatorMapRef.current.set(indexProp, node)\n }),\n onClick: handlerAll(props.onClick, () =>\n carousel?.scrollTo(indexProp),\n ),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(indexProp)),\n }\n },\n [index, listId, t, orientation, onKeyDown, carousel],\n )\n\n return {\n carousel,\n index,\n setIndex,\n snapCount,\n total,\n getIndicatorProps,\n getIndicatorsProps,\n getItemProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-carousel.cjs","names":["createContext","useI18n","useControllableState","useIds","useBoolean","snapCount","total","index","getRootProps: PropGetter<\"section\">","mergeProps","getListProps: PropGetter","mergeRefs","getItemProps: RequiredPropGetter<\"div\", { index: number }>","indexProp","getPrevTriggerProps: PropGetter<\"button\">","getNextTriggerProps: PropGetter<\"button\">","getIndicatorsProps: PropGetter"],"sources":["../../../../src/components/carousel/use-carousel.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n EmblaCarouselType,\n EmblaOptionsType,\n EmblaPluginType,\n} from \"embla-carousel\"\nimport type { KeyboardEvent, RefObject } from \"react\"\nimport type {\n HTMLProps,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useBoolean } from \"../../hooks/use-boolean\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n isFunction,\n mergeRefs,\n runKeyAction,\n useIds,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype EmblaOptions = Required<EmblaOptionsType>\nexport type CarouselAlign = EmblaOptions[\"align\"]\nexport type CarouselContainScroll = EmblaOptions[\"containScroll\"]\nexport type CarouselInViewThreshold = EmblaOptions[\"inViewThreshold\"]\nexport type CarouselWatchDrag = EmblaOptions[\"watchDrag\"]\nexport type CarouselWatchResize = EmblaOptions[\"watchResize\"]\nexport type CarouselWatchSlides = EmblaOptions[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\nexport type CarouselPlugin = EmblaPluginType\n\nexport interface CarouselContext extends Omit<\n UseCarouselReturn,\n \"getRootProps\"\n> {}\n\nconst [CarouselContext, useCarouselContext] = createContext<CarouselContext>({\n name: \"CarouselContext\",\n})\n\nexport { CarouselContext, useCarouselContext }\n\nexport interface UseCarouselProps extends Omit<\n HTMLProps<\"section\">,\n \"onChange\"\n> {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: CarouselAlign\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: CarouselContainScroll\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | null>\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: CarouselInViewThreshold\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * Embla plugins to use.\n */\n plugins?: CarouselPlugin[]\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: CarouselWatchDrag\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: CarouselWatchResize\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: CarouselWatchSlides\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n id,\n align = \"center\",\n autoplay = false,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n index: indexProp,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n plugins = [],\n skipSnaps = false,\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize: watchResizeProp = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps = {}) => {\n const { t } = useI18n(\"carousel\")\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const [rootId, listId] = useIds()\n const [hover, { off: onMouseLeave, on: onMouseEnter }] = useBoolean()\n const timeoutId = useRef<NodeJS.Timeout | null>(null)\n const indicatorMapRef = useRef<Map<number, HTMLButtonElement | null>>(\n new Map(),\n )\n const listRef = useRef<HTMLDivElement>(null)\n const horizontal = orientation === \"horizontal\"\n const axis = horizontal ? \"x\" : \"y\"\n const [snapCount, setSnapCount] = useState(0)\n const [total, setTotal] = useState(0)\n const watchResize = useCallback<Extract<CarouselWatchResize, Function>>(\n (methods, entries) => {\n const result = isFunction(watchResizeProp)\n ? watchResizeProp(methods, entries)\n : true\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n\n return result\n },\n [watchResizeProp],\n )\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis,\n container: listRef.current,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n plugins,\n )\n\n id ??= rootId\n\n const onInit = useCallback((methods: CarouselControl) => {\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n }, [])\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setIndex(index)\n }, [carousel, setIndex])\n\n const onFocusIndicator = useCallback(\n (index: number) => {\n const el = indicatorMapRef.current.get(index)\n\n el?.focus()\n carousel?.scrollTo(index)\n },\n [carousel],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLButtonElement>) => {\n const lastIndex = snapCount - 1\n\n runKeyAction(ev, {\n ArrowDown: () => {\n if (horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowLeft: () => {\n if (!horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n ArrowRight: () => {\n if (!horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowUp: () => {\n if (horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n End: () => {\n onFocusIndicator(lastIndex)\n },\n Home: () => {\n onFocusIndicator(0)\n },\n })\n },\n [snapCount, horizontal, onFocusIndicator],\n )\n\n assignRef(controlRef, carousel)\n\n useEffect(() => {\n if (carousel) {\n carousel.on(\"reInit\", onInit)\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"reInit\", onInit)\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onInit, onScroll, onSelect])\n\n useEffect(() => {\n const stop = hover && stopMouseEnterAutoplay\n const last = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !stop && !last) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = null\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [autoplay, carousel, delay, hover, stopMouseEnterAutoplay])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (indexProp === undefined) return\n\n carousel.scrollTo(indexProp)\n }, [indexProp])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n }, [\n carousel,\n total,\n align,\n axis,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n ])\n\n const getRootProps: PropGetter<\"section\"> = useCallback(\n ({ ref, ...props } = {}) =>\n mergeProps(\n {\n id,\n \"aria-roledescription\": \"carousel\",\n \"data-orientation\": orientation,\n },\n rest,\n {\n ref,\n onMouseEnter,\n onMouseLeave,\n },\n props,\n )(),\n [id, onMouseEnter, onMouseLeave, rest, orientation],\n )\n\n const getListProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: listId,\n \"aria-live\": autoplay ? \"off\" : \"polite\",\n \"data-orientation\": orientation,\n ...props,\n ref: mergeRefs(ref, listRef, carouselRef),\n }),\n [autoplay, listId, orientation, carouselRef],\n )\n\n const getItemProps: RequiredPropGetter<\"div\", { index: number }> =\n useCallback(\n ({ index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n id: `${listId}-${indexProp}`,\n \"aria-label\": t(\"{page} of {total}\", { page, total }),\n \"aria-roledescription\": \"slide\",\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tabpanel\",\n ...props,\n }\n },\n [index, listId, total, orientation, t],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to previous slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollPrev(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollPrev()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to next slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollNext(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollNext()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getIndicatorsProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-label\": t(\"Slides\"),\n \"aria-orientation\": orientation,\n role: \"tablist\",\n ...props,\n }),\n [orientation, t],\n )\n\n const getIndicatorProps: RequiredPropGetter<\"button\", { index: number }> =\n useCallback(\n ({ ref, index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n type: \"button\" as const,\n \"aria-controls\": `${listId}-${indexProp}`,\n \"aria-label\": t(\"Go to {page} slide\", { page }),\n \"aria-selected\": selected,\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tab\",\n tabIndex: selected ? 0 : -1,\n ...props,\n ref: mergeRefs(ref, (node) => {\n indicatorMapRef.current.set(indexProp, node)\n }),\n onClick: handlerAll(props.onClick, () =>\n carousel?.scrollTo(indexProp),\n ),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(indexProp)),\n }\n },\n [index, listId, t, orientation, onKeyDown, carousel],\n )\n\n return {\n carousel,\n index,\n setIndex,\n snapCount,\n total,\n getIndicatorProps,\n getIndicatorsProps,\n getItemProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n"],"mappings":"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"}
|
|
@@ -5,6 +5,8 @@ import { runKeyAction, useIds } from "../../utils/dom.js";
|
|
|
5
5
|
import { useUpdateEffect } from "../../utils/effect.js";
|
|
6
6
|
import { assignRef, mergeRefs } from "../../utils/ref.js";
|
|
7
7
|
import { utils_exports } from "../../utils/index.js";
|
|
8
|
+
import { mergeProps } from "../../core/components/props.js";
|
|
9
|
+
import "../../core/index.js";
|
|
8
10
|
import { useControllableState } from "../../hooks/use-controllable-state/index.js";
|
|
9
11
|
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
|
|
10
12
|
import "../../providers/i18n-provider/index.js";
|
|
@@ -169,16 +171,15 @@ const useCarousel = ({ id, align = "center", autoplay = false, containScroll = f
|
|
|
169
171
|
skipSnaps,
|
|
170
172
|
slidesToScroll
|
|
171
173
|
]);
|
|
172
|
-
const getRootProps = useCallback(({ ref, ...props } = {}) => ({
|
|
174
|
+
const getRootProps = useCallback(({ ref, ...props } = {}) => mergeProps({
|
|
173
175
|
id,
|
|
174
176
|
"aria-roledescription": "carousel",
|
|
175
|
-
"data-orientation": orientation
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
}), [
|
|
177
|
+
"data-orientation": orientation
|
|
178
|
+
}, rest, {
|
|
179
|
+
ref,
|
|
180
|
+
onMouseEnter,
|
|
181
|
+
onMouseLeave
|
|
182
|
+
}, props)(), [
|
|
182
183
|
id,
|
|
183
184
|
onMouseEnter,
|
|
184
185
|
onMouseLeave,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-carousel.js","names":["createContext","snapCount","total","index","getRootProps: PropGetter<\"section\">","getListProps: PropGetter","getItemProps: RequiredPropGetter<\"div\", { index: number }>","indexProp","getPrevTriggerProps: PropGetter<\"button\">","getNextTriggerProps: PropGetter<\"button\">","getIndicatorsProps: PropGetter"],"sources":["../../../../src/components/carousel/use-carousel.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n EmblaCarouselType,\n EmblaOptionsType,\n EmblaPluginType,\n} from \"embla-carousel\"\nimport type { KeyboardEvent, RefObject } from \"react\"\nimport type {\n HTMLProps,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useBoolean } from \"../../hooks/use-boolean\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n isFunction,\n mergeRefs,\n runKeyAction,\n useIds,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype EmblaOptions = Required<EmblaOptionsType>\nexport type CarouselAlign = EmblaOptions[\"align\"]\nexport type CarouselContainScroll = EmblaOptions[\"containScroll\"]\nexport type CarouselInViewThreshold = EmblaOptions[\"inViewThreshold\"]\nexport type CarouselWatchDrag = EmblaOptions[\"watchDrag\"]\nexport type CarouselWatchResize = EmblaOptions[\"watchResize\"]\nexport type CarouselWatchSlides = EmblaOptions[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\nexport type CarouselPlugin = EmblaPluginType\n\nexport interface CarouselContext extends Omit<\n UseCarouselReturn,\n \"getRootProps\"\n> {}\n\nconst [CarouselContext, useCarouselContext] = createContext<CarouselContext>({\n name: \"CarouselContext\",\n})\n\nexport { CarouselContext, useCarouselContext }\n\nexport interface UseCarouselProps extends Omit<\n HTMLProps<\"section\">,\n \"onChange\"\n> {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: CarouselAlign\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: CarouselContainScroll\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | null>\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: CarouselInViewThreshold\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * Embla plugins to use.\n */\n plugins?: CarouselPlugin[]\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: CarouselWatchDrag\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: CarouselWatchResize\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: CarouselWatchSlides\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n id,\n align = \"center\",\n autoplay = false,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n index: indexProp,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n plugins = [],\n skipSnaps = false,\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize: watchResizeProp = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps = {}) => {\n const { t } = useI18n(\"carousel\")\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const [rootId, listId] = useIds()\n const [hover, { off: onMouseLeave, on: onMouseEnter }] = useBoolean()\n const timeoutId = useRef<NodeJS.Timeout | null>(null)\n const indicatorMapRef = useRef<Map<number, HTMLButtonElement | null>>(\n new Map(),\n )\n const listRef = useRef<HTMLDivElement>(null)\n const horizontal = orientation === \"horizontal\"\n const axis = horizontal ? \"x\" : \"y\"\n const [snapCount, setSnapCount] = useState(0)\n const [total, setTotal] = useState(0)\n const watchResize = useCallback<Extract<CarouselWatchResize, Function>>(\n (methods, entries) => {\n const result = isFunction(watchResizeProp)\n ? watchResizeProp(methods, entries)\n : true\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n\n return result\n },\n [watchResizeProp],\n )\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis,\n container: listRef.current,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n plugins,\n )\n\n id ??= rootId\n\n const onInit = useCallback((methods: CarouselControl) => {\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n }, [])\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setIndex(index)\n }, [carousel, setIndex])\n\n const onFocusIndicator = useCallback(\n (index: number) => {\n const el = indicatorMapRef.current.get(index)\n\n el?.focus()\n carousel?.scrollTo(index)\n },\n [carousel],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLButtonElement>) => {\n const lastIndex = snapCount - 1\n\n runKeyAction(ev, {\n ArrowDown: () => {\n if (horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowLeft: () => {\n if (!horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n ArrowRight: () => {\n if (!horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowUp: () => {\n if (horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n End: () => {\n onFocusIndicator(lastIndex)\n },\n Home: () => {\n onFocusIndicator(0)\n },\n })\n },\n [snapCount, horizontal, onFocusIndicator],\n )\n\n assignRef(controlRef, carousel)\n\n useEffect(() => {\n if (carousel) {\n carousel.on(\"reInit\", onInit)\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"reInit\", onInit)\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onInit, onScroll, onSelect])\n\n useEffect(() => {\n const stop = hover && stopMouseEnterAutoplay\n const last = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !stop && !last) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = null\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [autoplay, carousel, delay, hover, stopMouseEnterAutoplay])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (indexProp === undefined) return\n\n carousel.scrollTo(indexProp)\n }, [indexProp])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n }, [\n carousel,\n total,\n align,\n axis,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n ])\n\n const getRootProps: PropGetter<\"section\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n \"aria-roledescription\": \"carousel\",\n \"data-orientation\": orientation,\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref),\n onMouseEnter: handlerAll(props.onMouseEnter, onMouseEnter),\n onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n }),\n [id, onMouseEnter, onMouseLeave, rest, orientation],\n )\n\n const getListProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: listId,\n \"aria-live\": autoplay ? \"off\" : \"polite\",\n \"data-orientation\": orientation,\n ...props,\n ref: mergeRefs(ref, listRef, carouselRef),\n }),\n [autoplay, listId, orientation, carouselRef],\n )\n\n const getItemProps: RequiredPropGetter<\"div\", { index: number }> =\n useCallback(\n ({ index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n id: `${listId}-${indexProp}`,\n \"aria-label\": t(\"{page} of {total}\", { page, total }),\n \"aria-roledescription\": \"slide\",\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tabpanel\",\n ...props,\n }\n },\n [index, listId, total, orientation, t],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to previous slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollPrev(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollPrev()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to next slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollNext(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollNext()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getIndicatorsProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-label\": t(\"Slides\"),\n \"aria-orientation\": orientation,\n role: \"tablist\",\n ...props,\n }),\n [orientation, t],\n )\n\n const getIndicatorProps: RequiredPropGetter<\"button\", { index: number }> =\n useCallback(\n ({ ref, index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n type: \"button\" as const,\n \"aria-controls\": `${listId}-${indexProp}`,\n \"aria-label\": t(\"Go to {page} slide\", { page }),\n \"aria-selected\": selected,\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tab\",\n tabIndex: selected ? 0 : -1,\n ...props,\n ref: mergeRefs(ref, (node) => {\n indicatorMapRef.current.set(indexProp, node)\n }),\n onClick: handlerAll(props.onClick, () =>\n carousel?.scrollTo(indexProp),\n ),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(indexProp)),\n }\n },\n [index, listId, t, orientation, onKeyDown, carousel],\n )\n\n return {\n carousel,\n index,\n setIndex,\n snapCount,\n total,\n getIndicatorProps,\n getIndicatorsProps,\n getItemProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-carousel.js","names":["createContext","snapCount","total","index","getRootProps: PropGetter<\"section\">","getListProps: PropGetter","getItemProps: RequiredPropGetter<\"div\", { index: number }>","indexProp","getPrevTriggerProps: PropGetter<\"button\">","getNextTriggerProps: PropGetter<\"button\">","getIndicatorsProps: PropGetter"],"sources":["../../../../src/components/carousel/use-carousel.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n EmblaCarouselType,\n EmblaOptionsType,\n EmblaPluginType,\n} from \"embla-carousel\"\nimport type { KeyboardEvent, RefObject } from \"react\"\nimport type {\n HTMLProps,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useBoolean } from \"../../hooks/use-boolean\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n isFunction,\n mergeRefs,\n runKeyAction,\n useIds,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype EmblaOptions = Required<EmblaOptionsType>\nexport type CarouselAlign = EmblaOptions[\"align\"]\nexport type CarouselContainScroll = EmblaOptions[\"containScroll\"]\nexport type CarouselInViewThreshold = EmblaOptions[\"inViewThreshold\"]\nexport type CarouselWatchDrag = EmblaOptions[\"watchDrag\"]\nexport type CarouselWatchResize = EmblaOptions[\"watchResize\"]\nexport type CarouselWatchSlides = EmblaOptions[\"watchSlides\"]\nexport type CarouselControl = EmblaCarouselType\nexport type CarouselPlugin = EmblaPluginType\n\nexport interface CarouselContext extends Omit<\n UseCarouselReturn,\n \"getRootProps\"\n> {}\n\nconst [CarouselContext, useCarouselContext] = createContext<CarouselContext>({\n name: \"CarouselContext\",\n})\n\nexport { CarouselContext, useCarouselContext }\n\nexport interface UseCarouselProps extends Omit<\n HTMLProps<\"section\">,\n \"onChange\"\n> {\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: CarouselAlign\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default false\n */\n containScroll?: CarouselContainScroll\n /**\n * Ref of the resizable item callback.\n */\n controlRef?: RefObject<CarouselControl | null>\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Set scroll duration when triggered by any of the API methods.\n * Higher numbers enables slower scrolling.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * @default 25\n */\n duration?: number\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: CarouselInViewThreshold\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * Embla plugins to use.\n */\n plugins?: CarouselPlugin[]\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * Enables for scrolling the carousel with mouse and touch interactions.\n * Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.\n *\n * @default true\n */\n watchDrag?: CarouselWatchDrag\n /**\n * Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.\n *\n * @default true\n */\n watchResize?: CarouselWatchResize\n /**\n * Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed.\n * Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.\n *\n * @default true\n */\n watchSlides?: CarouselWatchSlides\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n id,\n align = \"center\",\n autoplay = false,\n containScroll = false,\n controlRef,\n defaultIndex = 0,\n delay = 4000,\n dragFree = false,\n draggable = true,\n duration = 25,\n index: indexProp,\n inViewThreshold = 0,\n loop = true,\n orientation = \"horizontal\",\n plugins = [],\n skipSnaps = false,\n slidesToScroll = 1,\n stopMouseEnterAutoplay = true,\n watchDrag = draggable,\n watchResize: watchResizeProp = true,\n watchSlides = true,\n onChange,\n onScrollProgress,\n ...rest\n}: UseCarouselProps = {}) => {\n const { t } = useI18n(\"carousel\")\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const [rootId, listId] = useIds()\n const [hover, { off: onMouseLeave, on: onMouseEnter }] = useBoolean()\n const timeoutId = useRef<NodeJS.Timeout | null>(null)\n const indicatorMapRef = useRef<Map<number, HTMLButtonElement | null>>(\n new Map(),\n )\n const listRef = useRef<HTMLDivElement>(null)\n const horizontal = orientation === \"horizontal\"\n const axis = horizontal ? \"x\" : \"y\"\n const [snapCount, setSnapCount] = useState(0)\n const [total, setTotal] = useState(0)\n const watchResize = useCallback<Extract<CarouselWatchResize, Function>>(\n (methods, entries) => {\n const result = isFunction(watchResizeProp)\n ? watchResizeProp(methods, entries)\n : true\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n\n return result\n },\n [watchResizeProp],\n )\n const [carouselRef, carousel] = useEmblaCarousel(\n {\n align,\n axis,\n container: listRef.current,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n startIndex: defaultIndex,\n watchDrag,\n watchResize,\n watchSlides,\n },\n plugins,\n )\n\n id ??= rootId\n\n const onInit = useCallback((methods: CarouselControl) => {\n const snapCount = methods.scrollSnapList().length\n const total = methods.slideNodes().length\n\n setSnapCount(snapCount)\n setTotal(total)\n }, [])\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setIndex(index)\n }, [carousel, setIndex])\n\n const onFocusIndicator = useCallback(\n (index: number) => {\n const el = indicatorMapRef.current.get(index)\n\n el?.focus()\n carousel?.scrollTo(index)\n },\n [carousel],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLButtonElement>) => {\n const lastIndex = snapCount - 1\n\n runKeyAction(ev, {\n ArrowDown: () => {\n if (horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowLeft: () => {\n if (!horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n ArrowRight: () => {\n if (!horizontal) return\n\n index = index === lastIndex ? 0 : index + 1\n\n onFocusIndicator(index)\n },\n ArrowUp: () => {\n if (horizontal) return\n\n index = index === 0 ? lastIndex : index - 1\n\n onFocusIndicator(index)\n },\n End: () => {\n onFocusIndicator(lastIndex)\n },\n Home: () => {\n onFocusIndicator(0)\n },\n })\n },\n [snapCount, horizontal, onFocusIndicator],\n )\n\n assignRef(controlRef, carousel)\n\n useEffect(() => {\n if (carousel) {\n carousel.on(\"reInit\", onInit)\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"reInit\", onInit)\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onInit, onScroll, onSelect])\n\n useEffect(() => {\n const stop = hover && stopMouseEnterAutoplay\n const last = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !stop && !last) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = null\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [autoplay, carousel, delay, hover, stopMouseEnterAutoplay])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n if (indexProp === undefined) return\n\n carousel.scrollTo(indexProp)\n }, [indexProp])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n }, [\n carousel,\n total,\n align,\n axis,\n containScroll,\n dragFree,\n duration,\n inViewThreshold,\n loop,\n skipSnaps,\n slidesToScroll,\n ])\n\n const getRootProps: PropGetter<\"section\"> = useCallback(\n ({ ref, ...props } = {}) =>\n mergeProps(\n {\n id,\n \"aria-roledescription\": \"carousel\",\n \"data-orientation\": orientation,\n },\n rest,\n {\n ref,\n onMouseEnter,\n onMouseLeave,\n },\n props,\n )(),\n [id, onMouseEnter, onMouseLeave, rest, orientation],\n )\n\n const getListProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: listId,\n \"aria-live\": autoplay ? \"off\" : \"polite\",\n \"data-orientation\": orientation,\n ...props,\n ref: mergeRefs(ref, listRef, carouselRef),\n }),\n [autoplay, listId, orientation, carouselRef],\n )\n\n const getItemProps: RequiredPropGetter<\"div\", { index: number }> =\n useCallback(\n ({ index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n id: `${listId}-${indexProp}`,\n \"aria-label\": t(\"{page} of {total}\", { page, total }),\n \"aria-roledescription\": \"slide\",\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tabpanel\",\n ...props,\n }\n },\n [index, listId, total, orientation, t],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to previous slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollPrev(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollPrev()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": listId,\n \"aria-label\": t(\"Go to next slide\"),\n \"data-orientation\": orientation,\n disabled: !carousel?.canScrollNext(),\n ...props,\n onClick: handlerAll(props.onClick, () => carousel?.scrollNext()),\n }),\n [carousel, listId, orientation, t],\n )\n\n const getIndicatorsProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-label\": t(\"Slides\"),\n \"aria-orientation\": orientation,\n role: \"tablist\",\n ...props,\n }),\n [orientation, t],\n )\n\n const getIndicatorProps: RequiredPropGetter<\"button\", { index: number }> =\n useCallback(\n ({ ref, index: indexProp, ...props }) => {\n const page = indexProp + 1\n const selected = index === indexProp\n\n return {\n type: \"button\" as const,\n \"aria-controls\": `${listId}-${indexProp}`,\n \"aria-label\": t(\"Go to {page} slide\", { page }),\n \"aria-selected\": selected,\n \"data-index\": indexProp.toString(),\n \"data-orientation\": orientation,\n \"data-selected\": dataAttr(selected),\n role: \"tab\",\n tabIndex: selected ? 0 : -1,\n ...props,\n ref: mergeRefs(ref, (node) => {\n indicatorMapRef.current.set(indexProp, node)\n }),\n onClick: handlerAll(props.onClick, () =>\n carousel?.scrollTo(indexProp),\n ),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(indexProp)),\n }\n },\n [index, listId, t, orientation, onKeyDown, carousel],\n )\n\n return {\n carousel,\n index,\n setIndex,\n snapCount,\n total,\n getIndicatorProps,\n getIndicatorsProps,\n getItemProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n"],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ import "../collapse/index.js";
|
|
|
9
9
|
import "../../index.js";
|
|
10
10
|
import { AccordionStyle } from "./accordion.style.js";
|
|
11
11
|
import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
|
|
12
|
-
import * as
|
|
12
|
+
import * as react469 from "react";
|
|
13
13
|
|
|
14
14
|
//#region src/components/accordion/accordion.d.ts
|
|
15
15
|
interface AccordionCallBackProps {
|
|
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
|
|
|
33
33
|
*/
|
|
34
34
|
items?: AccordionItem[];
|
|
35
35
|
}
|
|
36
|
-
declare const AccordionPropsContext:
|
|
36
|
+
declare const AccordionPropsContext: react469.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
|
|
37
37
|
/**
|
|
38
38
|
* `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
|
|
39
39
|
*
|
|
@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
|
|
|
2
2
|
import "../../core/index.js";
|
|
3
3
|
import { Descendant } from "../../hooks/use-descendants/index.js";
|
|
4
4
|
import "../../index.js";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react457 from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/accordion/use-accordion.d.ts
|
|
8
|
-
declare const AccordionDescendantsContext:
|
|
8
|
+
declare const AccordionDescendantsContext: react457.Context<{
|
|
9
9
|
active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
|
|
10
10
|
count: (props?: Partial<{}> | undefined) => number;
|
|
11
11
|
destroy: () => void;
|
|
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react87.Context<{
|
|
|
24
24
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
25
25
|
register: (props?: {
|
|
26
26
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
27
|
-
} | undefined) =>
|
|
27
|
+
} | undefined) => react457.RefCallback<HTMLButtonElement>;
|
|
28
28
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
29
29
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
30
30
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react87.Context<{
|
|
|
50
50
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
51
51
|
register: (props?: {
|
|
52
52
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
53
|
-
} | undefined) =>
|
|
53
|
+
} | undefined) => react457.RefCallback<HTMLButtonElement>;
|
|
54
54
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
55
55
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
56
56
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
57
57
|
};
|
|
58
|
-
register:
|
|
58
|
+
register: react457.RefCallback<HTMLButtonElement>;
|
|
59
59
|
}, useAccordionDescendants: () => {
|
|
60
60
|
active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
|
|
61
61
|
count: (props?: Partial<{}> | undefined) => number;
|
|
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react87.Context<{
|
|
|
75
75
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
76
76
|
register: (props?: {
|
|
77
77
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
78
|
-
} | undefined) =>
|
|
78
|
+
} | undefined) => react457.RefCallback<HTMLButtonElement>;
|
|
79
79
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
80
80
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
81
81
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
82
82
|
};
|
|
83
83
|
interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
|
|
84
|
-
declare const AccordionContext:
|
|
84
|
+
declare const AccordionContext: react457.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
|
|
85
85
|
interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
|
|
86
|
-
declare const AccordionItemContext:
|
|
86
|
+
declare const AccordionItemContext: react457.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
|
|
87
87
|
interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
|
|
88
88
|
/**
|
|
89
89
|
* The initial index(es) of the accordion item to expand.
|
|
@@ -137,7 +137,7 @@ declare const useAccordion: ({
|
|
|
137
137
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
138
138
|
register: (props?: {
|
|
139
139
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
140
|
-
} | undefined) =>
|
|
140
|
+
} | undefined) => react457.RefCallback<HTMLButtonElement>;
|
|
141
141
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
142
142
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
143
143
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
@@ -145,8 +145,8 @@ declare const useAccordion: ({
|
|
|
145
145
|
focusedIndex: number;
|
|
146
146
|
index: number | number[];
|
|
147
147
|
multiple: boolean | undefined;
|
|
148
|
-
setFocusedIndex:
|
|
149
|
-
setIndex:
|
|
148
|
+
setFocusedIndex: react457.Dispatch<react457.SetStateAction<number>>;
|
|
149
|
+
setIndex: react457.Dispatch<react457.SetStateAction<number | number[]>>;
|
|
150
150
|
toggle: boolean | undefined;
|
|
151
151
|
getRootProps: PropGetter<"div", undefined, undefined>;
|
|
152
152
|
};
|
|
@@ -7,7 +7,7 @@ import { UsePopupAnimationProps } from "../popover/popover.js";
|
|
|
7
7
|
import "../popover/index.js";
|
|
8
8
|
import { UseActionBarProps } from "./use-action-bar.js";
|
|
9
9
|
import "../../index.js";
|
|
10
|
-
import * as
|
|
10
|
+
import * as react456 from "react";
|
|
11
11
|
import { PropsWithChildren, ReactNode } from "react";
|
|
12
12
|
|
|
13
13
|
//#region src/components/action-bar/action-bar.d.ts
|
|
@@ -29,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
|
|
|
29
29
|
*/
|
|
30
30
|
onCloseComplete?: () => void;
|
|
31
31
|
}
|
|
32
|
-
declare const ActionBarPropsContext:
|
|
32
|
+
declare const ActionBarPropsContext: react456.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
|
|
33
33
|
/**
|
|
34
34
|
* `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
|
|
35
35
|
*
|
|
@@ -5,7 +5,7 @@ import { HTMLMotionProps } from "../motion/index.types.js";
|
|
|
5
5
|
import "../motion/index.js";
|
|
6
6
|
import { AiryStyle } from "./airy.style.js";
|
|
7
7
|
import "../../index.js";
|
|
8
|
-
import * as
|
|
8
|
+
import * as react455 from "react";
|
|
9
9
|
import { ReactNode } from "react";
|
|
10
10
|
|
|
11
11
|
//#region src/components/airy/airy.d.ts
|
|
@@ -57,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
|
|
|
57
57
|
*/
|
|
58
58
|
onChange?: (value: KeyframeIdent) => void;
|
|
59
59
|
}
|
|
60
|
-
declare const AiryPropsContext:
|
|
60
|
+
declare const AiryPropsContext: react455.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
|
|
61
61
|
/**
|
|
62
62
|
* `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
|
|
63
63
|
*
|
|
@@ -9,7 +9,7 @@ import "../loading/index.js";
|
|
|
9
9
|
import { StatusScheme } from "../status/status.js";
|
|
10
10
|
import "../status/index.js";
|
|
11
11
|
import "../../index.js";
|
|
12
|
-
import * as
|
|
12
|
+
import * as react454 from "react";
|
|
13
13
|
|
|
14
14
|
//#region src/components/alert/alert.d.ts
|
|
15
15
|
interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
|
|
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
|
|
|
20
20
|
*/
|
|
21
21
|
status?: StatusScheme;
|
|
22
22
|
}
|
|
23
|
-
declare const AlertPropsContext:
|
|
23
|
+
declare const AlertPropsContext: react454.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
|
|
24
24
|
/**
|
|
25
25
|
* `Alert` is a component that conveys information to the user.
|
|
26
26
|
*
|
|
@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
|
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/alert/alert.style.d.ts
|
|
6
|
-
declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "
|
|
6
|
+
declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
|
|
7
7
|
island: {
|
|
8
8
|
description: {
|
|
9
9
|
color: "fg.muted";
|
|
@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
|
|
|
5
5
|
import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
|
|
6
6
|
import "../hue-slider/index.js";
|
|
7
7
|
import "../../index.js";
|
|
8
|
-
import * as
|
|
8
|
+
import * as react453 from "react";
|
|
9
9
|
|
|
10
10
|
//#region src/components/alpha-slider/alpha-slider.d.ts
|
|
11
11
|
interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
|
|
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
|
|
|
38
38
|
*/
|
|
39
39
|
trackProps?: AlphaSliderTrackProps;
|
|
40
40
|
}
|
|
41
|
-
declare const AlphaSliderPropsContext:
|
|
41
|
+
declare const AlphaSliderPropsContext: react453.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
|
|
42
42
|
/**
|
|
43
43
|
* `AlphaSlider` is a component used to allow the user to select color transparency.
|
|
44
44
|
*
|
|
@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
|
|
|
2
2
|
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
|
|
3
3
|
import "../../core/index.js";
|
|
4
4
|
import "../../index.js";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react452 from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/aspect-ratio/aspect-ratio.d.ts
|
|
8
8
|
interface AspectRatioProps extends HTMLStyledProps {
|
|
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
|
|
|
13
13
|
*/
|
|
14
14
|
ratio?: StyleValue<number>;
|
|
15
15
|
}
|
|
16
|
-
declare const AspectRatioPropsContext:
|
|
16
|
+
declare const AspectRatioPropsContext: react452.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
|
|
17
17
|
/**
|
|
18
18
|
* `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
|
|
19
19
|
*
|
|
@@ -12,7 +12,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
|
|
|
12
12
|
import "../input/index.js";
|
|
13
13
|
import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
|
|
14
14
|
import "../../index.js";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react451 from "react";
|
|
16
16
|
import { ReactElement, ReactNode } from "react";
|
|
17
17
|
|
|
18
18
|
//#region src/components/autocomplete/autocomplete.d.ts
|
|
@@ -68,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
|
|
|
68
68
|
*/
|
|
69
69
|
rootProps?: InputGroupRootProps;
|
|
70
70
|
}
|
|
71
|
-
declare const AutocompletePropsContext:
|
|
71
|
+
declare const AutocompletePropsContext: react451.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
|
|
72
72
|
/**
|
|
73
73
|
* `Autocomplete` is a component used to display suggestions in response to user text input.
|
|
74
74
|
*
|
|
@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
|
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/autocomplete/autocomplete.style.d.ts
|
|
6
|
-
declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "
|
|
6
|
+
declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "empty" | "valueText">>, {
|
|
7
7
|
xs: {
|
|
8
8
|
empty: {
|
|
9
9
|
gap: "1.5";
|
|
@@ -8,7 +8,7 @@ import "../field/index.js";
|
|
|
8
8
|
import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
|
|
9
9
|
import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
|
|
10
10
|
import "../../index.js";
|
|
11
|
-
import * as
|
|
11
|
+
import * as react445 from "react";
|
|
12
12
|
import { ChangeEvent, ReactNode } from "react";
|
|
13
13
|
|
|
14
14
|
//#region src/components/autocomplete/use-autocomplete.d.ts
|
|
@@ -28,7 +28,7 @@ interface AutocompleteFilter {
|
|
|
28
28
|
}
|
|
29
29
|
type AutocompleteMatcher = typeof index_d_exports.match;
|
|
30
30
|
interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
|
|
31
|
-
declare const AutocompleteContext:
|
|
31
|
+
declare const AutocompleteContext: react445.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
|
|
32
32
|
interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
|
|
33
33
|
/**
|
|
34
34
|
* If `true`, the autocomplete will allow custom value.
|
|
@@ -156,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
|
|
|
156
156
|
lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
157
157
|
nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
158
158
|
prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
159
|
-
register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) =>
|
|
159
|
+
register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react445.RefCallback<HTMLDivElement>;
|
|
160
160
|
unregister: (node?: HTMLDivElement | null | undefined) => void;
|
|
161
161
|
value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
162
162
|
values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
|
|
@@ -166,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
|
|
|
166
166
|
items: ComboboxItem[];
|
|
167
167
|
max: number | undefined;
|
|
168
168
|
open: boolean;
|
|
169
|
-
setInputValue:
|
|
170
|
-
setValue:
|
|
169
|
+
setInputValue: react445.Dispatch<react445.SetStateAction<string>>;
|
|
170
|
+
setValue: react445.Dispatch<react445.SetStateAction<Multiple extends true ? string[] : string>>;
|
|
171
171
|
value: Multiple extends true ? string[] : string;
|
|
172
172
|
valueMap: {
|
|
173
173
|
[key: string]: ComboboxItemWithValue;
|
|
@@ -6,9 +6,9 @@ import "../../core/index.js";
|
|
|
6
6
|
import { AvatarStyle } from "./avatar.style.js";
|
|
7
7
|
import { UseAvatarProps } from "./use-avatar.js";
|
|
8
8
|
import "../../index.js";
|
|
9
|
-
import * as
|
|
9
|
+
import * as react1216 from "react";
|
|
10
10
|
import { ReactElement } from "react";
|
|
11
|
-
import * as
|
|
11
|
+
import * as _yamada_ui_utils19 from "@yamada-ui/utils";
|
|
12
12
|
|
|
13
13
|
//#region src/components/avatar/avatar.d.ts
|
|
14
14
|
interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
|
|
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
|
|
|
25
25
|
*/
|
|
26
26
|
imageProps?: AvatarImageProps;
|
|
27
27
|
}
|
|
28
|
-
declare const component: <H extends "fragment" | As = "div", R extends
|
|
28
|
+
declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils19.Dict = _yamada_ui_utils19.Dict<any>>(el: H | react1216.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
29
29
|
shape: {
|
|
30
30
|
circle: {
|
|
31
31
|
root: {
|
|
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
|
|
|
148
148
|
name,
|
|
149
149
|
className,
|
|
150
150
|
...options
|
|
151
|
-
}?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ?
|
|
151
|
+
}?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1216.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1216.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils19.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
152
152
|
shape: {
|
|
153
153
|
circle: {
|
|
154
154
|
root: {
|
|
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
|
|
|
271
271
|
className,
|
|
272
272
|
withContext,
|
|
273
273
|
transferProps
|
|
274
|
-
}?: UseComponentPropsOptions<R>) => [CSSSlotObject,
|
|
274
|
+
}?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils19.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
275
275
|
shape: {
|
|
276
276
|
circle: {
|
|
277
277
|
root: {
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
|
|
|
2
2
|
import "../../index.js";
|
|
3
3
|
|
|
4
4
|
//#region src/components/avatar/avatar.style.d.ts
|
|
5
|
-
declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "
|
|
5
|
+
declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
6
6
|
/**
|
|
7
7
|
* The shape of the component
|
|
8
8
|
*
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
|
|
2
2
|
import "../../core/index.js";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react1219 from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/components/avatar/use-avatar-group.d.ts
|
|
6
6
|
interface UseAvatarGroupProps extends HTMLProps {
|
|
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
|
|
|
19
19
|
reverse,
|
|
20
20
|
...rest
|
|
21
21
|
}?: UseAvatarGroupProps) => {
|
|
22
|
-
children:
|
|
22
|
+
children: react1219.ReactElement<any, string | react1219.JSXElementConstructor<any>>[];
|
|
23
23
|
excess: number;
|
|
24
24
|
getRootProps: PropGetter<"div", undefined, undefined>;
|
|
25
25
|
};
|