@astryxdesign/core 0.4.3 → 0.4.4-canary.0f4d45f

package/dist/BottomSheet/snapOffsets.js

@@ -0,0 +1,130 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file snapOffsets.ts
+ * @input Pure geometry helpers — no React, no DOM.
+ * @output Converts snap points to translateY offsets for the sheet surface.
+ * @position Internal to BottomSheet; consumed by useSheetGestures, tested by
+ *   snapOffsets.test.ts.
+ *
+ * A detent is represented as an offset in px from the fully-open position
+ * (0 = fully open, larger = more collapsed). The panel may render that offset
+ * as a translate or as a reduction in layout height. These
+ * helpers turn snap points into the shared offset list; they are pure so the
+ * geometry can be unit-tested without a DOM.
+ */
+
+/**
+ * Detents whose resting offsets land within this many px of each other are
+ * treated as the same stop (the taller one wins). Stops the sheet from having
+ * two near-identical rest positions — e.g. when a content-hugging height sits
+ * a hair away from a fractional snap point.
+ */
+export const DETENT_DEDUP_PX = 48;
+
+/** Resolve snap points given as viewport fractions (0, 1] to px heights. */
+export function snapFractionsToHeights(fractions, viewportPx) {
+  return fractions.filter(f => f > 0 && f <= 1).map(f => f * viewportPx);
+}
+
+/**
+ * Given the sheet's full height (px, as rendered fully open) and a set of
+ * candidate detent *visible heights* (px), return the resting offsets from
+ * fully-open, ascending and de-duplicated.
+ *
+ * - `0` (fully open) is always the first detent.
+ * - Only heights strictly shorter than the sheet become collapsed detents; a
+ *   height >= the sheet is already covered by the fully-open stop.
+ * - Offsets closer than `dedupPx` collapse to the smaller (taller) offset, so
+ *   near-identical detents — e.g. a hug height ≈ a snap point — become one stop.
+ */
+export function computeDetentOffsets(sheetHeight, detentHeights, dedupPx = DETENT_DEDUP_PX) {
+  const collapsed = detentHeights.filter(h => h > 0 && h < sheetHeight).map(h => sheetHeight - h);
+  const ascending = [0, ...collapsed].sort((a, b) => a - b);
+  const deduped = [];
+  for (const offset of ascending) {
+    const last = deduped[deduped.length - 1];
+    if (last === undefined || offset - last >= dedupPx) {
+      deduped.push(offset);
+    }
+  }
+  return deduped;
+}
+
+/** Nearest value in `offsets` to `value` (offsets must be non-empty). */
+export function nearestOffset(value, offsets) {
+  return offsets.reduce((best, o) => Math.abs(o - value) < Math.abs(best - value) ? o : best, offsets[0]);
+}
+
+/**
+ * Minimum scrim opacity at the peek detent. The scrim thins to a glance state
+ * but never fully vanishes, because a modal sheet keeps the background inert —
+ * a fully clear backdrop would read as "interactive" when it isn't. (For a
+ * genuinely interactive, undimmed peek, use a non-modal sheet, `hasScrim=false`.)
+ */
+export const MIN_PEEK_SCRIM_OPACITY = 0.3;
+
+/**
+ * Whether `offset` is the peek detent: the shortest stop, where the sheet is a
+ * glance rather than a working surface. A sheet with no collapsed stop at all
+ * has no peek — the same rule `scrimOpacityForOffset` thins the scrim by.
+ *
+ * The peek is the one detent the sheet does NOT express as layout height: at a
+ * sliver of viewport there is nothing useful to lay out, and reflowing the
+ * content into it (then back out on the way up) is churn the user sees. It
+ * keeps the full layout height and slides below the viewport instead.
+ */
+export function isPeekOffset(offset, offsets, tolerancePx = 0.5) {
+  if (offsets.length < 2) {
+    return false;
+  }
+  return Math.abs(offset - offsets[offsets.length - 1]) <= tolerancePx;
+}
+
+/**
+ * Scrim opacity (1 = fully visible) for a drag/settle `offset`.
+ * The scrim stays full while the sheet is at or above its second-shortest
+ * detent, then fades as it collapses onto the shortest ("peek") detent — a
+ * glance state that thins the backdrop to `MIN_PEEK_SCRIM_OPACITY` (not fully
+ * gone, since the sheet is still modal) and holds there below it.
+ * A single-detent sheet has no peek, so it instead fades all the way to 0
+ * across the dismiss overshoot toward `dismissOffset` (the sheet is leaving).
+ */
+export function scrimOpacityForOffset(offset, offsets, dismissOffset) {
+  const shortest = offsets[offsets.length - 1];
+  const hasPeek = offsets.length >= 2;
+  const fadeStart = hasPeek ? offsets[offsets.length - 2] : 0;
+  const fadeEnd = hasPeek ? shortest : dismissOffset;
+  // Peek is a resting state on a still-modal sheet, so keep a floor; the
+  // dismiss overshoot is a sheet on its way out, so let it clear completely.
+  const floor = hasPeek ? MIN_PEEK_SCRIM_OPACITY : 0;
+  if (offset <= fadeStart) {
+    return 1;
+  }
+  if (offset >= fadeEnd) {
+    return floor;
+  }
+  return 1 - (1 - floor) * ((offset - fadeStart) / (fadeEnd - fadeStart));
+}
+
+/**
+ * Settle target for a released drag. Restricts candidates to the drag
+ * direction so a committed drag never snaps *back past* where it started
+ * (a down-drag settles at/below the start, an up-drag at/above), then picks
+ * the nearest remaining detent. `dir`: 1 = dragged down, -1 = up, 0 = neither.
+ */
+export function resolveSettleOffset(value, offsets, dir, baseOffset) {
+  let candidates = offsets;
+  if (dir > 0) {
+    const downward = offsets.filter(o => o >= baseOffset);
+    if (downward.length > 0) {
+      candidates = downward;
+    }
+  } else if (dir < 0) {
+    const upward = offsets.filter(o => o <= baseOffset);
+    if (upward.length > 0) {
+      candidates = upward;
+    }
+  }
+  return nearestOffset(value, candidates);
+}

