@multiplatform.one/forms 7.66.0 → 7.67.0

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/Slider/Slider.system.native.spec.tsx

@@ -0,0 +1,168 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { useForm } from "@tanstack/react-form";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { Slider } from "./index";
+
+const system = vi.hoisted(() => ({
+  os: "ios" as "ios" | "android" | null,
+  installed: true,
+}));
+
+// The system slider as a probe: it shows the props it got and moves through
+// onValueChange, then onSlidingComplete, the way a drag on UISlider does.
+const SystemSliderProbe = vi.hoisted(
+  () =>
+    function SystemSliderProbe(props: Record<string, any>) {
+      return (
+        <input
+          data-testid="system-slider"
+          data-fill={props.minimumTrackTintColor}
+          data-rail={props.maximumTrackTintColor}
+          data-thumb={props.thumbTintColor ?? ""}
+          data-label={props.accessibilityLabel ?? ""}
+          data-min={props.minimumValue}
+          data-max={props.maximumValue}
+          data-step={props.step}
+          disabled={props.disabled}
+          value={props.value}
+          onChange={(event) => {
+            props.onValueChange?.(Number(event.target.value));
+            props.onSlidingComplete?.(Number(event.target.value));
+          }}
+        />
+      );
+    },
+);
+
+vi.mock("../../shared/systemControls", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../shared/systemControls")>()),
+  systemControlPlatform: () => system.os,
+}));
+
+vi.mock("../../shared/systemControlModules", () => ({
+  loadSystemSlider: () => (system.installed ? SystemSliderProbe : null),
+  loadSystemSegmentedControl: () => null,
+}));
+
+const mpoTheme = createDefaultThemeConfig();
+const renderInScheme = (ui: ReactElement, scheme: "light" | "dark") =>
+  render(
+    <TamaguiProvider config={mpoTheme.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+
+afterEach(cleanup);
+beforeEach(() => {
+  system.os = "ios";
+  system.installed = true;
+});
+
+const literal = (value: string | null) => Boolean(value) && !value!.startsWith("$");
+const mpoSlider = (container: HTMLElement) => container.querySelector('[role="slider"]');
+
+function FormSlider({ onSubmit }: { onSubmit: (value: { volume: number }) => void }) {
+  const form = useForm({ defaultValues: { volume: 20 }, onSubmit: ({ value }) => onSubmit(value) });
+  return (
+    <Form form={form}>
+      <Slider name="volume" label="Volume" />
+      <button type="button" onClick={() => form.handleSubmit()}>
+        Save
+      </button>
+    </Form>
+  );
+}
+
+// LC-266 PLATFORM-ERGONOMICS (FZ-8118). With @react-native-community/slider in
+// the binary, iOS and Android render the system slider tinted from the theme.
+// Without it (One's binary today, an OTA on an older build) the MPO slider.
+describe("Slider on iOS and Android", () => {
+  it.each(["light", "dark"] as const)(
+    "renders the system slider with the %s theme's fill and rail as literals",
+    (scheme) => {
+      const result = renderInScheme(
+        <Slider label="Volume" defaultValue={[30]} min={10} max={90} step={5} />,
+        scheme,
+      );
+      const view = result.getByTestId("system-slider") as HTMLInputElement;
+      expect(view.value).toBe("30");
+      expect(view.dataset).toMatchObject({ min: "10", max: "90", step: "5", label: "Volume" });
+      expect(literal(view.getAttribute("data-fill"))).toBe(true);
+      expect(literal(view.getAttribute("data-rail"))).toBe(true);
+      expect(view.getAttribute("data-fill")).not.toBe(view.getAttribute("data-rail"));
+      expect(view.dataset.thumb).toBe("");
+      expect(mpoSlider(result.container)).toBeNull();
+      expect(result.getByText("30")).toBeTruthy();
+    },
+  );
+
+  it("tints the Android thumb with the fill", () => {
+    system.os = "android";
+    const result = renderInScheme(<Slider label="Volume" />, "light");
+    const view = result.getByTestId("system-slider");
+    expect(literal(view.getAttribute("data-thumb"))).toBe(true);
+    expect(view.dataset.thumb).toBe(view.dataset.fill);
+  });
+
+  it("reports a move as a one-value array and updates the readout", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Slider label="Volume" onChange={onChange} />);
+    fireEvent.change(result.getByTestId("system-slider"), { target: { value: "40" } });
+    expect(onChange).toHaveBeenCalledWith([40]);
+    expect(result.getByText("40")).toBeTruthy();
+  });
+
+  it("writes the form field it is bound to", async () => {
+    const onSubmit = vi.fn();
+    const result = renderWithProviders(<FormSlider onSubmit={onSubmit} />);
+    expect((result.getByTestId("system-slider") as HTMLInputElement).value).toBe("20");
+    fireEvent.change(result.getByTestId("system-slider"), { target: { value: "55" } });
+    fireEvent.click(result.getByText("Save"));
+    await vi.waitFor(() => expect(onSubmit).toHaveBeenCalledWith({ volume: 55 }));
+  });
+
+  it("passes disabled through and never reports a disabled or read-only move", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <>
+        <Slider label="Off limits" onChange={onChange} disabled />
+        <Slider label="Look only" onChange={onChange} readOnly />
+      </>,
+    );
+    const [disabledView, readOnlyView] = result.getAllByTestId("system-slider");
+    expect((disabledView as HTMLInputElement).disabled).toBe(true);
+    fireEvent.change(disabledView!, { target: { value: "40" } });
+    fireEvent.change(readOnlyView!, { target: { value: "40" } });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("falls back to the MPO slider when the binary lacks the module", () => {
+    system.installed = false;
+    const result = renderWithProviders(<Slider label="Volume" defaultValue={[30]} />);
+    expect(result.queryByTestId("system-slider")).toBeNull();
+    expect(mpoSlider(result.container)).not.toBeNull();
+  });
+
+  it("keeps the MPO slider for a range, a vertical slider and native={false}", () => {
+    const result = renderWithProviders(
+      <>
+        <Slider label="Range" defaultValue={[10, 60]} />
+        <Slider label="Tall" sliderProps={{ orientation: "vertical" }} />
+        <Slider label="Opted out" native={false} />
+      </>,
+    );
+    expect(result.queryByTestId("system-slider")).toBeNull();
+  });
+
+  it("keeps the MPO slider on web and GNOME", () => {
+    system.os = null;
+    const result = renderWithProviders(<Slider label="Volume" />);
+    expect(result.queryByTestId("system-slider")).toBeNull();
+    expect(mpoSlider(result.container)).not.toBeNull();
+  });
+});