@multiplatform.one/forms 7.7.6 → 7.10.0

package/src/FieldLayout.stories.tsx

@@ -1,10 +1,36 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
-import { Input as TamaguiInput, Paragraph, YStack, XStack } from "tamagui";
+import { useState } from "react";
+import { Preset } from "@multiplatform.one/theme";
+import { Paragraph, YStack, XStack } from "tamagui";
 import { Button } from "./Button";
 import { Form } from "./Form";
 import { Field, FieldLayout } from "./fieldLayout";
+import { Input } from "./fields/Input";
+import { Input as InputParts } from "./InputParts";
+import { Checkbox } from "./fields/Checkbox";
+
+/**
+ * FieldLayout wraps a CONTROL, so these stories cannot mount the house `Input`
+ * field — it brings its own FieldLayout. `InputParts.Box` is the house chrome
+ * underneath that field, and it is the part that consumes the knobs.
+ */
+function Control(props: {
+  id?: string;
+  placeholder?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  secureTextEntry?: boolean;
+}) {
+  return (
+    <InputParts>
+      <InputParts.Box>
+        <InputParts.Area {...props} />
+      </InputParts.Box>
+    </InputParts>
+  );
+}
 
 const meta: Meta<typeof FieldLayout> = {
   title: "Forms/FieldLayout",
@@ -33,12 +59,49 @@ export const Basic: Story = {
   render: (args) => (
     <YStack maxWidth={360}>
       <FieldLayout {...args}>
-        <TamaguiInput id={args.id} placeholder="you@example.com" />
+        <Control id={args.id} placeholder="you@example.com" />
       </FieldLayout>
     </YStack>
   ),
 };
 
+/** Shared message order with real controls, including the inline checkbox row. */
+export const MessageOrder: Story = {
+  render: () => {
+    const Example = () => {
+      const [showErrors, setShowErrors] = useState(false);
+      return (
+        <YStack gap="$4" width="100%" maxWidth={480}>
+          <Input
+            id="message-top"
+            label="Contact"
+            helperText="Use an address where we can reach you"
+            error={showErrors ? "Enter a contact address" : undefined}
+          />
+          <Preset overrides={{ fieldLabelPlacement: "side" }}>
+            <Input
+              id="message-side"
+              label="Office"
+              helperText="Use the office name shown on your account"
+              error={showErrors ? "Enter your office name" : undefined}
+            />
+          </Preset>
+          <Checkbox
+            id="message-inline"
+            label="Accept terms"
+            helperText="Read the terms before continuing"
+            error={showErrors ? "Accept the terms to continue" : undefined}
+          />
+          <Button onPress={() => setShowErrors((shown) => !shown)}>
+            {showErrors ? "Show helpers" : "Show validation"}
+          </Button>
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};
+
 export const ErrorStates: Story = {
   render: () => (
     <YStack gap="$6" maxWidth={360}>
@@ -49,7 +112,7 @@ export const ErrorStates: Story = {
         // DG-COPY-02: error copy states the rule broken — never "invalid"/"please"/"error".
         error="Value must use letters only"
       >
-        <TamaguiInput id="fl-err-string" />
+        <Control id="fl-err-string" />
       </FieldLayout>
       <FieldLayout
         id="fl-err-bool"
@@ -57,7 +120,7 @@ export const ErrorStates: Story = {
         helperText="Helper should remain visible"
         error={true}
       >
-        <TamaguiInput id="fl-err-bool" />
+        <Control id="fl-err-bool" />
       </FieldLayout>
       <FieldLayout
         id="fl-err-empty"
@@ -65,7 +128,7 @@ export const ErrorStates: Story = {
         helperText="Empty string should act as no message"
         error=""
       >
-        <TamaguiInput id="fl-err-empty" />
+        <Control id="fl-err-empty" />
       </FieldLayout>
     </YStack>
   ),
@@ -75,13 +138,13 @@ export const AnatomyEdgeCases: Story = {
   render: () => (
     <YStack gap="$6" maxWidth={360}>
       <FieldLayout id="fl-required" label="Required field" required>
-        <TamaguiInput id="fl-required" />
+        <Control id="fl-required" />
       </FieldLayout>
       <FieldLayout id="fl-nolabel" helperText="No label means compact $1 gap">
-        <TamaguiInput id="fl-nolabel" />
+        <Control id="fl-nolabel" />
       </FieldLayout>
       <FieldLayout id="fl-compact" label="Compact spacing" compactSpacing helperText="Compact gap">
-        <TamaguiInput id="fl-compact" />
+        <Control id="fl-compact" />
       </FieldLayout>
       <FieldLayout
         id="fl-node-label"
@@ -92,14 +155,14 @@ export const AnatomyEdgeCases: Story = {
           </XStack>
         }
       >
-        <TamaguiInput id="fl-node-label" />
+        <Control id="fl-node-label" />
       </FieldLayout>
       <FieldLayout
         id="fl-long"
         label="Long messages"
         error="This validation message is extremely long and keeps going to make sure long validation copy wraps correctly under the control without pushing the layout sideways or clipping any of its content at narrow widths"
       >
-        <TamaguiInput id="fl-long" />
+        <Control id="fl-long" />
       </FieldLayout>
     </YStack>
   ),
@@ -125,7 +188,7 @@ export const FieldWrapper: Story = {
                   helperText="TanStack Field wrapper"
                   field={field as any}
                 >
-                  <TamaguiInput
+                  <Control
                     id="field-username"
                     value={String(field.state.value ?? "")}
                     onChangeText={(text) => field.handleChange(text)}
@@ -167,7 +230,7 @@ export const FieldRequiredValidator: Story = {
             >
               {(field) => (
                 <FieldLayout id="field-nickname" label="Nickname" required field={field as any}>
-                  <TamaguiInput
+                  <Control
                     id="field-nickname"
                     value={String(field.state.value ?? "")}
                     onChangeText={(text) => field.handleChange(text)}

package/src/Fieldset.stories.tsx

@@ -1,14 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Input as TamaguiInput, YStack } from "tamagui";
-import { FieldLayout } from "./fieldLayout";
+import { YStack } from "tamagui";
 import { Fieldset, FormSectionStack } from "./FormSection";
+import { Input } from "./fields/Input";
 
 function Field({ id, label, ...rest }: { id: string; label: string; secureTextEntry?: boolean }) {
-  return (
-    <FieldLayout id={id} label={label}>
-      <TamaguiInput id={id} placeholder={label} {...rest} />
-    </FieldLayout>
-  );
+  return <Input id={id} label={label} placeholder={label} {...rest} />;
 }
 
 const meta: Meta<typeof Fieldset> = {

package/src/FloatingPanel/FloatingPanel.native.spec.tsx

@@ -57,6 +57,60 @@ function panel(open: boolean) {
 }
 
 describe("FloatingPanel native presentation lifecycle", () => {
+  it("keeps full-field triggers stretched and allows content-sized composite adornments", () => {
+    for (const triggerSizing of [undefined, "content"] as const) {
+      const result = renderWithProviders(
+        <FloatingPanel
+          open={false}
+          onOpenChange={onOpenChange}
+          trigger={<Text>Country</Text>}
+          triggerSizing={triggerSizing}
+          triggerA11y={{ label: "Country code" }}
+        >
+          <Text>row</Text>
+        </FloatingPanel>,
+      );
+      const trigger = result.getByRole("button", { name: "Country code" });
+      expect(getComputedStyle(trigger).width).toBe(triggerSizing === "content" ? "" : "100%");
+      expect(getComputedStyle(trigger).alignSelf).toBe("stretch");
+      expect(getComputedStyle(trigger.parentElement!).width).toBe(
+        triggerSizing === "content" ? "" : "100%",
+      );
+      result.unmount();
+    }
+  });
+
+  it("composes native readiness with entrance and ignores late closed or unmounted events", () => {
+    const onNativeShow = vi.fn();
+    const example = (open: boolean) => (
+      <FloatingPanel
+        open={open}
+        onOpenChange={onOpenChange}
+        onNativeShow={onNativeShow}
+        trigger={<Text>Pick</Text>}
+      >
+        <Text>row</Text>
+      </FloatingPanel>
+    );
+    const result = renderWithProviders(example(true));
+    expect(Animated.timing).toHaveBeenCalledTimes(1);
+    expect(onNativeShow).not.toHaveBeenCalled();
+    const shown = modal.onShow;
+    act(() => shown?.());
+    expect(onNativeShow).toHaveBeenCalledTimes(1);
+    expect(Animated.timing).toHaveBeenCalledTimes(1);
+    result.rerender(example(false));
+    act(() => shown?.());
+    expect(onNativeShow).toHaveBeenCalledTimes(1);
+    result.rerender(example(true));
+    const nextShown = modal.onShow;
+    act(() => nextShown?.());
+    expect(onNativeShow).toHaveBeenCalledTimes(2);
+    result.unmount();
+    act(() => nextShown?.());
+    expect(onNativeShow).toHaveBeenCalledTimes(2);
+  });
+
   it("enters without onShow and ignores onShow for the same presentation", () => {
     renderWithProviders(panel(true));
     expect(Animated.timing).toHaveBeenCalledTimes(1);

package/src/FloatingPanel/FloatingPanel.spec.tsx

@@ -40,12 +40,16 @@ function Harness({
   sheet,
   onOpenChange,
   extra,
+  openOn,
+  sizing,
 }: {
   trigger: ReactNode;
   disabled?: boolean;
   sheet?: boolean;
   onOpenChange?: (open: boolean) => void;
   extra?: ReactNode;
+  openOn?: "press" | "contextmenu";
+  sizing?: "grow" | "fill";
 }) {
   const [open, setOpen] = useState(false);
   return (
@@ -64,6 +68,8 @@ function Harness({
         trigger={trigger}
         disabled={disabled}
         sheet={sheet}
+        openOn={openOn}
+        sizing={sizing}
       >
         <Text>panel body</Text>
         {extra}
@@ -79,6 +85,75 @@ const isOpen = (result: { container: HTMLElement }) =>
 
 const floatingViewport = () => document.querySelector('[data-testid="floating-panel-viewport"]');
 
+describe("FloatingPanel nested actions", () => {
+  it("does not require a marked DOM button to stop propagation", () => {
+    const action = vi.fn();
+    const onOpenChange = vi.fn();
+    const result = renderWithProviders(
+      <Harness
+        onOpenChange={onOpenChange}
+        trigger={
+          <button type="button" data-floating-panel-action="true" onClick={action}>
+            Clear selection
+          </button>
+        }
+      />,
+    );
+    fireEvent.click(result.getByRole("button", { name: "Clear selection" }), { detail: 0 });
+    expect(action).toHaveBeenCalledOnce();
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  for (const sheet of [true, false]) {
+    for (const activation of ["pointer", "keyboard"] as const) {
+      it(`lets a marked ${activation} action run without opening ${sheet ? "sheet" : "float"}`, () => {
+        const action = vi.fn();
+        const onOpenChange = vi.fn();
+        const result = renderWithProviders(
+          <Harness
+            sheet={sheet}
+            onOpenChange={onOpenChange}
+            trigger={
+              <Button
+                data-floating-panel-action="true"
+                onPress={(event) => {
+                  event.stopPropagation();
+                  action();
+                }}
+              >
+                Clear selection
+              </Button>
+            }
+          />,
+        );
+        const button = result.getByRole("button", { name: "Clear selection" });
+        if (activation === "pointer") pointerPress(button);
+        else {
+          fireEvent.keyDown(button, { key: "Enter" });
+          fireEvent.keyUp(button, { key: "Enter" });
+        }
+        expect(action).toHaveBeenCalledOnce();
+        expect(onOpenChange).not.toHaveBeenCalled();
+        expect(isOpen(result)).toBe(false);
+      });
+    }
+
+    it(`preserves context-menu opening from a marked action in ${sheet ? "sheet" : "float"}`, () => {
+      const onOpenChange = vi.fn();
+      const result = renderWithProviders(
+        <Harness
+          sheet={sheet}
+          openOn="contextmenu"
+          onOpenChange={onOpenChange}
+          trigger={<Button data-floating-panel-action="true">Context action</Button>}
+        />,
+      );
+      fireEvent.contextMenu(result.getByRole("button", { name: "Context action" }));
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+  }
+});
+
 /** The DEEPEST node carrying the whole label — several ancestors report the
  *  same `textContent`, and pressing one of those would sidestep the very
  *  swallow these cases exist to catch. */
@@ -260,4 +335,38 @@ describe("FloatingPanel trigger — floating mode", () => {
       expect(document.activeElement).toBe(trigger);
     });
   });
+
+  it("disconnects fill content observation on close and unmount", async () => {
+    const observers: { target: Element; disconnected: boolean }[] = [];
+    class TrackingResizeObserver {
+      private tracked?: { target: Element; disconnected: boolean };
+      observe(target: Element) {
+        if (target.parentElement?.getAttribute("data-testid") !== "floating-panel-viewport") return;
+        this.tracked = { target, disconnected: false };
+        observers.push(this.tracked);
+      }
+      unobserve() {}
+      disconnect() {
+        if (this.tracked) this.tracked.disconnected = true;
+      }
+    }
+    vi.stubGlobal("ResizeObserver", TrackingResizeObserver);
+    const result = renderWithProviders(
+      <Harness sizing="fill" trigger={<Button>Open Panel</Button>} />,
+    );
+    try {
+      const trigger = result.container.querySelector("[role='button']") as HTMLElement;
+      pointerPress(trigger);
+      await waitFor(() => expect(observers.some((observer) => !observer.disconnected)).toBe(true));
+      fireEvent.keyDown(document, { key: "Escape" });
+      await waitFor(() => expect(observers.every((observer) => observer.disconnected)).toBe(true));
+      pointerPress(trigger);
+      await waitFor(() => expect(observers.some((observer) => !observer.disconnected)).toBe(true));
+      result.unmount();
+      expect(observers.every((observer) => observer.disconnected)).toBe(true);
+    } finally {
+      result.unmount();
+      vi.unstubAllGlobals();
+    }
+  });
 });

package/src/FloatingPanel/index.native.tsx

@@ -76,6 +76,7 @@ export {
 } from "./useFloatingPanel";
 export type { UseFloatingPanelOptions, UseFloatingPanelReturn } from "./useFloatingPanel";
 export type { FloatingPanelProps } from "./index";
+export { floatingPanelActionProps, isNestedPanelAction } from "./nestedAction";
 
 /** Native never has a >sm web viewport; AdaptivePopup uses this to pick Sheet mode. */
 export function useViewportGtSm() {
@@ -103,8 +104,10 @@ const enterDuration = 280;
 export function FloatingPanel({
   open,
   onOpenChange,
+  onNativeShow,
   trigger,
   triggerEnd,
+  triggerSizing = "stretch",
   children,
   scrollable,
   disabled,
@@ -355,7 +358,13 @@ export function FloatingPanel({
 
   return (
     <>
-      <RNView style={{ flexDirection: "row", alignItems: "center", width: "100%" }}>
+      <RNView
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          width: triggerSizing === "content" ? undefined : "100%",
+        }}
+      >
         <Pressable
           {...(isContextMenu
             ? { onLongPress: handleTriggerLongPress, delayLongPress: 500 }
@@ -368,18 +377,22 @@ export function FloatingPanel({
             ? { accessibilityValue: { text: triggerA11y.value } }
             : undefined)}
           {...(triggerA11y?.hint ? { accessibilityHint: triggerA11y.hint } : undefined)}
-          // Stretch to the cell/row width — content-sized triggers (~70pt) make
-          // most of the edit box look tappable but miss the Pressable.
+          // Whole-field triggers stretch; composite adornments hug their
+          // content so sibling inputs retain their editable space.
           style={{
-            flex: 1,
+            flex: triggerSizing === "content" ? undefined : 1,
             minWidth: 0,
             alignSelf: "stretch",
-            width: "100%",
+            width: triggerSizing === "content" ? undefined : "100%",
             opacity: disabled ? 0.5 : 1,
           }}
         >
           {/* Own the hit target — see file header for why pointerEvents="none". */}
-          <RNView pointerEvents="none" collapsable={false} style={{ width: "100%" }}>
+          <RNView
+            pointerEvents="none"
+            collapsable={false}
+            style={{ width: triggerSizing === "content" ? undefined : "100%" }}
+          >
             {trigger}
           </RNView>
         </Pressable>
@@ -391,7 +404,11 @@ export function FloatingPanel({
         animationType="fade"
         statusBarTranslucent
         onRequestClose={close}
-        onShow={enter}
+        onShow={() => {
+          if (!activeRef.current) return;
+          enter();
+          onNativeShow?.();
+        }}
       >
         {/*
           A plain padded column, not KeyboardAvoidingView: inside a Modal the

package/src/FloatingPanel/index.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, UIEvent } from "react";
+import type { ReactNode, RefObject, UIEvent } from "react";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import {
   OVERLAY_ATTACH_GAP,
@@ -15,6 +15,9 @@ import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
 import { useFloatingPanel, panelTransition, panelViewportPadding } from "./useFloatingPanel";
 import type { PanelWidthMode } from "./useFloatingPanel";
 import { zIndex } from "../shared/zIndex";
+import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
+
+export { floatingPanelActionProps, isNestedPanelAction } from "./nestedAction";
 
 // Re-export hook for Select / Combobox / external consumers
 export {
@@ -37,6 +40,10 @@ export type {
 export interface FloatingPanelProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** Native only: the modal is presented and its inputs can receive focus. */
+  onNativeShow?: () => void;
+  /** Suppress delayed trigger focus when a consumer handles close focus itself. Web only. */
+  skipReturnFocusRef?: RefObject<boolean>;
   trigger: ReactNode;
   /**
    * Optional control rendered beside the trigger but OUTSIDE the native press
@@ -120,6 +127,11 @@ export interface FloatingPanelProps {
    * the strings must live on the Pressable itself. Web ignores this.
    */
   triggerA11y?: { label?: string; value?: string; hint?: string };
+  /**
+   * Stretch keeps the whole field pressable by default. Content lets an
+   * adornment trigger hug its content inside a composite field.
+   */
+  triggerSizing?: "stretch" | "content";
   /**
    * How the trigger opens the panel. `"press"` (default) is click/tap.
    * `"contextmenu"` is the ContextMenu gesture: web `contextmenu` (right-click
@@ -231,8 +243,10 @@ export function FloatingPanel(props: FloatingPanelProps) {
 function FloatingPanelSheet({
   open,
   onOpenChange,
+  skipReturnFocusRef,
   trigger,
   triggerEnd,
+  triggerSizing = "stretch",
   children,
   scrollable,
   disabled,
@@ -260,7 +274,7 @@ function FloatingPanelSheet({
   // DG-A11Y-04 / Axiom 7: Sheet has no focus scope — move focus into the
   // frame on open, trap Tab while open, return focus to the trigger on close.
   const sheetFrameRef = useRef<HTMLElement | null>(null);
-  useSheetModalFocus(open, sheetFrameRef);
+  useSheetModalFocus(open, sheetFrameRef, skipReturnFocusRef);
   useKeyboardFocusIntoPanel(open, sheetFrameRef);
 
   const framePadding = contentPadding === "none" ? "$0" : knobProps.panelPadding.padding;
@@ -283,7 +297,10 @@ function FloatingPanelSheet({
   // shut the sheet it had just opened. Nothing is lost: the sheet is modal, so
   // its overlay covers the trigger and the toggle could only ever have run
   // with `open === false`.
-  const openFromTrigger = () => handleOpenChange(true);
+  const openFromTrigger = (event?: PanelActionEvent) => {
+    if (event && isNestedPanelAction(event)) return;
+    handleOpenChange(true);
+  };
   const isContextMenu = openOn === "contextmenu";
   const triggerActivation = isWeb
     ? isContextMenu
@@ -298,9 +315,13 @@ function FloatingPanelSheet({
 
   return (
     <>
-      <View flexDirection="row" alignItems="center" width="100%">
+      <View
+        flexDirection="row"
+        alignItems="center"
+        width={triggerSizing === "content" ? "auto" : "100%"}
+      >
         <View
-          flex={1}
+          flex={triggerSizing === "content" ? undefined : 1}
           minWidth={0}
           {...(isContextMenu ? undefined : { onPress: openFromTrigger })}
           cursor={disabled ? "not-allowed" : "pointer"}
@@ -361,6 +382,7 @@ function FloatingPanelSheet({
 function FloatingPanelWeb({
   open,
   onOpenChange,
+  skipReturnFocusRef,
   trigger,
   children,
   disabled,
@@ -379,6 +401,7 @@ function FloatingPanelWeb({
   const growDownOnlyRef = useRef(false);
   const lastScrollTopRef = useRef(0);
   const keyboardOpenRef = useRef(false);
+  const contentRef = useRef<HTMLElement | null>(null);
 
   const repositionFnRef = useRef<(() => void) | null>(null);
 
@@ -405,7 +428,7 @@ function FloatingPanelWeb({
   // Escape (or outside click on empty space) closes the panel while focus is
   // inside it, focus falls to <body>. Return it to the pre-open element
   // (the trigger's focusable). Deliberate focus moves elsewhere are kept.
-  useReturnFocusOnClose(open);
+  useReturnFocusOnClose(open, skipReturnFocusRef);
   useKeyboardFocusIntoPanel(open && panel.mounted, panel.refs.floating, keyboardOpenRef);
   useEffect(() => {
     if (!open) keyboardOpenRef.current = false;
@@ -573,6 +596,29 @@ function FloatingPanelWeb({
     repositionOverlay();
   }, [open, panel.mounted, repositionOverlay, panel.y]);
 
+  useLayoutEffect(() => {
+    const content = contentRef.current;
+    if (!open || !panel.mounted || !isFill || !content || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    // Matching the trigger width can rewrap content after the panel's first
+    // height measurement. Observe the content, not the clamped viewport, so a
+    // later open or result change uses its actual height without a resize loop.
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      if (frame) cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        repositionOverlay();
+      });
+    });
+    observer.observe(content);
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [open, panel.mounted, isFill, repositionOverlay]);
+
   const handleScroll = useCallback(
     (event: UIEvent) => {
       const el = event.target as HTMLElement;
@@ -633,8 +679,8 @@ function FloatingPanelWeb({
   // (`p-results/trigger-slot/detail.json`): a pointer click carries the click
   // count, `element.click()` and native keyboard activation carry 0.
   const openFromSynthesizedClick = useCallback(
-    (event: { detail: number }) => {
-      if (disabled || isContextMenu || event.detail !== 0) return;
+    (event: { detail: number } & PanelActionEvent) => {
+      if (disabled || isContextMenu || event.detail !== 0 || isNestedPanelAction(event)) return;
       // detail 0 is keyboard/programmatic activation (LC-50). Count it as
       // keyboard-origin so the first inner control rings (LC-71).
       keyboardOpenRef.current = true;
@@ -652,14 +698,26 @@ function FloatingPanelWeb({
     [disabled, onOpenChange],
   );
 
+  const referenceProps = getReferenceProps({
+    ref: panel.setReferenceRef,
+    onClickCapture: openFromSynthesizedClick,
+    ...(isContextMenu ? { onContextMenu: openFromContextMenu } : {}),
+  });
+  // Guard the composed floating-ui openers, after hook handlers are merged.
+  // Declining leaves each action's own events and focus defaults intact.
+  for (const name of ["onMouseDown", "onClick", "onKeyDown", "onKeyUp"] as const) {
+    const handler = referenceProps[name];
+    if (typeof handler === "function") {
+      referenceProps[name] = (event: PanelActionEvent) => {
+        if (!isNestedPanelAction(event)) handler(event);
+      };
+    }
+  }
+
   return (
     <>
       <View
-        {...getReferenceProps({
-          ref: panel.setReferenceRef,
-          onClickCapture: openFromSynthesizedClick,
-          ...(isContextMenu ? { onContextMenu: openFromContextMenu } : {}),
-        })}
+        {...referenceProps}
         cursor={disabled ? "not-allowed" : "pointer"}
         opacity={disabled ? 0.5 : 1}
         // The cover contract is stated as a relation between the panel's top
@@ -693,6 +751,14 @@ function FloatingPanelWeb({
               transformOrigin: panelTransformOrigin(panel.placement),
             },
             onScroll: handleScroll,
+            onTransitionEnd: (event) => {
+              if (
+                event.target === event.currentTarget &&
+                (event.propertyName === "height" || event.propertyName === "max-height")
+              ) {
+                panel.updateArrows(event.currentTarget);
+              }
+            },
           })}
           data-testid="floating-panel-viewport"
           data-fp-panel=""
@@ -714,6 +780,7 @@ function FloatingPanelWeb({
             arrowScrollDirRef={panel.arrowScrollDirRef}
           />
           <View
+            ref={contentRef as any}
             {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
             {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
           >