@destyler/radio 0.2.10 → 0.2.12

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" | "label" | "item" | "itemText" | "itemControl" | "indicator">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "label" | "indicator" | "item" | "itemControl" | "itemText">;
 //#endregion
 //#region src/types.d.ts
 interface ValueChangeDetails {
@@ -52,7 +49,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
   readOnly?: boolean | undefined;
   /**
    * Function called once a radio is checked
-   * @param value the value of the checked radio
+   * @param details the value of the checked radio
    */
   onValueChange?: (details: ValueChangeDetails) => void;
   /**
@@ -189,15 +186,15 @@ 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" | "defaultValue" | "name" | "form" | "disabled" | "readOnly" | "onValueChange" | "orientation" | "dir" | "id" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "defaultValue" | "name" | "form" | "disabled" | "readOnly" | "onValueChange" | "orientation" | "dir" | "id" | "getRootNode">];
-declare const itemProps: (keyof ItemProps)[];
-declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+export declare const props: ("value" | "ids" | "defaultValue" | "name" | "form" | "disabled" | "readOnly" | "onValueChange" | "orientation" | "dir" | "id" | "getRootNode")[];
+export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "defaultValue" | "name" | "form" | "disabled" | "readOnly" | "onValueChange" | "orientation" | "dir" | "id" | "getRootNode">];
+export declare const itemProps: (keyof ItemProps)[];
+export declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 //#endregion
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export type { MachineApi as Api, UserDefinedContext as Context, ElementIds, ItemProps, ItemState, Service, ValueChangeDetails };

package/dist/index.mjs

@@ -1,15 +1,13 @@
 import { createAnatomy } from "@destyler/anatomy";
-import { createScope, dataAttr, dispatchInputCheckedEvent, nextTick, queryAll, trackFormControl, visuallyHiddenStyle } from "@destyler/dom";
+import { createScope, dataAttr, dispatchInputCheckedEvent, nextTick, queryAll, trackCanceledInputClick, trackFormControl, visuallyHiddenStyle } from "@destyler/dom";
 import { isFocusVisible, trackFocusVisible } from "@destyler/focus-visible";
 import { trackElementRect } from "@destyler/element-rect";
 import { compact, createSplitProps, isControlled, isEqual, isPropUserProvided, isString, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 import { createMachine, guards } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
-
 //#region src/anatomy.ts
 const anatomy = createAnatomy("radio-group").parts("root", "label", "item", "itemText", "itemControl", "indicator");
 const parts = anatomy.build();
-
 //#endregion
 //#region src/dom.ts
 const dom = createScope({
@@ -25,8 +23,8 @@ const dom = createScope({
 	getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
 	getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
 	getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
-	getInputEls: (ctx) => {
-		const selector = `input[type=radio][data-ownedby='${CSS.escape(dom.getRootId(ctx))}']:not([disabled])`;
+	getInputEls: (ctx, includeDisabled = false) => {
+		const selector = `input[type=radio][data-ownedby='${CSS.escape(dom.getRootId(ctx))}']${includeDisabled ? "" : ":not([disabled])"}`;
 		return queryAll(dom.getRootEl(ctx), selector);
 	},
 	getActiveRadioEl: (ctx) => {
@@ -51,24 +49,23 @@ const dom = createScope({
 		top: `${rect.top}px`
 	})
 });
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
 	const groupDisabled = state.context.isDisabled;
 	const readOnly = state.context.readOnly;
-	function getItemState(props$1) {
+	function getItemState(props) {
 		return {
-			invalid: !!props$1.invalid,
-			disabled: !!props$1.disabled || groupDisabled,
-			checked: state.context.value === props$1.value,
-			focused: state.context.focusedValue === props$1.value,
-			hovered: state.context.hoveredValue === props$1.value,
-			active: state.context.activeValue === props$1.value
+			invalid: !!props.invalid,
+			disabled: !!props.disabled || groupDisabled,
+			checked: state.context.value === props.value,
+			focused: state.context.focusedValue === props.value,
+			hovered: state.context.hoveredValue === props.value,
+			active: state.context.activeValue === props.value
 		};
 	}
-	function getItemDataAttrs(props$1) {
-		const radioState = getItemState(props$1);
+	function getItemDataAttrs(props) {
+		const radioState = getItemState(props);
 		return {
 			"data-focus": dataAttr(radioState.focused),
 			"data-focus-visible": dataAttr(radioState.focused && state.context.focusVisible),
@@ -130,20 +127,20 @@ function connect(state, send, normalize) {
 			});
 		},
 		getItemState,
-		getItemProps(props$1) {
-			const itemState = getItemState(props$1);
+		getItemProps(props) {
+			const itemState = getItemState(props);
 			return normalize.label({
 				...parts.item.attrs,
 				dir: state.context.dir,
-				id: dom.getItemId(state.context, props$1.value),
-				htmlFor: dom.getItemHiddenInputId(state.context, props$1.value),
-				...getItemDataAttrs(props$1),
+				id: dom.getItemId(state.context, props.value),
+				htmlFor: dom.getItemHiddenInputId(state.context, props.value),
+				...getItemDataAttrs(props),
 				onPointerMove() {
 					if (itemState.disabled) return;
 					if (itemState.hovered) return;
 					send({
 						type: "SET_HOVERED",
-						value: props$1.value,
+						value: props.value,
 						hovered: true
 					});
 				},
@@ -159,7 +156,7 @@ function connect(state, send, normalize) {
 					if (itemState.focused && event.pointerType === "mouse") event.preventDefault();
 					send({
 						type: "SET_ACTIVE",
-						value: props$1.value,
+						value: props.value,
 						active: true
 					});
 				},
@@ -172,34 +169,34 @@ function connect(state, send, normalize) {
 				}
 			});
 		},
-		getItemTextProps(props$1) {
+		getItemTextProps(props) {
 			return normalize.element({
 				...parts.itemText.attrs,
 				dir: state.context.dir,
-				id: dom.getItemLabelId(state.context, props$1.value),
-				...getItemDataAttrs(props$1)
+				id: dom.getItemLabelId(state.context, props.value),
+				...getItemDataAttrs(props)
 			});
 		},
-		getItemControlProps(props$1) {
-			const controlState = getItemState(props$1);
+		getItemControlProps(props) {
+			const controlState = getItemState(props);
 			return normalize.element({
 				...parts.itemControl.attrs,
 				"dir": state.context.dir,
-				"id": dom.getItemControlId(state.context, props$1.value),
+				"id": dom.getItemControlId(state.context, props.value),
 				"data-active": dataAttr(controlState.active),
 				"aria-hidden": true,
-				...getItemDataAttrs(props$1)
+				...getItemDataAttrs(props)
 			});
 		},
-		getItemHiddenInputProps(props$1) {
-			const inputState = getItemState(props$1);
+		getItemHiddenInputProps(props) {
+			const inputState = getItemState(props);
 			return normalize.input({
 				"data-ownedby": dom.getRootId(state.context),
-				"id": dom.getItemHiddenInputId(state.context, props$1.value),
+				"id": dom.getItemHiddenInputId(state.context, props.value),
 				"type": "radio",
 				"name": state.context.name || state.context.id,
 				"form": state.context.form,
-				"value": props$1.value,
+				"value": props.value,
 				onClick(event) {
 					if (readOnly) {
 						event.preventDefault();
@@ -207,7 +204,7 @@ function connect(state, send, normalize) {
 					}
 					if (event.currentTarget.checked) send({
 						type: "SET_VALUE",
-						value: props$1.value,
+						value: props.value,
 						isTrusted: true
 					});
 				},
@@ -223,7 +220,7 @@ function connect(state, send, normalize) {
 					const focusVisible = isFocusVisible();
 					send({
 						type: "SET_FOCUSED",
-						value: props$1.value,
+						value: props.value,
 						focused: true,
 						focusVisible
 					});
@@ -232,7 +229,7 @@ function connect(state, send, normalize) {
 					if (event.defaultPrevented) return;
 					if (event.key === " ") send({
 						type: "SET_ACTIVE",
-						value: props$1.value,
+						value: props.value,
 						active: true
 					});
 				},
@@ -273,7 +270,6 @@ function connect(state, send, normalize) {
 		}
 	};
 }
-
 //#endregion
 //#region src/machine.ts
 const { not } = guards;
@@ -315,10 +311,14 @@ function machine(userContext) {
 			focusVisible: false,
 			ssr: true
 		},
-		computed: { isDisabled: (ctx$1) => !!ctx$1.disabled || ctx$1.fieldsetDisabled },
+		computed: { isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled },
 		entry: ["syncIndicatorRect", "syncSsr"],
 		exit: ["cleanupObserver"],
-		activities: ["trackFormControlState", "trackFocusVisible"],
+		activities: [
+			"trackCanceledInputClick",
+			"trackFormControlState",
+			"trackFocusVisible"
+		],
 		watch: { value: [
 			"setIndicatorTransition",
 			"syncIndicatorRect",
@@ -328,7 +328,7 @@ function machine(userContext) {
 			SET_VALUE: [{
 				guard: not("isTrusted"),
 				actions: ["setValue", "dispatchChangeEvent"]
-			}, { actions: ["setValue"] }],
+			}, { actions: ["setValue", "syncInputElements"] }],
 			SET_HOVERED: { actions: "setHovered" },
 			SET_ACTIVE: { actions: "setActive" },
 			SET_FOCUSED: { actions: "setFocused" }
@@ -337,10 +337,19 @@ function machine(userContext) {
 	}, {
 		guards: { isTrusted: (_ctx, evt) => !!evt.isTrusted },
 		activities: {
-			trackFormControlState(ctx$1, _evt, { send, initialContext }) {
-				return trackFormControl(dom.getRootEl(ctx$1), {
+			trackCanceledInputClick(ctx) {
+				const root = dom.getRootEl(ctx);
+				return trackCanceledInputClick(root, (target) => {
+					if (target.getAttribute("data-ownedby") !== dom.getRootId(ctx)) return;
+					(root?.querySelectorAll("input[type=\"radio\"]"))?.forEach((input) => {
+						if (input.getAttribute("data-ownedby") === dom.getRootId(ctx)) input.checked = input.value === ctx.value;
+					});
+				});
+			},
+			trackFormControlState(ctx, _evt, { send, initialContext }) {
+				return trackFormControl(dom.getRootEl(ctx), {
 					onFieldsetDisabledChange(disabled) {
-						ctx$1.fieldsetDisabled = disabled;
+						ctx.fieldsetDisabled = disabled;
 					},
 					onFormReset() {
 						send({
@@ -350,62 +359,62 @@ function machine(userContext) {
 					}
 				});
 			},
-			trackFocusVisible(ctx$1) {
-				return trackFocusVisible({ root: dom.getRootNode(ctx$1) });
+			trackFocusVisible(ctx) {
+				return trackFocusVisible({ root: dom.getRootNode(ctx) });
 			}
 		},
 		actions: {
-			setValue(ctx$1, evt) {
-				set.value(ctx$1, evt.value);
+			setValue(ctx, evt) {
+				set.value(ctx, evt.value);
 			},
-			setHovered(ctx$1, evt) {
-				ctx$1.hoveredValue = evt.value;
+			setHovered(ctx, evt) {
+				ctx.hoveredValue = evt.value;
 			},
-			setActive(ctx$1, evt) {
-				ctx$1.activeValue = evt.value;
+			setActive(ctx, evt) {
+				ctx.activeValue = evt.value;
 			},
-			setFocused(ctx$1, evt) {
-				ctx$1.focusedValue = evt.value;
-				ctx$1.focusVisible = evt.focusVisible;
+			setFocused(ctx, evt) {
+				ctx.focusedValue = evt.value;
+				ctx.focusVisible = evt.focusVisible;
 			},
-			syncInputElements(ctx$1) {
-				dom.getInputEls(ctx$1).forEach((input) => {
-					input.checked = input.value === ctx$1.value;
+			syncInputElements(ctx) {
+				dom.getInputEls(ctx, true).forEach((input) => {
+					input.checked = input.value === ctx.value;
 				});
 			},
-			setIndicatorTransition(ctx$1) {
-				ctx$1.canIndicatorTransition = isString(ctx$1.value);
+			setIndicatorTransition(ctx) {
+				ctx.canIndicatorTransition = isString(ctx.value);
 			},
-			cleanupObserver(ctx$1) {
-				ctx$1.indicatorCleanup?.();
+			cleanupObserver(ctx) {
+				ctx.indicatorCleanup?.();
 			},
-			syncSsr(ctx$1) {
-				ctx$1.ssr = false;
+			syncSsr(ctx) {
+				ctx.ssr = false;
 			},
-			syncIndicatorRect(ctx$1) {
-				ctx$1.indicatorCleanup?.();
-				if (!dom.getIndicatorEl(ctx$1)) return;
-				const value = ctx$1.value;
-				const radioEl = dom.getActiveRadioEl(ctx$1);
+			syncIndicatorRect(ctx) {
+				ctx.indicatorCleanup?.();
+				if (!dom.getIndicatorEl(ctx)) return;
+				const value = ctx.value;
+				const radioEl = dom.getActiveRadioEl(ctx);
 				if (value == null || !radioEl) {
-					ctx$1.indicatorRect = {};
+					ctx.indicatorRect = {};
 					return;
 				}
-				ctx$1.indicatorCleanup = trackElementRect(radioEl, {
+				ctx.indicatorCleanup = trackElementRect(radioEl, {
 					getRect(el) {
 						return dom.getOffsetRect(el);
 					},
 					onChange(rect) {
-						ctx$1.indicatorRect = dom.resolveRect(rect);
+						ctx.indicatorRect = dom.resolveRect(rect);
 						nextTick(() => {
-							ctx$1.canIndicatorTransition = false;
+							ctx.canIndicatorTransition = false;
 						});
 					}
 				});
 			},
-			dispatchChangeEvent(ctx$1) {
-				dom.getInputEls(ctx$1).forEach((inputEl) => {
-					const checked = inputEl.value === ctx$1.value;
+			dispatchChangeEvent(ctx) {
+				dom.getInputEls(ctx).forEach((inputEl) => {
+					const checked = inputEl.value === ctx.value;
 					if (checked === inputEl.checked) return;
 					dispatchInputCheckedEvent(inputEl, { checked });
 				});
@@ -413,7 +422,6 @@ function machine(userContext) {
 		}
 	});
 }
-
 //#endregion
 //#region src/props.ts
 const props = createProps()([
@@ -437,6 +445,5 @@ const itemProps = createProps()([
 	"invalid"
 ]);
 const splitItemProps = createSplitProps(itemProps);
-
 //#endregion
-export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/radio",
   "type": "module",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,13 +22,13 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.10",
-    "@destyler/dom": "0.2.10",
-    "@destyler/element-rect": "0.2.10",
-    "@destyler/focus-visible": "0.2.10",
-    "@destyler/utils": "0.2.10",
-    "@destyler/types": "0.2.10",
-    "@destyler/xstate": "0.2.10"
+    "@destyler/anatomy": "0.2.12",
+    "@destyler/dom": "0.2.12",
+    "@destyler/element-rect": "0.2.12",
+    "@destyler/focus-visible": "0.2.12",
+    "@destyler/types": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@destyler/xstate": "0.2.12"
   },
   "publishConfig": {
     "access": "public"