@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/fields/TextArea/index.tsx

@@ -9,7 +9,6 @@ import { Input as InputParts } from "../../InputParts";
 import { formCommonColors } from "../../shared/colorRamps";
 import { ThemedTextArea } from "../../themedPrimitives";
 import {
-  clampRadiusForLargeComponent,
   getFieldError,
   getFieldHeight,
   mergeFieldHandler,
@@ -34,7 +33,9 @@ export interface TextAreaProps {
   id?: string;
   value?: string;
   defaultValue?: string;
-  onChange?: (e: any) => void;
+  /** Canonical change contract (LC-14): emits the string value. */
+  onChange?: (value: string) => void;
+  /** @deprecated Use onChange. Still fires from the same emit site. */
   onChangeText?: (text: string) => void;
   onBlur?: (...args: any[]) => void;
   placeholder?: string;
@@ -98,9 +99,9 @@ export function TextArea({
   const textAreaRef = textAreaRefProp ? (textAreaRefProp as RefObject<any>) : internalRef;
   const [autoHeight, setAutoHeight] = useState<number | undefined>(undefined);
 
-  const resolvedSizeToken = (size || knobProps.sizeToken) as SizeTokens;
-  const minHeightPx = getFieldHeight(resolvedSizeToken, minRows || 3);
-  const maxHeightPx = getFieldHeight(resolvedSizeToken, maxRows);
+  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const minHeightPx = getFieldHeight(resolvedSize, minRows || 3);
+  const maxHeightPx = getFieldHeight(resolvedSize, maxRows);
   // Polaris/GOV.UK: a declared limit always surfaces a live count. Explicit
   // `showCount={false}` ejects.
   const showCharacterCount = showCount ?? maxLength != null;
@@ -133,13 +134,31 @@ export function TextArea({
     [autoResize, minHeightPx, maxHeightPx],
   );
 
-  // Render skeleton placeholder
+  const layoutBind = {
+    id,
+    label,
+    labelProps,
+    helperText,
+    required,
+    disabled,
+    size: resolvedSize,
+    knobProps,
+    placeholder,
+  };
+
+  // FieldLayout keeps label/helper anatomy (LC-20); only the control is the skeleton.
   if (skeleton) {
     return (
-      <InputParts size={size || knobProps.sizeToken}>
-        {label && <Skeleton variant="text" width="30%" />}
-        <Skeleton variant="rounded" width="100%" height={minHeightPx} />
-      </InputParts>
+      <FieldLayout {...layoutBind} error={error}>
+        <InputParts size={resolvedSize}>
+          <Skeleton
+            variant="rounded"
+            width="100%"
+            height={minHeightPx}
+            {...knobProps.containerRadius}
+          />
+        </InputParts>
+      </FieldLayout>
     );
   }
 
@@ -184,7 +203,6 @@ export function TextArea({
     );
   };
 
-  const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
   const countInside = showCharacterCount && countPosition.startsWith("bottom");
 
   const resizeStyle = autoResize
@@ -197,7 +215,7 @@ export function TextArea({
           | "hidden",
       }
     : numberOfLines
-      ? { numberOfLines, minHeight: getFieldHeight(resolvedSizeToken, numberOfLines) }
+      ? { numberOfLines, minHeight: getFieldHeight(resolvedSize, numberOfLines) }
       : { numberOfLines: minRows, minHeight: minHeightPx };
 
   const isControlled = value !== undefined;
@@ -223,7 +241,7 @@ export function TextArea({
           height="auto"
           width="100%"
           alignItems="stretch"
-          borderRadius={cappedRadius}
+          {...knobProps.containerRadius}
           cursor={disabled ? "not-allowed" : "text"}
           theme={hasError ? "red" : undefined}
           // LC-40: Box owns the disabled chrome wash (value text stays >= AA);
@@ -272,7 +290,6 @@ export function TextArea({
             {...(countId ? { "aria-describedby": countId } : undefined)}
             id={id}
             {...(isControlled ? { value: textValue } : { defaultValue: textValue })}
-            onChange={onChange}
             onFocus={(e: any) => {
               setCountLive(true);
               (textAreaProps as { onFocus?: (ev: any) => void } | undefined)?.onFocus?.(e);
@@ -281,6 +298,7 @@ export function TextArea({
               if (disabled || readOnly) return;
               setCharCount(text.length);
               handleChange?.(text);
+              onChange?.(text);
               onChangeText?.(text);
               measureAndResize();
             }}
@@ -302,21 +320,8 @@ export function TextArea({
 
   if (!resolvedForm || !name) {
     return (
-      <FieldLayout
-        id={id}
-        label={label}
-        labelProps={labelProps}
-        error={error}
-        helperText={helperText}
-        required={required}
-        size={size}
-        knobProps={knobProps}
-        onBlur={onBlur}
-        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
-        // the sibling label/helper readable) — it needs the disabled state.
-        disabled={disabled}
-      >
-        <InputParts size={size || knobProps.sizeToken} {...(error ? { theme: "red" } : undefined)}>
+      <FieldLayout {...layoutBind} error={error} onBlur={onBlur}>
+        <InputParts size={resolvedSize} {...(error ? { theme: "red" } : undefined)}>
           {renderTextArea(value ?? defaultValue, undefined, undefined, !!error)}
         </InputParts>
       </FieldLayout>
@@ -334,22 +339,11 @@ export function TextArea({
         const resolvedError = getFieldError(field, error);
         return (
           <FieldLayout
-            id={id}
-            label={label}
-            labelProps={labelProps}
+            {...layoutBind}
             error={resolvedError}
-            helperText={helperText}
-            required={required}
-            size={size}
-            knobProps={knobProps}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
-            // LC-40: see standalone branch — FieldLayout carries dimWhole.
-            disabled={disabled}
           >
-            <InputParts
-              size={size || knobProps.sizeToken}
-              {...(resolvedError ? { theme: "red" } : undefined)}
-            >
+            <InputParts size={resolvedSize} {...(resolvedError ? { theme: "red" } : undefined)}>
               {renderTextArea(
                 field.state.value as string,
                 (text) => field.handleChange(text as any),

package/src/fields/TimePicker/TimePicker.spec.tsx

@@ -1,7 +1,9 @@
 import { act, fireEvent, waitFor } from "@testing-library/react";
+import type { ReactElement } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
+import * as TimePickerModule from "./index";
 import { TimePicker } from "./index";
 import { to12Hour, to24Hour } from "./parts";
 
@@ -92,7 +94,7 @@ describe("TimePicker", () => {
       expect(box?.contains(input)).toBe(true);
     });
 
-    it("opens the clock dial and flips AM/PM at noon", async () => {
+    it("opens iOS wheels and treats AM/PM as a third column", async () => {
       const onChange = vi.fn();
       const result = renderWithProviders(
         <TimePicker label="Time" name="t" value="12:30" timeFormat="12h" onChange={onChange} />,
@@ -106,18 +108,29 @@ describe("TimePicker", () => {
         }
       });
       await waitFor(() => {
-        expect(document.querySelector('[data-testid="time-picker-dial"]')).toBeTruthy();
+        expect(document.querySelector('[data-testid="time-picker-wheels"]')).toBeTruthy();
       });
-      const am = Array.from(document.querySelectorAll('[role="radio"]')).find(
-        (el) => el.textContent === "AM",
+      expect(document.querySelector('[data-testid="time-picker-dial"]')).toBeNull();
+      const wheels = document.querySelectorAll('[data-testid="wheel"]');
+      expect(wheels.length).toBe(3);
+      expect(document.querySelector('[aria-label="AM/PM"]')).toBeTruthy();
+    });
+
+    it("shows a clock glyph and placeholder when empty, and no clear", () => {
+      const result = renderWithProviders(
+        <TimePicker label="Time" name="t" placeholder="Pick a time" />,
       );
-      expect(am).toBeTruthy();
-      await act(async () => {
-        if (am) fireEvent.click(am);
-      });
-      await waitFor(() => {
-        expect(onChange).toHaveBeenCalledWith("00:30");
-      });
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("placeholder")).toBe("Pick a time");
+      expect(result.container.querySelector('[data-testid="time-picker-glyph"]')).toBeTruthy();
+      expect(result.container.querySelector('[data-testid="time-picker-clear"]')).toBeNull();
+    });
+
+    it("shows clear only when a value is set", () => {
+      const result = renderWithProviders(
+        <TimePicker label="Time" name="t" value="14:30" timeFormat="24h" />,
+      );
+      expect(result.container.querySelector('[data-testid="time-picker-clear"]')).toBeTruthy();
     });
   });
 
@@ -131,4 +144,53 @@ describe("TimePicker", () => {
       expect(result.findTextElement("Meeting time")).toBeDefined();
     });
   });
+
+  describe("named exports", () => {
+    it("publishes TimePicker as a named export with no default", () => {
+      expect(typeof TimePickerModule.TimePicker).toBe("function");
+      expect("default" in TimePickerModule).toBe(false);
+    });
+  });
+
+  describe("design-law", () => {
+    async function openPanel(jsx: ReactElement) {
+      const result = renderWithProviders(jsx);
+      const trigger = result.container.querySelector("input,button,[role='button']");
+      expect(trigger).toBeTruthy();
+      await act(async () => {
+        if (trigger) {
+          fireEvent.mouseDown(trigger);
+          fireEvent.click(trigger);
+        }
+      });
+      await waitFor(() => {
+        expect(document.querySelector('[data-testid="time-picker-panel"]')).toBeTruthy();
+      });
+      return result;
+    }
+
+    it("unselected period and pip labels stay on the 400/700 weight pair", async () => {
+      await openPanel(
+        <TimePicker label="Time" name="t" value="12:30" timeFormat="12h" onChange={vi.fn()} />,
+      );
+      const panel = document.querySelector('[data-testid="time-picker-panel"]');
+      expect(panel).toBeTruthy();
+      const weights = new Set<string>();
+      for (const node of panel!.querySelectorAll("*")) {
+        const el = node as HTMLElement;
+        if (el.style.fontWeight) weights.add(el.style.fontWeight);
+        for (const cls of String(el.className ?? "").split(/\s+/)) {
+          const match = cls.match(/(?:^|_)(?:fw|fow|fontWeight)-?(\d+)/i);
+          if (match) weights.add(match[1]);
+          if (cls.includes("500")) weights.add("500-class");
+        }
+      }
+      expect(weights.has("500")).toBe(false);
+      expect(weights.has("500-class")).toBe(false);
+    });
+
+    // The analog clock face, hub, hand and hour segments were replaced by the
+    // looping wheel columns in 1d6f17ac9. Their radius and size-recipe specs
+    // went with them; the wheels carry their own coverage in TimeWheels.spec.
+  });
 });

package/src/fields/TimePicker/TimePicker.stories.tsx

@@ -1,4 +1,5 @@
 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";
@@ -14,7 +15,7 @@ const meta: Meta<typeof TimePicker> = {
     docs: {
       description: {
         component:
-          "A time picker with a Material 3 clock dial, digital hour/minute segments, and AM/PM fill toggle.",
+          "A time picker with iOS-style hour, minute, and AM/PM wheels: inertial snap, a fixed centre band, and looping hours/minutes.",
       },
     },
   },
@@ -196,3 +197,30 @@ export const Interactive: Story = {
 export const SkeletonState: Story = {
   args: { label: "Start Time", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "09:00" },
+      { id: "2", label: "Beta", value: "14:30" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "TimePicker",
+        field: "timepicker",
+        fieldProps: { timeFormat: "12h", minuteStep: 5, placeholder: "Select a time" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/TimePicker/index.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
+import { isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
@@ -15,6 +16,7 @@ import {
 import type { AnyFormApi } from "../../types";
 import {
   TimePanel,
+  TimePickerClearButton,
   TimePickerInputTrigger,
   formatTimeDisplay,
   isValidTimeString,
@@ -176,15 +178,19 @@ export function TimePicker({
           if (!isOpen) blurHandler?.();
         }}
         disabled={disabled}
-        scrollable
         sizing="grow"
-        fitContent
+        widthMode="at-least-trigger"
         triggerA11y={{
           label: (typeof label === "string" && label) || t("Time"),
           value: triggerValue || placeholder,
           hint: typeof helperText === "string" ? helperText : undefined,
         }}
         trigger={renderTrigger(triggerValue, hasError, fieldChange)}
+        triggerEnd={
+          !isWeb && triggerValue ? (
+            <TimePickerClearButton onClear={() => handleClear(fieldChange)} disabled={disabled} />
+          ) : undefined
+        }
       >
         {panelContent(fieldValue ?? value, (time) => handleChange(time, fieldChange))}
       </FloatingPanel>