@mturco/menu-button - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

package.json

 {
   "name": "@mturco/menu-button",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Accessible React button dropdown menu.",
@@ -5,0 +5,0 @@ "author": "Ryan Florence <@ryanflorence>",

src/index.js

@@ -90,49 +90,51 @@ import React from "react";
 ////////////////////////////////////////////////////////////////////////
-let MenuButton = React.forwardRef(({ onClick, onKeyDown, ...props }, ref) => (
-  <Consumer>
-    {({ refs, state, setState }) => (
-      <Rect
-        observe={state.isOpen}
-        onChange={buttonRect => setState({ buttonRect })}
-      >
-        {({ ref: rectRef }) => (
-          <button
-            id={state.buttonId}
-            aria-haspopup="menu"
-            aria-expanded={state.isOpen}
-            data-reach-menu-button
-            type="button"
-            ref={node => {
-              rectRef(node);
-              ref && ref(node);
-              refs.button = node;
-            }}
-            onMouseDown={event => {
-              if (state.isOpen) {
-                setState({ closingWithClick: true });
-              }
-            }}
-            onClick={wrapEvent(onClick, event => {
-              if (state.isOpen) {
-                setState(close);
-              } else {
-                setState(openAtFirstItem);
-              }
-            })}
-            onKeyDown={wrapEvent(onKeyDown, event => {
-              if (event.key === "ArrowDown") {
-                event.preventDefault(); // prevent scroll
-                setState(openAtFirstItem);
-              } else if (event.key === "ArrowUp") {
-                event.preventDefault(); // prevent scroll
-                setState(openAtFirstItem);
-              }
-            })}
-            {...props}
-          />
-        )}
-      </Rect>
-    )}
-  </Consumer>
-));
+let MenuButton = React.forwardRef(
+  ({ onClick, onKeyDown, component: Comp = "button", ...props }, ref) => (
+    <Consumer>
+      {({ refs, state, setState }) => (
+        <Rect
+          observe={state.isOpen}
+          onChange={buttonRect => setState({ buttonRect })}
+        >
+          {({ ref: rectRef }) => (
+            <Comp
+              id={state.buttonId}
+              aria-haspopup="menu"
+              aria-expanded={state.isOpen}
+              data-reach-menu-button
+              type="button"
+              ref={node => {
+                rectRef(node);
+                ref && ref(node);
+                refs.button = node;
+              }}
+              onMouseDown={event => {
+                if (state.isOpen) {
+                  setState({ closingWithClick: true });
+                }
+              }}
+              onClick={wrapEvent(onClick, event => {
+                if (state.isOpen) {
+                  setState(close);
+                } else {
+                  setState(openAtFirstItem);
+                }
+              })}
+              onKeyDown={wrapEvent(onKeyDown, event => {
+                if (event.key === "ArrowDown") {
+                  event.preventDefault(); // prevent scroll
+                  setState(openAtFirstItem);
+                } else if (event.key === "ArrowUp") {
+                  event.preventDefault(); // prevent scroll
+                  setState(openAtFirstItem);
+                }
+              })}
+              {...props}
+            />
+          )}
+        </Rect>
+      )}
+    </Consumer>
+  )
+);
 
@@ -142,2 +144,3 @@ MenuButton.propTypes = {
   onKeyDown: func,
+  component: oneOfType([string, node]),
   children: node
@@ -144,0 +147,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

13355

increased by1.25%

Lines of code

434

increased by0.7%

No dependency changes