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

package/src/OverlayView.web.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useId, useLayoutEffect, useRef } from 'react';
-import type { ReactNode, SyntheticEvent } from 'react';
+import type { KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
 
 import { createPortal } from 'react-dom';
 import { StyleSheet, View } from 'react-native';
@@ -7,6 +7,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 {
@@ -48,6 +49,7 @@ interface IWebOverlayEntryProps {
   /** Closed but kept mounted: hidden and inert. */
   parked?: boolean;
   stackOrder: number;
+  levelOrder: number;
   presented: boolean;
   animation: IResolvedOverlayAnimation;
   blocking: boolean;
@@ -69,6 +71,7 @@ function WebOverlayEntry({
   entryId,
   parked = false,
   stackOrder,
+  levelOrder,
   presented,
   animation,
   blocking,
@@ -96,6 +99,17 @@ function WebOverlayEntry({
   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) {
@@ -122,7 +136,7 @@ function WebOverlayEntry({
     // 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),
@@ -190,12 +204,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 +292,7 @@ function WebOverlayEntry({
         visibility: parked ? 'hidden' : undefined,
       }}
       {...ISOLATED_EVENT_HANDLERS}
+      onKeyDownCapture={onKeyDownCapture}
     >
       {showBackdrop ? (
         <div
@@ -241,48 +323,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>
@@ -329,6 +421,7 @@ export function OverlayView(props: IOverlayViewProps) {
       parked={parked}
       entryId={entry?.id ?? parkedId}
       stackOrder={entry?.seq ?? 0}
+      levelOrder={OVERLAY_LEVEL_ORDER[level]}
       presented={!parked && presented}
       animation={animation}
       blocking={blocking ?? isBlockingLevel(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>();
@@ -105,6 +103,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 +137,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/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';
@@ -68,16 +68,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 +97,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 +108,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 +149,7 @@ function installOverlayWebManager() {
     return;
   }
   installed = true;
-  overlayStore.subscribe(syncInert);
+  overlayStore.subscribe(syncOverlayInert);
   document.addEventListener('keydown', onKeyDown, true);
 }
 
@@ -159,7 +177,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(

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

@@ -134,6 +134,9 @@ export function useSheetDrag({
     sheet.addEventListener('pointerup', onPointerUp);
     sheet.addEventListener('pointercancel', onPointerUp);
     return () => {
+      if (sheet.hasPointerCapture?.(pointerId)) {
+        sheet.releasePointerCapture(pointerId);
+      }
       sheet.removeEventListener('pointerdown', onPointerDown);
       sheet.removeEventListener('pointermove', onPointerMove);
       sheet.removeEventListener('pointerup', onPointerUp);