@multiplatform.one/forms 7.66.0 → 7.68.0

package/src/fields/ImageField/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import { edgeColorAt, transitionProps, Text } from "@multiplatform.one/theme";
-import { ImageSquareIcon, XIcon } from "@phosphor-icons/react";
+import { ImageSquareIcon } from "@phosphor-icons/react";
 import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
@@ -22,7 +22,8 @@ import type { DragEvent, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Image, Text as TamaguiText, View, YStack, isWeb, styled } from "tamagui";
-import { Button } from "../../Button";
+import { IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { t } from "../../shared/t";
@@ -422,15 +423,11 @@ function ImageControl({
       </ImageFrame>
 
       {showRemove && hasValue && canInteract && !inTableCell && (
-        <Button
-          chromeless
-          size="$2"
-          icon={XIcon}
+        <IconButton
+          icon={standardActions.remove.icon}
           aria-label={t("Remove image")}
           onPress={() => handleRemove()}
-        >
-          {t("Remove")}
-        </Button>
+        />
       )}
     </YStack>
   );

package/src/fields/Input/Input.formName.spec.tsx

@@ -0,0 +1,53 @@
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Theme } from "tamagui";
+import { Input } from "./index";
+
+function SignIn({ scheme }: { scheme: "light" | "dark" }) {
+  return (
+    <Theme name={scheme}>
+      <form id="sign-in" action="/login" method="post">
+        <Input id="username" name="username" label="Username" labelHidden />
+        <Input id="password" name="password" label="Password" labelHidden secureTextEntry />
+        <input type="hidden" name="credentialId" value="" />
+      </form>
+    </Theme>
+  );
+}
+
+const field = (container: HTMLElement, id: string) =>
+  container.querySelector<HTMLInputElement>(`input#${id}`)!;
+
+describe("Input posts under its name in a native form (FZ-8159)", () => {
+  it("keeps name through typing and a scheme change, so FormData carries both fields", async () => {
+    const user = userEvent.setup();
+    const view = renderWithProviders(<SignIn scheme="light" />);
+    const username = field(view.container, "username");
+    const password = field(view.container, "password");
+
+    await user.type(username, "ash");
+    await user.type(password, "pikachu");
+    expect(username.getAttribute("name")).toBe("username");
+    expect(password.getAttribute("name")).toBe("password");
+
+    view.rerender(<SignIn scheme="dark" />);
+    await user.type(field(view.container, "username"), "!");
+
+    const form = view.container.querySelector<HTMLFormElement>("form#sign-in")!;
+    const posted = new FormData(form);
+    expect(posted.get("username")).toBe("ash!");
+    expect(posted.get("password")).toBe("pikachu");
+    expect(posted.get("credentialId")).toBe("");
+  });
+
+  it("a read-only field still posts under its name", () => {
+    const view = renderWithProviders(
+      <form>
+        <Input id="realm" name="realm" label="Realm" readOnly value="pokemon" />
+      </form>,
+    );
+    const posted = new FormData(view.container.querySelector("form")!);
+    expect(posted.get("realm")).toBe("pokemon");
+  });
+});

package/src/fields/Input/Input.stories.tsx

@@ -5,11 +5,11 @@ import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Input as TamaguiInput, XStack, YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { SearchInput } from "../SearchInput";
 import { Input } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Input> = {
   title: "Forms/Input",
@@ -64,7 +64,7 @@ export const Main: Story = {
                 },
               }}
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Input/index.tsx

@@ -11,7 +11,7 @@ import type {
   SizeTokens,
   TamaguiElement,
 } from "tamagui";
