@multiplatform.one/forms 7.70.0 → 7.72.0

package/src/fields/SearchInput/SearchInput.spec.tsx

@@ -33,6 +33,46 @@ describe("SearchInput", () => {
     expect(result.container.querySelector("svg")).toBeTruthy();
   });
 
+  it("puts trailing accessories inside the field, after clear, without an end inset", () => {
+    const result = renderWithProviders(
+      <SearchInput
+        defaultValue="abc"
+        trailing={
+          <button type="button" aria-label="Filter">
+            f
+          </button>
+        }
+      />,
+    );
+    const input = result.container.querySelector("input")!;
+    const trailing = result.container.querySelector<HTMLElement>("[data-search-trailing]")!;
+    const box = trailing.parentElement!;
+    expect(box.contains(input)).toBe(true);
+    const clear = result.getByLabelText("Clear search");
+    expect(clear.compareDocumentPosition(trailing) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(trailing.contains(result.getByLabelText("Filter"))).toBe(true);
+    const style = getComputedStyle(box);
+    expect(style.paddingInlineEnd || "0px").toBe("0px");
+  });
+
+  it("filled is the .searchable field: the tinted wash, no edge at rest (FZ-8039)", () => {
+    const boxOf = (node: Element) => node.closest("[data-ring-target]") as HTMLElement;
+    const filled = renderWithProviders(<SearchInput filled />);
+    const filledBox = boxOf(filled.container.querySelector("input")!);
+    expect(String(filledBox.className)).toMatch(/_bg-color3\b/);
+    expect(String(filledBox.className)).toMatch(/_btc-transparent\b/);
+    filled.unmount();
+    const plain = renderWithProviders(<SearchInput />);
+    const plainBox = boxOf(plain.container.querySelector("input")!);
+    expect(String(plainBox.className)).not.toMatch(/_bg-color3\b/);
+    expect(String(plainBox.className)).not.toMatch(/_btc-transparent\b/);
+  });
+
+  it("keeps its end inset without trailing accessories", () => {
+    const result = renderWithProviders(<SearchInput />);
+    expect(result.container.querySelector("[data-search-trailing]")).toBeNull();
+  });
+
   it("uses readable glyph ink for search and clear rather than the boundary ramp", () => {
     let expectedInk = "";
     function Sample() {

package/src/fields/SearchInput/index.tsx

@@ -13,14 +13,17 @@ import { useTouchSurface } from "@multiplatform.one/theme";
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import {
   MIN_PRESS_TARGET,
+  controlTierWash,
   ensureCompositeFocusRing,
+  isDarkThemeName,
   pressTargetHitSlop,
   sizeRecipeForToken,
+  useElevatedSurface,
 } from "@multiplatform.one/theme";
 import type { ComponentProps, ReactNode, Ref, RefObject } from "react";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
-import { isWeb } from "tamagui";
+import { XStack, isWeb, useThemeName } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -70,6 +73,11 @@ export interface SearchInputProps {
   size?: SizeTokens;
   /** Borderless/background-less (flush toolbar bands). */
   chromeless?: boolean;
+  /**
+   * The `.searchable` field of a list (UISearchBar): the LC-153 tinted wash
+   * with no edge at rest. Focus still turns the edge accent (LC-133).
+   */
+  filled?: boolean;
   skeleton?: boolean;
   label?: ReactNode;
   labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
@@ -78,6 +86,12 @@ export interface SearchInputProps {
   /** Leading icon size in px. Defaults from the size token. */
   iconSize?: number;
   inputProps?: Omit<AreaProps, "value" | "id" | "onChange" | "onChangeText" | "ref">;
+  /**
+   * Bare glyph buttons at the field's trailing edge, after clear: the
+   * `.searchable` accessories of the list the field searches (filter, sort,
+   * more). The field drops its end inset so the last glyph's square closes it.
+   */
+  trailing?: ReactNode;
 }
 
 const SEARCH_STYLE_ID = "mp-search-input-chrome";
@@ -141,6 +155,7 @@ function SearchInputImpl(
     error,
     size,
     chromeless,
+    filled,
     skeleton,
     label,
     labelProps,
@@ -148,6 +163,7 @@ function SearchInputImpl(
     "aria-label": ariaLabel,
     iconSize,
     inputProps,
+    trailing,
   }: SearchInputProps,
   ref: Ref<SearchInputHandle>,
 ) {
@@ -244,6 +260,18 @@ function SearchInputImpl(
     ...(belowFloor ? { hitSlop: pressTargetHitSlop(visualHeight) } : undefined),
   } as const;
 
+  const elevatedGround = useElevatedSurface();
+  const darkScheme = isDarkThemeName(useThemeName());
+  const filledWash = controlTierWash(darkScheme, elevatedGround).rest;
+  const filledProps =
+    filled && !chromeless
+      ? {
+          backgroundColor: filledWash,
+          borderColor: "transparent" as const,
+          hoverStyle: { backgroundColor: filledWash, borderColor: "transparent" as const },
+        }
+      : undefined;
+
   const chromelessProps = chromeless
     ? {
         borderWidth: 0,
@@ -345,7 +373,13 @@ function SearchInputImpl(
     } as unknown as AreaProps;
 
     return (
-      <InputParts.Box {...boxContract} disabled={disabled} {...chromelessProps}>
+      <InputParts.Box
+        {...boxContract}
+        disabled={disabled}
+        trailingFlush={trailing != null}
+        {...filledProps}
+        {...chromelessProps}
+      >
         <InputParts.Icon
           adornment="leading"
           color={formCommonColors.muted}
@@ -368,6 +402,17 @@ function SearchInputImpl(
             <XIcon />
           </InputParts.Action>
         ) : null}
+        {trailing != null ? (
+          <XStack
+            data-search-trailing=""
+            flexDirection="row"
+            alignItems="center"
+            alignSelf="stretch"
+            flexShrink={0}
+          >
+            {trailing}
+          </XStack>
+        ) : null}
       </InputParts.Box>
     );
   };

package/src/fields/Select/Select.containingBlock.spec.tsx

@@ -0,0 +1,191 @@
+/**
+ * FZ-8438 (Clay's rv_0ea65e640a0ef261, an iPad Select inside a sheet): the
+ * listbox is `position: fixed`, and inside a transformed sheet it lays out
+ * against that sheet, not the viewport. Its top is offset by the sheet's
+ * origin so the panel still lands on its field.
+ */
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { OverlayStackProvider } from "../../shared/overlayStack";
+import { Select, type SelectOption } from "./index";
+
+const options: SelectOption[] = [
+  { value: "hel", label: "Helsinki" },
+  { value: "fsn", label: "Falkenstein" },
+  { value: "nbg", label: "Nuremberg" },
+];
+
+async function openTop(result: ReturnType<typeof renderWithProviders>) {
+  fireEvent.keyDown(result.getByTestId("select-trigger"), { key: "Enter" });
+  const dropdown = await result.findByTestId("select-dropdown");
+  await waitFor(() => expect(dropdown.style.top).not.toBe(""));
+  return { dropdown, top: parseFloat(dropdown.style.top) };
+}
+
+describe("Select inside a transformed sheet (FZ-8438)", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+
+  it("offsets its top by the sheet it lays out against", async () => {
+    const plain = renderWithProviders(<Select options={options} value="hel" />);
+    const { top: viewportTop } = await openTop(plain);
+    plain.unmount();
+
+    const result = renderWithProviders(
+      <div
+        role="dialog"
+        data-testid="sheet"
+        style={{ transform: "translateY(0px)", overflowY: "auto", height: 100 }}
+      >
+        <Select options={options} value="hel" />
+      </div>,
+    );
+    const sheet = result.getByTestId("sheet");
+    sheet.scrollTop = 40;
+    const { dropdown, top } = await openTop(result);
+    expect(sheet.contains(dropdown)).toBe(true);
+    expect(top).toBe(viewportTop + 40);
+  });
+});
+
+describe("Select seamless cover (LC-112, FZ-8438)", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("opens on the field's top edge with the field echoed as a hidden first row", async () => {
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        const field = this.querySelector('[data-testid="select-trigger"]');
+        if (this.dataset.testid === "select-trigger" || field) {
+          return {
+            x: 16,
+            y: 200,
+            top: 200,
+            left: 16,
+            right: 416,
+            bottom: 240,
+            width: 400,
+            height: 40,
+            toJSON: () => ({}),
+          } as DOMRect;
+        }
+        return original.call(this);
+      },
+    );
+    const result = renderWithProviders(<Select options={options} value="nbg" />);
+    const { dropdown, top } = await openTop(result);
+    expect(top).toBe(200);
+    const echo = dropdown.querySelector<HTMLElement>("[data-fp-trigger-row]");
+    expect(echo).not.toBeNull();
+    expect(dropdown.firstElementChild).toBe(echo);
+    expect(echo?.getAttribute("aria-hidden")).toBe("true");
+    expect(echo?.getAttribute("role")).toBeNull();
+  });
+});
+
+describe("Select drop-up (LC-112, FZ-8438 r3)", () => {
+  const field = (top: number) => ({
+    x: 16,
+    y: top,
+    top,
+    left: 16,
+    right: 416,
+    bottom: top + 40,
+    width: 400,
+    height: 40,
+    toJSON: () => ({}),
+  });
+  let fieldTop = 700;
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1024,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      writable: true,
+      value: 768,
+    });
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        if (
+          this.dataset.testid === "select-trigger" ||
+          this.querySelector('[data-testid="select-trigger"]')
+        ) {
+          return field(fieldTop) as DOMRect;
+        }
+        return original.call(this);
+      },
+    );
+    vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+      function (this: HTMLElement) {
+        return this.dataset.testid === "select-dropdown" ? 300 : 0;
+      },
+    );
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("a field too low for its list opens upward, its bottom edge on the field's", async () => {
+    fieldTop = 700;
+    const result = renderWithProviders(<Select options={options} value="hel" />);
+    const { dropdown } = await openTop(result);
+    // The panel's bottom edge is the field's (740): the 300 list plus the
+    // frame's borders, above it.
+    await waitFor(() => expect(parseFloat(dropdown.style.top)).toBeLessThan(700));
+    expect(parseFloat(dropdown.style.top) + parseFloat(dropdown.style.maxHeight)).toBe(740);
+    expect(parseFloat(dropdown.style.maxHeight)).toBeGreaterThanOrEqual(300);
+    const echo = dropdown.querySelector<HTMLElement>("[data-fp-trigger-row]");
+    await waitFor(() => expect(echo?.style.order).toBe("1"));
+    expect(echo?.style.top).toBe("");
+    expect(echo?.style.bottom).not.toBe("");
+  });
+
+  it("a field with room below keeps the echo on top, opening down", async () => {
+    fieldTop = 120;
+    const result = renderWithProviders(<Select options={options} value="hel" />);
+    const { dropdown, top } = await openTop(result);
+    expect(top).toBe(120);
+    const echo = dropdown.querySelector<HTMLElement>("[data-fp-trigger-row]");
+    expect(echo?.style.order).toBe("");
+  });
+});
+
+describe("Select beside its field in a sheet (LC-262, FZ-8438)", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+
+  it("draws no trigger echo row when it opens beside the field", async () => {
+    const result = renderWithProviders(
+      <OverlayStackProvider zIndex={100000}>
+        <Select options={options} value="hel" />
+      </OverlayStackProvider>,
+    );
+    const { dropdown } = await openTop(result);
+    expect(dropdown.querySelector("[data-fp-trigger-row]")).toBeNull();
+    expect(dropdown.textContent?.match(/Helsinki/g)?.length ?? 0).toBe(1);
+  });
+});

