@destyler/radio 0.2.6-beta.1 → 0.2.7

package/dist/index.d.mts

@@ -1,10 +1,9 @@
-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" | "indicator" | "item" | "itemControl" | "itemText">;
+declare const anatomy: any;
 //#endregion
 //#region src/types.d.ts
 interface ValueChangeDetails {
@@ -25,9 +24,14 @@ interface PublicContext extends DirectionProperty, CommonProperties {
    */
   ids?: ElementIds | undefined;
   /**
-   * The value of the checked radio
+   * The controlled value of the checked radio
    */
-  value: string | null;
+  value?: string | null | undefined;
+  /**
+   * The initial value of the radio group when it is not controlled.
+   * Prefer this over seeding with `value` for uncontrolled usage.
+   */
+  defaultValue?: string | null | undefined;
   /**
    * The name of the input fields in the radio
    * (Useful for form submission).
@@ -190,8 +194,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" | "name" | "form" | "disabled" | "readOnly" | "onValueChange" | "orientation" | "dir" | "id" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "name" | "form" | "disabled" | "readOnly" | "onValueChange" | "orientation" | "dir" | "id" | "getRootNode">];
+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>];
 //#endregion

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { createAnatomy } from "@destyler/anatomy";
 import { createScope, dataAttr, dispatchInputCheckedEvent, nextTick, queryAll, trackFormControl, visuallyHiddenStyle } from "@destyler/dom";
 import { isFocusVisible, trackFocusVisible } from "@destyler/focus-visible";
 import { trackElementRect } from "@destyler/element-rect";
-import { compact, createSplitProps, isEqual, isString } from "@destyler/utils";
+import { compact, createSplitProps, isControlled, isEqual, isPropUserProvided, isString, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 import { createMachine, guards } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
 
@@ -277,34 +277,45 @@ function connect(state, send, normalize) {
 //#endregion
 //#region src/machine.ts
 const { not } = guards;
-const invoke = { change: (ctx) => {
-	if (ctx.value == null) return;
-	ctx.onValueChange?.({ value: ctx.value });
+const invoke = { change: (ctx, value) => {
+	if (value == null) return;
+	ctx.onValueChange?.({ 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: null
+	});
 	return createMachine({
 		id: "radio",
 		initial: "idle",
 		context: {
-			value: null,
 			activeValue: null,
 			focusedValue: null,
 			hoveredValue: null,
 			disabled: false,
 			orientation: "vertical",
-			...compact(userContext),
+			...ctx,
+			value: initialValue,
 			indicatorRect: {},
 			canIndicatorTransition: false,
 			fieldsetDisabled: false,
 			focusVisible: false,
 			ssr: true
 		},
-		computed: { isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled },
+		computed: { isDisabled: (ctx$1) => !!ctx$1.disabled || ctx$1.fieldsetDisabled },
 		entry: ["syncIndicatorRect", "syncSsr"],
 		exit: ["cleanupObserver"],
 		activities: ["trackFormControlState", "trackFocusVisible"],
@@ -326,10 +337,10 @@ function machine(userContext) {
 	}, {
 		guards: { isTrusted: (_ctx, evt) => !!evt.isTrusted },
 		activities: {
-			trackFormControlState(ctx, _evt, { send, initialContext }) {
-				return trackFormControl(dom.getRootEl(ctx), {
+			trackFormControlState(ctx$1, _evt, { send, initialContext }) {
+				return trackFormControl(dom.getRootEl(ctx$1), {
 					onFieldsetDisabledChange(disabled) {
-						ctx.fieldsetDisabled = disabled;
+						ctx$1.fieldsetDisabled = disabled;
 					},
 					onFormReset() {
 						send({
@@ -339,62 +350,62 @@ function machine(userContext) {
 					}
 				});
 			},
-			trackFocusVisible(ctx) {
-				return trackFocusVisible({ root: dom.getRootNode(ctx) });
+			trackFocusVisible(ctx$1) {
+				return trackFocusVisible({ root: dom.getRootNode(ctx$1) });
 			}
 		},
 		actions: {
-			setValue(ctx, evt) {
-				set.value(ctx, evt.value);
+			setValue(ctx$1, evt) {
+				set.value(ctx$1, evt.value);
 			},
-			setHovered(ctx, evt) {
-				ctx.hoveredValue = evt.value;
+			setHovered(ctx$1, evt) {
+				ctx$1.hoveredValue = evt.value;
 			},
-			setActive(ctx, evt) {
-				ctx.activeValue = evt.value;
+			setActive(ctx$1, evt) {
+				ctx$1.activeValue = evt.value;
 			},
-			setFocused(ctx, evt) {
-				ctx.focusedValue = evt.value;
-				ctx.focusVisible = evt.focusVisible;
+			setFocused(ctx$1, evt) {
+				ctx$1.focusedValue = evt.value;
+				ctx$1.focusVisible = evt.focusVisible;
 			},
-			syncInputElements(ctx) {
-				dom.getInputEls(ctx).forEach((input) => {
-					input.checked = input.value === ctx.value;
+			syncInputElements(ctx$1) {
+				dom.getInputEls(ctx$1).forEach((input) => {
+					input.checked = input.value === ctx$1.value;
 				});
 			},
-			setIndicatorTransition(ctx) {
-				ctx.canIndicatorTransition = isString(ctx.value);
+			setIndicatorTransition(ctx$1) {
+				ctx$1.canIndicatorTransition = isString(ctx$1.value);
 			},
-			cleanupObserver(ctx) {
-				ctx.indicatorCleanup?.();
+			cleanupObserver(ctx$1) {
+				ctx$1.indicatorCleanup?.();
 			},
-			syncSsr(ctx) {
-				ctx.ssr = false;
+			syncSsr(ctx$1) {
+				ctx$1.ssr = false;
 			},
-			syncIndicatorRect(ctx) {
-				ctx.indicatorCleanup?.();
-				if (!dom.getIndicatorEl(ctx)) return;
-				const value = ctx.value;
-				const radioEl = dom.getActiveRadioEl(ctx);
+			syncIndicatorRect(ctx$1) {
+				ctx$1.indicatorCleanup?.();
+				if (!dom.getIndicatorEl(ctx$1)) return;
+				const value = ctx$1.value;
+				const radioEl = dom.getActiveRadioEl(ctx$1);
 				if (value == null || !radioEl) {
-					ctx.indicatorRect = {};
+					ctx$1.indicatorRect = {};
 					return;
 				}
-				ctx.indicatorCleanup = trackElementRect(radioEl, {
+				ctx$1.indicatorCleanup = trackElementRect(radioEl, {
 					getRect(el) {
 						return dom.getOffsetRect(el);
 					},
 					onChange(rect) {
-						ctx.indicatorRect = dom.resolveRect(rect);
+						ctx$1.indicatorRect = dom.resolveRect(rect);
 						nextTick(() => {
-							ctx.canIndicatorTransition = false;
+							ctx$1.canIndicatorTransition = false;
 						});
 					}
 				});
 			},
-			dispatchChangeEvent(ctx) {
-				dom.getInputEls(ctx).forEach((inputEl) => {
-					const checked = inputEl.value === ctx.value;
+			dispatchChangeEvent(ctx$1) {
+				dom.getInputEls(ctx$1).forEach((inputEl) => {
+					const checked = inputEl.value === ctx$1.value;
 					if (checked === inputEl.checked) return;
 					dispatchInputCheckedEvent(inputEl, { checked });
 				});
@@ -406,6 +417,7 @@ function machine(userContext) {
 //#endregion
 //#region src/props.ts
 const props = createProps()([
+	"defaultValue",
 	"dir",
 	"disabled",
 	"form",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/radio",
   "type": "module",
-  "version": "0.2.6-beta.1",
+  "version": "0.2.7",
   "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.6-beta.1",
-    "@destyler/dom": "0.2.6-beta.1",
-    "@destyler/focus-visible": "0.2.6-beta.1",
-    "@destyler/utils": "0.2.6-beta.1",
-    "@destyler/element-rect": "0.2.6-beta.1",
-    "@destyler/xstate": "0.2.6-beta.1",
-    "@destyler/types": "0.2.6-beta.1"
+    "@destyler/dom": "0.2.7",
+    "@destyler/anatomy": "0.2.7",
+    "@destyler/focus-visible": "0.2.7",
+    "@destyler/types": "0.2.7",
+    "@destyler/xstate": "0.2.7",
+    "@destyler/utils": "0.2.7",
+    "@destyler/element-rect": "0.2.7"
   },
   "publishConfig": {
     "access": "public"