@destyler/toggle 0.2.6 → 0.2.9

package/dist/index.d.mts

@@ -24,9 +24,14 @@ interface PublicContext extends DirectionProperty, CommonProperties {
    */
   disabled?: boolean | undefined;
   /**
-   * The values of the toggles in the group.
+   * The controlled values of the toggles in the group.
    */
-  value: string[];
+  value?: string[] | undefined;
+  /**
+   * The initial values when the toggle group is not controlled.
+   * Prefer this over seeding with `value` for uncontrolled usage.
+   */
+  defaultValue?: string[] | undefined;
   /**
    * Function to call when the toggle is clicked.
    */
@@ -131,8 +136,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: ("value" | "ids" | "disabled" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "dir" | "id" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "disabled" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "dir" | "id" | "getRootNode">];
+declare const props: ("value" | "ids" | "disabled" | "defaultValue" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "dir" | "id" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "disabled" | "defaultValue" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "dir" | "id" | "getRootNode">];
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 //#endregion

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from "@destyler/anatomy";
 import { createScope, dataAttr, getEventKey, isSafari, isSelfTarget, nextById, prevById, queryAll, raf } from "@destyler/dom";
-import { add, compact, createSplitProps, first, isEqual, last, remove } from "@destyler/utils";
+import { add, compact, createSplitProps, first, isControlled, isEqual, isPropUserProvided, last, remove, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 import { createMachine, guards } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
 
@@ -160,31 +160,42 @@ function connect(state, send, normalize) {
 //#endregion
 //#region src/machine.ts
 const { not, and } = guards;
-const invoke = { change(ctx) {
-	ctx.onValueChange?.({ value: Array.from(ctx.value) });
+const invoke = { change(ctx, value) {
+	ctx.onValueChange?.({ value: Array.from(value) });
 } };
 const set = { value(ctx, value) {
 	if (isEqual(ctx.value, value)) return;
+	if (isControlled(ctx, "value")) {
+		invoke.change(ctx, value);
+		return;
+	}
 	ctx.value = value;
-	invoke.change(ctx);
+	invoke.change(ctx, value);
 } };
 function machine(userContext) {
+	const ctx = compact(withControllableProvided(userContext, ["value"]));
+	const { initial: initialValue } = resolveControllableProp({
+		value: ctx.value,
+		defaultValue: ctx.defaultValue,
+		valueProvided: isPropUserProvided(ctx, "value"),
+		fallback: []
+	});
 	return createMachine({
 		id: "toggle-group",
 		initial: "idle",
 		context: {
-			value: [],
 			disabled: false,
 			orientation: "horizontal",
 			rovingFocus: true,
 			loopFocus: true,
-			...compact(userContext),
+			...ctx,
+			value: initialValue,
 			focusedId: null,
 			isTabbingBackward: false,
 			isClickFocus: false,
 			isWithinToolbar: false
 		},
-		computed: { currentLoopFocus: (ctx) => ctx.loopFocus && !ctx.isWithinToolbar },
+		computed: { currentLoopFocus: (ctx$1) => ctx$1.loopFocus && !ctx$1.isWithinToolbar },
 		entry: ["checkIfWithinToolbar"],
 		on: {
 			"VALUE.SET": { actions: ["setValue"] },
@@ -221,58 +232,58 @@ function machine(userContext) {
 		}
 	}, {
 		guards: {
-			isClickFocus: (ctx) => ctx.isClickFocus,
-			isTabbingBackward: (ctx) => ctx.isTabbingBackward
+			isClickFocus: (ctx$1) => ctx$1.isClickFocus,
+			isTabbingBackward: (ctx$1) => ctx$1.isTabbingBackward
 		},
 		actions: {
-			setIsTabbingBackward(ctx) {
-				ctx.isTabbingBackward = true;
+			setIsTabbingBackward(ctx$1) {
+				ctx$1.isTabbingBackward = true;
 			},
-			clearIsTabbingBackward(ctx) {
-				ctx.isTabbingBackward = false;
+			clearIsTabbingBackward(ctx$1) {
+				ctx$1.isTabbingBackward = false;
 			},
-			setClickFocus(ctx) {
-				ctx.isClickFocus = true;
+			setClickFocus(ctx$1) {
+				ctx$1.isClickFocus = true;
 			},
-			clearClickFocus(ctx) {
-				ctx.isClickFocus = false;
+			clearClickFocus(ctx$1) {
+				ctx$1.isClickFocus = false;
 			},
-			checkIfWithinToolbar(ctx) {
-				ctx.isWithinToolbar = !!dom.getRootEl(ctx)?.closest("[role=toolbar]");
+			checkIfWithinToolbar(ctx$1) {
+				ctx$1.isWithinToolbar = !!dom.getRootEl(ctx$1)?.closest("[role=toolbar]");
 			},
-			setFocusedId(ctx, evt) {
-				ctx.focusedId = evt.id;
+			setFocusedId(ctx$1, evt) {
+				ctx$1.focusedId = evt.id;
 			},
-			clearFocusedId(ctx) {
-				ctx.focusedId = null;
+			clearFocusedId(ctx$1) {
+				ctx$1.focusedId = null;
 			},
-			setValue(ctx, evt) {
+			setValue(ctx$1, evt) {
 				if (!evt.value) return;
-				let next = Array.from(ctx.value);
-				if (ctx.multiple) next = next.includes(evt.value) ? remove(next, evt.value) : add(next, evt.value);
-				else next = isEqual(ctx.value, [evt.value]) ? [] : [evt.value];
-				set.value(ctx, next);
+				let next = Array.from(ctx$1.value);
+				if (ctx$1.multiple) next = next.includes(evt.value) ? remove(next, evt.value) : add(next, evt.value);
+				else next = isEqual(ctx$1.value, [evt.value]) ? [] : [evt.value];
+				set.value(ctx$1, next);
 			},
-			focusNextToggle(ctx) {
+			focusNextToggle(ctx$1) {
 				raf(() => {
-					if (!ctx.focusedId) return;
-					dom.getNextEl(ctx, ctx.focusedId)?.focus({ preventScroll: true });
+					if (!ctx$1.focusedId) return;
+					dom.getNextEl(ctx$1, ctx$1.focusedId)?.focus({ preventScroll: true });
 				});
 			},
-			focusPrevToggle(ctx) {
+			focusPrevToggle(ctx$1) {
 				raf(() => {
-					if (!ctx.focusedId) return;
-					dom.getPrevEl(ctx, ctx.focusedId)?.focus({ preventScroll: true });
+					if (!ctx$1.focusedId) return;
+					dom.getPrevEl(ctx$1, ctx$1.focusedId)?.focus({ preventScroll: true });
 				});
 			},
-			focusFirstToggle(ctx) {
+			focusFirstToggle(ctx$1) {
 				raf(() => {
-					dom.getFirstEl(ctx)?.focus({ preventScroll: true });
+					dom.getFirstEl(ctx$1)?.focus({ preventScroll: true });
 				});
 			},
-			focusLastToggle(ctx) {
+			focusLastToggle(ctx$1) {
 				raf(() => {
-					dom.getLastEl(ctx)?.focus({ preventScroll: true });
+					dom.getLastEl(ctx$1)?.focus({ preventScroll: true });
 				});
 			}
 		}
@@ -282,6 +293,7 @@ function machine(userContext) {
 //#endregion
 //#region src/props.ts
 const props = createProps()([
+	"defaultValue",
 	"dir",
 	"disabled",
 	"getRootNode",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/toggle",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "A two-state button that can be either on or off.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.6",
-    "@destyler/dom": "0.2.6",
-    "@destyler/types": "0.2.6",
-    "@destyler/utils": "0.2.6",
-    "@destyler/xstate": "0.2.6"
+    "@destyler/anatomy": "0.2.9",
+    "@destyler/dom": "0.2.9",
+    "@destyler/utils": "0.2.9",
+    "@destyler/types": "0.2.9",
+    "@destyler/xstate": "0.2.9"
   },
   "publishConfig": {
     "access": "public"