rc-drawer - npm Package Compare versions

Comparing version 5.0.0-alpha.3 to 5.0.0-alpha.4

es/DrawerPanel.d.ts

@@ -14,6 +14,8 @@ import * as React from 'react';
     children?: React.ReactNode;
-    onClose?: React.KeyboardEventHandler<HTMLElement>;
     containerRef?: React.Ref<HTMLDivElement>;
 }
-declare const DrawerPanel: React.ForwardRefExoticComponent<DrawerPanelProps & React.RefAttributes<DrawerPanelRef>>;
+declare const DrawerPanel: {
+    (props: DrawerPanelProps): JSX.Element;
+    displayName: string;
+};
 export default DrawerPanel;

es/DrawerPanel.js

 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
 import classNames from 'classnames';
-import KeyCode from "rc-util/es/KeyCode";
-import { composeRef } from "rc-util/es/ref";
-var sentinelStyle = {
-  width: 0,
-  height: 0,
-  overflow: 'hidden',
-  outline: 'none',
-  position: 'absolute'
-};
-var DrawerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+
+var DrawerPanel = function DrawerPanel(props) {
   var prefixCls = props.prefixCls,
@@ -21,59 +13,4 @@ className = props.className,
       children = props.children,
-      onClose = props.onClose,
-      containerRef = props.containerRef; // ================================ Refs ================================
+      containerRef = props.containerRef; // =============================== Render ===============================
 
-  var panelRef = React.useRef();
-  var sentinelStartRef = React.useRef();
-  var sentinelEndRef = React.useRef();
-  React.useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        Promise.resolve().then(function () {
-          var _sentinelStartRef$cur;
-
-          (_sentinelStartRef$cur = sentinelStartRef.current) === null || _sentinelStartRef$cur === void 0 ? void 0 : _sentinelStartRef$cur.focus({
-            preventScroll: true
-          });
-        });
-      }
-    };
-  });
-
-  var onPanelKeyDown = function onPanelKeyDown(event) {
-    var keyCode = event.keyCode,
-        shiftKey = event.shiftKey;
-
-    switch (keyCode) {
-      // Tab active
-      case KeyCode.TAB:
-        {
-          if (keyCode === KeyCode.TAB) {
-            if (!shiftKey && document.activeElement === sentinelEndRef.current) {
-              var _sentinelStartRef$cur2;
-
-              (_sentinelStartRef$cur2 = sentinelStartRef.current) === null || _sentinelStartRef$cur2 === void 0 ? void 0 : _sentinelStartRef$cur2.focus({
-                preventScroll: true
-              });
-            } else if (shiftKey && document.activeElement === sentinelStartRef.current) {
-              var _sentinelEndRef$curre;
-
-              (_sentinelEndRef$curre = sentinelEndRef.current) === null || _sentinelEndRef$curre === void 0 ? void 0 : _sentinelEndRef$curre.focus({
-                preventScroll: true
-              });
-            }
-          }
-
-          break;
-        }
-      // Close
-
-      case KeyCode.ESC:
-        {
-          onClose(event);
-          break;
-        }
-    }
-  }; // =============================== Render ===============================
-
-
   var panelStyle = {};
@@ -92,17 +29,5 @@
     role: "dialog",
-    tabIndex: -1,
-    ref: composeRef(panelRef, containerRef),
-    onKeyDown: onPanelKeyDown
-  }, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelStartRef,
-    style: sentinelStyle,
-    "aria-hidden": "true"
-  }), children, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelEndRef,
-    style: sentinelStyle,
-    "aria-hidden": "true"
-  })));
-});
+    ref: containerRef
+  }, children));
+};
 
@@ -109,0 +34,0 @@ if (process.env.NODE_ENV !== 'production') {

es/DrawerPopup.js

@@ -10,2 +10,10 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import DrawerContext from './context';
+import KeyCode from "rc-util/es/KeyCode";
+var sentinelStyle = {
+  width: 0,
+  height: 0,
+  overflow: 'hidden',
+  outline: 'none',
+  position: 'absolute'
+};
 export default function DrawerPopup(props) {
@@ -39,4 +47,59 @@ var _ref, _pushConfig$distance, _pushConfig;
       afterOpenChange = props.afterOpenChange,
-      onClose = props.onClose; // ============================ Push ============================
+      onClose = props.onClose; // ================================ Refs ================================
 
+  var panelRef = React.useRef();
+  var sentinelStartRef = React.useRef();
+  var sentinelEndRef = React.useRef();
+
+  var onPanelKeyDown = function onPanelKeyDown(event) {
+    var keyCode = event.keyCode,
+        shiftKey = event.shiftKey;
+
+    switch (keyCode) {
+      // Tab active
+      case KeyCode.TAB:
+        {
+          if (keyCode === KeyCode.TAB) {
+            if (!shiftKey && document.activeElement === sentinelEndRef.current) {
+              var _sentinelStartRef$cur;
+
+              (_sentinelStartRef$cur = sentinelStartRef.current) === null || _sentinelStartRef$cur === void 0 ? void 0 : _sentinelStartRef$cur.focus({
+                preventScroll: true
+              });
+            } else if (shiftKey && document.activeElement === sentinelStartRef.current) {
+              var _sentinelEndRef$curre;
+
+              (_sentinelEndRef$curre = sentinelEndRef.current) === null || _sentinelEndRef$curre === void 0 ? void 0 : _sentinelEndRef$curre.focus({
+                preventScroll: true
+              });
+            }
+          }
+
+          break;
+        }
+      // Close
+
+      case KeyCode.ESC:
+        {
+          if (onClose && keyboard) {
+            onClose(event);
+          }
+
+          break;
+        }
+    }
+  }; // ========================== Control ===========================
+  // Auto Focus
+
+
+  React.useEffect(function () {
+    if (open && autoFocus) {
+      var _panelRef$current;
+
+      (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.focus({
+        preventScroll: true
+      });
+    }
+  }, [open, autoFocus]); // ============================ Push ============================
+
   var _React$useState = React.useState(false),
@@ -73,5 +136,4 @@ _React$useState2 = _slicedToArray(_React$useState, 2),
   }, [pushDistance]); // ========================= ScrollLock =========================
+  // Tell parent to push
 
-  var panelRef = React.useRef(); // Tell parent to push
-
   React.useEffect(function () {
@@ -102,20 +164,4 @@ if (open) {
     };
-  }, []); // ========================== Control ===========================
-  // Auto Focus
+  }, []); // =========================== zIndex ===========================
 
