@multiplatform.one/forms 7.80.0 → 7.81.0

package/src/fields/Select/index.tsx

@@ -1,7 +1,8 @@
 import { IconSlot, useTouchSurface } from "@multiplatform.one/theme";
+import { CheckGlyph } from "../../shared/CheckGlyph";
 import type { KeyboardEvent, MouseEvent, ReactNode, RefObject, UIEvent } from "react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
-import { CaretDownIcon, CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CaretRightIcon } from "@phosphor-icons/react";
 import {
   useClick,
   useDismiss,
@@ -50,11 +51,14 @@ import {
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
-import { ScrollArrow } from "../../shared/floatingList";
+import {
+  growOnScroll,
+  placeCheckedOnField,
+  ScrollArrow,
+  scrollArrowBand,
+} from "../../shared/floatingList";
 import {
   FloatingPanel,
-  TriggerEchoRow,
-  placeEchoOverTrigger,
   useFloatingPanel,
   panelViewportPadding,
   useViewportGtSm,
@@ -349,8 +353,8 @@ function selectItemRingProps(isActive: boolean, kbNav: boolean) {
  * row. On native the shim can only resolve a token the theme in scope actually
  * carries, and the component sub-themes carry no accent solid at all.
  * Resolve it here, where the value becomes a paint — the same shape as
- * `mutedColor` in Combobox. Keyed off `useMenuRowCheckInk` (`menuRowCheckInk`, ink when hue-less), the selection tint's
- * own ink, so the tick holds 4.5:1 on the chosen row (FZ-8355 r6), degrading
+ * `mutedColor` in Combobox. Keyed off `useMenuRowCheckInk` (the accent, ink when hue-less), so the tick
+ * holds 4.5:1 on the chosen row (FZ-8355 r6, FZ-8557), degrading
  * to `$color` ink rather than black when a narrow sub-theme lacks the key.
  */
 function useSelectedMarkColor(): string {
@@ -506,7 +510,7 @@ const SelectItem = memo(function SelectItem({
       >
         {option.label}
       </Text>
-      {isSelected && <CheckIcon size={14} weight="bold" color={ctx.markColor} />}
+      {isSelected && <CheckGlyph />}
     </SelectRow>
   );
 });
@@ -624,20 +628,13 @@ function FloatingSelectCore({
   }, [options, value, multiple, selectedOrder]);
 
   const programmaticScrollRef = useRef(0);
-  const pinnedTopRef = useRef(0);
-  const pinnedHeightRef = useRef(0);
-  const grownRef = useRef(false);
-  const growUpOnlyRef = useRef(false);
-  const growDownOnlyRef = useRef(false);
   const lastScrollTopRef = useRef(0);
-  // LC-112 cover and scroll (FZ-8463): a list that doesn't fit below its
-  // field covers the field with no echo row and grows toward the side with
-  // more room, then scrolls.
-  const coverScrollRef = useRef(false);
-  const [coverScroll, setCoverScroll] = useState(false);
-  const growsUpRef = useRef(false);
-  const coverTrimRef = useRef(0);
-  const echoed = !beside && !coverScroll;
+  // The panel's box with the checked row on the field (FZ-8557), in the
+  // padding box's viewport coordinates.
+  const onFieldRef = useRef<{ top: number; height: number; scrollTop: number } | null>(null);
+  const opensUpRef = useRef(false);
+  // One band for the layout and the arrows that draw it (FZ-8557).
+  const arrowBand = scrollArrowBand(knobProps.menuRow.minHeight);
 
   const repositionRef = useRef<(() => void) | null>(null);
 
@@ -646,21 +643,13 @@ function FloatingSelectCore({
     onOpenChange: setOpen,
     disabled,
     repositionRef,
-    wheelGrowRef: selectedIndex >= 0 ? grownRef : undefined,
     onBeforeOpen: () => {
       computeSortedOptions();
       overlayStyle.current = null;
-      pinnedTopRef.current = 0;
-      pinnedHeightRef.current = 0;
-      grownRef.current = false;
-      growUpOnlyRef.current = false;
-      growDownOnlyRef.current = false;
       lastScrollTopRef.current = 0;
       programmaticScrollRef.current = 0;
-      coverScrollRef.current = false;
-      growsUpRef.current = false;
-      coverTrimRef.current = 0;
-      setCoverScroll(false);
+      onFieldRef.current = null;
+      opensUpRef.current = false;
     },
     panelWidth,
   });
@@ -728,11 +717,6 @@ function FloatingSelectCore({
     const isInitial = panel.initializingRef.current;
     if (isInitial) dropdownElement.style.transition = "none";
 
-    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
-      programmaticScrollRef.current++;
-      dropdownElement.scrollTop = 0;
-    }
-
     const triggerBounds = trigger.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     // The math runs in viewport coordinates; a panel hosted in a transformed
@@ -744,153 +728,46 @@ function FloatingSelectCore({
     const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
     const totalBorderWidth = borderTopWidth + borderBottomWidth;
     const scrollContentHeight = dropdownElement.scrollHeight;
-    const totalContentHeight = scrollContentHeight + totalBorderWidth;
-
-    // LC-112 seamless cover (FZ-8438): the panel's top edge is the trigger's,
-    // the trigger echoed as its first row, the list below it. A list that
-    // doesn't fit below its field covers the field with no echo row and
-    // grows toward the side with more room: down from the field's top edge,
-    // or up from its bottom edge. Past the safe screen edge it scrolls, and
-    // scrolling grows it to fill the screen (FZ-8463).
-    const firstPlacement = pinnedTopRef.current === 0 && pinnedHeightRef.current === 0;
-    const boundsTop = panelViewportPadding;
-    const boundsBottom = viewportHeight - panelViewportPadding;
-    const echoRow = dropdownElement.querySelector<HTMLElement>("[data-fp-trigger-row]");
-    const echoHeight = echoRow ? triggerBounds.height : 0;
-    const listHeight = totalContentHeight - echoHeight;
-    const roomBelow = boundsBottom - triggerBounds.top;
-    const roomAbove = triggerBounds.bottom - boundsTop;
-    if (firstPlacement && totalContentHeight > roomBelow) {
-      coverScrollRef.current = true;
-      growsUpRef.current = roomAbove > roomBelow;
-      setCoverScroll(true);
-    }
 
-    if (coverScrollRef.current) {
-      const grown = grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current;
-      const room = grown ? boundsBottom - boundsTop : growsUpRef.current ? roomAbove : roomBelow;
-      const trim = grown ? 0 : coverTrimRef.current;
-      const height = Math.max(0, Math.min(listHeight, room - trim));
-      const anchor = growsUpRef.current ? triggerBounds.bottom - height : triggerBounds.top;
-      const top = Math.min(Math.max(anchor, boundsTop), boundsBottom - height);
-      const previousTop = pinnedTopRef.current;
-      if (
-        !overlayStyle.current ||
-        overlayStyle.current.top !== top - originTop ||
-        overlayStyle.current.maxHeight !== height
-      ) {
-        dropdownElement.style.top = `${top - originTop}px`;
-        dropdownElement.style.maxHeight = `${height}px`;
-        dropdownElement.style.height = "";
-        overlayStyle.current = { top: top - originTop, maxHeight: height };
-        void dropdownElement.offsetHeight;
-      }
-      pinnedTopRef.current = top;
-      pinnedHeightRef.current = height;
-      // Rows stay under the pointer while the panel grows upward.
-      if (grown && previousTop > top && dropdownElement.scrollTop > 0) {
-        programmaticScrollRef.current++;
-        dropdownElement.scrollTop = Math.max(0, dropdownElement.scrollTop - (previousTop - top));
-      }
-      if (echoRow) return;
-      const rowHeight = selectedItem.offsetHeight || 1;
-      if (isInitial && selectedIndex >= 0) {
-        // The checked row lands on the field when the list can scroll that
-        // far. Opening down, short of that it stops a whole row short, so the
-        // top row isn't cut in half. Two pixels of rounding are not a row.
-        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-        let scrollTop: number;
-        if (growsUpRef.current) {
-          scrollTop = selectedItem.offsetTop + rowHeight - (triggerBounds.bottom - top);
-        } else {
-          const short = Math.max(0, selectedItem.offsetTop - maxScrollTop - 2);
-          scrollTop = selectedItem.offsetTop - Math.ceil(short / rowHeight) * rowHeight;
-        }
-        programmaticScrollRef.current++;
-        dropdownElement.scrollTop = Math.min(maxScrollTop, Math.max(0, scrollTop));
-      }
-      if (isInitial && !grown) {
-        // The far edge ends on a whole row: growing up, the row on the field
-        // isn't cut in half; growing down, no sliver sits at the screen edge.
-        const firstRow = listItemsRef.current[0];
-        const visibleBottom = dropdownElement.scrollTop + dropdownElement.clientHeight;
-        if (firstRow && visibleBottom < dropdownElement.scrollHeight - 2) {
-          const cut = (visibleBottom - firstRow.offsetTop) % rowHeight;
-          if (cut > 3 && cut < rowHeight - 3) {
-            coverTrimRef.current = cut;
-            const trimmedHeight = height - cut;
-            const trimmedTop = growsUpRef.current ? top + cut : top;
-            dropdownElement.style.top = `${trimmedTop - originTop}px`;
-            dropdownElement.style.maxHeight = `${trimmedHeight}px`;
-            overlayStyle.current = { top: trimmedTop - originTop, maxHeight: trimmedHeight };
-            pinnedTopRef.current = trimmedTop;
-            pinnedHeightRef.current = trimmedHeight;
-          }
-        }
-      }
-      panel.initializingRef.current = false;
-      void dropdownElement.offsetHeight;
-      if (isInitial) dropdownElement.style.transition = panel.panelTransition;
-      requestAnimationFrame(() => {
-        if (dropdownElement) panel.updateArrows(dropdownElement);
+    // LC-112 (FZ-8557 r3): a covering Select opens the way a macOS pop-up
+    // does. Its checked row sits on the field (the first row when nothing is
+    // checked), so the value never shows twice. A list that fits the safe
+    // viewport shows whole, slid the least distance to stay on screen; a
+    // taller one clips at the safe edges and scrolls under its arrow bands.
+    // Scrolling grows a panel that stops short of a safe edge toward it,
+    // the rows staying under the pointer.
+    const boundsTop = panelViewportPadding + borderTopWidth;
+    const boundsBottom = viewportHeight - panelViewportPadding - borderBottomWidth;
+    if (!onFieldRef.current) {
+      const fit = placeCheckedOnField({
+        fieldTop: triggerBounds.top,
+        fieldBottom: triggerBounds.bottom,
+        rowTop: selectedItem.offsetTop,
+        rowHeight: selectedItem.offsetHeight || 1,
+        contentHeight: scrollContentHeight,
+        boundsTop,
+        boundsBottom,
+        band: arrowBand,
+      });
+      onFieldRef.current = fit;
+      opensUpRef.current =
+        fit.top + fit.height / 2 < (triggerBounds.top + triggerBounds.bottom) / 2;
+    } else if (!isInitial) {
+      onFieldRef.current = growOnScroll({
+        ...onFieldRef.current,
+        scrollTop: dropdownElement.scrollTop,
+        contentHeight: scrollContentHeight,
+        boundsTop,
+        boundsBottom,
       });
-      return;
-    }
-    const idealTop = triggerBounds.top;
-    const idealBottom = idealTop + totalContentHeight;
-    const pinnedTop = Math.max(panelViewportPadding, idealTop);
-    const pinnedBottom = Math.min(viewportHeight - panelViewportPadding, idealBottom);
-    const pinnedHeight = Math.max(120, pinnedBottom - pinnedTop);
-
-    if (firstPlacement) {
-      pinnedTopRef.current = pinnedTop;
-      pinnedHeightRef.current = pinnedHeight;
-    }
-
-    let top = pinnedTopRef.current;
-    let height = pinnedHeightRef.current;
-
-    if (grownRef.current) {
-      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
-      height += canGrowDown;
-      const canGrowUp = Math.max(0, top - panelViewportPadding);
-      top -= canGrowUp;
-      height += canGrowUp;
-    }
-
-    if (growUpOnlyRef.current) {
-      const canGrowUp = Math.max(0, top - panelViewportPadding);
-      top -= canGrowUp;
-      height += canGrowUp;
-    }
-    if (growDownOnlyRef.current) {
-      const canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
-      height += canGrowDown;
-    }
-
-    height = Math.min(height, viewportHeight - top - panelViewportPadding);
-    height = Math.min(height, totalContentHeight);
-    height = Math.max(120, height);
-
-    // When grown but content is shorter than viewport: anchor dropdown to bottom (gap above), dropup to top (gap below)
-    const availableViewport = viewportHeight - 2 * panelViewportPadding;
-    if (
-      (grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) &&
-      height < availableViewport
-    ) {
-      if (panel.placement.startsWith("top")) {
-        top = panelViewportPadding;
-      } else {
-        top = viewportHeight - panelViewportPadding - height;
-      }
     }
-
-    const cachedOverlayStyle = overlayStyle.current;
-
+    const placed = onFieldRef.current;
+    const top = placed.top - borderTopWidth;
+    const height = placed.height + totalBorderWidth;
     if (
-      !cachedOverlayStyle ||
-      cachedOverlayStyle.top !== top - originTop ||
-      cachedOverlayStyle.maxHeight !== height
+      !overlayStyle.current ||
+      overlayStyle.current.top !== top - originTop ||
+      overlayStyle.current.maxHeight !== height
     ) {
       dropdownElement.style.top = `${top - originTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
@@ -898,63 +775,24 @@ function FloatingSelectCore({
       overlayStyle.current = { top: top - originTop, maxHeight: height };
       void dropdownElement.offsetHeight;
     }
-
-    if (
-      isInitial &&
-      selectedIndex >= 0 &&
-      !grownRef.current &&
-      !growUpOnlyRef.current &&
-      !growDownOnlyRef.current
-    ) {
-      // The selected row starts in view, just under the sticky echo row.
-      const rowBottom = selectedItem.offsetTop + selectedItem.offsetHeight;
-      if (rowBottom > dropdownElement.clientHeight) {
-        const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
-        programmaticScrollRef.current++;
-        dropdownElement.scrollTop = Math.max(
-          0,
-          Math.min(selectedItem.offsetTop - echoHeight, maxScrollTop),
-        );
-      }
+    if (Math.abs(dropdownElement.scrollTop - placed.scrollTop) >= 0.5) {
+      programmaticScrollRef.current++;
+      dropdownElement.scrollTop = placed.scrollTop;
     }
-
-    // A screen-wide or fixed-width list slides inside the margins; its echo
-    // stays on the field (LC-112 r3). The scale origin is the left edge, so
-    // the client rect's left is the layout left.
-    placeEchoOverTrigger(
-      dropdownElement,
-      {
-        triggerLeft: triggerBounds.left,
-        triggerRight: triggerBounds.right,
-        panelLeft: dropdownElement.getBoundingClientRect().left,
-        panelWidth: dropdownElement.offsetWidth,
-        rtl: getComputedStyle(trigger).direction === "rtl",
-      },
-      { stretch: panelWidth !== undefined },
-    );
-
     panel.initializingRef.current = false;
-
     void dropdownElement.offsetHeight;
     if (isInitial) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(() => {
-      if (dropdownElement) {
-        panel.updateArrows(dropdownElement);
-        requestAnimationFrame(() => {
-          if (dropdownElement) panel.updateArrows(dropdownElement);
-        });
-      }
+      if (dropdownElement) panel.updateArrows(dropdownElement);
     });
   }, [
     selectedIndex,
     panel.refs,
     panel.updateArrows,
-    panel.placement,
     panel.panelTransition,
     options.length,
     beside,
-    coverScroll,
-    panelWidth,
+    arrowBand,
   ]);
 
   repositionRef.current = repositionOverlay;
@@ -1156,23 +994,10 @@ function FloatingSelectCore({
         return;
       }
       const arrowDir = panel.arrowScrollDirRef.current;
-      if (arrowDir) {
-        panel.arrowScrollDirRef.current = null;
-        lastScrollTopRef.current = el.scrollTop;
-        if (arrowDir === "down") {
-          growUpOnlyRef.current = true;
-        } else {
-          growDownOnlyRef.current = true;
-        }
-        repositionOverlay();
-        return;
-      }
+      if (arrowDir) panel.arrowScrollDirRef.current = null;
       const delta = el.scrollTop - lastScrollTopRef.current;
       lastScrollTopRef.current = el.scrollTop;
-      if (delta !== 0) {
-        grownRef.current = true;
-        repositionOverlay();
-      }
+      if (delta !== 0) repositionOverlay();
     },
     [panel.updateArrows, repositionOverlay],
   );
@@ -1290,10 +1115,7 @@ function FloatingSelectCore({
                   opacity: panel.visible ? 1 : 0,
                   transform: panel.visible ? "scale(1)" : "scale(0.96)",
                   transition: panel.panelTransition,
-                  transformOrigin:
-                    (coverScroll && growsUpRef.current) || panel.placement.startsWith("top")
-                      ? "bottom left"
-                      : "top left",
+                  transformOrigin: opensUpRef.current ? "bottom left" : "top left",
                   ...dragProps.style,
                 },
                 onPointerDown: dragProps.onPointerDown,
@@ -1336,22 +1158,12 @@ function FloatingSelectCore({
               paddingVertical={0}
               paddingBottom={panel.coverCornerInset || 0}
             >
-              {echoed ? (
-                <TriggerEchoRow
-                  sourceRef={panel.triggerRef}
-                  source={selectedOption?.label ?? placeholder}
-                  onPress={() => setOpen(false)}
-                  presentational
-                />
-              ) : null}
               <ScrollArrow
                 direction="up"
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowUp}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
-                topOffset={
-                  echoed ? (panel.triggerRef.current?.getBoundingClientRect().height ?? 0) : 0
-                }
+                band={arrowBand}
               />
               {groupLabel && (
                 <GroupHeader color={textColor} paddingHorizontal={knobProps.panelPadding.padding}>
@@ -1402,6 +1214,7 @@ function FloatingSelectCore({
                 scrollRef={panel.refs.floating}
                 visible={panel.arrowDown}
                 arrowScrollDirRef={panel.arrowScrollDirRef}
+                band={arrowBand}
               />
             </YStack>
           </FloatingFocusManager>
@@ -1629,7 +1442,7 @@ function NativeSelectCore({
             >
               {option.label}
             </Text>
-            {selected && <CheckIcon size={14} weight="bold" color={markColor} />}
+            {selected && <CheckGlyph />}
           </View>
         );
         if (isWeb) return row;

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -21,7 +21,7 @@ import {
 } from "react-native";
 import { platform } from "@multiplatform.one/platform";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import { useResolvedKnobs, Text } from "@multiplatform.one/theme";
+import { useResolvedKnobs, Text, overlayScrim } from "@multiplatform.one/theme";
 import { View, XStack, YStack, useTheme, useThemeName } from "tamagui";
 import { ArrowRightIcon } from "@phosphor-icons/react";
 import { IconButton } from "../../Button";
@@ -159,7 +159,7 @@ export function OsDateTimeSheet({
             right={0}
             bottom={0}
             left={0}
-            backgroundColor="$shadow6"
+            backgroundColor={overlayScrim}
           />
           <YStack
             testID="os-date-time-sheet-unavailable"
@@ -205,7 +205,7 @@ export function OsDateTimeSheet({
       */}
       <RNView style={[styles.modalOverlay, { paddingBottom: keyboardInset }]}>
         <Pressable style={StyleSheet.absoluteFill} onPress={onCancel}>
-          <View pointerEvents="none" flex={1} backgroundColor="$shadow6" />
+          <View pointerEvents="none" flex={1} backgroundColor={overlayScrim} />
         </Pressable>
         <Pressable onPress={(e) => e.stopPropagation()}>
           <YStack

package/src/index.ts

@@ -310,6 +310,8 @@ export { PanelHeader } from "./FloatingPanel/PanelHeader";
 export { PanelPortal } from "./FloatingPanel/PanelPortal";
 export type { PanelPortalProps } from "./FloatingPanel/PanelPortal";
 export { containsAcrossPanels } from "./shared/panelPortal";
+export { CheckGlyph } from "./shared/CheckGlyph";
+export { useInPanelSheet } from "./FloatingPanel/echoContext";
 export type {
   FloatingPanelProps,
   PanelWidthMode,
@@ -317,7 +319,6 @@ export type {
   UseFloatingPanelReturn,
 } from "./FloatingPanel";
 export type { PanelWidth } from "./FloatingPanel/panelWidth";
-export type { IconEcho } from "./FloatingPanel/iconEcho";
 
 // ── Adaptive Popup (Dialog / Drawer on desktop, Sheet on mobile) ─
 export { AdaptivePopup, pickAdaptivePopupFace } from "./AdaptivePopup";

package/src/shared/CheckGlyph.tsx

@@ -0,0 +1,12 @@
+import { CheckIcon } from "@phosphor-icons/react";
+import { menuRowCheckGlyph, type MenuRowGlyph, useMenuRowCheckInk } from "@multiplatform.one/theme";
+
+/**
+ * The check on a checked menu or picker row (LC-262, FZ-8557): the theme's
+ * `menuRowCheckGlyph` recipe in the check ink. A row with an icon passes
+ * `menuRowIconGlyph`, so the check takes the icons' stroke (FZ-8557 r3). Components draws the same glyph through its own twin, and a spec keeps the two equal.
+ */
+export function CheckGlyph({ glyph = menuRowCheckGlyph }: { glyph?: MenuRowGlyph }) {
+  const ink = useMenuRowCheckInk();
+  return <CheckIcon size={glyph.size} weight={glyph.weight} color={ink} />;
+}

package/src/shared/floatingList.spec.tsx

@@ -7,7 +7,13 @@ import { Preset, Surface } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
-import { ScrollArrow } from "./floatingList";
+import {
+  growOnScroll,
+  placeCheckedOnField,
+  ScrollArrow,
+  scrollArrowBand,
+  scrollArrowThreshold,
+} from "./floatingList";
 
 afterEach(cleanup);
 
@@ -59,3 +65,150 @@ describe("ScrollArrow design-law (MPO-60)", () => {
     expect(style).not.toMatch(/160ms/);
   });
 });
+
+describe("ScrollArrow band (FZ-8557)", () => {
+  it("is an opaque band half a menu row tall, never a fade over rows", () => {
+    const result = renderArrow();
+    const well = result.container.querySelector("[data-mpo-scroll-arrow]") as HTMLElement | null;
+    expect(well?.getAttribute("data-band")).toBe(String(scrollArrowBand(36)));
+    expect(well?.getAttribute("style") ?? "").not.toMatch(/gradient/);
+  });
+});
+
+/** The bands a fit shows: an up band once it has scrolled, a down band while rows remain below. */
+function bandsOf(
+  fit: { top: number; height: number; scrollTop: number },
+  list: { contentHeight: number; band: number },
+) {
+  const bands: [number, number][] = [];
+  if (fit.scrollTop > scrollArrowThreshold) bands.push([fit.top, fit.top + list.band]);
+  if (fit.scrollTop + fit.height < list.contentHeight - scrollArrowThreshold)
+    bands.push([fit.top + fit.height - list.band, fit.top + fit.height]);
+  return bands;
+}
+
+describe("placeCheckedOnField: the checked row opens on the field (FZ-8557 r3)", () => {
+  const rowHeight = 36;
+  const firstRowTop = 4;
+  const band = 18;
+  const contentOf = (count: number) => firstRowTop * 2 + count * rowHeight;
+  const place = (fieldBottom: number, row: number, count = 40, boundsBottom = 1356) =>
+    placeCheckedOnField({
+      fieldTop: fieldBottom - rowHeight,
+      fieldBottom,
+      rowTop: firstRowTop + row * rowHeight,
+      rowHeight,
+      contentHeight: contentOf(count),
+      boundsTop: 10,
+      boundsBottom,
+      band,
+    });
+  const checkedRect = (fit: { top: number; scrollTop: number }, row: number) => {
+    const top = fit.top + firstRowTop + row * rowHeight - fit.scrollTop;
+    return { top, bottom: top + rowHeight };
+  };
+
+  it("a list that fits shows every row with no scrolling (the iPad's 37 rows)", () => {
+    const fit = place(700, 20, 37);
+    expect(fit.scrollTop).toBe(0);
+    expect(fit.height).toBe(contentOf(37));
+    expect(fit.top).toBeGreaterThanOrEqual(10);
+    expect(fit.top + fit.height).toBeLessThanOrEqual(1356);
+  });
+
+  it("a short list by the edge slides the least distance instead of scrolling (select-low-390)", () => {
+    // The phone's low field (735 to 775) with Denver (row 3) of 7 checked.
+    const low = placeCheckedOnField({
+      fieldTop: 735,
+      fieldBottom: 775,
+      rowTop: firstRowTop + 3 * rowHeight,
+      rowHeight,
+      contentHeight: contentOf(7),
+      boundsTop: 10,
+      boundsBottom: 834,
+      band,
+    });
+    expect(low.scrollTop).toBe(0);
+    expect(low.height).toBe(contentOf(7));
+    expect(low.top + low.height).toBe(834);
+  });
+
+  it("where it fits on the field, the checked row centres on it", () => {
+    const fit = place(400, 3, 7);
+    expect(checkedRect(fit, 3).bottom).toBe(400);
+    expect(fit.scrollTop).toBe(0);
+  });
+
+  it("a list taller than the screen keeps the checked row on the field and clips at the safe edges", () => {
+    const fit = place(1115, 38, 60);
+    expect(checkedRect(fit, 38).bottom).toBe(1115);
+    expect(fit.top).toBe(10);
+    expect(fit.scrollTop).toBeGreaterThan(0);
+  });
+
+  it("a scrolling list's far edge reaches the safe edge: no whole-row trim", () => {
+    for (const fieldBottom of [200, 517, 900, 1300]) {
+      for (const row of [0, 10, 30, 59]) {
+        const fit = place(fieldBottom, row, 60);
+        const content = contentOf(60);
+        if (fit.scrollTop > scrollArrowThreshold) expect(fit.top, `${fieldBottom}/${row}`).toBe(10);
+        if (fit.scrollTop + fit.height < content - scrollArrowThreshold)
+          expect(fit.top + fit.height, `${fieldBottom}/${row}`).toBe(1356);
+      }
+    }
+  });
+
+  it("across fields and rows, the checked row overlaps the field and no band covers it", () => {
+    for (let fieldBottom = 60; fieldBottom <= 1356; fieldBottom += 13) {
+      for (const count of [7, 40, 60]) {
+        for (const row of [0, 1, 5, 20, 30, 39].filter((r) => r < count)) {
+          const fit = place(fieldBottom, row, count);
+          const checked = checkedRect(fit, row);
+          const label = `field ${fieldBottom} row ${row} of ${count}`;
+          expect(fit.top, label).toBeGreaterThanOrEqual(10);
+          expect(fit.top + fit.height, label).toBeLessThanOrEqual(1356);
+          expect(checked.top, label).toBeGreaterThanOrEqual(fit.top);
+          expect(checked.bottom, label).toBeLessThanOrEqual(fit.top + fit.height);
+          if (contentOf(count) > 1346) {
+            const overlap =
+              Math.min(checked.bottom, fieldBottom) - Math.max(checked.top, fieldBottom - 40);
+            expect(overlap, label).toBeGreaterThan(0);
+          }
+          for (const [bandTop, bandBottom] of bandsOf(fit, {
+            contentHeight: contentOf(count),
+            band,
+          })) {
+            const shared = Math.min(checked.bottom, bandBottom) - Math.max(checked.top, bandTop);
+            expect(shared, label).toBeLessThanOrEqual(0);
+          }
+        }
+      }
+    }
+  });
+});
+
+describe("growOnScroll: a short scrolling panel grows toward the safe edge (FZ-8557 r3)", () => {
+  const bounds = { boundsTop: 10, boundsBottom: 1356, contentHeight: 2000 };
+
+  it("scrolling down lifts the top edge with the rows until it meets the safe edge", () => {
+    const grown = growOnScroll({ top: 600, height: 756, scrollTop: 120, ...bounds });
+    expect(grown).toEqual({ top: 480, height: 876, scrollTop: 0 });
+    const full = growOnScroll({ top: 600, height: 756, scrollTop: 900, ...bounds });
+    expect(full.top).toBe(10);
+    expect(full.top - full.scrollTop).toBe(600 - 900);
+  });
+
+  it("scrolling up drops a short bottom edge with the rows", () => {
+    const grown = growOnScroll({ top: 10, height: 600, scrollTop: 1300, ...bounds });
+    expect(grown.top).toBe(10);
+    expect(grown.scrollTop).toBe(1300);
+    expect(grown.top + grown.height).toBe(Math.min(1356, 10 - 1300 + 2000));
+  });
+
+  it("a panel at rest stays as it is, and one already at both edges never shrinks", () => {
+    const rest = { top: 118, height: 1238, scrollTop: 0 };
+    expect(growOnScroll({ ...rest, ...bounds })).toEqual(rest);
+    const full = { top: 10, height: 1346, scrollTop: 400 };
+    expect(growOnScroll({ ...full, ...bounds })).toEqual(full);
+  });
+});