@multiplatform.one/components 7.4.1 → 7.5.0

package/src/Skeleton/index.tsx

@@ -106,10 +106,14 @@ export function Skeleton({
   if (isWeb) ensureShimmerStyles();
 
   const decorative = props["aria-hidden"] === true || !shouldAnnounce;
+  // Corner-smoothing is an R-SCALE/R-CLAMP arc. Circular is R-PILL (a
+  // squircle would break 1:1); rectangular is square by variant.
+  const smoothingClass =
+    variant === "text" || variant === "rounded" ? knobProps.borderRadius.className : undefined;
   const boneClass = [
     "mp-skeleton-bone",
     pulsing ? "mp-skeleton-pulse" : "mp-skeleton-static",
-    variant !== "rectangular" ? knobProps.borderRadius.className : undefined,
+    smoothingClass,
     className,
   ]
     .filter(Boolean)
@@ -138,6 +142,16 @@ export function Skeleton({
       {...(style ? { style } : undefined)}
       pointerEvents="none"
       data-skeleton=""
+      data-skeleton-variant={variant}
+      data-animate={pulsing ? "true" : "false"}
+      data-width={width != null ? String(width) : undefined}
+      data-height={
+        height != null
+          ? String(height)
+          : variant === "text"
+            ? String(resolveTextHeight(knobProps.sizeToken, "body"))
+            : undefined
+      }
       aria-hidden={decorative ? true : undefined}
       role={decorative ? undefined : "status"}
       aria-busy={decorative ? undefined : true}
@@ -185,6 +199,7 @@ export function SkeletonText({
         width={width ?? "100%"}
         gap={gap}
         data-skeleton-text=""
+        data-lines={String(count)}
         aria-hidden={decorative ? true : undefined}
         role={decorative ? undefined : "status"}
         aria-busy={decorative ? undefined : true}
@@ -224,6 +239,7 @@ export function SkeletonCircle({
       maxWidth={diameter}
       aspectRatio={1}
       alignSelf="flex-start"
+      data-diameter={String(diameter)}
     />
   );
 }

package/src/SkipLink/SkipLink.spec.tsx

@@ -64,6 +64,15 @@ describe("SkipLink", () => {
     expect(target.getAttribute("tabindex")).toBe("-1");
   });
 
+  it("paints the skip label at weight 400 (R7 / §6.1)", () => {
+    const { container } = renderWithTarget();
+    const label = container.querySelector("a.mp-skip-link")?.querySelector("span, p, div");
+    const node = (label ?? container.querySelector("a.mp-skip-link")) as HTMLElement;
+    expect(node).toBeTruthy();
+    const weight = node.style.fontWeight || getComputedStyle(node).fontWeight;
+    expect(["400", "normal"]).toContain(String(weight));
+  });
+
   it("reports the focused target through onSkip", () => {
     const onSkip = vi.fn();
     const { container } = renderWithProviders(

package/src/SkipLink/index.tsx

@@ -181,8 +181,8 @@ export function SkipLink({
       >
         <SizableText
           {...knobProps.body}
-          fontWeight="600"
-          fontSize="$3"
+          {...knobProps.label}
+          fontWeight="400"
           color="$color12"
           whiteSpace="nowrap"
         >

package/src/SortableList/SortableHandle.tsx

@@ -0,0 +1,97 @@
+import {
+  ensureKeyboardModalityTracking,
+  keyboardFocusRingProps,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
+import { DotsSixVerticalIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { View } from "tamagui";
+import { useTranslation } from "../shared/i18n";
+import { withInterp } from "../shared/t";
+import { useSortableDragging } from "./useSortableRows";
+
+const GRIP_PX = 16;
+
+export interface SortableHandleProps {
+  label: string;
+  itemId: string;
+  dragging?: boolean;
+  compact?: boolean;
+  onPointerDown?: (e: {
+    pointerType?: string;
+    clientY: number;
+    preventDefault?: () => void;
+  }) => void;
+  onKeyDown?: (e: { key: string; preventDefault: () => void }) => void;
+}
+
+/**
+ * Leading grab handle: nested well, 16px 6-dot grip, opacity .45 → 1.
+ * Focusable (W1-focus-ring): 2px ring, offset 0. Keyboard path can also
+ * live on the row — this control is tabIndex 0 so tables have a target
+ * that is not an in-cell editor.
+ */
+export function SortableHandle({
+  label,
+  itemId,
+  dragging,
+  compact,
+  onPointerDown,
+  onKeyDown,
+}: SortableHandleProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ compact });
+  const well = knobProps.nestedControl.px;
+  const [kb, setKb] = useState(false);
+  const isDragging = useSortableDragging(itemId, dragging);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+
+  return (
+    <View
+      role="button"
+      tabIndex={0}
+      aria-label={withInterp(t("Reorder {{label}}", { label }), { label })}
+      width={well}
+      height={well}
+      minWidth={well}
+      minHeight={well}
+      alignItems="center"
+      justifyContent="center"
+      opacity={isDragging ? 1 : 0.45}
+      hoverStyle={{ opacity: 1 }}
+      {...({
+        tag: "button",
+        cursor: isDragging ? "grabbing" : "grab",
+        hitSlop: knobProps.nestedControl.hitSlop,
+        ...(kb ? keyboardFocusRingProps : {}),
+        "data-sortable-handle": itemId,
+        "data-focus-ring": "2/0",
+        onPointerDown: (e: {
+          pointerType?: string;
+          clientY: number;
+          preventDefault?: () => void;
+        }) => onPointerDown?.(e),
+        onKeyDown: (e: { key: string; preventDefault: () => void }) => onKeyDown?.(e),
+        onFocus: () => setKb(wasKeyboardFocus()),
+        onBlur: () => setKb(false),
+      } as Record<string, unknown>)}
+    >
+      <DotsSixVerticalIcon size={GRIP_PX} weight="bold" />
+    </View>
+  );
+}
+
+export function SortableHandleWell({ itemId, compact }: { itemId: string; compact?: boolean }) {
+  const { knobProps } = useResolvedKnobs({ compact });
+  const well = knobProps.nestedControl.px;
+  return (
+    <View
+      width={well}
+      height={well}
+      minWidth={well}
+      minHeight={well}
+      {...({ "data-sortable-well": itemId } as Record<string, unknown>)}
+    />
+  );
+}

package/src/SortableList/SortableList.spec.tsx

@@ -0,0 +1,122 @@
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { SortableList } from "./index";
+
+const ITEMS = [
+  { id: "mon", label: "Monday standup" },
+  { id: "tue", label: "Tuesday review" },
+  { id: "dep", label: "Deploy window" },
+  { id: "ret", label: "Retro notes" },
+];
+
+function Harness({
+  onChange = vi.fn(),
+  readOnly,
+  canReorder,
+}: {
+  onChange?: (next: typeof ITEMS) => void;
+  readOnly?: boolean;
+  canReorder?: (item: (typeof ITEMS)[number], index: number) => boolean;
+}) {
+  const [items, setItems] = useState(ITEMS);
+  return (
+    <SortableList
+      items={items}
+      getId={(item) => item.id}
+      getLabel={(item) => item.label}
+      canReorder={canReorder}
+      readOnly={readOnly}
+      onChange={(next) => {
+        setItems(next);
+        onChange(next);
+      }}
+    />
+  );
+}
+
+function liveRegion() {
+  return document.querySelector('[data-sortable-live="true"]');
+}
+
+describe("SortableList", () => {
+  it("completes a keyboard-only reorder and announces each step (LC-43, board 03)", () => {
+    const onChange = vi.fn();
+    const { container } = renderWithProviders(<Harness onChange={onChange} />);
+    const rows = container.querySelectorAll("[data-sortable-row]");
+    expect(rows).toHaveLength(4);
+
+    const tuesday = container.querySelector('[data-sortable-row="tue"]') as HTMLElement;
+    tuesday.focus();
+    fireEvent.keyDown(tuesday, { key: " " });
+    expect(liveRegion()?.getAttribute("aria-live")).toBe("polite");
+    expect(liveRegion()?.textContent).toBe(
+      "Lifted “Tuesday review”, position 2 of 4. Use arrow keys to move, space to drop, escape to cancel.",
+    );
+
+    fireEvent.keyDown(tuesday, { key: "ArrowDown" });
+    expect(liveRegion()?.textContent).toBe("Moved “Tuesday review”, position 3 of 4.");
+
+    fireEvent.keyDown(tuesday, { key: "ArrowDown" });
+    expect(liveRegion()?.textContent).toBe("Moved “Tuesday review”, position 4 of 4.");
+
+    const beforeBoundary = liveRegion()?.textContent;
+    fireEvent.keyDown(tuesday, { key: "ArrowDown" });
+    expect(liveRegion()?.textContent).toBe(beforeBoundary);
+
+    fireEvent.keyDown(tuesday, { key: " " });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0].map((r: { id: string }) => r.id)).toEqual([
+      "mon",
+      "dep",
+      "ret",
+      "tue",
+    ]);
+    expect(liveRegion()?.textContent).toBe("Dropped “Tuesday review”, position 4 of 4.");
+    expect(document.activeElement?.getAttribute("data-sortable-row")).toBe("tue");
+  });
+
+  it("cancels a lift with Escape and leaves the list unchanged", () => {
+    const onChange = vi.fn();
+    const { container } = renderWithProviders(<Harness onChange={onChange} />);
+    const tuesday = container.querySelector('[data-sortable-row="tue"]') as HTMLElement;
+    tuesday.focus();
+    fireEvent.keyDown(tuesday, { key: " " });
+    fireEvent.keyDown(tuesday, { key: "ArrowDown" });
+    fireEvent.keyDown(tuesday, { key: "Escape" });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(liveRegion()?.textContent).toBe(
+      "Reorder cancelled. “Tuesday review” returned to position 2.",
+    );
+    expect(
+      container.querySelectorAll("[data-sortable-row]")[1].getAttribute("data-sortable-row"),
+    ).toBe("tue");
+  });
+
+  it("paints the grab handle as a focusable with a 2px offset-0 ring well", () => {
+    const { container } = renderWithProviders(<Harness />);
+    const handle = container.querySelector('[data-sortable-handle="tue"]') as HTMLElement;
+    expect(handle.getAttribute("role")).toBe("button");
+    expect(handle.getAttribute("aria-label")).toMatch(/Tuesday review/);
+    expect(handle.tabIndex).toBe(0);
+    handle.focus();
+    expect(
+      handle.style.outlineWidth === "2px" || handle.getAttribute("data-focus-ring") === "2/0",
+    ).toBe(true);
+  });
+
+  it("omits the handle on a row that cannot drag and reserves the well", () => {
+    const { container } = renderWithProviders(<Harness canReorder={(item) => item.id !== "tue"} />);
+    expect(container.querySelector('[data-sortable-handle="tue"]')).toBeNull();
+    expect(container.querySelector('[data-sortable-well="tue"]')).toBeTruthy();
+    expect(
+      container.querySelector('[data-sortable-row="tue"]')?.getAttribute("aria-disabled"),
+    ).toBe("true");
+  });
+
+  it("renders no handles when readOnly", () => {
+    const { container } = renderWithProviders(<Harness readOnly />);
+    expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(0);
+  });
+});

package/src/SortableList/SortableList.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { SortableList } from "./index";
+
+const SEED = [
+  { id: "mon", label: "Monday standup" },
+  { id: "tue", label: "Tuesday review" },
+  { id: "dep", label: "Deploy window" },
+  { id: "ret", label: "Retro notes" },
+];
+
+const meta: Meta<typeof SortableList> = {
+  title: "Components/SortableList",
+  component: SortableList,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Grab-handle plus keyboard reorder. One kanbanDnd session serves List, DataTable, and ChildTable (LC-16 / LC-43).",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof SortableList>;
+
+function Demo(props: { readOnly?: boolean; locked?: string }) {
+  const [items, setItems] = useState(SEED);
+  return (
+    <SortableList
+      items={items}
+      getId={(item) => item.id}
+      getLabel={(item) => item.label}
+      canReorder={props.locked ? (item) => item.id !== props.locked : undefined}
+      readOnly={props.readOnly}
+      onChange={setItems}
+      aria-label="Sprint rituals"
+    />
+  );
+}
+
+export const Default: Story = {
+  name: "Main",
+  render: () => <Demo />,
+};
+
+export const ReadOnly: Story = {
+  render: () => <Demo readOnly />,
+};
+
+export const LockedRow: Story = {
+  render: () => <Demo locked="tue" />,
+};

package/src/SortableList/index.tsx

@@ -0,0 +1,212 @@
+import {
+  MIN_PRESS_TARGET,
+  ensureKeyboardModalityTracking,
+  keyboardFocusRingProps,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
+import { useCallback, useId, useRef, useState, type ReactNode } from "react";
+import { Text, View, XStack, YStack, type YStackProps } from "tamagui";
+import { useTranslation } from "../shared/i18n";
+import { LIFT_SCALE } from "../views/kanbanDnd";
+import { SortableHandle, SortableHandleWell } from "./SortableHandle";
+import { useSortableRows } from "./useSortableRows";
+
+export { SortableHandle, SortableHandleWell } from "./SortableHandle";
+export { SortableSessionProvider, useSortableRows } from "./useSortableRows";
+export type { SortableSession, UseSortableRowsOptions } from "./useSortableRows";
+
+export type SortableDisabledStyle = "keepLabel" | "dimWhole";
+
+export type SortableListProps<T> = Omit<
+  YStackProps,
+  "children" | "onChange" | "disabled" | "aria-label"
+> & {
+  items: T[];
+  getId: (item: T, index: number) => string;
+  getLabel: (item: T, index: number) => string;
+  renderItem?: (item: T, index: number) => ReactNode;
+  /** Canonical change: the reordered array (LC-14). */
+  onChange?: (next: T[]) => void;
+  canReorder?: (item: T, index: number) => boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  disabledStyle?: SortableDisabledStyle;
+  compact?: boolean;
+  emptyMessage?: string;
+  "aria-label"?: string;
+};
+
+const LIFT_SHADOW = {
+  shadowColor: "#000",
+  shadowOffset: { width: 0, height: 10 },
+  shadowOpacity: 0.15,
+  shadowRadius: 20,
+} as const;
+
+export function SortableList<T>({
+  items,
+  getId,
+  getLabel,
+  renderItem,
+  onChange,
+  canReorder,
+  disabled,
+  readOnly,
+  disabledStyle = "keepLabel",
+  compact,
+  emptyMessage: emptyMessageProp,
+  "aria-label": ariaLabel,
+  ...stackProps
+}: SortableListProps<T>) {
+  const { t } = useTranslation();
+  const emptyMessage = emptyMessageProp ?? t("No rows yet");
+  const { knobProps } = useResolvedKnobs({ compact });
+  const listId = useId();
+  const containerRef = useRef<HTMLElement | null>(null);
+  const enabled = !disabled && !readOnly && !!onChange;
+  const [rowKb, setRowKb] = useState<string | null>(null);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+
+  const sortable = useSortableRows({
+    items,
+    getId,
+    getLabel,
+    canReorder,
+    onChange,
+    enabled,
+    containerRef,
+  });
+
+  const onRowFocus = useCallback(
+    (id: string, index: number) => {
+      sortable.setFocusedIndex(index);
+      if (wasKeyboardFocus()) setRowKb(id);
+    },
+    [sortable],
+  );
+
+  return (
+    <YStack
+      ref={containerRef as never}
+      {...knobProps.surface}
+      {...knobProps.borderRadiusOuter}
+      overflow="hidden"
+      role="list"
+      aria-label={ariaLabel}
+      id={listId}
+      {...stackProps}
+    >
+      {items.length === 0 ? (
+        <YStack minHeight={88} alignItems="center" justifyContent="center" opacity={0.5}>
+          <Text {...knobProps.body} color="$color11">
+            {emptyMessage}
+          </Text>
+        </YStack>
+      ) : (
+        items.map((item, index) => {
+          const id = sortable.ids[index];
+          const label = sortable.labels[index];
+          const canDrag = sortable.rowEnabled(index);
+          const isSource = sortable.session?.id === id;
+          const isKbFocus = rowKb === id && !sortable.session;
+          const y = sortable.translateForIndex(index);
+          const dimWhole = !canDrag && disabledStyle === "dimWhole";
+          return (
+            <XStack
+              key={id}
+              role="listitem"
+              tabIndex={canDrag || !enabled ? 0 : -1}
+              minHeight={MIN_PRESS_TARGET}
+              alignItems="center"
+              gap="$2"
+              paddingLeft="$2"
+              paddingRight="$3"
+              opacity={isSource && sortable.session?.mode === "pointer" ? 0.4 : dimWhole ? 0.5 : 1}
+              backgroundColor={
+                isSource && sortable.session?.mode === "pointer" ? "$color1" : "transparent"
+              }
+              borderWidth={isSource && sortable.session?.mode === "pointer" ? 1 : 0}
+              borderStyle={isSource && sortable.session?.mode === "pointer" ? "dashed" : "solid"}
+              borderColor="$color7"
+              y={y}
+              hoverStyle={{ backgroundColor: "$color3" }}
+              {...({
+                ...(isKbFocus ? keyboardFocusRingProps : { outlineWidth: 0 }),
+                "data-sortable-row": id,
+                "aria-disabled": canDrag ? undefined : true,
+                onKeyDown: (e: { key: string; preventDefault: () => void }) =>
+                  sortable.onRowKeyDown(index, e),
+                onFocus: () => onRowFocus(id, index),
+                onBlur: () => setRowKb((cur) => (cur === id ? null : cur)),
+              } as Record<string, unknown>)}
+            >
+              {canDrag ? (
+                <SortableHandle
+                  label={label}
+                  itemId={id}
+                  compact={compact}
+                  dragging={isSource}
+                  onPointerDown={(e) => sortable.onHandlePointerDown(index, e)}
+                  onKeyDown={(e) => sortable.onHandleKeyDown(index, e)}
+                />
+              ) : enabled ? (
+                <SortableHandleWell itemId={id} compact={compact} />
+              ) : null}
+              <XStack flex={1} minWidth={0} alignItems="center" opacity={dimWhole ? 1 : undefined}>
+                {renderItem ? (
+                  renderItem(item, index)
+                ) : (
+                  <Text {...knobProps.body} color="$color12" numberOfLines={1} flex={1}>
+                    {label}
+                  </Text>
+                )}
+              </XStack>
+            </XStack>
+          );
+        })
+      )}
+
+      {sortable.session?.mode === "keyboard" ? (
+        <View
+          position="absolute"
+          left={0}
+          right={0}
+          y={sortable.session.targetIndex * (sortable.session.size || MIN_PRESS_TARGET)}
+          minHeight={MIN_PRESS_TARGET}
+          alignItems="center"
+          paddingLeft="$2"
+          paddingRight="$3"
+          backgroundColor="$color2"
+          {...knobProps.borderRadius}
+          borderWidth={1}
+          borderColor="$borderColor"
+          scale={LIFT_SCALE}
+          {...LIFT_SHADOW}
+          pointerEvents="none"
+          zIndex={5}
+          {...({ "data-sortable-fly": sortable.session.id } as Record<string, unknown>)}
+        >
+          <XStack alignItems="center" gap="$2" minHeight={MIN_PRESS_TARGET}>
+            <SortableHandle label={sortable.session.label} itemId={sortable.session.id} dragging />
+            <Text {...knobProps.body}>{sortable.session.label}</Text>
+          </XStack>
+        </View>
+      ) : null}
+
+      {enabled ? (
+        <View
+          position="absolute"
+          width={1}
+          height={1}
+          overflow="hidden"
+          opacity={0}
+          pointerEvents="none"
+          {...sortable.liveProps}
+        >
+          <Text>{sortable.announcement}</Text>
+        </View>
+      ) : null}
+    </YStack>
+  );
+}