@charcuterie/ui 4.26.0 → 4.26.2

package/dist/TableViewport/TableViewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableViewport.d.ts","sourceRoot":"","sources":["../../src/TableViewport/TableViewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAMrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,2FAA2F;AAC3F,eAAO,MAAM,aAAa,GAAI,8CAK3B,kBAAkB,KAAG,SAiEvB,CAAA"}
+{"version":3,"file":"TableViewport.d.ts","sourceRoot":"","sources":["../../src/TableViewport/TableViewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAWrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,2FAA2F;AAC3F,eAAO,MAAM,aAAa,GAAI,8CAK3B,kBAAkB,KAAG,SA6IvB,CAAA"}

package/dist/TableViewport/TableViewport.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState, } from "react";
 import { Button } from "../Button/Button.js";
 import { Dialog } from "../Dialog/Dialog.js";
 import { toClassName } from "../toClassName.js";
@@ -9,10 +9,78 @@ export const TableViewport = ({ children, className, columnCount, label, }) => {
     const [inlineHeight, setInlineHeight] = useState(0);
     const scrollRef = useRef(null);
     const scrollPosition = useRef(0);
+    const expansion = useRef(null);
+    const isClosing = useRef(false);
+    useLayoutEffect(() => {
+        // Restore after React has actually returned the table to this pane.
+        // A frame scheduled from the animation's promise can run before that commit
+        // on a busy renderer, when the empty pane clamps scrollLeft back to zero.
+        if (!isExpanded && scrollRef.current)
+            scrollRef.current.scrollLeft = scrollPosition.current;
+    }, [isExpanded]);
+    const animateExpansion = useCallback((node) => {
+        const dialog = node?.closest('[role="dialog"]');
+        if (!dialog ||
+            matchMedia("(prefers-reduced-motion: reduce)")
+                .matches)
+            return;
+        const style = getComputedStyle(dialog);
+        const durationToken = style
+            .getPropertyValue("--duration-slow")
+            .trim();
+        // CSS minifiers can rewrite 320ms to .32s; WAAPI always takes ms.
+        const duration = Number.parseFloat(durationToken) *
+            (durationToken.endsWith("ms")
+                ? 1
+                : durationToken.endsWith("s")
+                    ? 1000
+                    : 0);
+        // Zero-duration profiles (including ePaper) remove motion entirely.
+        if (!(duration > 0))
+            return;
+        const animation = dialog.animate([
+            {
+                opacity: 0,
+                transform: "translateY(0.75rem) scale(0.98)",
+            },
+            { opacity: 1, transform: "none" },
+        ], {
+            duration,
+            easing: style
+                .getPropertyValue("--easing-standard")
+                .trim() || "ease-out",
+            fill: "both",
+        });
+        expansion.current = animation;
+        // Unmounting a document can cancel an unfinished enter or exit.
+        void animation.finished.catch(() => { });
+        return () => {
+            animation.cancel();
+            expansion.current = null;
+        };
+    }, []);
+    const close = () => {
+        if (isClosing.current)
+            return;
+        isClosing.current = true;
+        const finish = () => {
+            setIsExpanded(false);
+            isClosing.current = false;
+        };
+        const animation = expansion.current;
+        if (!animation ||
+            matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            finish();
+            return;
+        }
+        // Reversing also handles Escape during the opening animation without a jump.
+        animation.reverse();
+        void animation.finished.then(finish, () => { });
+    };
     const contentStyle = {
         "--table-min-inline-size": `${Math.max(1, columnCount) * 14}rem`,
     };
-    const content = (_jsx("div", { className: "charcuterie-table-content", style: contentStyle, children: children }));
+    const content = (_jsx("div", { className: "charcuterie-table-content", ref: isExpanded ? animateExpansion : undefined, style: contentStyle, children: children }));
     return (_jsxs("div", { className: toClassName("min-w-0", className), children: [_jsx("div", { className: "flex items-center justify-end border border-border-subtle bg-surface-raised p-2", children: _jsx(Button, { appearance: "ghost", intent: "neutral", size: "sm", onClick: () => {
                         const pane = scrollRef.current;
                         setInlineHeight(pane?.getBoundingClientRect().height ?? 0);
@@ -20,13 +88,6 @@ export const TableViewport = ({ children, className, columnCount, label, }) => {
                         setIsExpanded(true);
                     }, children: "Expand table" }) }), _jsx("section", { "aria-label": label, className: "charcuterie-scrollbar charcuterie-table-scroll border border-border-subtle border-t-0", ref: scrollRef, 
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: horizontal scroll must be reachable by keyboard
-                tabIndex: 0, style: isExpanded ? { height: inlineHeight } : undefined, children: isExpanded ? null : content }), _jsx(Dialog, { heading: label, isVisible: isExpanded, size: "full", onClose: () => {
-                    setIsExpanded(false);
-                    requestAnimationFrame(() => {
-                        if (scrollRef.current)
-                            scrollRef.current.scrollLeft =
-                                scrollPosition.current;
-                    });
-                }, children: isExpanded ? content : null })] }));
+                tabIndex: 0, style: isExpanded ? { height: inlineHeight } : undefined, children: isExpanded ? null : content }), _jsx(Dialog, { heading: label, isVisible: isExpanded, size: "full", onClose: close, children: isExpanded ? content : null })] }));
 };
 //# sourceMappingURL=TableViewport.js.map