-  React.useEffect(function () {
-    if (open && autoFocus) {
-      var _panelRef$current;
-
-      (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.focus();
-    }
-  }, [open, autoFocus]);
-
-  var onPanelClose = function onPanelClose(event) {
-    if (onClose && keyboard) {
-      onClose(event);
-    }
-  }; // =========================== zIndex ===========================
-
-
   var zIndexStyle = {};
@@ -187,3 +233,2 @@
     return /*#__PURE__*/React.createElement(DrawerPanel, {
-      ref: panelRef,
       containerRef: motionRef,
@@ -195,4 +240,3 @@ prefixCls: prefixCls,
       height: height,
-      placement: placement,
-      onClose: onPanelClose
+      placement: placement
     }, children);
@@ -205,4 +249,19 @@ })); // =========================== Render ===========================
     className: classNames(prefixCls, "".concat(prefixCls, "-").concat(placement), rootClassName, _defineProperty({}, "".concat(prefixCls, "-inline"), inline)),
-    style: rootStyle
-  }, maskNode, panelNode));
+    style: rootStyle,
+    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"
+  })));
 }

lib/DrawerPanel.d.ts

@@ -14,6 +14,8 @@ import * as React from 'react';
     children?: React.ReactNode;
-    onClose?: React.KeyboardEventHandler<HTMLElement>;
     containerRef?: React.Ref<HTMLDivElement>;
 }
-declare const DrawerPanel: React.ForwardRefExoticComponent<DrawerPanelProps & React.RefAttributes<DrawerPanelRef>>;
+declare const DrawerPanel: {
+    (props: DrawerPanelProps): JSX.Element;
+    displayName: string;
+};
 export default DrawerPanel;

lib/DrawerPanel.js

@@ -18,6 +18,2 @@ "use strict";
 
-var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
-
-var _ref = require("rc-util/lib/ref");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,10 +23,3 @@
 
-var sentinelStyle = {
-  width: 0,
-  height: 0,
-  overflow: 'hidden',
-  outline: 'none',
-  position: 'absolute'
-};
-var DrawerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var DrawerPanel = function DrawerPanel(props) {
   var prefixCls = props.prefixCls,
@@ -43,59 +32,4 @@ className = props.className,
       children = props.children,
-      onClose = props.onClose,
-      containerRef = props.containerRef; // ================================ Refs ================================
+      containerRef = props.containerRef; // =============================== Render ===============================
 
-  var panelRef = React.useRef();
-  var sentinelStartRef = React.useRef();
-  var sentinelEndRef = React.useRef();
-  React.useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        Promise.resolve().then(function () {
-          var _sentinelStartRef$cur;
-
-          (_sentinelStartRef$cur = sentinelStartRef.current) === null || _sentinelStartRef$cur === void 0 ? void 0 : _sentinelStartRef$cur.focus({
-            preventScroll: true
-          });
-        });
-      }
-    };
-  });
-
-  var onPanelKeyDown = function onPanelKeyDown(event) {
-    var keyCode = event.keyCode,
-        shiftKey = event.shiftKey;
-
-    switch (keyCode) {
-      // Tab active
-      case _KeyCode.default.TAB:
-        {
-          if (keyCode === _KeyCode.default.TAB) {
-            if (!shiftKey && document.activeElement === sentinelEndRef.current) {
-              var _sentinelStartRef$cur2;
-
-              (_sentinelStartRef$cur2 = sentinelStartRef.current) === null || _sentinelStartRef$cur2 === void 0 ? void 0 : _sentinelStartRef$cur2.focus({
-                preventScroll: true
-              });
-            } else if (shiftKey && document.activeElement === sentinelStartRef.current) {
-              var _sentinelEndRef$curre;
-
-              (_sentinelEndRef$curre = sentinelEndRef.current) === null || _sentinelEndRef$curre === void 0 ? void 0 : _sentinelEndRef$curre.focus({
-                preventScroll: true
-              });
-            }
-          }
-
-          break;
-        }
-      // Close
-
-      case _KeyCode.default.ESC:
-        {
-          onClose(event);
-          break;
-        }
-    }
-  }; // =============================== Render ===============================
-
-
   var panelStyle = {};
