@multiplatform.one/forms 7.4.1 → 7.6.0

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

@@ -1,8 +1,58 @@
-import { act, fireEvent } from "@testing-library/react";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import type { ReactElement } from "react";
+import { TamaguiProvider, createTamagui } from "tamagui";
 import { FileUpload } from "./index";
 
+// The stock @tamagui/config themes used by renderWithProviders carry a
+// different ramp than the house builder. The bento-derived dropzone asserts
+// TOKEN-level treatment ($color9 dash, $color3/$color6 LC-40 wash, $color12
+// remove disc), so mount the house builder's generated themes — the same
+// ones the app config uses — and read the per-scheme values off the theme
+// table itself (the Progress intent-spec precedent).
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as any,
+});
+
+function renderWithHouseThemes(ui: ReactElement, scheme: "light" | "dark" = "light") {
+  return render(
+    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+}
+
+function getZone(container: Element): HTMLElement {
+  const zone = container.querySelector('[data-file-upload="dropzone"]') as HTMLElement | null;
+  expect(zone).toBeTruthy();
+  return zone as HTMLElement;
+}
+
+async function pickFile(container: Element, file: File) {
+  const input = container.querySelector("input[type='file']") as HTMLInputElement | null;
+  expect(input).toBeTruthy();
+  await act(async () => {
+    if (input) fireEvent.change(input, { target: { files: [file] } });
+  });
+}
+
 describe("FileUpload", () => {
   it("should render placeholder and upload button text", () => {
     const result = renderWithProviders(
@@ -84,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" />,
@@ -127,3 +205,272 @@ describe("FileUpload", () => {
     expect(removeStops.length).toBeGreaterThan(0);
   });
 });
+
+// ── Bento-derived dropzone treatment (MPO-57) ────────────────────────────
+// Boards media-01..04 (docs/design/boards/W1-fileupload-bento) are the
+// numeric spec; bento-pickers-measured.md §2/§4 is the derivation. Assertions
+// ride Tamagui's atomic classes (token-level — the classes name the token and
+// the scheme flips the var) plus the house theme table for per-scheme values,
+// the Progress intent-spec precedent.
+describe("FileUpload bento-derived dropzone (MPO-57)", () => {
+  it.each(["light", "dark"] as const)(
+    "draws the dash 1px DASHED $color9 in the %s scheme (boards: rgb(77,77,77) light / rgb(133,133,133) dark)",
+    (scheme) => {
+      const { container } = renderWithHouseThemes(
+        <FileUpload label="Attachment" name="attachment" />,
+        scheme,
+      );
+      const zone = getZone(container);
+      // The dash rides the legible $color9 step, not the near-invisible
+      // $borderColor hairline the pre-Bento zone drew.
+      expect(zone.className).toMatch(/_btc-color9/);
+      expect(zone.className).not.toMatch(/_btc-borderColor/);
+      // 1px DASHED (media-01 dz-rest: borderTopWidth 1px, borderTopStyle dashed)
+      expect(zone.className).toMatch(/-dashed/);
+      expect(zone.className).toMatch(/_btw-1px/);
+      // The token resolves to a real per-scheme value on the house table, and
+      // it is NOT the $borderColor tier the old dash used.
+      const theme = houseThemes[scheme];
+      expect(theme.color9).toBeTruthy();
+      expect(theme.color9).not.toBe(theme.borderColor);
+    },
+  );
+
+  it.each(["light", "dark"] as const)(
+    "keeps the zone ground transparent at rest in the %s scheme; only the LC-40 disabled wash paints it",
+    (scheme) => {
+      const rest = renderWithHouseThemes(
+        <FileUpload label="Attachment" name="attachment" />,
+        scheme,
+      );
+      const restZone = getZone(rest.container);
+      // Transparent ground: no rest-state background atom other than
+      // `transparent` (hover/press state atoms are allowed — the held mpo
+      // $color4 hover flood is a state, not a ground).
+      expect(restZone.className).toMatch(/_bg-transparent/);
+      expect(restZone.className).not.toMatch(/_bg-(?!transparent|0hover|0active|0focus)/);
+
+      const disabled = renderWithHouseThemes(
+        <FileUpload label="Attachment" name="attachment" disabled />,
+        scheme,
+      );
+      const disabledZone = getZone(disabled.container);
+      // LC-40 keepLabel surface wash: $color3 fill on a $color6 edge.
+      expect(disabledZone.className).toMatch(/_bg-color3/);
+      expect(disabledZone.className).toMatch(/_btc-color6/);
+    },
+  );
+
+  it("renders no standalone glyph — the CTA carries the upload mark inside the 44 control", () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" />,
+    );
+    const zone = getZone(container);
+    // The CTA is the house 44 control (held exception: Bento draws 36/$3).
+    const cta = zone.querySelector("[data-mp-button-height]") as HTMLElement;
+    expect(cta).toBeTruthy();
+    expect(cta.getAttribute("data-mp-button-height")).toBe("44");
+    // Every svg in the empty zone lives INSIDE the CTA — no standalone glyph.
+    const svgs = Array.from(zone.querySelectorAll("svg"));
+    expect(svgs.length).toBeGreaterThan(0);
+    for (const svg of svgs) {
+      expect(cta.contains(svg)).toBe(true);
+    }
+    // The caption sits below the CTA in the zone.
+    expect(zone.textContent).toContain("Drag a file into this area");
+  });
+
+  it("renders picked files as in-zone rows: name, bold size line, filled $color12 remove disc (32 painted, hitSlop 44)", async () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" />,
+    );
+    await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
+
+    const zone = getZone(container);
+    // Rows live IN the zone, parted by the same dashed $color9 hairline —
+    // not the pre-Bento solid $color8 divider.
+    const flist = zone.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist).toBeTruthy();
+    expect(flist.className).toMatch(/_btc-color9/);
+    expect(flist.className).toMatch(/-dashed/);
+    expect(flist.className).not.toMatch(/_btc-color8/);
+
+    // Name renders at body; the size is a SECOND LINE, BOLD.
+    expect(flist.textContent).toContain("hello.txt");
+    const sizeLine = Array.from(flist.querySelectorAll("span, div, p")).find((el) =>
+      /^5 Bytes$/.test(el.textContent ?? ""),
+    ) as HTMLElement;
+    expect(sizeLine).toBeTruthy();
+    expect(sizeLine.className).toMatch(/_fow-700/);
+
+    // Remove: a circular filled $color12 disc painted at nestedControl (32)
+    // with hitSlop restoring the 44 floor (data-mp-press-slop 6 → 32+12=44).
+    const remove = flist.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
+    expect(remove).toBeTruthy();
+    expect(remove.getAttribute("data-nested-px")).toBe("32");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+    expect(remove.className).toMatch(/_bg-color12/);
+    // The inverse ✕ rides inside the disc.
+    expect(remove.querySelector("svg")).toBeTruthy();
+    // The caption is dropped once files exist; the CTA stays.
+    expect(zone.textContent).not.toContain("Drag a file into this area");
+    expect(zone.textContent).toContain("Choose File");
+  });
+
+  it("keeps compact a space-only dial — CTA stays 44 and remove stays nested 32 (LC-76)", async () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" compact />,
+    );
+    const zone = getZone(container);
+    const cta = zone.querySelector("[data-mp-button-height]") as HTMLElement;
+    expect(cta.getAttribute("data-mp-button-height")).toBe("44");
+
+    await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
+    const remove = zone.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
+    expect(remove.getAttribute("data-nested-px")).toBe("32");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+  });
+
+  it("renders image picks with an in-zone preview thumb at the nested-chrome step", async () => {
+    if (typeof URL.createObjectURL !== "function") {
+      (URL as any).createObjectURL = () => "blob:mock";
+      (URL as any).revokeObjectURL = () => {};
+    }
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" accept="image/*" showPreview />,
+    );
+    await pickFile(container, new File(["fake-png-bytes"], "diagram.png", { type: "image/png" }));
+
+    const zone = getZone(container);
+    const flist = zone.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist).toBeTruthy();
+    const thumb = flist.querySelector("img") as HTMLImageElement;
+    expect(thumb).toBeTruthy();
+    expect(thumb.getAttribute("alt")).toBe("diagram.png");
+  });
+});
+
+// ── Transfer lifecycle (MPO-55) ──────────────────────────────────────────
+// A chosen file used to jump straight into the populated list. The
+// in-flight row (name, size, progress, cancel) sits between choose and
+// commit; a transport failure keeps the file visible with retry + remove
+// (DG-VAL-04 / DG-VAL-05) and does not clear siblings. Cancel drops only
+// the in-flight row (LC-66).
+describe("FileUpload transfer lifecycle (MPO-55)", () => {
+  it("renders an in-flight row (name, size, progress, cancel) between choose and populated", async () => {
+    let release!: () => void;
+    const held = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    const onChange = vi.fn();
+    const { container } = renderWithHouseThemes(
+      <FileUpload
+        label="Attachment"
+        name="attachment"
+        onChange={onChange}
+        onUpload={async (_file, { onProgress }) => {
+          onProgress(42);
+          await held;
+        }}
+      />,
+    );
+
+    await pickFile(container, new File(["hello"], "restore-log.txt", { type: "text/plain" }));
+
+    const flist = container.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist).toBeTruthy();
+    expect(flist.textContent).toContain("restore-log.txt");
+    expect(flist.textContent).toMatch(/5 Bytes/);
+    const bar = flist.querySelector('[data-file-upload="progress"]') as HTMLElement;
+    expect(bar).toBeTruthy();
+    expect(bar.getAttribute("role")).toBe("progressbar");
+    expect(bar.getAttribute("aria-valuenow")).toBe("42");
+    expect(flist.querySelector('[aria-label="Cancel restore-log.txt"]')).toBeTruthy();
+    expect(flist.querySelector('[aria-label="Remove restore-log.txt"]')).toBeNull();
+    expect(onChange).not.toHaveBeenCalled();
+
+    release();
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Remove restore-log.txt"]')).toBeTruthy();
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect((onChange.mock.calls[0][0] as File).name).toBe("restore-log.txt");
+  });
+
+  it("renders a failed row with retry and remove, leaving committed files intact", async () => {
+    const onUpload = vi.fn(async (file: File) => {
+      if (file.name === "wazuh-dump.sql") {
+        throw new Error("413 Payload Too Large");
+      }
+    });
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" multiple onUpload={onUpload} />,
+    );
+
+    await pickFile(container, new File(["ok"], "compose01.txt", { type: "text/plain" }));
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Remove compose01.txt"]')).toBeTruthy();
+    });
+
+    await pickFile(container, new File(["big"], "wazuh-dump.sql", { type: "text/plain" }));
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Retry wazuh-dump.sql"]')).toBeTruthy();
+    });
+
+    const flist = container.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist.textContent).toContain("413 Payload Too Large");
+    expect(flist.textContent).toContain("Try again or remove the file");
+    expect(flist.querySelector('[aria-label="Remove compose01.txt"]')).toBeTruthy();
+    expect(flist.querySelector('[aria-label="Remove wazuh-dump.sql"]')).toBeTruthy();
+    expect(flist.querySelector('[data-transfer-status="failed"]')).toBeTruthy();
+  });
+
+  it("cancel during transfer removes the in-flight row without touching committed files", async () => {
+    let hold!: () => void;
+    const held = new Promise<void>((resolve) => {
+      hold = resolve;
+    });
+    const onChange = vi.fn();
+    const onUpload = vi.fn(
+      async (file: File, { onProgress }: { onProgress: (n: number) => void }) => {
+        if (file.name === "in-flight.bin") {
+          onProgress(10);
+          await held;
+        }
+      },
+    );
+    const { container } = renderWithHouseThemes(
+      <FileUpload
+        label="Attachment"
+        name="attachment"
+        multiple
+        onChange={onChange}
+        onUpload={onUpload}
+      />,
+    );
+
+    await pickFile(container, new File(["ok"], "kept.txt", { type: "text/plain" }));
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Remove kept.txt"]')).toBeTruthy();
+    });
+    const committedCalls = onChange.mock.calls.length;
+
+    await pickFile(container, new File(["xx"], "in-flight.bin", { type: "text/plain" }));
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Cancel in-flight.bin"]')).toBeTruthy();
+    });
+
+    await act(async () => {
+      const cancel = container.querySelector('[aria-label="Cancel in-flight.bin"]') as HTMLElement;
+      fireEvent.click(cancel);
+    });
+
+    expect(container.querySelector('[aria-label="Cancel in-flight.bin"]')).toBeNull();
+    expect(container.querySelector('[data-file-upload="progress"]')).toBeNull();
+    expect(container.querySelector('[aria-label="Remove kept.txt"]')).toBeTruthy();
+    expect(container.textContent).toContain("kept.txt");
+    expect(container.textContent).not.toContain("in-flight.bin");
+    expect(onChange.mock.calls.length).toBe(committedCalls);
+    hold();
+  });
+});

package/src/fields/FileUpload/FileUpload.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
@@ -182,3 +183,72 @@ export const SkeletonState: Story = {
   render: (args) => <FileUpload {...args} />,
   args: { label: "Upload File", skeleton: true },
 };
+
+function TransferStory({ fail }: { fail?: boolean }) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const input = hostRef.current?.querySelector("input[type='file']") as HTMLInputElement | null;
+    if (!input) return;
+    const file = new File(["payload"], fail ? "wazuh-dump.sql" : "restore-log.txt", {
+      type: "text/plain",
+    });
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    fireInputFiles(input, dt.files);
+  }, [fail]);
+  return (
+    <div ref={hostRef}>
+      <FileUpload
+        label="Attachment"
+        onUpload={async (_file, { onProgress }) => {
+          onProgress(64);
+          if (fail) throw new Error("413 Payload Too Large");
+          await new Promise<void>(() => {});
+        }}
+      />
+    </div>
+  );
+}
+
+function fireInputFiles(input: HTMLInputElement, files: FileList) {
+  Object.defineProperty(input, "files", { configurable: true, value: files });
+  input.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
+/** In-flight row: name, size, progress, cancel. media-01 / media-04 uploading. */
+export const Uploading: Story = {
+  render: () => <TransferStory />,
+};
+
+/** Failed row: structured {problem, action, cta} plus remove. media-01 / media-04 failed. */
+export const Failed: Story = {
+  render: () => <TransferStory fail />,
+};
+
+type InTableRow = { id: string; label: string; value: string };
+
+/** LC-06: FileUpload stays hosted in DataTable; the cell opens a modal. */
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "report.pdf" },
+      { id: "2", label: "Beta", value: "brief.docx" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "File",
+        field: "fileupload",
+        fieldProps: { accept: "*/*", maxSize: 10485760 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={320}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/FileUpload/filePickerTypes.ts

@@ -0,0 +1,42 @@
+/**
+ * Shared contract for the platform-split file picker
+ * (`nativeFilePicker.ts` web / `nativeFilePicker.native.ts`). Lives in its own
+ * file (Geolocation `mapTypes.ts` precedent) so the twins cannot drift apart.
+ */
+
+/**
+ * A file chosen through a native picker. The shape is deliberately the one
+ * React Native's `FormData` accepts for a multipart upload
+ * (`{ uri, name, type }`), so a bound value can be posted without a second
+ * conversion. `size`/`type` may be absent from the OS response — the picker
+ * fills 0 / "" rather than leaving them undefined, because the field's own
+ * validators read both.
+ */
+export interface NativePickedFile {
+  name: string;
+  size: number;
+  type: string;
+  /** `file://` (or content://) URI of the picked asset on the device. */
+  uri: string;
+  lastModified: number;
+}
+
+/** Which native surface to open. `auto` reads `accept` (see `pickFilesNatively`). */
+export type NativePickerMode = "auto" | "document" | "image";
+
+export interface NativePickRequest {
+  /** Same `accept` string the web `<input type="file">` gets, e.g. "image/*,.pdf". */
+  accept?: string;
+  multiple?: boolean;
+  mode?: NativePickerMode;
+}
+
+export interface NativePickOutcome {
+  files: NativePickedFile[];
+  /** The user dismissed the picker. Not an error — leave the field untouched. */
+  canceled?: boolean;
+  /** No native picker module is linked into this build (peer not installed). */
+  unavailable?: boolean;
+  /** The OS refused the photo-library permission. */
+  denied?: boolean;
+}