@multiplatform.one/components 7.4.1 → 7.6.0

package/src/views/TreeView.spec.tsx

@@ -0,0 +1,113 @@
+/**
+ * TreeView — design-law 100% (MPO-60). Size/space/type ride shared knobs;
+ * Home/End and selection are APG tree semantics; empty is EmptyState.
+ */
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { defaultKnobs, Preset, resolveKnobs } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
+import { TreeView, type TreeNode } from "./TreeView";
+import { treeDefaultHeight, treeIndentStep } from "./treeViewLayout";
+
+afterEach(cleanup);
+
+const nodes: TreeNode[] = [
+  {
+    id: "root",
+    label: "Root Node",
+    children: [
+      { id: "child-1", label: "Child 1" },
+      {
+        id: "child-2",
+        label: "Child 2",
+        children: [{ id: "grandchild", label: "Grandchild" }],
+      },
+    ],
+  },
+  { id: "root-2", label: "Root 2" },
+];
+
+describe("TreeView named exports", () => {
+  it("exports TreeView as a named function", () => {
+    expect(typeof TreeView).toBe("function");
+    expect(TreeView.name).toBe("TreeView");
+  });
+});
+
+describe("TreeView knob wiring", () => {
+  it("publishes nestedControl px, indent step, and space on the tree", () => {
+    const { knobProps } = resolveKnobs(defaultKnobs);
+    renderWithProviders(
+      <TreeView nodes={nodes} expandByDefault ariaLabel="Knob tree" height={400} />,
+    );
+    const tree = screen.getByRole("tree");
+    expect(tree.getAttribute("data-nested-px")).toBe(String(knobProps.nestedControl.px));
+    expect(tree.getAttribute("data-indent-step")).toBe(
+      String(treeIndentStep(knobProps.nestedControl.px)),
+    );
+    expect(tree.getAttribute("data-space")).toBe(knobProps.space);
+    expect(tree.getAttribute("data-size")).toBe(knobProps.size);
+  });
+
+  it("default viewport follows nestedControl when height is omitted", () => {
+    const nestedPx = resolveKnobs(defaultKnobs).knobProps.nestedControl.px;
+    renderWithProviders(<TreeView nodes={nodes} ariaLabel="Hug tree" />);
+    const tree = screen.getByRole("tree");
+    expect(tree.getAttribute("data-viewport-height")).toBe(String(treeDefaultHeight(nestedPx)));
+  });
+
+  it("compact display steps space (LC-76) without a private compressed pad table", () => {
+    renderWithProviders(
+      <Preset cascade={false} overrides={{ space: "medium" }}>
+        <TreeView
+          nodes={nodes}
+          display="compressed"
+          expandByDefault
+          ariaLabel="Compact tree"
+          height={280}
+        />
+      </Preset>,
+    );
+    const tree = screen.getByRole("tree");
+    expect(tree.getAttribute("data-space")).toBe("small");
+    expect(tree.getAttribute("data-size")).toBe("medium");
+  });
+});
+
+describe("TreeView selection and keyboard", () => {
+  it("marks selectedId with aria-selected", () => {
+    renderWithProviders(
+      <TreeView
+        nodes={nodes}
+        defaultExpandedIds={["root"]}
+        selectedId="child-1"
+        ariaLabel="Selection tree"
+        height={400}
+      />,
+    );
+    const selected = screen.getByText("Child 1").closest('[role="treeitem"]');
+    expect(selected).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("Home focuses the first row and End the last", () => {
+    renderWithProviders(
+      <TreeView nodes={nodes} expandByDefault ariaLabel="Home end tree" height={400} />,
+    );
+    const tree = screen.getByRole("tree");
+    tree.focus();
+    fireEvent.keyDown(tree, { key: "Home" });
+    expect(screen.getByText("Root Node").closest("[data-focused]")).toBeTruthy();
+    fireEvent.keyDown(tree, { key: "End" });
+    expect(screen.getByText("Root 2").closest("[data-focused]")).toBeTruthy();
+  });
+});
+
+describe("TreeView empty", () => {
+  it("renders EmptyState for an empty node list (Axiom 6: empty ≠ error)", () => {
+    renderWithProviders(
+      <TreeView nodes={[]} ariaLabel="Empty tree" emptyMessage="No files found" />,
+    );
+    expect(screen.getByText("No files found")).toBeInTheDocument();
+    expect(screen.queryByRole("tree")).toBeNull();
+  });
+});

package/src/views/TreeView.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta } from "@storybook/react-native-web-vite";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { TreeView, type TreeNode } from "./TreeView";
+import { TreeView, type TreeNode, type TreeViewProps } from "./TreeView";
 import { applyTreeMove } from "./treeViewDnd";
 
 const nodes: TreeNode[] = [
@@ -41,73 +41,104 @@ const nodes: TreeNode[] = [
   { id: "package", label: "package.json" },
 ];
 
-const meta: Meta = {
+const deepNodes: TreeNode[] = [
+  {
+    id: "a",
+    label: "workspace",
+    children: [
+      {
+        id: "b",
+        label: "packages",
+        children: [
+          {
+            id: "c",
+            label: "components",
+            children: [
+              {
+                id: "d",
+                label: "src",
+                children: [{ id: "e", label: "TreeView.tsx" }],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const longLabelNodes: TreeNode[] = [
+  {
+    id: "long",
+    label:
+      "A very long tree label that must truncate instead of blowing the row (LC-10 frame containment)",
+    children: [
+      {
+        id: "long-child",
+        label: "another-extremely-long-filename-that-should-ellipsis.tsx",
+      },
+    ],
+  },
+];
+
+const meta: Meta<typeof TreeView> = {
   title: "Components/TreeView",
+  component: TreeView,
+  args: {
+    nodes,
+    ariaLabel: "Project files",
+    height: 400,
+    defaultExpandedIds: ["src", "components"],
+  },
   parameters: {
     status: { type: "stable" },
   },
 };
-
 export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof TreeView>;
+
+function SelectableTree(args: TreeViewProps) {
+  const [selectedId, setSelectedId] = useState<string | undefined>(args.selectedId ?? "button");
+  return (
+    <YStack height={(args.height as number | undefined) ? Number(args.height) + 20 : 420}>
+      <TreeView
+        {...args}
+        selectedId={selectedId}
+        onNodeSelect={(node) => {
+          setSelectedId(node.id);
+          args.onNodeSelect?.(node);
+        }}
+      />
+    </YStack>
+  );
+}
+
+export const Default: Story = {
   name: "Main",
-  render: () => {
-    const [selectedId, setSelectedId] = useState<string | undefined>("button");
-    return (
-      <YStack height={420}>
-        <TreeView
-          nodes={nodes}
-          ariaLabel="Project files"
-          selectedId={selectedId}
-          defaultExpandedIds={["src", "components"]}
-          onNodeSelect={(node) => setSelectedId(node.id)}
-          height={400}
-        />
-      </YStack>
-    );
-  },
+  args: { selectedId: "button" },
+  render: (args) => <SelectableTree {...args} />,
 };
 
-export const Compressed = {
+export const Compressed: Story = {
   name: "Compressed",
-  render: () => {
-    const [selectedId, setSelectedId] = useState<string | undefined>();
-    return (
-      <YStack height={420}>
-        <TreeView
-          nodes={nodes}
-          ariaLabel="Compressed project files"
-          display="compressed"
-          showExpansionArrows
-          selectedId={selectedId}
-          defaultExpandedIds={["src", "components"]}
-          onNodeSelect={(node) => setSelectedId(node.id)}
-          height={400}
-        />
-      </YStack>
-    );
+  args: {
+    display: "compressed",
+    showExpansionArrows: true,
+    selectedId: undefined,
   },
+  render: (args) => <SelectableTree {...args} />,
 };
 
-export const ExpandByDefault = {
+export const ExpandByDefault: Story = {
   name: "Expand By Default",
-  render: () => {
-    const [selectedId, setSelectedId] = useState<string | undefined>();
-    return (
-      <YStack height={480}>
-        <TreeView
-          nodes={nodes}
-          ariaLabel="Fully expanded project files"
-          expandByDefault
-          showExpansionArrows
-          selectedId={selectedId}
-          onNodeSelect={(node) => setSelectedId(node.id)}
-          height={460}
-        />
-      </YStack>
-    );
+  args: {
+    expandByDefault: true,
+    showExpansionArrows: true,
+    defaultExpandedIds: undefined,
+    height: 460,
   },
+  render: (args) => <SelectableTree {...args} />,
 };
 
 /**
@@ -117,21 +148,20 @@ export const ExpandByDefault = {
  * sibling, left un-nests), Space drops, Escape cancels — with aria-live
  * position announcements. `applyTreeMove` applies the callback payload.
  */
-export const Reorder = {
+export const Reorder: Story = {
   name: "Reorder",
-  render: () => {
-    const [tree, setTree] = useState<TreeNode[]>(nodes);
+  args: { height: 420, selectedId: undefined },
+  render: function ReorderStory(args) {
+    const [tree, setTree] = useState<TreeNode[]>(args.nodes ?? nodes);
     const [selectedId, setSelectedId] = useState<string | undefined>();
     return (
       <YStack height={440}>
         <TreeView
+          {...args}
           nodes={tree}
-          ariaLabel="Reorderable project files"
           selectedId={selectedId}
-          defaultExpandedIds={["src", "components"]}
           onNodeSelect={(node) => setSelectedId(node.id)}
           onNodeMove={(nodeId, target) => setTree((prev) => applyTreeMove(prev, nodeId, target))}
-          height={420}
         />
       </YStack>
     );
@@ -143,29 +173,49 @@ export const Reorder = {
  * TreeView has no isLoading/error props; those states cannot be rendered here
  * (component-capability gap, see p-results/state-triplet-coverage.md).
  */
-export const Empty = {
-  render: () => (
-    <YStack height={200}>
-      <TreeView nodes={[]} ariaLabel="Empty tree" emptyMessage="No files found" height={180} />
-    </YStack>
-  ),
+export const Empty: Story = {
+  args: {
+    nodes: [],
+    ariaLabel: "Empty tree",
+    emptyMessage: "No files found",
+    height: 180,
+  },
+};
+
+export const DeepNesting: Story = {
+  name: "Deep Nesting",
+  args: {
+    nodes: deepNodes,
+    ariaLabel: "Deep tree",
+    expandByDefault: true,
+    defaultExpandedIds: undefined,
+    height: 280,
+  },
+  render: (args) => <SelectableTree {...args} />,
+};
+
+export const LongLabels: Story = {
+  name: "Long Labels",
+  args: {
+    nodes: longLabelNodes,
+    ariaLabel: "Long labels",
+    expandByDefault: true,
+    defaultExpandedIds: undefined,
+    height: 160,
+  },
+  render: (args) => <SelectableTree {...args} />,
 };
 
 /**
  * Carbon: a collapsed ancestor of the selected node keeps a muted fill so
  * the selection is not lost when its parent is closed.
  */
-export const ContainsSelection = {
+export const ContainsSelection: Story = {
   name: "Contains Selection",
-  render: () => (
-    <YStack height={280}>
-      <TreeView
-        nodes={nodes}
-        ariaLabel="Collapsed ancestor still shows selection"
-        selectedId="button"
-        defaultExpandedIds={["src"]}
-        height={260}
-      />
-    </YStack>
-  ),
+  args: {
+    selectedId: "button",
+    defaultExpandedIds: ["src"],
+    height: 260,
+    ariaLabel: "Collapsed ancestor still shows selection",
+  },
 };

package/src/views/TreeView.tsx

@@ -5,6 +5,7 @@ import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   getGroupPosition,
+  hairline,
   keyboardFocusRingProps,
   pressTargetHitSlop,
   stackRadiusProps,
@@ -53,6 +54,12 @@ import {
   type TreeDropTarget,
 } from "./treeViewDnd";
 import { diffVisibleRows, flattenVisibleIds, isEmptyDiff } from "./treeViewMotion";
+import {
+  TREE_LIFT_SHADOW,
+  treeDefaultHeight,
+  treeEdgeRowPad,
+  treeIndentStep,
+} from "./treeViewLayout";
 
 /**
  * A node in a tree structure.
@@ -184,14 +191,9 @@ const AUTO_SCROLL_EDGE_PX = 48;
 const AUTO_SCROLL_MAX_SPEED = 16;
 
 // Raised drag shadow: the house $4 elevation tier (single light source,
-// blur = 2 × y-offset — Axiom 14 OPTICS). Explicit props because the lift is
-// a gesture state, not the tree's resting elevation knob; mirrors Kanban.
-const LIFT_SHADOW = {
-  shadowColor: "#000",
-  shadowOffset: { width: 0, height: 10 },
-  shadowOpacity: 0.15,
-  shadowRadius: 20,
-} as const;
+// blur = 2 × y-offset — Axiom 14 OPTICS). Gesture state, not the tree's
+// resting elevation knob. Token color — never a hex (design-audit).
+const LIFT_SHADOW = TREE_LIFT_SHADOW;
 
 /** Active drag session UI state (pointer ghost or keyboard insertion point). */
 interface TreeDragUi<T> {
@@ -311,33 +313,28 @@ export function TreeView<T = unknown>({
   const onAccentLabel = useReadableTextOn("$accentBackground");
   const transition = knobProps.transition;
   const nestedPx = knobProps.nestedControl.px;
+  const rowGap = knobProps.control.gap;
+  const iconSize = knobProps.controlIcon.width;
 
   // Row height rides nestedControl (Carbon 32/24, VS Code ~22, house
-  // nested px is 32 at medium / 28 compact) — not a private pixel table.
+  // nested px is 32 at medium) — not a private pixel table.
   const estimateSize = estimateSizeProp ?? nestedPx;
-  const height = heightProp ?? (nestedPx <= 28 ? 320 : nestedPx >= 36 ? 480 : 400);
-  const expandIconSize = nestedPx <= 28 ? 14 : nestedPx >= 36 ? 18 : 16;
-  const nodeIconSize = nestedPx <= 28 ? 14 : 18;
-  const caretSize = nestedPx <= 28 ? 12 : 14;
+  const height = heightProp ?? treeDefaultHeight(nestedPx);
+  const expandIconSize = iconSize;
+  const nodeIconSize = iconSize;
+  const caretSize = iconSize;
   // Collapsed caret encodes the expansion direction (inline-end), so it
   // mirrors in RTL via glyph swap (useDirection, Axiom 15); the rotation
   // sign flips with it so the expanded state still points down.
   const isRTL = useDirection() === "rtl";
   const CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
   const expandedCaretRotation = isRTL ? "-90deg" : "90deg";
-  const indentStep = knobProps.space === "small" ? 12 : knobProps.space === "large" ? 20 : 16;
-  // SP-EDGE row density (spec TreeView rows): the space knob steps the row
-  // padding — never an outer tree inset (LC-02). House space-map pattern
-  // (getTableCellPadding precedent); medium keeps the previous 6/8
-  // (4/6 compressed) geometry so default density is unchanged.
-  const rowPad =
-    (compressed
-      ? { small: { y: 3, x: 4 }, medium: { y: 4, x: 6 }, large: { y: 6, x: 10 } }
-      : { small: { y: 4, x: 6 }, medium: { y: 6, x: 8 }, large: { y: 10, x: 13 } })[
-      knobProps.space
-    ] ?? (compressed ? { y: 4, x: 6 } : { y: 6, x: 8 });
-  const rowPadY = rowPad.y;
-  const rowPadX = rowPad.x;
+  // Indent is proportional to size (nestedControl), not a space-keyed table.
+  const indentStep = treeIndentStep(nestedPx);
+  // SP-EDGE (LC-01 / LC-02): the frame owns no inset; rows own the shared
+  // space-token pad (same map as getTableCellPadding). compact display
+  // steps space only (LC-76) — no private compressed pad table.
+  const rowPad = treeEdgeRowPad(knobProps.space);
 
   const treeId = useId();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -1137,6 +1134,13 @@ export function TreeView<T = unknown>({
         ref={containerRef as any}
         role="tree"
         aria-label={resolvedAriaLabel}
+        {...{
+          "data-nested-px": nestedPx,
+          "data-indent-step": indentStep,
+          "data-space": knobProps.space,
+          "data-size": knobProps.size,
+          "data-viewport-height": height,
+        }}
         aria-activedescendant={
           effectiveFocused >= 0 ? `${treeId}-node-${effectiveFocused}` : undefined
         }
@@ -1245,10 +1249,10 @@ export function TreeView<T = unknown>({
                 aria-posinset={index + 1}
                 alignItems="center"
                 minHeight={estimateSize}
-                paddingVertical={rowPadY}
-                paddingInlineEnd={rowPadX}
-                paddingInlineStart={rowPadX + depth * indentStep}
-                gap="$2"
+                paddingVertical={rowPad.paddingVertical}
+                paddingInlineEnd={rowPad.paddingHorizontal}
+                paddingInlineStart={rowPad.paddingHorizontal}
+                gap={rowGap}
                 cursor="pointer"
                 position="relative"
                 y={rowY}
@@ -1295,30 +1299,37 @@ export function TreeView<T = unknown>({
                   onNodeSelect?.(node);
                 }}
               >
-                {depth > 0
-                  ? Array.from({ length: depth }, (_, guide) => {
-                      const inset = rowPadX + guide * indentStep + expandIconSize / 2;
+                {depth > 0 ? (
+                  <View
+                    width={depth * indentStep}
+                    flexShrink={0}
+                    alignSelf="stretch"
+                    position="relative"
+                    pointerEvents="none"
+                  >
+                    {Array.from({ length: depth }, (_, guide) => {
+                      const inset = guide * indentStep + expandIconSize / 2;
                       return (
                         <View
                           key={`guide-${guide}`}
                           position="absolute"
                           top={0}
                           bottom={0}
-                          width={1}
+                          {...hairline.vline}
                           pointerEvents="none"
                           backgroundColor={isSelected ? "$color1" : "$borderColor"}
                           opacity={isSelected ? 0.35 : 0.5}
                           {...(isRTL ? { right: inset } : { left: inset })}
                         />
                       );
-                    })
-                  : null}
+                    })}
+                  </View>
+                ) : null}
 
                 {showExpansionArrows ? (
                   hasChildren ? (
                     <View
-                      width={expandIconSize}
-                      height={expandIconSize}
+                      {...knobProps.controlIcon}
                       alignItems="center"
                       justifyContent="center"
                       pointerEvents="none"
@@ -1331,13 +1342,12 @@ export function TreeView<T = unknown>({
                       <CollapsedCaretIcon size={caretSize} weight="bold" />
                     </View>
                   ) : (
-                    <View width={expandIconSize} height={expandIconSize} />
+                    <View {...knobProps.controlIcon} />
                   )
                 ) : null}
 
                 <View
-                  width={nodeIconSize + 2}
-                  height={nodeIconSize + 2}
+                  {...knobProps.controlIcon}
                   alignItems="center"
                   justifyContent="center"
                   flexShrink={0}
@@ -1371,7 +1381,11 @@ export function TreeView<T = unknown>({
                       onPointerDown: (e: any) => handleDragHandlePointerDown(item, e),
                     }}
                   >
-                    <DotsSixVerticalIcon size={caretSize} weight="bold" />
+                    <DotsSixVerticalIcon
+                      size={caretSize}
+                      weight="bold"
+                      color={knobProps.textAccentColor}
+                    />
                   </View>
                 ) : null}
               </XStack>
@@ -1390,12 +1404,13 @@ export function TreeView<T = unknown>({
             right={0}
             y={topOfFlatIndex(dragUi.indicator.flatIndex) - dragScrollY - 1}
             height={2}
-            paddingInlineStart={rowPadX + dragUi.indicator.depth * indentStep}
-            paddingInlineEnd={rowPadX}
+            paddingInlineStart={rowPad.paddingHorizontal}
+            paddingInlineEnd={rowPad.paddingHorizontal}
             pointerEvents="none"
             zIndex={999}
             transition={dragUi.mode === "keyboard" ? (transition as any) : ("none" as any)}
           >
+            <View width={dragUi.indicator.depth * indentStep} flexShrink={0} />
             <View flex={1} height={2} borderRadius={1} backgroundColor="$accentBackground" />
           </XStack>
         )}
@@ -1423,8 +1438,8 @@ export function TreeView<T = unknown>({
             <XStack
               alignItems="center"
               height="100%"
-              paddingHorizontal={rowPadX}
-              gap="$2"
+              paddingHorizontal={rowPad.paddingHorizontal}
+              gap={rowGap}
               {...knobProps.borderRadius}
               backgroundColor="$background"
               borderWidth={1}
@@ -1436,8 +1451,7 @@ export function TreeView<T = unknown>({
               {...(dragUi ? LIFT_SHADOW : undefined)}
             >
               <View
-                width={nodeIconSize + 2}
-                height={nodeIconSize + 2}
+                {...knobProps.controlIcon}
                 alignItems="center"
                 justifyContent="center"
                 flexShrink={0}

package/src/views/index.ts

@@ -1,4 +1,13 @@
-export { List, type ListProps, type ListHotkeys } from "./List";
+export {
+  List,
+  ListRow,
+  ListRowMeta,
+  useListItemState,
+  type ListProps,
+  type ListHotkeys,
+  type ListItemState,
+  type ListRowProps,
+} from "./List";
 export { Kanban, type KanbanProps, type KanbanColumn, type KanbanHotkeys } from "./Kanban";
 export {
   Calendar,
@@ -33,10 +42,18 @@ export {
   type TreeViewDisplay,
 } from "./TreeView";
 export { ImageGrid, type ImageGridProps, type ImageGridHotkeys } from "./ImageGrid";
+// ProgressCard/ShortcutCard/ListCard ride this barrel on purpose (MPO-53
+// B-meter, the ProgressCard export gap): Dashboard.tsx exports them but they
+// were reachable only through the deep path until the Meter extraction, and
+// 5c7af7134 collaterally dropped them again. Meter.spec.tsx imports them from
+// here so the next revert fails a test instead of shipping.
 export {
   Dashboard,
   KPICard,
   ChartCard,
+  ProgressCard,
+  ShortcutCard,
+  ListCard,
   calculateTrend,
   calculatePercentageChange,
   aggregateData,
@@ -50,6 +67,13 @@ export {
   type ChartDataPoint,
   type ChartType,
   type TrendDirection,
+  type ProgressConfig,
+  type ProgressCardProps,
+  type ShortcutConfig,
+  type ShortcutCardProps,
+  type ListConfig,
+  type ListCardProps,
+  type DashboardListItem,
 } from "./Dashboard";
 export {
   ReportBuilder,
@@ -74,6 +98,11 @@ export {
   type GanttTick,
   type GanttZoom,
 } from "./ganttMath";
+// Kanban drag maths. Only the helper other packages consume is surfaced, in
+// keeping with this barrel's curated style: @multiplatform.one/table's
+// ChildTable imports renumberIdx to renumber rows after a reorder, and failed
+// to build without it (MPO-85).
+export { renumberIdx } from "./kanbanDnd";
 // Universal chart catalog (d3 math + react-native-svg rendering). Charts are
 // data views; the package barrel star-exports this module, so the charts
 // submodule surfaces through the existing views barrel.