feat: implement tabs indicator disabled state

Author: isBatak

examples/next-ts/pages/tabs.tsx

@@ -11,7 +11,7 @@ export default function Page() {
 
   const service = useMachine(tabs.machine, {
     id: useId(),
-    defaultValue: "nils",
+    defaultValue: "evelyn",
     ...controls.context,
   })
 
@@ -24,7 +24,11 @@ export default function Page() {
           <div {...api.getIndicatorProps()} />
           <div {...api.getListProps()}>
             {tabsData.map((data) => (
-              <button {...api.getTriggerProps({ value: data.id })} key={data.id} data-testid={`${data.id}-tab`}>
+              <button
+                {...api.getTriggerProps({ value: data.id, disabled: data.disabled })}
+                key={data.id}
+                data-testid={`${data.id}-tab`}
+              >
                 {data.label}
               </button>
             ))}

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

@@ -185,11 +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")
+
       return normalize.element({
         id: dom.getIndicatorId(scope),
         ...parts.indicator.attrs,
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
+        "data-disabled": dataAttr(disabled),
         style: {
           "--transition-property": "left, right, top, bottom, width, height",
           "--left": indicatorRect.left,

packages/machines/tabs/src/tabs.dom.ts

@@ -46,3 +46,8 @@ export const resolveRect = (rect: Record<"width" | "height" | "left" | "top", nu
   left: `${rect.left}px`,
   top: `${rect.top}px`,
 })
+
+export const getIsTriggerDisabled = (ctx: Scope, id: string) => {
+  const el = getTriggerEl(ctx, id)
+  return el?.hasAttribute("disabled") || el?.getAttribute("aria-disabled") === "true"
+}

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

@@ -46,6 +46,7 @@ export const machine = createMachine({
       indicatorRect: bindable(() => ({
         defaultValue: { left: "0px", top: "0px", width: "0px", height: "0px" },
       })),
+      indicatorDisabled: bindable(() => ({ defaultValue: false })),
     }
   },
 
@@ -260,6 +261,7 @@ 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)
@@ -289,6 +291,7 @@ export const machine = createMachine({
           onEntry({ rects }) {
             const [rect] = rects
             context.set("indicatorRect", dom.resolveRect(rect))
+            context.set("indicatorDisabled", dom.getIsTriggerDisabled(scope, value))
           },
         })
 

packages/machines/tabs/src/tabs.types.ts

@@ -108,6 +108,7 @@ export type TabsSchema = {
     focusedValue: string | null
     indicatorTransition: boolean
     indicatorRect: { left: string; top: string; width: string; height: string }
+    indicatorDisabled: boolean
   }
   refs: {
     indicatorCleanup: VoidFunction | null | undefined

shared/src/css/tabs.css

@@ -26,6 +26,10 @@
     background: blue;
     color: white;
   }
+  &[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
 [data-scope="tabs"][data-part="content"] {
@@ -38,6 +42,10 @@
 [data-scope="tabs"][data-part="indicator"] {
   background-color: red;
   z-index: 10;
+
+  &[data-disabled] {
+    opacity: 0.5;
+  }
 }
 
 [data-scope="tabs"][data-part="indicator"][data-orientation="horizontal"] {

shared/src/data.ts

@@ -58,6 +58,17 @@ export const comboboxData = [
 ]
 
 export const tabsData = [
+  {
+    id: "evelyn",
+    label: "Evelyn Glennie",
+    content: `
+    Evelyn Glennie is a Scottish percussionist and composer who has been profoundly deaf since the age of 12. She
+            is known for her ability to feel music through vibrations and has performed internationally, becoming one
+            of the world's leading solo percussionists. Her work has inspired many and challenged perceptions of
+            disability in music.
+    `,
+    disabled: true,
+  },
   {
     id: "nils",
     label: "Nils Frahm",