@zag-js/radio-group/dist/radio-group.machine.mjs

Core logic for the radio group widget implemented as a state machine

// src/radio-group.machine.ts
import { createGuards, createMachine } from "@zag-js/core";
import { dispatchInputCheckedEvent, resizeObserverBorderBox, trackFormControl } from "@zag-js/dom-query";
import { trackFocusVisible } from "@zag-js/focus-visible";
import * as dom from "./radio-group.dom.mjs";
var { not } = createGuards();
var machine = createMachine({
  props({ props }) {
    return {
      orientation: "vertical",
      ...props
    };
  },
  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
      })),
      focusVisibleValue: bindable(() => ({
        defaultValue: null
      })),
      hoveredValue: bindable(() => ({
        defaultValue: null
      })),
      indicatorRect: bindable(() => ({
        defaultValue: null
      })),
      animateIndicator: bindable(() => ({
        defaultValue: false
      })),
      fieldsetDisabled: bindable(() => ({
        defaultValue: false
      })),
      ssr: bindable(() => ({
        defaultValue: true
      }))
    };
  },
  refs() {
    return {
      indicatorCleanup: null,
      focusVisibleValue: null,
      prevValue: null
    };
  },
  computed: {
    isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled")
  },
  entry: ["syncPrevValue", "syncIndicatorRect", "syncSsr"],
  exit: ["cleanupObserver"],
  effects: ["trackFormControlState", "trackFocusVisible"],
  watch({ track, action, context }) {
    track([() => context.get("value")], () => {
      action(["syncIndicatorAnimation", "syncIndicatorRect", "syncInputElements"]);
    });
  },
  on: {
    SET_VALUE: [
      {
        guard: not("isTrusted"),
        actions: ["setValue", "dispatchChangeEvent"]
      },
      {
        actions: ["setValue"]
      }
    ],
    SET_HOVERED: {
      actions: ["setHovered"]
    },
    SET_ACTIVE: {
      actions: ["setActive"]
    },
    SET_FOCUSED: {
      actions: ["setFocused"]
    },
    INDICATOR_TRANSITION_END: {
      actions: ["clearIndicatorAnimation"]
    }
  },
  states: {
    idle: {}
  },
  implementations: {
    guards: {
      isTrusted: ({ event }) => !!event.isTrusted
    },
    effects: {
      trackFormControlState({ context, scope }) {
        return trackFormControl(dom.getRootEl(scope), {
          onFieldsetDisabledChange(disabled) {
            context.set("fieldsetDisabled", disabled);
          },
          onFormReset() {
            context.set("value", context.initial("value"));
          }
        });
      },
      trackFocusVisible({ scope }) {
        return trackFocusVisible({ root: scope.getRootNode?.() });
      }
    },
    actions: {
      setValue({ context, event }) {
        context.set("value", event.value);
      },
      setHovered({ context, event }) {
        context.set("hoveredValue", event.value);
      },
      setActive({ context, event }) {
        context.set("activeValue", event.value);
      },
      setFocused({ context, event }) {
        context.set("focusedValue", event.value);
        const focusVisibleValue = event.value != null && event.focusVisible ? event.value : null;
        context.set("focusVisibleValue", focusVisibleValue);
      },
      syncPrevValue({ context, refs }) {
        refs.set("prevValue", context.get("value"));
      },
      syncIndicatorAnimation({ context, refs }) {
        const prevValue = refs.get("prevValue");
        const nextValue = context.get("value");
        const animate = prevValue != null && nextValue != null && prevValue !== nextValue;
        context.set("animateIndicator", animate);
        refs.set("prevValue", nextValue);
      },
      clearIndicatorAnimation({ context }) {
        context.set("animateIndicator", false);
      },
      syncInputElements({ context, scope }) {
        const inputs = dom.getInputEls(scope);
        inputs.forEach((input) => {
          input.checked = input.value === context.get("value");
        });
      },
      cleanupObserver({ refs }) {
        refs.get("indicatorCleanup")?.();
      },
      syncSsr({ context }) {
        context.set("ssr", false);
      },
      syncIndicatorRect({ context, scope, refs }) {
        refs.get("indicatorCleanup")?.();
        if (!dom.getIndicatorEl(scope)) return;
        const value = context.get("value");
        const radioEl = dom.getRadioEl(scope, value);
        if (value == null || !radioEl) {
          context.set("indicatorRect", null);
          return;
        }
        const exec = () => {
          context.set("indicatorRect", dom.getOffsetRect(radioEl));
        };
        exec();
        const indicatorCleanup = resizeObserverBorderBox.observe(radioEl, exec);
        refs.set("indicatorCleanup", indicatorCleanup);
      },
      dispatchChangeEvent({ context, scope }) {
        const inputEls = dom.getInputEls(scope);
        inputEls.forEach((inputEl) => {
          const checked = inputEl.value === context.get("value");
          if (checked === inputEl.checked) return;
          dispatchInputCheckedEvent(inputEl, { checked });
        });
      }
    }
  }
});
export {
  machine
};