@yamada-ui/carousel 1.0.27 → 1.0.28-dev-20240501174240
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +6 -6
- package/dist/carousel-control.d.mts +0 -8
- package/dist/carousel-control.d.ts +0 -8
- package/dist/carousel-control.js +0 -158
- package/dist/carousel-control.js.map +0 -1
- package/dist/carousel-control.mjs +0 -11
- package/dist/carousel-control.mjs.map +0 -1
- package/dist/carousel-indicators.d.mts +0 -17
- package/dist/carousel-indicators.d.ts +0 -17
- package/dist/carousel-indicators.js +0 -141
- package/dist/carousel-indicators.js.map +0 -1
- package/dist/carousel-indicators.mjs +0 -9
- package/dist/carousel-indicators.mjs.map +0 -1
- package/dist/carousel-slide.d.mts +0 -17
- package/dist/carousel-slide.d.ts +0 -17
- package/dist/carousel-slide.js +0 -106
- package/dist/carousel-slide.js.map +0 -1
- package/dist/carousel-slide.mjs +0 -9
- package/dist/carousel-slide.mjs.map +0 -1
- package/dist/carousel.d.mts +0 -144
- package/dist/carousel.d.ts +0 -144
- package/dist/carousel.js +0 -599
- package/dist/carousel.js.map +0 -1
- package/dist/carousel.mjs +0 -12
- package/dist/carousel.mjs.map +0 -1
- package/dist/chunk-ABN4VJ2X.mjs +0 -171
- package/dist/chunk-ABN4VJ2X.mjs.map +0 -1
- package/dist/chunk-DDY7Q2IV.mjs +0 -87
- package/dist/chunk-DDY7Q2IV.mjs.map +0 -1
- package/dist/chunk-QQ2HS4J4.mjs +0 -260
- package/dist/chunk-QQ2HS4J4.mjs.map +0 -1
- package/dist/chunk-SDWORTZY.mjs +0 -72
- package/dist/chunk-SDWORTZY.mjs.map +0 -1
- package/dist/chunk-VQX7S5CU.mjs +0 -50
- package/dist/chunk-VQX7S5CU.mjs.map +0 -1
- package/dist/index.d.mts +0 -9
- package/dist/index.d.ts +0 -9
- package/dist/index.js +0 -609
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -23
- package/dist/index.mjs.map +0 -1
- package/dist/use-carousel.d.mts +0 -176
- package/dist/use-carousel.d.ts +0 -176
- package/dist/use-carousel.js +0 -292
- package/dist/use-carousel.js.map +0 -1
- package/dist/use-carousel.mjs +0 -18
- package/dist/use-carousel.mjs.map +0 -1
package/dist/use-carousel.js
DELETED
@@ -1,292 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
"use strict";
|
3
|
-
var __create = Object.create;
|
4
|
-
var __defProp = Object.defineProperty;
|
5
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
-
var __getProtoOf = Object.getPrototypeOf;
|
8
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
-
var __export = (target, all) => {
|
10
|
-
for (var name in all)
|
11
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
-
};
|
13
|
-
var __copyProps = (to, from, except, desc) => {
|
14
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
-
for (let key of __getOwnPropNames(from))
|
16
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
18
|
-
}
|
19
|
-
return to;
|
20
|
-
};
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
23
|
-
// file that has been converted to a CommonJS file using a Babel-
|
24
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
25
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
26
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
27
|
-
mod
|
28
|
-
));
|
29
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
30
|
-
|
31
|
-
// src/use-carousel.ts
|
32
|
-
var use_carousel_exports = {};
|
33
|
-
__export(use_carousel_exports, {
|
34
|
-
CarouselProvider: () => CarouselProvider,
|
35
|
-
useCarousel: () => useCarousel,
|
36
|
-
useCarouselContext: () => useCarouselContext,
|
37
|
-
useCarouselControl: () => useCarouselControl,
|
38
|
-
useCarouselIndicators: () => useCarouselIndicators,
|
39
|
-
useCarouselSlide: () => useCarouselSlide
|
40
|
-
});
|
41
|
-
module.exports = __toCommonJS(use_carousel_exports);
|
42
|
-
var import_core = require("@yamada-ui/core");
|
43
|
-
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
44
|
-
var import_utils = require("@yamada-ui/utils");
|
45
|
-
var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
|
46
|
-
var import_react = require("react");
|
47
|
-
var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
|
48
|
-
name: "CarouselContext",
|
49
|
-
errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
|
50
|
-
});
|
51
|
-
var useCarousel = ({
|
52
|
-
index,
|
53
|
-
defaultIndex = 0,
|
54
|
-
onChange,
|
55
|
-
align = "center",
|
56
|
-
orientation = "horizontal",
|
57
|
-
autoplay = false,
|
58
|
-
stopMouseEnterAutoplay = true,
|
59
|
-
loop = true,
|
60
|
-
speed = 10,
|
61
|
-
delay = 4e3,
|
62
|
-
gap = "fallback(4, 1rem)",
|
63
|
-
slidesToScroll = 1,
|
64
|
-
draggable = true,
|
65
|
-
dragFree = false,
|
66
|
-
inViewThreshold = 0,
|
67
|
-
skipSnaps = false,
|
68
|
-
containScroll = "",
|
69
|
-
slideSize = "100%",
|
70
|
-
includeGapInSize = true,
|
71
|
-
onScrollProgress,
|
72
|
-
children,
|
73
|
-
...rest
|
74
|
-
}) => {
|
75
|
-
const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
|
76
|
-
const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
|
77
|
-
value: index,
|
78
|
-
defaultValue: defaultIndex,
|
79
|
-
onChange
|
80
|
-
});
|
81
|
-
const isVertical = orientation === "vertical";
|
82
|
-
const [carouselRef, carousel] = (0, import_embla_carousel_react.default)({
|
83
|
-
axis: isVertical ? "y" : "x",
|
84
|
-
startIndex: defaultIndex,
|
85
|
-
loop,
|
86
|
-
align,
|
87
|
-
slidesToScroll,
|
88
|
-
draggable,
|
89
|
-
dragFree,
|
90
|
-
speed,
|
91
|
-
inViewThreshold,
|
92
|
-
skipSnaps,
|
93
|
-
containScroll
|
94
|
-
});
|
95
|
-
const [indexes, setIndexes] = (0, import_react.useState)([]);
|
96
|
-
const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
|
97
|
-
const timeoutId = (0, import_react.useRef)(void 0);
|
98
|
-
const onScroll = (0, import_react.useCallback)(() => {
|
99
|
-
if (!carousel)
|
100
|
-
return;
|
101
|
-
const progress = Math.round(
|
102
|
-
Math.max(0, Math.min(1, carousel.scrollProgress())) * 100
|
103
|
-
);
|
104
|
-
onScrollProgress == null ? void 0 : onScrollProgress(progress);
|
105
|
-
}, [carousel, onScrollProgress]);
|
106
|
-
const onSelect = (0, import_react.useCallback)(() => {
|
107
|
-
if (!carousel)
|
108
|
-
return;
|
109
|
-
const index2 = carousel.selectedScrollSnap();
|
110
|
-
setSelectedIndex(index2);
|
111
|
-
}, [carousel, setSelectedIndex]);
|
112
|
-
(0, import_react.useEffect)(() => {
|
113
|
-
const isStop = isMouseEnter && stopMouseEnterAutoplay;
|
114
|
-
const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
|
115
|
-
if (carousel && autoplay && !isStop && !isLast) {
|
116
|
-
timeoutId.current = setInterval(() => {
|
117
|
-
carousel.scrollNext();
|
118
|
-
}, delay);
|
119
|
-
} else {
|
120
|
-
if (timeoutId.current)
|
121
|
-
clearInterval(timeoutId.current);
|
122
|
-
timeoutId.current = void 0;
|
123
|
-
}
|
124
|
-
return () => {
|
125
|
-
if (timeoutId.current)
|
126
|
-
clearInterval(timeoutId.current);
|
127
|
-
};
|
128
|
-
}, [
|
129
|
-
autoplay,
|
130
|
-
delay,
|
131
|
-
stopMouseEnterAutoplay,
|
132
|
-
carousel,
|
133
|
-
isMouseEnter,
|
134
|
-
loop,
|
135
|
-
selectedIndex
|
136
|
-
]);
|
137
|
-
(0, import_utils.useUpdateEffect)(() => {
|
138
|
-
if (!carousel)
|
139
|
-
return;
|
140
|
-
carousel.reInit();
|
141
|
-
const snapList = carousel.scrollSnapList();
|
142
|
-
const indexes2 = snapList.map((_, i) => i);
|
143
|
-
setIndexes(indexes2);
|
144
|
-
}, [
|
145
|
-
import_react.Children.toArray(children).length,
|
146
|
-
align,
|
147
|
-
orientation,
|
148
|
-
loop,
|
149
|
-
speed,
|
150
|
-
gap,
|
151
|
-
slidesToScroll,
|
152
|
-
draggable,
|
153
|
-
dragFree,
|
154
|
-
inViewThreshold,
|
155
|
-
skipSnaps,
|
156
|
-
containScroll,
|
157
|
-
slideSize,
|
158
|
-
includeGapInSize
|
159
|
-
]);
|
160
|
-
(0, import_utils.useUpdateEffect)(() => {
|
161
|
-
if (!carousel)
|
162
|
-
return;
|
163
|
-
const snapList = carousel.scrollSnapList();
|
164
|
-
const indexes2 = snapList.map((_, i) => i);
|
165
|
-
setIndexes(indexes2);
|
166
|
-
}, [carousel]);
|
167
|
-
(0, import_utils.useUpdateEffect)(() => {
|
168
|
-
if (carousel) {
|
169
|
-
carousel.on("select", onSelect);
|
170
|
-
carousel.on("scroll", onScroll);
|
171
|
-
onScroll();
|
172
|
-
return () => {
|
173
|
-
carousel.off("select", onSelect);
|
174
|
-
carousel.off("scroll", onScroll);
|
175
|
-
};
|
176
|
-
}
|
177
|
-
}, [carousel, onScroll]);
|
178
|
-
const getContainerProps = (0, import_react.useCallback)(
|
179
|
-
(props = {}, ref = null) => ({
|
180
|
-
...computedProps[0],
|
181
|
-
...props,
|
182
|
-
ref,
|
183
|
-
onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
|
184
|
-
setIsMouseEnter(true);
|
185
|
-
}),
|
186
|
-
onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, () => {
|
187
|
-
setIsMouseEnter(false);
|
188
|
-
})
|
189
|
-
}),
|
190
|
-
[computedProps]
|
191
|
-
);
|
192
|
-
const getSlidesProps = (0, import_react.useCallback)(
|
193
|
-
(props = {}) => ({
|
194
|
-
...computedProps[1],
|
195
|
-
...props,
|
196
|
-
ref: carouselRef
|
197
|
-
}),
|
198
|
-
[computedProps, carouselRef]
|
199
|
-
);
|
200
|
-
return {
|
201
|
-
carousel,
|
202
|
-
children,
|
203
|
-
indexes,
|
204
|
-
selectedIndex,
|
205
|
-
orientation,
|
206
|
-
slideSize,
|
207
|
-
gap,
|
208
|
-
slidesToScroll,
|
209
|
-
includeGapInSize,
|
210
|
-
getContainerProps,
|
211
|
-
getSlidesProps
|
212
|
-
};
|
213
|
-
};
|
214
|
-
var useCarouselSlide = ({ index }) => {
|
215
|
-
const { selectedIndex, slidesToScroll } = useCarouselContext();
|
216
|
-
index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
|
217
|
-
const isSelected = index === selectedIndex;
|
218
|
-
const getSlideProps = (0, import_react.useCallback)(
|
219
|
-
(props = {}) => ({
|
220
|
-
...props,
|
221
|
-
"data-index": index,
|
222
|
-
"data-selected": (0, import_utils.dataAttr)(isSelected)
|
223
|
-
}),
|
224
|
-
[isSelected, index]
|
225
|
-
);
|
226
|
-
return { getSlideProps };
|
227
|
-
};
|
228
|
-
var useCarouselControl = ({
|
229
|
-
operation,
|
230
|
-
...rest
|
231
|
-
}) => {
|
232
|
-
var _a, _b;
|
233
|
-
const { carousel } = useCarouselContext();
|
234
|
-
const isPrev = operation === "prev";
|
235
|
-
const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : isPrev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
|
236
|
-
const onClick = (0, import_react.useCallback)(() => {
|
237
|
-
if (!carousel)
|
238
|
-
return;
|
239
|
-
if (isPrev) {
|
240
|
-
carousel.scrollPrev();
|
241
|
-
} else {
|
242
|
-
carousel.scrollNext();
|
243
|
-
}
|
244
|
-
}, [carousel, isPrev]);
|
245
|
-
const getControlProps = (0, import_react.useCallback)(
|
246
|
-
(props = {}, ref = null) => ({
|
247
|
-
...props,
|
248
|
-
ref,
|
249
|
-
disabled,
|
250
|
-
onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
|
251
|
-
}),
|
252
|
-
[disabled, onClick]
|
253
|
-
);
|
254
|
-
return { getControlProps };
|
255
|
-
};
|
256
|
-
var useCarouselIndicators = () => {
|
257
|
-
const { selectedIndex, carousel, indexes } = useCarouselContext();
|
258
|
-
const onClick = (0, import_react.useCallback)(
|
259
|
-
(ev, index) => {
|
260
|
-
if (!carousel)
|
261
|
-
return;
|
262
|
-
ev.stopPropagation();
|
263
|
-
carousel.scrollTo(index);
|
264
|
-
},
|
265
|
-
[carousel]
|
266
|
-
);
|
267
|
-
const getIndicatorProps = (0, import_react.useCallback)(
|
268
|
-
({ index, ...props }) => {
|
269
|
-
const isSelected = index === selectedIndex;
|
270
|
-
return {
|
271
|
-
"aria-label": `Go to ${index + 1} slide`,
|
272
|
-
...props,
|
273
|
-
key: index,
|
274
|
-
"data-index": index,
|
275
|
-
"data-selected": (0, import_utils.dataAttr)(isSelected),
|
276
|
-
onClick: (0, import_utils.handlerAll)(props.onClick, (ev) => onClick(ev, index))
|
277
|
-
};
|
278
|
-
},
|
279
|
-
[onClick, selectedIndex]
|
280
|
-
);
|
281
|
-
return { indexes, getIndicatorProps };
|
282
|
-
};
|
283
|
-
// Annotate the CommonJS export names for ESM import in node:
|
284
|
-
0 && (module.exports = {
|
285
|
-
CarouselProvider,
|
286
|
-
useCarousel,
|
287
|
-
useCarouselContext,
|
288
|
-
useCarouselControl,
|
289
|
-
useCarouselIndicators,
|
290
|
-
useCarouselSlide
|
291
|
-
});
|
292
|
-
//# sourceMappingURL=use-carousel.js.map
|
package/dist/use-carousel.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n HTMLUIProps,\n CSSUIProps,\n UIPropGetter,\n RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n splitObject,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType } from \"embla-carousel-react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype CarouselContext = {\n carousel: EmblaCarouselType | undefined\n indexes: number[]\n selectedIndex: number\n orientation: \"vertical\" | \"horizontal\"\n includeGapInSize: boolean\n slidesToScroll: number\n slideSize: string | number\n gap: CSSUIProps[\"gap\"]\n styles: Record<string, CSSUIObject>\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n createContext<CarouselContext>({\n name: \"CarouselContext\",\n errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n })\n\nexport type UseCarouselProps = Omit<\n HTMLUIProps<\"div\">,\n \"onChange\" | \"draggable\" | \"gap\"\n> & {\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: \"start\" | \"center\" | \"end\" | number\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 ''\n */\n containScroll?: \"trimSnaps\" | \"keepSnaps\" | \"\"\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`, 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 * 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?: number\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 * 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 * Adjusts scroll speed when triggered by any of the methods.\n * Higher numbers enables faster scrolling.\n *\n * @default 10\n */\n speed?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: boolean\n /**\n * The CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: string | number\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 index,\n defaultIndex = 0,\n onChange,\n align = \"center\",\n orientation = \"horizontal\",\n autoplay = false,\n stopMouseEnterAutoplay = true,\n loop = true,\n speed = 10,\n delay = 4000,\n gap = \"fallback(4, 1rem)\",\n slidesToScroll = 1,\n draggable = true,\n dragFree = false,\n inViewThreshold = 0,\n skipSnaps = false,\n containScroll = \"\",\n slideSize = \"100%\",\n includeGapInSize = true,\n onScrollProgress,\n children,\n ...rest\n}: UseCarouselProps) => {\n const computedProps = splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n value: index,\n defaultValue: defaultIndex,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel({\n axis: isVertical ? \"y\" : \"x\",\n startIndex: defaultIndex,\n loop,\n align,\n slidesToScroll,\n draggable,\n dragFree,\n speed,\n inViewThreshold,\n skipSnaps,\n containScroll,\n })\n\n const [indexes, setIndexes] = useState<number[]>([])\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n const timeoutId = useRef<any>(undefined)\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 setSelectedIndex(index)\n }, [carousel, setSelectedIndex])\n\n useEffect(() => {\n const isStop = isMouseEnter && stopMouseEnterAutoplay\n const isLast = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !isStop && !isLast) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = undefined\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [\n autoplay,\n delay,\n stopMouseEnterAutoplay,\n carousel,\n isMouseEnter,\n loop,\n selectedIndex,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [\n Children.toArray(children).length,\n align,\n orientation,\n loop,\n speed,\n gap,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n slideSize,\n includeGapInSize,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [carousel])\n\n useUpdateEffect(() => {\n if (carousel) {\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onScroll])\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...computedProps[0],\n ...props,\n ref,\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [computedProps],\n )\n\n const getSlidesProps: UIPropGetter = useCallback(\n (props = {}) => ({\n ...computedProps[1],\n ...props,\n ref: carouselRef,\n }),\n [computedProps, carouselRef],\n )\n\n return {\n carousel,\n children,\n indexes,\n selectedIndex,\n orientation,\n slideSize,\n gap,\n slidesToScroll,\n includeGapInSize,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n const isSelected = index === selectedIndex\n\n const getSlideProps: UIPropGetter = useCallback(\n (props = {}) => ({\n ...props,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n }),\n [isSelected, index],\n )\n\n return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport type UseCarouselControlProps = IconButtonProps & {\n operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n operation,\n ...rest\n}: UseCarouselControlProps) => {\n const { carousel } = useCarouselContext()\n\n const isPrev = operation === \"prev\"\n\n const disabled =\n rest.disabled ??\n rest.isDisabled ??\n (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n const onClick = useCallback(() => {\n if (!carousel) return\n\n if (isPrev) {\n carousel.scrollPrev()\n } else {\n carousel.scrollNext()\n }\n }, [carousel, isPrev])\n\n const getControlProps: UIPropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n disabled,\n onClick: handlerAll(props.onClick, onClick),\n }),\n [disabled, onClick],\n )\n\n return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n const onClick = useCallback(\n (ev: MouseEvent, index: number) => {\n if (!carousel) return\n\n ev.stopPropagation()\n\n carousel.scrollTo(index)\n },\n [carousel],\n )\n\n const getIndicatorProps: RequiredUIPropGetter<\"button\", { index: number }> =\n useCallback(\n ({ index, ...props }) => {\n const isSelected = index === selectedIndex\n\n return {\n \"aria-label\": `Go to ${index + 1} slide`,\n ...props,\n key: index,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n }\n },\n [onClick, selectedIndex],\n )\n\n return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n typeof useCarouselIndicators\n>\n"],"mappings":"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","names":["useEmblaCarousel","index","indexes"]}
|
package/dist/use-carousel.mjs
DELETED
@@ -1,18 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
import {
|
3
|
-
CarouselProvider,
|
4
|
-
useCarousel,
|
5
|
-
useCarouselContext,
|
6
|
-
useCarouselControl,
|
7
|
-
useCarouselIndicators,
|
8
|
-
useCarouselSlide
|
9
|
-
} from "./chunk-QQ2HS4J4.mjs";
|
10
|
-
export {
|
11
|
-
CarouselProvider,
|
12
|
-
useCarousel,
|
13
|
-
useCarouselContext,
|
14
|
-
useCarouselControl,
|
15
|
-
useCarouselIndicators,
|
16
|
-
useCarouselSlide
|
17
|
-
};
|
18
|
-
//# sourceMappingURL=use-carousel.mjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|