@multiplatform.one/components 7.4.0 → 7.5.0

package/src/Tooltip/tooltipShared.tsx

@@ -0,0 +1,157 @@
+/**
+ * Shared Tooltip recipes, content chrome, and text wrapping.
+ * Platform twins (index.tsx web / index.native.tsx) own open/close.
+ */
+
+import type { ReactNode } from "react";
+import React from "react";
+import { Tooltip as TamaguiTooltip, Text, styled } from "tamagui";
+import { wrapBareTextChildren } from "../shared/textRidesText";
+
+export interface TooltipProps {
+  /** The element that triggers the tooltip */
+  children: ReactNode;
+  /** The tooltip content - can be a string or ReactNode */
+  content: ReactNode;
+  /** Placement of the tooltip relative to trigger */
+  placement?: "top" | "bottom" | "left" | "right";
+  /**
+   * Delay before showing tooltip in ms. Web: hover warmup (keyboard is
+   * immediate). Native: long-press / press-in hold. Defaults differ per
+   * platform (300 web, 500 native).
+   */
+  delay?: number;
+  /** Whether the tooltip is disabled */
+  disabled?: boolean;
+  /** Controlled open. Omit for hover/focus (web) or long-press (native). */
+  open?: boolean;
+  /** Fired whenever open changes (controlled or internal). */
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface TooltipSizeRecipe {
+  maxWidth: number;
+}
+
+export const tooltipSizeRecipes: Record<"small" | "medium" | "large", TooltipSizeRecipe> = {
+  small: { maxWidth: 160 },
+  medium: { maxWidth: 250 },
+  large: { maxWidth: 320 },
+};
+
+export const tooltipPadRecipes: Record<
+  "small" | "medium" | "large",
+  { paddingHorizontal: string; paddingVertical: string }
+> = {
+  small: { paddingHorizontal: "$1.5", paddingVertical: "$1" },
+  medium: { paddingHorizontal: "$2", paddingVertical: "$1.5" },
+  large: { paddingHorizontal: "$3", paddingVertical: "$2" },
+};
+
+/** Spectrum container padding so the bubble stays inside the viewport. */
+export const TOOLTIP_COLLISION_PADDING_PX = 8;
+/** Radix skipDelayDuration / Spectrum cooldown — next tooltip opens instantly. */
+export const TOOLTIP_SKIP_DELAY_MS = 300;
+/** Primer/Spectrum hover warmup when not in the skip window. */
+export const TOOLTIP_DEFAULT_DELAY_MS = 300;
+
+let tooltipSkipUntil = 0;
+const tooltipSkipListeners = new Set<() => void>();
+
+export function noteTooltipClosed(now = Date.now()): void {
+  tooltipSkipUntil = now + TOOLTIP_SKIP_DELAY_MS;
+  for (const listener of tooltipSkipListeners) listener();
+}
+
+export function resolveTooltipDelay(delay: number, now = Date.now()): number {
+  return now < tooltipSkipUntil ? 0 : delay;
+}
+
+export function resolveTooltipSizeRecipe(size: string): TooltipSizeRecipe {
+  return tooltipSizeRecipes[size as keyof typeof tooltipSizeRecipes] ?? tooltipSizeRecipes.medium;
+}
+
+export function resolveTooltipPadRecipe(space: string): {
+  paddingHorizontal: string;
+  paddingVertical: string;
+} {
+  return tooltipPadRecipes[space as keyof typeof tooltipPadRecipes] ?? tooltipPadRecipes.medium;
+}
+
+/** @internal tests */
+export function __resetTooltipSkipForTests(): void {
+  tooltipSkipUntil = 0;
+}
+
+export function useTooltipSkipDelay(delay: number): number {
+  const [, bump] = React.useState(0);
+  React.useEffect(() => {
+    const listener = () => bump((n) => n + 1);
+    tooltipSkipListeners.add(listener);
+    return () => {
+      tooltipSkipListeners.delete(listener);
+    };
+  }, []);
+  return resolveTooltipDelay(delay);
+}
+
+export const TooltipContent = styled(TamaguiTooltip.Content, {
+  name: "TooltipContent",
+  // Surface, radius, elevation, pad, and type come from knob recipes on
+  // the instance (LC-18). enterStyle/exitStyle need a transition token (LC-24).
+  opacity: 1,
+  enterStyle: {
+    opacity: 0,
+    y: -4,
+    scale: 0.96,
+  },
+  exitStyle: {
+    opacity: 0,
+    y: -4,
+    scale: 0.96,
+  },
+});
+
+export const TooltipArrow = styled(TamaguiTooltip.Arrow, {
+  name: "TooltipArrow",
+  backgroundColor: "$color1",
+  borderColor: "$color1",
+});
+
+export const TooltipText = styled(Text, {
+  name: "TooltipText",
+});
+
+/**
+ * The Tooltip content slot (exported for spec). LC-82 TEXT-RIDES-TEXT: wrap
+ * ALL bare string/number content (coalesced runs), not just the singleton
+ * case — an array like `{label}{cond ? suffix : ""}` renders web-only and
+ * crashes native otherwise.
+ */
+export function wrapTooltipContent(
+  content: ReactNode,
+  bodyProps: Record<string, unknown>,
+): ReactNode {
+  return wrapBareTextChildren(content, (label, key) => (
+    <TooltipText key={key} {...bodyProps}>
+      {label}
+    </TooltipText>
+  ));
+}
+
+export function resolveThemeColor(
+  token: { get?: () => string; val?: string } | undefined,
+  fallback: string,
+): string {
+  const raw = token?.val ?? token?.get?.() ?? fallback;
+  if (typeof raw === "string" && raw.startsWith("var(") && typeof document !== "undefined") {
+    const name = raw.slice(4, -1).trim();
+    const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    if (value) return value;
+  }
+  return typeof raw === "string" ? raw : fallback;
+}
+
+export function preventTooltipFocus(event: { preventDefault?: () => void }) {
+  event.preventDefault?.();
+}

package/src/TreeSelect/TreeSelect.spec.tsx

@@ -0,0 +1,265 @@
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type { TreeNode } from "../views/TreeView";
+import { TreeSelect } from "./index";
+
+const accounts: TreeNode[] = [
+  {
+    id: "assets",
+    label: "Assets",
+    children: [
+      {
+        id: "current",
+        label: "Current Assets",
+        children: [
+          {
+            id: "bank",
+            label: "Bank Accounts",
+            children: [
+              { id: "hdfc", label: "HDFC Current" },
+              { id: "cash", label: "Cash" },
+            ],
+          },
+        ],
+      },
+      { id: "fixed", label: "Fixed Assets" },
+    ],
+  },
+  { id: "liabilities", label: "Liabilities" },
+];
+
+function mockRect(el: HTMLElement, rect: { x: number; y: number; width: number; height: number }) {
+  const next = {
+    ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height,
+    toJSON: () => ({}),
+  } as DOMRect;
+  el.getBoundingClientRect = () => next;
+  const proto = HTMLElement.prototype.getBoundingClientRect;
+  HTMLElement.prototype.getBoundingClientRect = function mockedTriggerRect() {
+    if (this === el || this.closest?.("[data-testid='tree-select-trigger']") === el) {
+      return next;
+    }
+    return proto.call(this);
+  };
+  return () => {
+    HTMLElement.prototype.getBoundingClientRect = proto;
+  };
+}
+
+function tabStops(root: ParentNode) {
+  return [
+    ...root.querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    ),
+  ].filter((el) => {
+    if (el.getAttribute("aria-hidden") === "true") return false;
+    const style = el.getAttribute("style") ?? "";
+    return !style.includes("display: none");
+  });
+}
+
+function setViewport(width: number) {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+  window.dispatchEvent(new Event("resize"));
+}
+
+describe("TreeSelect cover + width (MPO-53 AC-3)", () => {
+  it("panel attaches at zero over the trigger and honours at-least-trigger", async () => {
+    setViewport(1200);
+    const result = renderWithProviders(
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        value="hdfc"
+        defaultExpandedIds={["assets", "current", "bank"]}
+        open
+      />,
+    );
+    const trigger = result.container.querySelector(
+      '[data-testid="tree-select-trigger"]',
+    ) as HTMLElement;
+    expect(trigger).toBeTruthy();
+    const restoreRect = mockRect(trigger, { x: 40, y: 80, width: 280, height: 44 });
+    window.dispatchEvent(new Event("resize"));
+
+    try {
+      await waitFor(() => {
+        const panel = result.container.querySelector(
+          '[data-testid="tree-select-panel"]',
+        ) as HTMLElement | null;
+        expect(panel).toBeTruthy();
+        expect(panel?.getAttribute("data-width-mode")).toBe("at-least-trigger");
+        expect(panel?.getAttribute("data-dismiss-class")).toBe("commit");
+        expect(Number.parseFloat(panel?.style.top ?? "")).toBe(80);
+        expect(Number.parseFloat(panel?.style.minWidth ?? "")).toBeGreaterThanOrEqual(280);
+      });
+    } finally {
+      restoreRect();
+    }
+  });
+});
+
+describe("TreeSelect LC-49 one tab stop", () => {
+  it("closed field is one tab stop; open tree is search + activedescendant", async () => {
+    setViewport(1200);
+    const result = renderWithProviders(
+      <TreeSelect label="Account" nodes={accounts} value="hdfc" />,
+    );
+    const closedStops = tabStops(result.container);
+    expect(closedStops.length).toBe(1);
+    expect(closedStops[0]?.getAttribute("data-testid")).toBe("tree-select-trigger");
+
+    result.rerender(
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        value="hdfc"
+        open
+        defaultExpandedIds={["assets"]}
+      />,
+    );
+    await waitFor(() => {
+      expect(result.container.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
+    });
+    const openRoot = result.baseElement;
+    const search = openRoot.querySelector(
+      '[data-testid="tree-select-search"] input',
+    ) as HTMLElement;
+    expect(search).toBeTruthy();
+    const tree = openRoot.querySelector('[role="tree"]') as HTMLElement;
+    expect(tree?.tabIndex).toBe(-1);
+    const carets = [...openRoot.querySelectorAll("[data-treeselect-caret]")];
+    for (const caret of carets) {
+      expect(caret.getAttribute("tabindex")).toBe("-1");
+    }
+    const rows = [...openRoot.querySelectorAll("[data-treeselect-row]")];
+    for (const row of rows) {
+      expect(row.getAttribute("tabindex")).toBe("-1");
+    }
+    expect(search.getAttribute("aria-activedescendant")).toMatch(/-node-0$/);
+
+    await act(async () => {
+      fireEvent.keyDown(search, { key: "ArrowDown" });
+    });
+    expect(search.getAttribute("aria-activedescendant")).toMatch(/-node-1$/);
+  });
+});
+
+describe("TreeSelect LC-21 commit vs expand", () => {
+  it("row pick commits and closes; caret expand does not", async () => {
+    setViewport(1200);
+    const onChange = vi.fn();
+    const onOpenChange = vi.fn();
+    const result = renderWithProviders(
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        open
+        onChange={onChange}
+        onOpenChange={onOpenChange}
+      />,
+    );
+    await waitFor(() => {
+      expect(result.container.querySelector("[data-treeselect-caret]")).toBeTruthy();
+    });
+    const caret = result.container.querySelector("[data-treeselect-caret]") as HTMLElement;
+    await act(async () => {
+      fireEvent.click(caret);
+    });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+
+    const cash = result.container.querySelector(
+      '[data-treeselect-row="liabilities"]',
+    ) as HTMLElement;
+    await act(async () => {
+      fireEvent.click(cash);
+    });
+    expect(onChange).toHaveBeenCalledWith("liabilities");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});
+
+describe("TreeSelect sheet at <=640", () => {
+  it("renders the sheet; rows match the desktop tree", async () => {
+    setViewport(1200);
+    const desktop = renderWithProviders(
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        open
+        defaultExpandedIds={["assets", "current", "bank"]}
+      />,
+    );
+    await waitFor(() => {
+      expect(desktop.container.querySelector("[data-treeselect-row]")).toBeTruthy();
+    });
+    const desktopTree = desktop.container.querySelector('[data-testid="tree-select-tree"]');
+    const desktopRows = [...desktop.container.querySelectorAll("[data-treeselect-row]")].map(
+      (el) => ({
+        id: el.getAttribute("data-treeselect-row"),
+        depth: el.getAttribute("data-depth"),
+      }),
+    );
+    const desktopIndent = desktopTree?.getAttribute("data-indent-step");
+    const desktopRowHeight = desktopTree?.getAttribute("data-row-height");
+
+    desktop.unmount();
+    setViewport(640);
+    const mobile = renderWithProviders(
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        open
+        defaultExpandedIds={["assets", "current", "bank"]}
+      />,
+    );
+    await waitFor(() => {
+      expect(mobile.baseElement.querySelector("[data-treeselect-row]")).toBeTruthy();
+    });
+    expect(mobile.container.querySelector('[data-testid="floating-panel-viewport"]')).toBeNull();
+    const mobileTree = mobile.baseElement.querySelector('[data-testid="tree-select-tree"]');
+    const mobileRows = [...mobile.baseElement.querySelectorAll("[data-treeselect-row]")].map(
+      (el) => ({
+        id: el.getAttribute("data-treeselect-row"),
+        depth: el.getAttribute("data-depth"),
+      }),
+    );
+    expect(mobileRows).toEqual(desktopRows);
+    expect(mobileTree?.getAttribute("data-indent-step")).toBe(desktopIndent);
+    expect(mobileTree?.getAttribute("data-row-height")).toBe(desktopRowHeight);
+  });
+});
+
+describe("TreeSelect empty filter", () => {
+  it("shows a 44 row, not an EmptyState well", async () => {
+    setViewport(1200);
+    const result = renderWithProviders(
+      <TreeSelect label="Account" nodes={accounts} open emptyMessage="No matching accounts" />,
+    );
+    await waitFor(() => {
+      expect(result.container.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
+    });
+    const search = result.container.querySelector(
+      '[data-testid="tree-select-search"] input',
+    ) as HTMLInputElement;
+    await act(async () => {
+      fireEvent.change(search, { target: { value: "xyzzy" } });
+    });
+    const empty = result.container.querySelector(
+      '[data-testid="tree-select-empty"]',
+    ) as HTMLElement;
+    expect(empty).toBeTruthy();
+    expect(empty.textContent).toContain("No matching accounts");
+    expect(result.container.querySelector('[data-testid="empty-state"]')).toBeNull();
+  });
+});

package/src/TreeSelect/TreeSelect.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import type { TreeNode } from "../views/TreeView";
+import { TreeSelect } from "./index";
+
+const accounts: TreeNode[] = [
+  {
+    id: "assets",
+    label: "Assets",
+    children: [
+      {
+        id: "current",
+        label: "Current Assets",
+        children: [
+          {
+            id: "bank",
+            label: "Bank Accounts",
+            children: [
+              { id: "hdfc", label: "HDFC Current" },
+              { id: "cash", label: "Cash" },
+            ],
+          },
+        ],
+      },
+      { id: "fixed", label: "Fixed Assets" },
+    ],
+  },
+  { id: "liabilities", label: "Liabilities" },
+  { id: "income", label: "Income" },
+];
+
+const meta: Meta<typeof TreeSelect> = {
+  title: "Components/TreeSelect",
+  component: TreeSelect,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "FloatingPanel whose body is a tree, for Link fields whose target DocType is a tree. Cover at OVERLAY_ATTACH_GAP 0; width mode at-least-trigger; caret expands, row pick commits.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof TreeSelect>;
+
+export const Account: Story = {
+  render: function Render() {
+    const [value, setValue] = useState("hdfc");
+    return (
+      <YStack width={280} padding="$4">
+        <TreeSelect
+          label="Account"
+          nodes={accounts}
+          value={value}
+          onChange={setValue}
+          placeholder="Select account"
+          searchPlaceholder="Filter accounts"
+          emptyMessage="No matching accounts"
+          defaultExpandedIds={["assets", "current", "bank"]}
+        />
+      </YStack>
+    );
+  },
+};
+
+export const Empty: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect label="Account" nodes={accounts} placeholder="Select account" />
+    </YStack>
+  ),
+};