@multiplatform.one/forms 7.5.0 → 7.6.1

package/src/fields/ColorPicker/PresetSwatches.spec.tsx

@@ -0,0 +1,71 @@
+/**
+ * PresetSwatches spec (MPO-117). The row is a radiogroup of swatches.
+ * ColorPicker owns the popover; this file only covers the exported grid.
+ */
+
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { PresetSwatches } from "./parts";
+
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  Palette: () => null,
+  X: () => null,
+  Check: () => null,
+  Pipette: () => null,
+}));
+
+const BRAND = ["#1E40AF", "#3B82F6", "#BFDBFE"];
+
+describe("PresetSwatches", () => {
+  it("renders a radiogroup of radios for each preset", () => {
+    renderWithProviders(
+      <PresetSwatches presetColors={BRAND} selectedColor="#3B82F6" onSelect={vi.fn()} />,
+    );
+    expect(screen.getByRole("radiogroup", { name: "Color presets" })).toBeTruthy();
+    const radios = screen.getAllByRole("radio");
+    expect(radios).toHaveLength(BRAND.length);
+  });
+
+  it("marks the selected hex aria-checked", () => {
+    renderWithProviders(
+      <PresetSwatches presetColors={BRAND} selectedColor="#3B82F6" onSelect={vi.fn()} />,
+    );
+    const selected = screen.getByRole("radio", { name: "Color #3B82F6" });
+    expect(selected.getAttribute("aria-checked")).toBe("true");
+    const other = screen.getByRole("radio", { name: "Color #1E40AF" });
+    expect(other.getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("onSelect fires with the hex of the pressed swatch", () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      <PresetSwatches presetColors={BRAND} selectedColor={null} onSelect={onSelect} />,
+    );
+    fireEvent.click(screen.getByRole("radio", { name: "Color #1E40AF" }));
+    expect(onSelect).toHaveBeenCalledWith("#1E40AF");
+  });
+
+  it("empty presetColors renders nothing", () => {
+    const { container } = renderWithProviders(
+      <PresetSwatches presetColors={[]} selectedColor={null} onSelect={vi.fn()} />,
+    );
+    expect(container.querySelector('[role="radiogroup"]')).toBeNull();
+    expect(container.textContent).toBe("");
+  });
+
+  it("null entry is the no-color radio and reports null", () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      <PresetSwatches
+        presetColors={[{ name: "None", value: null }, "#3B82F6"]}
+        selectedColor={null}
+        onSelect={onSelect}
+      />,
+    );
+    const none = screen.getByRole("radio", { name: "None" });
+    expect(none.getAttribute("aria-checked")).toBe("true");
+    fireEvent.click(screen.getByRole("radio", { name: "Color #3B82F6" }));
+    expect(onSelect).toHaveBeenCalledWith("#3B82F6");
+  });
+});

package/src/fields/ColorPicker/PresetSwatches.stories.tsx

