rc-drawer - npm Package Compare versions

Comparing version 6.1.2 to 6.1.3

es/Drawer.js

@@ -5,2 +5,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import Portal from '@rc-component/portal';
+import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import DrawerPopup from './DrawerPopup';
@@ -37,6 +38,19 @@ import { warnCheck } from './util';
   }
+  // ============================ Focus =============================
+  var panelRef = React.useRef();
+  var lastActiveRef = React.useRef();
+  useLayoutEffect(function () {
+    if (open) {
+      lastActiveRef.current = document.activeElement;
+    }
+  }, [open]);
   // ============================= Open =============================
   var internalAfterOpenChange = function internalAfterOpenChange(nextVisible) {
+    var _panelRef$current;
     setAnimatedVisible(nextVisible);
     afterOpenChange === null || afterOpenChange === void 0 ? void 0 : afterOpenChange(nextVisible);
+    if (!nextVisible && lastActiveRef.current && !((_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.contains(lastActiveRef.current))) {
+      var _lastActiveRef$curren;
+      (_lastActiveRef$curren = lastActiveRef.current) === null || _lastActiveRef$curren === void 0 ? void 0 : _lastActiveRef$curren.focus();
+    }
   };
@@ -57,3 +71,4 @@ // ============================ Render ============================
     inline: getContainer === false,
-    afterOpenChange: internalAfterOpenChange
+    afterOpenChange: internalAfterOpenChange,
+    ref: panelRef
   });
@@ -60,0 +75,0 @@ return /*#__PURE__*/React.createElement(Portal, {

es/DrawerPopup.d.ts

@@ -34,2 +34,3 @@ import * as React from 'react';
 }
-export default function DrawerPopup(props: DrawerPopupProps): JSX.Element;
+declare const RefDrawerPopup: React.ForwardRefExoticComponent<DrawerPopupProps & React.RefAttributes<HTMLDivElement>>;
+export default RefDrawerPopup;

es/DrawerPopup.js

@@ -9,3 +9,2 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import DrawerPanel from './DrawerPanel';
-// import type ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
 import DrawerContext from './context';
@@ -21,3 +20,3 @@ import KeyCode from "rc-util/es/KeyCode";
 };
-export default function DrawerPopup(props) {
+function DrawerPopup(props, ref) {
   var _ref, _pushConfig$distance, _pushConfig, _classNames;
@@ -53,2 +52,5 @@ var prefixCls = props.prefixCls,
   var sentinelEndRef = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return panelRef.current;
+  });
   var onPanelKeyDown = function onPanelKeyDown(event) {
@@ -80,2 +82,3 @@ var keyCode = event.keyCode,
           if (onClose && keyboard) {
+            event.stopPropagation();
             onClose(event);
@@ -96,3 +99,3 @@ }
     }
-  }, [open, autoFocus]);
+  }, [open]);
   // ============================ Push ============================
@@ -233,2 +236,7 @@ var _React$useState = React.useState(false),
   })));
-}
+}
+var RefDrawerPopup = /*#__PURE__*/React.forwardRef(DrawerPopup);
+if (process.env.NODE_ENV !== 'production') {
+  RefDrawerPopup.displayName = 'DrawerPopup';
+}
+export default RefDrawerPopup;

lib/Drawer.js

@@ -13,2 +13,3 @@ "use strict";
 var _portal = _interopRequireDefault(require("@rc-component/portal"));
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 var _DrawerPopup = _interopRequireDefault(require("./DrawerPopup"));
@@ -47,6 +48,19 @@ var _util = require("./util");
   }
+  // ============================ Focus =============================
+  var panelRef = React.useRef();
+  var lastActiveRef = React.useRef();
+  (0, _useLayoutEffect.default)(function () {
+    if (open) {
+      lastActiveRef.current = document.activeElement;
+    }
+  }, [open]);
   // ============================= Open =============================
   var internalAfterOpenChange = function internalAfterOpenChange(nextVisible) {
+    var _panelRef$current;
     setAnimatedVisible(nextVisible);
     afterOpenChange === null || afterOpenChange === void 0 ? void 0 : afterOpenChange(nextVisible);
+    if (!nextVisible && lastActiveRef.current && !((_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.contains(lastActiveRef.current))) {
+      var _lastActiveRef$curren;
+      (_lastActiveRef$curren = lastActiveRef.current) === null || _lastActiveRef$curren === void 0 ? void 0 : _lastActiveRef$curren.focus();
+    }
   };
@@ -67,3 +81,4 @@ // ============================ Render ============================
     inline: getContainer === false,
-    afterOpenChange: internalAfterOpenChange
+    afterOpenChange: internalAfterOpenChange,
+    ref: panelRef
   });
@@ -70,0 +85,0 @@ return /*#__PURE__*/React.createElement(_portal.default, {

lib/DrawerPopup.d.ts

@@ -34,2 +34,3 @@ import * as React from 'react';
 }
-export default function DrawerPopup(props: DrawerPopupProps): JSX.Element;
+declare const RefDrawerPopup: React.ForwardRefExoticComponent<DrawerPopupProps & React.RefAttributes<HTMLDivElement>>;
+export default RefDrawerPopup;

lib/DrawerPopup.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = DrawerPopup;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -23,4 +23,2 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// import type ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
-
 var sentinelStyle = {
@@ -33,3 +31,3 @@ width: 0,
 };
-function DrawerPopup(props) {
+function DrawerPopup(props, ref) {
   var _ref, _pushConfig$distance, _pushConfig, _classNames;
@@ -65,2 +63,5 @@ var prefixCls = props.prefixCls,
   var sentinelEndRef = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return panelRef.current;
+  });
   var onPanelKeyDown = function onPanelKeyDown(event) {
@@ -92,2 +93,3 @@ var keyCode = event.keyCode,
           if (onClose && keyboard) {
+            event.stopPropagation();
             onClose(event);
@@ -108,3 +110,3 @@ }
     }
-  }, [open, autoFocus]);
+  }, [open]);
   // ============================ Push ============================
@@ -245,2 +247,8 @@ var _React$useState = React.useState(false),
   })));
-}
+}
+var RefDrawerPopup = /*#__PURE__*/React.forwardRef(DrawerPopup);
+if (process.env.NODE_ENV !== 'production') {
+  RefDrawerPopup.displayName = 'DrawerPopup';
+}
+var _default = RefDrawerPopup;
+exports.default = _default;

package.json

 {
   "name": "rc-drawer",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "description": "drawer component for react",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48796

increased by4.66%

Lines of code

976

increased by5.29%

Worsened metrics

Number of low supply chain risk alerts

8

increased by33.33%

No dependency changes