package/dist/BottomSheet/useMobileKeyboard.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @file useMobileKeyboard.ts
+ * @input Uses React effects and refs supplied by BottomSheet
+ * @output Exports internal useMobileKeyboard hook
+ * @position Internal to BottomSheet; not exported from the core entry point
+ *
+ * Gives a fully expanded, explicitly Tall sheet a keyboard-aware internal
+ * scroll range while leaving the sheet itself stationary. Shorter detents and
+ * other heights opt out entirely. Starting Tall-sheet travel or closing the
+ * sheet blurs the field and dismisses the keyboard.
+ *
+ * Every route into a field also has to reach it without the browser revealing
+ * it for us. On iOS that reveal scrolls the DOCUMENT, and a fixed sheet travels
+ * with it, so the whole page lurches. The reveal is attached to the focus
+ * operation, which is where it can be refused: take the focus transition over
+ * on the capture-phase blur, deliver it with preventScroll, and bring the
+ * control into view with the sheet's own scroller afterwards. Every route in —
+ * a tap, the keyboard's Next, Tab, a programmatic focus() — passes through that
+ * one transition.
+ */
+import { type RefObject } from 'react';
+interface UseMobileKeyboardOptions {
+    bodyRef: RefObject<HTMLElement | null>;
+    bottomClearance: number;
+    isEnabled: boolean;
+    isFullyExpanded: boolean;
+    isPageScrollLocked: boolean;
+    isSheetTraveling: boolean;
+    isOpen: boolean;
+    isPresented: boolean;
+    sheetRef: RefObject<HTMLDivElement | null>;
+}
+export declare function useMobileKeyboard({ bodyRef, bottomClearance, isEnabled, isFullyExpanded, isPageScrollLocked, isSheetTraveling, isOpen, isPresented, sheetRef, }: UseMobileKeyboardOptions): void;
+export {};
+//# sourceMappingURL=useMobileKeyboard.d.ts.map

