@multiplatform.one/components 7.77.2 → 7.79.0

package/src/SortableList/index.tsx

@@ -23,6 +23,8 @@ import { Text } from "../Text";
 export { SortableHandle, SortableHandleWell } from "./SortableHandle";
 export { SortableSessionProvider, useSortableRows } from "./useSortableRows";
 export type { SortableSession, UseSortableRowsOptions } from "./useSortableRows";
+export { applyUserOrder, useUserOrder } from "./useUserOrder";
+export type { UseUserOrderOptions, UserOrderStorage } from "./useUserOrder";
 
 export type SortableDisabledStyle = "keepLabel" | "dimWhole";
 

package/src/SortableList/useUserOrder.spec.tsx

@@ -0,0 +1,110 @@
+/**
+ * LC-209 USER-ORDER: a hand-arranged collection keeps the user's order. A new
+ * item lands last with every other index unchanged, a data refresh that
+ * returns the source's own order changes nothing, and a reload reads the same
+ * arrangement back.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { SortableList } from "./index";
+import { applyUserOrder, useUserOrder, type UserOrderStorage } from "./useUserOrder";
+
+afterEach(cleanup);
+
+interface Pin {
+  id: string;
+  label: string;
+}
+
+const source: Pin[] = [
+  { id: "mail", label: "Mail" },
+  { id: "files", label: "Files" },
+  { id: "chat", label: "Chat" },
+];
+const idOf = (pin: Pin) => pin.id;
+
+function memoryStorage(): UserOrderStorage & { data: Map<string, string> } {
+  const data = new Map<string, string>();
+  return {
+    data,
+    getItem: (key) => data.get(key) ?? null,
+    setItem: (key, value) => {
+      data.set(key, value);
+    },
+  };
+}
+
+let refresh: (pins: Pin[]) => void = () => {};
+
+function Dock({ storage }: { storage: UserOrderStorage }) {
+  const [pins, setPins] = useState(source);
+  refresh = setPins;
+  const ordered = useUserOrder("dock", pins, idOf, { storage });
+  return (
+    <SortableList
+      items={ordered.items}
+      getId={idOf}
+      getLabel={(pin) => pin.label}
+      onChange={ordered.onChange}
+    />
+  );
+}
+
+function shown(container: HTMLElement) {
+  return [...container.querySelectorAll("[data-sortable-row]")].map((row) =>
+    row.getAttribute("data-sortable-row"),
+  );
+}
+
+function moveDown(container: HTMLElement, id: string) {
+  const row = container.querySelector(`[data-sortable-row="${id}"]`) as HTMLElement;
+  row.focus();
+  fireEvent.keyDown(row, { key: " " });
+  fireEvent.keyDown(row, { key: "ArrowDown" });
+  fireEvent.keyDown(row, { key: " " });
+}
+
+describe("applyUserOrder (LC-209)", () => {
+  it("keeps saved places and appends new ids at the end", () => {
+    const result = applyUserOrder(
+      [...source, { id: "maps", label: "Maps" }],
+      ["chat", "mail", "files"],
+      idOf,
+    );
+    expect(result.items.map(idOf)).toEqual(["chat", "mail", "files", "maps"]);
+    expect(result.order).toEqual(["chat", "mail", "files", "maps"]);
+  });
+
+  it("an id missing from a partial read keeps its slot", () => {
+    const result = applyUserOrder([source[0]!, source[2]!], ["files", "chat", "mail"], idOf);
+    expect(result.items.map(idOf)).toEqual(["chat", "mail"]);
+    expect(result.order).toEqual(["files", "chat", "mail"]);
+  });
+});
+
+describe("a reorderable dock keeps the user's order (LC-209)", () => {
+  it("a new item lands last and the others keep their index", () => {
+    const storage = memoryStorage();
+    const { container } = renderWithProviders(<Dock storage={storage} />);
+    moveDown(container, "mail");
+    expect(shown(container)).toEqual(["files", "mail", "chat"]);
+
+    act(() => refresh([...source, { id: "maps", label: "Maps" }]));
+    expect(shown(container)).toEqual(["files", "mail", "chat", "maps"]);
+  });
+
+  it("a refresh in the source's order and a reload both keep the arrangement", () => {
+    const storage = memoryStorage();
+    const first = renderWithProviders(<Dock storage={storage} />);
+    moveDown(first.container, "mail");
+    act(() => refresh([...source]));
+    expect(shown(first.container)).toEqual(["files", "mail", "chat"]);
+    first.unmount();
+
+    const reloaded = renderWithProviders(<Dock storage={storage} />);
+    expect(shown(reloaded.container)).toEqual(["files", "mail", "chat"]);
+    expect(JSON.parse(storage.data.get("dock") ?? "[]")).toEqual(["files", "mail", "chat"]);
+  });
+});

package/src/SortableList/useUserOrder.ts

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+/** Where a user's arrangement lives; defaults to the browser's localStorage. */
+export interface UserOrderStorage {
+  getItem: (key: string) => string | null;
+  setItem: (key: string, value: string) => void;
+}
+
+const memory = new Map<string, string>();
+const memoryStorage: UserOrderStorage = {
+  getItem: (key) => memory.get(key) ?? null,
+  setItem: (key, value) => {
+    memory.set(key, value);
+  },
+};
+
+function defaultStorage(): UserOrderStorage {
+  try {
+    const local = (globalThis as { localStorage?: UserOrderStorage }).localStorage;
+    if (local && typeof local.getItem === "function") return local;
+  } catch {
+    // storage blocked
+  }
+  return memoryStorage;
+}
+
+function readOrder(storage: UserOrderStorage, key: string): string[] {
+  try {
+    const parsed = JSON.parse(storage.getItem(key) ?? "[]") as unknown;
+    return Array.isArray(parsed) ? parsed.filter((id): id is string => typeof id === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * The items in the user's order (LC-209): known ids keep their saved place,
+ * new ids land at the end in the order the source gave them. Ids missing
+ * from this read keep their slot in `order`, so a partial refresh never
+ * reshuffles them.
+ */
+export function applyUserOrder<T>(
+  items: readonly T[],
+  order: readonly string[],
+  getId: (item: T) => string,
+): { items: T[]; order: string[] } {
+  const byId = new Map(items.map((item) => [getId(item), item] as const));
+  const known = new Set(order);
+  const placed = order.flatMap((id) => {
+    const item = byId.get(id);
+    return item === undefined ? [] : [item];
+  });
+  const added = items.filter((item) => !known.has(getId(item)));
+  return {
+    items: [...placed, ...added],
+    order: [...order, ...added.map(getId)],
+  };
+}
+
+export interface UseUserOrderOptions {
+  storage?: UserOrderStorage;
+}
+
+/**
+ * Keeps a hand-arranged collection in the user's order across data refreshes
+ * and reloads. Feed `items` from any source order; render the returned
+ * `items`; pass `onChange` to SortableList.
+ */
+export function useUserOrder<T>(
+  key: string,
+  items: readonly T[],
+  getId: (item: T) => string,
+  options: UseUserOrderOptions = {},
+) {
+  const storage = useMemo(() => options.storage ?? defaultStorage(), [options.storage]);
+  const [order, setOrder] = useState(() => readOrder(storage, key));
+  const arranged = useMemo(() => applyUserOrder(items, order, getId), [items, order, getId]);
+
+  useEffect(() => {
+    if (arranged.order.length === order.length) return;
+    storage.setItem(key, JSON.stringify(arranged.order));
+    setOrder(arranged.order);
+  }, [arranged.order, order.length, storage, key]);
+
+  const onChange = useCallback(
+    (next: T[]) => {
+      const shown = new Set(next.map(getId));
+      const ids = [...next.map(getId), ...order.filter((id) => !shown.has(id))];
+      storage.setItem(key, JSON.stringify(ids));
+      setOrder(ids);
+    },
+    [getId, order, storage, key],
+  );
+
+  return { items: arranged.items, onChange };
+}

package/src/TreeSelect/TreeSelect.rows.spec.tsx

@@ -0,0 +1,44 @@
+/**
+ * LC-222 LIST-HEIGHT-IN-ROWS: the desktop tree panel caps its scroller at a
+ * visible-row count times its row pitch, not a pixel literal.
+ */
+import { listHeightForRows } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import type { TreeNode } from "../views/TreeView";
+import { TreeSelect } from "./index";
+
+afterEach(cleanup);
+
+const nodes: TreeNode[] = Array.from({ length: 12 }, (_, index) => ({
+  id: `n${index}`,
+  label: `Account ${index + 1}`,
+}));
+
+describe("TreeSelect panel height (LC-222)", () => {
+  it("states its cap as eight rows at the row pitch", async () => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+    window.dispatchEvent(new Event("resize"));
+    const { baseElement } = renderWithProviders(<TreeSelect label="Account" nodes={nodes} open />);
+    const scroller = await waitFor(() => {
+      const found = baseElement.querySelector("[data-visible-rows]") as HTMLElement | null;
+      expect(found).toBeTruthy();
+      return found as HTMLElement;
+    });
+    const rows = Number(scroller.getAttribute("data-visible-rows"));
+    const pitch = Number(scroller.getAttribute("data-row-pitch"));
+    expect(rows).toBe(8);
+    expect(pitch).toBeGreaterThan(0);
+    const rowHeights = [...baseElement.querySelectorAll("[data-row-height]")].map((row) =>
+      Number(row.getAttribute("data-row-height")),
+    );
+    expect(new Set(rowHeights)).toEqual(new Set([pitch]));
+    const style = `${scroller.getAttribute("style") ?? ""} ${scroller.className}`;
+    expect(style).toContain(String(listHeightForRows(rows, pitch)));
+  });
+});

package/src/TreeSelect/index.tsx

@@ -26,6 +26,7 @@ import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
+  listHeightForRows,
   useMenuRowCheckInk,
   menuRowChecked,
   useResolvedKnobs,
@@ -617,6 +618,9 @@ function handleTreeKeys(args: {
   }
 }
 
+/** Rows the desktop tree panel shows before it scrolls (LC-222). */
+const TREE_SELECT_VISIBLE_ROWS = 8;
+
 function FloatingTreeSelect({
   nodes,
   value,
@@ -653,6 +657,7 @@ function FloatingTreeSelect({
   accessibilityLabel?: string;
 }) {
   const overlayZIndex = useOverlayZIndex("dropdown");
+  const { knobProps } = useResolvedKnobs();
   const treeId = useId();
   const searchRef = useRef<HTMLInputElement | null>(null);
   const state = useTreeSelectState({ nodes, value, open, defaultExpandedIds });
@@ -790,7 +795,13 @@ function FloatingTreeSelect({
                 activeDescendant={activeDescendant}
                 sizeToken={sizeToken}
               />
-              <YStack overflow="scroll" maxHeight={320} id={treeId}>
+              <YStack
+                overflow="scroll"
+                maxHeight={listHeightForRows(TREE_SELECT_VISIBLE_ROWS, knobProps.nestedControl.px)}
+                data-visible-rows={TREE_SELECT_VISIBLE_ROWS}
+                data-row-pitch={knobProps.nestedControl.px}
+                id={treeId}
+              >
                 <TreeSelectPanelBody
                   rows={state.rows}
                   selectedId={value}

package/src/appShell/TabBar.tsx

@@ -23,6 +23,7 @@ import { isWeb } from "@multiplatform.one/platform";
 import { type ComponentType, type ReactNode, useEffect, useState } from "react";
 import { XStack, YStack } from "tamagui";
 import { materials, useMaterial } from "../Material";
+import { MaterialBlurFill } from "../Material/blur";
 import { Text } from "../Text";
 import { setBottomChromeInset, setFloatingBarMounted, useBottomAccessory } from "./bottomChrome";
 import { useBottomInset } from "./bottomInset";
@@ -248,6 +249,7 @@ export function TabBar({
           onLayout={(event) => setAccessoryHeight(Math.round(event.nativeEvent.layout.height))}
           data-testid={`${testID}-accessory`}
         >
+          <MaterialBlurFill radius={1000} />
           {accessory}
         </XStack>
       ) : null}
@@ -261,6 +263,7 @@ export function TabBar({
         {...material}
         data-testid={`${testID}-capsule`}
       >
+        <MaterialBlurFill radius={1000} />
         {items.map((item) => (
           <TabBarButton
             key={item.key}

package/src/appShell/TabHost.native.spec.tsx

@@ -46,10 +46,18 @@ const fakeTabs: NativeTabs = {
       />
     </div>
   ),
-  Screen: ({ children, tabKey, isFocused, icon, title }) => (
+  Screen: ({
+    children,
+    tabKey,
+    isFocused,
+    icon,
+    title,
+    overrideScrollViewContentInsetAdjustmentBehavior,
+  }) => (
     <section
       data-testid={`native-screen-${tabKey}`}
       data-focused={String(Boolean(isFocused))}
+      data-inset-adjust={String(overrideScrollViewContentInsetAdjustmentBehavior)}
       data-symbol={icon?.ios.name}
       aria-label={title}
     >
@@ -164,6 +172,18 @@ describe("NativeTabHost", () => {
     );
     expect(screen.getByTestId("inset").textContent).toBe("0");
   });
+
+  it("clears the bar once: the published inset, never the native scroll-inset adjustment too (FZ-8640)", () => {
+    renderNative("/pokemon");
+    expect(Number(screen.getByTestId("inset").textContent)).toBeGreaterThanOrEqual(
+      nativeTabBarHeight,
+    );
+    for (const item of items) {
+      expect(
+        screen.getByTestId(`native-screen-${item.key}`).getAttribute("data-inset-adjust"),
+      ).toBe("false");
+    }
+  });
 });
 
 describe("TabHost fallback", () => {

package/src/appShell/TabHost.native.tsx

@@ -13,6 +13,12 @@
  * without RNSTabsHost, a platform other than iOS, or an item without an SF
  * Symbol keeps the MPO TabBar. Android stays on the MPO TabBar until the
  * items carry image icons the Material bar can draw.
+ *
+ * The bar's clearance is the inset this host publishes, as with the MPO
+ * TabBar, so a Screen pads by it whether or not it scrolls. Each tab screen
+ * leaves its scroll view's inset adjustment off: react-native-screens would
+ * otherwise flip the first scroll view to `automatic`, and UIKit would add
+ * the bar's height a second time (FZ-8640).
  */
 import { useGlyphColor, useIdentityInkOnSurface } from "@multiplatform.one/theme";
 import { type ComponentType, type ReactNode, useEffect, useRef, useState } from "react";
@@ -53,6 +59,7 @@ export interface NativeTabs {
     selectedIcon?: IconProp["ios"];
     tabBarItemAccessibilityLabel?: string;
     tabBarItemTestID?: string;
+    overrideScrollViewContentInsetAdjustmentBehavior?: boolean;
   }>;
 }
 
@@ -139,6 +146,7 @@ export function NativeTabHost({
           }
           tabBarItemAccessibilityLabel={item.label}
           tabBarItemTestID={`tab-bar-item-${item.key.replace(/^\/+/, "") || "root"}`}
+          overrideScrollViewContentInsetAdjustmentBehavior={false}
         >
           {item.key === focusedKey ? children : null}
         </Screen>

package/src/charts/Sparkline.tsx

@@ -9,8 +9,8 @@ import type { ChartCurve, ChartDatum } from "./types";
 import { useChartTheme } from "./useChartTheme";
 
 export interface SparklineProps extends Omit<YStackProps, "children" | "width" | "height"> {
-  /** Series values — bare numbers or full data points. */
-  data: Array<number | ChartDatum>;
+  /** Series values — bare numbers or full data points. Null is no reading (LC-220). */
+  data: Array<number | ChartDatum> | null | undefined;
   /** Drawing height as a theme size token or pixels (default 36). */
   height?: ChartHeight;
   /** Fixed width; omit to track the parent responsively. */
@@ -50,7 +50,7 @@ export function Sparkline({
   const { t } = useTranslation();
   const { palette } = useChartTheme();
   const stroke = color ?? palette.single;
-  const normalized: ChartDatum[] = data.map((entry, index) =>
+  const normalized: ChartDatum[] = (data ?? []).map((entry, index) =>
     typeof entry === "number" ? { label: String(index + 1), value: entry } : entry,
   );
   const ariaLabel =

package/src/componentColors.ts

@@ -131,7 +131,7 @@ export const componentColors = {
   debug: "$color9",
 
   /**
-   * The round material plate under an icon control floating over a photo
+   * The flat round plate under an icon control floating over a photo
    * (LC-176). The fill sits steps above the viewer's dark ground so the
    * plate reads on black as well as on a bright frame (FZ-8009 r2).
    */

package/src/index.ts

@@ -5,22 +5,29 @@ export {
   SortableHandle,
   SortableHandleWell,
   SortableSessionProvider,
+  applyUserOrder,
   useSortableRows,
+  useUserOrder,
 } from "./SortableList";
 export type {
   SortableListProps,
   SortableDisabledStyle,
   SortableSession,
   UseSortableRowsOptions,
+  UseUserOrderOptions,
+  UserOrderStorage,
 } from "./SortableList";
 export * from "./Badge";
 export * from "./Carousel";
 export * from "./Chip";
 export * from "./Kbd";
 export * from "./CopyField";
+export * from "./Diff";
+export * from "./ElapsedProgress";
 export * from "./DotIndicator";
 export * from "./DropdownMenu";
 export * from "./ContextMenu";
+export * from "./MachineLiteral";
 export * from "./Material";
 export * from "./Meter";
 export { Lightbox, useLightbox } from "./Lightbox";

package/src/layouts/page.tsx

@@ -517,14 +517,7 @@ export function PageHeader({
             >
               {/* LC-153: page-head actions are a bar; neutral buttons go plain. */}
               <Surface bar>
-                <IconButtonGroup
-                  {...knobProps.gap}
-                  justifyContent="flex-end"
-                  flexWrap="wrap"
-                  flexGrow={1}
-                  flexShrink={1}
-                  minWidth={0}
-                >
+                <IconButtonGroup {...knobProps.gap} justifyContent="flex-end">
                   {actions}
                 </IconButtonGroup>
               </Surface>

package/src/layouts/pageChrome.phone.spec.tsx

@@ -61,4 +61,18 @@ describe("PageHeader actions (LC-142)", () => {
     expect(atoms(row, "_jc-")).toEqual(["_jc-flex-end"]);
     expect(atoms(row?.parentElement ?? null, "_fw-")).toEqual([]);
   });
+
+  it("hug their buttons: the group never wraps or grows (FZ-8521)", () => {
+    const { container } = renderWithProviders(
+      <PageHeader
+        title="Pokemon"
+        subtitle="21 Pokemon in the Pokédex"
+        actions={<button type="button">Add</button>}
+      />,
+    );
+    const group = container.querySelector("[data-page-header-actions] [data-mp-icon-button-group]");
+    expect(group).toBeTruthy();
+    expect(atoms(group, "_fw-")).toEqual([]);
+    expect(atoms(group, "_fg-")).toEqual([]);
+  });
 });

package/src/presentationEmpty.spec.tsx

@@ -0,0 +1,71 @@
+/**
+ * LC-220 EMPTY-IS-DRAWN: a presentation component given no reading draws its
+ * own empty form at the populated box (the bare track, the em dash, the empty
+ * surface), shows no "0", and its accessible name says there is no reading.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Sparkline } from "./charts/Sparkline";
+import { Default as DiffMain, NoReading } from "./Diff/Diff.stories";
+import { Diff, type DiffProps } from "./Diff";
+import { Meter, type MeterProps } from "./Meter";
+import { Default as MeterMain, Unknown } from "./Meter/Meter.stories";
+
+afterEach(cleanup);
+
+const noZero = /(^|[^\d.])0([^\d.]|$)/;
+
+describe("presentation components draw their empty form (LC-220)", () => {
+  it("Meter: the bare track at the populated height, an em dash, no fill, no reading spoken", () => {
+    const full = renderWithProviders(<Meter {...(MeterMain.args as MeterProps)} />);
+    const fullRail = full.container.querySelector("[role='meter']") as HTMLElement;
+    const height = fullRail.getAttribute("data-meter-track-height");
+    full.unmount();
+
+    const { container } = renderWithProviders(
+      <Meter {...(Unknown.args as MeterProps)} value={null} />,
+    );
+    const rail = container.querySelector("[role='meter']") as HTMLElement;
+    expect(rail).toBeTruthy();
+    expect(rail.getAttribute("data-meter-track-height")).toBe(height);
+    expect(rail.getAttribute("data-meter-fill")).toBeNull();
+    expect(rail.getAttribute("aria-valuenow")).toBeNull();
+    expect(rail.getAttribute("aria-valuetext")).toBe("No reading");
+    expect(container.textContent).toContain("—");
+    expect(container.textContent).not.toMatch(noZero);
+  });
+
+  it("Diff: the same frame with an em dash and a no-reading name, never 0 added", () => {
+    const full = renderWithProviders(<Diff {...(DiffMain.args as DiffProps)} />);
+    const fullFrame = full.container.querySelector("[role='region']") as HTMLElement;
+    const fullClass = fullFrame.className;
+    full.unmount();
+
+    const { container } = renderWithProviders(<Diff {...(NoReading.args as DiffProps)} />);
+    const frame = container.querySelector("[role='region']") as HTMLElement;
+    expect(frame.className).toBe(fullClass);
+    expect(frame.getAttribute("aria-label")).toMatch(/no reading$/);
+    expect(container.textContent).toBe("—");
+    expect(container.textContent).not.toMatch(noZero);
+  });
+
+  it("Sparkline: the surface keeps its box and says no data, with no point drawn", () => {
+    const full = renderWithProviders(
+      <Sparkline width={160} data={[3, 5, 4, 8]} title="Sessions" />,
+    );
+    const fullSvg = full.container.querySelector("svg") as SVGElement;
+    const height = fullSvg.getAttribute("height");
+    full.unmount();
+
+    const { container } = renderWithProviders(
+      <Sparkline width={160} data={null} title="Sessions" />,
+    );
+    const svg = container.querySelector("svg") as SVGElement;
+    expect(svg.getAttribute("height")).toBe(height);
+    expect(svg.getAttribute("width")).toBe("160");
+    expect(screen.getByRole("img").getAttribute("aria-label")).toMatch(/no data$/);
+    expect(container.querySelectorAll("path")).toHaveLength(0);
+    expect(container.textContent).not.toMatch(noZero);
+  });
+});