@szhsin/react-menu - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/index.js

@@ -6,2 +6,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var PropTypes = _interopDefault(require('prop-types'));
+var ReactDOM = _interopDefault(require('react-dom'));
 
@@ -106,2 +107,3 @@ var menuContainerClass = 'rc-menu-container';
   viewScroll: PropTypes.oneOf(['auto', 'close', 'initial']),
+  portal: PropTypes.bool,
   onClick: PropTypes.func
@@ -1127,3 +1129,3 @@ });
 
-var useMenuList = function useMenuList(menuListProps, id, animation, debugging, viewScroll, onClick, onClose, skipClick) {
+var useMenuList = function useMenuList(menuListProps, id, animation, debugging, viewScroll, portal, onClick, onClose, skipClick) {
   var containerRef = React.useRef(null);
@@ -1186,3 +1188,3 @@ var settings = React.useMemo(function () {
 
-  return /*#__PURE__*/React__default.createElement("div", {
+  var menuList = /*#__PURE__*/React__default.createElement("div", {
     id: id,
@@ -1202,2 +1204,8 @@ className: bem(menuContainerClass)(),
   })))));
+
+  if (portal) {
+    return /*#__PURE__*/ReactDOM.createPortal(menuList, document.body);
+  } else {
+    return menuList;
+  }
 };
@@ -1213,5 +1221,6 @@
       menuButton = _ref.menuButton,
+      portal = _ref.portal,
       onClick = _ref.onClick,
       onChange = _ref.onChange,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["aria-label", "id", "animation", "debugging", "viewScroll", "keepMounted", "menuButton", "onClick", "onChange"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["aria-label", "id", "animation", "debugging", "viewScroll", "keepMounted", "menuButton", "portal", "onClick", "onChange"]);
 
@@ -1277,3 +1286,3 @@ var _useMenuState = useMenuState(keepMounted),
     menuItemFocus: menuItemFocus
-  }), id, animation, debugging, viewScroll, onClick, handleClose, skipClick);
+  }), id, animation, debugging, viewScroll, portal, onClick, handleClose, skipClick);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderButton, menuList);
@@ -1296,9 +1305,10 @@ });
       viewScroll = _ref.viewScroll,
+      portal = _ref.portal,
       onClick = _ref.onClick,
       onClose = _ref.onClose,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["aria-label", "id", "animation", "debugging", "viewScroll", "onClick", "onClose"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["aria-label", "id", "animation", "debugging", "viewScroll", "portal", "onClick", "onClose"]);
 
   return useMenuList(_extends({}, restProps, {
     ariaLabel: ariaLabel || 'Menu'
-  }), id, animation, debugging, viewScroll, onClick, onClose);
+  }), id, animation, debugging, viewScroll, portal, onClick, onClose);
 });
@@ -1305,0 +1315,0 @@ ControlledMenu.propTypes = _extends({}, menuPropTypesBase, {

dist/index.modern.js

 import React, { useCallback, useState, useMemo, useRef, useContext, useEffect, useReducer, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
 
@@ -69,2 +70,3 @@ const menuContainerClass = 'rc-menu-container';
   viewScroll: PropTypes.oneOf(['auto', 'close', 'initial']),
+  portal: PropTypes.bool,
   onClick: PropTypes.func
@@ -1020,3 +1022,3 @@ };
 
-const useMenuList = (menuListProps, id, animation, debugging, viewScroll, onClick, onClose, skipClick) => {
+const useMenuList = (menuListProps, id, animation, debugging, viewScroll, portal, onClick, onClose, skipClick) => {
   const containerRef = useRef(null);
@@ -1075,3 +1077,3 @@ const settings = useMemo(() => ({
 
-  return /*#__PURE__*/React.createElement("div", {
+  const menuList = /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -1091,2 +1093,8 @@ className: bem(menuContainerClass)(),
   })))));
+
+  if (portal) {
+    return /*#__PURE__*/ReactDOM.createPortal(menuList, document.body);
+  } else {
+    return menuList;
+  }
 };
@@ -1102,2 +1110,3 @@
   menuButton,
+  portal,
   onClick,
@@ -1167,3 +1176,3 @@ onChange,
     menuItemFocus
-  }, id, animation, debugging, viewScroll, onClick, handleClose, skipClick);
+  }, id, animation, debugging, viewScroll, portal, onClick, handleClose, skipClick);
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderButton, menuList);
@@ -1186,2 +1195,3 @@ });
   viewScroll,
+  portal,
   onClick,
@@ -1193,3 +1203,3 @@ onClose,
     ariaLabel: ariaLabel || 'Menu'
-  }, id, animation, debugging, viewScroll, onClick, onClose);
+  }, id, animation, debugging, viewScroll, portal, onClick, onClose);
 });
@@ -1196,0 +1206,0 @@ ControlledMenu.propTypes = { ...menuPropTypesBase,

package.json

 {
   "name": "@szhsin/react-menu",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "An accessible, responsive, and customisable React menu library.",
@@ -5,0 +5,0 @@ "author": "Zheng Song",

No alert changes

Improved metrics

Total package byte prevSize

109420

increased by0.51%

Lines of code

3380

increased by0.54%

No dependency changes