-import { Text } from "tamagui";
+import { Text, isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { resolveFieldInputProps } from "../../fieldDefaults";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -241,6 +241,9 @@ export function Input({
 
   const areaName =
     visibleLabel || !resolvedAriaLabel ? undefined : { "aria-label": resolvedAriaLabel };
+  // A native <form> posts the field under its name, and React DOM drops a
+  // `name` it doesn't own on every update, so the Area carries it as a prop.
+  const domName = isWeb && name ? { name } : undefined;
 
   const handleCopy = useCallback(
     async (text: string) => {
@@ -332,6 +335,7 @@ export function Input({
               value={inputValue ?? ""}
               readOnly
               id={id}
+              {...domName}
               aria-readonly="true"
               aria-required={required || undefined}
               aria-invalid={hasError || undefined}
@@ -364,6 +368,7 @@ export function Input({
             {...(placeholder !== undefined ? { placeholder } : undefined)}
             disabled={disabled}
             id={id}
+            {...domName}
             {...(handleChange || value !== undefined
               ? { value: inputValue ?? "" }
               : { defaultValue: inputValue })}

package/src/fields/MentionInput/MentionInput.stories.tsx

@@ -8,6 +8,7 @@ import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { MentionInput } from "./index";
 import type { MentionConfig } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof MentionInput> = {
   title: "Forms/MentionInput",
@@ -120,7 +121,7 @@ export const Main: Story = {
               helperText="Write a message to your team"
               placeholder="Type @ to mention someone"
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Progress/Progress.stories.tsx

@@ -8,6 +8,7 @@ import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Progress } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Progress> = {
   title: "Forms/Progress",
@@ -59,7 +60,7 @@ export const Main: Story = {
               name="completion"
               helperText="Read from form state"
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -12,6 +12,7 @@ import { Form } from "../../Form";
 import { Checkbox } from "../Checkbox";
 import { Switch } from "../Switch";
 import { RadioGroup } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof RadioGroup> = {
   title: "Forms/RadioGroup",
@@ -395,7 +396,7 @@ export const RowPressInSheet: Story = {
       return (
         <YStack gap="$3">
           <Text>{summary}</Text>
-          <Button onPress={() => setOpen(true)}>Filter</Button>
+          <ActionButton kind="filter" onPress={() => setOpen(true)} />
           <AdaptivePopup open={open} onOpenChange={setOpen} title="Filter">
             <YStack gap="$4">
               <RadioGroup

package/src/fields/Select/InlineChoices.tsx

@@ -55,6 +55,7 @@ export function InlineChoices({
   const textColor = knobProps.textAccentColor;
   const selectedIndex = options.findIndex((option) => option.value === value);
   const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  const glyphed = options.some((option) => option.icon != null);
 
   const choose = (index: number) => {
     const option = options[index];
@@ -85,9 +86,11 @@ export function InlineChoices({
       borderColor={formCommonColors.divider}
       pointerEvents="none"
     >
-      <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
-        <IconSlot icon={option.icon} color={textColor} />
-      </View>
+      {glyphed ? (
+        <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
+          <IconSlot icon={option.icon} color={textColor} />
+        </View>
+      ) : null}
       <Text
         fontFamily={knobProps.body.fontFamily}
         fontWeight={knobProps.body.fontWeight}

package/src/fields/Select/SheetPickerRow.tsx

@@ -0,0 +1,160 @@
+import { keyboardFocusRingProps, useGlyphColor } from "@multiplatform.one/theme";
+import { CaretRightIcon } from "@phosphor-icons/react";
+import { useId, useLayoutEffect, useEffect } from "react";
+import { Pressable } from "react-native";
+import { isWeb, Text, View, XStack } from "tamagui";
+import { useFieldDescribedBy } from "../../fieldLayout";
+import { formInputColors } from "../../shared/colorRamps";
+import { useSheetPageOpen, type SheetNavigationStore } from "../../shared/sheetNavigation";
+import { InlineChoices, type InlineChoice } from "./InlineChoices";
+
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export interface SheetPickerRowProps {
+  store: SheetNavigationStore;
+  label: string;
+  options: InlineChoice[];
+  value?: string;
+  placeholder?: string;
+  onValueChange: (value: string) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  id?: string;
+  knobProps: any;
+  markColor: string;
+}
+
+/**
+ * A long choice list inside a sheet (LC-262, FZ-7830 round 3): a Settings row
+ * with the label, the current value and a chevron. Pressing it pushes the
+ * checkmark list onto the sheet's own navigation stack; Back returns with the
+ * value set. Nothing floats over the field.
+ */
+export function SheetPickerRow({
+  store,
+  label,
+  options,
+  value,
+  placeholder,
+  onValueChange,
+  onBlur,
+  disabled,
+  id,
+  knobProps,
+  markColor,
+}: SheetPickerRowProps) {
+  const pageId = `sheet-picker-${useId()}`;
+  const pushed = useSheetPageOpen(store, pageId);
+  const describedBy = useFieldDescribedBy();
+  const current = options.find((option) => option.value === value);
+  const textColor = knobProps.textAccentColor;
+  const chevronInk = useGlyphColor("$textMuted");
+
+  const page = {
+    id: pageId,
+    title: label,
+    content: (
+      <InlineChoices
+        options={options}
+        value={value}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        aria-label={label}
+        knobProps={knobProps}
+        markColor={markColor}
+      />
+    ),
+  };
+
+  useIsoLayoutEffect(() => {
+    if (pushed) store.update(page);
+  });
+  useEffect(() => () => store.remove(pageId), [store, pageId]);
+
+  const open = () => {
+    if (disabled) return;
+    store.push(page);
+  };
+
+  const row = (
+    <XStack
+      alignItems="center"
+      minHeight={knobProps.menuRow.minHeight}
+      paddingHorizontal={knobProps.panelPadding.padding}
+      {...knobProps.gap}
+      pointerEvents="none"
+    >
+      <Text
+        fontFamily={knobProps.body.fontFamily}
+        fontWeight={knobProps.body.fontWeight}
+        color={textColor}
+        numberOfLines={1}
+        flex={1}
+      >
+        {label}
+      </Text>
+      <Text
+        testID="sheet-picker-value"
+        fontFamily={knobProps.body.fontFamily}
+        color="$textMuted"
+        numberOfLines={1}
+        flexShrink={1}
+      >
+        {current?.label ?? placeholder}
+      </Text>
+      <CaretRightIcon size={14} weight="bold" color={chevronInk} />
+    </XStack>
+  );
+
+  const surface = {
+    ...knobProps.borderRadius,
+    borderColor: formInputColors.border.base,
+    backgroundColor: formInputColors.background.base,
+    overflow: "hidden" as const,
+    width: "100%" as const,
+    opacity: disabled ? 0.5 : 1,
+  };
+
+  if (isWeb) {
+    return (
+      <View
+        id={id}
+        role="button"
+        aria-label={label}
+        aria-describedby={describedBy}
+        aria-disabled={disabled || undefined}
+        data-testid="sheet-picker-row"
+        tabIndex={disabled ? -1 : 0}
+        cursor={disabled ? "default" : "pointer"}
+        onPress={open}
+        onKeyDown={(event: any) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            open();
+          }
+        }}
+        onBlur={onBlur}
+        outlineWidth={0}
+        focusVisibleStyle={keyboardFocusRingProps}
+        {...surface}
+      >
+        {row}
+      </View>
+    );
+  }
+  return (
+    <View {...surface}>
+      <Pressable
+        testID="sheet-picker-row"
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityValue={{ text: current?.label ?? placeholder ?? "" }}
+        accessibilityState={{ disabled: !!disabled }}
+        disabled={disabled}
+        onPress={open}
+      >
+        {row}
+      </Pressable>
+    </View>
+  );
+}

package/src/fields/Select/index.tsx

@@ -66,6 +66,7 @@ import {
 } from "../../FloatingPanel";
 import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal";
+import { fixedContainingBlockOrigin } from "../../FloatingPanel/containingBlock";
 import { useInsideOverlay, useOverlayZIndex } from "../../shared/overlayStack";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
@@ -73,7 +74,9 @@ import { t } from "../../shared/t";
 import { orderOptionsBySelected, type SelectedOrder } from "../selectedOrder";
 import { shouldUseIosNativeSelect } from "../nativeSelect";
 import { InlineChoices } from "./InlineChoices";
-import { shouldInlineChoices } from "./shouldInlineChoices";
+import { SheetPickerRow } from "./SheetPickerRow";
+import { opensBesideTrigger, shouldInlineChoices, shouldPushChoices } from "./shouldInlineChoices";
+import { useSheetNavigation } from "../../shared/sheetNavigation";
 
 /** Undefined on web (RNW ships no ActionSheetIOS); real on iOS. */
 const actionSheetIOS = (ReactNative as { ActionSheetIOS?: typeof ReactNative.ActionSheetIOS })
@@ -540,6 +543,7 @@ function FloatingSelectCore({
   const { style: elevatedSurfaceStyle, ...elevatedSurfaceProps } = knobProps.elevatedSurface;
   const hydrationTouch = useTouchSurface();
   const inTableCell = useIsInTableCell();
+  const beside = useInsideOverlay() && !inTableCell && opensBesideTrigger(options.length);
   const describedBy = useFieldDescribedBy();
   const glyphColor = useGlyphColor();
   const [open, setOpen] = useState(false);
@@ -672,8 +676,31 @@ function FloatingSelectCore({
     const selectedItemIndex = selectedIndex >= 0 ? selectedIndex : 0;
     const selectedItem = listItemsRef.current[selectedItemIndex];
     const trigger = panel.triggerRef.current;
-    if (!dropdownElement || !selectedItem || !trigger) return;
+    if (!dropdownElement || !trigger) return;
+
+    if (beside) {
+      const isInitial = panel.initializingRef.current;
+      if (isInitial) dropdownElement.style.transition = "none";
+      const bounds = trigger.getBoundingClientRect();
+      const contentHeight = dropdownElement.scrollHeight;
+      const below = window.innerHeight - panelViewportPadding - bounds.bottom;
+      const above = bounds.top - panelViewportPadding;
+      const opensUp = contentHeight > below && above > below;
+      const maxHeight = Math.min(contentHeight || Infinity, opensUp ? above : below);
+      const top =
+        (opensUp ? bounds.top - maxHeight : bounds.bottom) -
+        fixedContainingBlockOrigin(dropdownElement).top;
+      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.maxHeight = `${maxHeight}px`;
+      dropdownElement.style.height = "";
+      overlayStyle.current = { top, maxHeight };
+      panel.initializingRef.current = false;
+      void dropdownElement.offsetHeight;
+      if (isInitial) dropdownElement.style.transition = panel.panelTransition;
+      return;
+    }
 
+    if (!selectedItem) return;
     const isInitial = panel.initializingRef.current;
     if (isInitial) dropdownElement.style.transition = "none";
 
@@ -813,6 +840,7 @@ function FloatingSelectCore({
     panel.placement,
     panel.panelTransition,
     options.length,
+    beside,
   ]);
 
   repositionRef.current = repositionOverlay;
@@ -1574,6 +1602,9 @@ function NativeSelectCore({
       // A short list opens as a menu over its trigger; a long one keeps its
       // sheet at page level and opens as a menu inside another overlay (FZ-7830).
       compactFace={compactFace}
+      {...(asMenu && insideOverlay && opensBesideTrigger(options.length)
+        ? { anchorMode: "attach" as const, triggerEcho: false }
+        : null)}
       triggerA11y={{
         label: ariaLabel ?? fieldA11y?.label,
         value: triggerValueText,
@@ -1762,6 +1793,13 @@ export function Select({
   const shouldUseSheet = !isWeb || (!effectiveGtSm && !compactMenu);
   const inTableCell = useIsInTableCell();
   const inline = !inTableCell && shouldInlineChoices({ insideOverlay, multiple, options });
+  const sheetNavigation = useSheetNavigation();
+  const rowLabel = typeof label === "string" ? label : ariaLabel;
+  const pushed =
+    !inline &&
+    !inTableCell &&
+    Boolean(rowLabel) &&
+    shouldPushChoices({ inSheet: Boolean(sheetNavigation), multiple, options });
   // DG-CTRL-01 / DG-CTRL-05 — short single-select lists prefer RadioGroup,
   // which the inline face already is.
   if (!inline) {
@@ -1837,6 +1875,27 @@ export function Select({
     handleBlur?: (...args: any[]) => void,
   ) => {
     if (readOnly) return renderReadOnly(selectValue);
+    if (pushed && sheetNavigation) {
+      return (
+        <SheetPickerRow
+          store={sheetNavigation}
+          label={rowLabel as string}
+          options={options}
+          value={typeof selectValue === "string" ? selectValue : undefined}
+          placeholder={placeholder}
+          onValueChange={(val) => {
+            if (disabled) return;
+            handleValueChange?.(val);
+            emitValueChange(val);
+          }}
+          onBlur={handleBlur}
+          disabled={disabled}
+          id={id}
+          knobProps={knobProps}
+          markColor={markColor}
+        />
+      );
+    }
     if (inline) {
       return (
         <InlineChoices
@@ -1887,7 +1946,8 @@ export function Select({
     return (
       <FieldLayout
         id={id}
-        label={label}
+        label={pushed ? undefined : label}
+        aria-label={pushed ? rowLabel : undefined}
         labelProps={labelProps}
         error={error}
         helperText={helperText}
@@ -1922,7 +1982,8 @@ export function Select({
         return (
           <FieldLayout
             id={id}
-            label={label}
+            label={pushed ? undefined : label}
+            aria-label={pushed ? rowLabel : undefined}
             labelProps={labelProps}
             error={resolvedError}
             helperText={helperText}

package/src/fields/Select/shouldInlineChoices.spec.ts

@@ -1,5 +1,10 @@
 import { describe, expect, it } from "vitest";
-import { INLINE_CHOICES_MAX, shouldInlineChoices } from "./shouldInlineChoices";
+import {
+  INLINE_CHOICES_MAX,
+  opensBesideTrigger,
+  shouldInlineChoices,
+  shouldPushChoices,
+} from "./shouldInlineChoices";
 
 const glyph = "•";
 const withIcons = (n: number) => Array.from({ length: n }, () => ({ icon: glyph }));
@@ -23,3 +28,18 @@ describe("shouldInlineChoices (LC-262, FZ-7830)", () => {
     expect(shouldInlineChoices({ insideOverlay: true, options: [] })).toBe(false);
   });
 });
+
+describe("shouldPushChoices and opensBesideTrigger (LC-262, FZ-7830 round 3)", () => {
+  it("pushes a single-choice list past five options inside a sheet", () => {
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(6) })).toBe(true);
+    expect(shouldPushChoices({ inSheet: true, options: withIcons(5) })).toBe(false);
+    expect(shouldPushChoices({ inSheet: false, options: withIcons(8) })).toBe(false);
+    expect(shouldPushChoices({ inSheet: true, multiple: true, options: withIcons(8) })).toBe(false);
+  });
+
+  it("opens a list of five or fewer beside its field", () => {
+    expect(opensBesideTrigger(5)).toBe(true);
+    expect(opensBesideTrigger(6)).toBe(false);
+    expect(opensBesideTrigger(0)).toBe(false);
+  });
+});

package/src/fields/Select/shouldInlineChoices.ts

@@ -20,3 +20,29 @@ export function shouldInlineChoices({
   if (!insideOverlay || multiple || !options?.length) return false;
   return options.length <= INLINE_CHOICES_MAX && options.every((option) => option.icon != null);
 }
+
+/**
+ * A single-choice Select inside a sheet with more options than the inline
+ * list holds pushes its checkmark list onto the sheet's navigation stack from
+ * a Settings row (LC-262, FZ-7830 round 3), instead of a menu over the field.
+ */
+export function shouldPushChoices({
+  inSheet,
+  multiple,
+  options,
+}: {
+  inSheet: boolean;
+  multiple?: boolean;
+  options: ReadonlyArray<unknown> | undefined;
+}): boolean {
+  if (!inSheet || multiple || !options?.length) return false;
+  return options.length > INLINE_CHOICES_MAX;
+}
+
+/**
+ * A short list inside a sheet that is not laid out inline opens as a menu
+ * beside its field, under it or above it, never over it (LC-262).
+ */
+export function opensBesideTrigger(optionCount: number): boolean {
+  return optionCount > 0 && optionCount <= INLINE_CHOICES_MAX;
+}

package/src/fields/Signature/Signature.stories.tsx

@@ -5,10 +5,10 @@ import { EraserIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Signature } from "./index";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Signature> = {
   title: "Forms/Signature",
@@ -61,7 +61,7 @@ export const Main: Story = {
               required
               clearIcon={<EraserIcon size={16} />}
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );