@rc-component/portal 2.0.0 → 2.1.0

package/es/Portal.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 export type ContainerType = Element | DocumentFragment;
 export type GetContainer = string | ContainerType | (() => ContainerType) | false;
+export type EscCallback = ({ top, event, }: {
+    top: boolean;
+    event: KeyboardEvent;
+}) => void;
 export interface PortalProps {
     /** Customize container element. Default will create a div in document.body when `open` */
     getContainer?: GetContainer;
@@ -11,6 +15,7 @@ export interface PortalProps {
     autoDestroy?: boolean;
     /** Lock screen scroll when open */
     autoLock?: boolean;
+    onEsc?: EscCallback;
     /** @private debug name. Do not use in prod */
     debug?: string;
 }

package/es/Portal.js

@@ -7,6 +7,7 @@ import OrderContext from "./Context";
 import { inlineMock } from "./mock";
 import useDom from "./useDom";
 import useScrollLocker from "./useScrollLocker";
+import useEscKeyDown from "./useEscKeyDown";
 const getPortalContainer = getContainer => {
   if (getContainer === false) {
     return false;
@@ -29,7 +30,8 @@ const Portal = /*#__PURE__*/React.forwardRef((props, ref) => {
     getContainer,
     debug,
     autoDestroy = true,
-    children
+    children,
+    onEsc
   } = props;
   const [shouldRender, setShouldRender] = React.useState(open);
   const mergedRender = shouldRender || open;
@@ -60,6 +62,9 @@ const Portal = /*#__PURE__*/React.forwardRef((props, ref) => {
   // ========================= Locker ==========================
   useScrollLocker(autoLock && open && canUseDom() && (mergedContainer === defaultContainer || mergedContainer === document.body));
 
+  // ========================= Esc Keydown ==========================
+  useEscKeyDown(open, onEsc);
+
   // =========================== Ref ===========================
   let childRef = null;
   if (children && supportRef(children) && ref) {

package/es/useEscKeyDown.d.ts

@@ -0,0 +1,3 @@
+import { type EscCallback } from './Portal';
+export declare let stack: string[];
+export default function useEscKeyDown(open: boolean, onEsc?: EscCallback): void;

package/es/useEscKeyDown.js

@@ -0,0 +1,34 @@
+import { useEffect, useMemo } from 'react';
+import useId from "@rc-component/util/es/hooks/useId";
+import { useEvent } from '@rc-component/util';
+export let stack = []; // export for testing
+
+export default function useEscKeyDown(open, onEsc) {
+  const id = useId();
+  const handleEscKeyDown = useEvent(event => {
+    if (event.key === 'Escape') {
+      const top = stack[stack.length - 1] === id;
+      onEsc?.({
+        top,
+        event
+      });
+    }
+  });
+  useMemo(() => {
+    if (open && !stack.includes(id)) {
+      stack.push(id);
+    } else if (!open) {
+      stack = stack.filter(item => item !== id);
+    }
+  }, [open, id]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    window.addEventListener('keydown', handleEscKeyDown);
+    return () => {
+      stack = stack.filter(item => item !== id);
+      window.removeEventListener('keydown', handleEscKeyDown);
+    };
+  }, [open, id]);
+}

package/lib/Portal.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 export type ContainerType = Element | DocumentFragment;
 export type GetContainer = string | ContainerType | (() => ContainerType) | false;
+export type EscCallback = ({ top, event, }: {
+    top: boolean;
+    event: KeyboardEvent;
+}) => void;
 export interface PortalProps {
     /** Customize container element. Default will create a div in document.body when `open` */
     getContainer?: GetContainer;
@@ -11,6 +15,7 @@ export interface PortalProps {
     autoDestroy?: boolean;
     /** Lock screen scroll when open */
     autoLock?: boolean;
+    onEsc?: EscCallback;
     /** @private debug name. Do not use in prod */
     debug?: string;
 }

package/lib/Portal.js

@@ -13,6 +13,7 @@ var _Context = _interopRequireDefault(require("./Context"));
 var _mock = require("./mock");
 var _useDom = _interopRequireDefault(require("./useDom"));
 var _useScrollLocker = _interopRequireDefault(require("./useScrollLocker"));
+var _useEscKeyDown = _interopRequireDefault(require("./useEscKeyDown"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,7 +39,8 @@ const Portal = /*#__PURE__*/React.forwardRef((props, ref) => {
     getContainer,
     debug,
     autoDestroy = true,
-    children
+    children,
+    onEsc
   } = props;
   const [shouldRender, setShouldRender] = React.useState(open);
   const mergedRender = shouldRender || open;
@@ -69,6 +71,9 @@ const Portal = /*#__PURE__*/React.forwardRef((props, ref) => {
   // ========================= Locker ==========================
   (0, _useScrollLocker.default)(autoLock && open && (0, _canUseDom.default)() && (mergedContainer === defaultContainer || mergedContainer === document.body));
 
+  // ========================= Esc Keydown ==========================
+  (0, _useEscKeyDown.default)(open, onEsc);
+
   // =========================== Ref ===========================
   let childRef = null;
   if (children && (0, _ref.supportRef)(children) && ref) {

package/lib/useEscKeyDown.d.ts

@@ -0,0 +1,3 @@
+import { type EscCallback } from './Portal';
+export declare let stack: string[];
+export default function useEscKeyDown(open: boolean, onEsc?: EscCallback): void;

package/lib/useEscKeyDown.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useEscKeyDown;
+exports.stack = void 0;
+var _react = require("react");
+var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
+var _util = require("@rc-component/util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+let stack = exports.stack = []; // export for testing
+
+function useEscKeyDown(open, onEsc) {
+  const id = (0, _useId.default)();
+  const handleEscKeyDown = (0, _util.useEvent)(event => {
+    if (event.key === 'Escape') {
+      const top = stack[stack.length - 1] === id;
+      onEsc?.({
+        top,
+        event
+      });
+    }
+  });
+  (0, _react.useMemo)(() => {
+    if (open && !stack.includes(id)) {
+      stack.push(id);
+    } else if (!open) {
+      exports.stack = stack = stack.filter(item => item !== id);
+    }
+  }, [open, id]);
+  (0, _react.useEffect)(() => {
+    if (!open) {
+      return;
+    }
+    window.addEventListener('keydown', handleEscKeyDown);
+    return () => {
+      exports.stack = stack = stack.filter(item => item !== id);
+      window.removeEventListener('keydown', handleEscKeyDown);
+    };
+  }, [open, id]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/portal",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React Portal Component",
   "keywords": [
     "react",
@@ -45,20 +45,20 @@
   },
   "dependencies": {
     "@rc-component/util": "^1.2.1",
-    "classnames": "^2.3.2"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",
     "@rc-component/np": "^1.0.3",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/jest-dom": "^6.9.0",
     "@testing-library/react": "^13.0.0",
     "@types/jest": "^26.0.20",
     "@types/node": "^20.9.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@umijs/fabric": "^3.0.0",
+    "@umijs/fabric": "^4.0.0",
     "dumi": "^2.0.0",
-    "eslint": "^7.18.0",
+    "eslint": "^8.0.0",
     "father": "^4.0.0",
     "gh-pages": "^6.1.1",
     "glob": "^10.0.0",