@@ -0,0 +1,94 @@
+/**
+ * PresetSwatches — the color-preset row ColorPicker embeds. Exported from
+ * the forms barrel, previously invisible in Kitchen Sink because it had no
+ * story of its own.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Text, YStack } from "tamagui";
+import { PresetSwatches } from "./parts";
+
+const BRAND = ["#1E40AF", "#1D4ED8", "#2563EB", "#3B82F6", "#60A5FA", "#93C5FD", "#BFDBFE"];
+
+const meta: Meta<typeof PresetSwatches> = {
+  title: "Forms/PresetSwatches",
+  component: PresetSwatches,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Radiogroup of preset color swatches. Named entries, hex strings, and a null 'no color' chip.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PresetSwatches>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const Example = () => {
+      const [selected, setSelected] = useState<string | null>(BRAND[3]);
+      return (
+        <YStack gap="$3" padding="$4" width={280}>
+          <PresetSwatches
+            presetColors={BRAND}
+            selectedColor={selected}
+            onSelect={(next) => {
+              setSelected(next);
+              action("onSelect")(next);
+            }}
+          />
+          <Text fontSize="$2" color="$color10">
+            {selected ?? "none"}
+          </Text>
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};
+
+export const Selected: Story = {
+  render: () => (
+    <YStack padding="$4" width={280}>
+      <PresetSwatches presetColors={BRAND} selectedColor="#3B82F6" onSelect={action("onSelect")} />
+    </YStack>
+  ),
+};
+
+/** Null entry is the "no color" chip with the diagonal strike. */
+export const NoColor: Story = {
+  render: () => {
+    const Example = () => {
+      const [selected, setSelected] = useState<string | null>(null);
+      return (
+        <YStack gap="$3" padding="$4" width={280}>
+          <PresetSwatches
+            presetColors={[{ name: "None", value: null }, ...BRAND]}
+            selectedColor={selected}
+            onSelect={setSelected}
+          />
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};
+
+/** Empty list paints nothing; the host owns the empty marker. */
+export const Empty: Story = {
+  render: () => (
+    <YStack padding="$4">
+      <Text fontSize="$2" color="$color10">
+        empty presetColors — row is null
+      </Text>
+      <PresetSwatches presetColors={[]} selectedColor={null} onSelect={action("onSelect")} />
+    </YStack>
+  ),
+};

package/src/fields/Combobox/Combobox.spec.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { Combobox } from "./index";
@@ -313,5 +313,68 @@ describe("Combobox", () => {
       expect(activeOption(result.container)?.textContent).toContain("Carrot");
       expect(activeOption(result.container)?.getAttribute("role")).toBe("option");
     });
+
+    // The sheet core (<= OVERLAY_BREAKPOINT, and every native render) used to
+    // build headers itself from source order, so interleaved groups emitted a
+    // REPEAT header and the rows stayed unclustered — two different lists from
+    // one set of props. Both cores now go through groupComboboxOptions.
+    it("the sheet renders the same headers and row order as the desktop panel", async () => {
+      function shot(root: HTMLElement) {
+        return {
+          headers: [...root.querySelectorAll("[data-combobox-group-header]")].map(
+            (el) => el.textContent,
+          ),
+          rows: [...root.querySelectorAll('[role="option"]')].map((el) => ({
+            label: el.textContent,
+            index: el.getAttribute("data-combobox-index"),
+          })),
+        };
+      }
+
+      window.innerWidth = 1200;
+      const desktop = renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+      const onDesktop = shot(document.body);
+      desktop.unmount();
+
+      window.innerWidth = 500;
+      renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+      const onSheet = shot(document.body);
+
+      expect(onDesktop.headers).toEqual(["Fruit", "Vegetable"]);
+      expect(onSheet.headers).toEqual(onDesktop.headers);
+      expect(onSheet.rows).toEqual(onDesktop.rows);
+      // One header per group: a repeated label is the defect this guards.
+      expect(new Set(onSheet.headers).size).toBe(onSheet.headers.length);
+    });
+
+    // The sheet's activeIndex indexes the same grouped list the sheet renders,
+    // so arrows land on the row the user sees rather than the source-order row.
+    it("sheet ArrowDown follows the rendered row order, not source order", async () => {
+      window.innerWidth = 500;
+      renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+
+      const rows = [...document.body.querySelectorAll('[role="option"]')];
+      expect(rows.map((el) => el.textContent?.trim())).toEqual(["Apple", "Banana", "Carrot"]);
+
+      const search = document.body.querySelector("input");
+      expect(search).toBeTruthy();
+      // activeIndex starts at 0 (Apple); one ArrowDown must highlight the row
+      // rendered second (Banana), which is sortedFiltered[2], not [1].
+      await act(async () => {
+        fireEvent.keyDown(search!, { key: "ArrowDown" });
+      });
+      const active = document.body.querySelector('[data-active="true"]');
+      expect(active?.textContent).toContain("Banana");
+      expect(active?.getAttribute("data-combobox-index")).toBe("1");
+    });
   });
 });

package/src/fields/Combobox/index.tsx

@@ -1918,6 +1918,17 @@ function NativeComboboxCore({
     return orderOptionsBySelected(filtered, current, selectedOrder);
   }, [filtered, value, filter, selectedOrder]);
 
