@destyler/carousel 0.1.0 → 0.2.0

package/dist/{index.d.ts → index.d.mts}

@@ -4,7 +4,7 @@ import { AnyEventObject, ContextRef, Machine, XSend, XState } from "@destyler/xs
 import { CommonProperties, DirectionProperty, NormalizeProps, Orientation, OrientationProperty, PropTypes, RequiredBy } from "@destyler/types";
 
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "autoplayTrigger">;
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "item" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "control" | "autoplayTrigger">;
 //#endregion
 //#region src/types.d.ts
 interface PageChangeDetails {
@@ -249,4 +249,4 @@ declare const splitIndicatorProps: <Props extends IndicatorProps>(props: Props)
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 //#endregion
-export { type MachineApi as Api, type AutoplayStatusDetails, type UserDefinedContext as Context, type DragStatusDetails, type ElementIds, type IndicatorProps, type IntlTranslations, type ItemProps, type Orientation, type PageChangeDetails, type Service, anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };
+export { type MachineApi as Api, type AutoplayStatusDetails, type UserDefinedContext as Context, type DragStatusDetails, type ElementIds, type IndicatorProps, type IntlTranslations, type ItemProps, type MachineState, type Orientation, type PageChangeDetails, type Service, type State, anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };

package/dist/{index.js → index.mjs}

@@ -27,8 +27,7 @@ const dom = createScope({
 	syncTabIndex(ctx) {
 		const el = dom.getItemGroupEl(ctx);
 		if (!el) return;
-		const tabbables = getTabbables(el);
-		if (tabbables.length > 0) el.removeAttribute("tabindex");
+		if (getTabbables(el).length > 0) el.removeAttribute("tabindex");
 		else el.setAttribute("tabindex", "0");
 	}
 });
@@ -148,7 +147,7 @@ function connect(state, send, normalize) {
 				"dir": state.context.dir,
 				"role": "group",
 				"data-index": props$1.index,
-				"data-inview": dataAttr(isInView),
+				"data-inview": String(isInView),
 				"aria-roledescription": "slide",
 				"data-orientation": state.context.orientation,
 				"aria-label": state.context.slideCount ? translations.item(props$1.index, state.context.slideCount) : void 0,
@@ -209,7 +208,7 @@ function connect(state, send, normalize) {
 				onKeyDown(event) {
 					if (event.defaultPrevented) return;
 					const src = "indicator";
-					const keyMap = {
+					const exec = {
 						ArrowDown(event$1) {
 							if (horizontal) return;
 							send({
@@ -258,12 +257,10 @@ function connect(state, send, normalize) {
 							});
 							event$1.preventDefault();
 						}
-					};
-					const key = getEventKey(event, {
+					}[getEventKey(event, {
 						dir: state.context.dir,
 						orientation: state.context.orientation
-					});
-					const exec = keyMap[key];
+					})];
 					exec?.(event);
 				}
 			});
@@ -308,8 +305,7 @@ function connect(state, send, normalize) {
 function getSnapAlign(ctx, props$1) {
 	const { snapAlign = "start", index } = props$1;
 	const perMove = ctx.slidesPerMove === "auto" ? Math.floor(ctx.slidesPerPage) : ctx.slidesPerMove;
-	const shouldSnap = (index + perMove) % perMove === 0;
-	return shouldSnap ? snapAlign : void 0;
+	return (index + perMove) % perMove === 0 ? snapAlign : void 0;
 }
 
 //#endregion
@@ -338,6 +334,24 @@ function getPageSnapPoints(totalSlides, slidesPerMove, slidesPerPage) {
 	for (let i = 0; i < totalSlides - 1; i += perMove) snapPoints.push(i);
 	return snapPoints;
 }
+function ensureItemGroupEl(ctx, fn) {
+	const win = dom.getWin(ctx);
+	let rafId = null;
+	let cleanup;
+	const run = () => {
+		const el = dom.getItemGroupEl(ctx);
+		if (!el) {
+			rafId = win.requestAnimationFrame(run);
+			return;
+		}
+		cleanup = fn(el);
+	};
+	run();
+	return () => {
+		if (rafId != null) win.cancelAnimationFrame(rafId);
+		cleanup?.();
+	};
+}
 function machine(userContext) {
 	const ctx = compact(userContext);
 	return createMachine({
@@ -423,6 +437,11 @@ function machine(userContext) {
 					"AUTOPLAY.START": {
 						target: "autoplay",
 						actions: ["invokeAutoplayStart"]
+					},
+					"INVIEW.SET": {
+						target: "idle",
+						internal: false,
+						actions: ["setSlidesInView"]
 					}
 				}
 			},
@@ -434,6 +453,11 @@ function machine(userContext) {
 					"DRAGGING.END": {
 						target: "idle",
 						actions: ["endDragging", "invokeDraggingEnd"]
+					},
+					"INVIEW.SET": {
+						target: "dragging",
+						internal: false,
+						actions: ["setSlidesInView"]
 					}
 				}
 			},
@@ -446,78 +470,85 @@ function machine(userContext) {
 						target: "dragging",
 						actions: ["invokeDragStart"]
 					},
-					"AUTOPLAY.PAUSE": "idle"
+					"AUTOPLAY.PAUSE": "idle",
+					"INVIEW.SET": {
+						target: "autoplay",
+						internal: false,
+						actions: ["setSlidesInView"]
+					}
 				}
 			}
 		}
 	}, {
 		activities: {
 			trackSlideMutation(ctx$1, _evt, { send }) {
-				const el = dom.getItemGroupEl(ctx$1);
-				if (!el) return;
-				const win = dom.getWin(ctx$1);
-				const observer = new win.MutationObserver(() => {
-					send({
-						type: "SNAP.REFRESH",
-						src: "slide.mutation"
+				return ensureItemGroupEl(ctx$1, (el) => {
+					const observer = new (dom.getWin(ctx$1)).MutationObserver(() => {
+						send({
+							type: "SNAP.REFRESH",
+							src: "slide.mutation"
+						});
+						dom.syncTabIndex(ctx$1);
 					});
 					dom.syncTabIndex(ctx$1);
+					observer.observe(el, {
+						childList: true,
+						subtree: true
+					});
+					return () => observer.disconnect();
 				});
-				dom.syncTabIndex(ctx$1);
-				observer.observe(el, {
-					childList: true,
-					subtree: true
-				});
-				return () => observer.disconnect();
 			},
 			trackSlideResize(ctx$1, _evt, { send }) {
-				const el = dom.getItemGroupEl(ctx$1);
-				if (!el) return;
-				const win = dom.getWin(ctx$1);
-				const observer = new win.ResizeObserver(() => {
-					send({
-						type: "SNAP.REFRESH",
-						src: "slide.resize"
+				return ensureItemGroupEl(ctx$1, () => {
+					const observer = new (dom.getWin(ctx$1)).ResizeObserver(() => {
+						send({
+							type: "SNAP.REFRESH",
+							src: "slide.resize"
+						});
 					});
+					dom.getItemEls(ctx$1).forEach((slide) => observer.observe(slide));
+					return () => observer.disconnect();
 				});
-				dom.getItemEls(ctx$1).forEach((slide) => observer.observe(slide));
-				return () => observer.disconnect();
 			},
-			trackSlideIntersections(ctx$1) {
-				const el = dom.getItemGroupEl(ctx$1);
-				const win = dom.getWin(ctx$1);
-				const observer = new win.IntersectionObserver((entries) => {
-					const slidesInView = entries.reduce((acc, entry) => {
-						const target = entry.target;
-						const index = Number(target.dataset.index ?? "-1");
-						if (index == null || Number.isNaN(index) || index === -1) return acc;
-						return entry.isIntersecting ? add(acc, index) : remove(acc, index);
-					}, ctx$1.slidesInView);
-					ctx$1.slidesInView = uniq(slidesInView);
-				}, {
-					root: el,
-					threshold: ctx$1.inViewThreshold
+			trackSlideIntersections(ctx$1, _evt, { send }) {
+				return ensureItemGroupEl(ctx$1, (el) => {
+					const observer = new (dom.getWin(ctx$1)).IntersectionObserver((entries) => {
+						const nextSlides = uniq(entries.reduce((acc, entry) => {
+							const target = entry.target;
+							const index = Number(target.dataset.index ?? "-1");
+							if (index == null || Number.isNaN(index) || index === -1) return acc;
+							return entry.isIntersecting ? add(acc, index) : remove(acc, index);
+						}, ctx$1.slidesInView));
+						if (isEqual(ctx$1.slidesInView, nextSlides)) return;
+						send({
+							type: "INVIEW.SET",
+							slidesInView: nextSlides
+						});
+					}, {
+						root: el,
+						threshold: ctx$1.inViewThreshold
+					});
+					dom.getItemEls(ctx$1).forEach((slide) => observer.observe(slide));
+					return () => observer.disconnect();
 				});
-				dom.getItemEls(ctx$1).forEach((slide) => observer.observe(slide));
-				return () => observer.disconnect();
 			},
 			trackScroll(ctx$1) {
-				const el = dom.getItemGroupEl(ctx$1);
-				if (!el) return;
-				const onScrollEnd = () => {
-					if (ctx$1.slidesInView.length === 0) return;
-					const scrollPosition = ctx$1.isHorizontal ? el.scrollLeft : el.scrollTop;
-					const page = ctx$1.pageSnapPoints.findIndex((point) => Math.abs(point - scrollPosition) < 1);
-					if (page === -1) return;
-					set.page(ctx$1, page);
-				};
-				const onScroll = () => {
-					clearTimeout(ctx$1.timeoutRef.current);
-					ctx$1.timeoutRef.current = setTimeout(() => {
-						onScrollEnd?.();
-					}, 150);
-				};
-				return addDomEvent(el, "scroll", onScroll, { passive: true });
+				return ensureItemGroupEl(ctx$1, (el) => {
+					const onScrollEnd = () => {
+						if (ctx$1.slidesInView.length === 0) return;
+						const scrollPosition = ctx$1.isHorizontal ? el.scrollLeft : el.scrollTop;
+						const page = ctx$1.pageSnapPoints.findIndex((point) => Math.abs(point - scrollPosition) < 1);
+						if (page === -1) return;
+						set.page(ctx$1, page);
+					};
+					const onScroll = () => {
+						clearTimeout(ctx$1.timeoutRef.current);
+						ctx$1.timeoutRef.current = setTimeout(() => {
+							onScrollEnd?.();
+						}, 150);
+					};
+					return addDomEvent(el, "scroll", onScroll, { passive: true });
+				});
 			},
 			trackDocumentVisibility(ctx$1, _evt, { send }) {
 				const doc = dom.getDoc(ctx$1);
@@ -531,8 +562,7 @@ function machine(userContext) {
 				return addDomEvent(doc, "visibilitychange", onVisibilityChange);
 			},
 			trackPointerMove(ctx$1, _evt, { send }) {
-				const doc = dom.getDoc(ctx$1);
-				return trackPointerMove(doc, {
+				return trackPointerMove(dom.getDoc(ctx$1), {
 					onPointerMove({ event }) {
 						send({
 							type: "DRAGGING",
@@ -549,6 +579,7 @@ function machine(userContext) {
 		actions: {
 			resetScrollPosition(ctx$1) {
 				const el = dom.getItemGroupEl(ctx$1);
+				if (!el) return;
 				el.scrollTo(0, 0);
 			},
 			clearScrollEndTimer(ctx$1) {
@@ -589,8 +620,7 @@ function machine(userContext) {
 			},
 			setSnapPoints(ctx$1) {
 				queueMicrotask(() => {
-					const el = dom.getItemGroupEl(ctx$1);
-					const scrollSnapPoints = getScrollSnapPositions(el);
+					const scrollSnapPoints = getScrollSnapPositions(dom.getItemGroupEl(ctx$1));
 					ctx$1.pageSnapPoints = ctx$1.isHorizontal ? scrollSnapPoints.x : scrollSnapPoints.y;
 				});
 			},
@@ -601,8 +631,7 @@ function machine(userContext) {
 				el.style.setProperty("scroll-snap-type", "none");
 			},
 			scrollSlides(ctx$1, evt) {
-				const el = dom.getItemGroupEl(ctx$1);
-				el.scrollBy({
+				dom.getItemGroupEl(ctx$1).scrollBy({
 					left: evt.left,
 					top: evt.top,
 					behavior: "instant"
@@ -625,8 +654,7 @@ function machine(userContext) {
 						top: closestY,
 						behavior: "smooth"
 					});
-					const scrollSnapType = el.dataset.scrollSnapType;
-					if (scrollSnapType) {
+					if (el.dataset.scrollSnapType) {
 						el.style.removeProperty("scroll-snap-type");
 						delete el.dataset.scrollSnapType;
 					}
@@ -678,6 +706,10 @@ function machine(userContext) {
 					isPlaying: false,
 					page: ctx$1.page
 				});
+			},
+			setSlidesInView(ctx$1, evt) {
+				if (evt.type !== "INVIEW.SET") return;
+				ctx$1.slidesInView = evt.slidesInView;
 			}
 		},
 		delays: { AUTOPLAY_INTERVAL: (ctx$1) => ctx$1.autoplayInterval }

package/package.json

@@ -1,27 +1,36 @@
 {
   "name": "@destyler/carousel",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "an interactive slideshow component for cycling through elements.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
+  "homepage": "https://github.com/destyler/destyler",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/destyler/destyler.git",
+    "directory": "packages/components/carousel"
+  },
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.mjs"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.1.0",
-    "@destyler/dom": "0.1.0",
-    "@destyler/utils": "0.1.0",
-    "@destyler/xstate": "0.1.0",
-    "@destyler/scroll-snap": "0.1.0",
-    "@destyler/types": "0.1.0"
+    "@destyler/dom": "0.2.0",
+    "@destyler/anatomy": "0.2.0",
+    "@destyler/scroll-snap": "0.2.0",
+    "@destyler/types": "0.2.0",
+    "@destyler/xstate": "0.2.0",
+    "@destyler/utils": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
     "clear": "rimraf ./dist",