@multiplatform.one/forms 7.6.2 → 7.7.0

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

@@ -0,0 +1,116 @@
+/**
+ * CheckboxFieldFrame — LC-71's unpainted hit target (MPO-143).
+ *
+ * This is the `role=checkbox` node the user actually presses. The whole point
+ * of it is that it paints NOTHING: the visible box is CheckboxGlyphBox, and if
+ * this frame ever grew a background, a border or a focus ring, the wash would
+ * wrap the label+box group instead of sitting on the 20px box. Tamagui's own
+ * size variant sets borderRadius = size/8 on a Checkbox frame, so "we override
+ * it to 0" is a live claim about a default that fights back, not boilerplate.
+ */
+import { cleanup } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import { CheckboxFieldFrame } from "./CheckboxFieldFrame";
+
+afterEach(cleanup);
+
+const TRANSPARENT = new Set(["transparent", "rgba(0, 0, 0, 0)", "rgba(0,0,0,0)"]);
+
+/** Tamagui paints through atomic classes; read the inline channel first. */
+function cssOf(node: HTMLElement, prop: string): string {
+  const inline = node.style.getPropertyValue(prop);
+  if (inline) return inline;
+  return getComputedStyle(node).getPropertyValue(prop) || "";
+}
+
+function frame(container: HTMLElement): HTMLElement {
+  const node = container.querySelector("[role='checkbox']");
+  if (!node) throw new Error("CheckboxFieldFrame did not render a role=checkbox node");
+  return node as HTMLElement;
+}
+
+describe("CheckboxFieldFrame", () => {
+  it("still renders a real role=checkbox, so the styling never costs the semantics", () => {
+    const { container } = renderWithProviders(<CheckboxFieldFrame checked={false} />);
+    expect(frame(container)).toBeTruthy();
+  });
+
+  it("reports its checked state to assistive tech", () => {
+    const off = renderWithProviders(<CheckboxFieldFrame checked={false} />);
+    expect(frame(off.container).getAttribute("aria-checked")).toBe("false");
+    cleanup();
+    const on = renderWithProviders(<CheckboxFieldFrame checked />);
+    expect(frame(on.container).getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("paints no fill and no border in the idle state", () => {
+    const { container } = renderWithProviders(<CheckboxFieldFrame checked={false} />);
+    const node = frame(container);
+    expect(TRANSPARENT.has(cssOf(node, "background-color"))).toBe(true);
+    expect(cssOf(node, "border-top-width") || "0px").toBe("0px");
+  });
+
+  it("overrides Tamagui's size-driven radius back to zero, so the target is never a disc", () => {
+    const { container } = renderWithProviders(<CheckboxFieldFrame checked={false} size="$6" />);
+    expect(cssOf(frame(container), "border-top-left-radius") || "0px").toBe("0px");
+  });
+
+  it("keeps the radius at zero across the size ladder, not only at the default", () => {
+    for (const size of ["$2", "$4", "$6"] as const) {
+      const { container } = renderWithProviders(<CheckboxFieldFrame checked={false} size={size} />);
+      expect(cssOf(frame(container), "border-top-left-radius") || "0px", String(size)).toBe("0px");
+      cleanup();
+    }
+  });
+
+  it("carries no outline of its own, so the ring is the glyph box's job", () => {
+    const { container } = renderWithProviders(<CheckboxFieldFrame checked={false} />);
+    const outline = cssOf(frame(container), "outline-width");
+    expect(outline === "" || outline === "0px").toBe(true);
+  });
+
+  it("declares transparent hover, press, focus and active styles", () => {
+    // Asserted on the styled definition rather than by simulating five states:
+    // these are the exact overrides that keep a wash off the group, and a
+    // regression would be someone deleting one of them.
+    const config = (
+      CheckboxFieldFrame as unknown as { staticConfig?: { defaultProps?: Record<string, any> } }
+    ).staticConfig;
+    const defaults = config?.defaultProps ?? {};
+    for (const state of [
+      "hoverStyle",
+      "pressStyle",
+      "focusStyle",
+      "focusVisibleStyle",
+      "activeStyle",
+    ]) {
+      const bag = defaults[state];
+      expect(bag, `${state} must be declared on the frame`).toBeTruthy();
+      expect(TRANSPARENT.has(String(bag.backgroundColor)), state).toBe(true);
+      expect(TRANSPARENT.has(String(bag.borderColor)), state).toBe(true);
+    }
+    expect(defaults.focusStyle.outlineWidth).toBe(0);
+    expect(defaults.focusVisibleStyle.outlineWidth).toBe(0);
+    expect(defaults.borderWidth).toBe(0);
+    expect(defaults.borderRadius).toBe(0);
+  });
+
+  it("lets a caller still size the target, because the frame is the hit area", () => {
+    const { container } = renderWithProviders(
+      <CheckboxFieldFrame checked={false} width={44} height={44} />,
+    );
+    const node = frame(container);
+    expect(cssOf(node, "width")).toBe("44px");
+    expect(cssOf(node, "height")).toBe("44px");
+  });
+
+  it("renders the glyph it is given inside the target", () => {
+    const { container } = renderWithProviders(
+      <CheckboxFieldFrame checked>
+        <span data-inner-glyph />
+      </CheckboxFieldFrame>,
+    );
+    expect(frame(container).querySelector("[data-inner-glyph]")).toBeTruthy();
+  });
+});

package/src/fields/Checkbox/CheckboxGroup.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Preset } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
 import { Paragraph, YStack } from "tamagui";
 import { Button } from "../../Button";
@@ -218,6 +219,20 @@ export const HorizontalWrap: Story = {
   ),
 };
 
+/**
+ * E-FLAT proof: elevation large must not wrap group glyphs. Standalone
+ * Checkbox still wraps (MPO-96 unruled; this story is the group carve-out).
+ */
+export const ElevationLarge: Story = {
+  render: (args) => (
+    <Preset overrides={{ elevation: "large" }}>
+      <YStack maxWidth={400}>
+        <CheckboxGroup {...args} onValueChange={action("onValueChange")} />
+      </YStack>
+    </Preset>
+  ),
+};
+
 export const RequiredForm: Story = {
   render: () => {
     const Example = () => {

package/src/fields/Checkbox/CheckboxGroup.tsx

@@ -18,6 +18,7 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import { Checkbox, getCheckboxInlineGap } from "./Checkbox";
+import { CheckboxGroupFlatContext } from "./checkboxGroupContext";
 import { CHECKBOX_TARGET_PX, clampCheckboxGlyphRadius, getCheckboxGlyphSize } from "./CheckboxBox";
 import {
   CheckboxCardContent,
@@ -134,29 +135,31 @@ export function CheckboxGroup({
     const glyphSize = getCheckboxGlyphSize((size || knobProps.sizeToken) as SizeTokens);
     const labelWidths = [88, 64, 76];
     return (
-      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <Container gap="$2">
-          {Array.from({ length: optionCount }, (_, i) => (
-            <XStack key={i} gap={inlineGap} alignItems="center">
-              {/* Mirror the 44px pressable target box around the glyph */}
-              <View
-                width={CHECKBOX_TARGET_PX}
-                height={CHECKBOX_TARGET_PX}
-                alignItems="center"
-                justifyContent="center"
-              >
-                <Skeleton
-                  variant="rounded"
-                  width={glyphSize}
-                  height={glyphSize}
-                  borderRadius={controlRadius}
-                />
-              </View>
-              <Skeleton variant="text" width={labelWidths[i % labelWidths.length]} height={14} />
-            </XStack>
-          ))}
-        </Container>
-      </FieldLayout>
+      <CheckboxGroupFlatContext.Provider value={true}>
+        <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+          <Container gap="$2">
+            {Array.from({ length: optionCount }, (_, i) => (
+              <XStack key={i} gap={inlineGap} alignItems="center">
+                {/* Mirror the 44px pressable target box around the glyph */}
+                <View
+                  width={CHECKBOX_TARGET_PX}
+                  height={CHECKBOX_TARGET_PX}
+                  alignItems="center"
+                  justifyContent="center"
+                >
+                  <Skeleton
+                    variant="rounded"
+                    width={glyphSize}
+                    height={glyphSize}
+                    borderRadius={controlRadius}
+                  />
+                </View>
+                <Skeleton variant="text" width={labelWidths[i % labelWidths.length]} height={14} />
+              </XStack>
+            ))}
+          </Container>
+        </FieldLayout>
+      </CheckboxGroupFlatContext.Provider>
     );
   }
 
@@ -284,57 +287,61 @@ export function CheckboxGroup({
   if (!resolvedForm || !name) {
     const currentValues = value ?? internalValues;
     return (
-      <FieldLayout
-        id={id}
-        label={label}
-        labelProps={labelProps}
-        error={error}
-        required={required}
-        helperText={helperText}
-        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}
-      >
-        {renderItems(currentValues, setInternalValues)}
-      </FieldLayout>
+      <CheckboxGroupFlatContext.Provider value={true}>
+        <FieldLayout
+          id={id}
+          label={label}
+          labelProps={labelProps}
+          error={error}
+          required={required}
+          helperText={helperText}
+          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}
+        >
+          {renderItems(currentValues, setInternalValues)}
+        </FieldLayout>
+      </CheckboxGroupFlatContext.Provider>
     );
   }
 
   return (
-    <Field
-      form={resolvedForm}
-      name={name}
-      defaultValue={defaultValue ?? []}
-      validators={resolvedValidators}
-    >
-      {(field) => {
-        const resolvedError = getFieldError(field, error);
-        const fieldValues = (field.state.value as string[]) ?? [];
-        const currentValues = value !== undefined ? value : fieldValues;
+    <CheckboxGroupFlatContext.Provider value={true}>
+      <Field
+        form={resolvedForm}
+        name={name}
+        defaultValue={defaultValue ?? []}
+        validators={resolvedValidators}
+      >
+        {(field) => {
+          const resolvedError = getFieldError(field, error);
+          const fieldValues = (field.state.value as string[]) ?? [];
+          const currentValues = value !== undefined ? value : fieldValues;
 
-        return (
-          <FieldLayout
-            id={id}
-            label={label}
-            labelProps={labelProps}
-            error={resolvedError}
-            required={required}
-            helperText={helperText}
-            size={size}
-            knobProps={knobProps}
-            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
-            // LC-40: see standalone branch — FieldLayout carries dimWhole.
-            disabled={disabled}
-          >
-            {renderItems(currentValues, (newValues) => {
-              field.handleChange(newValues as any);
-            })}
-          </FieldLayout>
-        );
-      }}
-    </Field>
+          return (
+            <FieldLayout
+              id={id}
+              label={label}
+              labelProps={labelProps}
+              error={resolvedError}
+              required={required}
+              helperText={helperText}
+              size={size}
+              knobProps={knobProps}
+              onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+              // LC-40: see standalone branch — FieldLayout carries dimWhole.
+              disabled={disabled}
+            >
+              {renderItems(currentValues, (newValues) => {
+                field.handleChange(newValues as any);
+              })}
+            </FieldLayout>
+          );
+        }}
+      </Field>
+    </CheckboxGroupFlatContext.Provider>
   );
 }

package/src/fields/Checkbox/checkboxGroupContext.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+
+/**
+ * Written law: CheckboxGroup is E-FLAT, so item Checkboxes must not wrap
+ * the glyph in getElevationWrapperProps chrome. Local only — does not
+ * change defaultKnobs, elevationMap, or the shared helper (MPO-96).
+ */
+export const CheckboxGroupFlatContext = createContext(false);
+
+export function useCheckboxGroupSkipsElevation(): boolean {
+  return useContext(CheckboxGroupFlatContext);
+}

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

@@ -5,11 +5,12 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Calendar } from "./Calendar";
 import { CalendarDays, isSameDay, useCalendarData } from "./parts";
 
-vi.mock("@tamagui/lucide-icons-2", () => ({
-  ChevronLeft: () => null,
-  ChevronRight: () => null,
-  Calendar: () => null,
-  X: () => null,
+vi.mock("@phosphor-icons/react", () => ({
+  CalendarBlankIcon: () => null,
+  CaretLeftIcon: () => null,
+  CaretRightIcon: () => null,
+  ClockIcon: () => null,
+  XIcon: () => null,
 }));
 
 function getEnabledDayButtons(root: ParentNode): HTMLButtonElement[] {

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

@@ -41,6 +41,11 @@ const meta: Meta<typeof DatePicker> = {
     format: { control: "text", description: "Date format string" },
     minDate: { control: "date", description: "Minimum selectable date" },
     maxDate: { control: "date", description: "Maximum selectable date" },
+    native: {
+      control: "boolean",
+      description:
+        "On device, omit (default) for the OS calendar. Set false to keep the catalog calendar.",
+    },
   },
 };
 
@@ -281,3 +286,11 @@ export const InTable: Story = {
     );
   },
 };
+
+export const NativeOsPicker: Story = {
+  name: "Native OS picker",
+  args: {
+    label: "Birth Date",
+    helperText: "Device default: iOS calendar / Android dialog. native={false} keeps the catalog.",
+  },
+};