@rainbow-oh/yee-c 0.15.1 → 0.15.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.15.1",
+  "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/Table/index.en-US.md

@@ -104,7 +104,7 @@ Filter configuration of `ColumnProps.filter`.
 | searchable | `boolean` | Whether searchable; renders a search input when `items` is unset | `true` |
 | filterOnClose | `boolean` | Whether to apply the filter when the panel closes | `true` |
 | icon | `(filtered: boolean) => React.ReactNode` | Custom filter icon | - |
-| render | `() => React.ReactNode` | Custom filter panel content | - |
+| render | `(ctx: { close: () => void }) => React.ReactNode` | Custom filter panel content; `ctx.close()` closes the filter popover | - |
 | onFilter | `(value: FilterValue, record: object) => boolean` | Local filter function; falls back to default string-includes matching when unset | - |
 | filtered | `boolean` | Force the filter icon highlight (takes precedence over `filteredValue`) | - |
 | filteredValue | `FilterValue \| FilterValue[]` | (Controlled) Filter value. When set, the column's filter state is fully controlled: panel echo, icon highlight and the `filters` in `onChange` all derive from it; reset with `''` / `[]` | - |

package/src/Table/index.zh-CN.md

@@ -109,7 +109,7 @@ toc: 'content'
 | searchable    | `boolean`                                   | 是否可搜索；未配置 `items` 时渲染搜索输入框                                                           | `true` |
 | filterOnClose | `boolean`                                   | 关闭筛选面板时是否自动应用筛选                                                                        | `true` |
 | icon          | `(filtered: boolean) => React.ReactNode`    | 自定义筛选图标                                                                                        | -      |
-| render        | `() => React.ReactNode`                     | 自定义筛选面板内容                                                                                    | -      |
+| render        | `(ctx: { close: () => void }) => React.ReactNode` | 自定义筛选面板内容；`ctx.close()` 关闭筛选弹层        | -      |
 | onFilter      | `(value: FilterValue, record: object) => boolean` | 本地过滤函数；不配置时使用默认的字符串包含匹配                                                  | -      |
 | filtered      | `boolean`                                   | 强制筛选图标高亮（优先级高于由 `filteredValue` 派生的高亮）                                          | -      |
 | filteredValue | `FilterValue \| FilterValue[]`              | （受控）筛选值。配置后该列筛选状态完全受控：面板回显、图标高亮、`onChange` 的 `filters` 均以其为准；重置传 `''` / `[]` | -      |

package/src/Table/interface.ts

@@ -234,7 +234,7 @@ export interface ColumnProps {
     /**
      * Custom filter function, e.g. custom search
      */
-    render?: () => React.ReactNode;
+    render?: (ctx: { close: () => void }) => React.ReactNode;
     /**
      * Filter callback function
      */

package/src/Table/theader/filter.tsx

@@ -149,7 +149,7 @@ const HeaderFilter = React.memo((props: any) => {
   ) : null;
 
   if (render) {
-    popup = render();
+    popup = render({ close: () => setOpen(false) });
   } else if (items) {
     let dataSource = [];
     const inputValue = getStrLower(searchValue);

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.1";
+export const version = "0.15.3";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;