@multiplatform.one/components 6.7.0 → 7.0.0

package/src/DotIndicator/index.tsx

@@ -1,9 +1,16 @@
-import { MIN_PRESS_TARGET, radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  FOCUS_VISIBLE_RING,
+  MIN_PRESS_TARGET,
+  ensureKeyboardModalityTracking,
+  radiusClassProps,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import { CheckIcon } from "@phosphor-icons/react";
-import type React from "react";
-import { useTranslation } from "react-i18next";
+import { useRef, useState, type KeyboardEvent } from "react";
+import { useTranslation } from "../shared/i18n";
 import type { GetProps } from "tamagui";
-import { View, XStack, getTokens, styled } from "tamagui";
+import { View, XStack, getTokens, isWeb, styled } from "tamagui";
 import { componentColors } from "../componentColors";
 import { withInterp } from "../shared/t";
 
@@ -12,9 +19,10 @@ import { withInterp } from "../shared/t";
 /**
  * Which IDIOM the strip paints — never a size of its own (LC-15 / Axiom 5).
  *
- * - `dots` / `pills` — the badge-capable idiom: the mark takes the scale's
- *   `dot` metric and may carry a completion check.
- * - `bars` — the progress-TICK idiom: the mark takes the scale's `bar` metric
+ * - `dots` — carousel page control: idle circles, active a short capsule
+ *   (iOS UIPageControl + Linear/Stripe worm, not a 3× caterpillar).
+ * - `pills` — always capsules; idle is a short pill, active a longer one.
+ * - `bars` — progress-TICK idiom: the mark takes the scale's `bar` metric
  *   and never carries a completion badge (a tick is not a badge).
  *
  * **The mark's size resolves through exactly one channel**, in this order:
@@ -99,6 +107,12 @@ const dotGeometryMap: Record<string, { dot: number; bar: number; active: number
  */
 const CHECK_MIN_DOT = 8;
 
+/**
+ * Instagram / Swiper `dynamicBullets` window: five marks, distance scale,
+ * the rest collapse. Long carousels stay compact instead of a 10-dot ruler.
+ */
+const WINDOW = 5;
+
 /** Resolve a size token (`$0.75`) or raw px to the number the press-target math needs. */
 function sizePx(value: number | string | undefined, fallback: number): number {
   if (typeof value === "number") return value;
@@ -109,6 +123,60 @@ function sizePx(value: number | string | undefined, fallback: number): number {
   return fallback;
 }
 
+function idleMarkWidth(variant: DotVariant, itemSize: number, activeSize: number): number {
+  if (variant === "pills") return Math.round(itemSize * 2.25);
+  // Tick: wider than tall when unpinned; Pagination's 24×24 pin is unchanged
+  // because `max(itemSize, 0.55×active)` keeps the pin when itemSize is chunky.
+  if (variant === "bars") return Math.max(itemSize, Math.round(activeSize * 0.55));
+  return itemSize;
+}
+
+function activeMarkWidth(variant: DotVariant, itemSize: number, geometryActive: number): number {
+  // Unpinned carousel dots: a short capsule (~2×), not a 3× worm. Host pins
+  // (Pagination 28×8 / 36×24) still win via `sizePx(activeDotSize, …)`.
+  if (variant === "dots") return Math.round(itemSize * 2);
+  if (variant === "pills") return Math.round(itemSize * 3);
+  return geometryActive;
+}
+
+function windowRange(active: number, total: number): [number, number] {
+  if (total <= WINDOW) return [0, Math.max(0, total - 1)];
+  const half = Math.floor(WINDOW / 2);
+  let start = active - half;
+  let end = active + half;
+  if (start < 0) {
+    end -= start;
+    start = 0;
+  }
+  if (end > total - 1) {
+    start -= end - (total - 1);
+    end = total - 1;
+  }
+  return [Math.max(0, start), end];
+}
+
+function windowScale(
+  index: number,
+  active: number,
+  start: number,
+  end: number,
+  total: number,
+): number {
+  if (total <= WINDOW) return 1;
+  if (index < start || index > end) return 0;
+  const dist = Math.abs(index - active);
+  if (dist === 0) return 1;
+  if (dist === 1) return 0.72;
+  return 0.48;
+}
+
+function isRtl(node: HTMLElement | null): boolean {
+  if (typeof document === "undefined") return false;
+  const fromNode = node?.closest("[dir]")?.getAttribute("dir");
+  const dir = fromNode || document.documentElement.dir;
+  return dir === "rtl";
+}
+
 // ── Styled components ─────────────────────────────────────────
 
 const DotsContainer = styled(XStack, {
@@ -116,6 +184,8 @@ const DotsContainer = styled(XStack, {
   alignItems: "center",
   justifyContent: "center",
   gap: "$2",
+  // Outer +2px LC-71 ring on the painted mark must not clip at the strip edge.
+  overflow: "visible",
   variants: {
     // A rail seats the strip on a filled capsule instead of the page. It is a
     // variant of the strip rather than host chrome because the rail and the
@@ -145,12 +215,15 @@ const DotTarget = styled(View, {
   alignItems: "center",
   justifyContent: "center",
   backgroundColor: "transparent",
-  focusVisibleStyle: {
-    outlineColor: "$outlineColor",
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineOffset: 1,
-  },
+  overflow: "visible",
+  borderRadius: 1000,
+  // LC-71: the 44px hit box is not the perceived control (Chip ✕ rule). Rest,
+  // mouse-focus, and :focus-visible paint no ring here — the ring rides the
+  // painted mark via FOCUS_VISIBLE_RING when wasKeyboardFocus().
+  outlineWidth: 0,
+  outlineStyle: "none" as any,
+  focusStyle: { outlineWidth: 0, outlineStyle: "none" as any },
+  focusVisibleStyle: { outlineWidth: 0, outlineStyle: "none" as any },
 });
 
 const Dot = styled(View, {
@@ -207,6 +280,9 @@ export function DotIndicator({
 }: DotIndicatorProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
+  const rootRef = useRef<HTMLElement | null>(null);
+  const [kbFocusIndex, setKbFocusIndex] = useState<number | null>(null);
+  if (isWeb) ensureKeyboardModalityTracking();
   // Consumer gap ejects; otherwise the space knob drives the inter-item gap.
   const gap = gapProp ?? dotGapMap[knobProps.space] ?? "$2";
   const geometry = dotGeometryMap[knobProps.sizeToken] ?? dotGeometryMap.$4;
@@ -217,7 +293,8 @@ export function DotIndicator({
   // A host may pin the painted geometry (Pagination's token sizes); otherwise
   // the size knob drives it. Pin first, scale second — one channel.
   const itemSize = sizePx(dotSize, isTick ? geometry.bar : geometry.dot);
-  const activeSize = sizePx(activeDotSize, geometry.active);
+  const activeSize = sizePx(activeDotSize, activeMarkWidth(variant, itemSize, geometry.active));
+  const idleWidth = idleMarkWidth(variant, itemSize, activeSize);
 
   // Horizontal slop is capped at just under half the resolved gap so two
   // enlarged targets keep ≥1px of dead space between them.
@@ -231,20 +308,44 @@ export function DotIndicator({
   const isStep = idiom === "step";
   const label = isStep ? t("Go to step {{number}}") : t("Go to item {{number}}");
   const currentValue = isStep ? "step" : "true";
+  // LC-68: motion gates on the resolved animation knob (undefined at "none"
+  // / prefers-reduced-motion). Host `transition` may name the tween but cannot
+  // re-enable motion the knob turned off.
+  const motion = knobProps.transition ? (transition ?? knobProps.transition) : undefined;
   // LC-25: discrete jumps tween the indicator; the explicit CSS shorthand is
   // the belt-and-suspenders arm for the web driver, which only picks up
   // Tamagui's named transition on some props.
-  const motionStyle = transition
+  const motionStyle = motion
     ? {
         transition:
-          "width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease",
+          "width var(--mp-transition, 200ms) ease, height var(--mp-transition, 200ms) ease, background-color var(--mp-transition, 200ms) ease, transform var(--mp-transition, 200ms) ease",
       }
     : undefined;
 
+  const clampedActive = Math.min(Math.max(0, activeIndex), Math.max(0, total - 1));
+  const [winStart, winEnd] = windowRange(clampedActive, total);
+
+  const focusMark = (index: number) => {
+    requestAnimationFrame(() => {
+      const el = rootRef.current?.querySelector?.(
+        `[data-dot-index="${index}"]`,
+      ) as HTMLElement | null;
+      el?.focus?.();
+    });
+  };
+
+  const moveTo = (index: number) => {
+    const next = Math.min(Math.max(0, index), total - 1);
+    onChange?.(next);
+    focusMark(next);
+  };
+
   return (
     <DotsContainer
+      ref={rootRef as any}
       gap={gap}
       rail={rail}
+      {...(interactive ? ({ role: "group" } as const) : undefined)}
       {...(rail
         ? { paddingHorizontal: knobProps.panelPadding.padding, height: knobProps.sizeToken }
         : undefined)}
@@ -253,7 +354,11 @@ export function DotIndicator({
         const isActive = index === activeIndex;
         // Completion is what a step ALREADY did; the current step outranks it.
         const isCompleted = !isActive && !!completedSteps?.has(index);
-        const dotWidth = isActive ? activeSize : itemSize;
+        const scale = windowScale(index, clampedActive, winStart, winEnd, total);
+        const hidden = scale === 0;
+        const baseWidth = isActive ? activeSize : idleWidth;
+        const dotWidth = Math.max(1, Math.round(baseWidth * scale));
+        const dotHeight = Math.max(1, Math.round(itemSize * scale));
         // Only the NON-selected fills are computed here. The selected mark
         // stays on the `active` variant so no later prop can paint over the
         // accent — the D-01 failure mode this component was fixed for.
@@ -264,16 +369,21 @@ export function DotIndicator({
               // separates from the capsule fill it sits on.
               componentColors.indicator.track
             : componentColors.indicator.inactive;
+        const kbRing = kbFocusIndex === index;
         return (
           <DotTarget
             key={index}
+            display={hidden ? "none" : "flex"}
             width={dotWidth + slopX * 2}
             minHeight={MIN_PRESS_TARGET}
             marginHorizontal={-slopX}
             marginVertical={-outsetY}
+            zIndex={kbRing ? 1 : undefined}
             cursor={interactive ? "pointer" : disabled ? "not-allowed" : "default"}
             onPress={interactive ? () => onChange?.(index) : undefined}
             aria-label={withInterp(label, { number: index + 1 })}
+            {...({ "data-dot-index": String(index) } as Record<string, unknown>)}
+            {...(hidden ? ({ "data-dot-hidden": "true" } as Record<string, unknown>) : undefined)}
             {...(isActive
               ? ({ "aria-current": currentValue } as Record<string, unknown>)
               : undefined)}
@@ -281,10 +391,32 @@ export function DotIndicator({
               ? {
                   role: "button" as const,
                   tabIndex: 0,
-                  onKeyDown: ((e: React.KeyboardEvent) => {
+                  onFocus: () => {
+                    // Native has no pointer-vs-keyboard split; any focus rings.
+                    if (!isWeb || wasKeyboardFocus()) setKbFocusIndex(index);
+                  },
+                  onBlur: () => {
+                    setKbFocusIndex((prev) => (prev === index ? null : prev));
+                  },
+                  onKeyDown: ((e: KeyboardEvent) => {
                     if (e.key === "Enter" || e.key === " ") {
                       e.preventDefault();
                       onChange?.(index);
+                      return;
+                    }
+                    const rtl = isRtl(e.currentTarget as unknown as HTMLElement);
+                    if (e.key === "ArrowRight") {
+                      e.preventDefault();
+                      moveTo(index + (rtl ? -1 : 1));
+                    } else if (e.key === "ArrowLeft") {
+                      e.preventDefault();
+                      moveTo(index + (rtl ? 1 : -1));
+                    } else if (e.key === "Home") {
+                      e.preventDefault();
+                      moveTo(0);
+                    } else if (e.key === "End") {
+                      e.preventDefault();
+                      moveTo(total - 1);
                     }
                   }) as unknown as () => void,
                 }
@@ -306,14 +438,17 @@ export function DotIndicator({
                       : undefined),
                   })}
               width={dotWidth}
-              height={itemSize}
+              height={dotHeight}
               disabled={disabled}
-              transition={transition}
+              transition={motion}
               style={motionStyle}
-              {...({ [dotStateAttribute]: isActive ? "active" : "idle" } as Record<
-                string,
-                unknown
-              >)}
+              {...(kbRing ? FOCUS_VISIBLE_RING : { outlineWidth: 0 })}
+              {...({
+                [dotStateAttribute]: isActive ? "active" : "idle",
+                "data-mark-width": String(dotWidth),
+                "data-mark-height": String(dotHeight),
+              } as Record<string, unknown>)}
+              {...(kbRing ? ({ "data-dot-ring": "true" } as Record<string, unknown>) : undefined)}
             >
               {isCompleted && !isTick && itemSize >= CHECK_MIN_DOT && (
                 <CheckIcon size={8} color="white" weight="bold" />

package/src/DropdownMenu/DropdownMenu.spec.tsx

@@ -152,6 +152,128 @@ describe("DropdownMenu", () => {
   });
 });
 
+describe("DropdownMenu items path — checked entries", () => {
+  // Would have caught the original defect: the convenience items=[] path
+  // routed entries carrying `checked` to CheckboxItem and silently dropped
+  // their `onSelect` (only `onCheckedChange` was wired), and forwarded no
+  // `closeOnSelect` — checked navigation menus stayed open and dead.
+  it("fires BOTH onSelect and onCheckedChange for a checked entry", async () => {
+    const onSelect = vi.fn();
+    const onCheckedChange = vi.fn();
+    renderWithProviders(
+      <DropdownMenu
+        defaultOpen
+        items={[{ key: "list", label: "List", checked: false, onSelect, onCheckedChange }]}
+      >
+        <Button>Views</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menuitemcheckbox"]')).toBeTruthy();
+    });
+    const item = document.querySelector('[role="menuitemcheckbox"]') as HTMLElement;
+    expect(item.getAttribute("aria-checked")).toBe("false");
+    fireEvent.click(item);
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("closes the menu when a checked entry sets closeOnSelect", async () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      <DropdownMenu
+        defaultOpen
+        items={[{ key: "kanban", label: "Kanban", checked: false, closeOnSelect: true, onSelect }]}
+      >
+        <Button>Views</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menuitemcheckbox"]')).toBeTruthy();
+    });
+    fireEvent.click(document.querySelector('[role="menuitemcheckbox"]') as HTMLElement);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeFalsy();
+    });
+  });
+
+  it("menu-level closeOnSelect closes a checked pick (radio-style navigation)", async () => {
+    // The exact consumer shape (ViewHeader switcher / KanbanBoardPicker /
+    // SortControl): every entry is a checkbox item (single-select radio
+    // semantics, shared check gutter), the pick navigates AND closes.
+    const navigate = vi.fn();
+    renderWithProviders(
+      <DropdownMenu
+        defaultOpen
+        closeOnSelect
+        items={["List", "Kanban"].map((view) => ({
+          key: view,
+          label: view,
+          checked: view === "List",
+          onSelect: () => navigate(view),
+        }))}
+      >
+        <Button>List</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelectorAll('[role="menuitemcheckbox"]').length).toBe(2);
+    });
+    const rows = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitemcheckbox"]'));
+    // CheckboxItem semantics stay intact: aria-checked marks the current view.
+    expect(rows[0].getAttribute("aria-checked")).toBe("true");
+    expect(rows[1].getAttribute("aria-checked")).toBe("false");
+    fireEvent.click(rows[1]);
+    expect(navigate).toHaveBeenCalledWith("Kanban");
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeFalsy();
+    });
+  });
+
+  it("keeps the menu open for checked entries by default (LC-21 COMPOSE)", async () => {
+    // Positive control for the close assertions above: without closeOnSelect
+    // a checkable toggle composes, so the menu MUST stay open.
+    const onCheckedChange = vi.fn();
+    renderWithProviders(
+      <DropdownMenu
+        defaultOpen
+        items={[{ key: "grid", label: "Show grid", checked: true, onCheckedChange }]}
+      >
+        <Button>View options</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menuitemcheckbox"]')).toBeTruthy();
+    });
+    fireEvent.click(document.querySelector('[role="menuitemcheckbox"]') as HTMLElement);
+    expect(onCheckedChange).toHaveBeenCalledWith(false);
+    // Unmount-on-close is async — settle past it so "still open" can fail
+    // (the closing specs above are the positive control for this detector).
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    expect(document.querySelector('[role="menu"]')).toBeTruthy();
+  });
+
+  it("forwards entry-level closeOnSelect=false on plain items", async () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      <DropdownMenu
+        defaultOpen
+        items={[{ key: "apply", label: "Apply", closeOnSelect: false, onSelect }]}
+      >
+        <Button>Actions</Button>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menuitem"]')).toBeTruthy();
+    });
+    fireEvent.click(document.querySelector('[role="menuitem"]') as HTMLElement);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    expect(document.querySelector('[role="menu"]')).toBeTruthy();
+  });
+});
+
 describe("DropdownMenu disabledReason (DG-ST-03)", () => {
   let warnSpy: ReturnType<typeof vi.spyOn>;
 
@@ -220,3 +342,53 @@ describe("DropdownMenu disabledReason (DG-ST-03)", () => {
     expect(document.querySelector("[data-mp-disabled-reason]")).toBeNull();
   });
 });
+
+describe("DropdownMenu LC-71 keyboard ring", () => {
+  it("highlights the focused row and keeps CONTAINER-CLIP square corners", async () => {
+    renderMenu();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const items = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])'),
+    );
+    fireEvent.focus(items[1]);
+    expect(items[1].getAttribute("data-highlighted")).toBe("true");
+    // LC-72 CONTAINER-CLIP: the overlay clips; rows stay square.
+    expect(items[1].className).toMatch(/_btlr-0px/);
+    expect(items[1].className).toMatch(/_bbrr-0px/);
+    // LC-71 kb-only: Tamagui focus/focusVisible styles carry no ring; the
+    // keyboard ring is painted via keyboardFocusRingProps on kb-origin focus.
+    expect(items[1].className).toMatch(/_outlineWidth-0focus-visible-0px/);
+  });
+
+  it("keeps destructive rows square and highlighted (no error-intent border)", async () => {
+    renderMenu();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const del = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).find((el) =>
+      el.textContent?.includes("Delete"),
+    ) as HTMLElement;
+    fireEvent.focus(del);
+    expect(del.getAttribute("data-highlighted")).toBe("true");
+    expect(del.className).toMatch(/_btlr-0px/);
+    expect(del.className).toMatch(/_outlineWidth-0focus-visible-0px/);
+  });
+
+  it("ArrowUp on a closed trigger opens onto the last item", async () => {
+    renderWithProviders(
+      <DropdownMenu items={[{ label: "One" }, { label: "Two" }, { label: "Three" }]}>
+        <Button>Actions</Button>
+      </DropdownMenu>,
+    );
+    const trigger = document.querySelector('[aria-haspopup="menu"]') as HTMLElement;
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: "ArrowUp" });
+    await waitFor(() => {
+      const items = document.querySelectorAll('[role="menuitem"]');
+      expect(items.length).toBe(3);
+      expect(document.activeElement).toBe(items[2]);
+    });
+  });
+});

package/src/DropdownMenu/DropdownMenu.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
 import {
   ArrowSquareOutIcon,
+  CaretDownIcon,
   CopyIcon,
   DotsThreeVerticalIcon,
   DownloadSimpleIcon,
@@ -168,6 +169,40 @@ export const LongListScroll: Story = {
   ),
 };
 
+/**
+ * Single-select "radio-style" navigation menu — the exact backoffice
+ * consumer shape (ViewHeader view switcher, KanbanBoardPicker, SortControl):
+ * every entry is a checkable item (shared 18px check gutter, aria-checked on
+ * the current pick), each entry carries `onSelect` for the navigation, and
+ * the menu-level `closeOnSelect` opts the COMPOSE-class checkbox rows into
+ * commit-and-close (LC-21). Selecting a view updates the trigger label AND
+ * closes the menu — no controlled-open wiring in the consumer.
+ */
+export const RadioStyleNavigation: Story = {
+  render: () => {
+    const views = ["List", "Report", "Kanban", "Calendar"];
+    const [view, setView] = useState("List");
+    return (
+      <YStack minHeight={340} paddingTop="$4" alignItems="center" gap="$3">
+        <DropdownMenu
+          closeOnSelect
+          items={views.map((candidate) => ({
+            key: candidate,
+            label: candidate,
+            checked: candidate === view,
+            onSelect: () => setView(candidate),
+          }))}
+        >
+          <Button iconAfter={<CaretDownIcon size={14} />}>{view}</Button>
+        </DropdownMenu>
+        <Text color="$color11" fontSize="$2" data-testid="current-view">
+          Current view: {view}
+        </Text>
+      </YStack>
+    );
+  },
+};
+
 export const Controlled: Story = {
   render: () => {
     const [open, setOpen] = useState(false);