package/src/fields/Select/Select.stories.tsx

@@ -496,3 +496,46 @@ export const NativeIos: Story = {
     native: true,
   },
 };
+
+const zoneOptions: SelectOption[] = [
+  { value: "hst", label: "Hawaii" },
+  { value: "akst", label: "Alaska" },
+  { value: "pt", label: "Pacific Time (US and Canada)" },
+  { value: "mt", label: "Mountain Time (US and Canada)" },
+  { value: "ct", label: "Central Time (US and Canada)" },
+  { value: "et", label: "Eastern Time (US and Canada)" },
+  { value: "gmt", label: "London" },
+  { value: "cet", label: "Berlin" },
+  { value: "eet", label: "Helsinki" },
+  { value: "ist", label: "Kolkata" },
+  { value: "jst", label: "Tokyo" },
+  { value: "aest", label: "Sydney" },
+];
+
+/**
+ * LC-112 width setting (FZ-8438 r3): the same field opened four ways. Each
+ * panel's top edge sits on its field; only the width changes.
+ */
+export const PanelWidths: Story = {
+  render: () => (
+    <YStack gap="$4" width={260}>
+      <Select label="Content" options={zoneOptions} defaultValue="pt" panelWidth="content" />
+      <Select label="Trigger" options={zoneOptions} defaultValue="pt" panelWidth="trigger" />
+      <Select label="Screen" options={zoneOptions} defaultValue="pt" panelWidth="screen" />
+      <Select label="Fixed 360" options={zoneOptions} defaultValue="pt" panelWidth={360} />
+    </YStack>
+  ),
+};
+
+/**
+ * Phone width (LC-112, FZ-7830): a long list opens its sheet at page level and
+ * a short one (seven or fewer options) opens as a menu over its field.
+ */
+export const PhoneLists: Story = {
+  render: () => (
+    <YStack gap="$4">
+      <Select label="Time zone" options={zoneOptions} defaultValue="pt" />
+      <Select label="Country" options={countryOptions} defaultValue="us" />
+    </YStack>
+  ),
+};