@multiplatform.one/forms 7.7.4 → 7.8.0

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

@@ -37,7 +37,9 @@ import {
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Pressable as RNPressable } from "react-native";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
+import { Button } from "../../Button";
 import { Chip, type ChipProps } from "../../Chip";
+import { pickerTriggerContract } from "../../shared/pickerTriggerContract";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -189,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>;
@@ -367,7 +371,7 @@ const ComboboxItem = memo(function ComboboxItem({
       active={isActive}
       aria-selected={isSelected}
       data-state={isSelected ? "active" : "inactive"}
-      size={ctx.knobProps.sizeToken}
+      height={ctx.knobProps.control.height}
       {...listItemRingProps(Boolean(keyboardRing))}
       {...(suppressHover
         ? {
@@ -456,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;
@@ -491,6 +496,7 @@ function FloatingComboboxCore({
   tabIndexOverride,
   popoverWidth,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -1349,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>
@@ -1373,17 +1383,13 @@ function FloatingComboboxCore({
       // attaches below instead (MPO-38), leaving the trigger on screen and
       // focusable, so it keeps its ring.
       suppressFocusRing={open && !multiple}
+      {...pickerTriggerContract(knobProps.control.height)}
       {...(inTableCell
-        ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-          { minHeight: 44 }
+        ? // Chromeless in cells.
+          {}
         : {
             borderRadius: knobProps.borderRadius.borderRadius,
             borderWidth: knobProps.borderRadius.borderWidth,
-            // LC-54 PRESS-FLOOR: compact/small size tokens render a sub-44
-            // trigger (the 36px "Allocated To" quick filter breaking the
-            // list's 44px control row) — same floor the house Select holds
-            // on both its trigger variants.
-            minHeight: 44,
           })}
     >
       <SyncFocusToOpen open={open} />
@@ -1420,6 +1426,7 @@ function FloatingComboboxCore({
           </View>
         ) : (
           <Text
+            {...knobProps.controlType}
             fontFamily={knobProps.body.fontFamily}
             fontWeight={knobProps.body.fontWeight}
             color={
@@ -1435,11 +1442,13 @@ function FloatingComboboxCore({
         )}
       </View>
       {clearable && !multiple && !disabled && typeof value === "string" && value !== "" && (
-        <View
-          paddingInlineEnd="$1"
+        <Button
+          size={knobProps.control.height}
+          chromeless
+          {...pickerTriggerContract(knobProps.control.height)}
+          icon={<XIcon size={14} />}
           alignSelf="center"
           cursor="pointer"
-          role="button"
           tabIndex={-1}
           aria-label={t("Clear")}
           opacity={0.6}
@@ -1454,9 +1463,7 @@ function FloatingComboboxCore({
             e.stopPropagation?.();
             onValueChange?.("");
           }}
-        >
-          <XIcon size={14} />
-        </View>
+        />
       )}
       <View paddingInlineEnd="$2" alignSelf="center">
         <CaretDownIcon size={16} color={glyphColor} />
@@ -1607,7 +1614,7 @@ function FloatingComboboxCore({
                       id={comboboxOptionId(id, createOptionIndex)}
                       selected={false}
                       active={createOptionIndex === activeIndex}
-                      size={knobProps.sizeToken}
+                      height={knobProps.control.height}
                       data-combobox-index={createOptionIndex}
                       data-active={createOptionIndex === activeIndex}
                       {...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing)}
@@ -1649,7 +1656,7 @@ function FloatingComboboxCore({
                   id={comboboxOptionId(id, createOptionIndex)}
                   selected={false}
                   active={createOptionIndex === activeIndex}
-                  size={knobProps.sizeToken}
+                  height={knobProps.control.height}
                   data-combobox-index={createOptionIndex}
                   data-active={createOptionIndex === activeIndex}
                   {...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing)}
@@ -1736,7 +1743,7 @@ const comboboxSearchHeader = (
     alignItems="center"
     gap="$2"
     paddingHorizontal="$3"
-    height={knobProps.sizeToken}
+    height={knobProps.control.height}
     borderBottomWidth={1}
     borderBottomColor={formCommonColors.divider}
   >
@@ -1786,6 +1793,7 @@ function NativeComboboxCore({
   "aria-label": ariaLabel,
   hasLabel,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -2169,8 +2177,8 @@ function NativeComboboxCore({
                 data-active={active}
                 {...listItemRingProps(active && listKeyboardRing)}
                 {...(option.description
-                  ? { minHeight: knobProps.sizeToken, paddingVertical: "$2" }
-                  : { height: knobProps.sizeToken })}
+                  ? { minHeight: knobProps.control.height, paddingVertical: "$2" }
+                  : { height: knobProps.control.height })}
                 onPress={isWeb ? () => handleSelect(option) : undefined}
                 onMouseEnter={() => {
                   setKeyboardNav(false);
@@ -2262,7 +2270,7 @@ function NativeComboboxCore({
               alignItems="center"
               gap="$2"
               paddingHorizontal="$3"
-              height={knobProps.sizeToken}
+              height={knobProps.control.height}
               role="option"
               id={comboboxOptionId(id, createOptionIndex)}
               data-combobox-index={createOptionIndex}
@@ -2307,7 +2315,7 @@ function NativeComboboxCore({
           alignItems="center"
           gap="$2"
           paddingHorizontal="$3"
-          height={knobProps.sizeToken}
+          height={knobProps.control.height}
           role="option"
           id={comboboxOptionId(id, createOptionIndex)}
           data-combobox-index={createOptionIndex}
@@ -2370,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>
@@ -2395,48 +2439,15 @@ function NativeComboboxCore({
       // paint — it would ghost around the panel's corners. A multi-select
       // panel attaches below instead (MPO-38), so it keeps its ring.
       suppressFocusRing={open && !multiple}
+      {...pickerTriggerContract(knobProps.control.height)}
       {...(inTableCell
-        ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-          { minHeight: 44 }
+        ? // Chromeless in cells.
+          {}
         : {
             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 })}
-      // Web: trigger owns toggle. Native: FloatingPanel.native owns open
-      // (avoid double-toggle that batches open then immediately closed).
-      onPress={isWeb && !disabled ? () => handleOpenChange(!open) : 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}
@@ -2471,6 +2482,7 @@ function NativeComboboxCore({
           </View>
         ) : (
           <Text
+            {...knobProps.controlType}
             fontFamily={knobProps.body.fontFamily}
             fontWeight={knobProps.body.fontWeight}
             color={
@@ -2484,24 +2496,6 @@ function NativeComboboxCore({
           </Text>
         )}
       </View>
-      {clearable && !multiple && !disabled && typeof value === "string" && value !== "" && (
-        <View
-          paddingInlineEnd="$1"
-          alignSelf="center"
-          cursor="pointer"
-          role="button"
-          tabIndex={-1}
-          aria-label={t("Clear")}
-          opacity={0.6}
-          hoverStyle={{ opacity: 1 }}
-          onPress={(e: any) => {
-            e.stopPropagation?.();
-            onValueChange?.("");
-          }}
-        >
-          <XIcon size={14} />
-        </View>
-      )}
       <View paddingInlineEnd="$2" alignSelf="center">
         <CaretDownIcon size={16} color={glyphColor} />
       </View>
@@ -2523,6 +2517,20 @@ 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
+            size={knobProps.sizeToken}
+            chromeless
+            minWidth={44}
+            minHeight={44}
+            aria-label={t("Clear")}
+            icon={<XIcon size={14} />}
+            onPress={() => onValueChange?.("")}
+          />
+        ) : undefined
+      }
       triggerA11y={{
         label: ariaLabel ?? fieldA11y?.label,
         value: triggerValueText,
@@ -2568,6 +2576,7 @@ export function Combobox({
   onLoadMore,
   hasMore,
   trigger,
+  triggerSizing,
   name,
   form: formProp,
   validators,
@@ -2700,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>