@reach/menu-button - npm Package Compare versions

Comparing version 0.15.3 to 0.16.0

dist/declarations/src/index.d.ts

@@ -23,3 +23,3 @@ /**
  */
-declare const Menu: React.FC<MenuProps>;
+declare const Menu: Polymorphic.ForwardRefComponent<any, MenuProps>;
 /**
@@ -26,0 +26,0 @@ * @see Docs https://reach.tech/menu-button#menu-props

dist/reach-menu-button.cjs.dev.js

@@ -12,2 +12,3 @@ 'use strict';
 var devUtils = require('@reach/utils/dev-utils');
+var reactIs = require('react-is');
 
@@ -52,10 +53,10 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
-var _excluded = ["as"],
+var _excluded = ["as", "id", "children"],
     _excluded2 = ["as"],
     _excluded3 = ["as"],
     _excluded4 = ["as"],
-    _excluded5 = ["as", "component", "onSelect"],
-    _excluded6 = ["portal"],
-    _excluded7 = ["as"];
-
+    _excluded5 = ["as"],
+    _excluded6 = ["as", "component", "onSelect"],
+    _excluded7 = ["portal"],
+    _excluded8 = ["as"];
 ////////////////////////////////////////////////////////////////////////////////
@@ -70,11 +71,31 @@
  */
