@destyler/switch 0.2.6 → 0.2.9

package/dist/index.d.mts

@@ -47,9 +47,14 @@ interface PublicContext extends DirectionProperty, CommonProperties {
    */
   onCheckedChange?: ((details: CheckedChangeDetails) => void) | undefined;
   /**
-   * Whether the switch is checked.
+   * The controlled checked state of the switch.
    */
-  checked: boolean;
+  checked?: boolean | undefined;
+  /**
+   * The initial checked state of the switch when it is not controlled.
+   * Prefer this over seeding with `checked` for uncontrolled usage.
+   */
+  defaultChecked?: boolean | undefined;
   /**
    * The name of the input field in a switch
    * (Useful for form submission).
@@ -141,7 +146,7 @@ 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" | "label" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "dir" | "id" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "label" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "dir" | "id" | "getRootNode">];
+declare const props: ("id" | "ids" | "label" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "defaultChecked" | "name" | "form" | "value" | "dir" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "id" | "ids" | "label" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "defaultChecked" | "name" | "form" | "value" | "dir" | "getRootNode">];
 //#endregion
 export { type MachineApi as Api, type CheckedChangeDetails, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { createAnatomy } from "@destyler/anatomy";
 import { createScope, dataAttr, dispatchInputCheckedEvent, getEventTarget, trackFormControl, trackPress, visuallyHiddenStyle } from "@destyler/dom";
 import { isFocusVisible, trackFocusVisible } from "@destyler/focus-visible";
-import { compact, createSplitProps, isEqual } from "@destyler/utils";
+import { compact, createSplitProps, isControlled, isEqual, isPropUserProvided, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 import { createMachine, guards } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
 
@@ -161,28 +161,39 @@ function connect(state, send, normalize) {
 //#endregion
 //#region src/machine.ts
 const { not } = guards;
-const invoke = { change: (ctx) => {
-	ctx.onCheckedChange?.({ checked: ctx.checked });
+const invoke = { change: (ctx, checked) => {
+	ctx.onCheckedChange?.({ checked });
 } };
 const set = { checked: (ctx, checked) => {
 	if (isEqual(ctx.checked, checked)) return;
+	if (isControlled(ctx, "checked")) {
+		invoke.change(ctx, checked);
+		return;
+	}
 	ctx.checked = checked;
-	invoke.change(ctx);
+	invoke.change(ctx, checked);
 } };
 function machine(userContext) {
+	const ctx = compact(withControllableProvided(userContext, ["checked"]));
+	const { initial: initialChecked } = resolveControllableProp({
+		value: ctx.checked,
+		defaultValue: ctx.defaultChecked,
+		valueProvided: isPropUserProvided(ctx, "checked"),
+		fallback: false
+	});
 	return createMachine({
 		id: "switch",
 		initial: "ready",
 		context: {
-			checked: false,
 			label: "switch",
 			value: "on",
 			disabled: false,
-			...compact(userContext),
+			...ctx,
+			checked: initialChecked,
 			fieldsetDisabled: false,
 			focusVisible: false
 		},
-		computed: { isDisabled: (ctx) => ctx.disabled || ctx.fieldsetDisabled },
+		computed: { isDisabled: (ctx$1) => !!ctx$1.disabled || ctx$1.fieldsetDisabled },
 		watch: {
 			disabled: "removeFocusIfNeeded",
 			checked: "syncInputElement"
@@ -207,25 +218,25 @@ function machine(userContext) {
 	}, {
 		guards: { isTrusted: (_ctx, evt) => !!evt.isTrusted },
 		activities: {
-			trackPressEvent(ctx) {
-				if (ctx.isDisabled) return;
+			trackPressEvent(ctx$1) {
+				if (ctx$1.isDisabled) return;
 				return trackPress({
-					pointerNode: dom.getRootEl(ctx),
-					keyboardNode: dom.getHiddenInputEl(ctx),
+					pointerNode: dom.getRootEl(ctx$1),
+					keyboardNode: dom.getHiddenInputEl(ctx$1),
 					isValidKey: (event) => event.key === " ",
-					onPress: () => ctx.active = false,
-					onPressStart: () => ctx.active = true,
-					onPressEnd: () => ctx.active = false
+					onPress: () => ctx$1.active = false,
+					onPressStart: () => ctx$1.active = true,
+					onPressEnd: () => ctx$1.active = false
 				});
 			},
-			trackFocusVisible(ctx) {
-				if (ctx.isDisabled) return;
-				return trackFocusVisible({ root: dom.getRootNode(ctx) });
+			trackFocusVisible(ctx$1) {
+				if (ctx$1.isDisabled) return;
+				return trackFocusVisible({ root: dom.getRootNode(ctx$1) });
 			},
-			trackFormControlState(ctx, _evt, { send, initialContext }) {
-				return trackFormControl(dom.getHiddenInputEl(ctx), {
+			trackFormControlState(ctx$1, _evt, { send, initialContext }) {
+				return trackFormControl(dom.getHiddenInputEl(ctx$1), {
 					onFieldsetDisabledChange(disabled) {
-						ctx.fieldsetDisabled = disabled;
+						ctx$1.fieldsetDisabled = disabled;
 					},
 					onFormReset() {
 						send({
@@ -238,25 +249,25 @@ function machine(userContext) {
 			}
 		},
 		actions: {
-			setContext(ctx, evt) {
-				Object.assign(ctx, evt.context);
+			setContext(ctx$1, evt) {
+				Object.assign(ctx$1, evt.context);
 			},
-			syncInputElement(ctx) {
-				const inputEl = dom.getHiddenInputEl(ctx);
+			syncInputElement(ctx$1) {
+				const inputEl = dom.getHiddenInputEl(ctx$1);
 				if (!inputEl) return;
-				inputEl.checked = !!ctx.checked;
+				inputEl.checked = !!ctx$1.checked;
 			},
-			removeFocusIfNeeded(ctx) {
-				if (ctx.disabled && ctx.focused) ctx.focused = false;
+			removeFocusIfNeeded(ctx$1) {
+				if (ctx$1.disabled && ctx$1.focused) ctx$1.focused = false;
 			},
-			setChecked(ctx, evt) {
-				set.checked(ctx, evt.checked);
+			setChecked(ctx$1, evt) {
+				set.checked(ctx$1, evt.checked);
 			},
-			toggleChecked(ctx, _evt) {
-				set.checked(ctx, !ctx.checked);
+			toggleChecked(ctx$1, _evt) {
+				set.checked(ctx$1, !ctx$1.checked);
 			},
-			dispatchChangeEvent(ctx) {
-				dispatchInputCheckedEvent(dom.getHiddenInputEl(ctx), { checked: ctx.checked });
+			dispatchChangeEvent(ctx$1) {
+				dispatchInputCheckedEvent(dom.getHiddenInputEl(ctx$1), { checked: !!ctx$1.checked });
 			}
 		}
 	});
@@ -266,6 +277,7 @@ function machine(userContext) {
 //#region src/props.ts
 const props = createProps()([
 	"checked",
+	"defaultChecked",
 	"dir",
 	"disabled",
 	"form",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/switch",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "A control that allows the user to toggle between checked and not checked.",
   "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/focus-visible": "0.2.6",
-    "@destyler/types": "0.2.6",
-    "@destyler/xstate": "0.2.6",
-    "@destyler/utils": "0.2.6"
+    "@destyler/anatomy": "0.2.9",
+    "@destyler/dom": "0.2.9",
+    "@destyler/focus-visible": "0.2.9",
+    "@destyler/types": "0.2.9",
+    "@destyler/utils": "0.2.9",
+    "@destyler/xstate": "0.2.9"
   },
   "publishConfig": {
     "access": "public"