@rainbow-oh/yee-c 0.15.2 → 0.15.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Dialog/dialog.tsx

@@ -90,9 +90,10 @@ const Dialog = (baseprops: DialogProps) => {
   // lock focus in the dialog
   useLockFocus(contentElement, delayOpen);
 
-  // enable esc to close dialog
+  // enable esc to close dialog; gated on open so a mounted-but-closed
+  // dialog does not occupy the esc layer stack and swallow the top layer
   useEsc({
-    enabled: keyboard,
+    enabled: keyboard && open,
     onEsc: () => {
       onCancel?.();
     },

package/src/Drawer/drawer.tsx

@@ -87,8 +87,10 @@ const Drawer = (baseprops: DrawerProps) => {
 
   useLockFocus(contentRef.current, delayOpen);
 
+  // gated on open so a mounted-but-closed drawer does not occupy the esc
+  // layer stack and swallow the top layer
   useEsc({
-    enabled: keyboard,
+    enabled: keyboard && open,
     onEsc: () => {
       onClose?.();
     },

package/src/ImageViewer/popup.tsx

@@ -48,8 +48,10 @@ const Popup: React.ForwardRefRenderFunction<
   const internalRef = useRef<HTMLDivElement>(null);
   const componentRef = (ref as React.RefObject<HTMLDivElement>) || internalRef;
 
+  // gated on open so a mounted-but-closed viewer does not occupy the esc
+  // layer stack and swallow the top layer
   useEsc({
-    enabled: keyboard,
+    enabled: keyboard && open,
     onEsc: () => {
       onClose?.();
     },

package/src/hooks/useEsc.test.tsx

@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import React, { useState } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Dialog from '../Dialog';
+import Popover from '../Popover';
+
+afterEach(() => {
+  cleanup();
+});
+
+// jsdom has no ResizeObserver; @rc-component/trigger uses it for popup align.
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver;
+}
+
+// useEsc 层级栈：同一 document keydown 会到达所有已启用监听，
+// Esc 必须只关最上层（后启用者），再按才逐层关闭。
+describe('useEsc layering', () => {
+  it('closes only the topmost layer (popover) on Escape, dialog on the next', () => {
+    const onPopoverChange = vi.fn();
+    const onDialogCancel = vi.fn();
+
+    function LayeredApp() {
+      const [popoverOpen, setPopoverOpen] = useState(true);
+      return (
+        <Dialog open onCancel={onDialogCancel} keyboard title="dialog">
+          <Popover
+            trigger="click"
+            open={popoverOpen}
+            onOpenChange={(open: boolean) => {
+              setPopoverOpen(open);
+              onPopoverChange(open);
+            }}
+            content={<div>filter panel</div>}
+          >
+            <button type="button">trigger</button>
+          </Popover>
+        </Dialog>
+      );
+    }
+
+    render(<LayeredApp />);
+
+    // Dialog 先开、Popover 后开 → Popover 是最上层
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onPopoverChange).toHaveBeenCalledWith(false);
+    expect(onDialogCancel).not.toHaveBeenCalled();
+
+    // Popover 已关，Esc 落到 Dialog 层
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onDialogCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('closes the dialog when it is the only enabled layer', () => {
+    const onDialogCancel = vi.fn();
+    render(
+      <Dialog open onCancel={onDialogCancel} keyboard title="dialog">
+        <div>body</div>
+      </Dialog>,
+    );
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onDialogCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores Esc for mounted-but-closed layers so they do not swallow the open one', () => {
+    const onOpenCancel = vi.fn();
+    const onClosedCancel = vi.fn();
+    // 关闭态的 Dialog 后挂载：门控缺失时它会占据 esc 栈顶，吃掉打开层的 Esc
+    render(
+      <>
+        <Dialog open onCancel={onOpenCancel} keyboard title="open">
+          <div>body</div>
+        </Dialog>
+        <Dialog open={false} onCancel={onClosedCancel} keyboard title="closed">
+          <div>body</div>
+        </Dialog>
+      </>,
+    );
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onOpenCancel).toHaveBeenCalledTimes(1);
+    expect(onClosedCancel).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useEsc.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import useEvent from './useEvent';
 
 export interface UseEscProps {
@@ -13,8 +13,14 @@ export interface UseEscProps {
   enabled?: boolean;
 }
 
+// 层级栈：所有 useEsc 监听都挂在 document 上，同一 keydown 会触发全部 handler。
+// 按启用顺序压栈，Esc 只响应最后启用（最上层）的那一个 —— 弹层内再开
+// 筛选/下拉/抽屉时，第一次 Esc 只关最上层，再按才逐层关闭。
+let escSeq = 0;
+const escLayers: number[] = [];
+
 /**
- * React Hook for listening to ESC key press
+ * Hook for listening to ESC key press
  *
  * @example
  * ```tsx
@@ -29,24 +35,29 @@ export interface UseEscProps {
 export default function useEsc({ onEsc, enabled = true }: UseEscProps = {}) {
   const handleEsc = useEvent(onEsc || (() => {}));
 
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        handleEsc(event);
-      }
-    },
-    [handleEsc],
-  );
+  const [id] = useState(() => ++escSeq);
 
   useEffect(() => {
     if (!enabled) {
       return;
     }
 
+    escLayers.push(id);
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && escLayers[escLayers.length - 1] === id) {
+        event.preventDefault();
+        handleEsc(event);
+      }
+    };
+
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
+      const index = escLayers.lastIndexOf(id);
+      if (index !== -1) {
+        escLayers.splice(index, 1);
+      }
     };
-  }, [enabled, handleKeyDown]);
+  }, [enabled, handleEsc, id]);
 }

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.15.2";
+export const version = "0.15.3";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;