@rc-component/drawer 1.2.0 → 1.4.0

package/README.md

@@ -1,15 +1,22 @@
-# rc-drawer
+# @rc-component/drawer
+
+[![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
 
-[![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) [![node version][node-image]][node-url] [![npm download][download-image]][download-url]
-
-[npm-image]: http://img.shields.io/npm/v/rc-drawer.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-drawer
-[github-actions-image]: https://github.com/react-component/drawer/workflows/CI/badge.svg
-[github-actions-url]: https://github.com/react-component/drawer/actions
-[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
-[node-url]: http://nodejs.org/download/
-[download-image]: https://img.shields.io/npm/dm/rc-drawer.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-drawer
 
 ## Example
 
@@ -18,7 +25,7 @@ https://drawer-react-component.vercel.app/
 ## Usage
 
 ```js
-import Drawer from 'rc-drawer';
+import Drawer from '@rc-component/drawer';
 import React from 'react';
 import ReactDom from 'react-dom';
 
@@ -31,7 +38,7 @@ ReactDom.render(
 
 ## Install
 
-[![rc-drawer](https://nodei.co/npm/rc-drawer.png)](https://npmjs.org/package/rc-drawer)
+[![@rc-component/drawer](https://nodei.co/npm/@rc-component/drawer.png)](https://npmjs.org/package/@rc-component/drawer)
 
 ## Browser Support
 
@@ -45,7 +52,7 @@ ReactDom.render(
 | ------------------ | --------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
 | className          | string                                                                      | null                                   | -                                                                             |
 | classNames         | { mask?: string; content?: string; wrapper?: string; }                      | -                                      | pass className to target area                                                 |
-| styles             | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | -                                      | pass style to target area                                                     |
+| styles             | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | `rc-drawer`                            | pass style to target area                                                     |
 | prefixCls          | string                                                                      | 'drawer'                               | prefix class                                                                  |
 | width              | string \| number                                                            | null                                   | drawer content wrapper width, drawer level transition width                   |
 | height             | string \| number                                                            | null                                   | drawer content wrapper height, drawer level transition height                 |

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>;
@@ -27,12 +27,13 @@ export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inlin
     maxSize?: number;
     /** Default size for uncontrolled resizable drawer */
     defaultSize?: number | string;
-    /** Resizable configuration - object with optional callbacks */
-    resizable?: {
+    /** Resizable configuration - boolean to enable/disable or object with optional callbacks */
+    resizable?: boolean | {
         onResize?: (size: number) => void;
         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/DrawerPanel.js

@@ -1,5 +1,5 @@
 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 classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { RefContext } from "./context";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
@@ -19,7 +19,7 @@ const DrawerPanel = props => {
   // =============================== Render ===============================
 
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(`${prefixCls}-section`, className),
+    className: clsx(`${prefixCls}-section`, className),
     role: "dialog",
     ref: mergedRef
   }, pickAttrs(props, {

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;
@@ -41,7 +42,7 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     drawerRender?: (node: React.ReactNode) => React.ReactNode;
     /** Default size for uncontrolled resizable drawer */
     defaultSize?: number | string;
-    resizable?: {
+    resizable?: boolean | {
         onResize?: (size: number) => void;
         onResizeStart?: () => void;
         onResizeEnd?: () => void;

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 classNames from 'classnames';
+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);
@@ -161,7 +112,7 @@ const DrawerPopup = (props, ref) => {
     className: motionMaskClassName,
     style: motionMaskStyle
   }, maskRef) => /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${prefixCls}-mask`, motionMaskClassName, drawerClassNames?.mask, maskClassName),
+    className: clsx(`${prefixCls}-mask`, motionMaskClassName, drawerClassNames?.mask, maskClassName),
     style: {
       ...motionMaskStyle,
       ...maskStyle,
@@ -214,9 +165,11 @@ const DrawerPopup = (props, ref) => {
 
   // =========================== Resize ===========================
   const wrapperRef = React.useRef(null);
+  const isResizable = !!resizable;
+  const resizeConfig = typeof resizable === 'object' && resizable || {};
   const onInternalResize = useEvent(size => {
     setCurrentSize(size);
-    resizable?.onResize?.(size);
+    resizeConfig.onResize?.(size);
   });
   const {
     dragElementProps,
@@ -230,8 +183,8 @@ const DrawerPopup = (props, ref) => {
     containerRef: wrapperRef,
     currentSize: mergedSize,
     onResize: onInternalResize,
-    onResizeStart: resizable?.onResizeStart,
-    onResizeEnd: resizable?.onResizeEnd
+    onResizeStart: resizeConfig.onResizeStart,
+    onResizeEnd: resizeConfig.onResizeEnd
   });
 
   // =========================== Events ===========================
@@ -251,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`
   }), ({
@@ -264,7 +215,7 @@ const DrawerPopup = (props, ref) => {
       id: id,
       containerRef: motionRef,
       prefixCls: prefixCls,
-      className: classNames(className, drawerClassNames?.section),
+      className: clsx(className, drawerClassNames?.section),
       style: {
         ...style,
         ...styles?.section
@@ -274,7 +225,7 @@ const DrawerPopup = (props, ref) => {
     }), eventHandlers), children);
     return /*#__PURE__*/React.createElement("div", _extends({
       ref: wrapperRef,
-      className: classNames(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
+      className: clsx(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
       style: {
         ...motionStyle,
         ...wrapperStyle,
@@ -282,7 +233,7 @@ const DrawerPopup = (props, ref) => {
       }
     }, pickAttrs(props, {
       data: true
-    })), resizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
+    })), isResizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
   });
 
   // >>>>> Container
@@ -295,27 +246,14 @@ const DrawerPopup = (props, ref) => {
   return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
     value: mergedContext
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
+    className: clsx(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
       [`${prefixCls}-open`]: open,
       [`${prefixCls}-inline`]: inline
     }),
     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/useDrag.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useEvent } from '@rc-component/util';
 export default function useDrag(options) {
   const {
@@ -82,7 +82,7 @@ export default function useDrag(options) {
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const dragElementClassName = classNames(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
+  const dragElementClassName = clsx(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
     [`${prefixCls}-dragger-dragging`]: isDragging,
     [`${prefixCls}-dragger-horizontal`]: isHorizontal,
     [`${prefixCls}-dragger-vertical`]: !isHorizontal

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>;
@@ -27,12 +27,13 @@ export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inlin
     maxSize?: number;
     /** Default size for uncontrolled resizable drawer */
     defaultSize?: number | string;
-    /** Resizable configuration - object with optional callbacks */
-    resizable?: {
+    /** Resizable configuration - boolean to enable/disable or object with optional callbacks */
+    resizable?: boolean | {
         onResize?: (size: number) => void;
         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/DrawerPanel.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var React = _interopRequireWildcard(require("react"));
 var _context = require("./context");
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
 var _ref = require("@rc-component/util/lib/ref");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 DrawerPanel = props => {
   const {
@@ -28,7 +28,7 @@ const DrawerPanel = props => {
   // =============================== Render ===============================
 
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: (0, _classnames.default)(`${prefixCls}-section`, className),
+    className: (0, _clsx.clsx)(`${prefixCls}-section`, className),
     role: "dialog",
     ref: mergedRef
   }, (0, _pickAttrs.default)(props, {

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;
@@ -41,7 +42,7 @@ export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessib
     drawerRender?: (node: React.ReactNode) => React.ReactNode;
     /** Default size for uncontrolled resizable drawer */
     defaultSize?: number | string;
-    resizable?: {
+    resizable?: boolean | {
         onResize?: (size: number) => void;
         onResizeStart?: () => void;
         onResizeEnd?: () => void;

package/lib/DrawerPopup.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
+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);
@@ -170,7 +121,7 @@ const DrawerPopup = (props, ref) => {
     className: motionMaskClassName,
     style: motionMaskStyle
   }, maskRef) => /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(`${prefixCls}-mask`, motionMaskClassName, drawerClassNames?.mask, maskClassName),
+    className: (0, _clsx.clsx)(`${prefixCls}-mask`, motionMaskClassName, drawerClassNames?.mask, maskClassName),
     style: {
       ...motionMaskStyle,
       ...maskStyle,
@@ -223,9 +174,11 @@ const DrawerPopup = (props, ref) => {
 
   // =========================== Resize ===========================
   const wrapperRef = React.useRef(null);
+  const isResizable = !!resizable;
+  const resizeConfig = typeof resizable === 'object' && resizable || {};
   const onInternalResize = (0, _util2.useEvent)(size => {
     setCurrentSize(size);
-    resizable?.onResize?.(size);
+    resizeConfig.onResize?.(size);
   });
   const {
     dragElementProps,
@@ -239,8 +192,8 @@ const DrawerPopup = (props, ref) => {
     containerRef: wrapperRef,
     currentSize: mergedSize,
     onResize: onInternalResize,
-    onResizeStart: resizable?.onResizeStart,
-    onResizeEnd: resizable?.onResizeEnd
+    onResizeStart: resizeConfig.onResizeStart,
+    onResizeEnd: resizeConfig.onResizeEnd
   });
 
   // =========================== Events ===========================
@@ -260,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`
   }), ({
@@ -273,7 +224,7 @@ const DrawerPopup = (props, ref) => {
       id: id,
       containerRef: motionRef,
       prefixCls: prefixCls,
-      className: (0, _classnames.default)(className, drawerClassNames?.section),
+      className: (0, _clsx.clsx)(className, drawerClassNames?.section),
       style: {
         ...style,
         ...styles?.section
@@ -283,7 +234,7 @@ const DrawerPopup = (props, ref) => {
     }), eventHandlers), children);
     return /*#__PURE__*/React.createElement("div", _extends({
       ref: wrapperRef,
-      className: (0, _classnames.default)(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
+      className: (0, _clsx.clsx)(`${prefixCls}-content-wrapper`, isDragging && `${prefixCls}-content-wrapper-dragging`, drawerClassNames?.wrapper, !isDragging && motionClassName),
       style: {
         ...motionStyle,
         ...wrapperStyle,
@@ -291,7 +242,7 @@ const DrawerPopup = (props, ref) => {
       }
     }, (0, _pickAttrs.default)(props, {
       data: true
-    })), resizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
+    })), isResizable && /*#__PURE__*/React.createElement("div", dragElementProps), drawerRender ? drawerRender(content) : content);
   });
 
   // >>>>> Container
@@ -304,27 +255,14 @@ const DrawerPopup = (props, ref) => {
   return /*#__PURE__*/React.createElement(_context.default.Provider, {
     value: mergedContext
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
+    className: (0, _clsx.clsx)(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
       [`${prefixCls}-open`]: open,
       [`${prefixCls}-inline`]: inline
     }),
     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/useDrag.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useDrag;
 var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _util = require("@rc-component/util");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 useDrag(options) {
@@ -91,7 +90,7 @@ function useDrag(options) {
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const dragElementClassName = (0, _classnames.default)(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
+  const dragElementClassName = (0, _clsx.clsx)(`${prefixCls}-dragger`, `${prefixCls}-dragger-${direction}`, {
     [`${prefixCls}-dragger-dragging`]: isDragging,
     [`${prefixCls}-dragger-horizontal`]: isHorizontal,
     [`${prefixCls}-dragger-vertical`]: !isHorizontal

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.2.0",
+  "version": "1.4.0",
   "description": "drawer component for react",
   "keywords": [
     "react",
@@ -44,9 +44,9 @@
   },
   "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",
-    "classnames": "^2.2.6"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.3.0",
@@ -54,9 +54,8 @@
     "@rc-component/np": "^1.0.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^16.3.0",
-    "@types/classnames": "^2.2.9",
     "@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",
@@ -64,7 +63,7 @@
     "antd": "^5.12.7",
     "dumi": "^2.2.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-unicorn": "^51.0.1",
     "father": "^4.0.0",
     "glob": "^10.3.10",
@@ -76,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": {