@multiplatform.one/forms 7.56.0 → 7.58.0

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

@@ -6,8 +6,11 @@ import { useState } from "react";
 import { RadioGroup as TamaguiRadioGroup, XStack, YStack } from "tamagui";
 import { Label } from "../../Label";
 import { Preset, Text, Paragraph } from "@multiplatform.one/theme";
+import { AdaptivePopup } from "../../AdaptivePopup";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
+import { Checkbox } from "../Checkbox";
+import { Switch } from "../Switch";
 import { RadioGroup } from "./index";
 
 const meta: Meta<typeof RadioGroup> = {
@@ -374,3 +377,49 @@ export const InTable: Story = {
     );
   },
 };
+
+/**
+ * FZ-7849: on a phone the whole row of every labelled choice selects, the label
+ * included, inside a sheet as on the page. The SHC console's Catalog filters
+ * found the label dead in a sheet.
+ */
+export const RowPressInSheet: Story = {
+  name: "Row press in a sheet",
+  render: () => {
+    const RowPressExample = () => {
+      const [open, setOpen] = useState(false);
+      const [kind, setKind] = useState("app");
+      const [installed, setInstalled] = useState(false);
+      const [updates, setUpdates] = useState(false);
+      const summary = `Kind: ${kind} · Installed: ${installed ? "yes" : "no"} · Updates: ${updates ? "on" : "off"}`;
+      return (
+        <YStack gap="$3">
+          <Text>{summary}</Text>
+          <Button onPress={() => setOpen(true)}>Filter</Button>
+          <AdaptivePopup open={open} onOpenChange={setOpen} title="Filter">
+            <YStack gap="$4">
+              <RadioGroup
+                label="Kind"
+                options={[
+                  { value: "app", label: "app" },
+                  { value: "vapp", label: "vapp" },
+                  { value: "addon", label: "addon" },
+                ]}
+                value={kind}
+                onChange={setKind}
+              />
+              <Checkbox
+                label="Installed only"
+                checked={installed}
+                onChange={(next) => setInstalled(next === true)}
+              />
+              <Switch label="Auto updates" checked={updates} onChange={setUpdates} />
+              <Text>{summary}</Text>
+            </YStack>
+          </AdaptivePopup>
+        </YStack>
+      );
+    };
+    return <RowPressExample />;
+  },
+};

package/src/fields/RadioGroup/index.tsx

@@ -31,6 +31,7 @@ import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
 import { choiceItemA11y, composeA11yName } from "../../shared/nativeA11y";