+  // Same grouping the floating core uses (`groupComboboxOptions`, the mechanism
+  // mpo-floating-measured.md §2.3 names as ours): rows cluster by group so each
+  // group gets exactly ONE header. Rendering source order here emitted a repeat
+  // header for interleaved groups and disagreed with the desktop panel for
+  // identical props. `activeIndex` indexes `navigableOptions`, which IS the
+  // render order, so arrows still land on the row the user sees (MPO-38 AC-6).
+  const { flatOptions: navigableOptions } = useMemo(
+    () => groupComboboxOptions(sortedFiltered),
+    [sortedFiltered],
+  );
+
   const searchCleanupRef = useRef<(() => void) | null>(null);
   useEffect(() => {
     if (!onSearch || !open) return;
@@ -1942,8 +1953,8 @@ function NativeComboboxCore({
     }
   }, [open]);
 
-  const totalItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
-  const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  const totalItems = navigableOptions.length + (showCreateOption ? 1 : 0);
+  const createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   const listboxId = comboboxListboxId(id);
   const activeDescendant =
     open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : undefined;
@@ -2028,8 +2039,8 @@ function NativeComboboxCore({
         e.preventDefault();
         if (activeIndex === createOptionIndex && showCreateOption) {
           handleCreate();
-        } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
-          handleSelect(sortedFiltered[activeIndex]);
+        } else if (activeIndex != null && activeIndex >= 0 && navigableOptions[activeIndex]) {
+          handleSelect(navigableOptions[activeIndex]);
           if (e.key === "Enter" || !multiple) setOpen(false);
         }
       }
@@ -2039,7 +2050,7 @@ function NativeComboboxCore({
       createOptionIndex,
       showCreateOption,
       activeIndex,
-      sortedFiltered,
+      navigableOptions,
       handleCreate,
       handleSelect,
       multiple,
@@ -2066,8 +2077,8 @@ function NativeComboboxCore({
         e.stopPropagation();
         if (activeIndex === createOptionIndex && showCreateOption) {
           handleCreate();
-        } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
-          handleSelect(sortedFiltered[activeIndex]);
+        } else if (activeIndex != null && activeIndex >= 0 && navigableOptions[activeIndex]) {
+          handleSelect(navigableOptions[activeIndex]);
           if (e.key === "Enter" || !multiple) setOpen(false);
         } else {
           setOpen(false);
@@ -2081,7 +2092,7 @@ function NativeComboboxCore({
     activeIndex,
     createOptionIndex,
     showCreateOption,
-    sortedFiltered,
+    navigableOptions,
     handleCreate,
     handleSelect,
     multiple,
@@ -2138,12 +2149,12 @@ function NativeComboboxCore({
             {searchError}
           </Text>
         </View>
-      ) : sortedFiltered.length > 0 ? (
+      ) : navigableOptions.length > 0 ? (
         <>
-          {sortedFiltered.map((option, i) => {
+          {navigableOptions.map((option, i) => {
             const selected = isSelectedFn(option.value);
             const active = i === activeIndex;
-            const prevGroup = i > 0 ? sortedFiltered[i - 1].group : undefined;
+            const prevGroup = i > 0 ? navigableOptions[i - 1].group : undefined;
             const showGroupHeader = option.group && option.group !== prevGroup;
             const optionRow = (
               <View

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -134,6 +134,34 @@ describe("FileUpload", () => {
     expect(dropzone?.getAttribute("data-kb-ring")).toBe("true");
   });
 
+  // MPO-57 regression. `data-kb-ring="true"` proved the STATE, never the paint.
+  // The frame's LC-71 kill is a `:focus-visible` rule; a keyboard-origin focus
+  // matches `:focus-visible` too, so the base-state ring atom lost on
+  // specificity and the browser computed outline-width 0px while every
+  // assertion passed. Measured on the Storybook harness, not read off source.
+  // The ring must therefore also win INSIDE the focus-visible layer.
+  it("beats its own LC-71 focus-visible kill — the ring wins in the layer that suppresses it", () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" />,
+    );
+    const zone = getZone(container);
+    fireEvent.keyDown(document.body, { key: "Tab", code: "Tab" });
+    fireEvent.focus(zone);
+    expect(zone.getAttribute("data-kb-ring")).toBe("true");
+
+    // Base-state ring (2px solid $outlineColor at offset 0).
+    expect(zone.className).toMatch(/_outlineWidth-2px/);
+    expect(zone.className).toMatch(/_outlineStyle-solid/);
+    expect(zone.className).toMatch(/_outlineOffset-0px/);
+
+    // …restated in the focus-visible layer, so the kill cannot outrank it.
+    expect(zone.className).toMatch(/_outlineWidth-0focus-visible-2px/);
+    expect(zone.className).toMatch(/_outlineStyle-0focus-visible-solid/);
+    // …and the zeroing atoms are gone from that layer while the ring is up.
+    expect(zone.className).not.toMatch(/_outlineWidth-0focus-visible-0px/);
+    expect(zone.className).not.toMatch(/_outlineStyle-0focus-visible-none/);
+  });
+
   it("keeps Choose File out of the tab order so the dropzone is the one stop", () => {
     const result = renderWithProviders(
       <FileUpload label="Attachment" name="attachment" buttonText="Pick file" />,
@@ -319,6 +347,49 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     const thumb = flist.querySelector("img") as HTMLImageElement;
     expect(thumb).toBeTruthy();
     expect(thumb.getAttribute("alt")).toBe("diagram.png");
+
+    // AC-4 image clause (Bento Image Picker): an image pick is a TILE in the
+    // in-zone grid, not a row — the thumb IS the tile, and the remove disc
+    // rides its top-right corner (absolute, negative inset) instead of
+    // trailing on a row. Same 32/hitSlop-44 disc the rows carry.
+    const grid = flist.querySelector('[data-file-upload="tiles"]') as HTMLElement;
+    expect(grid).toBeTruthy();
+    const tile = grid.querySelector('[data-file-upload="tile"]') as HTMLElement;
+    expect(tile).toBeTruthy();
+    expect(tile.contains(thumb)).toBe(true);
+    const remove = tile.querySelector('[aria-label="Remove diagram.png"]') as HTMLElement;
+    expect(remove).toBeTruthy();
+    expect(remove.getAttribute("data-nested-px")).toBe("32");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+    const corner = tile.querySelector('[data-file-upload="tile-remove"]') as HTMLElement;
+    expect(corner).toBeTruthy();
+    expect(corner.contains(remove)).toBe(true);
+    expect(corner.className).toMatch(/_pos-absolute/);
+    // No size line inside a tile: Bento's populated Image Picker is thumbs only.
+    expect(tile.textContent ?? "").not.toMatch(/Bytes|KB|MB/);
+  });
+
+  it("keeps non-image picks as rows while images tile — one list, two treatments", async () => {
+    if (typeof URL.createObjectURL !== "function") {
+      (URL as any).createObjectURL = () => "blob:mock";
+      (URL as any).revokeObjectURL = () => {};
+    }
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" multiple showPreview />,
+    );
+    await pickFile(container, new File(["fake-png-bytes"], "diagram.png", { type: "image/png" }));
+    await pickFile(container, new File(["hello"], "notes.txt", { type: "text/plain" }));
+
+    const zone = getZone(container);
+    const flist = zone.querySelector('[data-file-upload="files"]') as HTMLElement;
+    const tiles = flist.querySelectorAll('[data-file-upload="tile"]');
+    expect(tiles.length).toBe(1);
+    // The text file is a row with its bold size line and trailing disc, outside the grid.
+    const grid = flist.querySelector('[data-file-upload="tiles"]') as HTMLElement;
+    const rowRemove = flist.querySelector('[aria-label="Remove notes.txt"]') as HTMLElement;
+    expect(rowRemove).toBeTruthy();
+    expect(grid.contains(rowRemove)).toBe(false);
+    expect(flist.textContent).toContain("notes.txt");
   });
 });
 

package/src/fields/FileUpload/index.tsx

@@ -133,6 +133,22 @@ const UploadAreaFrame = styled(YStack, {
   focusVisibleStyle: { outlineWidth: 0, outlineStyle: "none" as any },
 });
 
+/**
+ * The house ring, applied so it survives the frame's own LC-71 kill.
+ *
+ * The kill above is what suppresses the 1px UA outline on a POINTER focus,
+ * and it has to stay. But it is a `:focus-visible` rule, and a keyboard-origin
+ * focus matches `:focus-visible` too — so spreading the ring as base props
+ * only loses on specificity and the zone paints no ring at all. Restating the
+ * same fragment in `focusStyle`/`focusVisibleStyle` beats the kill in exactly
+ * the state that should carry a ring, and leaves pointer focus alone (the
+ * caller only spreads this while `kbZoneFocus` is true).
+ */
+function withZoneFocusRing() {
+  const ring = ensureFocusVisibleRing({ outlineOffset: 0 });
+  return { ...ring, focusStyle: ring, focusVisibleStyle: ring };
+}
+
 const DropOverlayFrame = styled(YStack, {
   position: "absolute",
   top: 0,
@@ -158,6 +174,14 @@ const UploadFileListFrame = styled(YStack, {
   borderTopColor: formDropzoneColors.border,
 });
 
+// BENTO-DERIVED (Image Picker): picked IMAGES populate a tile grid, not the
+// file-row list — each tile is the thumb itself with the remove disc riding
+// its top-right corner. Non-image picks and in-flight transfers keep the row.
+const UploadTileGridFrame = styled(XStack, {
+  width: "100%",
+  flexWrap: "wrap",
+});
+
 export function FileUpload<
   TParentData,
   TName extends DeepKeys<TParentData>,
@@ -228,6 +252,13 @@ export function FileUpload<
   // Intentional: extract the recipe icon step (16 at the 44 control) for the
   // row file glyph — same held "icon 16" exception the CTA carries.
   const rowGlyphSize = knobProps.controlIcon.width;
+  // Intentional: the image TILE edge is two control steps (88 at medium) —
+  // the same getFieldHeight ladder the 220 frame floor sits on, so tile and
+  // frame move together per size. The corner remove disc hangs a quarter of
+  // its own nestedControl step (8 at medium) outside the tile's top-right,
+  // which is the Bento Image Picker overlap read under the house tokens.
+  const tilePx = getFieldHeight(knobProps.sizeToken as SizeTokens, 2);
+  const tileRemoveInset = -Math.round(knobProps.nestedControl.px / 4);
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [transfers, setTransfers] = useState<TransferItem[]>([]);
@@ -722,6 +753,44 @@ export function FileUpload<
     </XStack>
   );
 
+  const renderImageTile = (
+    file: File,
+    preview: string,
+    onValueChange?: (nextValue: TData) => void,
+  ) => (
+    <YStack
+      key={`${file.name}-${file.size}-${file.lastModified}`}
+      data-file-upload="tile"
+      position="relative"
+      width={tilePx}
+      height={tilePx}
+    >
+      <Image
+        borderRadius={cappedRadius}
+        // src (string), not source: the RN source object leaks
+        // onto the DOM <img> as source="[object Object]" on web
+        src={preview}
+        alt={file.name}
+        width={tilePx}
+        height={tilePx}
+        objectFit="cover"
+      />
+      {canInteract ? (
+        <YStack
+          data-file-upload="tile-remove"
+          position="absolute"
+          top={tileRemoveInset}
+          right={tileRemoveInset}
+          zIndex={1}
+        >
+          {renderRemoveDisc(t("Remove {{name}}", { name: file.name }), () =>
+            handleFileRemove(file, onValueChange),
+          )}
+        </YStack>
+      ) : null}
+    </YStack>
+  );
+
   const renderUploadArea = (
     errorProp?: string | boolean,
     onValueChange?: (nextValue: TData) => void,
@@ -764,6 +833,15 @@ export function FileUpload<
         : ({ role: "button", onPress: requestFiles } as any)
       : { cursor: disabled ? "not-allowed" : undefined };
 
+    // Committed image picks become tiles; everything else stays a row.
+    const imageTiles: { file: File; preview: string }[] = [];
+    const fileRows: { file: File; preview: string | null; index: number }[] = [];
+    selectedFiles.forEach((file, index) => {
+      const preview = showPreview ? getFilePreview(file) : null;
+      if (preview) imageTiles.push({ file, preview });
+      else fileRows.push({ file, preview, index });
+    });
+
     return (
       <UploadAreaFrame
         // The dropzone is this field's control: it carries the FieldLayout id
@@ -796,7 +874,16 @@ export function FileUpload<
         // One family ring rule (boards media-01 dz-ring): 2px $outlineColor at
         // offset 0. The old -2 inset was the F1 defect — an element's own
         // outline is never clipped by its own overflow:hidden.
-        {...(kbZoneFocus ? ensureFocusVisibleRing({ outlineOffset: 0 }) : undefined)}
+        //
+        // The ring must ALSO be spread into focusStyle/focusVisibleStyle. The
+        // base props alone lose: the frame's LC-71 kill is a :focus-visible
+        // rule, the browser matches :focus-visible on a keyboard-origin focus,
+        // and a pseudo-class rule outranks the plain-class atom — the zone
+        // carried `_outlineWidth-2px` AND `_outlineWidth-0focus-visible-0px`
+        // and computed outline-width 0px. Measured on the harness, not read off
+        // the source: the pre-fix spec asserted the atom's PRESENCE, which was
+        // true while nothing painted.
+        {...(kbZoneFocus ? withZoneFocusRing() : undefined)}
         hoverStyle={
           canInteract
             ? {
@@ -903,8 +990,18 @@ export function FileUpload<
             // The hairline tracks the frame edge's knob width — one dash voice.
             borderTopWidth={knobProps.borderRadius.borderWidth ?? 1}
           >
-            {selectedFiles.map((file, index) => {
-              const preview = showPreview ? getFilePreview(file) : null;
+            {imageTiles.length > 0 ? (
+              <UploadTileGridFrame
+                data-file-upload="tiles"
+                {...knobProps.gap}
+                {...knobProps.panelPadding}
+              >
+                {imageTiles.map(({ file, preview }) =>
+                  renderImageTile(file, preview, onValueChange),
+                )}
+              </UploadTileGridFrame>
+            ) : null}
+            {fileRows.map(({ file, preview, index }) => {
               return (
                 <XStack
                   key={`${file.name}-${index}`}