@rc-component/drawer 1.3.0 → 1.4.0

package/README.md

@@ -1,13 +1,22 @@
 # @rc-component/drawer
 
-[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![codecov](https://codecov.io/gh/react-component/drawer/branch/master/graph/badge.svg)](https://codecov.io/gh/react-component/drawer) [![npm download][download-image]][download-url]
+[![NPM version][npm-image]][npm-url]
+[![npm download][download-image]][download-url]
+[![build status][github-actions-image]][github-actions-url]
+[![codecov][codecov-image]][codecov-url]
+[![dumi][dumi-image]][dumi-url]
 
 [npm-image]: http://img.shields.io/npm/v/@rc-component/drawer.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/@rc-component/drawer
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
+[dumi-url]: https://github.com/umijs/dumi
 [github-actions-image]: https://github.com/react-component/drawer/actions/workflows/react-component-ci.yml/badge.svg
 [github-actions-url]: https://github.com/react-component/drawer/actions/workflows/react-component-ci.yml
 [download-image]: https://img.shields.io/npm/dm/@rc-component/drawer.svg?style=flat-square
 [download-url]: https://npmjs.org/package/@rc-component/drawer
+[codecov-image]: https://codecov.io/gh/react-component/drawer/branch/master/graph/badge.svg
+[codecov-url]: https://codecov.io/gh/react-component/drawer
+
 
 ## Example
 

package/assets/index.css

@@ -18,6 +18,7 @@
   position: absolute;
   z-index: 1050;
   transition: transform 0.3s;
+  pointer-events: auto;
 }
 .rc-drawer-content-wrapper-hidden {
   display: none;

package/es/Drawer.d.ts

@@ -7,7 +7,7 @@ export type Placement = 'left' | 'top' | 'right' | 'bottom';
 export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inline' | 'scrollLocker'>, DrawerPanelEvents, DrawerPanelAccessibility {
     prefixCls?: string;
     open?: boolean;
-    onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onClose?: (e: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => void;
     destroyOnHidden?: boolean;
     getContainer?: PortalProps['getContainer'];
     panelRef?: React.Ref<HTMLDivElement>;
@@ -33,6 +33,7 @@ export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inlin
         onResizeStart?: () => void;
         onResizeEnd?: () => void;
     };
+    focusTriggerAfterClose?: boolean;
 }
 declare const Drawer: React.FC<DrawerProps>;
 export default Drawer;

package/es/Drawer.js

@@ -27,8 +27,10 @@ const Drawer = props => {
     onClick,
     onKeyDown,
     onKeyUp,
+    onClose,
     resizable,
     defaultSize,
+    focusTriggerAfterClose,
     // Refs
     panelRef
   } = props;
@@ -59,7 +61,7 @@ const Drawer = props => {
   const internalAfterOpenChange = nextVisible => {
     setAnimatedVisible(nextVisible);
     afterOpenChange?.(nextVisible);
-    if (!nextVisible && lastActiveRef.current && !popupRef.current?.contains(lastActiveRef.current)) {
+    if (!nextVisible && focusTriggerAfterClose !== false && lastActiveRef.current && !popupRef.current?.contains(lastActiveRef.current)) {
       lastActiveRef.current?.focus({
         preventScroll: true
       });
@@ -103,13 +105,23 @@ const Drawer = props => {
     resizable,
     ...eventHandlers
   };
+  const onEsc = ({
+    top,
+    event
+  }) => {
+    if (top && keyboard) {
+      event.stopPropagation();
+      onClose?.(event);
+    }
+  };
   return /*#__PURE__*/React.createElement(RefContext.Provider, {
     value: refContext
   }, /*#__PURE__*/React.createElement(Portal, {
     open: mergedOpen || forceRender || animatedVisible,
     autoDestroy: false,
     getContainer: getContainer,
-    autoLock: mask && (mergedOpen || animatedVisible)
+    autoLock: mask && (mergedOpen || animatedVisible),
+    onEsc: onEsc
   }, /*#__PURE__*/React.createElement(DrawerPopup, drawerPopupProps)));
 };
 if (process.env.NODE_ENV !== 'production') {

package/es/DrawerPopup.d.ts

@@ -12,8 +12,9 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     inline?: boolean;
     push?: boolean | PushConfig;
     forceRender?: boolean;
-    autoFocus?: boolean;
     keyboard?: boolean;
+    autoFocus?: boolean;
+    focusTrap?: boolean;
     rootClassName?: string;
     rootStyle?: React.CSSProperties;
     zIndex?: number;

package/es/DrawerPopup.js

@@ -1,7 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
-import KeyCode from "@rc-component/util/es/KeyCode";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
 import * as React from 'react';
 import DrawerContext from "./context";
@@ -9,13 +8,7 @@ import DrawerPanel from "./DrawerPanel";
 import useDrag from "./hooks/useDrag";
 import { parseWidthHeight } from "./util";
 import { useEvent } from '@rc-component/util';
-const sentinelStyle = {
-  width: 0,
-  height: 0,
-  overflow: 'hidden',
-  outline: 'none',
-  position: 'absolute'
-};
+import useFocusable from "./hooks/useFocusable";
 const DrawerPopup = (props, ref) => {
   const {
     prefixCls,
@@ -24,8 +17,9 @@ const DrawerPopup = (props, ref) => {
     inline,
     push,
     forceRender,
+    // Focus
     autoFocus,
-    keyboard,
+    focusTrap,
     // classNames
     classNames: drawerClassNames,
     // Root
@@ -65,53 +59,10 @@ const DrawerPopup = (props, ref) => {
 
   // ================================ Refs ================================
   const panelRef = React.useRef(null);
-  const sentinelStartRef = React.useRef(null);
-  const sentinelEndRef = React.useRef(null);
   React.useImperativeHandle(ref, () => panelRef.current);
-  const onPanelKeyDown = event => {
-    const {
-      keyCode,
-      shiftKey
-    } = event;
-    switch (keyCode) {
-      // Tab active
-      case KeyCode.TAB:
-        {
-          if (keyCode === KeyCode.TAB) {
-            if (!shiftKey && document.activeElement === sentinelEndRef.current) {
-              sentinelStartRef.current?.focus({
-                preventScroll: true
-              });
-            } else if (shiftKey && document.activeElement === sentinelStartRef.current) {
-              sentinelEndRef.current?.focus({
-                preventScroll: true
-              });
-            }
-          }
-          break;
-        }
-
-      // Close
-      case KeyCode.ESC:
-        {
-          if (onClose && keyboard) {
-            event.stopPropagation();
-            onClose(event);
-          }
-          break;
-        }
-    }
-  };
 
-  // ========================== Control ===========================
-  // Auto Focus
-  React.useEffect(() => {
-    if (open && autoFocus) {
-      panelRef.current?.focus({
-        preventScroll: true
-      });
-    }
-  }, [open]);
+  // ========================= Focusable ==========================
+  useFocusable(() => panelRef.current, open, autoFocus, focusTrap, mask);
 
   // ============================ Push ============================
   const [pushed, setPushed] = React.useState(false);
@@ -253,9 +204,7 @@ const DrawerPopup = (props, ref) => {
   }, motionProps, {
     visible: open,
     forceRender: forceRender,
-    onVisibleChanged: nextVisible => {
-      afterOpenChange?.(nextVisible);
-    },
+    onVisibleChanged: afterOpenChange,
     removeOnLeave: false,
     leavedClassName: `${prefixCls}-content-wrapper-hidden`
   }), ({
@@ -303,21 +252,8 @@ const DrawerPopup = (props, ref) => {
     }),
     style: containerStyle,
     tabIndex: -1,
-    ref: panelRef,
-    onKeyDown: onPanelKeyDown
-  }, maskNode, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelStartRef,
-    style: sentinelStyle,
-    "aria-hidden": "true",
-    "data-sentinel": "start"
-  }), panelNode, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelEndRef,
-    style: sentinelStyle,
-    "aria-hidden": "true",
-    "data-sentinel": "end"
-  })));
+    ref: panelRef
+  }, maskNode, panelNode));
 };
 const RefDrawerPopup = /*#__PURE__*/React.forwardRef(DrawerPopup);
 if (process.env.NODE_ENV !== 'production') {

package/es/hooks/useFocusable.d.ts

@@ -0,0 +1 @@
+export default function useFocusable(getContainer: () => HTMLElement, open: boolean, autoFocus?: boolean, focusTrap?: boolean, mask?: boolean): void;

package/es/hooks/useFocusable.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useLockFocus } from "@rc-component/util/es/Dom/focus";
+export default function useFocusable(getContainer, open, autoFocus, focusTrap, mask) {
+  const mergedFocusTrap = focusTrap ?? mask !== false;
+
+  // Focus lock
+  useLockFocus(open && mergedFocusTrap, getContainer);
+
+  // Auto Focus
+  React.useEffect(() => {
+    if (open && autoFocus === true) {
+      getContainer()?.focus({
+        preventScroll: true
+      });
+    }
+  }, [open]);
+}