@@ -114,17 +48,5 @@
     role: "dialog",
-    tabIndex: -1,
-    ref: (0, _ref.composeRef)(panelRef, containerRef),
-    onKeyDown: onPanelKeyDown
-  }, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelStartRef,
-    style: sentinelStyle,
-    "aria-hidden": "true"
-  }), children, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    ref: sentinelEndRef,
-    style: sentinelStyle,
-    "aria-hidden": "true"
-  })));
-});
+    ref: containerRef
+  }, children));
+};
 
@@ -131,0 +53,0 @@ if (process.env.NODE_ENV !== 'production') {

lib/DrawerPopup.js

@@ -30,2 +30,4 @@ "use strict";
 
+var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,2 +37,10 @@
 
+var sentinelStyle = {
+  width: 0,
+  height: 0,
+  overflow: 'hidden',
+  outline: 'none',
+  position: 'absolute'
+};
+
 function DrawerPopup(props) {
@@ -64,4 +74,59 @@ var _ref, _pushConfig$distance, _pushConfig;
       afterOpenChange = props.afterOpenChange,
-      onClose = props.onClose; // ============================ Push ============================
+      onClose = props.onClose; // ================================ Refs ================================
 
+  var panelRef = React.useRef();
+  var sentinelStartRef = React.useRef();
+  var sentinelEndRef = React.useRef();
+
+  var onPanelKeyDown = function onPanelKeyDown(event) {
+    var keyCode = event.keyCode,
+        shiftKey = event.shiftKey;
+
+    switch (keyCode) {
+      // Tab active
+      case _KeyCode.default.TAB:
+        {
+          if (keyCode === _KeyCode.default.TAB) {
+            if (!shiftKey && document.activeElement === sentinelEndRef.current) {
+              var _sentinelStartRef$cur;
+
+              (_sentinelStartRef$cur = sentinelStartRef.current) === null || _sentinelStartRef$cur === void 0 ? void 0 : _sentinelStartRef$cur.focus({
+                preventScroll: true
+              });
+            } else if (shiftKey && document.activeElement === sentinelStartRef.current) {
+              var _sentinelEndRef$curre;
+
+              (_sentinelEndRef$curre = sentinelEndRef.current) === null || _sentinelEndRef$curre === void 0 ? void 0 : _sentinelEndRef$curre.focus({
+                preventScroll: true
+              });
+            }
+          }
+
+          break;
+        }
+      // Close
+
+      case _KeyCode.default.ESC:
+        {
+          if (onClose && keyboard) {
+            onClose(event);
+          }
+
+          break;
+        }
+    }
+  }; // ========================== Control ===========================
+  // Auto Focus
+
+
+  React.useEffect(function () {
+    if (open && autoFocus) {
+      var _panelRef$current;
+
+      (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.focus({
+        preventScroll: true
+      });
+    }
+  }, [open, autoFocus]); // ============================ Push ============================
+
   var _React$useState = React.useState(false),
@@ -98,5 +163,4 @@ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
   }, [pushDistance]); // ========================= ScrollLock =========================
+  // Tell parent to push
 
-  var panelRef = React.useRef(); // Tell parent to push
-
   React.useEffect(function () {
@@ -127,20 +191,4 @@ if (open) {
     };
-  }, []); // ========================== Control ===========================
-  // Auto Focus
+  }, []); // =========================== zIndex ===========================
 
-  React.useEffect(function () {
-    if (open && autoFocus) {
-      var _panelRef$current;
-
-      (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.focus();
-    }
-  }, [open, autoFocus]);
-
-  var onPanelClose = function onPanelClose(event) {
-    if (onClose && keyboard) {
-      onClose(event);
-    }
-  }; // =========================== zIndex ===========================
-
-
   var zIndexStyle = {};
@@ -212,3 +260,2 @@
     return /*#__PURE__*/React.createElement(_DrawerPanel.default, {
-      ref: panelRef,
       containerRef: motionRef,
@@ -220,4 +267,3 @@ prefixCls: prefixCls,
       height: height,
-      placement: placement,
-      onClose: onPanelClose
+      placement: placement
     }, children);
@@ -230,4 +276,19 @@ })); // =========================== Render ===========================
     className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(placement), rootClassName, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-inline"), inline)),
-    style: rootStyle
-  }, maskNode, panelNode));
+    style: rootStyle,
+    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"
+  })));
 }

package.json

 {
   "name": "rc-drawer",
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.4",
   "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

Worsened metrics

Total package byte prevSize

47065

decreased by-2.62%

Lines of code

911

decreased by-2.57%

No dependency changes