+import { choiceLabelPressProps, choiceRowPressProps } from "../../shared/choiceRowPress";
 import {
   getElevationWrapperProps,
   getFieldError,
@@ -582,8 +583,19 @@ export function RadioGroup({
       <Container gap="$2">
         {options.map((option, index) => {
           const itemId = `${id}-${index}-${option.value}`;
+          const select =
+            disabled || option.disabled || readOnly
+              ? undefined
+              : () => {
+                  if (currentValue !== option.value) emit(option.value);
+                };
           return (
-            <XStack key={`${index}-${option.value}`} gap="$2" alignItems="center">
+            <XStack
+              key={`${index}-${option.value}`}
+              gap="$2"
+              alignItems="center"
+              {...choiceRowPressProps(select)}
+            >
               {renderRadioItem(
                 option,
                 itemId,
@@ -592,7 +604,7 @@ export function RadioGroup({
                 index === tabStopIndex,
               )}
               <Label
-                htmlFor={itemId}
+                {...choiceLabelPressProps(itemId, select)}
                 // MPO-283: on native the radio itself now carries this text as
                 // its accessible name, so leaving the Label in the tree reads
                 // every option twice. Web keeps the label/control association.

package/src/fields/Select/index.tsx

@@ -1,6 +1,15 @@
 import { useTouchSurface } from "@multiplatform.one/theme";
 import type { KeyboardEvent, MouseEvent, ReactNode, RefObject, UIEvent } from "react";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  memo,
+} from "react";
 import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import {
   useClick,
@@ -54,8 +63,9 @@ import {
   panelViewportPadding,
   useViewportGtSm,
 } from "../../FloatingPanel";
+import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal";
-import { useOverlayZIndex } from "../../shared/overlayStack";
+import { useInsideOverlay, useOverlayZIndex } from "../../shared/overlayStack";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { t } from "../../shared/t";
@@ -1247,6 +1257,9 @@ function NativeSelectCore({
   dismissible,
   native,
 }: FloatingSelectCoreProps) {
+  const insideOverlay = useInsideOverlay();
+  const compactFace = pickerCompactFace(options.length);
+  const asMenu = resolveCompactFace(compactFace, insideOverlay) === "menu";
   const hydrationTouch = useTouchSurface();
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
@@ -1481,7 +1494,9 @@ function NativeSelectCore({
       : placeholder
     : (selectedOption?.label ?? placeholder);
 
-  if (shouldUseIosNativeSelect({ native, multiple, isWeb, os: Platform.OS })) {
+  // The iOS action sheet is a sheet too: a short list, or any list inside an
+  // overlay, opens as a menu over the trigger instead (FZ-7830).
+  if (!asMenu && shouldUseIosNativeSelect({ native, multiple, isWeb, os: Platform.OS })) {
     const openNative = () => {
       if (disabled) return;
       const labels = options.map((o) => o.label);
@@ -1556,6 +1571,9 @@ function NativeSelectCore({
         if (!val) onBlur?.();
       }}
       sheet
+      // 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}
       triggerA11y={{
         label: ariaLabel ?? fieldA11y?.label,
         value: triggerValueText,
@@ -1676,6 +1694,10 @@ function NativeSelectCore({
 
 // ── Select (public API) ──────────────────────────────────────
 
+const subscribeNothing = () => () => {};
+const clientSnapshot = () => true;
+const serverSnapshot = () => false;
+
 export function Select({
   name,
   form: formProp,
@@ -1733,10 +1755,18 @@ export function Select({
     id,
   });
   const viewportGtSm = useViewportGtSm();
-  // Sheet on native and below `$sm` (viewport < 640, OVERLAY_BREAKPOINT).
-  // Floating from `$sm` up.
+  const insideOverlay = useInsideOverlay();
+  // Sheet core on native and below `$sm` (viewport < 640, OVERLAY_BREAKPOINT).
+  // Floating from `$sm` up, and on a phone-width web for a short list or
+  // inside another overlay, where a sheet would stack on a sheet (FZ-7830).
+  // Native keeps the sheet core, whose FloatingPanel opens the same menu.
+  // SSR and the hydration render keep the sheet core, as the viewport does.
   const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
-  const shouldUseSheet = !isWeb || !effectiveGtSm;
+  const hydrated = useSyncExternalStore(subscribeNothing, clientSnapshot, serverSnapshot);
+  const compactMenu =
+    hydrated &&
+    resolveCompactFace(pickerCompactFace(options?.length ?? 0), insideOverlay) === "menu";
+  const shouldUseSheet = !isWeb || (!effectiveGtSm && !compactMenu);
 
   // Render skeleton placeholder
   if (skeleton) {

package/src/fields/Switch/Switch.rowPress.native.spec.tsx

@@ -0,0 +1,69 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useForm } from "@tanstack/react-form";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { Switch } from "./index";
+import { muteBubbleInputs } from "../../../tests/muteBubbleInputs";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+afterEach(cleanup);
+
+function FormSwitch({ onChange }: { onChange: (checked: boolean) => void }) {
+  const form = useForm({ defaultValues: { alerts: false } });
+  return (
+    <Form form={form}>
+      <Switch name="alerts" label="Alerts" onChange={onChange} />
+    </Form>
+  );
+}
+
+// FZ-7849. Same contract as RadioGroup's row press: the row and the label flip
+// the switch directly on native instead of through tamagui's focusable
+// registry, and each press flips it exactly once.
+describe("native Switch row press", () => {
+  muteBubbleInputs();
+
+  const rowOf = (label: HTMLElement) => label.parentElement as HTMLElement;
+
+  it("flips once from the row and once from the label, standalone", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Switch label="Dark mode" onChange={onChange} />);
+    const label = result.getByText("Dark mode");
+    expect(label.hasAttribute("for")).toBe(false);
+    fireEvent.click(rowOf(label));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    fireEvent.click(label);
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("flips a form field once from its label", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<FormSwitch onChange={onChange} />);
+    fireEvent.click(result.getByText("Alerts"));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    fireEvent.click(rowOf(result.getByText("Alerts")));
+    expect(onChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("leaves a disabled or read-only switch's row and label dead", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <>
+        <Switch label="Off limits" onChange={onChange} disabled />
+        <Switch label="Look only" onChange={onChange} readOnly />
+      </>,
+    );
+    for (const text of ["Off limits", "Look only"]) {
+      const label = result.getByText(text);
+      fireEvent.click(rowOf(label));
+      fireEvent.click(label);
+    }
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/fields/Switch/index.tsx

@@ -49,6 +49,7 @@ import {
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
+import { choiceLabelPressProps, choiceRowPressProps } from "../../shared/choiceRowPress";
 import { pressSlopProps } from "../../shared/pressSlopProps";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { switchFootprint, type SwitchFootprint } from "./footprint";
@@ -830,6 +831,15 @@ export function Switch({
         : undefined;
   const grownTarget = targetHeight !== undefined;
   const rowMinHeight = !inTableCell && grownTarget ? targetHeight : undefined;
+  // FZ-7849: the row and label flip the switch on native, through the same
+  // path as a press on the track.
+  const rowToggle = (current: boolean, handleChange?: (val: boolean) => void) =>
+    disabled || readOnly
+      ? undefined
+      : () => {
+          handleChange?.(!current);
+          handleValueChange(!current);
+        };
 
   const renderSwitch = (
     switchChecked: boolean,
@@ -1037,6 +1047,9 @@ export function Switch({
 
   if (!resolvedForm || !name) {
     const resolvedChecked = checked !== undefined ? checked : internalChecked;
+    const handleChange =
+      checked === undefined ? (val: boolean) => setInternalChecked(val) : undefined;
+    const toggle = rowToggle(resolvedChecked, handleChange);
     return (
       <FieldLayout
         id={id}
@@ -1054,17 +1067,18 @@ export function Switch({
           height={sizeToken}
           {...(rowMinHeight !== undefined && { minHeight: rowMinHeight })}
           {...labelLeadingRow}
+          {...(label ? choiceRowPressProps(toggle) : undefined)}
         >
           {renderSwitch(
             resolvedChecked,
-            checked === undefined ? (val) => setInternalChecked(val) : undefined,
+            handleChange,
             onBlur,
             !!error,
             typeof error === "string" && error ? error : undefined,
           )}
           {label && (
             <Label
-              htmlFor={id}
+              {...choiceLabelPressProps(id, toggle)}
               size={(size || "$true") as FontSizeTokens}
               {...knobProps.textWeight}
               color={error ? formCommonColors.error : knobProps.textAccentColor}
@@ -1098,6 +1112,15 @@ export function Switch({
       {(field) => {
         const resolvedError = getFieldError(field, error);
         const formLabelColor = resolvedError ? formCommonColors.error : knobProps.textAccentColor;
+        const formChecked = checked !== undefined ? checked : Boolean(field.state.value);
+        const handleChange = (val: boolean) => {
+          field.handleChange(val as any);
+          if (saveMode === "declarative") {
+            commitImmediateField(resolvedForm, name, val);
+            onAutoCommit?.(name, val);
+          }
+        };
+        const toggle = rowToggle(formChecked, handleChange);
         return (
           <FieldLayout
             id={id}
@@ -1114,23 +1137,18 @@ export function Switch({
               height={sizeToken}
               {...(rowMinHeight !== undefined && { minHeight: rowMinHeight })}
               {...labelLeadingRow}
+              {...(label ? choiceRowPressProps(toggle) : undefined)}
             >
               {renderSwitch(
-                checked !== undefined ? checked : Boolean(field.state.value),
-                (val) => {
-                  field.handleChange(val as any);
-                  if (saveMode === "declarative") {
-                    commitImmediateField(resolvedForm, name, val);
-                    onAutoCommit?.(name, val);
-                  }
-                },
+                formChecked,
+                handleChange,
                 mergeFieldHandler(field, "handleBlur", onBlur),
                 !!resolvedError,
                 typeof resolvedError === "string" && resolvedError ? resolvedError : undefined,
               )}
               {label && (
                 <Label
-                  htmlFor={id}
+                  {...choiceLabelPressProps(id, toggle)}
                   size={(size || "$true") as FontSizeTokens}
                   {...knobProps.textWeight}
                   color={formLabelColor}

package/src/fields/pickerRows.spec.tsx

@@ -48,9 +48,11 @@ describe("picker sheet rows consume resolved control height", () => {
           <Picker
             value="one"
             onValueChange={onValueChange}
+            // Eight options: a shorter Select opens as a menu, not its sheet (FZ-7830).
             options={[
               { value: "one", label: "First choice" },
               { value: "two", label: "Second choice" },
+              ...[3, 4, 5, 6, 7, 8].map((n) => ({ value: `c${n}`, label: `Choice ${n}` })),
             ]}
           />,
         );

package/src/overlayGround.spec.ts

@@ -0,0 +1,181 @@
+/**
+ * FZ-7944, LC-153 on an elevated ground. Dark `elevatedSurface` paints
+ * `$color4`, the tinted wash's own step, so a plain Button on a dark sheet,
+ * dialog, popover or floating panel had no plate (1.00:1). Over every preset
+ * the package exports and every colour scope a preset or Tint can name, the
+ * controls an overlay hosts must separate from the ground the overlay paints.
+ * Apple HIG: a control's fill sits above the elevated background it is on.
+ */
+
+import * as themePackage from "@multiplatform.one/theme";
+import {
+  controlTierPaint,
+  createDefaultThemeConfig,
+  holdInkFloor,
+  measureContrast,
+  pickReadableForeground,
+  resolveKnobs,
+  type PresetDefinition as Preset,
+} from "@multiplatform.one/theme";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import { formControlColors, formSelectedColors, formSwitchColors } from "./shared/colorRamps";
+
+/** The card's floor: the console's "a plain Button on an overlay's ground" asks the same. */
+const plateFloor = 1.1;
+
+type RawThemes = Record<string, Record<string, { val: string } | string>>;
+const themes = createDefaultThemeConfig().tamagui.themes as unknown as RawThemes;
+const schemes = ["light", "dark"] as const;
+
+function isPreset(value: unknown): value is Preset {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "knobs" in value &&
+    "intents" in value &&
+    typeof (value as Preset).knobs === "object"
+  );
+}
+
+const presets = Object.entries(themePackage).filter(
+  (entry): entry is [string, Preset] => isPreset(entry[1]) && entry[0].endsWith("Preset"),
+);
+
+/** A token the way Tamagui resolves it in a component sub-theme: its own key, then the scope's. */
+function resolve(scope: string, token: string, component?: string): string {
+  if (!token.startsWith("$")) return token;
+  const key = token.slice(1);
+  const own = component ? themes[`${scope}_${component}`]?.[key] : undefined;
+  const entry = own ?? themes[scope]?.[key];
+  const value = typeof entry === "object" ? entry.val : entry;
+  if (!value)
+    throw new Error(`${token} does not resolve in ${scope}${component ? `_${component}` : ""}`);
+  return value;
+}
+
+function ratio(foreground: string, background: string): number {
+  return measureContrast({ foreground, background }).ratio;
+}
+
+interface Case {
+  label: string;
+  scope: string;
+  scheme: (typeof schemes)[number];
+  knobs: Preset["knobs"];
+}
+
+const presetCases: Case[] = presets.flatMap(([name, preset]) =>
+  schemes.map((scheme) => ({
+    label: `${name} ${scheme}`,
+    scope: preset.theme ? `${scheme}_${preset.theme}` : scheme,
+    scheme,
+    knobs: preset.knobs,
+  })),
+);
+
+// Every hue scope with house component themes: a preset's `theme` or a Tint.
+const hueCases: Case[] = Object.keys(themes)
+  .filter((name) => /^(light|dark)_[a-z]+$/.test(name) && themes[`${name}_Button`])
+  .map((scope) => ({
+    label: scope,
+    scope,
+    scheme: scope.startsWith("dark") ? "dark" : "light",
+    knobs: themePackage.defaultPreset.knobs,
+  }));
+
+function groundOf({ scope, scheme, knobs }: Case): string {
+  const { elevatedSurface } = resolveKnobs(knobs, undefined, scheme).knobProps;
+  return resolve(scope, elevatedSurface.backgroundColor as string);
+}
+
+describe("FZ-7944: a control on an overlay has a plate distinct from the overlay's ground", () => {
+  it("covers the exported presets and the hue scopes", () => {
+    expect(presets.map(([name]) => name)).toEqual(
+      expect.arrayContaining(["defaultPreset", "boldPreset"]),
+    );
+    expect(hueCases.length).toBeGreaterThanOrEqual(16);
+  });
+
+  // The floor is the dark ask; light keeps its own wash, asserted below.
+  const darkCases = [...presetCases, ...hueCases].filter((c) => c.scheme === "dark");
+
+  describe.each(darkCases)("$label", (c) => {
+    const ground = groundOf(c);
+
+    it("a tinted Button's rest, hover and press each clear the plate floor on the ground", () => {
+      if (c.knobs.fillStyle === "outlined") return;
+      const paint = controlTierPaint("tinted", true, true);
+      for (const [state, token] of Object.entries(paint)) {
+        const plate = resolve(c.scope, token, "Button");
+        expect(
+          ratio(plate, ground),
+          `${state} ${token} ${plate} on ${ground}`,
+        ).toBeGreaterThanOrEqual(plateFloor);
+      }
+    });
+
+    it("a plain Button's hover and press wash clear the plate floor on the ground", () => {
+      const paint = controlTierPaint("plain", true, true);
+      for (const token of [paint.hover, paint.press]) {
+        const plate = resolve(c.scope, token, "Button");
+        expect(ratio(plate, ground), `${token} ${plate} on ${ground}`).toBeGreaterThanOrEqual(
+          plateFloor,
+        );
+      }
+    });
+
+    it("Slider and Progress tracks read on the ground", () => {
+      for (const component of ["Slider", "Progress"]) {
+        const track = resolve(c.scope, formControlColors.background, component);
+        expect(
+          ratio(track, ground),
+          `${component} track ${track} on ${ground}`,
+        ).toBeGreaterThanOrEqual(plateFloor);
+      }
+    });
+
+    it("the Switch off track and the Slider thumb read on the ground", () => {
+      const track = resolve(c.scope, formSwitchColors.track.off, "Switch");
+      expect(ratio(track, ground), `Switch off ${track} on ${ground}`).toBeGreaterThanOrEqual(
+        plateFloor,
+      );
+      // Slider.tsx: the thumb is the readable anchor on the accent fill, read at field scope.
+      const mark = resolve(c.scope, formSelectedColors.mark);
+      const thumb = holdInkFloor(
+        mark,
+        pickReadableForeground(mark, resolve(c.scope, "$color1"), resolve(c.scope, "$color12")),
+      );
+      expect(ratio(thumb, ground), `SliderThumb ${thumb} on ${ground}`).toBeGreaterThanOrEqual(
+        plateFloor,
+      );
+    });
+  });
+
+  it("dark keeps the MPO-69 elevation tint and light keeps the page ground", () => {
+    const knobs = themePackage.defaultPreset.knobs;
+    const ground = (scheme: "light" | "dark") =>
+      resolveKnobs(knobs, undefined, scheme).knobProps.elevatedSurface.backgroundColor;
+    expect(ground("dark")).toBe("$color4");
+    expect(ground("light")).toBe("$background");
+    expect(controlTierPaint("tinted", false, true)).toEqual(controlTierPaint("tinted", false));
+  });
+});
+
+describe("FZ-7944: every frame that paints the elevated ground marks its subtree elevated", () => {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const frames = [
+    "../../theme/src/theme/overlaySurfaces.tsx",
+    "./FloatingPanel/index.tsx",
+    "./FloatingPanel/index.native.tsx",
+    "./AdaptivePopup/index.tsx",
+  ];
+  it.each(frames)("%s", (file) => {
+    const src = readFileSync(join(here, file), "utf8");
+    const resets = src.match(/<Surface\b[^>]*\bpainted=\{false\}[^>]*>/g) ?? [];
+    expect(resets.length, "the frame wraps its content in a Surface").toBeGreaterThan(0);
+    for (const tag of resets) expect(tag).toMatch(/\belevated\b/);
+  });
+});

package/src/shared/choiceRowPress.ts

@@ -0,0 +1,40 @@
+import { isWeb } from "tamagui";
+
+/**
+ * FZ-7849: on native the whole row of a labelled choice control (RadioGroup
+ * option, Checkbox, Switch) is one press target, as `<label for>` makes it on
+ * web.
+ *
+ * tamagui's Label emulates `for` on native through `focusFocusable(htmlFor)`, a
+ * process-global registry keyed by element id. A second copy of
+ * `@tamagui/focusable` in a consumer's tree, or a duplicate id whose unmount
+ * deletes the live entry, leaves the label dead while the control still works,
+ * as the SHC console's Catalog filters did in a sheet on MPO 7.37.0. The gap between control
+ * and label and the row past the label text were never targets at all.
+ *
+ * So the component that owns the value wires the press: row and label both
+ * call `select`, and the label drops `htmlFor` so the registry cannot fire a
+ * second toggle that undoes the first. RN gives a tap to the innermost
+ * handler, so a tap on the control still fires only the control. Web keeps
+ * `htmlFor`: a row handler there would also get the click bubbling up from the
+ * control.
+ */
+export function choiceRowPressProps(select: (() => void) | undefined) {
+  return !isWeb && select ? { onPress: select } : undefined;
+}
+
+/**
+ * A disabled or read-only row passes no `select`, so its label takes no press.
+ * The label consumes its press so a renderer that bubbles it (the web renderer
+ * the native specs run on) cannot hand the row a second toggle.
+ */
+export function choiceLabelPressProps(htmlFor: string, select: (() => void) | undefined) {
+  if (isWeb) return { htmlFor };
+  if (!select) return {};
+  return {
+    onPress: (event?: { stopPropagation?: () => void }) => {
+      event?.stopPropagation?.();
+      select();
+    },
+  };
+}

package/src/shared/overlayStack.tsx

@@ -100,3 +100,8 @@ export function withOverlayStack<P extends ComponentType<any>>(
   Stacked.displayName = displayName;
   return Stacked as unknown as P;
 }
+
+/** True inside a house overlay (a sheet, dialog, popover or floating panel). */
+export function useInsideOverlay(): boolean {
+  return useContext(OverlayStackContext) !== undefined;
+}

package/types/AdaptivePopup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AdaptivePopup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAyB5D,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,uCAAuC;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,gFAAgF;IAChF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;IAChD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,sDAAsD;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoBD,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE;IAC7C,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,yBAAyB,CAK5B;AA6ED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAW,EACX,IAAe,EACf,eAAsB,EACtB,MAAM,EACN,QAAQ,GACT,EAAE,kBAAkB,2CAqRpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AdaptivePopup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0B5D,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,uCAAuC;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,gFAAgF;IAChF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;IAChD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,sDAAsD;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoBD,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE;IAC7C,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,yBAAyB,CAK5B;AA6ED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAW,EACX,IAAe,EACf,eAAsB,EACtB,MAAM,EACN,QAAQ,GACT,EAAE,kBAAkB,2CAyRpB"}

package/types/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"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"}

package/types/FloatingPanel/compactFace.d.ts

@@ -0,0 +1,21 @@
+/**
+ * What a FloatingPanel becomes where it would otherwise be a bottom sheet:
+ * on native, and on the web at or below OVERLAY_BREAKPOINT.
+ *
+ * - `"sheet"`: the bottom sheet, wherever it opens.
+ * - `"menu"`: a menu over its trigger (LC-112) wherever it opens.
+ * - `"auto"`: the sheet at page level, the menu inside another overlay. A
+ *   sheet over a sheet is the one thing a phone must never show (FZ-7830).
+ */
+export type CompactFace = "sheet" | "menu" | "auto";
+export declare function resolveCompactFace(face: CompactFace | undefined, insideOverlay: boolean): "sheet" | "menu";
+/** The longest list a picker opens as a menu over its trigger (FZ-7830). */
+export declare const SHORT_LIST_MAX = 7;
+/**
+ * A picker's face (FZ-7830, LC-112): a short list with no search opens as a
+ * menu over its trigger at every level, the iOS 14+ pull-down picker. A long or
+ * searchable list keeps the sheet at page level and opens as a scrolling menu
+ * inside another overlay.
+ */
+export declare function pickerCompactFace(optionCount: number, searchable?: boolean): CompactFace;
+//# sourceMappingURL=compactFace.d.ts.map

package/types/FloatingPanel/compactFace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compactFace.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/compactFace.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpD,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,WAAW,GAAG,SAAS,EAC7B,aAAa,EAAE,OAAO,GACrB,OAAO,GAAG,MAAM,CAIlB;AAED,4EAA4E;AAC5E,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,UAAQ,GAAG,WAAW,CAEtF"}