@onekeyfe/react-native-native-overlay 3.0.162-alpha.270 → 6.7.0-11

package/src/OverlayView.web.tsx

@@ -1,5 +1,12 @@
-import { useEffect, useId, useLayoutEffect, useRef } from 'react';
-import type { ReactNode, SyntheticEvent } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useSyncExternalStore,
+} from 'react';
+import type { KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
 
 import { createPortal } from 'react-dom';
 import { StyleSheet, View } from 'react-native';
@@ -7,6 +14,7 @@ import { StyleSheet, View } from 'react-native';
 import { OverlayLevelProvider } from './OverlayLevelContext';
 import { OVERLAY_LEVEL_ORDER, isBlockingLevel } from './OverlayLevels';
 import { OVERLAY_OWNER_ATTRIBUTE } from './OverlayPageHost.web';
+import { overlayStore } from './OverlayStore';
 import { useOverlayController } from './useOverlayController';
 import { animateBackdrop, animateTransition } from './web/animateTransition';
 import {
@@ -15,6 +23,7 @@ import {
   getOverlayPageHost,
   registerOverlayDismissRequester,
   scheduleOverlayInertSync,
+  subscribeOverlayPageHost,
 } from './web/overlayLayers';
 import { useKeyboardShift } from './web/useKeyboardShift';
 import { useSheetDrag } from './web/useSheetDrag';
@@ -48,6 +57,7 @@ interface IWebOverlayEntryProps {
   /** Closed but kept mounted: hidden and inert. */
   parked?: boolean;
   stackOrder: number;
+  levelOrder: number;
   presented: boolean;
   animation: IResolvedOverlayAnimation;
   blocking: boolean;
@@ -69,6 +79,7 @@ function WebOverlayEntry({
   entryId,
   parked = false,
   stackOrder,
+  levelOrder,
   presented,
   animation,
   blocking,
@@ -92,10 +103,22 @@ function WebOverlayEntry({
   const keyboardLayerRef = useRef<HTMLDivElement>(null);
   const backdropRef = useRef<HTMLDivElement>(null);
   const directionRef = useRef<'in' | 'out' | undefined>(undefined);
+  const runningAnimationsRef = useRef<Animation[]>([]);
   const restoreFocusRef = useRef<HTMLElement | null>(null);
   const callbacksRef = useRef({ onPresented, onDismissed });
   callbacksRef.current = { onPresented, onDismissed };
 
+  useLayoutEffect(() => {
+    if (!isSheet && sheetRef.current) {
+      // The host now survives a presentation switch; clear any in-flight pan.
+      sheetRef.current.style.removeProperty('transform');
+      sheetRef.current.style.removeProperty('transition');
+      if (backdropRef.current) {
+        backdropRef.current.style.opacity = '1';
+      }
+    }
+  }, [isSheet]);
+
   useLayoutEffect(() => {
     const content = contentRef.current;
     if (!content) {
@@ -108,32 +131,61 @@ function WebOverlayEntry({
     const neverEntered = directionRef.current === undefined;
     directionRef.current = direction;
     scheduleOverlayInertSync();
+    const interruptedFrames = new Map<HTMLElement, Keyframe>();
+    for (const running of runningAnimationsRef.current) {
+      const target = (running.effect as KeyframeEffect | null)?.target;
+      if (running.playState === 'running' && target instanceof HTMLElement) {
+        const style = getComputedStyle(target);
+        interruptedFrames.set(target, {
+          opacity: style.opacity,
+          transform: style.transform,
+        });
+      }
+      running.cancel();
+    }
+    runningAnimationsRef.current = [];
     if (direction === 'out' && (neverEntered || pannedAwayRef.current)) {
+      restoreFocusRef.current?.focus?.({ preventScroll: true });
+      restoreFocusRef.current = null;
       callbacksRef.current.onDismissed();
       return;
     }
-    if (direction === 'in' && blocking) {
-      restoreFocusRef.current = document.activeElement as HTMLElement | null;
-      entryRef.current?.focus({ preventScroll: true });
+    if (direction === 'in') {
+      pannedAwayRef.current = false;
+      sheetRef.current?.style.removeProperty('transform');
+      sheetRef.current?.style.removeProperty('transition');
+      if (backdropRef.current) {
+        backdropRef.current.style.opacity = '1';
+      }
+      if (blocking) {
+        restoreFocusRef.current = document.activeElement as HTMLElement | null;
+        entryRef.current?.focus({ preventScroll: true });
+      }
     }
-    content.getAnimations().forEach((running) => running.cancel());
-    backdropRef.current?.getAnimations().forEach((running) => running.cancel());
     // A sheet is measured as a whole; other presentations by the children
     // of the full-window React root.
     const contentRoot = isSheet
       ? content
-      : (content.firstElementChild as HTMLElement | null) ?? content;
+      : (sheetRef.current?.firstElementChild as HTMLElement | null) ?? content;
     const transition = direction === 'in' ? animation.enter : animation.exit;
     const running = [
-      animateTransition(content, contentRoot, transition, direction),
+      animateTransition(
+        content,
+        contentRoot,
+        transition,
+        direction,
+        interruptedFrames
+      ),
       backdropRef.current
         ? animateBackdrop(
             backdropRef.current,
             animation.backdrop.motion,
-            direction
+            direction,
+            interruptedFrames
           )
         : undefined,
     ].filter((item): item is Animation => !!item);
+    runningAnimationsRef.current = running;
     void Promise.all(running.map((item) => item.finished))
       .then(() => {
         if (directionRef.current !== direction) {
@@ -190,12 +242,79 @@ function WebOverlayEntry({
   const showBackdrop = !!backdropColor || blocking;
   const cornerRadius = sheet?.cornerRadius ?? DEFAULT_SHEET_CORNER_RADIUS;
 
+  const onKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {
+    const root = entryRef.current;
+    if (
+      event.key !== 'Tab' ||
+      event.defaultPrevented ||
+      event.nativeEvent.isComposing ||
+      !root ||
+      !presented ||
+      parked ||
+      overlayStore.getBlockingTop()?.id !== entryId
+    ) {
+      return;
+    }
+    const tabbable = Array.from(
+      root.querySelectorAll<HTMLElement>(
+        'a[href], area[href], button, input:not([type="hidden"]), select, textarea, iframe, object, embed, [tabindex], [contenteditable]:not([contenteditable="false"])'
+      )
+    )
+      .filter((node) => {
+        if (
+          (node.tabIndex < 0 &&
+            (node.hasAttribute('tabindex') ||
+              !node.hasAttribute('contenteditable'))) ||
+          node.matches(':disabled')
+        ) {
+          return false;
+        }
+        for (
+          let ancestor: HTMLElement | null = node;
+          ancestor;
+          ancestor = ancestor.parentElement
+        ) {
+          const style = getComputedStyle(ancestor);
+          if (
+            ancestor.inert ||
+            ancestor.hasAttribute('inert') ||
+            ancestor.hidden ||
+            ancestor.getAttribute('aria-hidden') === 'true' ||
+            style.display === 'none' ||
+            style.visibility === 'hidden'
+          ) {
+            return false;
+          }
+        }
+        return true;
+      })
+      .sort((a, b) => {
+        const aOrder = a.tabIndex > 0 ? a.tabIndex : Infinity;
+        const bOrder = b.tabIndex > 0 ? b.tabIndex : Infinity;
+        return aOrder === bOrder ? 0 : aOrder - bOrder;
+      });
+    const active = document.activeElement;
+    const first = tabbable[0];
+    const last = tabbable[tabbable.length - 1];
+    if (
+      !first ||
+      active === root ||
+      !root.contains(active) ||
+      active === (event.shiftKey ? first : last)
+    ) {
+      event.preventDefault();
+      (event.shiftKey ? last : first)?.focus({ preventScroll: true });
+      if (!first) root.focus({ preventScroll: true });
+    }
+  };
+
   return (
     <div
       ref={entryRef}
       {...{ [ENTRY_ATTRIBUTE]: '' }}
       {...(ownerKey ? { [OVERLAY_OWNER_ATTRIBUTE]: ownerKey } : {})}
       data-stack-order={stackOrder}
+      data-overlay-level-order={levelOrder}
       data-testid={testID}
       role={blocking ? 'dialog' : undefined}
       aria-modal={blocking || undefined}
@@ -211,6 +330,7 @@ function WebOverlayEntry({
         visibility: parked ? 'hidden' : undefined,
       }}
       {...ISOLATED_EVENT_HANDLERS}
+      onKeyDownCapture={onKeyDownCapture}
     >
       {showBackdrop ? (
         <div
@@ -221,7 +341,7 @@ function WebOverlayEntry({
             inset: 0,
             opacity: 0,
             background: backdropColor ?? 'transparent',
-            pointerEvents: blocking ? 'auto' : 'none',
+            pointerEvents: blocking || dismissOnBackdropPress ? 'auto' : 'none',
           }}
         />
       ) : null}
@@ -241,48 +361,58 @@ function WebOverlayEntry({
           ref={contentRef}
           style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}
         >
-          {sheet ? (
-            <div
-              ref={sheetRef}
-              style={{
-                position: 'absolute',
-                left: 0,
-                right: 0,
-                bottom: 0,
-                height: sheet.height,
-                maxHeight: sheet.maxHeight ?? DEFAULT_SHEET_MAX_HEIGHT,
-                display: 'flex',
-                flexDirection: 'column',
-                overflow: 'hidden',
-                pointerEvents: 'auto',
-                touchAction: 'pan-y',
-                background: sheet.backgroundColor
-                  ? String(sheet.backgroundColor)
-                  : undefined,
-                borderTopLeftRadius: cornerRadius,
-                borderTopRightRadius: cornerRadius,
-              }}
+          {/* Keep both hosts and the content slot stable across presentations. */}
+          <div
+            ref={sheetRef}
+            style={
+              sheet
+                ? {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    height: sheet.height,
+                    maxHeight: sheet.maxHeight ?? DEFAULT_SHEET_MAX_HEIGHT,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    overflow: 'hidden',
+                    pointerEvents: 'auto',
+                    touchAction: 'pan-y',
+                    background: sheet.backgroundColor
+                      ? String(sheet.backgroundColor)
+                      : undefined,
+                    borderTopLeftRadius: cornerRadius,
+                    borderTopRightRadius: cornerRadius,
+                  }
+                : {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    pointerEvents: 'none',
+                  }
+            }
+          >
+            {sheet?.showHandle ? (
+              <div
+                style={{
+                  alignSelf: 'center',
+                  width: 36,
+                  height: 5,
+                  marginTop: 8,
+                  borderRadius: 2.5,
+                  background: 'rgba(0, 0, 0, 0.2)',
+                  flexShrink: 0,
+                }}
+              />
+            ) : null}
+            <View
+              pointerEvents={sheet ? undefined : 'box-none'}
+              style={sheet ? { flexShrink: 1 } : StyleSheet.absoluteFill}
             >
-              {sheet.showHandle ? (
-                <div
-                  style={{
-                    alignSelf: 'center',
-                    width: 36,
-                    height: 5,
-                    marginTop: 8,
-                    borderRadius: 2.5,
-                    background: 'rgba(0, 0, 0, 0.2)',
-                    flexShrink: 0,
-                  }}
-                />
-              ) : null}
-              <View style={{ flexShrink: 1 }}>{children}</View>
-            </div>
-          ) : (
-            <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
               {children}
             </View>
-          )}
+          </div>
         </div>
       </div>
     </div>
@@ -317,18 +447,29 @@ export function OverlayView(props: IOverlayViewProps) {
   // Closed with `keepContentMounted`: the same entry stays in the layer,
   // hidden and inert, so the content keeps its state and can be measured.
   const parked = !mounted || !entry;
+  const subscribePageHost = useCallback(
+    (listener: () => void) => subscribeOverlayPageHost(hostKey, listener),
+    [hostKey]
+  );
+  const getPageHost = useCallback(() => getOverlayPageHost(hostKey), [hostKey]);
+  const pageHost = useSyncExternalStore(
+    subscribePageHost,
+    getPageHost,
+    () => undefined
+  );
   if (parked && !keepContentMounted) {
     return null;
   }
-
-  const pageHost =
-    !parked && scope === 'page' ? getOverlayPageHost(hostKey) : undefined;
+  if (scope === 'page' && !pageHost) {
+    return null;
+  }
   return createPortal(
     <WebOverlayEntry
       key="entry"
       parked={parked}
       entryId={entry?.id ?? parkedId}
       stackOrder={entry?.seq ?? 0}
+      levelOrder={OVERLAY_LEVEL_ORDER[level]}
       presented={!parked && presented}
       animation={animation}
       blocking={blocking ?? isBlockingLevel(level)}
@@ -342,15 +483,15 @@ export function OverlayView(props: IOverlayViewProps) {
       sheet={presentation === 'sheet' ? sheet ?? {} : undefined}
       // Inside a page host all levels share one stacking context.
       zIndex={
-        pageHost
+        scope === 'page'
           ? OVERLAY_LEVEL_ORDER[level] * 1000 + (entry?.seq ?? 0)
           : entry?.seq ?? 0
       }
-      ownerKey={pageHost ? ownerKey : undefined}
+      ownerKey={scope === 'page' ? ownerKey : undefined}
       testID={testID}
     >
       <OverlayLevelProvider value={level}>{children}</OverlayLevelProvider>
     </WebOverlayEntry>,
-    pageHost ?? getOverlayLayerRoot(level)
+    scope === 'page' ? pageHost! : getOverlayLayerRoot(level)
   );
 }

package/src/useOverlayController.ts

@@ -69,9 +69,7 @@ export function useOverlayController(
   const pageScope = useOverlayPageScope();
   const hostKey = props.hostKey ?? pageScope.hostKey;
   const ownerKey = props.ownerKey ?? pageScope.ownerKey;
-  // Without a host or owner there is nowhere to anchor a page overlay.
-  const scope =
-    props.scope === 'page' && hostKey && ownerKey ? 'page' : 'global';
+  const scope = props.scope ?? 'global';
   const baseId = useId();
   const cycleRef = useRef(0);
   const [entryId, setEntryId] = useState<string | undefined>();
@@ -79,6 +77,7 @@ export function useOverlayController(
   // still true, so the effect below does not immediately reopen it.
   const closedByStoreRef = useRef(false);
   const propsRef = useLatest(props);
+  const previousVisibleRef = useRef(visible);
 
   const snapshot = useSyncExternalStore(
     overlayStore.subscribe,
@@ -95,6 +94,9 @@ export function useOverlayController(
   );
 
   useEffect(() => {
+    const reopening = visible && !previousVisibleRef.current;
+    previousVisibleRef.current = visible;
+    if (reopening && entryId) overlayStore.reopen(entryId);
     if (!visible) {
       closedByStoreRef.current = false;
       if (entryId) {
@@ -105,6 +107,11 @@ export function useOverlayController(
     if (entryId || closedByStoreRef.current) {
       return;
     }
+    // Page context can become ready after the caller first opens the overlay.
+    // Keep the request in its page boundary instead of presenting globally.
+    if (scope === 'page' && (!hostKey || !ownerKey)) {
+      return;
+    }
     cycleRef.current += 1;
     const id = `overlay-view${baseId}${cycleRef.current}`;
     overlayStore.request(
@@ -134,7 +141,7 @@ export function useOverlayController(
     setEntryId(id);
     // Level / strategy changes apply to the next open cycle only.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, entryId]);
+  }, [visible, entryId, scope, hostKey, ownerKey]);
 
   useEffect(
     () => () => {

package/src/web/animateTransition.ts

@@ -100,7 +100,8 @@ export function animateTransition(
   element: HTMLElement,
   contentRoot: HTMLElement,
   transition: IResolvedOverlayTransition,
-  direction: 'in' | 'out'
+  direction: 'in' | 'out',
+  interruptedFrames?: ReadonlyMap<HTMLElement, Keyframe>
 ): Animation | undefined {
   if (transition.type === 'none') {
     return undefined;
@@ -109,16 +110,32 @@ export function animateTransition(
     ? { ...transition, type: 'fade', fade: true }
     : transition;
   const extent = measureContentExtent(contentRoot);
-  element.style.transformOrigin = `${(extent.left + extent.right) / 2}px ${
-    (extent.top + extent.bottom) / 2
-  }px`;
+  // The React Native root wraps the positioned panel. Animate that panel so its
+  // offset parent stays unscaled; multi-child roots retain their shared motion.
+  const anchoredContent =
+    effective.origin === 'anchor' && contentRoot.childElementCount === 1
+      ? contentRoot.firstElementChild
+      : undefined;
+  const target =
+    anchoredContent instanceof HTMLElement ? anchoredContent : element;
+  const targetRect =
+    target === element ? undefined : target.getBoundingClientRect();
+  target.style.transformOrigin = `${
+    (extent.left + extent.right) / 2 - (targetRect?.left ?? 0)
+  }px ${(extent.top + extent.bottom) / 2 - (targetRect?.top ?? 0)}px`;
   const hidden = hiddenKeyframe(effective, extent);
   const visible: Keyframe = {};
   Object.keys(hidden).forEach((key) => {
     visible[key] = VISIBLE_KEYFRAME[key];
   });
-  const keyframes = direction === 'in' ? [hidden, visible] : [visible, hidden];
-  return element.animate(keyframes, {
+  const sampled = interruptedFrames?.get(target);
+  const initial = direction === 'in' ? hidden : visible;
+  const start: Keyframe = {};
+  Object.keys(initial).forEach((key) => {
+    start[key] = sampled?.[key] ?? initial[key];
+  });
+  const keyframes = [start, direction === 'in' ? visible : hidden];
+  return target.animate(keyframes, {
     ...toTiming(effective.motion),
     fill: 'forwards',
   });
@@ -127,11 +144,13 @@ export function animateTransition(
 export function animateBackdrop(
   element: HTMLElement,
   motion: IOverlayMotion,
-  direction: 'in' | 'out'
+  direction: 'in' | 'out',
+  interruptedFrames?: ReadonlyMap<HTMLElement, Keyframe>
 ): Animation {
-  const keyframes =
-    direction === 'in'
-      ? [{ opacity: 0 }, { opacity: 1 }]
-      : [{ opacity: 1 }, { opacity: 0 }];
+  const sampled = interruptedFrames?.get(element)?.opacity;
+  const keyframes = [
+    { opacity: sampled ?? (direction === 'in' ? 0 : 1) },
+    { opacity: direction === 'in' ? 1 : 0 },
+  ];
   return element.animate(keyframes, { ...toTiming(motion), fill: 'forwards' });
 }

package/src/web/overlayLayers.ts

@@ -6,7 +6,7 @@ import {
 import { overlayStore } from '../OverlayStore';
 
 import type { IOverlayRequestDismissReason } from '../OverlayViewTypes';
-import type { IOverlayLevel } from '../types';
+import type { IOverlayEntry, IOverlayLevel } from '../types';
 
 const LAYER_ATTRIBUTE = 'data-onekey-overlay-layer';
 export const ENTRY_ATTRIBUTE = 'data-onekey-overlay-entry';
@@ -15,6 +15,7 @@ const APP_ROOT_ID = 'root';
 
 const layerRoots = new Map<IOverlayLevel, HTMLDivElement>();
 const pageHosts = new Map<string, HTMLDivElement>();
+const pageHostListeners = new Map<string, Set<() => void>>();
 const dismissRequesters = new Map<
   string,
   (reason: IOverlayRequestDismissReason) => void
@@ -68,16 +69,27 @@ function siblingsOutside(host: HTMLElement, root: HTMLElement) {
   return siblings;
 }
 
-function inertEntriesBelow(container: ParentNode, seq: number) {
+function inertEntriesBelow(container: ParentNode, top?: IOverlayEntry) {
   container
     .querySelectorAll<HTMLElement>(`[${ENTRY_ATTRIBUTE}]`)
     .forEach((node) => {
-      setInert(node, Number(node.dataset.stackOrder) < seq);
+      const level = Number(node.dataset.overlayLevelOrder);
+      const below =
+        !!top &&
+        (level < OVERLAY_LEVEL_ORDER[top.level] ||
+          (level === OVERLAY_LEVEL_ORDER[top.level] &&
+            Number(node.dataset.stackOrder) < top.seq));
+      setInert(
+        node,
+        below ||
+          node.style.visibility === 'hidden' ||
+          node.getAttribute('aria-hidden') === 'true'
+      );
     });
 }
 
 /** Everything rendered below the topmost blocking entry becomes inert. */
-function syncInert() {
+export function syncOverlayInert() {
   const top = overlayStore.getBlockingTop();
   const appRoot = document.getElementById(APP_ROOT_ID);
   let nextPageInert = new Set<HTMLElement>();
@@ -86,7 +98,6 @@ function syncInert() {
   if (top && pageHost && appRoot?.contains(pageHost)) {
     setInert(appRoot, false);
     nextPageInert = siblingsOutside(pageHost, appRoot);
-    inertEntriesBelow(pageHost, top.seq);
   } else {
     setInert(appRoot, !!top);
   }
@@ -98,15 +109,23 @@ function syncInert() {
   nextPageInert.forEach((element) => setInert(element, true));
   pageInertElements = nextPageInert;
 
+  for (const [hostKey, host] of pageHosts) {
+    inertEntriesBelow(
+      host,
+      top?.scope === 'page' && top.hostKey === hostKey ? top : undefined
+    );
+  }
+
   for (const [level, root] of layerRoots) {
     // Global layers render above every page overlay.
     const below =
       top?.scope === 'global' &&
       OVERLAY_LEVEL_ORDER[level] < OVERLAY_LEVEL_ORDER[top.level];
     setInert(root, below);
-    if (top?.scope === 'global' && level === top.level) {
-      inertEntriesBelow(root, top.seq);
-    }
+    inertEntriesBelow(
+      root,
+      top?.scope === 'global' && level === top.level ? top : undefined
+    );
   }
 }
 
@@ -131,7 +150,7 @@ function installOverlayWebManager() {
     return;
   }
   installed = true;
-  overlayStore.subscribe(syncInert);
+  overlayStore.subscribe(syncOverlayInert);
   document.addEventListener('keydown', onKeyDown, true);
 }
 
@@ -159,7 +178,7 @@ export function registerOverlayDismissRequester(
 
 /** Re-run after entry DOM nodes mount, since the store emits before commit. */
 export function scheduleOverlayInertSync() {
-  requestAnimationFrame(syncInert);
+  requestAnimationFrame(syncOverlayInert);
 }
 
 export function registerOverlayPageHost(
@@ -168,13 +187,32 @@ export function registerOverlayPageHost(
 ): () => void {
   installOverlayWebManager();
   pageHosts.set(hostKey, element);
+  pageHostListeners.get(hostKey)?.forEach((listener) => listener());
   return () => {
     if (pageHosts.get(hostKey) === element) {
       pageHosts.delete(hostKey);
+      pageHostListeners.get(hostKey)?.forEach((listener) => listener());
     }
   };
 }
 
+export function subscribeOverlayPageHost(
+  hostKey: string | undefined,
+  listener: () => void
+): () => void {
+  if (!hostKey) return () => {};
+  let listeners = pageHostListeners.get(hostKey);
+  if (!listeners) {
+    listeners = new Set();
+    pageHostListeners.set(hostKey, listeners);
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) pageHostListeners.delete(hostKey);
+  };
+}
+
 export function getOverlayPageHost(
   hostKey: string | undefined
 ): HTMLDivElement | undefined {

package/src/web/useKeyboardShift.ts

@@ -99,7 +99,7 @@ export function useKeyboardShift({
         top = origin + sheet.offsetTop;
         bottom = top + sheet.offsetHeight;
       } else {
-        const extent = layoutExtent(contentRef.current);
+        const extent = layoutExtent(sheet ?? contentRef.current);
         if (extent) {
           top = origin + extent.top;
           bottom = origin + extent.bottom;

package/src/web/useSheetDrag.ts

@@ -129,15 +129,36 @@ export function useSheetDrag({
       );
     };
 
+    const onPointerCancel = (event: PointerEvent) => {
+      if (!tracking || event.pointerId !== pointerId) {
+        return;
+      }
+      tracking = false;
+      dragging = false;
+      velocity = 0;
+      if (sheet.hasPointerCapture?.(pointerId)) {
+        sheet.releasePointerCapture(pointerId);
+      }
+      pointerId = -1;
+      sheet.style.transform = '';
+      sheet.style.transition = '';
+      if (backdropRef.current) {
+        backdropRef.current.style.opacity = '1';
+      }
+    };
+
     sheet.addEventListener('pointerdown', onPointerDown);
     sheet.addEventListener('pointermove', onPointerMove);
     sheet.addEventListener('pointerup', onPointerUp);
-    sheet.addEventListener('pointercancel', onPointerUp);
+    sheet.addEventListener('pointercancel', onPointerCancel);
     return () => {
+      if (sheet.hasPointerCapture?.(pointerId)) {
+        sheet.releasePointerCapture(pointerId);
+      }
       sheet.removeEventListener('pointerdown', onPointerDown);
       sheet.removeEventListener('pointermove', onPointerMove);
       sheet.removeEventListener('pointerup', onPointerUp);
-      sheet.removeEventListener('pointercancel', onPointerUp);
+      sheet.removeEventListener('pointercancel', onPointerCancel);
     };
   }, [sheetRef, backdropRef, enabled]);
 }