@multiplatform.one/forms 7.7.6 → 7.8.0

package/src/Wheel/index.tsx

@@ -112,7 +112,7 @@ function ensureWheelFocusStyles() {
   const style = document.createElement("style");
   style.id = WHEEL_FOCUS_STYLE_ID;
   style.textContent =
-    ".mp1-wheel-wrapper:focus-visible { outline: 2px solid var(--outlineColor, rgba(0,0,0,0.5)); outline-offset: -2px; }";
+    ".mp1-wheel-wrapper:focus-visible { outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)); outline-offset: -2px; }";
   document.head.appendChild(style);
 }
 
@@ -847,7 +847,7 @@ export function Wheel<T = string | number>({
       <Text
         {...knobProps.body}
         fontSize={size}
-        fontWeight={isSelected && !disabled ? "600" : "400"}
+        fontWeight={isSelected && !disabled ? "bold" : knobProps.textWeight.fontWeight}
         color={itemColor(isSelected)}
         numberOfLines={1}
         ellipsizeMode="tail"
@@ -865,7 +865,7 @@ export function Wheel<T = string | number>({
       width={flex ? "100%" : columnWidth}
       minWidth={flex ? 0 : columnWidth}
       flex={flex}
-      {...knobProps.containerRadius}
+      borderRadius={0}
       data-testid="wheel"
       data-disabled={disabled ? true : undefined}
       aria-disabled={disabled || undefined}

package/src/fieldLayout.spec.tsx

@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset } from "@multiplatform.one/theme";
 import { Input as TamaguiInput } from "tamagui";
-import { FieldLayout } from "./fieldLayout";
+import { FieldLayout, useFieldDescribedBy } from "./fieldLayout";
 import { __resetDevWarnSeen } from "./shared/devWarn";
 
 function classIncludes(container: HTMLElement, fragment: string): boolean {
@@ -188,6 +188,47 @@ describe("FieldLayout error precedence (Axiom 5 eject-last)", () => {
   });
 });
 
+describe("FieldLayout message-before-control anatomy", () => {
+  function Control() {
+    return <input id="ordered" aria-describedby={useFieldDescribedBy()} />;
+  }
+
+  for (const mode of ["top", "side", "compact"] as const) {
+    it(`${mode}: helper and replacement error precede the control and describe only the rendered slot`, () => {
+      const renderField = (error?: string) => (
+        <Preset overrides={{ fieldLabelPlacement: mode === "side" ? "side" : "top" }}>
+          <FieldLayout
+            id="ordered"
+            label="Email"
+            compactSpacing={mode === "compact"}
+            helperText="Use your work address"
+            error={error}
+          >
+            <Control />
+          </FieldLayout>
+        </Preset>
+      );
+      const result = renderWithProviders(renderField());
+      const assertSlot = (id: string, text: string) => {
+        const input = result.container.querySelector("input")!;
+        const message = result.container.querySelector(`#${id}`)!;
+        expect(message.textContent).toBe(text);
+        expect(
+          message.compareDocumentPosition(input) & Node.DOCUMENT_POSITION_FOLLOWING,
+        ).toBeTruthy();
+        expect(input.getAttribute("aria-describedby")).toBe(id);
+        expect(
+          result.container.querySelectorAll("[id$='-description'], [id$='-error']"),
+        ).toHaveLength(1);
+      };
+      assertSlot("ordered-description", "Use your work address");
+      result.rerender(renderField("Enter an email address"));
+      assertSlot("ordered-error", "Enter an email address");
+      expect(result.container.textContent).not.toContain("Use your work address");
+    });
+  }
+});
+
 describe("FieldLayout banned-error-word DEV warn", () => {
   let warnSpy: ReturnType<typeof vi.spyOn>;
 

package/src/fieldLayout.tsx

@@ -218,13 +218,13 @@ export function FieldLayout({
     ...(width !== undefined ? { width } : {}),
   };
 
-  const describedBy =
-    [
-      helperText && id ? `${id}-description` : undefined,
-      errorMessage && id ? `${id}-error` : undefined,
-    ]
-      .filter(Boolean)
-      .join(" ") || undefined;
+  const describedBy = id
+    ? errorMessage
+      ? `${id}-error`
+      : helperText
+        ? `${id}-description`
+        : undefined
+    : undefined;
 
   const a11yLabel = typeof label === "string" ? `${label}${requiredSuffix}` : ariaLabel;
   const a11yDescription = errorMessage ?? helperText;
@@ -293,9 +293,9 @@ export function FieldLayout({
 
   const controlColumn = (
     <YStack flex={sideLabel ? 1 : undefined} {...gapProps}>
-      {children}
       {helperNode}
       {errorNode}
+      {children}
     </YStack>
   );
 
@@ -330,9 +330,9 @@ export function FieldLayout({
           ) : (
             <>
               {labelNode}
-              {children}
               {helperNode}
               {errorNode}
+              {children}
             </>
           )}
         </YStack>

package/src/fields/Checkbox/CheckboxFieldFrame.spec.tsx

@@ -11,6 +11,8 @@
 import { cleanup } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, describe, expect, it } from "vitest";
+import { createRef } from "react";
+import { FieldLayout } from "../../fieldLayout";
 import { CheckboxFieldFrame } from "./CheckboxFieldFrame";
 
 afterEach(cleanup);
@@ -31,6 +33,22 @@ function frame(container: HTMLElement): HTMLElement {
 }
 
 describe("CheckboxFieldFrame", () => {
+  it("links the rendered field message, forwards its ref, and preserves an explicit description", () => {
+    const ref = createRef<any>();
+    const fixture = (override?: { "aria-describedby": string | undefined }) => (
+      <FieldLayout id="consent" helperText="Read the terms" error="Accept the terms">
+        <CheckboxFieldFrame id="consent" checked={false} ref={ref} {...override} />
+      </FieldLayout>
+    );
+    const result = renderWithProviders(fixture());
+    expect(frame(result.container).getAttribute("aria-describedby")).toBe("consent-error");
+    expect(ref.current).toBe(frame(result.container));
+    result.rerender(fixture({ "aria-describedby": "consumer-description" }));
+    expect(frame(result.container).getAttribute("aria-describedby")).toBe("consumer-description");
+    result.rerender(fixture({ "aria-describedby": undefined }));
+    expect(frame(result.container).getAttribute("aria-describedby")).toBeNull();
+  });
+
   it("still renders a real role=checkbox, so the styling never costs the semantics", () => {
     const { container } = renderWithProviders(<CheckboxFieldFrame checked={false} />);
     expect(frame(container)).toBeTruthy();

package/src/fields/Checkbox/CheckboxFieldFrame.tsx

@@ -1,7 +1,8 @@
 import { Checkbox as TamaguiCheckbox, styled } from "tamagui";
+import { useFieldDescribedBy } from "../../fieldLayout";
 
 /** Hit-target frame. The painted box is CheckboxGlyphBox (LC-71). */
-export const CheckboxFieldFrame = styled(TamaguiCheckbox, {
+const CheckboxFieldFrameBase = styled(TamaguiCheckbox, {
   backgroundColor: "transparent",
   borderColor: "transparent",
   borderWidth: 0,
@@ -21,3 +22,7 @@ export const CheckboxFieldFrame = styled(TamaguiCheckbox, {
   },
   activeStyle: { backgroundColor: "transparent", borderColor: "transparent" },
 });
+
+export const CheckboxFieldFrame = CheckboxFieldFrameBase.styleable((props, ref) => (
+  <CheckboxFieldFrameBase aria-describedby={useFieldDescribedBy()} {...props} ref={ref} />
+));

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

@@ -1,5 +1,5 @@
 import { act, fireEvent } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { Combobox } from "./index";
@@ -11,6 +11,53 @@ const options = [
 ];
 
 describe("Combobox", () => {
+  describe("custom sheet trigger", () => {
+    const initialWidth = window.innerWidth;
+    afterEach(() => {
+      window.innerWidth = initialWidth;
+    });
+
+    it("keeps the same name and keyboard opener on narrow and wide screens", async () => {
+      for (const width of [500, 1200]) {
+        window.innerWidth = width;
+        const result = renderWithProviders(
+          <Combobox
+            options={options}
+            aria-label="Country code"
+            trigger={() => <span>Country</span>}
+          />,
+        );
+        const trigger = result.container.querySelector('[role="combobox"]');
+        expect(trigger?.getAttribute("aria-label")).toBe("Country code");
+        expect(trigger?.getAttribute("tabindex")).toBe("0");
+        expect(trigger?.getAttribute("aria-expanded")).toBe("false");
+        await act(async () => fireEvent.keyDown(trigger!, { key: "Enter" }));
+        expect(trigger?.getAttribute("aria-expanded")).toBe("true");
+        result.unmount();
+      }
+    });
+
+    it("lets a custom adornment hug its content while ordinary triggers keep stretching", () => {
+      for (const width of [500, 1200]) {
+        window.innerWidth = width;
+        for (const triggerSizing of [undefined, "content"] as const) {
+          const result = renderWithProviders(
+            <Combobox
+              options={options}
+              triggerSizing={triggerSizing}
+              trigger={() => <span>Country</span>}
+            />,
+          );
+          const trigger = result.container.querySelector<HTMLElement>(
+            '[data-testid="combobox-trigger"]',
+          );
+          expect(trigger?.style.width).toBe(triggerSizing === "content" ? "auto" : "100%");
+          result.unmount();
+        }
+      }
+    });
+  });
+
   describe("without form context", () => {
     it("renders with label", () => {
       const result = renderWithProviders(<Combobox label="Fruit" name="fruit" options={options} />);

package/src/fields/Combobox/index.tsx

@@ -191,6 +191,8 @@ export interface ComboboxProps {
   /** Whether more pages are available. Shows a spinner at the bottom when loading more. */
   hasMore?: boolean;
   trigger?: (selected: ComboboxOption | ComboboxOption[] | undefined, open: boolean) => ReactNode;
+  /** Custom triggers stretch by default; content hugs a composite-field adornment. */
+  triggerSizing?: "stretch" | "content";
   name?: string;
   form?: AnyFormApi;
   validators?: Record<string, unknown>;
@@ -458,6 +460,7 @@ interface FloatingComboboxCoreProps {
   tabIndexOverride?: number;
   popoverWidth?: number;
   trigger?: (selected: ComboboxOption | ComboboxOption[] | undefined, open: boolean) => ReactNode;
+  triggerSizing?: "stretch" | "content";
   knobProps: KnobProps;
   multiple?: boolean;
   selectedOrder?: SelectedOrder;
@@ -493,6 +496,7 @@ function FloatingComboboxCore({
   tabIndexOverride,
   popoverWidth,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -1351,12 +1355,16 @@ function FloatingComboboxCore({
     <View
       {...boxEventProps}
       data-testid="combobox-trigger"
-      width="100%"
+      width={triggerSizing === "content" ? "auto" : "100%"}
       alignSelf="stretch"
       flexShrink={0}
       outlineWidth={0}
       focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
-      style={{ display: "flex", alignItems: "stretch", width: "100%" }}
+      style={{
+        display: "flex",
+        alignItems: "stretch",
+        width: triggerSizing === "content" ? "auto" : "100%",
+      }}
     >
       {triggerRender(multiple ? selectedOptions : selectedOption, open)}
     </View>
@@ -1785,6 +1793,7 @@ function NativeComboboxCore({
   "aria-label": ariaLabel,
   hasLabel,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -2369,15 +2378,51 @@ function NativeComboboxCore({
     </View>
   );
 
+  // Both trigger shapes share one accessible control. The sheet wrapper's
+  // capture handler also opens it, so pointer activation is idempotent.
+  const triggerProps = {
+    id,
+    ...(isWeb
+      ? {
+          role: "combobox" as const,
+          "aria-haspopup": "listbox" as const,
+          "aria-expanded": open,
+          "aria-controls": listboxId,
+          "aria-activedescendant": hideSearch ? activeDescendant : undefined,
+          "aria-autocomplete": hideSearch ? ("list" as const) : undefined,
+          "aria-label": ariaLabel ?? (!hasLabel ? placeholder : undefined),
+          "aria-describedby": describedBy,
+          tabIndex: disabled ? -1 : 0,
+        }
+      : { importantForAccessibility: "no" as const }),
+    onPress: isWeb && !disabled ? () => handleOpenChange(true) : undefined,
+    onKeyDown: (event: React.KeyboardEvent) => {
+      if (disabled) return;
+      if (
+        ["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(event.key) ||
+        event.code === "Space"
+      ) {
+        event.preventDefault();
+        setKeyboardNav(true);
+        if (!open) handleOpenChange(true);
+      }
+    },
+  };
+
   const triggerContent = triggerRender ? (
     <View
       data-testid="combobox-trigger"
-      width="100%"
+      width={triggerSizing === "content" ? "auto" : "100%"}
       alignSelf="stretch"
       flexShrink={0}
       outlineWidth={0}
       focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
-      style={{ display: "flex", alignItems: "stretch", width: "100%" }}
+      style={{
+        display: "flex",
+        alignItems: "stretch",
+        width: triggerSizing === "content" ? "auto" : "100%",
+      }}
+      {...triggerProps}
     >
       {triggerRender(multiple ? selectedOptions : selectedOption, open)}
     </View>
@@ -2402,41 +2447,7 @@ function NativeComboboxCore({
             borderRadius: knobProps.borderRadius.borderRadius,
             borderWidth: knobProps.borderRadius.borderWidth,
           })}
-      id={id}
-      // Web: the box is the combobox control (ARIA + keyboard). Native:
-      // FloatingPanel's trigger Pressable (triggerA11y) is the single
-      // accessible node — role/aria props here surface the box as a
-      // duplicate TalkBack stop on Android, so exclude it from the tree
-      // (descendants stay reachable; "no", not "no-hide-descendants").
-      {...(isWeb
-        ? {
-            role: "combobox" as const,
-            "aria-haspopup": "listbox",
-            "aria-expanded": open,
-            "aria-controls": listboxId,
-            "aria-activedescendant": hideSearch ? activeDescendant : undefined,
-            "aria-autocomplete": hideSearch ? ("list" as const) : undefined,
-            // Standalone (no label): fall back to placeholder for the name.
-            // Labelled: the sibling Label wires `aria-labelledby` onto this id
-            // itself — naming it here too doubles the spoken name.
-            "aria-label": ariaLabel ?? (!hasLabel ? placeholder : undefined),
-            "aria-describedby": describedBy,
-            tabIndex: disabled ? -1 : 0,
-          }
-        : { importantForAccessibility: "no" as const })}
-      // Sheet capture opens first on web, so this opener is idempotent.
-      // Native delegates the gesture to FloatingPanel.
-      onPress={isWeb && !disabled ? () => handleOpenChange(true) : undefined}
-      onKeyDown={(e: React.KeyboardEvent) => {
-        if (
-          ["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) ||
-          e.code === "Space"
-        ) {
-          e.preventDefault();
-          setKeyboardNav(true);
-          if (!open) handleOpenChange(true);
-        }
-      }}
+      {...triggerProps}
     >
       <View
         flex={1}
@@ -2506,6 +2517,7 @@ function NativeComboboxCore({
       // the user types, so a content-fit sheet would open as a sliver.
       sheetFill={Boolean(onSearch)}
       trigger={triggerContent}
+      triggerSizing={triggerSizing}
       triggerEnd={
         clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? (
           <Button
@@ -2564,6 +2576,7 @@ export function Combobox({
   onLoadMore,
   hasMore,
   trigger,
+  triggerSizing,
   name,
   form: formProp,
   validators,
@@ -2696,6 +2709,7 @@ export function Combobox({
         tabIndexOverride={tabIndexProp}
         popoverWidth={popoverWidth}
         trigger={trigger}
+        triggerSizing={triggerSizing}
         knobProps={knobProps}
         multiple={multiple}
         selectedOrder={selectedOrder}

package/src/fields/DatePicker/Calendar.tsx

@@ -80,6 +80,7 @@ function CalendarDayGrid({
   maxDate,
   selectionCapped,
 }: CalendarDayGridProps) {
+  const { knobProps } = useCalendarKnobs();
   return (
     <CalendarDays
       calendarData={calendarData}
@@ -110,7 +111,7 @@ function CalendarDayGrid({
               }
               return (
                 <View
-                  transition="quick"
+                  transition={knobProps.transition}
                   position="absolute"
                   height="100%"
                   zIndex={0}
@@ -297,6 +298,7 @@ export function Calendar({
   const handleSetDisplayForPrev = useCallback(
     (date: Date) => {
       const next = new Date(date);
+      next.setDate(1);
       next.setMonth(next.getMonth() + 1);
       setDisplayDate(next);
     },
@@ -305,6 +307,7 @@ export function Calendar({
 
   const prevMonthDate = useMemo(() => {
     const date = new Date(displayDate);
+    date.setDate(1);
     date.setMonth(date.getMonth() - 1);
     return date;
   }, [displayDate]);

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import type { ComponentProps } from "react";
 import { useState } from "react";
-import { YStack } from "tamagui";
+import { Text, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Calendar } from "./Calendar";
@@ -103,6 +103,27 @@ export const Standalone: Story = {
   render: (args) => <DatePicker {...args} />,
 };
 
+export const StateContract: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    const [edits, setEdits] = useState(0);
+    return (
+      <YStack gap="$4" maxWidth={400}>
+        <DatePicker label="Saved date" defaultValue="1990-01-01" />
+        <DatePicker
+          label="Programmatic date"
+          value={value}
+          onChange={() => setEdits((count) => count + 1)}
+        />
+        <Button onPress={() => setValue("2026-03-05")}>Load date</Button>
+        <Text>{`User edits: ${edits}`}</Text>
+        <DatePicker label="Read-only date" value="1990-01-01" readOnly />
+        <DatePicker label="Disabled date" value="1990-01-01" disabled />
+      </YStack>
+    );
+  },
+};
+
 export const Basic: Story = {
   render: (args) => <DatePicker {...args} />,
   args: {

package/src/fields/DatePicker/DateRangePicker.tsx

@@ -261,6 +261,7 @@ function DualCalendarBody({
 
   const prevMonthDate = useMemo(() => {
     const date = new Date(displayDate);
+    date.setDate(1);
     date.setMonth(date.getMonth() - 1);
     return date;
   }, [displayDate]);
@@ -273,6 +274,7 @@ function DualCalendarBody({
   const handleSetDisplayForPrev = useCallback(
     (date: Date) => {
       const next = new Date(date);
+      next.setDate(1);
       next.setMonth(next.getMonth() + 1);
       setDisplayDate(next);
     },
@@ -281,7 +283,7 @@ function DualCalendarBody({
 
   if (!fullWidthMode) {
     return (
-      <View {...knobProps.panelPadding}>
+      <View>
         <SingleCalendar
           displayDate={displayDate}
           rangeStart={rangeStart}
@@ -297,7 +299,7 @@ function DualCalendarBody({
   }
 
   return (
-    <View flexDirection="row" {...knobProps.gap} {...knobProps.panelPadding}>
+    <View flexDirection="row" {...knobProps.gap}>
       <SingleCalendar
         displayDate={prevMonthDate}
         rangeStart={rangeStart}

package/src/fields/DatePicker/DatetimePicker.catalog.tsx

@@ -246,15 +246,14 @@ function DatetimePickerBody({
   );
 
   return (
-    <View
-      flexDirection="column"
-      alignItems="center"
-      {...knobProps.gap}
-      width={activeTab === "date" ? px * 7 : "100%"}
-      minWidth={px * 7}
-      alignSelf={activeTab === "date" ? "center" : "stretch"}
-    >
-      <View flexDirection="row" width="100%">
+    <View flexDirection="column" alignItems="center" minWidth={px * 7} alignSelf="stretch">
+      <View
+        flexDirection="row"
+        width="100%"
+        {...knobProps.panelPadding}
+        // The active content frame owns the space below this strip.
+        paddingBottom={0}
+      >
         {(["date", "time"] as const).map((tab) => {
           const active = activeTab === tab;
           const tabDisabled = tab === "time" && !selectedDatetime;
@@ -319,15 +318,17 @@ function DatetimePickerBody({
         </CalendarViewSwitcher>
       ) : (
         selectedDatetime && (
-          <View width="100%">
-            <TimeSection
-              selectedDate={selectedDatetime}
-              onTimeChange={handleTimeChange}
-              timeFormat={timeFormat}
-              minuteStep={minuteStep}
-              showSeconds={showSeconds}
-            />
-          </View>
+          <CalendarPanelFrame>
+            <View width={px * 7}>
+              <TimeSection
+                selectedDate={selectedDatetime}
+                onTimeChange={handleTimeChange}
+                timeFormat={timeFormat}
+                minuteStep={minuteStep}
+                showSeconds={showSeconds}
+              />
+            </View>
+          </CalendarPanelFrame>
         )
       )}
     </View>
@@ -505,7 +506,8 @@ export function DatetimePicker<
         }
         disabled={disabled}
         sizing="grow"
-        widthMode="at-least-trigger"
+        contentPadding="none"
+        widthMode="fit-content"
       >
         {pickerContent(fieldChange)}
       </FloatingPanel>