@destyler/checkbox 0.2.11 → 0.2.13

package/dist/index.d.mts

@@ -1,10 +1,7 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
-import * as _destyler_xstate0 from "@destyler/xstate";
 import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
 import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
-
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "control" | "label" | "indicator">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "control" | "label" | "indicator">;
 //#endregion
 //#region src/types.d.ts
 type CheckedState = boolean | 'indeterminate';
@@ -152,13 +149,13 @@ interface MachineApi<T extends PropTypes = PropTypes> {
 }
 //#endregion
 //#region src/connect.d.ts
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 //#endregion
 //#region src/machine.d.ts
-declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+export declare function machine(userContext: UserDefinedContext): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
 //#endregion
 //#region src/props.d.ts
-declare const props: ("value" | "ids" | "disabled" | "invalid" | "required" | "checked" | "defaultChecked" | "readOnly" | "onCheckedChange" | "name" | "form" | "dir" | "id" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "disabled" | "invalid" | "required" | "checked" | "defaultChecked" | "readOnly" | "onCheckedChange" | "name" | "form" | "dir" | "id" | "getRootNode">];
+export declare const props: ("value" | "ids" | "disabled" | "invalid" | "required" | "checked" | "defaultChecked" | "readOnly" | "onCheckedChange" | "name" | "form" | "dir" | "id" | "getRootNode")[];
+export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "disabled" | "invalid" | "required" | "checked" | "defaultChecked" | "readOnly" | "onCheckedChange" | "name" | "form" | "dir" | "id" | "getRootNode">];
 //#endregion
-export { type MachineApi as Api, type CheckedChangeDetails, type CheckedState, type UserDefinedContext as Context, type ElementIds, type MachineState, type Service, type State, anatomy, connect, machine, props, splitProps };
+export type { MachineApi as Api, CheckedChangeDetails, CheckedState, UserDefinedContext as Context, ElementIds, MachineState, Service, State };

package/dist/index.mjs

@@ -1,14 +1,12 @@
 import { createAnatomy } from "@destyler/anatomy";
