feat(machines): collapsible

.changeset/thin-flies-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/collapsible": minor
+---
+
+Add Collapsible machine

.xstate/collapsible.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _xstate = require("xstate");
+const {
+  actions,
+  createMachine,
+  assign
+} = _xstate;
+const {
+  choose
+} = actions;
+const fetchMachine = createMachine({
+  id: "collapsible",
+  initial: ctx.open ? "open" : "closed",
+  context: {},
+  on: {
+    "CONTEXT.SET": {
+      actions: ["setContext"]
+    }
+  },
+  on: {
+    UPDATE_CONTEXT: {
+      actions: "updateContext"
+    }
+  },
+  states: {
+    closed: {
+      on: {
+        TOGGLE: {
+          target: "open",
+          actions: ["computeHeight", "invokeOnOpen"]
+        },
+        OPEN: {
+          target: "open",
+          actions: ["computeHeight", "invokeOnOpen"]
+        }
+      }
+    },
+    open: {
+      on: {
+        TOGGLE: {
+          target: "closed",
+          actions: ["invokeOnClose"]
+        },
+        CLOSE: {
+          target: "closed",
+          actions: ["invokeOnClose"]
+        }
+      }
+    }
+  }
+}, {
+  actions: {
+    updateContext: assign((context, event) => {
+      return {
+        [event.contextKey]: true
+      };
+    })
+  },
+  guards: {}
+});

e2e/collapsible.e2e.ts

@@ -0,0 +1,64 @@
+import { expect, test, type Page } from "@playwright/test"
+import { a11y, controls, part } from "./_utils"
+
+const root = part("root")
+const trigger = part("trigger")
+const content = part("content")
+
+const expectToBeOpen = async (page: Page) => {
+  await expect(page.locator(root)).toHaveAttribute("data-state", "open")
+  await expect(page.locator(trigger)).toHaveAttribute("data-state", "open")
+  await expect(page.locator(content)).toHaveAttribute("data-state", "open")
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/collapsible")
+})
+
+test("should have no accessibility violation", async ({ page }) => {
+  await a11y(page)
+})
+
+test("should be open when clicked", async ({ page }) => {
+  await page.click(trigger)
+  await expectToBeOpen(page)
+})
+
+test("should be focused when page is tabbed", async ({ page }) => {
+  await page.click("main")
+  await page.keyboard.press("Tab")
+  await expect(page.locator(trigger)).toBeFocused()
+  await expect(page.locator(trigger)).toHaveAttribute("data-focus", "")
+})
+
+test("should be open when spacebar is pressed while focused", async ({ page }) => {
+  await page.click("main")
+  await page.keyboard.press("Tab")
+  await page.keyboard.press(" ")
+  await expectToBeOpen(page)
+})
+
+test("should have disabled attributes when disabled", async ({ page }) => {
+  await controls(page).bool("disabled")
+  await expect(page.locator(trigger)).toHaveAttribute("data-disabled", "")
+  await expect(page.locator(trigger)).toBeDisabled()
+})
+
+test("should not be focusable when disabled", async ({ page }) => {
+  await controls(page).bool("disabled")
+  await page.click("main")
+  await page.keyboard.press("Tab")
+  await expect(page.locator(trigger)).not.toBeFocused()
+})
+
+test("input is not blurred on trigger click", async ({ page }) => {
+  let blurCount = 0
+  await page.exposeFunction("trackBlur", () => blurCount++)
+  await page.locator(trigger).evaluate((input) => {
+    input.addEventListener("blur", (window as any).trackBlur)
+  })
+  await page.click(trigger)
+  await page.click(trigger)
+  await page.click(trigger)
+  expect(blurCount).toBe(0)
+})

examples/next-ts/package.json

@@ -19,6 +19,7 @@
     "@zag-js/avatar": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
+    "@zag-js/collapsible": "workspace:*",
     "@zag-js/collection": "workspace:*",
     "@zag-js/color-picker": "workspace:*",
     "@zag-js/color-utils": "workspace:*",

