@destyler/carousel 0.2.6 → 0.2.9

package/dist/index.d.mts

@@ -79,9 +79,14 @@ interface PublicContext extends DirectionProperty, CommonProperties, Orientation
    */
   loop: boolean;
   /**
-   * The index of the active page.
+   * The controlled index of the active page.
    */
-  page: number;
+  page?: number | undefined;
+  /**
+   * The initial active page when it is not controlled.
+   * Prefer this over seeding with `page` for uncontrolled usage.
+   */
+  defaultPage?: number | undefined;
   /**
    * The amount of space between items.
    * @default "0px"
@@ -242,8 +247,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
 //#endregion
 //#region src/props.d.ts
-declare const props: ("autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation">];
+declare const props: ("autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "defaultPage" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "defaultPage" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation">];
 declare const indicatorProps: (keyof IndicatorProps)[];
 declare const splitIndicatorProps: <Props extends IndicatorProps>(props: Props) => [IndicatorProps, Omit<Props, keyof IndicatorProps>];
 declare const itemProps: (keyof ItemProps)[];

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { createAnatomy } from "@destyler/anatomy";
 import { addDomEvent, ariaAttr, createScope, dataAttr, getEventKey, getEventTarget, getTabbables, isFocusable, queryAll, raf, trackPointerMove } from "@destyler/dom";
 import { findSnapPoint, getScrollSnapPositions } from "@destyler/scroll-snap";
-import { add, compact, createSplitProps, isEqual, isObject, nextIndex, prevIndex, remove, uniq } from "@destyler/utils";
+import { add, compact, createSplitProps, isControlled, isEqual, isObject, isPropUserProvided, nextIndex, prevIndex, remove, resolveControllableProp, uniq, withControllableProvided } from "@destyler/utils";
 import { createMachine, ref } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
 
@@ -321,6 +321,13 @@ const invoke = { pageChange: (ctx) => {
 const set = { page: (ctx, value) => {
 	const page = clamp(value, 0, ctx.pageSnapPoints.length - 1);
 	if (isEqual(ctx.page, page)) return;
+	if (isControlled(ctx, "page")) {
+		ctx.onPageChange?.({
+			page,
+			pageSnapPoint: ctx.pageSnapPoints[page]
+		});
+		return;
+	}
 	ctx.page = page;
 	invoke.pageChange(ctx);
 } };
@@ -353,7 +360,13 @@ function ensureItemGroupEl(ctx, fn) {
 	};
 }
 function machine(userContext) {
-	const ctx = compact(userContext);
+	const ctx = compact(withControllableProvided(userContext, ["page"]));
+	const { initial: initialPage } = resolveControllableProp({
+		value: ctx.page,
+		defaultValue: ctx.defaultPage,
+		valueProvided: isPropUserProvided(ctx, "page"),
+		fallback: 0
+	});
 	return createMachine({
 		id: "carousel",
 		initial: ctx.autoplay ? "autoplay" : "idle",
@@ -370,6 +383,7 @@ function machine(userContext) {
 			allowMouseDrag: false,
 			inViewThreshold: .6,
 			...ctx,
+			page: initialPage,
 			timeoutRef: ref({ current: void 0 }),
 			translations: {
 				nextTrigger: "Next slide",
@@ -393,7 +407,11 @@ function machine(userContext) {
 		watch: {
 			slidesPerPage: ["setSnapPoints"],
 			slidesPerMove: ["setSnapPoints"],
-			page: ["scrollToPage", "focusIndicatorEl"],
+			page: [
+				"clearScrollEndTimer",
+				"scrollToPage",
+				"focusIndicatorEl"
+			],
 			orientation: ["setSnapPoints", "scrollToPage"]
 		},
 		on: {
@@ -589,7 +607,7 @@ function machine(userContext) {
 			},
 			scrollToPage(ctx$1, evt) {
 				const behavior = evt.instant ? "instant" : "smooth";
-				const index = clamp(evt.index ?? ctx$1.page, 0, ctx$1.pageSnapPoints.length - 1);
+				const index = clamp(ctx$1.page ?? 0, 0, ctx$1.pageSnapPoints.length - 1);
 				const el = dom.getItemGroupEl(ctx$1);
 				const axis = ctx$1.isHorizontal ? "left" : "top";
 				el.scrollTo({
@@ -719,6 +737,7 @@ function machine(userContext) {
 //#endregion
 //#region src/props.ts
 const props = createProps()([
+	"defaultPage",
 	"dir",
 	"getRootNode",
 	"id",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/carousel",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "an interactive slideshow component for cycling through elements.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,12 +22,12 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.6",
-    "@destyler/dom": "0.2.6",
-    "@destyler/types": "0.2.6",
-    "@destyler/utils": "0.2.6",
-    "@destyler/scroll-snap": "0.2.6",
-    "@destyler/xstate": "0.2.6"
+    "@destyler/anatomy": "0.2.9",
+    "@destyler/dom": "0.2.9",
+    "@destyler/scroll-snap": "0.2.9",
+    "@destyler/types": "0.2.9",
+    "@destyler/utils": "0.2.9",
+    "@destyler/xstate": "0.2.9"
   },
   "publishConfig": {
     "access": "public"