@multiplatform.one/forms 7.46.0 → 7.47.0

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

@@ -62,6 +62,62 @@ async function pickFile(container: Element, file: File) {
 }
 
 describe("FileUpload", () => {
+  it("shows a stored image with Replace and Remove instead of empty source choices", () => {
+    const remove = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload existing={{ src: "/files/sprite.png" }} onExistingRemove={remove} />,
+    );
+    expect(result.container.textContent).toContain("Replace");
+    expect(result.container.textContent).not.toContain("Choose File");
+    expect(result.container.textContent).not.toContain("Drag a file");
+    expect(result.container.querySelector('[data-file-upload="preview"] img')).toBeTruthy();
+    fireEvent.click(result.getButton("Remove sprite.png")!);
+    expect(remove).toHaveBeenCalledTimes(1);
+  });
+
+  it("opens replacement sources and cancels without changing the stored attachment", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FileUpload existing={{ src: "/files/sprite.png" }} onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.click(result.container.querySelector('[aria-label="Replace"]')!);
+    });
+    expect(result.container.textContent).toContain("Choose File");
+    expect(result.container.querySelector('[data-file-upload="preview"] img')).toBeTruthy();
+    await act(async () => {
+      fireEvent.click(result.container.querySelector('[aria-label="Cancel replacement"]')!);
+    });
+    expect(result.container.textContent).not.toContain("Choose File");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("renders a stored document as a file name without a broken image", () => {
+    const result = renderWithProviders(<FileUpload existing={{ src: "/files/report.pdf" }} />);
+    expect(result.container.textContent).toContain("report.pdf");
+    expect(result.container.querySelector("img")).toBeNull();
+  });
+
+  it("lets an empty dropzone follow its content height", () => {
+    const result = renderWithProviders(<FileUpload />);
+    expect(getZone(result.container).className).not.toMatch(/_minH-/);
+    expect(result.container.querySelector('[data-file-upload="sources"]')).toBeTruthy();
+  });
+
+  it("retains the stored preview when a replacement upload fails", async () => {
+    const result = renderWithProviders(
+      <FileUpload
+        existing={{ src: "/files/original.png" }}
+        onUpload={async () => {
+          throw new Error("Offline");
+        }}
+      />,
+    );
+    await pickFile(result.container, new File(["new"], "new.png", { type: "image/png" }));
+    await waitFor(() => expect(result.container.textContent).toContain("Offline"));
+    expect(result.container.querySelector('img[src="/files/original.png"]')).toBeTruthy();
+  });
+
   it("should render placeholder and upload button text", () => {
     const result = renderWithProviders(
       <FileUpload
@@ -290,7 +346,7 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
 
   it("renders picked files as in-zone rows: name, bold size line, filled $color12 remove disc (29 painted, hitSlop 44)", async () => {
     const { container } = renderWithHouseThemes(
-      <FileUpload label="Attachment" name="attachment" />,
+      <FileUpload label="Attachment" name="attachment" multiple />,
     );
     await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
 
@@ -327,7 +383,7 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
 
   it("hangs the file list off ONE top hairline — bottom/left/right are 0, not the UA 3px initial (MPO-124)", async () => {
     const { container } = renderWithHouseThemes(
-      <FileUpload label="Attachment" name="attachment" />,
+      <FileUpload label="Attachment" name="attachment" multiple />,
     );
     await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
 
@@ -352,7 +408,7 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
       (URL as any).revokeObjectURL = () => {};
     }
     const { container } = renderWithHouseThemes(
-      <FileUpload label="Attachment" name="attachment" accept="image/*" showPreview />,
+      <FileUpload label="Attachment" name="attachment" multiple accept="image/*" showPreview />,
     );
     await pickFile(container, new File(["fake-png-bytes"], "diagram.png", { type: "image/png" }));
 
@@ -532,3 +588,30 @@ describe("FileUpload transfer lifecycle (MPO-55)", () => {
     hold();
   });
 });
+
+it("does not resurrect the old stored value after removing its replacement", async () => {
+  const onChange = vi.fn();
+  const result = renderWithProviders(
+    <FileUpload existing={{ src: "/files/old.png" }} onChange={onChange} />,
+  );
+  await pickFile(result.container, new File(["data"], "new.pdf", { type: "application/pdf" }));
+  await act(async () => {
+    fireEvent.click(result.getButton("Remove new.pdf")!);
+  });
+  expect(result.container.querySelector('[data-file-upload="preview"]')).toBeNull();
+  expect(result.container.textContent).toContain("Choose File");
+  expect(onChange).toHaveBeenLastCalledWith(null);
+});
+
+it("does not focus a stored attachment on mount", () => {
+  const before = document.activeElement;
+  renderWithProviders(<FileUpload existing={{ src: "/files/old.png" }} />);
+  expect(document.activeElement).toBe(before);
+});
+
+it("notifies standalone blur after a file selection", async () => {
+  const onBlur = vi.fn();
+  const result = renderWithProviders(<FileUpload onBlur={onBlur} />);
+  await pickFile(result.container, new File(["data"], "new.pdf", { type: "application/pdf" }));
+  expect(onBlur).toHaveBeenCalledTimes(1);
+});

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

@@ -252,3 +252,18 @@ export const InTable: Story = {
     );
   },
 };
+
+export const FilledImage: Story = {
+  render: () => {
+    const [src, setSrc] = useState(
+      "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10.png",
+    );
+    return (
+      <FileUpload
+        label="Sprite"
+        existing={src ? { src } : undefined}
+        onExistingRemove={() => setSrc("")}
+      />
+    );
+  },
+};

package/src/fields/FileUpload/index.tsx

@@ -3,7 +3,7 @@ import { useTouchSurface } from "@multiplatform.one/theme";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { type DragEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { useProps, type SizeTokens } from "tamagui";
+import { useMedia, useProps, type SizeTokens } from "tamagui";
 import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
 import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -112,7 +112,7 @@ export type FileUploadProps<
      * The file the value already names (a stored URL), shown as a preview
      * tile until a new pick replaces it — never as a raw path.
      */
-    existing?: { src: string; name?: string } | null;
+    existing?: { src: string; name?: string; isImage?: boolean } | null;
     /** Removes the existing file; given, its tile carries a remove disc. */
     onExistingRemove?: () => void;
   };
@@ -203,6 +203,7 @@ export function FileUpload<
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(props: FileUploadProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
   const hydrationTouch = useTouchSurface();
+  const media = useMedia();
   const {
     defaultValue,
     form,
@@ -274,6 +275,29 @@ export function FileUpload<
   const tileRemoveInset = -Math.round(knobProps.nestedControl.px / 4);
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [replacing, setReplacing] = useState(false);
+  const [existingRemoved, setExistingRemoved] = useState(false);
+  const [pixelated, setPixelated] = useState(false);
+  const replaceRef = useRef<HTMLElement>(null);
+  const sourceRef = useRef<HTMLElement>(null);
+  const storedSrcRef = useRef(existing?.src);
+  const previousReplacing = useRef(replacing);
+  useEffect(() => {
+    if (storedSrcRef.current === existing?.src) return;
+    storedSrcRef.current = existing?.src;
+    const currentFiles: unknown[] = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    if (existing?.src || !selectedFiles.every((file) => currentFiles.includes(file)))
+      setSelectedFiles([]);
+    setExistingRemoved(false);
+    setReplacing(false);
+  }, [existing?.src]);
+  useEffect(() => {
+    if (previousReplacing.current === replacing) return;
+    previousReplacing.current = replacing;
+    if (!isWeb) return;
+    const target = replacing ? sourceRef : replaceRef;
+    target.current?.querySelector<HTMLElement>('button, [role="button"]')?.focus();
+  }, [replacing]);
   const [transfers, setTransfers] = useState<TransferItem[]>([]);
   const [isDragOver, setIsDragOver] = useState(false);
   const [validationError, setValidationError] = useState<string | undefined>();
@@ -377,6 +401,7 @@ export function FileUpload<
         });
         if (controller.signal.aborted) return;
         setTransfersAndRef((prev) => prev.filter((item) => item.id !== id));
+        setReplacing(false);
         setSelectedFiles((prev) => {
           const nextFiles = multipleRef.current ? [...prev, file] : [file];
           syncFieldValue(nextFiles, emitFieldRef.current);
@@ -385,7 +410,10 @@ export function FileUpload<
       } catch (err) {
         if (
           controller.signal.aborted ||
-          (err instanceof DOMException && err.name === "AbortError")
+          (err instanceof Error && err.name === "AbortError") ||
+          (typeof DOMException !== "undefined" &&
+            err instanceof DOMException &&
+            err.name === "AbortError")
         ) {
           setTransfersAndRef((prev) => prev.filter((item) => item.id !== id));
           return;
@@ -504,6 +532,7 @@ export function FileUpload<
         if (onUploadRef.current) {
           validFiles.forEach((file) => startTransfer(file));
         } else {
+          setReplacing(false);
           setSelectedFiles((prev) => {
             const nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
             syncFieldValue(nextFiles, onValueChange);
@@ -532,9 +561,12 @@ export function FileUpload<
         return nextFiles;
       });
 
+      if (fileInputRef.current) fileInputRef.current.value = "";
+      setReplacing(false);
+      if (!multiple) setExistingRemoved(true);
       onFileRemove?.(fileToRemove);
     },
-    [onFileRemove, syncFieldValue],
+    [multiple, onFileRemove, syncFieldValue],
   );
 
   // Depth counter so dragenter/dragleave pairs from nested children don't cancel the highlight
@@ -697,7 +729,7 @@ export function FileUpload<
   if (skeleton) {
     const minHeightPx = getFieldHeight(
       (fieldProps.size || knobProps.sizeToken) as SizeTokens,
-      5,
+      2,
       hydrationTouch,
     );
     return (
@@ -708,8 +740,19 @@ export function FileUpload<
   }
 
   const canInteract = !disabled && !readOnly;
-  const showExisting =
-    Boolean(existing?.src) && selectedFiles.length === 0 && transfers.length === 0;
+  const showExisting = Boolean(existing?.src) && !existingRemoved && selectedFiles.length === 0;
+  const singleFile = !multiple ? selectedFiles[0] : undefined;
+  const filled = !multiple && (showExisting || Boolean(singleFile));
+  const storedImage =
+    existing?.isImage ??
+    /^(data:image\/)|\.(png|jpe?g|gif|webp|svg|avif|bmp)(?:[?#]|$)/i.test(existing?.src ?? "");
+  const singlePreview = showPreview
+    ? singleFile
+      ? getFilePreview(singleFile)
+      : storedImage
+        ? existing?.src
+        : undefined
+    : undefined;
   const existingName = existing?.name || fileNameFromSrc(existing?.src ?? "");
   const hasRows = selectedFiles.length > 0 || transfers.length > 0 || showExisting;
 
@@ -831,13 +874,13 @@ export function FileUpload<
       ? isWeb
         ? ({
             // DROPZONE-FULL-TARGET: the entire surface is the click target.
-            role: "button",
-            tabIndex: 0,
+            role: filled ? "group" : "button",
+            tabIndex: filled ? undefined : 0,
             onFocus: handleZoneFocus,
             onBlur: handleZoneBlur,
             cursor: "pointer",
-            onClick: handleZoneClick,
-            onKeyDown: handleZoneKeyDown,
+            onClick: filled ? undefined : handleZoneClick,
+            onKeyDown: filled ? undefined : handleZoneKeyDown,
             ...(dragDrop
               ? {
                   onDragEnter: handleDragEnter,
@@ -850,7 +893,9 @@ export function FileUpload<
                 }
               : null),
           } as any)
-        : ({ role: "button", onPress: requestFiles } as any)
+        : filled
+          ? {}
+          : ({ role: "button", onPress: requestFiles } as any)
       : { cursor: disabled ? "not-allowed" : undefined };
 
     // Committed image picks become tiles; everything else stays a row.
@@ -887,14 +932,6 @@ export function FileUpload<
         {...(errorProp ? { borderColor: formCommonColors.error } : undefined)}
         elevation={knobProps.elevation}
         {...transitionProps(knobProps.motion.control)}
-        // CONTRACT (boards media-01..03): the getFieldHeight floor sits on
-        // the FRAME, so the frame border-box measures 220 — hanging it on
-        // the inner stack painted 222, a number no token expresses.
-        minHeight={getFieldHeight(
-          (fieldProps.size || knobProps.sizeToken) as SizeTokens,
-          5,
-          hydrationTouch,
-        )}
         aria-required={fieldProps.required || undefined}
         aria-invalid={!!errorProp || undefined}
         aria-readonly={readOnly || undefined}
@@ -923,7 +960,7 @@ export function FileUpload<
             : undefined
         }
         {...zoneInteractionProps}
-        {...(canInteract
+        {...(canInteract && !filled
           ? // Labeled fields get aria-labelledby auto-wired by the FieldLayout
             // Label (tamagui Label htmlFor → this id); the aria-label fallback
             // covers label-less usage, and is what a screen reader announces
@@ -966,36 +1003,119 @@ export function FileUpload<
 
         <YStack
           {...knobProps.panelPadding}
-          flexGrow={1}
           width="100%"
           alignItems="center"
           justifyContent="center"
           {...knobProps.gap}
         >
-          <XStack
-            alignItems="center"
-            justifyContent="center"
-            flexWrap="wrap"
-            maxWidth="100%"
-            {...knobProps.gap}
-          >
-            <Button
-              onPress={requestFiles}
-              disabled={!canInteract}
-              size={knobProps.sizeToken}
-              tabIndex={-1}
-              // BENTO-DERIVED (bento-pickers-measured.md §2/§4): NO standalone
-              // glyph exists — the upload mark rides INSIDE the CTA. Held at
-              // the house 44 control with the recipe's 16px icon (Bento draws
-              // 14 on its own 36/$3 button — ruled exception).
-              icon={UploadIcon}
+          {filled ? (
+            <YStack data-file-upload="preview" width="100%" alignItems="center" {...knobProps.gap}>
+              <YStack
+                data-file-upload={showExisting ? "existing" : "selected"}
+                alignItems="center"
+                width="100%"
+              >
+                {singlePreview ? (
+                  <Image
+                    src={singlePreview}
+                    alt={singleFile?.name ?? existingName}
+                    width="$14"
+                    height="$14"
+                    maxWidth="100%"
+                    objectFit="contain"
+                    onLoad={(event) => {
+                      if (!isWeb) return;
+                      const image = event.currentTarget as unknown as HTMLImageElement;
+                      setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
+                    }}
+                    {...(isWeb && pixelated
+                      ? { style: { imageRendering: "pixelated" } as any }
+                      : {})}
+                  />
+                ) : (
+                  <YStack alignItems="center" {...knobProps.gap}>
+                    <FileIcon size={rowGlyphSize} />
+                    <Text {...knobProps.body} textAlign="center" numberOfLines={2}>
+                      {singleFile?.name ?? existingName}
+                    </Text>
+                  </YStack>
+                )}
+              </YStack>
+              {canInteract ? (
+                <XStack
+                  ref={replaceRef as any}
+                  {...knobProps.gap}
+                  justifyContent="center"
+                  flexWrap="wrap"
+                >
+                  <Button
+                    size={knobProps.sizeToken}
+                    aria-label={replacing ? t("Cancel replacement") : t("Replace")}
+                    aria-expanded={replacing}
+                    onPress={(event) => {
+                      event.stopPropagation();
+                      if (replacing) {
+                        transfersRef.current.forEach((item) => item.controller.abort());
+                        setTransfersAndRef(() => []);
+                        if (fileInputRef.current) fileInputRef.current.value = "";
+                        if (isWeb)
+                          replaceRef.current
+                            ?.querySelector<HTMLElement>('button, [role="button"]')
+                            ?.focus();
+                      }
+                      setReplacing(!replacing);
+                    }}
+                  >
+                    {replacing ? t("Cancel") : t("Replace")}
+                  </Button>
+                  {singleFile || onExistingRemove ? (
+                    <Button
+                      size={knobProps.sizeToken}
+                      outlined
+                      aria-label={t("Remove {{name}}", { name: singleFile?.name ?? existingName })}
+                      onPress={(event) => {
+                        event.stopPropagation();
+                        transfersRef.current.forEach((item) => item.controller.abort());
+                        setTransfersAndRef(() => []);
+                        if (singleFile) handleFileRemove(singleFile, onValueChange);
+                        else onExistingRemove?.();
+                        setReplacing(false);
+                      }}
+                    >
+                      {t("Remove")}
+                    </Button>
+                  ) : null}
+                </XStack>
+              ) : null}
+            </YStack>
+          ) : null}
+          {!filled || replacing ? (
+            <XStack
+              ref={sourceRef as any}
+              data-file-upload="sources"
+              width="100%"
+              flexDirection={media.xs ? "column" : "row"}
+              alignItems="stretch"
+              {...knobProps.gap}
             >
-              <Button.Text {...knobProps.body}>{buttonText}</Button.Text>
-            </Button>
-            {actions}
-          </XStack>
-
-          {selectedFiles.length === 0 && transfers.length === 0 && !showExisting && (
+              <Button
+                alignSelf="stretch"
+                flex={media.xs ? undefined : 1}
+                onPress={(event) => {
+                  event.stopPropagation();
+                  requestFiles();
+                }}
+                disabled={!canInteract}
+                size={knobProps.sizeToken}
+                tabIndex={replacing ? 0 : -1}
+                icon={UploadIcon}
+              >
+                <Button.Text {...knobProps.body}>{buttonText}</Button.Text>
+              </Button>
+              {actions}
+            </XStack>
+          ) : null}
+          {!hasRows && (
             <Text color={formCommonColors.muted} textAlign="center" {...knobProps.body}>
               {placeholder}
             </Text>
@@ -1018,13 +1138,13 @@ export function FileUpload<
           ) : null}
         </YStack>
 
-        {hasRows && (
+        {((multiple && hasRows) || transfers.length > 0) && (
           <UploadFileListFrame
             data-file-upload="files"
             // The hairline tracks the frame edge's knob width — one dash voice.
             borderTopWidth={knobProps.borderRadius.borderWidth ?? 1}
           >
-            {showExisting && existing ? (
+            {multiple && showExisting && existing ? (
               <UploadTileGridFrame
                 data-file-upload="tiles"
                 {...knobProps.gap}
@@ -1061,7 +1181,7 @@ export function FileUpload<
                 </YStack>
               </UploadTileGridFrame>
             ) : null}
-            {imageTiles.length > 0 ? (
+            {multiple && imageTiles.length > 0 ? (
               <UploadTileGridFrame
                 data-file-upload="tiles"
                 {...knobProps.gap}
@@ -1072,7 +1192,7 @@ export function FileUpload<
                 )}
               </UploadTileGridFrame>
             ) : null}
-            {fileRows.map(({ file, preview, index }) => {
+            {(multiple ? fileRows : []).map(({ file, preview, index }) => {
               return (
                 <XStack
                   key={`${file.name}-${index}`}
@@ -1187,7 +1307,7 @@ export function FileUpload<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        {renderUploadArea(standaloneError, emitChange)}
+        {renderUploadArea(standaloneError, emitChange, fieldProps.onBlur)}
       </FieldLayout>
     );
   }

package/src/fields/Geolocation/Geolocation.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { ArrowsOutIcon, NavigationArrowIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useCallback, useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { TableCellContext } from "../../shared/tableCellContext";
@@ -13,6 +13,7 @@ import type { GeocodeResult, Geocoder } from "./geocoder";
 import { GeocoderProvider } from "./geocoderContext";
 import { parseGeoValue } from "./geoValue";
 import { createPhotonGeocoder } from "./photonGeocoder";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Geolocation> = {
   title: "Forms/Geolocation",

package/src/fields/Geolocation/GeolocationMap.native.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { Platform } from "react-native";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 // Type-only imports are erased at runtime — the value module loads through
 // `loadExpoMaps` so the peer stays optional (Video / expo-video precedent).
 import type { AppleMaps as AppleMapsNS, GoogleMaps as GoogleMapsNS } from "expo-maps";
@@ -8,6 +8,7 @@ import { t } from "../../shared/t";
 import { loadExpoMaps } from "./expoMapsLoader";
 import { zoomFromDelta } from "./mapMath";
 import type { GeolocationMapSurfaceProps } from "./mapTypes";
+import { Text } from "@multiplatform.one/theme";
 
 interface MapClickEvent {
   coordinates?: { latitude?: number; longitude?: number };

package/src/fields/Geolocation/GeolocationMap.tsx

@@ -1,11 +1,12 @@
 import { MapPinIcon } from "@phosphor-icons/react";
 import { useCallback, useMemo, useState } from "react";
 import type { LayoutChangeEvent } from "react-native";
-import { Text, View, YStack } from "tamagui";
+import { View, YStack } from "tamagui";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import { OSM_TILE_SIZE, latLngFromMapClick, tilesForView, zoomFromDelta } from "./mapMath";
 import type { GeolocationMapSurfaceProps } from "./mapTypes";
+import { Text } from "@multiplatform.one/theme";
 
 function tileSrc(zoom: number, x: number, y: number) {
   if (typeof process !== "undefined" && process.env.VITEST) {