feat: implement radio group indicator disabled

Author: isBatak

examples/next-ts/pages/segment-control.tsx

@@ -1,6 +1,6 @@
 import * as radio from "@zag-js/radio-group"
 import { normalizeProps, useMachine } from "@zag-js/react"
-import { radioControls, radioData } from "@zag-js/shared"
+import { radioControls, segmentControlData } from "@zag-js/shared"
 import { useId } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
@@ -13,6 +13,7 @@ export default function Page() {
     id: useId(),
     name: "fruit",
     orientation: "horizontal",
+    defaultValue: "orange",
     ...controls.context,
   })
 
@@ -23,16 +24,31 @@ export default function Page() {
       <main className="segmented-control">
         <div {...api.getRootProps()}>
           <div {...api.getIndicatorProps()} />
-          {radioData.map((opt) => (
-            <label key={opt.id} data-testid={`radio-${opt.id}`} {...api.getItemProps({ value: opt.id })}>
-              <span data-testid={`label-${opt.id}`} {...api.getItemTextProps({ value: opt.id })}>
+          {segmentControlData.map((opt) => (
+            <label
+              key={opt.id}
+              data-testid={`radio-${opt.id}`}
+              {...api.getItemProps({ value: opt.id, disabled: opt.disabled })}
+            >
+              <span
+                data-testid={`label-${opt.id}`}
+                {...api.getItemTextProps({ value: opt.id, disabled: opt.disabled })}
+              >
                 {opt.label}
               </span>
-              <input data-testid={`input-${opt.id}`} {...api.getItemHiddenInputProps({ value: opt.id })} />
+              <input
+                data-testid={`input-${opt.id}`}
+                {...api.getItemHiddenInputProps({ value: opt.id, disabled: opt.disabled })}
+              />
             </label>
           ))}
         </div>
-        <button onClick={api.clearValue}>reset</button>
+
+        <div style={{ display: "flex", flexDirection: "row" }}>
+          <button onClick={api.clearValue}>Reset</button>
+          <button onClick={() => api.clearValue()}>Clear</button>
+          <button onClick={() => api.setValue("orange")}>Set to Oranges</button>
+        </div>
       </main>
 
       <Toolbar controls={controls.ui}>

packages/machines/radio-group/src/radio-group.connect.ts

@@ -196,12 +196,14 @@ export function connect<T extends PropTypes>(
 
     getIndicatorProps() {
       const rect = context.get("indicatorRect")
+      const disabled = context.get("indicatorDisabled")
+
       return normalize.element({
         id: dom.getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
         hidden: context.get("value") == null,
-        "data-disabled": dataAttr(groupDisabled),
+        "data-disabled": dataAttr(groupDisabled) || dataAttr(disabled),
         "data-orientation": prop("orientation"),
         style: {
           "--transition-property": "left, top, width, height",

packages/machines/radio-group/src/radio-group.dom.ts

@@ -52,3 +52,8 @@ export const resolveRect = (rect: Record<"width" | "height" | "left" | "top", nu
   left: `${rect.left}px`,
   top: `${rect.top}px`,
 })
+
+export const getIsTriggerDisabled = (ctx: Scope, value: string) => {
+  const el = ctx.getById(getItemId(ctx, value))
+  return el?.getAttribute("data-disabled") === ""
+}

packages/machines/radio-group/src/radio-group.machine.ts

@@ -40,6 +40,7 @@ export const machine = createMachine<RadioGroupSchema>({
       indicatorRect: bindable<Partial<IndicatorRect>>(() => ({
         defaultValue: {},
       })),
+      indicatorDisabled: bindable(() => ({ defaultValue: false })),
       canIndicatorTransition: bindable<boolean>(() => ({
         defaultValue: false,
       })),
@@ -62,15 +63,15 @@ export const machine = createMachine<RadioGroupSchema>({
     isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled"),
   },
 
-  entry: ["syncIndicatorRect", "syncSsr"],
+  entry: ["syncIndicatorDisabled", "syncIndicatorRect", "syncSsr"],
 
   exit: ["cleanupObserver"],
 
   effects: ["trackFormControlState", "trackFocusVisible"],
 
   watch({ track, action, context }) {
     track([() => context.get("value")], () => {
-      action(["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"])
+      action(["setIndicatorTransition", "syncIndicatorDisabled", "syncIndicatorRect", "syncInputElements"])
     })
   },
 
@@ -148,6 +149,12 @@ export const machine = createMachine<RadioGroupSchema>({
       syncSsr({ context }) {
         context.set("ssr", false)
       },
+      syncIndicatorDisabled({ context, scope }) {
+        const value = context.get("value")
+        if (value) {
+          context.set("indicatorDisabled", dom.getIsTriggerDisabled(scope, value))
+        }
+      },
       syncIndicatorRect({ context, scope, refs }) {
         refs.get("indicatorCleanup")?.()
 

packages/machines/radio-group/src/radio-group.types.ts

@@ -88,6 +88,10 @@ interface PrivateContext {
    * The active tab indicator's dom rect
    */
   indicatorRect: Partial<IndicatorRect>
+  /**
+   * Whether the active tab indicator is disabled
+   */
+  indicatorDisabled: boolean
   /**
    * Whether the active tab indicator's rect can transition
    */

packages/machines/tabs/src/tabs.connect.ts

@@ -185,14 +185,14 @@ export function connect<T extends PropTypes>(service: Service<TabsSchema>, norma
     getIndicatorProps() {
       const indicatorRect = context.get("indicatorRect")
       const indicatorTransition = context.get("indicatorTransition")
-      const disabled = context.get("indicatorDisabled")
+      const indicatorDisabled = context.get("indicatorDisabled")
 
       return normalize.element({
         id: dom.getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
-        "data-disabled": dataAttr(disabled),
+        "data-disabled": dataAttr(indicatorDisabled),
         style: {
           "--transition-property": "left, right, top, bottom, width, height",
           "--left": indicatorRect.left,

packages/machines/tabs/src/tabs.machine.ts

@@ -52,7 +52,13 @@ export const machine = createMachine({
 
   watch({ context, prop, track, action }) {
     track([() => context.get("value")], () => {
-      action(["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"])
+      action([
+        "allowIndicatorTransition",
+        "syncIndicatorDisabled",
+        "syncIndicatorRect",
+        "syncTabIndex",
+        "navigateIfNeeded",
+      ])
     })
     track([() => prop("dir"), () => prop("orientation")], () => {
       action(["syncIndicatorRect"])
@@ -74,7 +80,7 @@ export const machine = createMachine({
     },
   },
 
-  entry: ["syncIndicatorRect", "syncTabIndex", "syncSsr"],
+  entry: ["syncIndicatorDisabled", "syncIndicatorRect", "syncTabIndex", "syncSsr"],
 
   exit: ["cleanupObserver"],
 
@@ -261,7 +267,6 @@ export const machine = createMachine({
         if (!triggerEl) return
 
         context.set("indicatorRect", dom.getRectById(scope, value))
-        context.set("indicatorDisabled", dom.getIsTriggerDisabled(scope, value))
 
         nextTick(() => {
           context.set("indicatorTransition", false)
@@ -270,6 +275,12 @@ export const machine = createMachine({
       syncSsr({ context }) {
         context.set("ssr", false)
       },
+      syncIndicatorDisabled({ context, scope }) {
+        const value = context.get("value")
+        if (value) {
+          context.set("indicatorDisabled", dom.getIsTriggerDisabled(scope, value))
+        }
+      },
       syncIndicatorRect({ context, refs, scope }) {
         const cleanup = refs.get("indicatorCleanup")
         if (cleanup) cleanup()
@@ -291,7 +302,6 @@ export const machine = createMachine({
           onEntry({ rects }) {
             const [rect] = rects
             context.set("indicatorRect", dom.resolveRect(rect))
-            context.set("indicatorDisabled", dom.getIsTriggerDisabled(scope, value))
           },
         })
 

shared/src/css/segmented-control.css

@@ -11,9 +11,18 @@
   padding: 8px;
   width: 100%;
   text-align: center;
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 
 .segmented-control [data-part="indicator"] {
   width: var(--width);
   height: var(--height);
+
+  &[data-disabled] {
+    opacity: 0.5;
+  }
 }

shared/src/data.ts

@@ -58,6 +58,15 @@ export const comboboxData = [
 ]
 
 export const tabsData = [
+  {
+    id: "nils",
+    label: "Nils Frahm",
+    content: `
+    Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining
+            classical and electronic music and for an unconventional approach to the piano in which he mixes a grand
+            piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.
+    `,
+  },
   {
     id: "evelyn",
     label: "Evelyn Glennie",
@@ -69,15 +78,6 @@ export const tabsData = [
     `,
     disabled: true,
   },
-  {
-    id: "nils",
-    label: "Nils Frahm",
-    content: `
-    Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining
-            classical and electronic music and for an unconventional approach to the piano in which he mixes a grand
-            piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.
-    `,
-  },
   {
     id: "agnes",
     label: "Agnes Obel",
@@ -140,6 +140,13 @@ export const radioData = [
   { id: "grape", label: "Grapes" },
 ]
 
+export const segmentControlData = [
+  { id: "apple", label: "Apples" },
+  { id: "orange", label: "Oranges", disabled: true },
+  { id: "mango", label: "Mangoes" },
+  { id: "grape", label: "Grapes" },
+]
+
 export const carouselData = [
   "https://picsum.photos/seed/a/500/300",
   "https://picsum.photos/seed/b/500/300",