package/dist/TableViewport/TableViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableViewport.js","sourceRoot":"","sources":["../../src/TableViewport/TableViewport.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAU/C,2FAA2F;AAC3F,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,GACc,EAAa,EAAE;IAClC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACnD,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAC3C,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAChC,MAAM,YAAY,GAAG;QACnB,yBAAyB,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG,EAAE,KAAK;KAChD,CAAA;IAClB,MAAM,OAAO,GAAG,CACd,cACE,SAAS,EAAC,2BAA2B,EACrC,KAAK,EAAE,YAAY,YAElB,QAAQ,GACL,CACP,CAAA;IAED,OAAO,CACL,eAAK,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,aAC/C,cAAK,SAAS,EAAC,iFAAiF,YAC9F,KAAC,MAAM,IACL,UAAU,EAAC,OAAO,EAClB,MAAM,EAAC,SAAS,EAChB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;wBACZ,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAA;wBAC9B,eAAe,CACb,IAAI,EAAE,qBAAqB,EAAE,CAAC,MAAM,IAAI,CAAC,CAC1C,CAAA;wBACD,cAAc,CAAC,OAAO,GAAG,IAAI,EAAE,UAAU,IAAI,CAAC,CAAA;wBAC9C,aAAa,CAAC,IAAI,CAAC,CAAA;oBACrB,CAAC,6BAGM,GACL,EACN,gCACc,KAAK,EACjB,SAAS,EAAC,uFAAuF,EACjG,GAAG,EAAE,SAAS;gBACd,mGAAmG;gBACnG,QAAQ,EAAE,CAAC,EACX,KAAK,EACH,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,YAGlD,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,GACpB,EACV,KAAC,MAAM,IACL,OAAO,EAAE,KAAK,EACd,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE;oBACZ,aAAa,CAAC,KAAK,CAAC,CAAA;oBACpB,qBAAqB,CAAC,GAAG,EAAE;wBACzB,IAAI,SAAS,CAAC,OAAO;4BACnB,SAAS,CAAC,OAAO,CAAC,UAAU;gCAC1B,cAAc,CAAC,OAAO,CAAA;oBAC5B,CAAC,CAAC,CAAA;gBACJ,CAAC,YAEA,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,GACrB,IACL,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TableViewport.js","sourceRoot":"","sources":["../../src/TableViewport/TableViewport.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.26.0",
+  "version": "4.26.2",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/TableViewport/TableViewport.mdx

@@ -10,6 +10,8 @@ its rows and uses the page's vertical scroll. Expand table opens a full-window `
 The dialog body is the only scroll surface; headers and the first column stay visible.
 Escape and Close return focus to the trigger. Only one table is mounted, so links and IDs
 are never duplicated. The inline height and horizontal position survive expansion.
+Expansion fades and zooms in; dismissal reverses the animation before returning to the
+document. Reduced-motion and zero-duration profiles skip the animation.
 
 Apps provide the semantic table, its column count, and its accessible label. Sanitizing
 Markdown HTML and delegating document links remain the app's responsibilities. Use

package/src/TableViewport/TableViewport.test.tsx

@@ -1,6 +1,6 @@
 import { composeStories } from "@storybook/react"
 import { expect, userEvent, waitFor } from "storybook/test"
-import { test } from "vitest"
+import { test, vi } from "vitest"
 import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
 import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
@@ -8,6 +8,53 @@ import * as stories from "./TableViewport.stories.tsx"
 
 const { Interactive } = composeStories(stories)
 
+test.each([
+  ["320ms", 320],
+  ["0.32s", 320],
+  ["0ms", 0],
+  ["0s", 0],
+] as const)(
+  "uses the CSS time unit in %s",
+  async (token, duration) => {
+    const style = document.documentElement.style
+    const previous = style.getPropertyValue(
+      "--duration-slow",
+    )
+    style.setProperty("--duration-slow", token)
+    try {
+      const { body, canvas } = await mountStory(Interactive)
+      await userEvent.click(
+        canvas.getByRole("button", {
+          name: "Expand table",
+        }),
+      )
+      const dialog = body.getByRole("dialog", {
+        name: "Printer comparison",
+      })
+      const [animation] = dialog.getAnimations()
+      if (duration > 0) {
+        await expect(
+          animation.effect?.getTiming().duration,
+        ).toBe(duration)
+        animation.finish()
+      } else {
+        await expect(animation).toBeUndefined()
+      }
+      await userEvent.click(
+        body.getByRole("button", { name: "Close" }),
+      )
+      if (animation) animation.finish()
+      await waitFor(() =>
+        expect(body.queryByRole("dialog")).toBeNull(),
+      )
+    } finally {
+      if (previous)
+        style.setProperty("--duration-slow", previous)
+      else style.removeProperty("--duration-slow")
+    }
+  },
+)
+
 test("long inline comparisons grow with the page and expand without duplicate tables", async () => {
   const { body, canvas } = await mountStory(Interactive)
   const pane = expectAgentDrivable(canvas, {
@@ -26,6 +73,8 @@ test("long inline comparisons grow with the page and expand without duplicate ta
     role: "dialog",
     name: "Printer comparison",
   })
+  for (const animation of dialog.getAnimations())
+    animation.finish()
   await expect(
     document.querySelectorAll("table").length,
   ).toBe(1)
@@ -56,3 +105,89 @@ test("long inline comparisons grow with the page and expand without duplicate ta
     canvas.getByRole("table"),
   ).toBeInTheDocument()
 })
+
+test("keeps the table and focus trap until the reverse animation completes", async () => {
+  const { body, canvas } = await mountStory(Interactive)
+  const trigger = canvas.getByRole("button", {
+    name: "Expand table",
+  })
+  const pane = canvas.getByRole("region", {
+    name: "Printer comparison",
+  })
+  pane.scrollLeft = 120
+  const scrollLeft = pane.scrollLeft
+  const height = pane.getBoundingClientRect().height
+  await userEvent.click(trigger)
+  const dialog = body.getByRole("dialog", {
+    name: "Printer comparison",
+  })
+  const [animation] = dialog.getAnimations()
+  await expect(animation).toBeDefined()
+  animation.pause()
+  animation.currentTime =
+    Number(animation.effect?.getTiming().duration) / 2
+  await expect(
+    Number(getComputedStyle(dialog).opacity),
+  ).toBeGreaterThan(0)
+  await expect(
+    Number(getComputedStyle(dialog).opacity),
+  ).toBeLessThan(1)
+  await expect(pane.getBoundingClientRect().height).toBe(
+    height,
+  )
+  await userEvent.keyboard("{Escape}")
+  await animation.ready
+  animation.pause()
+  await expect(animation.playbackRate).toBe(-1)
+  await expect(body.getByRole("dialog")).toBe(dialog)
+  await expect(
+    document.querySelectorAll("table"),
+  ).toHaveLength(1)
+  // A second dismiss during exit must not reverse back into an opening.
+  await userEvent.click(
+    body.getByRole("button", { name: "Close" }),
+  )
+  await expect(animation.playbackRate).toBe(-1)
+  animation.finish()
+  await waitFor(() =>
+    expect(body.queryByRole("dialog")).toBeNull(),
+  )
+  await waitFor(() =>
+    expect(document.activeElement).toBe(trigger),
+  )
+  await waitFor(() =>
+    expect(pane.scrollLeft).toBe(scrollLeft),
+  )
+  await expect(
+    canvas.getByRole("table"),
+  ).toBeInTheDocument()
+})
+
+test("reduced motion opens and closes immediately without a table animation", async () => {
+  const { body, canvas } = await mountStory(Interactive)
+  const matchMedia = window.matchMedia.bind(window)
+  const media = vi
+    .spyOn(window, "matchMedia")
+    .mockImplementation((query) =>
+      query === "(prefers-reduced-motion: reduce)"
+        ? { ...matchMedia(query), matches: true }
+        : matchMedia(query),
+    )
+  try {
+    await userEvent.click(
+      canvas.getByRole("button", { name: "Expand table" }),
+    )
+    const dialog = body.getByRole("dialog", {
+      name: "Printer comparison",
+    })
+    await expect(dialog.getAnimations()).toHaveLength(0)
+    await userEvent.click(
+      body.getByRole("button", { name: "Close" }),
+    )
+    await waitFor(() =>
+      expect(body.queryByRole("dialog")).toBeNull(),
+    )
+  } finally {
+    media.mockRestore()
+  }
+})

package/src/TableViewport/TableViewport.tsx

@@ -1,5 +1,10 @@
 import type { CSSProperties, ReactNode } from "react"
-import { useRef, useState } from "react"
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react"
 import { Button } from "../Button/Button.tsx"
 import { Dialog } from "../Dialog/Dialog.tsx"
 import { toClassName } from "../toClassName.ts"
@@ -23,12 +28,95 @@ export const TableViewport = ({
   const [inlineHeight, setInlineHeight] = useState(0)
   const scrollRef = useRef<HTMLElement>(null)
   const scrollPosition = useRef(0)
+  const expansion = useRef<Animation | null>(null)
+  const isClosing = useRef(false)
+  useLayoutEffect(() => {
+    // Restore after React has actually returned the table to this pane.
+    // A frame scheduled from the animation's promise can run before that commit
+    // on a busy renderer, when the empty pane clamps scrollLeft back to zero.
+    if (!isExpanded && scrollRef.current)
+      scrollRef.current.scrollLeft = scrollPosition.current
+  }, [isExpanded])
+  const animateExpansion = useCallback(
+    (node: HTMLDivElement | null) => {
+      const dialog = node?.closest<HTMLElement>(
+        '[role="dialog"]',
+      )
+      if (
+        !dialog ||
+        matchMedia("(prefers-reduced-motion: reduce)")
+          .matches
+      )
+        return
+
+      const style = getComputedStyle(dialog)
+      const durationToken = style
+        .getPropertyValue("--duration-slow")
+        .trim()
+      // CSS minifiers can rewrite 320ms to .32s; WAAPI always takes ms.
+      const duration =
+        Number.parseFloat(durationToken) *
+        (durationToken.endsWith("ms")
+          ? 1
+          : durationToken.endsWith("s")
+            ? 1000
+            : 0)
+      // Zero-duration profiles (including ePaper) remove motion entirely.
+      if (!(duration > 0)) return
+
+      const animation = dialog.animate(
+        [
+          {
+            opacity: 0,
+            transform: "translateY(0.75rem) scale(0.98)",
+          },
+          { opacity: 1, transform: "none" },
+        ],
+        {
+          duration,
+          easing:
+            style
+              .getPropertyValue("--easing-standard")
+              .trim() || "ease-out",
+          fill: "both",
+        },
+      )
+      expansion.current = animation
+      // Unmounting a document can cancel an unfinished enter or exit.
+      void animation.finished.catch(() => {})
+      return () => {
+        animation.cancel()
+        expansion.current = null
+      }
+    },
+    [],
+  )
+  const close = () => {
+    if (isClosing.current) return
+    isClosing.current = true
+    const finish = () => {
+      setIsExpanded(false)
+      isClosing.current = false
+    }
+    const animation = expansion.current
+    if (
+      !animation ||
+      matchMedia("(prefers-reduced-motion: reduce)").matches
+    ) {
+      finish()
+      return
+    }
+    // Reversing also handles Escape during the opening animation without a jump.
+    animation.reverse()
+    void animation.finished.then(finish, () => {})
+  }
   const contentStyle = {
     "--table-min-inline-size": `${Math.max(1, columnCount) * 14}rem`,
   } as CSSProperties
   const content = (
     <div
       className="charcuterie-table-content"
+      ref={isExpanded ? animateExpansion : undefined}
       style={contentStyle}
     >
       {children}
@@ -70,14 +158,7 @@ export const TableViewport = ({
         heading={label}
         isVisible={isExpanded}
         size="full"
-        onClose={() => {
-          setIsExpanded(false)
-          requestAnimationFrame(() => {
-            if (scrollRef.current)
-              scrollRef.current.scrollLeft =
-                scrollPosition.current
-          })
-        }}
+        onClose={close}
       >
         {isExpanded ? content : null}
       </Dialog>