package/dist/BottomSheet/useMobileKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMobileKeyboard.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useMobileKeyboard.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAgBxD,UAAU,wBAAwB;IAChC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC5C;AA8DD,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,eAAe,EACf,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,QAAQ,GACT,EAAE,wBAAwB,GAAG,IAAI,CAuXjC"}

package/dist/BottomSheet/useMobileKeyboard.js

@@ -0,0 +1,373 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useMobileKeyboard.ts
+ * @input Uses React effects and refs supplied by BottomSheet
+ * @output Exports internal useMobileKeyboard hook
+ * @position Internal to BottomSheet; not exported from the core entry point
+ *
+ * Gives a fully expanded, explicitly Tall sheet a keyboard-aware internal
+ * scroll range while leaving the sheet itself stationary. Shorter detents and
+ * other heights opt out entirely. Starting Tall-sheet travel or closing the
+ * sheet blurs the field and dismisses the keyboard.
+ *
+ * Every route into a field also has to reach it without the browser revealing
+ * it for us. On iOS that reveal scrolls the DOCUMENT, and a fixed sheet travels
+ * with it, so the whole page lurches. The reveal is attached to the focus
+ * operation, which is where it can be refused: take the focus transition over
+ * on the capture-phase blur, deliver it with preventScroll, and bring the
+ * control into view with the sheet's own scroller afterwards. Every route in —
+ * a tap, the keyboard's Next, Tab, a programmatic focus() — passes through that
+ * one transition.
+ */
+import { useEffect, useRef } from 'react';
+const MOBILE_KEYBOARD_INSET_VAR = '--_sheet-keyboard-inset';
+const NON_TEXT_INPUT_TYPES = new Set(['button', 'checkbox', 'color', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit']);
+function getObstructionTop() {
+  return window.visualViewport?.height ?? window.innerHeight;
+}
+
+// The keyboard is gone once the visible band reaches the layout viewport bottom.
+function isVisualViewportRecovered() {
+  return getObstructionTop() >= window.innerHeight - 0.5;
+}
+function isIOSWebKit() {
+  const userAgent = window.navigator.userAgent;
+  return /iPad|iPhone|iPod/.test(userAgent) || userAgent.includes('Macintosh') && window.navigator.maxTouchPoints > 1;
+}
+function isTextEntryControl(element) {
+  if (element instanceof HTMLTextAreaElement) {
+    return !element.disabled && !element.readOnly;
+  }
+  if (element instanceof HTMLInputElement) {
+    return !element.disabled && !element.readOnly && !NON_TEXT_INPUT_TYPES.has((element.getAttribute('type') ?? 'text').toLowerCase());
+  }
+  return element instanceof HTMLElement && element.matches('[contenteditable]:not([contenteditable="false"])');
+}
+function findTextEntryControl(target, body) {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  const direct = target.closest('input, textarea, [contenteditable]:not([contenteditable="false"])');
+  if (body.contains(direct) && isTextEntryControl(direct)) {
+    return direct;
+  }
+  const label = target.closest('label');
+  const control = label instanceof HTMLLabelElement ? label.control : null;
+  return body.contains(control) && isTextEntryControl(control) ? control : null;
+}
+export function useMobileKeyboard({
+  bodyRef,
+  bottomClearance,
+  isEnabled,
+  isFullyExpanded,
+  isPageScrollLocked,
+  isSheetTraveling,
+  isOpen,
+  isPresented,
+  sheetRef
+}) {
+  const hasKeyboardLayoutRef = useRef(false);
+  const retainKeyboardLayoutRef = useRef(false);
+  const isFullyExpandedRef = useRef(isFullyExpanded);
+  const isOpenRef = useRef(isOpen);
+  isFullyExpandedRef.current = isFullyExpanded;
+  isOpenRef.current = isOpen;
+  useEffect(() => {
+    if (!isEnabled || !isSheetTraveling) {
+      return;
+    }
+    const sheet = sheetRef.current;
+    const activeElement = document.activeElement;
+    if (sheet && activeElement instanceof HTMLElement && activeElement !== sheet && sheet.contains(activeElement)) {
+      // Keep the current keyboard scroll range while focusing the sheet
+      // dismisses the keyboard. Viewport resize events unwind that layout as
+      // the visual viewport recovers, avoiding a content jump on the first
+      // drag frame.
+      retainKeyboardLayoutRef.current = hasKeyboardLayoutRef.current;
+      sheet.focus({
+        preventScroll: true
+      });
+    }
+  }, [isEnabled, isSheetTraveling, sheetRef]);
+  useEffect(() => {
+    if (!isEnabled || !isPresented || isOpen) {
+      return;
+    }
+    const sheet = sheetRef.current;
+    const activeElement = document.activeElement;
+    if (sheet && activeElement instanceof HTMLElement && activeElement !== sheet && sheet.contains(activeElement)) {
+      retainKeyboardLayoutRef.current = hasKeyboardLayoutRef.current;
+      activeElement.blur();
+    }
+  }, [isEnabled, isOpen, isPresented, sheetRef]);
+  useEffect(() => {
+    const body = bodyRef.current;
+    const sheet = sheetRef.current;
+    if (!isEnabled || !isPresented || !body) {
+      return;
+    }
+    let keyboardGeometry = null;
+    let documentScrollAtKeyboard = null;
+    const ownsFocusTransitions = isIOSWebKit();
+    const clearKeyboardLayout = () => {
+      body.style.setProperty(MOBILE_KEYBOARD_INSET_VAR, '0px');
+      keyboardGeometry = null;
+      documentScrollAtKeyboard = null;
+      hasKeyboardLayoutRef.current = false;
+      retainKeyboardLayoutRef.current = false;
+    };
+    const scrollBodyBy = (distance, smoothly) => {
+      if (typeof body.scrollBy !== 'function') {
+        body.scrollTop += distance;
+        return;
+      }
+      const reduceMotion = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      body.scrollBy({
+        top: distance,
+        // Not 'auto': that defers to the element's computed `scroll-behavior`,
+        // so a consumer's `scroll-behavior: smooth` would animate a scroll this
+        // hook needs to land in the same frame.
+        behavior: smoothly && !reduceMotion ? 'smooth' : 'instant'
+      });
+    };
+
+    // Scroll `control` into the part of the body the keyboard leaves visible,
+    // reading live geometry each time.
+    const scrollControlIntoSafeArea = (control, smoothly) => {
+      const measuredBodyRect = body.getBoundingClientRect();
+      const measuredControlRect = control.getBoundingClientRect();
+      const obstructionTop = getObstructionTop();
+      const overlap = Math.max(0, measuredBodyRect.bottom - obstructionTop);
+      const clearance = overlap > 0 ? bottomClearance : 0;
+      const safeTop = measuredBodyRect.top;
+      const safeBottom = Math.min(measuredBodyRect.bottom, obstructionTop - clearance);
+      if (safeBottom <= safeTop) {
+        return;
+      }
+      if (measuredControlRect.bottom > safeBottom) {
+        scrollBodyBy(measuredControlRect.bottom - safeBottom, smoothly);
+      } else if (measuredControlRect.top < safeTop) {
+        scrollBodyBy(measuredControlRect.top - safeTop, smoothly);
+      }
+    };
+    const applyKeyboardGeometry = geometry => {
+      const obstructionTop = getObstructionTop();
+      // A collapsed detent can extend the body below the layout viewport even
+      // after the keyboard closes, so body overlap alone cannot identify
+      // recovery. Once the visual viewport is full height again, release the
+      // retained keyboard layout unconditionally.
+      if (isVisualViewportRecovered()) {
+        clearKeyboardLayout();
+        return;
+      }
+      const overlap = Math.max(0, geometry.bodyBottom - obstructionTop);
+      if (overlap === 0) {
+        clearKeyboardLayout();
+        return;
+      }
+      const inset = Math.max(0, geometry.bodyBottom - (obstructionTop - bottomClearance));
+      body.style.setProperty(MOBILE_KEYBOARD_INSET_VAR, `${inset}px`);
+    };
+
+    // Take the focus transition over before the browser performs it.
+    //
+    // `blur` is dispatched in the capture phase ahead of the browser's own
+    // focus step, and it names the destination in `relatedTarget`. Focusing it
+    // here with preventScroll settles the transition: the browser's step finds
+    // the element already active, so it dispatches nothing further and has
+    // nothing to reveal.
+    const claimFocusTransition = event => {
+      if (!isFullyExpandedRef.current) {
+        return;
+      }
+      const destination = findTextEntryControl(event.relatedTarget, body);
+      if (destination) {
+        if (destination !== document.activeElement) {
+          // Revealing the field is not this handler's job: focusing it raises
+          // focusin, and the viewport resize that follows the keyboard raises
+          // another — both already schedule the reveal below, which knows the
+          // safe area and scrolls only the sheet's own body.
+          destination.focus({
+            preventScroll: true
+          });
+        }
+        return;
+      }
+
+      // Focus left for nothing — the keyboard's Done button parks it on the
+      // body. Park it on the sheet instead, so re-tapping the same field is
+      // still a transition this handler sees. Left on the body, the field is
+      // already `document.activeElement` on the next tap, no blur fires, and
+      // the browser reveals it its own way.
+      //
+      // Only while the sheet is open: closing blurs the field too, and there
+      // is no next tap to keep claimable — the host restores focus to whatever
+      // opened the sheet.
+      const origin = findTextEntryControl(event.target, body);
+      if (isOpenRef.current && origin && !event.relatedTarget) {
+        sheet?.focus({
+          preventScroll: true
+        });
+      }
+    };
+    const revealFocusedControl = () => {
+      const activeElement = document.activeElement;
+      if (!isFullyExpandedRef.current || !(activeElement instanceof HTMLElement) || !body.contains(activeElement) || !isTextEntryControl(activeElement)) {
+        if (retainKeyboardLayoutRef.current && keyboardGeometry) {
+          applyKeyboardGeometry(keyboardGeometry);
+          return;
+        }
+        clearKeyboardLayout();
+        return;
+      }
+      retainKeyboardLayoutRef.current = false;
+      const measuredBodyRect = body.getBoundingClientRect();
+      const obstructionTop = getObstructionTop();
+      const overlap = Math.max(0, measuredBodyRect.bottom - obstructionTop);
+      // The extra clearance leaves room for mobile suggestion UI, but only
+      // while the visual viewport actually overlaps the sheet. With no
+      // obstruction, ordinary desktop and hardware-keyboard focus must not
+      // shift an already visible control.
+      const clearance = overlap > 0 ? bottomClearance : 0;
+      keyboardGeometry = overlap > 0 ? {
+        bodyBottom: measuredBodyRect.bottom
+      } : null;
+      // Where the document sits with the keyboard up and nothing yet shifted:
+      // the position handleDocumentScroll returns to. Captured on the
+      // transition only — a reveal that runs after the browser has already
+      // scrolled would otherwise record the shifted position as correct.
+      if (isPageScrollLocked && overlap > 0 && !hasKeyboardLayoutRef.current) {
+        documentScrollAtKeyboard = {
+          x: window.scrollX,
+          y: window.scrollY
+        };
+      }
+      hasKeyboardLayoutRef.current = overlap > 0;
+      const inset = overlap > 0 ? Math.max(0, measuredBodyRect.bottom - (obstructionTop - clearance)) : 0;
+      body.style.setProperty(MOBILE_KEYBOARD_INSET_VAR, `${inset}px`);
+      scrollControlIntoSafeArea(activeElement, overlap > 0);
+    };
+    let animationFrame = 0;
+    const scheduleReveal = () => {
+      cancelAnimationFrame(animationFrame);
+      animationFrame = requestAnimationFrame(revealFocusedControl);
+    };
+
+    // Resuming the app re-reveals the focused field with no focus event to
+    // claim, so the reveal above never runs and the document scrolls — taking
+    // the fixed sheet with it. Put that scroll back on the event that reports
+    // it and re-reveal inside the sheet.
+    //
+    // Only while the page is locked, which is the only state in which a
+    // document scroll cannot be the user's own: behind a non-modal sheet the
+    // page stays scrollable, and reverting there would fight them.
+    const handleDocumentScroll = () => {
+      const expected = documentScrollAtKeyboard;
+      if (expected == null || window.scrollX === expected.x && window.scrollY === expected.y) {
+        return;
+      }
+      window.scrollTo(expected.x, expected.y);
+      const activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement && body.contains(activeElement) && isTextEntryControl(activeElement)) {
+        scrollControlIntoSafeArea(activeElement, false);
+      }
+    };
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleReveal);
+    const refreshObservedLayout = () => {
+      if (!resizeObserver) {
+        return;
+      }
+      resizeObserver.disconnect();
+
+      // Body/sheet box changes include public height and xstyle updates. The
+      // generated inset pseudo-element changes only scroll overflow, so these
+      // observations do not feed the keyboard inset back into sheet geometry.
+      const targets = new Set([body]);
+      if (sheet) {
+        targets.add(sheet);
+      }
+      for (const child of body.children) {
+        targets.add(child);
+      }
+      const activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement && body.contains(activeElement)) {
+        for (let element = activeElement; element && element !== body; element = element.parentElement) {
+          targets.add(element);
+        }
+      }
+      for (const target of targets) {
+        resizeObserver.observe(target);
+      }
+    };
+    const mutationObserver = typeof MutationObserver === 'undefined' ? null : new MutationObserver(records => {
+      // Ignore the internal inset written on the body. Consumer DOM,
+      // text, class, style, or visibility changes can all move the
+      // focused control without a viewport event.
+      if (records.every(record => record.type === 'attributes' && record.target === body)) {
+        return;
+      }
+      refreshObservedLayout();
+      scheduleReveal();
+    });
+    const handleFocusIn = () => {
+      refreshObservedLayout();
+      scheduleReveal();
+    };
+    const handleFocusOut = () => {
+      // Keep the added scroll range while the keyboard animates away. A focus
+      // transition to another text-entry control cancels this in focusin.
+      retainKeyboardLayoutRef.current = hasKeyboardLayoutRef.current;
+      scheduleReveal();
+    };
+    const handleSheetTransitionEnd = event => {
+      if (event.target === sheet && event.propertyName === 'transform') {
+        scheduleReveal();
+      }
+    };
+    const viewport = window.visualViewport;
+    if (ownsFocusTransitions) {
+      // `blur` does not bubble, so the capture phase is the only place to hear
+      // every one of them — and it runs before the browser's own focus step,
+      // which is the only window in which the transition can still be claimed.
+      document.addEventListener('blur', claimFocusTransition, true);
+    }
+    body.addEventListener('focusin', handleFocusIn);
+    body.addEventListener('focusout', handleFocusOut);
+    sheet?.addEventListener('transitionend', handleSheetTransitionEnd);
+    viewport?.addEventListener('resize', scheduleReveal);
+    viewport?.addEventListener('scroll', scheduleReveal);
+    window.addEventListener('scroll', handleDocumentScroll);
+    window.addEventListener('resize', scheduleReveal);
+    mutationObserver?.observe(body, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+    refreshObservedLayout();
+    // The dialog enters the top layer in a later effect. Wait until the next
+    // frame so flex geometry is final before measuring the body.
+    scheduleReveal();
+    return () => {
+      cancelAnimationFrame(animationFrame);
+      if (ownsFocusTransitions) {
+        document.removeEventListener('blur', claimFocusTransition, true);
+      }
+      body.removeEventListener('focusin', handleFocusIn);
+      body.removeEventListener('focusout', handleFocusOut);
+      sheet?.removeEventListener('transitionend', handleSheetTransitionEnd);
+      viewport?.removeEventListener('resize', scheduleReveal);
+      viewport?.removeEventListener('scroll', scheduleReveal);
+      window.removeEventListener('scroll', handleDocumentScroll);
+      window.removeEventListener('resize', scheduleReveal);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      body.style.removeProperty(MOBILE_KEYBOARD_INSET_VAR);
+      hasKeyboardLayoutRef.current = false;
+      retainKeyboardLayoutRef.current = false;
+    };
+  }, [bodyRef, bottomClearance, isEnabled, isPageScrollLocked, isPresented, sheetRef]);
+}