@zag-js/radio-group 0.82.2 → 1.0.0

package/dist/index.js

@@ -18,87 +18,80 @@ var anatomy = anatomy$1.createAnatomy("radio-group").parts(
   "indicator"
 );
 var parts = anatomy.build();
-var dom = domQuery.createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
-  getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
-  getItemHiddenInputId: (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
-  getItemControlId: (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
-  getItemLabelId: (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
-  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getItemHiddenInputEl: (ctx, value) => dom.getById(ctx, dom.getItemHiddenInputId(ctx, value)),
-  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 ownerId = CSS.escape(dom.getRootId(ctx));
-    const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
-    return domQuery.queryAll(dom.getRootEl(ctx), selector);
-  },
-  getActiveRadioEl: (ctx) => {
-    if (!ctx.value) return;
-    return dom.getById(ctx, dom.getItemId(ctx, ctx.value));
-  },
-  getOffsetRect: (el) => ({
-    left: el?.offsetLeft ?? 0,
-    top: el?.offsetTop ?? 0,
-    width: el?.offsetWidth ?? 0,
-    height: el?.offsetHeight ?? 0
-  }),
-  getRectById: (ctx, id) => {
-    const radioEl = dom.getById(ctx, dom.getItemId(ctx, id));
-    if (!radioEl) return;
-    return dom.resolveRect(dom.getOffsetRect(radioEl));
-  },
-  resolveRect: (rect) => ({
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    left: `${rect.left}px`,
-    top: `${rect.top}px`
-  })
+var getRootId = (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`;
+var getItemHiddenInputId = (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`;
+var getItemControlId = (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`;
+var getItemLabelId = (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getFirstEnabledInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled)");
+var getFirstEnabledAndCheckedInputEl = (ctx) => getRootEl(ctx)?.querySelector("input:not(:disabled):checked");
+var getInputEls = (ctx) => {
+  const ownerId = CSS.escape(getRootId(ctx));
+  const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
+  return domQuery.queryAll(getRootEl(ctx), selector);
+};
+var getRadioEl = (ctx, value) => {
+  if (!value) return;
+  return ctx.getById(getItemId(ctx, value));
+};
+var getOffsetRect = (el) => ({
+  left: el?.offsetLeft ?? 0,
+  top: el?.offsetTop ?? 0,
+  width: el?.offsetWidth ?? 0,
+  height: el?.offsetHeight ?? 0
+});
+var resolveRect = (rect) => ({
+  width: `${rect.width}px`,
+  height: `${rect.height}px`,
+  left: `${rect.left}px`,
+  top: `${rect.top}px`
 });
 
 // src/radio-group.connect.ts
-function connect(state, send, normalize) {
-  const groupDisabled = state.context.isDisabled;
-  const readOnly = state.context.readOnly;
+function connect(service, normalize) {
+  const { context, send, computed, prop, scope } = service;
+  const groupDisabled = computed("isDisabled");
+  const readOnly = prop("readOnly");
   function getItemState(props2) {
     return {
       invalid: !!props2.invalid,
       disabled: !!props2.disabled || groupDisabled,
-      checked: state.context.value === props2.value,
-      focused: state.context.focusedValue === props2.value,
-      hovered: state.context.hoveredValue === props2.value,
-      active: state.context.activeValue === props2.value
+      checked: context.get("value") === props2.value,
+      focused: context.get("focusedValue") === props2.value,
+      hovered: context.get("hoveredValue") === props2.value,
+      active: context.get("activeValue") === props2.value
     };
   }
   function getItemDataAttrs(props2) {
     const radioState = getItemState(props2);
     return {
       "data-focus": domQuery.dataAttr(radioState.focused),
-      "data-focus-visible": domQuery.dataAttr(radioState.focused && state.context.focusVisible),
+      "data-focus-visible": domQuery.dataAttr(radioState.focused && context.get("focusVisible")),
       "data-disabled": domQuery.dataAttr(radioState.disabled),
       "data-readonly": domQuery.dataAttr(readOnly),
       "data-state": radioState.checked ? "checked" : "unchecked",
       "data-hover": domQuery.dataAttr(radioState.hovered),
       "data-invalid": domQuery.dataAttr(radioState.invalid),
-      "data-orientation": state.context.orientation,
-      "data-ssr": domQuery.dataAttr(state.context.ssr)
+      "data-orientation": prop("orientation"),
+      "data-ssr": domQuery.dataAttr(context.get("ssr"))
     };
   }
   const focus = () => {
-    const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
+    const firstEnabledAndCheckedInput = getFirstEnabledAndCheckedInputEl(scope);
     if (firstEnabledAndCheckedInput) {
       firstEnabledAndCheckedInput.focus();
       return;
     }
-    const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
+    const firstEnabledInput = getFirstEnabledInputEl(scope);
     firstEnabledInput?.focus();
   };
   return {
     focus,
-    value: state.context.value,
+    value: context.get("value"),
     setValue(value) {
       send({ type: "SET_VALUE", value, isTrusted: false });
     },
@@ -109,12 +102,12 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.root.attrs,
         role: "radiogroup",
-        id: dom.getRootId(state.context),
-        "aria-labelledby": dom.getLabelId(state.context),
-        "data-orientation": state.context.orientation,
+        id: getRootId(scope),
+        "aria-labelledby": getLabelId(scope),
+        "data-orientation": prop("orientation"),
         "data-disabled": domQuery.dataAttr(groupDisabled),
-        "aria-orientation": state.context.orientation,
-        dir: state.context.dir,
+        "aria-orientation": prop("orientation"),
+        dir: prop("dir"),
         style: {
           position: "relative"
         }
@@ -123,10 +116,10 @@ function connect(state, send, normalize) {
     getLabelProps() {
       return normalize.element({
         ...parts.label.attrs,
-        dir: state.context.dir,
-        "data-orientation": state.context.orientation,
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
         "data-disabled": domQuery.dataAttr(groupDisabled),
-        id: dom.getLabelId(state.context),
+        id: getLabelId(scope),
         onClick: focus
       });
     },
@@ -135,9 +128,9 @@ function connect(state, send, normalize) {
       const itemState = getItemState(props2);
       return normalize.label({
         ...parts.item.attrs,
-        dir: state.context.dir,
-        id: dom.getItemId(state.context, props2.value),
-        htmlFor: dom.getItemHiddenInputId(state.context, props2.value),
+        dir: prop("dir"),
+        id: getItemId(scope, props2.value),
+        htmlFor: getItemHiddenInputId(scope, props2.value),
         ...getItemDataAttrs(props2),
         onPointerMove() {
           if (itemState.disabled) return;
@@ -164,8 +157,8 @@ function connect(state, send, normalize) {
     getItemTextProps(props2) {
       return normalize.element({
         ...parts.itemText.attrs,
-        dir: state.context.dir,
-        id: dom.getItemLabelId(state.context, props2.value),
+        dir: prop("dir"),
+        id: getItemLabelId(scope, props2.value),
         ...getItemDataAttrs(props2)
       });
     },
@@ -173,8 +166,8 @@ function connect(state, send, normalize) {
       const controlState = getItemState(props2);
       return normalize.element({
         ...parts.itemControl.attrs,
-        dir: state.context.dir,
-        id: dom.getItemControlId(state.context, props2.value),
+        dir: prop("dir"),
+        id: getItemControlId(scope, props2.value),
         "data-active": domQuery.dataAttr(controlState.active),
         "aria-hidden": true,
         ...getItemDataAttrs(props2)
@@ -183,11 +176,11 @@ function connect(state, send, normalize) {
     getItemHiddenInputProps(props2) {
       const inputState = getItemState(props2);
       return normalize.input({
-        "data-ownedby": dom.getRootId(state.context),
-        id: dom.getItemHiddenInputId(state.context, props2.value),
+        "data-ownedby": getRootId(scope),
+        id: getItemHiddenInputId(scope, props2.value),
         type: "radio",
-        name: state.context.name || state.context.id,
-        form: state.context.form,
+        name: prop("name") || prop("id"),
+        form: prop("form"),
         value: props2.value,
         onClick(event) {
           if (readOnly) {
@@ -223,178 +216,197 @@ function connect(state, send, normalize) {
       });
     },
     getIndicatorProps() {
+      const rect = context.get("indicatorRect");
       return normalize.element({
-        id: dom.getIndicatorId(state.context),
+        id: getIndicatorId(scope),
         ...parts.indicator.attrs,
-        dir: state.context.dir,
-        hidden: state.context.value == null,
+        dir: prop("dir"),
+        hidden: context.get("value") == null,
         "data-disabled": domQuery.dataAttr(groupDisabled),
-        "data-orientation": state.context.orientation,
+        "data-orientation": prop("orientation"),
         style: {
           "--transition-property": "left, top, width, height",
-          "--left": state.context.indicatorRect?.left,
-          "--top": state.context.indicatorRect?.top,
-          "--width": state.context.indicatorRect?.width,
-          "--height": state.context.indicatorRect?.height,
+          "--left": rect?.left,
+          "--top": rect?.top,
+          "--width": rect?.width,
+          "--height": rect?.height,
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: context.get("canIndicatorTransition") ? "var(--transition-duration, 150ms)" : "0ms",
           transitionTimingFunction: "var(--transition-timing-function)",
-          [state.context.orientation === "horizontal" ? "left" : "top"]: state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)"
+          [prop("orientation") === "horizontal" ? "left" : "top"]: prop("orientation") === "horizontal" ? "var(--left)" : "var(--top)"
         }
       });
     }
   };
 }
-var { not } = core.guards;
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "radio",
-      initial: "idle",
-      context: {
-        value: null,
-        activeValue: null,
-        focusedValue: null,
-        hoveredValue: null,
-        disabled: false,
-        orientation: "vertical",
-        ...ctx,
-        indicatorRect: {},
-        canIndicatorTransition: false,
-        fieldsetDisabled: false,
-        focusVisible: false,
-        ssr: true
-      },
-      computed: {
-        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled
-      },
-      entry: ["syncIndicatorRect", "syncSsr"],
-      exit: ["cleanupObserver"],
-      activities: ["trackFormControlState", "trackFocusVisible"],
-      watch: {
-        value: ["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]
+var { not } = core.createGuards();
+var machine = core.createMachine({
+  props({ props: props2 }) {
+    return {
+      orientation: "vertical",
+      ...props2
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          prop("onValueChange")?.({ value });
+        }
+      })),
+      activeValue: bindable(() => ({
+        defaultValue: null
+      })),
+      focusedValue: bindable(() => ({
+        defaultValue: null
+      })),
+      hoveredValue: bindable(() => ({
+        defaultValue: null
+      })),
+      indicatorRect: bindable(() => ({
+        defaultValue: {}
+      })),
+      canIndicatorTransition: bindable(() => ({
+        defaultValue: false
+      })),
+      fieldsetDisabled: bindable(() => ({
+        defaultValue: false
+      })),
+      focusVisible: bindable(() => ({
+        defaultValue: false
+      })),
+      ssr: bindable(() => ({
+        defaultValue: true
+      }))
+    };
+  },
+  refs() {
+    return {
+      indicatorCleanup: null
+    };
+  },
+  computed: {
+    isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled")
+  },
+  entry: ["syncIndicatorRect", "syncSsr"],
+  exit: ["cleanupObserver"],
+  effects: ["trackFormControlState", "trackFocusVisible"],
+  watch({ track, action, context }) {
+    track([() => context.get("value")], () => {
+      action(["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]);
+    });
+  },
+  on: {
+    SET_VALUE: [
+      {
+        guard: not("isTrusted"),
+        actions: ["setValue", "dispatchChangeEvent"]
       },
-      on: {
-        SET_VALUE: [
-          {
-            guard: not("isTrusted"),
-            actions: ["setValue", "dispatchChangeEvent"]
+      {
+        actions: ["setValue"]
+      }
+    ],
+    SET_HOVERED: {
+      actions: ["setHovered"]
+    },
+    SET_ACTIVE: {
+      actions: ["setActive"]
+    },
+    SET_FOCUSED: {
+      actions: ["setFocused"]
+    }
+  },
+  states: {
+    idle: {}
+  },
+  implementations: {
+    guards: {
+      isTrusted: ({ event }) => !!event.isTrusted
+    },
+    effects: {
+      trackFormControlState({ context, scope }) {
+        return domQuery.trackFormControl(getRootEl(scope), {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
           },
-          {
-            actions: ["setValue"]
+          onFormReset() {
+            context.set("value", context.initial("value"));
           }
-        ],
-        SET_HOVERED: {
-          actions: "setHovered"
-        },
-        SET_ACTIVE: {
-          actions: "setActive"
-        },
-        SET_FOCUSED: {
-          actions: "setFocused"
-        }
+        });
       },
-      states: {
-        idle: {}
+      trackFocusVisible({ scope }) {
+        return focusVisible.trackFocusVisible({ root: scope.getRootNode?.() });
       }
     },
-    {
-      guards: {
-        isTrusted: (_ctx, evt) => !!evt.isTrusted
+    actions: {
+      setValue({ context, event }) {
+        context.set("value", event.value);
       },
-      activities: {
-        trackFormControlState(ctx2, _evt, { send, initialContext }) {
-          return domQuery.trackFormControl(dom.getRootEl(ctx2), {
-            onFieldsetDisabledChange(disabled) {
-              ctx2.fieldsetDisabled = disabled;
-            },
-            onFormReset() {
-              send({ type: "SET_VALUE", value: initialContext.value });
-            }
-          });
-        },
-        trackFocusVisible(ctx2) {
-          return focusVisible.trackFocusVisible({ root: dom.getRootNode(ctx2) });
-        }
+      setHovered({ context, event }) {
+        context.set("hoveredValue", event.value);
       },
-      actions: {
-        setValue(ctx2, evt) {
-          set.value(ctx2, evt.value);
-        },
-        setHovered(ctx2, evt) {
-          ctx2.hoveredValue = evt.value;
-        },
-        setActive(ctx2, evt) {
-          ctx2.activeValue = evt.value;
-        },
-        setFocused(ctx2, evt) {
-          ctx2.focusedValue = evt.value;
-          ctx2.focusVisible = evt.focusVisible;
-        },
-        syncInputElements(ctx2) {
-          const inputs = dom.getInputEls(ctx2);
-          inputs.forEach((input) => {
-            input.checked = input.value === ctx2.value;
-          });
-        },
-        setIndicatorTransition(ctx2) {
-          ctx2.canIndicatorTransition = utils.isString(ctx2.value);
-        },
-        cleanupObserver(ctx2) {
-          ctx2.indicatorCleanup?.();
-        },
-        syncSsr(ctx2) {
-          ctx2.ssr = false;
-        },
-        syncIndicatorRect(ctx2) {
-          ctx2.indicatorCleanup?.();
-          if (!dom.getIndicatorEl(ctx2)) return;
-          const value = ctx2.value;
-          const radioEl = dom.getActiveRadioEl(ctx2);
-          if (value == null || !radioEl) {
-            ctx2.indicatorRect = {};
-            return;
-          }
-          ctx2.indicatorCleanup = elementRect.trackElementRect(radioEl, {
-            getRect(el) {
-              return dom.getOffsetRect(el);
-            },
-            onChange(rect) {
-              ctx2.indicatorRect = dom.resolveRect(rect);
-              domQuery.nextTick(() => {
-                ctx2.canIndicatorTransition = false;
-              });
-            }
-          });
-        },
-        dispatchChangeEvent(ctx2) {
-          const inputEls = dom.getInputEls(ctx2);
-          inputEls.forEach((inputEl) => {
-            const checked = inputEl.value === ctx2.value;
-            if (checked === inputEl.checked) return;
-            domQuery.dispatchInputCheckedEvent(inputEl, { checked });
-          });
+      setActive({ context, event }) {
+        context.set("activeValue", event.value);
+      },
+      setFocused({ context, event }) {
+        context.set("focusedValue", event.value);
+        context.set("focusVisible", event.focusVisible);
+      },
+      syncInputElements({ context, scope }) {
+        const inputs = getInputEls(scope);
+        inputs.forEach((input) => {
+          input.checked = input.value === context.get("value");
+        });
+      },
+      setIndicatorTransition({ context }) {
+        context.set("canIndicatorTransition", utils.isString(context.get("value")));
+      },
+      cleanupObserver({ refs }) {
+        refs.get("indicatorCleanup")?.();
+      },
+      syncSsr({ context }) {
+        context.set("ssr", false);
+      },
+      syncIndicatorRect({ context, scope, refs }) {
+        refs.get("indicatorCleanup")?.();
+        if (!getIndicatorEl(scope)) return;
+        const value = context.get("value");
+        const radioEl = getRadioEl(scope, value);
+        if (value == null || !radioEl) {
+          context.set("indicatorRect", {});
+          return;
         }
+        const indicatorCleanup = elementRect.trackElementRect(radioEl, {
+          getRect(el) {
+            return getOffsetRect(el);
+          },
+          onChange(rect) {
+            context.set("indicatorRect", resolveRect(rect));
+            domQuery.nextTick(() => {
+              context.set("canIndicatorTransition", false);
+            });
+          }
+        });
+        refs.set("indicatorCleanup", indicatorCleanup);
+      },
+      dispatchChangeEvent({ context, scope }) {
+        const inputEls = getInputEls(scope);
+        inputEls.forEach((inputEl) => {
+          const checked = inputEl.value === context.get("value");
+          if (checked === inputEl.checked) return;
+          domQuery.dispatchInputCheckedEvent(inputEl, { checked });
+        });
       }
     }
-  );
-}
-var invoke = {
-  change: (ctx) => {
-    if (ctx.value == null) return;
-    ctx.onValueChange?.({ value: ctx.value });
   }
-};
-var set = {
-  value: (ctx, value) => {
-    if (utils.isEqual(ctx.value, value)) return;
-    ctx.value = value;
-    invoke.change(ctx);
-  }
-};
+});
 var props = types.createProps()([
   "dir",
   "disabled",
@@ -406,7 +418,8 @@ var props = types.createProps()([
   "onValueChange",
   "orientation",
   "readOnly",
-  "value"
+  "value",
+  "defaultValue"
 ]);
 var splitProps = utils.createSplitProps(props);
 var itemProps = types.createProps()(["value", "disabled", "invalid"]);