package/lib/Drawer.d.ts

@@ -7,7 +7,7 @@ export type Placement = 'left' | 'top' | 'right' | 'bottom';
 export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inline' | 'scrollLocker'>, DrawerPanelEvents, DrawerPanelAccessibility {
     prefixCls?: string;
     open?: boolean;
-    onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onClose?: (e: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => void;
     destroyOnHidden?: boolean;
     getContainer?: PortalProps['getContainer'];
     panelRef?: React.Ref<HTMLDivElement>;
@@ -33,6 +33,7 @@ export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inlin
         onResizeStart?: () => void;
         onResizeEnd?: () => void;
     };
+    focusTriggerAfterClose?: boolean;
 }
 declare const Drawer: React.FC<DrawerProps>;
 export default Drawer;

package/lib/Drawer.js

@@ -36,8 +36,10 @@ const Drawer = props => {
     onClick,
     onKeyDown,
     onKeyUp,
+    onClose,
     resizable,
     defaultSize,
+    focusTriggerAfterClose,
     // Refs
     panelRef
   } = props;
@@ -68,7 +70,7 @@ const Drawer = props => {
   const internalAfterOpenChange = nextVisible => {
     setAnimatedVisible(nextVisible);
     afterOpenChange?.(nextVisible);
-    if (!nextVisible && lastActiveRef.current && !popupRef.current?.contains(lastActiveRef.current)) {
+    if (!nextVisible && focusTriggerAfterClose !== false && lastActiveRef.current && !popupRef.current?.contains(lastActiveRef.current)) {
       lastActiveRef.current?.focus({
         preventScroll: true
       });
@@ -112,13 +114,23 @@ const Drawer = props => {
     resizable,
     ...eventHandlers
   };
+  const onEsc = ({
+    top,
+    event
+  }) => {
+    if (top && keyboard) {
+      event.stopPropagation();
+      onClose?.(event);
+    }
+  };
   return /*#__PURE__*/React.createElement(_context.RefContext.Provider, {
     value: refContext
   }, /*#__PURE__*/React.createElement(_portal.default, {
     open: mergedOpen || forceRender || animatedVisible,
     autoDestroy: false,
     getContainer: getContainer,
-    autoLock: mask && (mergedOpen || animatedVisible)
+    autoLock: mask && (mergedOpen || animatedVisible),
+    onEsc: onEsc
   }, /*#__PURE__*/React.createElement(_DrawerPopup.default, drawerPopupProps)));
 };
 if (process.env.NODE_ENV !== 'production') {

package/lib/DrawerPopup.d.ts

@@ -12,8 +12,9 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     inline?: boolean;
     push?: boolean | PushConfig;
     forceRender?: boolean;
-    autoFocus?: boolean;
     keyboard?: boolean;
+    autoFocus?: boolean;
+    focusTrap?: boolean;
     rootClassName?: string;
     rootStyle?: React.CSSProperties;
     zIndex?: number;

package/lib/DrawerPopup.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _clsx = require("clsx");
 var _motion = _interopRequireDefault(require("@rc-component/motion"));
-var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("./context"));
@@ -14,17 +13,11 @@ var _DrawerPanel = _interopRequireDefault(require("./DrawerPanel"));
 var _useDrag = _interopRequireDefault(require("./hooks/useDrag"));
 var _util = require("./util");
 var _util2 = require("@rc-component/util");
+var _useFocusable = _interopRequireDefault(require("./hooks/useFocusable"));
 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 }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const sentinelStyle = {
-  width: 0,
-  height: 0,
-  overflow: 'hidden',
-  outline: 'none',
-  position: 'absolute'
-};
 const DrawerPopup = (props, ref) => {
   const {
     prefixCls,
@@ -33,8 +26,9 @@ const DrawerPopup = (props, ref) => {
     inline,
     push,
     forceRender,
+    // Focus
     autoFocus,
-    keyboard,
+    focusTrap,
     // classNames
     classNames: drawerClassNames,
     // Root
@@ -74,53 +68,10 @@ const DrawerPopup = (props, ref) => {
 
   // ================================ Refs ================================
   const panelRef = React.useRef(null);
-  const sentinelStartRef = React.useRef(null);
-  const sentinelEndRef = React.useRef(null);
   React.useImperativeHandle(ref, () => panelRef.current);
-  const onPanelKeyDown = event => {
-    const {
-      keyCode,
-      shiftKey
-    } = event;
-    switch (keyCode) {
-      // Tab active
-      case _KeyCode.default.TAB:
-        {
-          if (keyCode === _KeyCode.default.TAB) {
-            if (!shiftKey && document.activeElement === sentinelEndRef.current) {
-              sentinelStartRef.current?.focus({
-                preventScroll: true
-              });
-            } else if (shiftKey && document.activeElement === sentinelStartRef.current) {
-              sentinelEndRef.current?.focus({
-                preventScroll: true
-              });
-            }
-          }
-          break;
-        }
-
-      // Close
-      case _KeyCode.default.ESC:
-        {
-          if (onClose && keyboard) {
-            event.stopPropagation();
-            onClose(event);
-          }
-          break;
-        }
-    }
-  };
 
-  // ========================== Control ===========================
-  // Auto Focus
-  React.useEffect(() => {
-    if (open && autoFocus) {
-      panelRef.current?.focus({
-        preventScroll: true
-      });
-    }
-  }, [open]);
+  // ========================= Focusable ==========================
+  (0, _useFocusable.default)(() => panelRef.current, open, autoFocus, focusTrap, mask);
 
   // ============================ Push ============================
   const [pushed, setPushed] = React.useState(false);
@@ -262,9 +213,7 @@ const DrawerPopup = (props, ref) => {
   }, motionProps, {
     visible: open,
     forceRender: forceRender,
-    onVisibleChanged: nextVisible => {
-      afterOpenChange?.(nextVisible);
-    },
+    onVisibleChanged: afterOpenChange,
     removeOnLeave: false,
     leavedClassName: `${prefixCls}-content-wrapper-hidden`
   }), ({
@@ -312,21 +261,8 @@ const DrawerPopup = (props, ref) => {
     }),
     style: containerStyle,
     tabIndex: -1,
-    ref: panelRef,
-    onKeyDown: onPanelKeyDown
-  }, maskNode, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelStartRef,
-    style: sentinelStyle,
-    "aria-hidden": "true",
-    "data-sentinel": "start"
-  }), panelNode, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelEndRef,
-    style: sentinelStyle,
-    "aria-hidden": "true",
-    "data-sentinel": "end"
-  })));
+    ref: panelRef
+  }, maskNode, panelNode));
 };
 const RefDrawerPopup = /*#__PURE__*/React.forwardRef(DrawerPopup);
 if (process.env.NODE_ENV !== 'production') {

package/lib/hooks/useFocusable.d.ts

@@ -0,0 +1 @@
+export default function useFocusable(getContainer: () => HTMLElement, open: boolean, autoFocus?: boolean, focusTrap?: boolean, mask?: boolean): void;

package/lib/hooks/useFocusable.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFocusable;
+var _react = _interopRequireDefault(require("react"));
+var _focus = require("@rc-component/util/lib/Dom/focus");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function useFocusable(getContainer, open, autoFocus, focusTrap, mask) {
+  const mergedFocusTrap = focusTrap ?? mask !== false;
+
+  // Focus lock
+  (0, _focus.useLockFocus)(open && mergedFocusTrap, getContainer);
+
+  // Auto Focus
+  _react.default.useEffect(() => {
+    if (open && autoFocus === true) {
+      getContainer()?.focus({
+        preventScroll: true
+      });
+    }
+  }, [open]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/drawer",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "drawer component for react",
   "keywords": [
     "react",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@rc-component/motion": "^1.1.4",
-    "@rc-component/portal": "^2.0.0",
+    "@rc-component/portal": "^2.1.3",
     "@rc-component/util": "^1.2.1",
     "clsx": "^2.1.1"
   },
@@ -55,7 +55,7 @@
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.11",
-    "@types/node": "^24.3.0",
+    "@types/node": "^25.0.0",
     "@types/raf": "^3.4.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -75,7 +75,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "stylelint": "^16.2.1",
-    "stylelint-config-standard-less": "^3.0.1",
+    "stylelint-config-standard-less": "^4.0.0",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {