@multiplatform.one/components 7.7.6 → 7.10.0

package/src/views/Kanban.native.tsx

@@ -861,7 +861,7 @@ function KanbanColumnView<T>({
             <XStack alignItems="center" {...knobProps.gap}>
               {itemCount !== undefined && (
                 <Text
-                  color={componentColors.text.muted}
+                  color={knobProps.textAccentColor}
                   {...knobProps.label}
                   {...knobProps.textWeight}
                   data-async-count
@@ -1004,7 +1004,7 @@ function KanbanColumnView<T>({
               justifyContent="center"
             >
               {column.items.length === 0 && (
-                <Text color={componentColors.text.muted} {...knobProps.label}>
+                <Text color={knobProps.textAccentColor} {...knobProps.label}>
                   {t("Drop here")}
                 </Text>
               )}

package/src/views/Kanban.spec.tsx

@@ -72,6 +72,17 @@ describe("Kanban design law (SB-M-302 / LC-60)", () => {
     expect(container.querySelectorAll("[data-kanban-column-stripe]")).toHaveLength(0);
   });
 
+  it("does not leak Card dataSet onto the web card host", () => {
+    const { container } = renderWithProviders(
+      <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />,
+    );
+    const cards = container.querySelectorAll("[data-kanban-card]");
+    expect(cards.length).toBeGreaterThan(0);
+    for (const card of cards) {
+      expect(card.hasAttribute("dataset")).toBe(false);
+    }
+  });
+
   it("lets the radius knob reshape cards and column frames", () => {
     const { rerender } = renderWithProviders(
       <Preset overrides={{ borderRadius: "full" }}>

package/src/views/Kanban.tsx

@@ -1361,7 +1361,7 @@ function KanbanColumnView<T>({
             <XStack alignItems="center" {...knobProps.gap}>
               {itemCount !== undefined && (
                 <Text
-                  color={componentColors.text.muted}
+                  color={knobProps.textAccentColor}
                   {...knobProps.label}
                   {...knobProps.textWeight}
                   data-async-count
@@ -1551,7 +1551,7 @@ function KanbanColumnView<T>({
                 justifyContent="center"
               >
                 {isEmpty && (
-                  <Text color={componentColors.text.muted} {...knobProps.label}>
+                  <Text color={knobProps.textAccentColor} {...knobProps.label}>
                     {t("Drop here")}
                   </Text>
                 )}

package/src/views/ReportBuilder.tsx

@@ -513,7 +513,7 @@ export function ReportBuilder({
             <SortIcon
               size={iconPx}
               weight="bold"
-              color={active ? componentColors.text.primary : componentColors.text.muted}
+              color={active ? componentColors.text.primary : knobProps.textAccentColor}
               opacity={active ? 1 : 0.35}
             />
           </XStack>
@@ -634,7 +634,7 @@ export function ReportBuilder({
           <Text {...knobProps.label} color="$accentColor" numberOfLines={1}>
             {groupByCol?.label ?? groupBy.field}: {groupKey}
           </Text>
-          <Text {...knobProps.label} color={componentColors.text.muted}>
+          <Text {...knobProps.label} color={knobProps.textAccentColor}>
             ({group.rows.length} {group.rows.length === 1 ? t("record") : t("records")})
           </Text>
           <XStack flex={1} />
@@ -902,7 +902,7 @@ export function ReportBuilder({
                 {...knobProps.gapLg}
                 flexWrap="wrap"
               >
-                <Text {...knobProps.label} color={componentColors.text.muted}>
+                <Text {...knobProps.label} color={knobProps.textAccentColor}>
                   {t("Totals")}
                 </Text>
                 {totals.map(({ col, value }) => (
@@ -912,7 +912,7 @@ export function ReportBuilder({
                   </Text>
                 ))}
                 <XStack flex={1} />
-                <Text {...knobProps.label} color={componentColors.text.muted}>
+                <Text {...knobProps.label} color={knobProps.textAccentColor}>
                   {t("{{count}} row(s)", { count: data.length })}
                 </Text>
               </XStack>

package/src/views/TreeView.reveal.spec.tsx

@@ -0,0 +1,167 @@
+import type { TreeViewProps as PublicTreeViewProps } from "@multiplatform.one/components";
+import { act, cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, expectTypeOf, it, vi } from "vitest";
+import { TreeView, type TreeNode, type TreeViewProps } from "./TreeView";
+
+const nodes: TreeNode[] = [
+  {
+    id: "folders",
+    label: "Folders",
+    children: [
+      {
+        id: "archive",
+        label: "Archive",
+        children: [{ id: "item", label: "Item" }],
+      },
+    ],
+  },
+  { id: "other", label: "Other", children: [{ id: "other-item", label: "Other item" }] },
+];
+
+afterEach(cleanup);
+
+describe("TreeView public expansion contract", () => {
+  it("exposes the agreed reveal request through TreeViewProps", () => {
+    expectTypeOf<PublicTreeViewProps>().toEqualTypeOf<TreeViewProps>();
+    expectTypeOf<TreeViewProps["revealRequest"]>().toEqualTypeOf<
+      { id: string; requestId: number } | undefined
+    >();
+    expectTypeOf<TreeViewProps["expandedIds"]>().toEqualTypeOf<string[] | undefined>();
+    expectTypeOf<TreeViewProps["onExpandedIdsChange"]>().toEqualTypeOf<
+      ((ids: string[]) => void) | undefined
+    >();
+  });
+
+  it("waits for controlled expansion to be accepted, overriding initial defaults", () => {
+    const change = vi.fn();
+    const toggle = vi.fn();
+    const props = {
+      nodes,
+      expandedIds: [],
+      defaultExpandedIds: ["folders"],
+      expandByDefault: true,
+      onExpandedIdsChange: change,
+      onNodeToggle: toggle,
+    };
+    const { rerender } = renderWithProviders(<TreeView {...props} />);
+    expect(screen.queryByText("Archive")).toBeNull();
+    fireEvent.click(screen.getByText("Folders"));
+    expect(change).toHaveBeenCalledExactlyOnceWith(["folders"]);
+    expect(toggle).toHaveBeenCalledExactlyOnceWith(nodes[0]);
+    expect(screen.queryByText("Archive")).toBeNull();
+    rerender(<TreeView {...props} expandedIds={["folders"]} />);
+    expect(screen.getByText("Archive")).toBeInTheDocument();
+    expect(change).toHaveBeenCalledTimes(1);
+    rerender(<TreeView {...props} expandedIds={[]} />);
+    expect(screen.queryByText("Archive")).toBeNull();
+    expect(change).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps uncontrolled toggles and their new notification working", () => {
+    const change = vi.fn();
+    renderWithProviders(<TreeView nodes={nodes} onExpandedIdsChange={change} />);
+    fireEvent.click(screen.getByText("Folders"));
+    expect(screen.getByText("Archive")).toBeInTheDocument();
+    expect(change).toHaveBeenNthCalledWith(1, ["folders"]);
+    fireEvent.click(screen.getByText("Folders"));
+    expect(screen.queryByText("Archive")).toBeNull();
+    expect(change).toHaveBeenNthCalledWith(2, []);
+  });
+
+  it("does not expand or select when only selectedId changes", async () => {
+    const change = vi.fn();
+    const select = vi.fn();
+    const { rerender } = renderWithProviders(
+      <TreeView nodes={nodes} onExpandedIdsChange={change} onNodeSelect={select} />,
+    );
+    rerender(
+      <TreeView
+        nodes={nodes}
+        selectedId="item"
+        onExpandedIdsChange={change}
+        onNodeSelect={select}
+      />,
+    );
+    await act(async () => {});
+    expect(screen.queryByText("Item")).toBeNull();
+    expect(change).not.toHaveBeenCalled();
+    expect(select).not.toHaveBeenCalled();
+  });
+});
+
+describe("TreeView reveal expansion", () => {
+  it("merges only ancestors, waits for acceptance, and leaves selection and focus alone", async () => {
+    const change = vi.fn();
+    const select = vi.fn();
+    const toggle = vi.fn();
+    const props = {
+      nodes,
+      expandedIds: ["other"],
+      selectedId: "item",
+      revealRequest: { id: "item", requestId: 1 },
+      onExpandedIdsChange: change,
+      onNodeSelect: select,
+      onNodeToggle: toggle,
+    };
+    const { rerender } = renderWithProviders(<TreeView {...props} />);
+    await waitFor(() =>
+      expect(change).toHaveBeenCalledExactlyOnceWith(["other", "folders", "archive"]),
+    );
+    expect(screen.queryByText("Item")).toBeNull();
+    rerender(<TreeView {...props} expandedIds={["other"]} />);
+    await act(async () => {});
+    expect(change).toHaveBeenCalledTimes(1);
+    rerender(<TreeView {...props} expandedIds={["other", "folders", "archive"]} />);
+    expect(screen.getByText("Item").closest('[role="treeitem"]')).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByText("Other item")).toBeInTheDocument();
+    expect(select).not.toHaveBeenCalled();
+    expect(toggle).not.toHaveBeenCalled();
+    expect(screen.getByRole("tree")).not.toHaveFocus();
+  });
+
+  it("retains a request through missing data and expands after data arrives", async () => {
+    const change = vi.fn();
+    const props = {
+      revealRequest: { id: "item", requestId: 2 },
+      onExpandedIdsChange: change,
+    };
+    const { rerender } = renderWithProviders(<TreeView {...props} nodes={[]} />);
+    await act(async () => {});
+    expect(change).not.toHaveBeenCalled();
+    rerender(<TreeView {...props} nodes={nodes} />);
+    await waitFor(() => expect(screen.getByText("Item")).toBeInTheDocument());
+    expect(change).toHaveBeenCalledExactlyOnceWith(["folders", "archive"]);
+  });
+
+  it("replaces a missing request before its old data arrives", async () => {
+    const change = vi.fn();
+    const { rerender } = renderWithProviders(
+      <TreeView
+        nodes={[]}
+        revealRequest={{ id: "item", requestId: 1 }}
+        onExpandedIdsChange={change}
+      />,
+    );
+    rerender(
+      <TreeView
+        nodes={[]}
+        revealRequest={{ id: "other-item", requestId: 2 }}
+        onExpandedIdsChange={change}
+      />,
+    );
+    rerender(
+      <TreeView
+        nodes={nodes}
+        revealRequest={{ id: "other-item", requestId: 2 }}
+        onExpandedIdsChange={change}
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("Other item")).toBeInTheDocument());
+    expect(screen.queryByText("Archive")).toBeNull();
+    expect(change).toHaveBeenCalledExactlyOnceWith(["other"]);
+  });
+});

package/src/views/TreeView.reveal.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Button } from "@multiplatform.one/forms";
+import { useRef, useState } from "react";
+import { Text, XStack, YStack } from "tamagui";
+import { TreeView, type TreeNode, type TreeViewProps } from "./TreeView";
+
+const folders: TreeNode[] = [
+  {
+    id: "folders",
+    label: "Folders",
+    children: [
+      {
+        id: "archive",
+        label: "Archive",
+        children: Array.from({ length: 500 }, (_, index) => ({
+          id: `item-${index}`,
+          label: `Item ${String(index).padStart(3, "0")}`,
+        })),
+      },
+    ],
+  },
+  { id: "other", label: "Other", children: [{ id: "other-item", label: "Other item" }] },
+];
+
+const meta: Meta<typeof TreeView> = {
+  title: "Components/TreeView",
+  component: TreeView,
+  args: { height: 240, ariaLabel: "Reveal fixture" },
+  parameters: { status: { type: "stable" } },
+};
+export default meta;
+type Story = StoryObj<typeof TreeView>;
+
+function RevealFixture(args: TreeViewProps) {
+  const [nodes, setNodes] = useState(folders);
+  const [expandedIds, setExpandedIds] = useState<string[]>(["other"]);
+  const [selectedId, setSelectedId] = useState<string>();
+  const [revealRequest, setRevealRequest] = useState<TreeViewProps["revealRequest"]>();
+  const [deferExpansion, setDeferExpansion] = useState(false);
+  const [pendingExpansion, setPendingExpansion] = useState<string[]>();
+  const [hidden, setHidden] = useState(false);
+  const sequence = useRef(0);
+  const reveal = (id: string) => {
+    setSelectedId(id);
+    setRevealRequest({ id, requestId: ++sequence.current });
+  };
+  return (
+    <YStack gap="$3" width="100%" maxWidth={700}>
+      <XStack gap="$2" flexWrap="wrap">
+        <Button onPress={() => reveal("item-499")}>Reveal last item</Button>
+        <Button onPress={() => reveal("item-0")}>Reveal first item</Button>
+        <Button onPress={() => reveal("other-item")}>Reveal other item</Button>
+        <Button onPress={() => setSelectedId("item-499")}>Select only</Button>
+        <Button onPress={() => setExpandedIds(["other"])}>Collapse archive</Button>
+      </XStack>
+      <XStack gap="$2" flexWrap="wrap">
+        <Button onPress={() => setNodes([])}>Remove data</Button>
+        <Button onPress={() => setNodes(folders)}>Deliver data</Button>
+        <Button onPress={() => setHidden((value) => !value)}>
+          {hidden ? "Show tree" : "Hide tree"}
+        </Button>
+        <Button onPress={() => setDeferExpansion((value) => !value)}>
+          {deferExpansion ? "Accept expansion immediately" : "Defer expansion"}
+        </Button>
+        {pendingExpansion && (
+          <Button
+            onPress={() => {
+              setExpandedIds(pendingExpansion);
+              setPendingExpansion(undefined);
+            }}
+          >
+            Accept pending expansion
+          </Button>
+        )}
+      </XStack>
+      <Text>500 variable-height items. Request: {revealRequest?.requestId ?? "none"}</Text>
+      <Text>
+        Target: {revealRequest?.id ?? "none"}. Expanded: {expandedIds.join(", ")}
+      </Text>
+      <YStack display={hidden ? "none" : "flex"}>
+        <TreeView
+          {...args}
+          nodes={nodes}
+          expandedIds={expandedIds}
+          onExpandedIdsChange={(ids) => {
+            if (deferExpansion) setPendingExpansion(ids);
+            else setExpandedIds(ids);
+          }}
+          selectedId={selectedId}
+          revealRequest={revealRequest}
+          onNodeSelect={(node) => setSelectedId(node.id)}
+          renderNode={(node) => {
+            const index = Number(node.id.replace("item-", ""));
+            return (
+              <YStack
+                minHeight={Number.isFinite(index) && index % 2 ? 80 : 32}
+                justifyContent="center"
+              >
+                <Text>{node.label}</Text>
+                {Number.isFinite(index) && index % 2 === 1 && (
+                  <Text fontSize="$2">Additional detail</Text>
+                )}
+              </YStack>
+            );
+          }}
+        />
+      </YStack>
+    </YStack>
+  );
+}
+
+export const ControlledReveal: Story = {
+  name: "Controlled reveal with 500 variable-height items",
+  render: (args) => <RevealFixture {...args} />,
+};

package/src/views/TreeView.scroll.spec.tsx

@@ -0,0 +1,196 @@
+import type { FlashListProps, FlashListRef } from "@shopify/flash-list";
+import { act, cleanup, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { TreeView, type TreeNode, type TreeViewProps } from "./TreeView";
+
+const observed = vi.hoisted(() => ({
+  list: null as FlashListRef<unknown> | null,
+  props: null as FlashListProps<unknown> | null,
+}));
+
+// Keep the real list and rows. Happy DOM cannot measure them; only the public
+// geometry/scroll boundary is modeled here. The Storybook fixture needs browser proof.
+vi.mock("@shopify/flash-list", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@shopify/flash-list")>();
+  const React = await import("react");
+  return {
+    ...actual,
+    FlashList: React.forwardRef<FlashListRef<unknown>, FlashListProps<unknown>>((props, ref) => {
+      observed.props = props;
+      const captureRef = React.useCallback(
+        (list: FlashListRef<unknown> | null) => {
+          observed.list = list;
+          if (typeof ref === "function") ref(list);
+          else if (ref) ref.current = list;
+        },
+        [ref],
+      );
+      return React.createElement(actual.FlashList, { ...props, ref: captureRef });
+    }),
+  };
+});
+
+const nodes: TreeNode[] = [
+  {
+    id: "folders",
+    label: "Folders",
+    children: [{ id: "archive", label: "Archive", children: [{ id: "item", label: "Item" }] }],
+  },
+  { id: "other", label: "Other", children: [{ id: "other-item", label: "Other item" }] },
+];
+
+beforeEach(() => {
+  observed.list = null;
+  observed.props = null;
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+async function settle() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  });
+}
+
+function measuredTree(initial: Partial<TreeViewProps> = {}) {
+  const props = { nodes, expandByDefault: true, height: 240, ...initial };
+  const rendered = renderWithProviders(<TreeView {...props} />);
+  expect(observed.list).not.toBeNull();
+  const list = observed.list!;
+  const geometry = { offset: 0, height: 240, width: 320, measured: true, hostVisible: true };
+  vi.spyOn(screen.getByRole("tree"), "getBoundingClientRect").mockImplementation(() => ({
+    width: geometry.hostVisible ? geometry.width : 0,
+    height: geometry.hostVisible ? geometry.height : 0,
+    x: 0,
+    y: 0,
+    top: 0,
+    left: 0,
+    bottom: geometry.height,
+    right: geometry.width,
+    toJSON: () => ({}),
+  }));
+  vi.spyOn(list, "getWindowSize").mockImplementation(() => geometry);
+  vi.spyOn(list, "getFirstItemOffset").mockReturnValue(0);
+  vi.spyOn(list, "getAbsoluteLastScrollOffset").mockImplementation(() => geometry.offset);
+  vi.spyOn(list, "getLayout").mockImplementation((index) => ({
+    x: 0,
+    y: index * 400,
+    width: geometry.width,
+    height: index % 2 ? 32 : 80,
+    isHeightMeasured: geometry.measured,
+    isWidthMeasured: true,
+  }));
+  vi.spyOn(list, "computeVisibleIndices").mockImplementation(() => ({
+    startIndex: Math.floor(geometry.offset / 400),
+    endIndex: Math.floor((geometry.offset + geometry.height) / 400),
+  }));
+  const scroll = vi.spyOn(list, "scrollToOffset").mockImplementation(({ offset }) => {
+    geometry.offset = offset;
+    observed.props?.onScroll?.({ nativeEvent: { contentOffset: { y: offset } } } as never);
+  });
+  const oldScroll = vi.spyOn(list, "scrollToIndex");
+  const commitLayout = () => act(() => observed.props?.onCommitLayoutEffect?.());
+  const rerender = (next: Partial<TreeViewProps>) =>
+    rendered.rerender(<TreeView {...props} {...next} />);
+  return { ...rendered, rerender, geometry, scroll, oldScroll, commitLayout };
+}
+
+describe("TreeView measured reveal scheduling (modeled geometry)", () => {
+  it("scrolls the real mounted target and consumes the request only after measurement", async () => {
+    const tree = measuredTree();
+    tree.geometry.measured = false;
+    tree.rerender({ revealRequest: { id: "item", requestId: 1 }, selectedId: "item" });
+    await waitFor(() => expect(tree.scroll).toHaveBeenCalledWith({ offset: 640, animated: false }));
+    expect(screen.getByText("Item").closest('[role="treeitem"]')).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    tree.geometry.offset = 0;
+    tree.geometry.measured = true;
+    tree.commitLayout();
+    await waitFor(() => expect(tree.scroll).toHaveBeenCalledTimes(2));
+    await settle();
+    tree.geometry.offset = 0;
+    tree.commitLayout();
+    await settle();
+    expect(tree.scroll).toHaveBeenCalledTimes(2);
+    expect(tree.oldScroll).not.toHaveBeenCalled();
+  });
+
+  it("repeats the same target only when requestId changes, without stealing focus", async () => {
+    const tree = measuredTree();
+    tree.rerender({ revealRequest: { id: "item", requestId: 1 } });
+    await waitFor(() => expect(tree.scroll).toHaveBeenCalledTimes(1));
+    await settle();
+    tree.geometry.offset = 0;
+    tree.rerender({ revealRequest: { id: "item", requestId: 1 } });
+    tree.commitLayout();
+    await settle();
+    expect(tree.scroll).toHaveBeenCalledTimes(1);
+    tree.rerender({ revealRequest: { id: "item", requestId: 2 } });
+    await waitFor(() => expect(tree.scroll).toHaveBeenCalledTimes(2));
+    expect(screen.getByRole("tree")).not.toHaveFocus();
+  });
+
+  it("waits for both usable list dimensions and a visible host", async () => {
+    const tree = measuredTree();
+    tree.geometry.height = 0;
+    tree.rerender({ revealRequest: { id: "item", requestId: 1 } });
+    await settle();
+    expect(tree.scroll).not.toHaveBeenCalled();
+    tree.geometry.height = 240;
+    tree.geometry.hostVisible = false;
+    tree.commitLayout();
+    await settle();
+    expect(tree.scroll).not.toHaveBeenCalled();
+    tree.geometry.hostVisible = true;
+    tree.commitLayout();
+    await waitFor(() => expect(tree.scroll).toHaveBeenCalledTimes(1));
+  });
+
+  it("cancels queued A when B supersedes it and never starts an uncancellable index scroll", async () => {
+    const tree = measuredTree();
+    act(() => {
+      tree.rerender({ revealRequest: { id: "item", requestId: 10 } });
+      tree.commitLayout();
+      tree.rerender({ revealRequest: { id: "other-item", requestId: 11 } });
+    });
+    await waitFor(() =>
+      expect(tree.scroll).toHaveBeenCalledExactlyOnceWith({ offset: 1440, animated: false }),
+    );
+    await settle();
+    tree.commitLayout();
+    await settle();
+    expect(tree.scroll).toHaveBeenCalledTimes(1);
+    expect(tree.oldScroll).not.toHaveBeenCalled();
+  });
+
+  it("removing a request cancels its pending scroll", async () => {
+    const tree = measuredTree();
+    tree.geometry.height = 0;
+    tree.rerender({ revealRequest: { id: "item", requestId: 1 } });
+    await settle();
+    tree.rerender({ revealRequest: undefined });
+    tree.geometry.height = 240;
+    tree.commitLayout();
+    await settle();
+    expect(tree.scroll).not.toHaveBeenCalled();
+    tree.rerender({ revealRequest: { id: "item", requestId: 2 } });
+    await waitFor(() => expect(tree.scroll).toHaveBeenCalledTimes(1));
+  });
+
+  it("does not schedule more reveal work while its row refs detach on unmount", async () => {
+    const tree = measuredTree();
+    tree.geometry.height = 0;
+    tree.rerender({ revealRequest: { id: "item", requestId: 1 } });
+    await settle();
+    const frame = vi.spyOn(globalThis, "requestAnimationFrame");
+    tree.unmount();
+    expect(frame).not.toHaveBeenCalled();
+    await settle();
+    expect(tree.scroll).not.toHaveBeenCalled();
+  });
+});

package/src/views/TreeView.spec.tsx

@@ -92,7 +92,7 @@ describe("TreeView knob wiring", () => {
     expect(tree.getAttribute("data-fill")).toBe("transparent");
   });
 
-  it("row labels are T-VALUE primary ink, never componentColors.text.secondary", () => {
+  it("row labels are T-VALUE primary ink, never a secondary ramp step", () => {
     expect(treeViewSource).not.toMatch(/componentColors\.text\.(secondary|muted)/);
     expect(treeViewSource).toMatch(
       /color=\{isSelected && onAccentLabel \? onAccentLabel : "\$color"\}/,