examples/next-ts/pages/collapsible.tsx

@@ -0,0 +1,51 @@
+import * as collapsible from "@zag-js/collapsible"
+import { normalizeProps, useMachine } from "@zag-js/react"
+import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { useId } from "react"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { useControls } from "../hooks/use-controls"
+
+export default function Page() {
+  const controls = useControls(collapsibleControls)
+
+  const [state, send] = useMachine(collapsible.machine({ id: useId() }), {
+    context: controls.context,
+  })
+
+  const api = collapsible.connect(state, send, normalizeProps)
+
+  return (
+    <>
+      <main className="collapsible">
+        <div {...api.rootProps}>
+          <div>
+            <span>{collapsibleData.headline}</span>
+            <button {...api.triggerProps}>{api.isOpen ? "Collapse" : "Expand"}</button>
+          </div>
+
+          <div>
+            <span>{collapsibleData.visibleItem}</span>
+          </div>
+
+          <div {...api.contentProps}>
+            {collapsibleData.items.map((item) => (
+              <div key={item}>
+                <span>{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          some random text
+          <p>paragraph</p>
+        </div>
+      </main>
+
+      <Toolbar controls={controls.ui}>
+        <StateVisualizer state={state} />
+      </Toolbar>
+    </>
+  )
+}

examples/nuxt-ts/package.json

@@ -18,6 +18,7 @@
     "@zag-js/avatar": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
+    "@zag-js/collapsible": "workspace:*",
     "@zag-js/collection": "workspace:*",
     "@zag-js/color-picker": "workspace:*",
     "@zag-js/color-utils": "workspace:*",

examples/nuxt-ts/pages/collapsible.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import * as collapsible from "@zag-js/collapsible"
+import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+
+const controls = useControls(collapsibleControls)
+
+const [state, send] = useMachine(collapsible.machine({ id: "1" }), {
+  context: controls.context,
+})
+
+const api = computed(() => collapsible.connect(state.value, send, normalizeProps))
+</script>
+
+<template>
+  <main class="collapsible">
+    <div v-bind="api.rootProps">
+      <div>
+        <span>{{ collapsibleData.headline }}</span>
+        <button v-if="api.isOpen" v-bind="api.triggerProps">Collapse</button>
+        <button v-if="!api.isOpen" v-bind="api.triggerProps">Expand</button>
+      </div>
+
+      <div>
+        <span>{{ collapsibleData.visibleItem }}</span>
+      </div>
+
+      <div v-bind="api.contentProps">
+        <div v-for="item in data" :key="item.id">
+          <div>{{ item }}</div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <Toolbar>
+    <StateVisualizer :state="state" />
+    <template #controls>
+      <Controls :config="controls.config" :state="controls.context" />
+    </template>
+  </Toolbar>
+</template>

examples/preact-ts/package.json

@@ -20,6 +20,7 @@
     "@zag-js/avatar": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
+    "@zag-js/collapsible": "workspace:*",
     "@zag-js/collection": "workspace:*",
     "@zag-js/color-picker": "workspace:*",
     "@zag-js/color-utils": "workspace:*",
@@ -84,4 +85,4 @@
     "typescript": "^5.3.3",
     "vite": "^4.3.2"
   }
-}
+}

examples/solid-ts/package.json

@@ -27,6 +27,7 @@
     "@zag-js/avatar": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
+    "@zag-js/collapsible": "workspace:*",
     "@zag-js/collection": "workspace:*",
     "@zag-js/color-picker": "workspace:*",
     "@zag-js/color-utils": "workspace:*",

examples/solid-ts/src/pages/collapsible.tsx

@@ -0,0 +1,42 @@
+import * as collapsible from "@zag-js/collapsible"
+import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/solid"
+import { Index, createMemo, createUniqueId } from "solid-js"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { useControls } from "../hooks/use-controls"
+
+export default function Page() {
+  const controls = useControls(collapsibleControls)
+
+  const [state, send] = useMachine(collapsible.machine({ id: createUniqueId() }), {
+    context: controls.context,
+  })
+
+  const api = createMemo(() => collapsible.connect(state, send, normalizeProps))
+
+  return (
+    <>
+      <main class="collapsible">
+        <div {...api().rootProps}>
+          <div>
+            <span>{collapsibleData.headline}</span>
+            <button {...api().triggerProps}>{api().isOpen ? "Collapse" : "Expand"}</button>
+          </div>
+
+          <div>
+            <span>{collapsibleData.visibleItem}</span>
+          </div>
+
+          <div {...api().contentProps}>
+            <Index each={collapsibleData.items}>{(item) => <div>{item()}</div>}</Index>
+          </div>
+        </div>
+      </main>
+
+      <Toolbar controls={controls.ui}>
+        <StateVisualizer state={state} />
+      </Toolbar>
+    </>
+  )
+}

examples/solid-ts/src/routes.ts

@@ -4,6 +4,7 @@ import { lazy } from "solid-js"
 import Home from "./pages/home"
 
 export const routes: RouteDefinition[] = [
+  { path: "/collapsible", component: lazy(() => import("./pages/collapsible")) },
   { path: "/progress", component: lazy(() => import("./pages/progress")) },
   { path: "/file-upload", component: lazy(() => import("./pages/file-upload")) },
   { path: "/presence", component: lazy(() => import("./pages/presence")) },

examples/vue-ts/package.json

@@ -19,6 +19,7 @@
     "@zag-js/avatar": "workspace:*",
     "@zag-js/carousel": "workspace:*",
     "@zag-js/checkbox": "workspace:*",
+    "@zag-js/collapsible": "workspace:*",
     "@zag-js/collection": "workspace:*",
     "@zag-js/color-picker": "workspace:*",
     "@zag-js/color-utils": "workspace:*",

examples/vue-ts/src/pages/collapsible.tsx

@@ -0,0 +1,53 @@
+import * as collapsible from "@zag-js/collapsible"
+import { collapsibleControls, collapsibleData } from "@zag-js/shared"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+import { computed, defineComponent } from "vue"
+import { StateVisualizer } from "../components/state-visualizer"
+import { Toolbar } from "../components/toolbar"
+import { useControls } from "../hooks/use-controls"
+
+export default defineComponent({
+  name: "collapsible",
+  setup() {
+    const controls = useControls(collapsibleControls)
+
+    const [state, send] = useMachine(collapsible.machine({ id: "1" }), {
+      context: controls.context,
+    })
+
+    const apiRef = computed(() => collapsible.connect(state.value, send, normalizeProps))
+
+    return () => {
+      const api = apiRef.value
+
+      return (
+        <>
+          <main class="collapsible">
+            <div {...api.rootProps}>
+              <div>
+                <span>{collapsibleData.headline}</span>
+                <button {...api.triggerProps}>{api.isOpen ? "Collapse" : "Expand"}</button>
+              </div>
+
+              <div>
+                <span>{collapsibleData.visibleItem}</span>
+              </div>
+
+              <div {...api.contentProps}>
+                {collapsibleData.items.map((item) => (
+                  <div key={item}>
+                    <span>{item}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </main>
+
+          <Toolbar controls={controls.ui}>
+            <StateVisualizer state={state} />
+          </Toolbar>
+        </>
+      )
+    }
+  },
+})

examples/vue-ts/src/routes.ts

@@ -4,6 +4,7 @@ import Home from "./pages/index"
 export const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    { path: "/collapsible", component: () => import("./pages/collapsible") },
     { path: "/progress", component: () => import("./pages/progress") },
     { path: "/file-upload", component: () => import("./pages/file-upload") },
     { path: "/presence", component: () => import("./pages/presence") },