feat: Popover can be closed by ESC when trigger is focus or click

components/popover/index.tsx

@@ -10,6 +10,8 @@
 import PurePanel from './PurePanel';
 // CSSINJS
 import useStyle from './style';
+import KeyCode from 'rc-util/lib/KeyCode';
+import { cloneElement } from '../_util/reactNode';
 
 export interface PopoverProps extends AbstractTooltipProps {
   title?: React.ReactNode | RenderFunction;
@@ -37,6 +39,7 @@
     overlayClassName,
     placement = 'top',
     trigger = 'hover',
+    children,
     mouseEnterDelay = 0.1,
     mouseLeaveDelay = 0.1,
     overlayStyle = {},
@@ -49,6 +52,15 @@
   const rootPrefixCls = getPrefixCls();
 
   const overlayCls = classNames(overlayClassName, hashId, cssVarCls);
+  const [open, setOpen] = React.useState(props.open ?? props.visible);
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.keyCode === KeyCode.ESC) {
+      console.log('esc');
+
+      setOpen(false);
+    }
+  };
 
   return wrapCSSVar(
     <Tooltip
@@ -61,12 +73,22 @@
       prefixCls={prefixCls}
       overlayClassName={overlayCls}
       ref={ref}
+      open={open}
       overlay={
         title || content ? <Overlay prefixCls={prefixCls} title={title} content={content} /> : null
       }
       transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
       data-popover-inject
-    />,
+    >
+      {cloneElement(children, {
+        onKeyDown: (e: React.KeyboardEvent<any>) => {
+          if (React.isValidElement(children)) {
+            children?.props.onKeyDown?.(e);
+          }
+          onKeyDown(e);
+        },
+      })}
+    </Tooltip>,
   );
 }) as React.ForwardRefExoticComponent<
   React.PropsWithoutRef<PopoverProps> & React.RefAttributes<unknown>