-var Menu = function Menu(_ref) {
-  var id = _ref.id,
-      children = _ref.children;
+var Menu = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? React.Fragment : _ref$as,
+      id = _ref.id,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   devUtils.useCheckStyles("menu-button");
-  return /*#__PURE__*/React.createElement(dropdown.DropdownProvider, {
+  var parentIsFragment = React.useMemo(function () {
+    try {
+      // To test if the component renders a fragment we need to actually
+      // render it, but this may throw an error since we can't predict what is
+      // actually provided. There's technically a small chance that this could
+      // get it wrong but I don't think it's too likely in practice.
+      return reactIs.isFragment( /*#__PURE__*/React.createElement(Comp, null));
+    } catch (err) {
+      return false;
+    }
+  }, [Comp]);
+  var props = parentIsFragment ? {} : _extends({
+    ref: forwardedRef,
     id: id,
+    "data-reach-menu": ""
+  }, rest);
+  return /*#__PURE__*/React.createElement(Comp, props, /*#__PURE__*/React.createElement(dropdown.DropdownProvider, {
+    id: id,
     children: children
-  });
-};
+  }));
+});
 /**
@@ -84,3 +105,2 @@ * @see Docs https://reach.tech/menu-button#menu-props
 
-
 if (process.env.NODE_ENV !== "production") {
@@ -106,3 +126,3 @@ Menu.displayName = "Menu";
       Comp = _ref2$as === void 0 ? "button" : _ref2$as,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -156,3 +176,3 @@ var _useDropdownTrigger = dropdown.useDropdownTrigger(_extends({}, rest, {
       Comp = _ref3$as === void 0 ? "div" : _ref3$as,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
@@ -184,3 +204,3 @@ var _useDropdownItem = dropdown.useDropdownItem(_extends({}, rest, {
       as = _ref4$as === void 0 ? "div" : _ref4$as,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
@@ -218,3 +238,3 @@ return /*#__PURE__*/React.createElement(MenuItemImpl, _extends({}, props, {
       Comp = _ref5$as === void 0 ? "div" : _ref5$as,
-      rest = _objectWithoutPropertiesLoose(_ref5, _excluded4);
+      rest = _objectWithoutPropertiesLoose(_ref5, _excluded5);
 
@@ -281,3 +301,3 @@ var _useDropdownItems = dropdown.useDropdownItems(_extends({}, rest, {
       onSelect = _ref6.onSelect,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded5);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
 
@@ -317,3 +337,3 @@ useDevWarning(!component, "[@reach/menu-button]: Please use the `as` prop instead of `component`");
       portal = _ref7$portal === void 0 ? true : _ref7$portal,
-      props = _objectWithoutPropertiesLoose(_ref7, _excluded6);
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
 
@@ -353,3 +373,3 @@ return /*#__PURE__*/React.createElement(MenuPopover, {
       Comp = _ref8$as === void 0 ? "div" : _ref8$as,
-      rest = _objectWithoutPropertiesLoose(_ref8, _excluded7);
+      rest = _objectWithoutPropertiesLoose(_ref8, _excluded8);
 
@@ -366,4 +386,2 @@ var _useDropdownPopover = dropdown.useDropdownPopover(_extends({}, rest, {
   var sharedProps = {
-    // TODO: remove in 1.0
-    "data-reach-menu": "",
     "data-reach-menu-popover": ""
@@ -370,0 +388,0 @@ };

dist/reach-menu-button.cjs.prod.js

@@ -12,2 +12,3 @@ 'use strict';
 var devUtils = require('@reach/utils/dev-utils');
+var reactIs = require('react-is');
 
@@ -47,10 +48,10 @@ function _extends() {
 
-var _excluded = ["as"],
+var _excluded = ["as", "id", "children"],
     _excluded2 = ["as"],
     _excluded3 = ["as"],
     _excluded4 = ["as"],
-    _excluded5 = ["as", "component", "onSelect"],
-    _excluded6 = ["portal"],
-    _excluded7 = ["as"];
-
+    _excluded5 = ["as"],
+    _excluded6 = ["as", "component", "onSelect"],
+    _excluded7 = ["portal"],
+    _excluded8 = ["as"];
 ////////////////////////////////////////////////////////////////////////////////
@@ -65,11 +66,31 @@
  */
-var Menu = function Menu(_ref) {
-  var id = _ref.id,
-      children = _ref.children;
+var Menu = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? React.Fragment : _ref$as,
+      id = _ref.id,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   devUtils.useCheckStyles("menu-button");
-  return /*#__PURE__*/React.createElement(dropdown.DropdownProvider, {
+  var parentIsFragment = React.useMemo(function () {
+    try {
+      // To test if the component renders a fragment we need to actually
+      // render it, but this may throw an error since we can't predict what is
+      // actually provided. There's technically a small chance that this could
+      // get it wrong but I don't think it's too likely in practice.
+      return reactIs.isFragment( /*#__PURE__*/React.createElement(Comp, null));
+    } catch (err) {
+      return false;
+    }
+  }, [Comp]);
+  var props = parentIsFragment ? {} : _extends({
+    ref: forwardedRef,
     id: id,
+    "data-reach-menu": ""
+  }, rest);
+  return /*#__PURE__*/React.createElement(Comp, props, /*#__PURE__*/React.createElement(dropdown.DropdownProvider, {
+    id: id,
     children: children
-  });
-};
+  }));
+});
 
@@ -89,3 +110,3 @@ /**
       Comp = _ref2$as === void 0 ? "button" : _ref2$as,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -129,3 +150,3 @@ var _useDropdownTrigger = dropdown.useDropdownTrigger(_extends({}, rest, {
       Comp = _ref3$as === void 0 ? "div" : _ref3$as,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
@@ -157,3 +178,3 @@ var _useDropdownItem = dropdown.useDropdownItem(_extends({}, rest, {
       as = _ref4$as === void 0 ? "div" : _ref4$as,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
@@ -180,3 +201,3 @@ return /*#__PURE__*/React.createElement(MenuItemImpl, _extends({}, props, {
       Comp = _ref5$as === void 0 ? "div" : _ref5$as,
-      rest = _objectWithoutPropertiesLoose(_ref5, _excluded4);
+      rest = _objectWithoutPropertiesLoose(_ref5, _excluded5);
 
@@ -233,3 +254,3 @@ var _useDropdownItems = dropdown.useDropdownItems(_extends({}, rest, {
       var onSelect = _ref6.onSelect,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded5);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
   return /*#__PURE__*/React.createElement(MenuItemImpl, _extends({}, props, {
@@ -257,3 +278,3 @@ ref: forwardedRef,
       portal = _ref7$portal === void 0 ? true : _ref7$portal,
-      props = _objectWithoutPropertiesLoose(_ref7, _excluded6);
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
 
@@ -283,3 +304,3 @@ return /*#__PURE__*/React.createElement(MenuPopover, {
       Comp = _ref8$as === void 0 ? "div" : _ref8$as,
-      rest = _objectWithoutPropertiesLoose(_ref8, _excluded7);
+      rest = _objectWithoutPropertiesLoose(_ref8, _excluded8);
 
@@ -296,4 +317,2 @@ var _useDropdownPopover = dropdown.useDropdownPopover(_extends({}, rest, {
   var sharedProps = {
-    // TODO: remove in 1.0
-    "data-reach-menu": "",
     "data-reach-menu-popover": ""
@@ -300,0 +319,0 @@ };

dist/reach-menu-button.esm.js

@@ -1,2 +0,2 @@
-import { createElement, forwardRef, useMemo, useRef, useEffect } from 'react';
+import { forwardRef, useMemo, createElement, useRef, useEffect, Fragment } from 'react';
 import PropTypes from 'prop-types';
@@ -8,2 +8,3 @@ import warning from 'tiny-warning';
 import { useCheckStyles } from '@reach/utils/dev-utils';
+import { isFragment } from 'react-is';
 
@@ -43,10 +44,10 @@ function _extends() {
 
-var _excluded = ["as"],
+var _excluded = ["as", "id", "children"],
     _excluded2 = ["as"],
     _excluded3 = ["as"],
     _excluded4 = ["as"],
-    _excluded5 = ["as", "component", "onSelect"],
-    _excluded6 = ["portal"],
-    _excluded7 = ["as"];
-
+    _excluded5 = ["as"],
+    _excluded6 = ["as", "component", "onSelect"],
+    _excluded7 = ["portal"],
+    _excluded8 = ["as"];
 ////////////////////////////////////////////////////////////////////////////////
@@ -61,11 +62,31 @@
  */
-var Menu = function Menu(_ref) {
-  var id = _ref.id,
-      children = _ref.children;
+var Menu = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? Fragment : _ref$as,
+      id = _ref.id,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   useCheckStyles("menu-button");
-  return /*#__PURE__*/createElement(DropdownProvider, {
+  var parentIsFragment = useMemo(function () {
+    try {
+      // To test if the component renders a fragment we need to actually
+      // render it, but this may throw an error since we can't predict what is
+      // actually provided. There's technically a small chance that this could
+      // get it wrong but I don't think it's too likely in practice.
+      return isFragment( /*#__PURE__*/createElement(Comp, null));
+    } catch (err) {
+      return false;
+    }
+  }, [Comp]);
+  var props = parentIsFragment ? {} : _extends({
+    ref: forwardedRef,
     id: id,
+    "data-reach-menu": ""
+  }, rest);
+  return /*#__PURE__*/createElement(Comp, props, /*#__PURE__*/createElement(DropdownProvider, {
+    id: id,
     children: children
-  });
-};
+  }));
+});
 /**
@@ -75,3 +96,2 @@ * @see Docs https://reach.tech/menu-button#menu-props
 
-
 if (process.env.NODE_ENV !== "production") {
@@ -97,3 +117,3 @@ Menu.displayName = "Menu";
       Comp = _ref2$as === void 0 ? "button" : _ref2$as,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -147,3 +167,3 @@ var _useDropdownTrigger = useDropdownTrigger(_extends({}, rest, {
       Comp = _ref3$as === void 0 ? "div" : _ref3$as,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
@@ -175,3 +195,3 @@ var _useDropdownItem = useDropdownItem(_extends({}, rest, {
       as = _ref4$as === void 0 ? "div" : _ref4$as,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
@@ -209,3 +229,3 @@ return /*#__PURE__*/createElement(MenuItemImpl, _extends({}, props, {
       Comp = _ref5$as === void 0 ? "div" : _ref5$as,
-      rest = _objectWithoutPropertiesLoose(_ref5, _excluded4);
+      rest = _objectWithoutPropertiesLoose(_ref5, _excluded5);
 
@@ -272,3 +292,3 @@ var _useDropdownItems = useDropdownItems(_extends({}, rest, {
       onSelect = _ref6.onSelect,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded5);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
 
@@ -308,3 +328,3 @@ useDevWarning(!component, "[@reach/menu-button]: Please use the `as` prop instead of `component`");
       portal = _ref7$portal === void 0 ? true : _ref7$portal,
-      props = _objectWithoutPropertiesLoose(_ref7, _excluded6);
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
 
@@ -344,3 +364,3 @@ return /*#__PURE__*/createElement(MenuPopover, {
       Comp = _ref8$as === void 0 ? "div" : _ref8$as,
-      rest = _objectWithoutPropertiesLoose(_ref8, _excluded7);
+      rest = _objectWithoutPropertiesLoose(_ref8, _excluded8);
 
@@ -357,4 +377,2 @@ var _useDropdownPopover = useDropdownPopover(_extends({}, rest, {
   var sharedProps = {
-    // TODO: remove in 1.0
-    "data-reach-menu": "",
     "data-reach-menu-popover": ""
@@ -361,0 +379,0 @@ };

package.json

 {
   "name": "@reach/menu-button",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "description": "Accessible React button dropdown menu.",
@@ -16,5 +16,5 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/dropdown": "0.15.3",
-    "@reach/popover": "0.15.3",
-    "@reach/utils": "0.15.3",
+    "@reach/dropdown": "0.16.0",
+    "@reach/popover": "0.16.0",
+    "@reach/utils": "0.16.0",
     "prop-types": "^15.7.2",
@@ -26,7 +26,9 @@ "tiny-warning": "^1.0.3",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || 17.x",
-    "react-dom": "^16.8.0 || 17.x"
+    "react-dom": "^16.8.0 || 17.x",
+    "react-is": "^16.8.0 || 17.x"
   },
@@ -45,3 +47,3 @@ "main": "dist/reach-menu-button.cjs.js",
   ],
-  "gitHead": "aac3d3e1902ec32656476bcdccd7b56207384fcd"
+  "gitHead": "e4c6093db14e3cc24c26794a002dbd8c866c0387"
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50796

increased by5.65%

Lines of code

1310

increased by4.63%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

9

increased by12.5%

Dev dependency count

3

increased by50%

Dependency changes

• + Added@reach/auto-id@0.16.0(transitive)

• + Added@reach/descendants@0.16.0(transitive)

• + Added@reach/dropdown@0.16.0(transitive)

• + Added@reach/popover@0.16.0(transitive)

• + Added@reach/portal@0.16.0(transitive)

• + Added@reach/rect@0.16.0(transitive)

• + Added@reach/utils@0.16.0(transitive)

• + Addedreact-is@17.0.2(transitive)

• - Removed@reach/auto-id@0.15.3(transitive)

• - Removed@reach/descendants@0.15.3(transitive)

• - Removed@reach/dropdown@0.15.3(transitive)

• - Removed@reach/popover@0.15.3(transitive)

• - Removed@reach/portal@0.15.3(transitive)

• - Removed@reach/rect@0.15.3(transitive)

• - Removed@reach/utils@0.15.3(transitive)

• Updated@reach/dropdown@0.16.0

• Updated@reach/popover@0.16.0

• Updated@reach/utils@0.16.0