@reach/menu-button - npm Package Compare versions

Comparing version 0.10.5 to 0.11.0

dist/index.d.ts

@@ -7,3 +7,3 @@ /**
  *
- * @see Docs     https://reacttraining.com/reach-ui/menu-button
+ * @see Docs     https://reach.tech/menu-button
  * @see Source   https://github.com/reach/reach-ui/tree/main/packages/menu-button
@@ -21,7 +21,7 @@ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#menubutton
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menu
+ * @see Docs https://reach.tech/menu-button#menu
  */
 export declare const Menu: React.FC<MenuProps>;
 /**
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menu-props
+ * @see Docs https://reach.tech/menu-button#menu-props
  */
@@ -32,3 +32,3 @@ export interface MenuProps {
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menu-children
+     * @see Docs https://reach.tech/menu-button#menu-children
      */
@@ -46,7 +46,7 @@ children: React.ReactNode | ((props: MenuContextValue & {
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menubutton
+ * @see Docs https://reach.tech/menu-button#menubutton
  */
-export declare const MenuButton: import("@reach/utils").ForwardRefExoticComponentWithAs<"button", MenuButtonProps>;
+export declare const MenuButton: import("../../utils/src").ForwardRefExoticComponentWithAs<"button", MenuButtonProps>;
 /**
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menubutton-props
+ * @see Docs https://reach.tech/menu-button#menubutton-props
  */
@@ -57,3 +57,3 @@ export declare type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menubutton-children
+     * @see Docs https://reach.tech/menu-button#menubutton-children
      */
@@ -66,3 +66,3 @@ children: React.ReactNode;
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem-children
+     * @see Docs https://reach.tech/menu-button#menuitem-children
      */
@@ -73,3 +73,3 @@ children: React.ReactNode;
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem-onselect
+     * @see Docs https://reach.tech/menu-button#menuitem-onselect
      */
@@ -80,2 +80,8 @@ onSelect(): void;
     valueText?: string;
+    /**
+     * Whether or not the item is disabled from selection and navigation.
+     *
+     * @see Docs https://reach.tech/menu-button#menuitem-disabled
+     */
+    disabled?: boolean;
 };
@@ -87,7 +93,7 @@ /**
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem
+ * @see Docs https://reach.tech/menu-button#menuitem
  */
-export declare const MenuItem: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", Pick<MenuItemImplProps, "children" | "onSelect" | "index" | "valueText">>;
+export declare const MenuItem: import("../../utils/src").ForwardRefExoticComponentWithAs<"div", Pick<MenuItemImplProps, "children" | "disabled" | "onSelect" | "index" | "valueText">>;
 /**
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem-props
+ * @see Docs https://reach.tech/menu-button#menuitem-props
  */
@@ -102,7 +108,7 @@ export declare type MenuItemProps = Omit<MenuItemImplProps, "isLink">;
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitems
+ * @see Docs https://reach.tech/menu-button#menuitems
  */
-export declare const MenuItems: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", MenuItemsProps>;
+export declare const MenuItems: import("../../utils/src").ForwardRefExoticComponentWithAs<"div", MenuItemsProps>;
 /**
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitems-props
+ * @see Docs https://reach.tech/menu-button#menuitems-props
  */
@@ -113,3 +119,3 @@ export declare type MenuItemsProps = {
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitems-children
+     * @see Docs https://reach.tech/menu-button#menuitems-children
      */
@@ -127,5 +133,5 @@ children: React.ReactNode;
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menulink
+ * @see Docs https://reach.tech/menu-button#menulink
  */
-export declare const MenuLink: import("@reach/utils").ForwardRefExoticComponentWithAs<"a", Pick<MenuItemImplProps, "children" | "index" | "valueText"> & {
+export declare const MenuLink: import("../../utils/src").ForwardRefExoticComponentWithAs<"a", Pick<MenuItemImplProps, "children" | "disabled" | "index" | "valueText"> & {
     onSelect?(): void;
@@ -136,3 +142,3 @@ } & {
 /**
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menulink-props
+ * @see Docs https://reach.tech/menu-button#menulink-props
  */
@@ -148,3 +154,3 @@ export declare type MenuLinkProps = Omit<MenuItemImplProps, "isLink" | "onSelect"> & {
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist
+ * @see Docs https://reach.tech/menu-button#menulist
  */
@@ -156,3 +162,3 @@ export declare const MenuList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-portal
+     * @see Docs https://reach.tech/menu-button#menulist-portal
      */
@@ -163,3 +169,3 @@ portal?: boolean | undefined;
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-children
+     * @see Docs https://reach.tech/menu-button#menulist-children
      */
@@ -169,3 +175,3 @@ children: React.ReactNode;
 /**
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-props
+ * @see Docs https://reach.tech/menu-button#menulist-props
  */
@@ -177,3 +183,3 @@ export declare type MenuListProps = React.HTMLAttributes<HTMLDivElement> & {
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-portal
+     * @see Docs https://reach.tech/menu-button#menulist-portal
      */
@@ -184,3 +190,3 @@ portal?: boolean;
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist-children
+     * @see Docs https://reach.tech/menu-button#menulist-children
      */
@@ -197,3 +203,3 @@ children: React.ReactNode;
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover
+ * @see Docs https://reach.tech/menu-button#menupopover
  */
@@ -204,3 +210,3 @@ export declare const MenuPopover: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-children
+     * @see Docs https://reach.tech/menu-button#menupopover-children
      */
@@ -212,9 +218,18 @@ children: React.ReactNode;
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-portal
+     * @see Docs https://reach.tech/menu-button#menupopover-portal
      */
     portal?: boolean | undefined;
+    /**
+     * A function used to determine the position of the popover in relation to the
+     * menu button. By default, the menu button will attempt to position the
+     * popover below the button aligned with its left edge. If this positioning
+     * results in collisions with any side of the window, the popover will be
+     * anchored to a different side to avoid those collisions if possible.
+     *
+     * @see Docs https://reach.tech/menu-button#menupopover-position
+     */
     position?: Position | undefined;
 } & React.RefAttributes<any>>;
 /**
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-props
+ * @see Docs https://reach.tech/menu-button#menupopover-props
  */
@@ -225,3 +240,3 @@ export declare type MenuPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-children
+     * @see Docs https://reach.tech/menu-button#menupopover-children
      */
@@ -233,5 +248,14 @@ children: React.ReactNode;
      *
-     * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover-portal
+     * @see Docs https://reach.tech/menu-button#menupopover-portal
      */
     portal?: boolean;
+    /**
+     * A function used to determine the position of the popover in relation to the
+     * menu button. By default, the menu button will attempt to position the
+     * popover below the button aligned with its left edge. If this positioning
+     * results in collisions with any side of the window, the popover will be
+     * anchored to a different side to avoid those collisions if possible.
+     *
+     * @see Docs https://reach.tech/menu-button#menupopover-position
+     */
     position?: Position;
@@ -242,3 +266,3 @@ };
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#usemenubuttoncontext
+ * @see Docs https://reach.tech/menu-button#usemenubuttoncontext
  */
@@ -245,0 +269,0 @@ export declare function useMenuButtonContext(): MenuContextValue;

dist/menu-button.cjs.development.js

@@ -5,12 +5,15 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
+var PropTypes = require('prop-types');
 var autoId = require('@reach/auto-id');
-var Popover = _interopDefault(require('@reach/popover'));
+var Popover = require('@reach/popover');
 var descendants = require('@reach/descendants');
 var utils = require('@reach/utils');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
+
 function _extends() {
@@ -55,2 +58,3 @@ _extends = Object.assign || function (target) {
 var OPEN_MENU_AT_FIRST_ITEM = "OPEN_MENU_AT_FIRST_ITEM";
+var OPEN_MENU_AT_INDEX = "OPEN_MENU_AT_INDEX";
 var OPEN_MENU_CLEARED = "OPEN_MENU_CLEARED";
@@ -83,3 +87,3 @@ var SEARCH_FOR_ITEM = "SEARCH_FOR_ITEM";
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menu
+ * @see Docs https://reach.tech/menu-button#menu
  */
@@ -152,7 +156,7 @@
   }, []);
-  return React__default.createElement(descendants.DescendantProvider, {
+  return React__default['default'].createElement(descendants.DescendantProvider, {
     context: MenuDescendantContext,
     items: descendants$1,
     set: setDescendants
-  }, React__default.createElement(MenuContext.Provider, {
+  }, React__default['default'].createElement(MenuContext.Provider, {
     value: context
@@ -169,3 +173,3 @@ }, utils.isFunction(children) ? children({
   Menu.propTypes = {
-    children: /*#__PURE__*/PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+    children: /*#__PURE__*/PropTypes__default['default'].oneOfType([PropTypes__default['default'].func, PropTypes__default['default'].node])
   };
@@ -180,3 +184,3 @@ } ////////////////////////////////////////////////////////////////////////////////
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menubutton
+ * @see Docs https://reach.tech/menu-button#menubutton
  */
@@ -203,2 +207,8 @@
   var ref = utils.useForkedRef(buttonRef, forwardedRef);
+  var items = descendants.useDescendants(MenuDescendantContext);
+  var firstNonDisabledIndex = React.useMemo(function () {
+    return items.findIndex(function (item) {
+      return !item.disabled;
+    });
+  }, [items]);
   React.useEffect(function () {
@@ -222,3 +232,6 @@ var newButtonId = id != null ? id : menuId ? utils.makeId("menu-button", menuId) : "menu-button";
         dispatch({
-          type: OPEN_MENU_AT_FIRST_ITEM
+          type: OPEN_MENU_AT_INDEX,
+          payload: {
+            index: firstNonDisabledIndex
+          }
         });
@@ -230,3 +243,6 @@ break;
         dispatch({
-          type: OPEN_MENU_AT_FIRST_ITEM
+          type: OPEN_MENU_AT_INDEX,
+          payload: {
+            index: firstNonDisabledIndex
+          }
         });
@@ -258,3 +274,3 @@ break;
 
-  return React__default.createElement(Comp // When the menu is displayed, the element with role `button` has
+  return React__default['default'].createElement(Comp // When the menu is displayed, the element with role `button` has
   // `aria-expanded` set to `true`. When the menu is hidden, it is
@@ -280,3 +296,3 @@ // recommended that `aria-expanded` is not present.
   MenuButton.propTypes = {
-    children: PropTypes.node
+    children: PropTypes__default['default'].node
   };
@@ -305,4 +321,5 @@ } ////////////////////////////////////////////////////////////////////////////////
       onSelect = _ref3.onSelect,
+      disabled = _ref3.disabled,
       valueTextProp = _ref3.valueText,
-      props = _objectWithoutPropertiesLoose(_ref3, ["as", "index", "isLink", "onClick", "onDragStart", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onSelect", "valueText"]);
+      props = _objectWithoutPropertiesLoose(_ref3, ["as", "index", "isLink", "onClick", "onDragStart", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onSelect", "disabled", "valueText"]);
 
@@ -340,5 +357,6 @@ var _useContext2 = React.useContext(MenuContext),
     key: valueText,
+    disabled: disabled,
     isLink: isLink
   }, MenuDescendantContext, indexProp);
-  var isSelected = index === selectionIndex; // Update the callback ref array on every render
+  var isSelected = index === selectionIndex && !disabled; // Update the callback ref array on every render
 
@@ -357,3 +375,7 @@ selectCallbacks.current[index] = onSelect;
     if (isLink && !isRightClick(event.nativeEvent)) {
-      select();
+      if (disabled) {
+        event.preventDefault();
+      } else {
+        select();
+      }
     }
@@ -384,3 +406,3 @@ }
   function handleMouseEnter(event) {
-    if (!isSelected && index != null) {
+    if (!isSelected && index != null && !disabled) {
       dispatch({
@@ -405,3 +427,3 @@ type: SELECT_ITEM_AT_INDEX,
 
-    if (!isSelected && index != null) {
+    if (!isSelected && index != null && !disabled) {
       dispatch({
@@ -434,3 +456,5 @@ type: SELECT_ITEM_AT_INDEX,
     } else {
-      select();
+      if (!disabled) {
+        select();
+      }
     }
@@ -459,3 +483,3 @@ } // When the menu closes, reset readyToSelect for the next interaction.
   }, []);
-  return React__default.createElement(Comp, Object.assign({
+  return React__default['default'].createElement(Comp, Object.assign({
     role: "menuitem",
@@ -466,2 +490,3 @@ id: useMenuItemId(index),
     ref: ref,
+    "aria-disabled": disabled || undefined,
     "data-reach-menu-item": "",
@@ -485,3 +510,3 @@ "data-selected": isSelected ? "" : undefined,
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem
+ * @see Docs https://reach.tech/menu-button#menuitem
  */
@@ -494,3 +519,3 @@
 
-  return React__default.createElement(MenuItemImpl, Object.assign({}, props, {
+  return React__default['default'].createElement(MenuItemImpl, Object.assign({}, props, {
     ref: forwardedRef,
@@ -504,4 +529,4 @@ as: as
   MenuItem.propTypes = {
-    as: PropTypes.any,
-    onSelect: PropTypes.func.isRequired
+    as: PropTypes__default['default'].any,
+    onSelect: PropTypes__default['default'].func.isRequired
   };
@@ -517,3 +542,3 @@ } ////////////////////////////////////////////////////////////////////////////////
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitems
+ * @see Docs https://reach.tech/menu-button#menuitems
  */
@@ -664,2 +689,5 @@
     rotate: false,
+    filter: function filter(item) {
+      return !item.disabled;
+    },
     callback: function callback(index) {
@@ -678,3 +706,3 @@ dispatch({
     // eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex
-    React__default.createElement(Comp // Refers to the descendant menuitem element that is visually indicated
+    React__default['default'].createElement(Comp // Refers to the descendant menuitem element that is visually indicated
     // as focused.
@@ -702,3 +730,3 @@ // https://www.w3.org/TR/wai-aria-practices-1.2/examples/menu-button/menu-button-actions-active-descendant.html
   MenuItems.propTypes = {
-    children: PropTypes.node
+    children: PropTypes__default['default'].node
   };
@@ -716,3 +744,3 @@ } ////////////////////////////////////////////////////////////////////////////////
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menulink
+ * @see Docs https://reach.tech/menu-button#menulink
  */
@@ -732,6 +760,6 @@
 
-  return React__default.createElement("div", {
+  return React__default['default'].createElement("div", {
     role: "none",
     tabIndex: -1
-  }, React__default.createElement(MenuItemImpl, Object.assign({}, props, {
+  }, React__default['default'].createElement(MenuItemImpl, Object.assign({}, props, {
     ref: forwardedRef,
@@ -748,4 +776,4 @@ "data-reach-menu-link": "",
   MenuLink.propTypes = {
-    as: PropTypes.any,
-    component: PropTypes.any
+    as: PropTypes__default['default'].any,
+    component: PropTypes__default['default'].any
   };
@@ -760,3 +788,3 @@ } ////////////////////////////////////////////////////////////////////////////////
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist
+ * @see Docs https://reach.tech/menu-button#menulist
  */
@@ -770,5 +798,5 @@
 
-  return React__default.createElement(MenuPopover, {
+  return React__default['default'].createElement(MenuPopover, {
     portal: portal
-  }, React__default.createElement(MenuItems, Object.assign({}, props, {
+  }, React__default['default'].createElement(MenuItems, Object.assign({}, props, {
     ref: forwardedRef,
@@ -782,3 +810,3 @@ "data-reach-menu-list": ""
   MenuList.propTypes = {
-    children: PropTypes.node.isRequired
+    children: PropTypes__default['default'].node.isRequired
   };
@@ -795,3 +823,3 @@ } ////////////////////////////////////////////////////////////////////////////////
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover
+ * @see Docs https://reach.tech/menu-button#menupopover
  */
@@ -850,6 +878,6 @@
 
-  return portal ? React__default.createElement(Popover, Object.assign({}, commonProps, {
+  return portal ? React__default['default'].createElement(Popover__default['default'], Object.assign({}, commonProps, {
     targetRef: buttonRef,
     position: position
-  })) : React__default.createElement("div", Object.assign({}, commonProps));
+  })) : React__default['default'].createElement("div", Object.assign({}, commonProps));
 });
@@ -860,3 +888,3 @@
   MenuPopover.propTypes = {
-    children: PropTypes.node
+    children: PropTypes__default['default'].node
   };
@@ -868,3 +896,3 @@ } ////////////////////////////////////////////////////////////////////////////////
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#usemenubuttoncontext
+ * @see Docs https://reach.tech/menu-button#usemenubuttoncontext
  */
@@ -899,7 +927,6 @@
 
-  var found = items.find(function (_ref9) {
-    var _element$dataset, _element$dataset$valu;
+  var found = items.find(function (item) {
+    var _item$element, _item$element$dataset, _item$element$dataset2;
 
-    var element = _ref9.element;
-    return element === null || element === void 0 ? void 0 : (_element$dataset = element.dataset) === null || _element$dataset === void 0 ? void 0 : (_element$dataset$valu = _element$dataset.valuetext) === null || _element$dataset$valu === void 0 ? void 0 : _element$dataset$valu.toLowerCase().startsWith(string);
+    return item.disabled ? false : (_item$element = item.element) === null || _item$element === void 0 ? void 0 : (_item$element$dataset = _item$element.dataset) === null || _item$element$dataset === void 0 ? void 0 : (_item$element$dataset2 = _item$element$dataset.valuetext) === null || _item$element$dataset2 === void 0 ? void 0 : _item$element$dataset2.toLowerCase().startsWith(string);
   });
@@ -948,2 +975,8 @@ return found ? items.indexOf(found) : null;
 
+    case OPEN_MENU_AT_INDEX:
+      return _extends({}, state, {
+        isExpanded: true,
+        selectionIndex: action.payload.index
+      });
+
     case OPEN_MENU_CLEARED:
@@ -950,0 +983,0 @@ return _extends({}, state, {

dist/menu-button.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n);require("prop-types");var r=require("@reach/auto-id"),o=e(require("@reach/popover")),a=require("@reach/descendants"),u=require("@reach/utils");function i(){return(i=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function s(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n.indexOf(t=a[r])>=0||(o[t]=e[t]);return o}var c=a.createDescendantContext("MenuDescendantContext"),d=u.createNamedContext("MenuContext",{}),l={buttonId:null,isExpanded:!1,typeaheadQuery:"",selectionIndex:-1},f=u.forwardRefWithAs((function(e,r){var o=e.as,a=void 0===o?"button":o,i=e.onKeyDown,c=e.onMouseDown,l=e.id,f=s(e,["as","onKeyDown","onMouseDown","id"]),E=n.useContext(d),p=E.buttonRef,v=E.buttonClickedRef,x=E.menuId,_=E.state,y=_.buttonId,m=_.isExpanded,M=E.dispatch,w=u.useForkedRef(p,r);return n.useEffect((function(){var e=null!=l?l:x?u.makeId("menu-button",x):"menu-button";y!==e&&M({type:"SET_BUTTON_ID",payload:e})}),[y,M,l,x]),t.createElement(a,Object.assign({"aria-expanded":!!m||void 0,"aria-haspopup":!0,"aria-controls":x},f,{ref:w,"data-reach-menu-button":"",id:y||void 0,onKeyDown:u.wrapEvent(i,(function(e){switch(e.key){case"ArrowDown":case"ArrowUp":e.preventDefault(),M({type:"OPEN_MENU_AT_FIRST_ITEM"});break;case"Enter":case" ":M({type:"OPEN_MENU_AT_FIRST_ITEM"})}})),onMouseDown:u.wrapEvent(c,(function(e){m||(v.current=!0),I(e.nativeEvent)||M(m?{type:"CLOSE_MENU",payload:{buttonRef:p}}:{type:"OPEN_MENU_CLEARED"})})),type:"button"}))})),E=u.forwardRefWithAs((function(e,r){var o=e.as,i=e.index,l=e.isLink,f=void 0!==l&&l,E=e.onClick,p=e.onDragStart,v=e.onMouseDown,x=e.onMouseEnter,_=e.onMouseLeave,y=e.onMouseMove,w=e.onMouseUp,T=e.onSelect,C=e.valueText,h=s(e,["as","index","isLink","onClick","onDragStart","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onSelect","valueText"]),R=n.useContext(d),b=R.buttonRef,D=R.dispatch,L=R.readyToSelect,k=R.selectCallbacks,S=R.state,O=S.selectionIndex,N=S.isExpanded,A=n.useRef(null),g=n.useState(C||""),U=g[0],P=g[1],j=n.useCallback((function(e){e&&(A.current=e,(!C||e.textContent&&U!==e.textContent)&&P(e.textContent))}),[U,C]),F=u.useForkedRef(r,j),K=n.useRef(!1),X=a.useDescendant({element:A.current,key:U,isLink:f},c,i),q=X===O;function B(){M(b.current),T&&T(),D({type:"CLICK_MENU_ITEM"})}return k.current[X]=T,n.useEffect((function(){N||(L.current=!1)}),[N,L]),n.useEffect((function(){var e=u.getOwnerDocument(A.current)||document,n=function(){return K.current=!1};return e.addEventListener("mouseup",n),function(){return e.removeEventListener("mouseup",n)}}),[]),t.createElement(o,Object.assign({role:"menuitem",id:m(X),tabIndex:-1},h,{ref:F,"data-reach-menu-item":"","data-selected":q?"":void 0,"data-valuetext":U,onClick:u.wrapEvent(E,(function(e){f&&!I(e.nativeEvent)&&B()})),onDragStart:u.wrapEvent(p,(function(e){f&&e.preventDefault()})),onMouseDown:u.wrapEvent(v,(function(e){I(e.nativeEvent)||(f?K.current=!0:e.preventDefault())})),onMouseEnter:u.wrapEvent(x,(function(e){q||null==X||D({type:"SELECT_ITEM_AT_INDEX",payload:{index:X}})})),onMouseLeave:u.wrapEvent(_,(function(e){D({type:"CLEAR_SELECTION_INDEX"})})),onMouseMove:u.wrapEvent(y,(function(){L.current=!0,q||null==X||D({type:"SELECT_ITEM_AT_INDEX",payload:{index:X}})})),onMouseUp:u.wrapEvent(w,(function(e){L.current?I(e.nativeEvent)||(f?K.current?K.current=!1:A.current&&A.current.click():B()):L.current=!0}))}))})),p=u.forwardRefWithAs((function(e,n){var r=e.as,o=void 0===r?"div":r,a=s(e,["as"]);return t.createElement(E,Object.assign({},a,{ref:n,as:o}))})),v=u.forwardRefWithAs((function(e,r){var o=e.as,i=void 0===o?"div":o,l=e.children,f=e.onKeyDown,E=s(e,["as","children","id","onKeyDown"]),p=n.useContext(d),v=p.menuId,x=p.dispatch,_=p.buttonRef,y=p.menuRef,I=p.selectCallbacks,w=p.state,T=w.isExpanded,C=w.buttonId,h=w.selectionIndex,R=w.typeaheadQuery,b=a.useDescendants(c),D=u.useForkedRef(y,r);n.useEffect((function(){var e=function(e,n){if(void 0===n&&(n=""),!n)return null;var t=e.find((function(e){var t,r,o=e.element;return null==o||null===(t=o.dataset)||void 0===t||null===(r=t.valuetext)||void 0===r?void 0:r.toLowerCase().startsWith(n)}));return t?e.indexOf(t):null}(b,R);R&&null!=e&&x({type:"SELECT_ITEM_AT_INDEX",payload:{index:e}});var n=window.setTimeout((function(){return R&&x({type:"SEARCH_FOR_ITEM",payload:""})}),1e3);return function(){return window.clearTimeout(n)}}),[x,b,R]);var L=u.usePrevious(b.length),k=u.usePrevious(b[h]),S=u.usePrevious(h);n.useEffect((function(){h>b.length-1?x({type:"SELECT_ITEM_AT_INDEX",payload:{index:b.length-1}}):L!==b.length&&h>-1&&k&&S===h&&b[h]!==k&&x({type:"SELECT_ITEM_AT_INDEX",payload:{index:b.findIndex((function(e){return e.key===k.key}))}})}),[x,b,L,k,S,h]);var O=u.wrapEvent((function(e){var n=e.key;if(T)switch(n){case"Enter":case" ":var t=b.find((function(e){return e.index===h}));t&&(t.isLink&&t.element?t.element.click():(e.preventDefault(),M(_.current),I.current[t.index]&&I.current[t.index](),x({type:"CLICK_MENU_ITEM"})));break;case"Escape":M(_.current),x({type:"CLOSE_MENU",payload:{buttonRef:_}});break;case"Tab":e.preventDefault();break;default:if(u.isString(n)&&1===n.length){var r=R+n.toLowerCase();x({type:"SEARCH_FOR_ITEM",payload:r})}}}),a.useDescendantKeyDown(c,{currentIndex:h,orientation:"vertical",rotate:!1,callback:function(e){x({type:"SELECT_ITEM_AT_INDEX",payload:{index:e}})},key:"index"}));return t.createElement(i,Object.assign({"aria-activedescendant":m(h)||void 0,"aria-labelledby":C||void 0,role:"menu",tabIndex:-1},E,{ref:D,"data-reach-menu-items":"",id:v,onKeyDown:u.wrapEvent(f,O)}),l)})),x=u.forwardRefWithAs((function(e,n){var r=e.as,o=void 0===r?"a":r,a=e.component,i=e.onSelect,c=s(e,["as","component","onSelect"]);return a&&console.warn("[@reach/menu-button]: Please use the `as` prop instead of `component`."),t.createElement("div",{role:"none",tabIndex:-1},t.createElement(E,Object.assign({},c,{ref:n,"data-reach-menu-link":"",as:o,isLink:!0,onSelect:i||u.noop})))})),_=n.forwardRef((function(e,n){var r=e.portal,o=void 0===r||r,a=s(e,["portal"]);return t.createElement(y,{portal:o},t.createElement(v,Object.assign({},a,{ref:n,"data-reach-menu-list":""})))})),y=n.forwardRef((function(e,r){var a=e.children,c=e.portal,l=void 0===c||c,f=e.position,E=s(e,["children","portal","position"]),p=n.useContext(d),v=p.buttonRef,x=p.buttonClickedRef,_=p.dispatch,y=p.menuRef,m=p.popoverRef,I=p.state.isExpanded,M=u.useForkedRef(m,r);n.useEffect((function(){function e(e){x.current?x.current=!1:I&&m.current&&(m.current.contains(e.target)||_({type:"CLOSE_MENU",payload:{buttonRef:v}}))}return window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[x,v,_,I,y,m]);var w=i({ref:M,"data-reach-menu":"","data-reach-menu-popover":"",hidden:!I,children:a},E);return l?t.createElement(o,Object.assign({},w,{targetRef:v,position:f})):t.createElement("div",Object.assign({},w))}));function m(e){var t=n.useContext(d);return null!=e&&e>-1?u.makeId("option-"+e,t.menuId):void 0}function I(e){return 3===e.which||2===e.button}function M(e){e&&e.focus()}function w(e,n){switch(void 0===n&&(n={}),n.type){case"CLICK_MENU_ITEM":case"CLOSE_MENU":return i({},e,{isExpanded:!1,selectionIndex:-1});case"OPEN_MENU_AT_FIRST_ITEM":return i({},e,{isExpanded:!0,selectionIndex:0});case"OPEN_MENU_CLEARED":return i({},e,{isExpanded:!0,selectionIndex:-1});case"SELECT_ITEM_AT_INDEX":return n.payload.index>=0?i({},e,{selectionIndex:null!=n.payload.max?Math.min(Math.max(n.payload.index,0),n.payload.max):Math.max(n.payload.index,0)}):e;case"CLEAR_SELECTION_INDEX":return i({},e,{selectionIndex:-1});case"SET_BUTTON_ID":return i({},e,{buttonId:n.payload});case"SEARCH_FOR_ITEM":return void 0!==n.payload?i({},e,{typeaheadQuery:n.payload}):e;default:return e}}exports.Menu=function(e){var o=e.id,i=e.children,s=n.useRef(null),f=n.useRef(null),E=n.useRef(null),p=a.useDescendantsInit(),v=p[0],x=p[1],_=n.useReducer(w,l),y=_[0],m=_[1],I=r.useId(o),T=o||u.makeId("menu",I),C=n.useRef(!1),h=n.useRef([]),R=n.useRef(!1),b={buttonRef:s,dispatch:m,menuId:T,menuRef:f,popoverRef:E,buttonClickedRef:C,readyToSelect:R,selectCallbacks:h,state:y};return n.useEffect((function(){y.isExpanded?(window.__REACH_DISABLE_TOOLTIPS=!0,window.requestAnimationFrame((function(){M(f.current)}))):window.__REACH_DISABLE_TOOLTIPS=!1}),[y.isExpanded]),n.useEffect((function(){return u.checkStyles("menu-button")}),[]),t.createElement(a.DescendantProvider,{context:c,items:v,set:x},t.createElement(d.Provider,{value:b},u.isFunction(i)?i({isExpanded:y.isExpanded,isOpen:y.isExpanded}):i))},exports.MenuButton=f,exports.MenuItem=p,exports.MenuItems=v,exports.MenuLink=x,exports.MenuList=_,exports.MenuPopover=y,exports.useMenuButtonContext=function(){var e=n.useContext(d).state.isExpanded;return n.useMemo((function(){return{isExpanded:e}}),[e])};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("prop-types");var n=require("@reach/auto-id"),t=require("@reach/popover"),a=require("@reach/descendants"),r=require("@reach/utils");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(e),i=o(t);function d(){return(d=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e}).apply(this,arguments)}function s(e,n){if(null==e)return{};var t,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n.indexOf(t=o[a])>=0||(r[t]=e[t]);return r}var c=a.createDescendantContext("MenuDescendantContext"),l=r.createNamedContext("MenuContext",{}),f={buttonId:null,isExpanded:!1,typeaheadQuery:"",selectionIndex:-1},E=r.forwardRefWithAs((function(n,t){var o=n.as,i=void 0===o?"button":o,d=n.onKeyDown,f=n.onMouseDown,E=n.id,p=s(n,["as","onKeyDown","onMouseDown","id"]),v=e.useContext(l),x=v.buttonRef,y=v.buttonClickedRef,_=v.menuId,m=v.state,I=m.buttonId,w=m.isExpanded,b=v.dispatch,C=r.useForkedRef(x,t),h=a.useDescendants(c),T=e.useMemo((function(){return h.findIndex((function(e){return!e.disabled}))}),[h]);return e.useEffect((function(){var e=null!=E?E:_?r.makeId("menu-button",_):"menu-button";I!==e&&b({type:"SET_BUTTON_ID",payload:e})}),[I,b,E,_]),u.default.createElement(i,Object.assign({"aria-expanded":!!w||void 0,"aria-haspopup":!0,"aria-controls":_},p,{ref:C,"data-reach-menu-button":"",id:I||void 0,onKeyDown:r.wrapEvent(d,(function(e){switch(e.key){case"ArrowDown":case"ArrowUp":e.preventDefault(),b({type:"OPEN_MENU_AT_INDEX",payload:{index:T}});break;case"Enter":case" ":b({type:"OPEN_MENU_AT_INDEX",payload:{index:T}})}})),onMouseDown:r.wrapEvent(f,(function(e){w||(y.current=!0),M(e.nativeEvent)||b(w?{type:"CLOSE_MENU",payload:{buttonRef:x}}:{type:"OPEN_MENU_CLEARED"})})),type:"button"}))})),p=r.forwardRefWithAs((function(n,t){var o=n.as,i=n.index,d=n.isLink,f=void 0!==d&&d,E=n.onClick,p=n.onDragStart,v=n.onMouseDown,x=n.onMouseEnter,y=n.onMouseLeave,_=n.onMouseMove,m=n.onMouseUp,b=n.onSelect,C=n.disabled,h=n.valueText,T=s(n,["as","index","isLink","onClick","onDragStart","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onSelect","disabled","valueText"]),D=e.useContext(l),R=D.buttonRef,L=D.dispatch,k=D.readyToSelect,O=D.selectCallbacks,N=D.state,S=N.selectionIndex,A=N.isExpanded,g=e.useRef(null),U=e.useState(h||""),P=U[0],j=U[1],X=e.useCallback((function(e){e&&(g.current=e,(!h||e.textContent&&P!==e.textContent)&&j(e.textContent))}),[P,h]),F=r.useForkedRef(t,X),K=e.useRef(!1),q=a.useDescendant({element:g.current,key:P,disabled:C,isLink:f},c,i),B=q===S&&!C;function W(){w(R.current),b&&b(),L({type:"CLICK_MENU_ITEM"})}return O.current[q]=b,e.useEffect((function(){A||(k.current=!1)}),[A,k]),e.useEffect((function(){var e=r.getOwnerDocument(g.current)||document,n=function(){return K.current=!1};return e.addEventListener("mouseup",n),function(){return e.removeEventListener("mouseup",n)}}),[]),u.default.createElement(o,Object.assign({role:"menuitem",id:I(q),tabIndex:-1},T,{ref:F,"aria-disabled":C||void 0,"data-reach-menu-item":"","data-selected":B?"":void 0,"data-valuetext":P,onClick:r.wrapEvent(E,(function(e){f&&!M(e.nativeEvent)&&(C?e.preventDefault():W())})),onDragStart:r.wrapEvent(p,(function(e){f&&e.preventDefault()})),onMouseDown:r.wrapEvent(v,(function(e){M(e.nativeEvent)||(f?K.current=!0:e.preventDefault())})),onMouseEnter:r.wrapEvent(x,(function(e){B||null==q||C||L({type:"SELECT_ITEM_AT_INDEX",payload:{index:q}})})),onMouseLeave:r.wrapEvent(y,(function(e){L({type:"CLEAR_SELECTION_INDEX"})})),onMouseMove:r.wrapEvent(_,(function(){k.current=!0,B||null==q||C||L({type:"SELECT_ITEM_AT_INDEX",payload:{index:q}})})),onMouseUp:r.wrapEvent(m,(function(e){k.current?M(e.nativeEvent)||(f?K.current?K.current=!1:g.current&&g.current.click():C||W()):k.current=!0}))}))})),v=r.forwardRefWithAs((function(e,n){var t=e.as,a=void 0===t?"div":t,r=s(e,["as"]);return u.default.createElement(p,Object.assign({},r,{ref:n,as:a}))})),x=r.forwardRefWithAs((function(n,t){var o=n.as,i=void 0===o?"div":o,d=n.children,f=n.onKeyDown,E=s(n,["as","children","id","onKeyDown"]),p=e.useContext(l),v=p.menuId,x=p.dispatch,y=p.buttonRef,_=p.menuRef,m=p.selectCallbacks,M=p.state,b=M.isExpanded,C=M.buttonId,h=M.selectionIndex,T=M.typeaheadQuery,D=a.useDescendants(c),R=r.useForkedRef(_,t);e.useEffect((function(){var e=function(e,n){if(void 0===n&&(n=""),!n)return null;var t=e.find((function(e){var t,a,r;return!e.disabled&&(null===(t=e.element)||void 0===t||null===(a=t.dataset)||void 0===a||null===(r=a.valuetext)||void 0===r?void 0:r.toLowerCase().startsWith(n))}));return t?e.indexOf(t):null}(D,T);T&&null!=e&&x({type:"SELECT_ITEM_AT_INDEX",payload:{index:e}});var n=window.setTimeout((function(){return T&&x({type:"SEARCH_FOR_ITEM",payload:""})}),1e3);return function(){return window.clearTimeout(n)}}),[x,D,T]);var L=r.usePrevious(D.length),k=r.usePrevious(D[h]),O=r.usePrevious(h);e.useEffect((function(){h>D.length-1?x({type:"SELECT_ITEM_AT_INDEX",payload:{index:D.length-1}}):L!==D.length&&h>-1&&k&&O===h&&D[h]!==k&&x({type:"SELECT_ITEM_AT_INDEX",payload:{index:D.findIndex((function(e){return e.key===k.key}))}})}),[x,D,L,k,O,h]);var N=r.wrapEvent((function(e){var n=e.key;if(b)switch(n){case"Enter":case" ":var t=D.find((function(e){return e.index===h}));t&&(t.isLink&&t.element?t.element.click():(e.preventDefault(),w(y.current),m.current[t.index]&&m.current[t.index](),x({type:"CLICK_MENU_ITEM"})));break;case"Escape":w(y.current),x({type:"CLOSE_MENU",payload:{buttonRef:y}});break;case"Tab":e.preventDefault();break;default:if(r.isString(n)&&1===n.length){var a=T+n.toLowerCase();x({type:"SEARCH_FOR_ITEM",payload:a})}}}),a.useDescendantKeyDown(c,{currentIndex:h,orientation:"vertical",rotate:!1,filter:function(e){return!e.disabled},callback:function(e){x({type:"SELECT_ITEM_AT_INDEX",payload:{index:e}})},key:"index"}));return u.default.createElement(i,Object.assign({"aria-activedescendant":I(h)||void 0,"aria-labelledby":C||void 0,role:"menu",tabIndex:-1},E,{ref:R,"data-reach-menu-items":"",id:v,onKeyDown:r.wrapEvent(f,N)}),d)})),y=r.forwardRefWithAs((function(e,n){var t=e.as,a=void 0===t?"a":t,o=e.component,i=e.onSelect,d=s(e,["as","component","onSelect"]);return o&&console.warn("[@reach/menu-button]: Please use the `as` prop instead of `component`."),u.default.createElement("div",{role:"none",tabIndex:-1},u.default.createElement(p,Object.assign({},d,{ref:n,"data-reach-menu-link":"",as:a,isLink:!0,onSelect:i||r.noop})))})),_=e.forwardRef((function(e,n){var t=e.portal,a=void 0===t||t,r=s(e,["portal"]);return u.default.createElement(m,{portal:a},u.default.createElement(x,Object.assign({},r,{ref:n,"data-reach-menu-list":""})))})),m=e.forwardRef((function(n,t){var a=n.children,o=n.portal,c=void 0===o||o,f=n.position,E=s(n,["children","portal","position"]),p=e.useContext(l),v=p.buttonRef,x=p.buttonClickedRef,y=p.dispatch,_=p.menuRef,m=p.popoverRef,I=p.state.isExpanded,M=r.useForkedRef(m,t);e.useEffect((function(){function e(e){x.current?x.current=!1:I&&m.current&&(m.current.contains(e.target)||y({type:"CLOSE_MENU",payload:{buttonRef:v}}))}return window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[x,v,y,I,_,m]);var w=d({ref:M,"data-reach-menu":"","data-reach-menu-popover":"",hidden:!I,children:a},E);return c?u.default.createElement(i.default,Object.assign({},w,{targetRef:v,position:f})):u.default.createElement("div",Object.assign({},w))}));function I(n){var t=e.useContext(l);return null!=n&&n>-1?r.makeId("option-"+n,t.menuId):void 0}function M(e){return 3===e.which||2===e.button}function w(e){e&&e.focus()}function b(e,n){switch(void 0===n&&(n={}),n.type){case"CLICK_MENU_ITEM":case"CLOSE_MENU":return d({},e,{isExpanded:!1,selectionIndex:-1});case"OPEN_MENU_AT_FIRST_ITEM":return d({},e,{isExpanded:!0,selectionIndex:0});case"OPEN_MENU_AT_INDEX":return d({},e,{isExpanded:!0,selectionIndex:n.payload.index});case"OPEN_MENU_CLEARED":return d({},e,{isExpanded:!0,selectionIndex:-1});case"SELECT_ITEM_AT_INDEX":return n.payload.index>=0?d({},e,{selectionIndex:null!=n.payload.max?Math.min(Math.max(n.payload.index,0),n.payload.max):Math.max(n.payload.index,0)}):e;case"CLEAR_SELECTION_INDEX":return d({},e,{selectionIndex:-1});case"SET_BUTTON_ID":return d({},e,{buttonId:n.payload});case"SEARCH_FOR_ITEM":return void 0!==n.payload?d({},e,{typeaheadQuery:n.payload}):e;default:return e}}exports.Menu=function(t){var o=t.id,i=t.children,d=e.useRef(null),s=e.useRef(null),E=e.useRef(null),p=a.useDescendantsInit(),v=p[0],x=p[1],y=e.useReducer(b,f),_=y[0],m=y[1],I=n.useId(o),M=o||r.makeId("menu",I),C=e.useRef(!1),h=e.useRef([]),T=e.useRef(!1),D={buttonRef:d,dispatch:m,menuId:M,menuRef:s,popoverRef:E,buttonClickedRef:C,readyToSelect:T,selectCallbacks:h,state:_};return e.useEffect((function(){_.isExpanded?(window.__REACH_DISABLE_TOOLTIPS=!0,window.requestAnimationFrame((function(){w(s.current)}))):window.__REACH_DISABLE_TOOLTIPS=!1}),[_.isExpanded]),e.useEffect((function(){return r.checkStyles("menu-button")}),[]),u.default.createElement(a.DescendantProvider,{context:c,items:v,set:x},u.default.createElement(l.Provider,{value:D},r.isFunction(i)?i({isExpanded:_.isExpanded,isOpen:_.isExpanded}):i))},exports.MenuButton=E,exports.MenuItem=v,exports.MenuItems=x,exports.MenuLink=y,exports.MenuList=_,exports.MenuPopover=m,exports.useMenuButtonContext=function(){var n=e.useContext(l).state.isExpanded;return e.useMemo((function(){return{isExpanded:n}}),[n])};
 //# sourceMappingURL=menu-button.cjs.production.min.js.map

dist/menu-button.esm.js

@@ -1,2 +0,2 @@
-import React, { useRef, useReducer, useEffect, useContext, forwardRef, useMemo, useState, useCallback } from 'react';
+import React, { useRef, useReducer, useEffect, useContext, useMemo, forwardRef, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -47,2 +47,3 @@ import { useId } from '@reach/auto-id';
 var OPEN_MENU_AT_FIRST_ITEM = "OPEN_MENU_AT_FIRST_ITEM";
+var OPEN_MENU_AT_INDEX = "OPEN_MENU_AT_INDEX";
 var OPEN_MENU_CLEARED = "OPEN_MENU_CLEARED";
@@ -75,3 +76,3 @@ var SEARCH_FOR_ITEM = "SEARCH_FOR_ITEM";
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menu
+ * @see Docs https://reach.tech/menu-button#menu
  */
@@ -170,3 +171,3 @@
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menubutton
+ * @see Docs https://reach.tech/menu-button#menubutton
  */
@@ -193,2 +194,8 @@
   var ref = useForkedRef(buttonRef, forwardedRef);
+  var items = useDescendants(MenuDescendantContext);
+  var firstNonDisabledIndex = useMemo(function () {
+    return items.findIndex(function (item) {
+      return !item.disabled;
+    });
+  }, [items]);
   useEffect(function () {
@@ -212,3 +219,6 @@ var newButtonId = id != null ? id : menuId ? makeId("menu-button", menuId) : "menu-button";
         dispatch({
-          type: OPEN_MENU_AT_FIRST_ITEM
+          type: OPEN_MENU_AT_INDEX,
+          payload: {
+            index: firstNonDisabledIndex
+          }
         });
@@ -220,3 +230,6 @@ break;
         dispatch({
-          type: OPEN_MENU_AT_FIRST_ITEM
+          type: OPEN_MENU_AT_INDEX,
+          payload: {
+            index: firstNonDisabledIndex
+          }
         });
@@ -293,4 +306,5 @@ break;
       onSelect = _ref3.onSelect,
+      disabled = _ref3.disabled,
       valueTextProp = _ref3.valueText,
-      props = _objectWithoutPropertiesLoose(_ref3, ["as", "index", "isLink", "onClick", "onDragStart", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onSelect", "valueText"]);
+      props = _objectWithoutPropertiesLoose(_ref3, ["as", "index", "isLink", "onClick", "onDragStart", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onSelect", "disabled", "valueText"]);
 
@@ -328,5 +342,6 @@ var _useContext2 = useContext(MenuContext),
     key: valueText,
+    disabled: disabled,
     isLink: isLink
   }, MenuDescendantContext, indexProp);
-  var isSelected = index === selectionIndex; // Update the callback ref array on every render
+  var isSelected = index === selectionIndex && !disabled; // Update the callback ref array on every render
 
@@ -345,3 +360,7 @@ selectCallbacks.current[index] = onSelect;
     if (isLink && !isRightClick(event.nativeEvent)) {
-      select();
+      if (disabled) {
+        event.preventDefault();
+      } else {
+        select();
+      }
     }
@@ -372,3 +391,3 @@ }
   function handleMouseEnter(event) {
-    if (!isSelected && index != null) {
+    if (!isSelected && index != null && !disabled) {
       dispatch({
@@ -393,3 +412,3 @@ type: SELECT_ITEM_AT_INDEX,
 
-    if (!isSelected && index != null) {
+    if (!isSelected && index != null && !disabled) {
       dispatch({
@@ -422,3 +441,5 @@ type: SELECT_ITEM_AT_INDEX,
     } else {
-      select();
+      if (!disabled) {
+        select();
+      }
     }
@@ -453,2 +474,3 @@ } // When the menu closes, reset readyToSelect for the next interaction.
     ref: ref,
+    "aria-disabled": disabled || undefined,
     "data-reach-menu-item": "",
@@ -472,3 +494,3 @@ "data-selected": isSelected ? "" : undefined,
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitem
+ * @see Docs https://reach.tech/menu-button#menuitem
  */
@@ -502,3 +524,3 @@
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menuitems
+ * @see Docs https://reach.tech/menu-button#menuitems
  */
@@ -649,2 +671,5 @@
     rotate: false,
+    filter: function filter(item) {
+      return !item.disabled;
+    },
     callback: function callback(index) {
@@ -699,3 +724,3 @@ dispatch({
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menulink
+ * @see Docs https://reach.tech/menu-button#menulink
  */
@@ -741,3 +766,3 @@
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menulist
+ * @see Docs https://reach.tech/menu-button#menulist
  */
@@ -774,3 +799,3 @@
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#menupopover
+ * @see Docs https://reach.tech/menu-button#menupopover
  */
@@ -845,3 +870,3 @@
  *
- * @see Docs https://reacttraining.com/reach-ui/menu-button#usemenubuttoncontext
+ * @see Docs https://reach.tech/menu-button#usemenubuttoncontext
  */
@@ -876,7 +901,6 @@
 
-  var found = items.find(function (_ref9) {
-    var _element$dataset, _element$dataset$valu;
+  var found = items.find(function (item) {
+    var _item$element, _item$element$dataset, _item$element$dataset2;
 
-    var element = _ref9.element;
-    return element === null || element === void 0 ? void 0 : (_element$dataset = element.dataset) === null || _element$dataset === void 0 ? void 0 : (_element$dataset$valu = _element$dataset.valuetext) === null || _element$dataset$valu === void 0 ? void 0 : _element$dataset$valu.toLowerCase().startsWith(string);
+    return item.disabled ? false : (_item$element = item.element) === null || _item$element === void 0 ? void 0 : (_item$element$dataset = _item$element.dataset) === null || _item$element$dataset === void 0 ? void 0 : (_item$element$dataset2 = _item$element$dataset.valuetext) === null || _item$element$dataset2 === void 0 ? void 0 : _item$element$dataset2.toLowerCase().startsWith(string);
   });
@@ -925,2 +949,8 @@ return found ? items.indexOf(found) : null;
 
+    case OPEN_MENU_AT_INDEX:
+      return _extends({}, state, {
+        isExpanded: true,
+        selectionIndex: action.payload.index
+      });
+
     case OPEN_MENU_CLEARED:
@@ -927,0 +957,0 @@ return _extends({}, state, {

package.json

 {
   "name": "@reach/menu-button",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "description": "Accessible React button dropdown menu.",
@@ -13,9 +13,9 @@ "author": "React Training <[e-mail]>",
   "scripts": {
-    "build": "ts-node ../../scripts/build"
+    "build": "ts-node --transpile-only ../../scripts/build-package $npm_package_name"
   },
   "dependencies": {
-    "@reach/auto-id": "0.10.5",
-    "@reach/descendants": "0.10.5",
-    "@reach/popover": "0.10.5",
-    "@reach/utils": "0.10.5",
+    "@reach/auto-id": "0.11.0",
+    "@reach/descendants": "0.11.0",
+    "@reach/popover": "0.11.0",
+    "@reach/utils": "0.11.0",
     "prop-types": "^15.7.2",
@@ -36,3 +36,3 @@ "tslib": "^2.0.0"
   ],
-  "gitHead": "86a046f54d53b6420e392b3fa56dd991d9d4e458"
+  "gitHead": "7eaa66982cd17fb012c13c97e6a1770f75b6ce00"
 }

README.md

@@ -5,3 +5,3 @@ # @reach/menu-button
 
-[Docs](https://reacttraining.com/reach-ui/menu-button) | [Source](https://github.com/reach/reach-ui/tree/main/packages/menu-button) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#menubutton)
+[Docs](https://reach.tech/menu-button) | [Source](https://github.com/reach/reach-ui/tree/main/packages/menu-button) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#menubutton)
 
@@ -8,0 +8,0 @@ An accessible dropdown menu for the common dropdown menu button design pattern.

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

239944

increased by4.01%

Lines of code

2059

increased by4.57%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@reach/auto-id@0.11.0

• Updated@reach/descendants@0.11.0

• Updated@reach/popover@0.11.0

• Updated@reach/utils@0.11.0