@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/fields/DatePicker/DatetimePicker.tsx

@@ -3,13 +3,12 @@ import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { coerceToDate } from "./utils";
 import { DatePickerFieldValueSync } from "./fieldValueSync";
-import { Text, View, useProps, type Popover } from "tamagui";
+import { Text, View, useProps, isWeb } from "tamagui";
 
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
-import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
-import { TimeColumn, TimeColumnSeparator, generateRange } from "../../shared/TimeColumn";
+import { TimeWheels } from "../../shared/TimeColumn";
 import {
   getFieldError,
   mergeFieldHandler,
@@ -26,6 +25,7 @@ import {
   CalendarHeader,
   CalendarPanelFrame,
   CalendarViewSwitcher,
+  DatePickerClearButton,
   DatePickerInputTrigger,
   isSameDay,
   useCalendarData,
@@ -112,10 +112,6 @@ function formatDatetimeDisplay(
   });
 }
 
-const hours24 = generateRange(0, 23);
-const hours12 = generateRange(1, 12);
-const secondValues = generateRange(0, 59);
-
 // ---------------------------------------------------------------------------
 // DayGrid — animated day cells
 // ---------------------------------------------------------------------------
@@ -160,140 +156,27 @@ function TimeSection({
   minuteStep,
   showSeconds,
 }: TimeSectionProps) {
-  const { knobProps } = useCalendarKnobs();
   const { h, m, s } = parseTimeFromDate(selectedDate);
-  const minuteValues = useMemo(() => generateRange(0, 59, minuteStep), [minuteStep]);
 
-  const makeNewDate = useCallback(
-    (newH: number, newM: number, newS: number) => {
-      const newDate = new Date(selectedDate);
-      newDate.setHours(newH, newM, newS);
-      return newDate;
+  const handleChange = useCallback(
+    (hour24: number, minute: number, second: number) => {
+      const next = new Date(selectedDate);
+      next.setHours(hour24, minute, second);
+      onTimeChange(next);
     },
-    [selectedDate],
-  );
-
-  const secondsColumn = showSeconds && (
-    <>
-      <TimeColumnSeparator knobProps={knobProps} />
-      <TimeColumn
-        label={t("Sec")}
-        values={secondValues}
-        selected={s}
-        onChange={(newS) => onTimeChange(makeNewDate(h, m, newS))}
-        knobProps={knobProps}
-      />
-    </>
+    [onTimeChange, selectedDate],
   );
 
-  if (timeFormat === "24h") {
-    return (
-      <View flexDirection="row" gap="$2" alignItems="flex-start" justifyContent="center">
-        <TimeColumn
-          label={t("Hour")}
-          values={hours24}
-          selected={h}
-          onChange={(newH) => onTimeChange(makeNewDate(newH, m, s))}
-          knobProps={knobProps}
-        />
-        <TimeColumnSeparator knobProps={knobProps} />
-        <TimeColumn
-          label={t("Min")}
-          values={minuteValues}
-          selected={m}
-          onChange={(newM) => onTimeChange(makeNewDate(h, newM, s))}
-          knobProps={knobProps}
-        />
-        {secondsColumn}
-      </View>
-    );
-  }
-
-  // 12-hour format
-  const period: "AM" | "PM" = h >= 12 ? "PM" : "AM";
-  const display12H = h === 0 ? 12 : h > 12 ? h - 12 : h;
-
-  const handleHourChange = (newDisplayH: number) => {
-    let h24 = newDisplayH;
-    if (period === "AM") {
-      h24 = newDisplayH === 12 ? 0 : newDisplayH;
-    } else {
-      h24 = newDisplayH === 12 ? 12 : newDisplayH + 12;
-    }
-    onTimeChange(makeNewDate(h24, m, s));
-  };
-
-  const handlePeriodChange = (newPeriod: "AM" | "PM") => {
-    if (newPeriod === period) return;
-    const newH = newPeriod === "AM" ? (h >= 12 ? h - 12 : h) : h < 12 ? h + 12 : h;
-    onTimeChange(makeNewDate(newH, m, s));
-  };
-
   return (
-    <View flexDirection="row" gap="$2" alignItems="flex-start" justifyContent="center">
-      <TimeColumn
-        label={t("Hour")}
-        values={hours12}
-        selected={display12H}
-        onChange={handleHourChange}
-        knobProps={knobProps}
-      />
-      <TimeColumnSeparator knobProps={knobProps} />
-      <TimeColumn
-        label={t("Min")}
-        values={minuteValues}
-        selected={m}
-        onChange={(newM) => onTimeChange(makeNewDate(h, newM, s))}
-        knobProps={knobProps}
-      />
-      {secondsColumn}
-      {/* AM/PM selector */}
-      <View alignItems="center" gap="$1">
-        <Text
-          fontSize="$1"
-          {...knobProps.body}
-          color={formCommonColors.muted}
-          textTransform="uppercase"
-          letterSpacing={1}
-        >
-          {" "}
-        </Text>
-        <View
-          {...knobProps.borderRadius}
-          backgroundColor={formInputColors.background.base}
-          borderWidth={knobProps.inputSurface.borderWidth}
-          borderColor={formInputColors.border.base}
-          overflow="hidden"
-        >
-          {(["AM", "PM"] as const).map((p) => {
-            const isSelected = p === period;
-            return (
-              <View
-                key={p}
-                height={36}
-                width={48}
-                alignItems="center"
-                justifyContent="center"
-                cursor="pointer"
-                backgroundColor={isSelected ? formInputColors.background.focus : "transparent"}
-                hoverStyle={{ backgroundColor: formInputColors.background.focus }}
-                onPress={() => handlePeriodChange(p)}
-                {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
-              >
-                <Text
-                  fontSize="$3"
-                  {...knobProps.body}
-                  fontWeight={isSelected ? "700" : "400"}
-                  color={isSelected ? formCommonColors.text : formCommonColors.muted}
-                >
-                  {p}
-                </Text>
-              </View>
-            );
-          })}
-        </View>
-      </View>
-    </View>
+    <TimeWheels
+      hour24={h}
+      minute={m}
+      second={s}
+      timeFormat={timeFormat}
+      minuteStep={minuteStep}
+      showSeconds={showSeconds}
+      onChange={handleChange}
+    />
   );
 }
 
@@ -361,7 +244,14 @@ function DatetimePickerBody({
   );
 
   return (
-    <View flexDirection="column" alignItems="center" {...knobProps.gap} width={px * 7} alignSelf="center">
+    <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%">
         {(["date", "time"] as const).map((tab) => {
           const active = activeTab === tab;
@@ -382,7 +272,11 @@ function DatetimePickerBody({
               }}
               data-nested-px={px}
             >
-              <Text {...knobProps.label} {...knobProps.textWeight} fontWeight={active ? "600" : "400"}>
+              <Text
+                {...knobProps.label}
+                {...knobProps.textWeight}
+                fontWeight={active ? "600" : "400"}
+              >
                 {tab === "date" ? t("Date") : t("Time")}
               </Text>
             </View>
@@ -423,7 +317,7 @@ function DatetimePickerBody({
         </CalendarViewSwitcher>
       ) : (
         selectedDatetime && (
-          <View padding="$2" width="100%">
+          <View width="100%">
             <TimeSection
               selectedDate={selectedDatetime}
               onTimeChange={handleTimeChange}
@@ -455,7 +349,7 @@ export function DatetimePicker<
     onChange,
     onValueChange,
     form,
-    inputProps,
+    inputProps: _inputProps,
     placeholder = t("Select date and time"),
     minDate,
     maxDate,
@@ -497,7 +391,6 @@ export function DatetimePicker<
   const { displayDate, setDisplayDate, navigateMonth } = useDateNavigation(
     selectedDatetime ?? undefined,
   );
-  const popoverRef = useRef<Popover>(null);
   const selectedDatetimeRef = useRef(selectedDatetime);
   selectedDatetimeRef.current = selectedDatetime;
 
@@ -507,11 +400,6 @@ export function DatetimePicker<
     setOpen(true);
   }, [setDisplayDate]);
 
-  const closePopover = useCallback(() => {
-    setOpen(false);
-    popoverRef.current?.close();
-  }, []);
-
   const handleDatetimeSelect = useCallback(
     (date: Date, fieldChange?: (value: any) => void) => {
       if (minDate && date < minDate) return;
@@ -605,10 +493,17 @@ export function DatetimePicker<
         open={open}
         onOpenChange={handleOpenChange}
         trigger={renderTrigger(displayValue, hasError, fieldChange)}
+        triggerEnd={
+          !isWeb && displayValue ? (
+            <DatePickerClearButton
+              onReset={() => handleClearDatetime(fieldChange)}
+              disabled={disabled}
+            />
+          ) : undefined
+        }
         disabled={disabled}
-        scrollable
         sizing="grow"
-        fitContent
+        widthMode="at-least-trigger"
       >
         {pickerContent(fieldChange)}
       </FloatingPanel>

package/src/fields/DatePicker/MonthPicker.tsx

@@ -173,12 +173,7 @@ function MonthPickerBody({
         {...animation}
         transition="medium"
       >
-        <View
-          flexDirection="row"
-          width={px * 7}
-          alignItems="center"
-          justifyContent="space-between"
-        >
+        <View flexDirection="row" width={px * 7} alignItems="center" justifyContent="space-between">
           <CalendarChromeButton
             onPress={() => {
               if (!prevDisabled) handlePrevYear();
@@ -375,6 +370,8 @@ export function MonthPicker<
             aria-invalid={hasError || undefined}
           />
         }
+        clearValue={formatMonthDisplay(selectedValue)}
+        onClear={() => handleClear(fieldChange)}
       >
         {pickerContent(fieldChange)}
       </DatePickerPopoverShell>

package/src/fields/DatePicker/MultiDatePicker.spec.tsx

@@ -3,6 +3,7 @@ import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
+import { getFieldHeight } from "../../shared/utils";
 
 vi.mock("react-native", () => ({
   Platform: {
@@ -145,4 +146,32 @@ describe("MultiDatePicker", () => {
       expect(onChange).not.toHaveBeenCalled();
     });
   });
+
+  describe("design law", () => {
+    it("renders a skeleton at the control recipe height (LC-20)", async () => {
+      const MultiDatePicker = await loadMultiDatePicker();
+      const result = renderWithProviders(<MultiDatePicker label="Loading" name="l" skeleton />);
+      expect(result.container.querySelector("input")).toBeNull();
+      const skeleton = result.container.querySelector("[data-multidate-skeleton]") as HTMLElement;
+      expect(skeleton).toBeTruthy();
+      expect(skeletonHeight(skeleton)).toBe(getFieldHeight("$4"));
+    });
+
+    it("rings the outer trigger box, never the inner field (LC-71)", async () => {
+      const MultiDatePicker = await loadMultiDatePicker();
+      const result = renderWithProviders(<MultiDatePicker label="Dates" name="dates" />);
+      const input = result.container.querySelector("input");
+      expect(input?.className).toMatch(/mp-input-area/);
+      const box = result.container.querySelector(".mp-composite-ring");
+      expect(box).toBeTruthy();
+      expect(box?.contains(input)).toBe(true);
+    });
+  });
 });
+
+function skeletonHeight(el: HTMLElement): number {
+  const attr = el.getAttribute("height");
+  if (attr && /^\d+(\.\d+)?$/.test(attr)) return Number(attr);
+  if (el.style.height.endsWith("px")) return Number.parseFloat(el.style.height);
+  return Number.parseFloat(getComputedStyle(el).height) || 0;
+}

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

@@ -1,6 +1,8 @@
 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";
 import { Text, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
@@ -121,3 +123,34 @@ export const FormBound: Story = {
     return <FormExample />;
   },
 };
+
+type InTableRow = { id: string; label: string; value: Date[] };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      {
+        id: "1",
+        label: "Alpha",
+        value: [new Date("2024-11-07"), new Date("2024-11-12")],
+      },
+      { id: "2", label: "Beta", value: [new Date("2024-12-25")] },
+      { id: "3", label: "Gamma", value: [] },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "MultiDatePicker",
+        field: "multidatepicker",
+        fieldProps: { limit: 5, placeholder: "Pick multiple dates" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/DatePicker/MultiDatePicker.tsx

@@ -1,12 +1,13 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { formatAbsoluteDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { type Popover, Separator, View, useMedia, useProps } from "tamagui";
+import { type Popover, type SizeTokens, Separator, View, useMedia, useProps } from "tamagui";
 
 import { Field, FieldLayout } from "../../fieldLayout";
 import { t } from "../../shared/t";
 import {
   getFieldError,
+  getFieldHeight,
   mergeFieldHandler,
   useFormField,
   useResolvedValidators,
@@ -80,6 +81,7 @@ interface MultiDayGridProps {
   onToggleDate: (date: Date) => void;
   minDate?: Date;
   maxDate?: Date;
+  selectionCapped?: boolean;
 }
 
 function MultiDayGrid({
@@ -88,12 +90,14 @@ function MultiDayGrid({
   onToggleDate,
   minDate,
   maxDate,
+  selectionCapped,
 }: MultiDayGridProps) {
   return (
     <CalendarDays
       calendarData={calendarData}
       minDate={minDate}
       maxDate={maxDate}
+      selectionCapped={selectionCapped}
       isSelected={(day) => selectedDates.some((d) => isSameDay(d, day))}
       onSelect={onToggleDate}
       onToday={() => onToggleDate(new Date())}
@@ -113,6 +117,7 @@ interface SingleCalendarProps {
   onSetDisplayDate: (date: Date) => void;
   minDate?: Date;
   maxDate?: Date;
+  selectionCapped?: boolean;
   showPrev?: boolean;
   showNext?: boolean;
 }
@@ -125,6 +130,7 @@ function SingleCalendar({
   onSetDisplayDate,
   minDate,
   maxDate,
+  selectionCapped,
   showPrev = true,
   showNext = true,
 }: SingleCalendarProps) {
@@ -164,6 +170,7 @@ function SingleCalendar({
           onToggleDate={onToggleDate}
           minDate={minDate}
           maxDate={maxDate}
+          selectionCapped={selectionCapped}
         />
       </CalendarPanelFrame>
     </CalendarViewSwitcher>
@@ -182,6 +189,7 @@ interface DualCalendarBodyProps {
   navigateMonth: (direction: "prev" | "next") => void;
   minDate?: Date;
   maxDate?: Date;
+  selectionCapped?: boolean;
 }
 
 function DualCalendarBody({
@@ -192,6 +200,7 @@ function DualCalendarBody({
   navigateMonth,
   minDate,
   maxDate,
+  selectionCapped,
 }: DualCalendarBodyProps) {
   const { knobProps } = useResolvedKnobs();
   // v5 `sm` = minWidth 640 (`gtSm` died with the v5 media map, MPO-13 C4):
@@ -231,6 +240,7 @@ function DualCalendarBody({
           onSetDisplayDate={setDisplayDate}
           minDate={minDate}
           maxDate={maxDate}
+          selectionCapped={selectionCapped}
         />
       </View>
     );
@@ -246,6 +256,7 @@ function DualCalendarBody({
         onSetDisplayDate={handleSetDisplayForPrev}
         minDate={minDate}
         maxDate={maxDate}
+        selectionCapped={selectionCapped}
         showNext={false}
       />
       <Separator vertical />
@@ -257,6 +268,7 @@ function DualCalendarBody({
         onSetDisplayDate={setDisplayDate}
         minDate={minDate}
         maxDate={maxDate}
+        selectionCapped={selectionCapped}
         showPrev={false}
       />
     </View>
@@ -323,6 +335,8 @@ export function MultiDatePicker<
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(required, validators, label, name, isEmptyDates);
+  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const visualHeight = getFieldHeight(resolvedSize);
 
   const initialDates = (
     Array.isArray(valueProp) ? valueProp : Array.isArray(defaultValue) ? defaultValue : []
@@ -398,6 +412,7 @@ export function MultiDatePicker<
       navigateMonth={navigateMonth}
       minDate={minDate}
       maxDate={maxDate}
+      selectionCapped={selectedDates.length >= limit}
     />
   );
 
@@ -449,6 +464,8 @@ export function MultiDatePicker<
             aria-invalid={hasError || undefined}
           />
         }
+        clearValue={formatMultiDates(selectedDates)}
+        onClear={() => handleClear(fieldChange)}
       >
         {calendarContent(fieldChange)}
       </DatePickerPopoverShell>
@@ -459,7 +476,14 @@ export function MultiDatePicker<
   if (skeleton) {
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+        <InputParts size={resolvedSize}>
+          <Skeleton
+            variant="rounded"
+            width="100%"
+            height={visualHeight}
+            data-multidate-skeleton=""
+          />
+        </InputParts>
       </FieldLayout>
     );
   }

package/src/fields/DatePicker/index.tsx

@@ -353,6 +353,8 @@ export function DatePicker<
             aria-invalid={hasError || undefined}
           />
         }
+        clearValue={formatDateDisplay(selectedDate)}
+        onClear={() => handleClearDate(fieldChange)}
       >
         {calendarContent(fieldChange)}
       </DatePickerPopoverShell>