@multiplatform.one/forms 7.45.1 → 7.47.0

package/src/fields/Duration/index.tsx

@@ -52,6 +52,10 @@ const defaultPresets: DurationPreset[] = [
   { label: "8h", seconds: 28800 },
 ];
 
+const DIGIT_PROBE = "000";
+/** Room for the web caret, which scrolls an exactly-fitted input by its own width. */
+const CARET_ALLOWANCE = 2;
+
 /** Preset chips stay on the $2 row (28px). The field size token does not reach them. */
 export const DURATION_PRESET_SIZE = "$2" as const;
 
@@ -70,6 +74,7 @@ function DurationSegment({
   required,
   hasError,
   sizeToken,
+  digitAdvance,
 }: {
   id?: string;
   unit: string;
@@ -85,12 +90,18 @@ function DurationSegment({
   required?: boolean;
   hasError?: boolean;
   sizeToken: string;
+  /** Painted width of one digit, measured by DurationControl; null until laid out. */
+  digitAdvance: number | null;
 }) {
   const [draft, setDraft] = useState<string | null>(null);
   const shown = draft ?? (wide ? String(value) : String(value).padStart(2, "0"));
   const locked = !!(disabled || readOnly);
   const recipe = sizeRecipeForToken(sizeToken);
-  const segmentWidth = durationSegmentWidth(sizeToken, wide ? 3 : 2);
+  const digits = Math.max(1, shown.length);
+  const segmentWidth =
+    digitAdvance == null
+      ? durationSegmentWidth(sizeToken, digits)
+      : Math.ceil(digitAdvance * digits) + CARET_ALLOWANCE;
 
   const commitDraft = () => {
     if (draft == null) return;
@@ -121,9 +132,8 @@ function DurationSegment({
         aria-required={required || undefined}
         aria-invalid={hasError || undefined}
         color={formCommonColors.text}
-        textAlign="right"
+        textAlign="left"
         {...knobProps.controlType}
-        flex={0}
         width={segmentWidth}
         minWidth={segmentWidth}
         maxWidth={segmentWidth}
@@ -222,6 +232,10 @@ function DurationControl({
   const sizeToken = String(size || knobProps.sizeToken);
   const recipe = sizeRecipeForToken(sizeToken);
   const resolvedClock = clockIcon === undefined ? <ClockIcon size={recipe.iconSize} /> : clockIcon;
+  // Segments take one em per digit until the painted font reports its own
+  // digit advance, so the value hugs its unit in every preset font and never
+  // clips. The probe sits in the full-width row so nothing narrows it.
+  const [digitAdvance, setDigitAdvance] = useState<number | null>(null);
 
   const commitParts = useCallback(
     (patch: Partial<DurationParts>) => {
@@ -233,78 +247,84 @@ function DurationControl({
   return (
     <InputParts size={size || knobProps.sizeToken} {...(hasError ? { theme: "error" } : undefined)}>
       <InputParts.Box
-        elevation={undefined}
         disabled={disabled}
         role="group"
         aria-label={hasLabel ? undefined : t("Duration")}
         data-ring-target="box"
         data-duration-box=""
         justifyContent="flex-start"
-        alignItems="stretch"
         size={sizeToken as SizeTokens}
-        height={recipe.height}
-        sizeRecipeEscape="duration-box"
       >
-        <InputParts.Section
+        {resolvedClock != null ? (
+          <InputParts.Icon adornment="leading">{resolvedClock}</InputParts.Icon>
+        ) : null}
+        <XStack
+          alignItems="center"
           justifyContent="flex-start"
-          alignItems="stretch"
+          height="100%"
           flexGrow={1}
           flexShrink={1}
-          flexBasis="auto"
           minWidth={0}
+          gap={recipe.gap}
+          data-duration-row=""
         >
-          <XStack
-            alignItems="center"
-            justifyContent="flex-start"
-            width="100%"
-            height="100%"
-            flexGrow={0}
-            flexShrink={1}
-            gap={recipe.gap}
-            data-duration-row=""
-          >
-            {resolvedClock != null ? (
-              <InputParts.Icon adornment="leading">{resolvedClock}</InputParts.Icon>
-            ) : null}
-            {!hideDays ? (
-              <DurationSegment
-                id={id}
-                unit={t("d")}
-                ariaLabel={t("Days")}
-                value={parts.days}
-                onCommit={(days) => commitParts({ days })}
-                onPasteDuration={onChange}
-                disabled={disabled}
-                readOnly={readOnly}
-                knobProps={knobProps}
-                placeholder={placeholder}
-                required={required}
-                hasError={hasError}
-                sizeToken={sizeToken}
-              />
-            ) : null}
+          {!hideDays ? (
             <DurationSegment
-              id={hideDays ? id : `${id}-hours`}
-              unit={t("h")}
-              ariaLabel={t("Hours")}
-              value={parts.hours}
-              onCommit={(hours) => commitParts({ hours })}
+              id={id}
+              unit={t("d")}
+              ariaLabel={t("Days")}
+              value={parts.days}
+              onCommit={(days) => commitParts({ days })}
               onPasteDuration={onChange}
               disabled={disabled}
               readOnly={readOnly}
               knobProps={knobProps}
-              wide
-              placeholder={hideDays ? placeholder : undefined}
+              placeholder={placeholder}
               required={required}
               hasError={hasError}
               sizeToken={sizeToken}
+              digitAdvance={digitAdvance}
             />
+          ) : null}
+          <DurationSegment
+            id={hideDays ? id : `${id}-hours`}
+            unit={t("h")}
+            ariaLabel={t("Hours")}
+            value={parts.hours}
+            onCommit={(hours) => commitParts({ hours })}
+            onPasteDuration={onChange}
+            disabled={disabled}
+            readOnly={readOnly}
+            knobProps={knobProps}
+            wide
+            placeholder={hideDays ? placeholder : undefined}
+            required={required}
+            hasError={hasError}
+            sizeToken={sizeToken}
+            digitAdvance={digitAdvance}
+          />
+          <DurationSegment
+            id={`${id}-minutes`}
+            unit={t("m")}
+            ariaLabel={t("Min")}
+            value={parts.minutes}
+            onCommit={(minutes) => commitParts({ minutes })}
+            onPasteDuration={onChange}
+            disabled={disabled}
+            readOnly={readOnly}
+            knobProps={knobProps}
+            required={required}
+            hasError={hasError}
+            sizeToken={sizeToken}
+            digitAdvance={digitAdvance}
+          />
+          {showSeconds ? (
             <DurationSegment
-              id={`${id}-minutes`}
-              unit={t("m")}
-              ariaLabel={t("Min")}
-              value={parts.minutes}
-              onCommit={(minutes) => commitParts({ minutes })}
+              id={`${id}-seconds`}
+              unit={t("s")}
+              ariaLabel={t("Sec")}
+              value={parts.seconds}
+              onCommit={(secs) => commitParts({ seconds: secs })}
               onPasteDuration={onChange}
               disabled={disabled}
               readOnly={readOnly}
@@ -312,25 +332,26 @@ function DurationControl({
               required={required}
               hasError={hasError}
               sizeToken={sizeToken}
+              digitAdvance={digitAdvance}
             />
-            {showSeconds ? (
-              <DurationSegment
-                id={`${id}-seconds`}
-                unit={t("s")}
-                ariaLabel={t("Sec")}
-                value={parts.seconds}
-                onCommit={(secs) => commitParts({ seconds: secs })}
-                onPasteDuration={onChange}
-                disabled={disabled}
-                readOnly={readOnly}
-                knobProps={knobProps}
-                required={required}
-                hasError={hasError}
-                sizeToken={sizeToken}
-              />
-            ) : null}
-          </XStack>
-        </InputParts.Section>
+          ) : null}
+          <Text
+            aria-hidden
+            position="absolute"
+            opacity={0}
+            pointerEvents="none"
+            numberOfLines={1}
+            {...knobProps.body}
+            {...knobProps.controlType}
+            fontSize={recipe.fontSize}
+            onLayout={(e) => {
+              const width = e.nativeEvent.layout.width;
+              if (width > 0) setDigitAdvance(width / DIGIT_PROBE.length);
+            }}
+          >
+            {DIGIT_PROBE}
+          </Text>
+        </XStack>
       </InputParts.Box>
     </InputParts>
   );

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("")}
+      />
+    );
+  },
+};