-import { createScope, dataAttr, dispatchInputCheckedEvent, getEventTarget, setElementChecked, trackFormControl, trackPress, visuallyHiddenStyle } from "@destyler/dom";
+import { createScope, dataAttr, dispatchInputCheckedEvent, getEventTarget, setElementChecked, trackCanceledInputClick, trackFormControl, trackPress, visuallyHiddenStyle } from "@destyler/dom";
 import { isFocusVisible, trackFocusVisible } from "@destyler/focus-visible";
 import { compact, createSplitProps, isControlled, isEqual, isPropUserProvided, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 import { createMachine, guards } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
-
 //#region src/anatomy.ts
 const anatomy = createAnatomy("checkbox").parts("root", "label", "control", "indicator");
 const parts = anatomy.build();
-
 //#endregion
 //#region src/dom.ts
 const dom = createScope({
@@ -19,7 +17,6 @@ const dom = createScope({
 	getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
 	getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
 });
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
@@ -45,10 +42,10 @@ function connect(state, send, normalize) {
 		indeterminate,
 		focused,
 		checkedState: state.context.checked,
-		setChecked(checked$1) {
+		setChecked(checked) {
 			send({
 				type: "CHECKED.SET",
-				checked: checked$1,
+				checked,
 				isTrusted: false
 			});
 		},
@@ -146,10 +143,9 @@ function connect(state, send, normalize) {
 						event.preventDefault();
 						return;
 					}
-					const checked$1 = event.currentTarget.checked;
 					send({
 						type: "CHECKED.SET",
-						checked: checked$1,
+						checked: event.currentTarget.indeterminate ? "indeterminate" : event.currentTarget.checked,
 						isTrusted: true
 					});
 				}
@@ -157,7 +153,6 @@ function connect(state, send, normalize) {
 		}
 	};
 }
-
 //#endregion
 //#region src/machine.ts
 const { not } = guards;
@@ -203,6 +198,7 @@ function machine(userContext) {
 			checked: "syncInputElement"
 		},
 		activities: [
+			"trackCanceledInputClick",
 			"trackFormControlState",
 			"trackPressEvent",
 			"trackFocusVisible"
@@ -215,77 +211,91 @@ function machine(userContext) {
 			"CHECKED.SET": [{
 				guard: not("isTrusted"),
 				actions: ["setChecked", "dispatchChangeEvent"]
-			}, { actions: ["setChecked"] }],
+			}, { actions: ["setChecked", "syncInputElement"] }],
 			"CONTEXT.SET": { actions: ["setContext"] }
 		},
 		computed: {
-			isIndeterminate: (ctx$1) => isIndeterminate(ctx$1.checked),
-			isChecked: (ctx$1) => isChecked(ctx$1.checked),
-			isDisabled: (ctx$1) => !!ctx$1.disabled || ctx$1.fieldsetDisabled
+			isIndeterminate: (ctx) => isIndeterminate(ctx.checked),
+			isChecked: (ctx) => isChecked(ctx.checked),
+			isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled
 		},
-		states: { ready: {} }
+		states: { ready: { entry: "syncInputIndeterminate" } }
 	}, {
 		guards: { isTrusted: (_ctx, evt) => !!evt.isTrusted },
 		activities: {
-			trackPressEvent(ctx$1) {
-				if (ctx$1.isDisabled) return;
+			trackCanceledInputClick(ctx) {
+				const input = dom.getHiddenInputEl(ctx);
+				return trackCanceledInputClick(input, (target) => {
+					if (target !== input) return;
+					setElementChecked(target, ctx.isChecked);
+					target.indeterminate = ctx.isIndeterminate;
+				});
+			},
+			trackPressEvent(ctx) {
+				if (ctx.isDisabled) return;
 				return trackPress({
-					pointerNode: dom.getRootEl(ctx$1),
-					keyboardNode: dom.getHiddenInputEl(ctx$1),
+					pointerNode: dom.getRootEl(ctx),
+					keyboardNode: dom.getHiddenInputEl(ctx),
 					isValidKey: (event) => event.key === " ",
-					onPress: () => ctx$1.active = false,
-					onPressStart: () => ctx$1.active = true,
-					onPressEnd: () => ctx$1.active = false
+					onPress: () => ctx.active = false,
+					onPressStart: () => ctx.active = true,
+					onPressEnd: () => ctx.active = false
 				});
 			},
-			trackFocusVisible(ctx$1) {
-				if (ctx$1.isDisabled) return;
-				return trackFocusVisible({ root: dom.getRootNode(ctx$1) });
+			trackFocusVisible(ctx) {
+				if (ctx.isDisabled) return;
+				return trackFocusVisible({ root: dom.getRootNode(ctx) });
 			},
-			trackFormControlState(ctx$1, _evt, { send, initialContext }) {
-				return trackFormControl(dom.getHiddenInputEl(ctx$1), {
+			trackFormControlState(ctx, _evt, { send, initialContext }) {
+				return trackFormControl(dom.getHiddenInputEl(ctx), {
 					onFieldsetDisabledChange(disabled) {
-						ctx$1.fieldsetDisabled = disabled;
+						ctx.fieldsetDisabled = disabled;
 					},
 					onFormReset() {
 						send({
 							type: "CHECKED.SET",
-							checked: !!initialContext.checked
+							checked: initialContext.checked
 						});
 					}
 				});
 			}
 		},
 		actions: {
-			setContext(ctx$1, evt) {
-				Object.assign(ctx$1, evt.context);
+			setContext(ctx, evt) {
+				Object.assign(ctx, evt.context);
+			},
+			syncInputIndeterminate(ctx, evt, { getState }) {
+				const inputEl = dom.getHiddenInputEl(ctx);
+				const state = getState();
+				if (inputEl && state.matches("ready") && state.event === evt) inputEl.indeterminate = ctx.isIndeterminate;
 			},
-			syncInputElement(ctx$1) {
-				const inputEl = dom.getHiddenInputEl(ctx$1);
+			syncInputElement(ctx) {
+				const inputEl = dom.getHiddenInputEl(ctx);
 				if (!inputEl) return;
-				setElementChecked(inputEl, ctx$1.isChecked);
-				inputEl.indeterminate = ctx$1.isIndeterminate;
+				setElementChecked(inputEl, ctx.isChecked);
+				inputEl.indeterminate = ctx.isIndeterminate;
 			},
-			removeFocusIfNeeded(ctx$1) {
-				if (ctx$1.disabled && ctx$1.focused) {
-					ctx$1.focused = false;
-					ctx$1.focusVisible = false;
+			removeFocusIfNeeded(ctx) {
+				if (ctx.disabled && ctx.focused) {
+					ctx.focused = false;
+					ctx.focusVisible = false;
 				}
 			},
-			setChecked(ctx$1, evt) {
-				set.checked(ctx$1, evt.checked);
+			setChecked(ctx, evt) {
+				set.checked(ctx, evt.checked);
 			},
-			toggleChecked(ctx$1) {
-				const checked = isIndeterminate(ctx$1.checked) ? true : !ctx$1.checked;
-				set.checked(ctx$1, checked);
+			toggleChecked(ctx) {
+				const checked = isIndeterminate(ctx.checked) ? true : !ctx.checked;
+				set.checked(ctx, checked);
 			},
-			dispatchChangeEvent(ctx$1) {
-				dispatchInputCheckedEvent(dom.getHiddenInputEl(ctx$1), { checked: isChecked(ctx$1.checked) });
+			dispatchChangeEvent(ctx) {
+				const inputEl = dom.getHiddenInputEl(ctx);
+				if (inputEl) inputEl.indeterminate = ctx.isIndeterminate;
+				dispatchInputCheckedEvent(inputEl, { checked: isChecked(ctx.checked) });
 			}
 		}
 	});
 }
-
 //#endregion
 //#region src/props.ts
 const props = createProps()([
@@ -305,6 +315,5 @@ const props = createProps()([
 	"value"
 ]);
 const splitProps = createSplitProps(props);
-
 //#endregion
-export { anatomy, connect, machine, props, splitProps };
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/checkbox",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "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/dom": "0.2.11",
-    "@destyler/focus-visible": "0.2.11",
-    "@destyler/anatomy": "0.2.11",
-    "@destyler/types": "0.2.11",
-    "@destyler/xstate": "0.2.11",
-    "@destyler/utils": "0.2.11"
+    "@destyler/anatomy": "0.2.13",
+    "@destyler/dom": "0.2.13",
+    "@destyler/focus-visible": "0.2.13",
+    "@destyler/types": "0.2.13",
+    "@destyler/utils": "0.2.13",
+    "@destyler/xstate": "0.2.13"
   },
   "publishConfig": {
     "access": "public"