@pingux/astro 2.49.0-alpha.1 → 2.49.0-alpha.2

package/lib/cjs/components/Menu/Menu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MenuProps } from '../../types';
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+export default Menu;

package/lib/cjs/components/Menu/Menu.js

@@ -30,7 +30,6 @@ var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _MenuItem = _interopRequireDefault(require("../MenuItem"));
-var _menuAttributes = require("./menuAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["isDisabled", "isNotFocusedOnHover", "onAction", "onHoverChange", "onHoverEnd", "onHoverStart", "onSelectionChange", "selectionMode"];
 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); }
@@ -59,12 +58,8 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     hoverProps = _useHover.hoverProps;
   var state = (0, _reactStately.useTreeState)(completeProps);
-  var menuRef = (0, _react.useRef)();
+  var menuRef = (0, _hooks.useLocalOrForwardRef)(ref);
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return menuRef.current;
-  });
   var _useMenu = (0, _reactAria.useMenu)(completeProps, state, menuRef),
     menuProps = _useMenu.menuProps;
   var _useFocusRing = (0, _reactAria.useFocusRing)({
@@ -80,7 +75,9 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: menuRef,
     variant: "menu",
     "aria-orientation": _orientation["default"].VERTICAL
-  }, others, (0, _reactAria.mergeProps)(focusProps, menuProps, hoverProps)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }, others, (0, _reactAria.mergeProps)(focusProps, menuProps, hoverProps), {
+    role: "menu"
+  }), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_MenuItem["default"], {
       key: item.key,
       item: item,
@@ -92,7 +89,6 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }));
 });
-Menu.propTypes = _menuAttributes.menuPropTypes;
 Menu.displayName = 'Menu';
 var _default = Menu;
 exports["default"] = _default;

package/lib/cjs/components/Menu/Menu.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { MenuProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<MenuProps>;

package/lib/cjs/components/Menu/Menu.stories.js

@@ -6,14 +6,13 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = void 0;
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactStately = require("react-stately");
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _Menu = _interopRequireDefault(require("./Menu.mdx"));
 var _menuAttributes = require("./menuAttributes");
 var _react2 = require("@emotion/react");
@@ -40,8 +39,7 @@ var _default = {
   argTypes: _menuAttributes.menuArgTypes
 };
 exports["default"] = _default;
-var Default = function Default(_ref) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
+var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({
     "aria-label": "Example Menu"
   }, args), (0, _react2.jsx)(_reactStately.Item, {

package/lib/cjs/components/Menu/Menu.styles.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    padding: number;
+    margin: number;
+    listStyle: string;
+    maxWidth: number;
+    outline: string;
+    overflow: string;
+    minWidth: string;
+    borderRadius: number;
+};
+export default _default;

package/lib/cjs/components/Menu/Menu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/Menu/Menu.test.js

@@ -18,20 +18,20 @@ var defaultProps = {
   'aria-label': 'testLabel'
 };
 var defaultItems = [{
-  key: 'a',
+  id: 'a',
   children: 'A'
 }, {
-  key: 'b',
+  id: 'b',
   children: 'B'
 }, {
-  key: 'c',
+  id: 'c',
   children: 'C'
 }];
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({}, defaultProps, props), (0, _map["default"])(defaultItems).call(defaultItems, function (item) {
     return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({
-      key: item.key
+      key: item.id
     }, item));
   })));
 };
@@ -41,7 +41,7 @@ var getComponent = function getComponent() {
   renderComponent: function renderComponent(props) {
     return (0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({}, defaultProps, props), (0, _map["default"])(defaultItems).call(defaultItems, function (item) {
       return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({
-        key: item.key
+        key: item.id
       }, item));
     }));
   }
@@ -124,11 +124,11 @@ test('should fire onAction', function () {
   _testWrapper.fireEvent.keyUp(menuItems[0], {
     key: 'Enter'
   });
-  expect(onAction).toHaveBeenNthCalledWith(1, defaultItems[0].key);
+  expect(onAction).toHaveBeenNthCalledWith(1, defaultItems[0].id);
 
   // Click events
   _userEvent["default"].click(menuItems[1]);
-  expect(onAction).toHaveBeenNthCalledWith(2, defaultItems[1].key);
+  expect(onAction).toHaveBeenNthCalledWith(2, defaultItems[1].id);
 });
 test('should not fire onSelectionChange when selectionMode is none', function () {
   var onSelectionChange = jest.fn();

package/lib/cjs/components/Menu/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Menu';

package/lib/cjs/components/Menu/menuAttributes.d.ts

@@ -0,0 +1,2 @@
+export declare const menuArgTypes: any;
+export declare const menuPropTypes: any;

package/lib/cjs/components/MenuItem/MenuItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MenuItemProps } from '../../types';
+/**
+ * Menu Item component intended to be used within Menu or PopupMenu.
+ * This component is not intented to be used outside of Menu or independently.
+ * Utilizes [React Aria](https://react-spectrum.adobe.com/react-aria/useMenu.html)
+ */
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuItem;

package/lib/cjs/components/MenuItem/MenuItem.js

@@ -15,10 +15,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _MenuContext = require("../../context/MenuContext");
 var _hooks = require("../../hooks");
-var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 var _excluded = ["isSeparator", "isPressed", "data-id"];
@@ -40,24 +38,21 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useMenuContext = (0, _MenuContext.useMenuContext)(),
     onClose = _useMenuContext.onClose,
     closeOnSelect = _useMenuContext.closeOnSelect;
-  var key = item.key,
-    rendered = item.rendered,
-    itemProps = item.props;
+  var _ref = item,
+    key = _ref.key,
+    rendered = _ref.rendered,
+    itemProps = _ref.props;
   var isSeparator = itemProps.isSeparator,
     propIsPressed = itemProps.isPressed,
     dataId = itemProps['data-id'],
     others = (0, _objectWithoutProperties2["default"])(itemProps, _excluded);
   var isDisabled = propIsDisabled || state.disabledKeys.has(key);
   var isSelected = state.selectionManager.isSelected(key);
-  var menuItemRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return menuItemRef.current;
-  });
+  var menuItemRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var _useMenuItem = (0, _reactAria.useMenuItem)({
-      key: item.key,
-      'aria-label': item['aria-label'],
+      key: item === null || item === void 0 ? void 0 : item.key,
+      'aria-label': item === null || item === void 0 ? void 0 : item['aria-label'],
       isDisabled: isDisabled,
       onAction: onAction,
       isSelected: isSelected,
@@ -103,49 +98,11 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: isSeparator ? 'menuItem.separator' : 'menuItem.item',
     "data-id": dataId,
     "aria-disabled": isDisabled
-  }, (0, _reactAria.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
+  }, (0, _reactAria.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others), {
+    role: menuItemProps.role
+  }), rendered);
 });
 MenuItem.displayName = 'MenuItem';
-MenuItem.propTypes = {
-  /** Whether the item is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the menu item is selected. */
-  isSelected: _propTypes["default"].bool,
-  /** Whether the menu item is currently pressed. */
-  isPressed: _propTypes["default"].bool,
-  /**
-   * Whether the containing menu has keyboard focus.
-   * Used to determine when to present hover vs focus styling.
-   */
-  isFocusVisible: _propTypes["default"].bool,
-  /**
-   * Whether menu item should receive focus state on hover.
-   */
-  isNotFocusedOnHover: _propTypes["default"].bool,
-  /** A screen reader only label for the menu item. */
-  'aria-label': _propTypes["default"].string,
-  /** Handler that is called when the menu should close after selecting an item. */
-  onClose: _propTypes["default"].func,
-  /** Handler that is called when the user activates the item. */
-  onAction: _propTypes["default"].func,
-  item: _propTypes["default"].shape({
-    'aria-label': _propTypes["default"].string,
-    key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({
-      'data-id': _propTypes["default"].string,
-      isSeparator: _propTypes["default"].bool,
-      isPressed: _propTypes["default"].bool
-    }),
-    rendered: _propTypes["default"].node,
-    isDisabled: _propTypes["default"].bool
-  }),
-  state: _propTypes["default"].shape({
-    disabledKeys: _isIterable.isIterableProp,
-    selectionManager: _propTypes["default"].shape({
-      isSelected: _propTypes["default"].func
-    })
-  })
-};
 MenuItem.defaultProps = {
   isDisabled: false,
   isPressed: false

package/lib/cjs/components/MenuItem/MenuItem.styles.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    item: {
+        bg: string;
+        padding: string;
+        outline: string;
+        cursor: string;
+        '&.is-focused, &.is-selected, &.is-pressed': {
+            color: string;
+            bg: string;
+            '> *': {
+                color: string;
+            };
+        };
+        '&.is-pressed': {
+            bg: string;
+        };
+    };
+    separator: {
+        padding: string;
+        '& > [role="separator"]': {
+            margin: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/MenuItem/MenuItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/MenuItem/MenuItem.test.js

@@ -15,15 +15,18 @@ var testId = 'testId';
 var defaultMenuItems = [{
   key: 'MenuItem 1',
   children: 'MenuItem 1',
-  'data-id': 'menuItem1'
+  'data-id': 'menuItem1',
+  isPressed: false
 }, {
   key: 'MenuItem 2',
   children: 'MenuItem 2',
-  'data-id': 'menuItem2'
+  'data-id': 'menuItem2',
+  isPressed: false
 }, {
   key: 'MenuItem 3',
   children: 'MenuItem 3',
-  'data-id': 'menuItem3'
+  'data-id': 'menuItem3',
+  isPressed: false
 }];
 var defaultProps = {
   'data-testid': testId,
@@ -38,9 +41,7 @@ var getComponent = function getComponent() {
     _ref$renderFn = _ref.renderFn,
     renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
   return renderFn((0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({}, defaultProps, props), (0, _map["default"])(items).call(items, function (li) {
-    return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({
-      key: li.key
-    }, li, {
+    return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({}, li, {
       sx: {
         backgroundColor: 'orange'
       }
@@ -52,9 +53,7 @@ var getComponent = function getComponent() {
 (0, _universalComponentTest.universalComponentTests)({
   renderComponent: function renderComponent(props) {
     return (0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({}, defaultProps, props), (0, _map["default"])(defaultMenuItems).call(defaultMenuItems, function (li) {
-      return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({
-        key: li.key
-      }, li, {
+      return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({}, li, {
         sx: {
           backgroundColor: 'orange'
         }
@@ -172,4 +171,20 @@ test('custom props are passed into menuItem', function () {
   var itemText1 = defaultMenuItems[0].children;
   var menuItem1 = _testWrapper.screen.getByText(itemText1);
   expect(menuItem1).toHaveStyleRule('background-color', 'orange');
+});
+test('Selection mode given as single', function () {
+  getComponent({
+    selectionMode: 'single',
+    defaultSelectedKeys: [defaultMenuItems[0].key]
+  });
+  var menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
+  expect(menuItems).toHaveLength(defaultMenuItems.length);
+});
+test('Selection mode given as multiple', function () {
+  getComponent({
+    selectionMode: 'multiple',
+    defaultSelectedKeys: [defaultMenuItems[0].key]
+  });
+  var menuItems = _testWrapper.screen.queryAllByRole('menuitemcheckbox');
+  expect(menuItems).toHaveLength(defaultMenuItems.length);
 });

package/lib/cjs/components/MenuItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MenuItem';

package/lib/cjs/components/Tabs/Tabs.stories.js

@@ -235,12 +235,12 @@ var WithList = function WithList() {
       key: 'tab1list',
       name: 'Tab 1 list',
       children: 'Tab 1 from list',
-      role: 'listitem'
+      role: 'menuitemradio'
     }, {
       key: 'tab2list',
       name: 'Tab 2 list',
       children: 'Tab 2 from list',
-      role: 'listitem'
+      role: 'menuitemradio'
     }]
   }]);
   return (0, _react2.jsx)(_index.Tabs, {

package/lib/cjs/components/Tabs/Tabs.test.js

@@ -55,12 +55,12 @@ var tabsWithList = [{
     key: 'tab1list',
     name: 'Tab 1 list',
     children: 'Tab 1 from list',
-    role: 'listitem'
+    role: 'menuitemradio'
   }, {
     key: 'tab2list',
     name: 'Tab 2 list',
     children: 'Tab 2 from list',
-    role: 'listitem'
+    role: 'menuitemradio'
   }]
 }];
 var defaultProps = {
@@ -472,7 +472,7 @@ test('will render tab with list if provided', /*#__PURE__*/(0, _asyncToGenerator
         _userEvent["default"].click(menuBtn);
         expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
         testTabPanel(0);
-        menuItems = _testWrapper.screen.queryAllByRole('listitem');
+        menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
         expect(menuItems).toHaveLength(tabsWithList[1].list.length);
         expect(menuItems[0]).not.toHaveFocus();
         _userEvent["default"].click(menuItems[0]);
@@ -510,7 +510,7 @@ test('tab list is accessible via keyboard', function () {
   });
   expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
   testTabPanel(0);
-  var menuItems = _testWrapper.screen.queryAllByRole('listitem');
+  var menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
   expect(menuItems).toHaveLength(tabsWithList[1].list.length);
   expect(menuItems[0]).toHaveFocus();
   _testWrapper.fireEvent.keyDown(menuItems[0], {

package/lib/cjs/context/MenuContext/index.d.ts

@@ -1,6 +1,8 @@
-/// <reference types="react" />
-interface MenuContent {
+import { MutableRefObject } from 'react';
+export interface MenuContextValue {
+    onClose?: () => void;
+    closeOnSelect?: boolean;
+    ref?: MutableRefObject<HTMLDivElement | HTMLElement | null>;
 }
-export declare const MenuContext: import("react").Context<MenuContent | undefined>;
-export declare const useMenuContext: () => MenuContent | undefined;
-export {};
+export declare const MenuContext: import("react").Context<MenuContextValue>;
+export declare function useMenuContext(): MenuContextValue;

package/lib/cjs/context/MenuContext/index.js

@@ -4,13 +4,11 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMenuContext = exports.MenuContext = void 0;
+exports.MenuContext = void 0;
+exports.useMenuContext = useMenuContext;
 var _react = require("react");
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-
 var MenuContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.MenuContext = MenuContext;
-var useMenuContext = function useMenuContext() {
+function useMenuContext() {
   return (0, _react.useContext)(MenuContext);
-};
-exports.useMenuContext = useMenuContext;
+}

package/lib/cjs/types/index.d.ts

@@ -14,6 +14,8 @@ export * from './item';
 export * from './link';
 export * from './listItem';
 export * from './loader';
+export * from './menu';
+export * from './menuItem';
 export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './popoverMenu';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -183,8 +183,30 @@ _forEachInstanceProperty(_context16 = _Object$keys(_loader)).call(_context16, fu
     }
   });
 });
+var _menu = require("./menu");
+_forEachInstanceProperty(_context17 = _Object$keys(_menu)).call(_context17, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _menu[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _menu[key];
+    }
+  });
+});
+var _menuItem = require("./menuItem");
+_forEachInstanceProperty(_context18 = _Object$keys(_menuItem)).call(_context18, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _menuItem[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _menuItem[key];
+    }
+  });
+});
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context17 = _Object$keys(_overlayPanel)).call(_context17, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_overlayPanel)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -195,7 +217,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context18 = _Object$keys(_popoverContainer)).call(_context18, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_popoverContainer)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +228,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context19 = _Object$keys(_popoverMenu)).call(_context19, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_popoverMenu)).call(_context21, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -217,7 +239,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_popoverMenu)).call(_context1
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context20 = _Object$keys(_requirementsList)).call(_context20, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_requirementsList)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -228,7 +250,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context21 = _Object$keys(_rockerButtonGroup)).call(_context21, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_rockerButtonGroup)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -239,7 +261,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context22 = _Object$keys(_scrollBox)).call(_context22, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_scrollBox)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -250,7 +272,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_scrollBox)).call(_context22,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context23 = _Object$keys(_separator)).call(_context23, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_separator)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -261,7 +283,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_separator)).call(_context23,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context24 = _Object$keys(_shared)).call(_context24, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_shared)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -272,7 +294,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_shared)).call(_context24, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context25 = _Object$keys(_table)).call(_context25, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_table)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +305,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_table)).call(_context25, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context26 = _Object$keys(_text)).call(_context26, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_text)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +316,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_text)).call(_context26, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context27 = _Object$keys(_tooltipTrigger)).call(_context27, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_tooltipTrigger)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/menu.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { BoxProps } from './box';
+import { HoverProps } from './shared';
+export interface MenuProps extends BoxProps, HoverProps {
+    children?: React.ReactNode;
+    title?: string | undefined;
+    'aria-label'?: string | undefined;
+    isNotFocusedOnHover?: boolean;
+    onAction?: () => void;
+    onSelectionChange?: () => void;
+    isSelected?: boolean;
+    selectionMode?: 'none' | 'single' | 'multiple';
+    disabledKeys?: string[];
+}

package/lib/cjs/types/menu.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/menuItem.d.ts

@@ -0,0 +1,28 @@
+import { Node, TreeState } from 'react-stately';
+import { TestingAttributes } from './shared/test';
+import { BoxProps } from './box';
+export interface MenuItemProps extends BoxProps, TestingAttributes {
+    /** Whether the item is disabled. */
+    isDisabled?: boolean;
+    /** Whether the menu item is selected. */
+    isSelected?: boolean;
+    /** Whether the menu item is currently pressed. */
+    isPressed?: boolean;
+    /**
+     * Whether the containing menu has keyboard focus.
+     * Used to determine when to present hover vs focus styling.
+    */
+    isFocusVisible?: boolean;
+    /**
+     * Whether menu item should receive focus state on hover.
+    */
+    isNotFocusedOnHover?: boolean;
+    /** A screen reader only label for the menu item. */
+    /** Handler that is called when the menu should close after selecting an item. */
+    onClose?: () => void;
+    /** Handler that is called when the user activates the item. */
+    onAction?: () => void;
+    item?: Node<object>;
+    state: TreeState<object>;
+    defaultSelectedKey?: string | number;
+}

package/lib/cjs/types/menuItem.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Menu/Menu.js

@@ -14,17 +14,16 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { mergeProps, useFocusRing, useMenu } from 'react-aria';
 import { useTreeState } from 'react-stately';
 import { useHover } from '@react-aria/interactions';
 import { useSyncRef } from '@react-aria/utils';
 import { MenuContext } from '../../context/MenuContext';
-import { usePropWarning } from '../../hooks';
+import { useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import Box from '../Box';
 import MenuItem from '../MenuItem';
-import { menuPropTypes } from './menuAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
@@ -48,12 +47,8 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     hoverProps = _useHover.hoverProps;
   var state = useTreeState(completeProps);
-  var menuRef = useRef();
+  var menuRef = useLocalOrForwardRef(ref);
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return menuRef.current;
-  });
   var _useMenu = useMenu(completeProps, state, menuRef),
     menuProps = _useMenu.menuProps;
   var _useFocusRing = useFocusRing({
@@ -69,7 +64,9 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: menuRef,
     variant: "menu",
     "aria-orientation": ORIENTATION.VERTICAL
-  }, others, mergeProps(focusProps, menuProps, hoverProps)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+  }, others, mergeProps(focusProps, menuProps, hoverProps), {
+    role: "menu"
+  }), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(MenuItem, {
       key: item.key,
       item: item,
@@ -81,6 +78,5 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }));
 });
-Menu.propTypes = menuPropTypes;
 Menu.displayName = 'Menu';
 export default Menu;

package/lib/components/Menu/Menu.stories.js

@@ -1,11 +1,10 @@
-import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Item } from 'react-stately';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Menu, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import MenuReadme from './Menu.mdx';
 import { menuArgTypes } from './menuAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -31,8 +30,7 @@ export default {
   },
   argTypes: menuArgTypes
 };
-export var Default = function Default(_ref) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+export var Default = function Default(args) {
   return ___EmotionJSX(Menu, _extends({
     "aria-label": "Example Menu"
   }, args), ___EmotionJSX(Item, {

package/lib/components/Menu/Menu.test.js

@@ -15,20 +15,20 @@ var defaultProps = {
   'aria-label': 'testLabel'
 };
 var defaultItems = [{
-  key: 'a',
+  id: 'a',
   children: 'A'
 }, {
-  key: 'b',
+  id: 'b',
   children: 'B'
 }, {
-  key: 'c',
+  id: 'c',
   children: 'C'
 }];
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Menu, _extends({}, defaultProps, props), _mapInstanceProperty(defaultItems).call(defaultItems, function (item) {
     return ___EmotionJSX(Item, _extends({
-      key: item.key
+      key: item.id
     }, item));
   })));
 };
@@ -38,7 +38,7 @@ universalComponentTests({
   renderComponent: function renderComponent(props) {
     return ___EmotionJSX(Menu, _extends({}, defaultProps, props), _mapInstanceProperty(defaultItems).call(defaultItems, function (item) {
       return ___EmotionJSX(Item, _extends({
-        key: item.key
+        key: item.id
       }, item));
     }));
   }
@@ -121,11 +121,11 @@ test('should fire onAction', function () {
   fireEvent.keyUp(menuItems[0], {
     key: 'Enter'
   });
-  expect(onAction).toHaveBeenNthCalledWith(1, defaultItems[0].key);
+  expect(onAction).toHaveBeenNthCalledWith(1, defaultItems[0].id);
 
   // Click events
   userEvent.click(menuItems[1]);
-  expect(onAction).toHaveBeenNthCalledWith(2, defaultItems[1].key);
+  expect(onAction).toHaveBeenNthCalledWith(2, defaultItems[1].id);
 });
 test('should not fire onSelectionChange when selectionMode is none', function () {
   var onSelectionChange = jest.fn();

package/lib/components/MenuItem/MenuItem.js

@@ -2,13 +2,11 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["isSeparator", "isPressed", "data-id"];
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { mergeProps, useMenuItem } from 'react-aria';
 import { useFocus, useHover, usePress } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { useMenuContext } from '../../context/MenuContext';
-import { usePropWarning, useStatusClasses } from '../../hooks';
-import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import { useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 
 /**
@@ -28,24 +26,21 @@ var MenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useMenuContext = useMenuContext(),
     onClose = _useMenuContext.onClose,
     closeOnSelect = _useMenuContext.closeOnSelect;
-  var key = item.key,
-    rendered = item.rendered,
-    itemProps = item.props;
+  var _ref = item,
+    key = _ref.key,
+    rendered = _ref.rendered,
+    itemProps = _ref.props;
   var isSeparator = itemProps.isSeparator,
     propIsPressed = itemProps.isPressed,
     dataId = itemProps['data-id'],
     others = _objectWithoutProperties(itemProps, _excluded);
   var isDisabled = propIsDisabled || state.disabledKeys.has(key);
   var isSelected = state.selectionManager.isSelected(key);
-  var menuItemRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return menuItemRef.current;
-  });
+  var menuItemRef = useLocalOrForwardRef(ref);
   var _useMenuItem = useMenuItem({
-      key: item.key,
-      'aria-label': item['aria-label'],
+      key: item === null || item === void 0 ? void 0 : item.key,
+      'aria-label': item === null || item === void 0 ? void 0 : item['aria-label'],
       isDisabled: isDisabled,
       onAction: onAction,
       isSelected: isSelected,
@@ -91,49 +86,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: isSeparator ? 'menuItem.separator' : 'menuItem.item',
     "data-id": dataId,
     "aria-disabled": isDisabled
-  }, mergeProps(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
+  }, mergeProps(pressProps, hoverProps, focusProps, menuItemProps, others), {
+    role: menuItemProps.role
+  }), rendered);
 });
 MenuItem.displayName = 'MenuItem';
-MenuItem.propTypes = {
-  /** Whether the item is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether the menu item is selected. */
-  isSelected: PropTypes.bool,
-  /** Whether the menu item is currently pressed. */
-  isPressed: PropTypes.bool,
-  /**
-   * Whether the containing menu has keyboard focus.
-   * Used to determine when to present hover vs focus styling.
-   */
-  isFocusVisible: PropTypes.bool,
-  /**
-   * Whether menu item should receive focus state on hover.
-   */
-  isNotFocusedOnHover: PropTypes.bool,
-  /** A screen reader only label for the menu item. */
-  'aria-label': PropTypes.string,
-  /** Handler that is called when the menu should close after selecting an item. */
-  onClose: PropTypes.func,
-  /** Handler that is called when the user activates the item. */
-  onAction: PropTypes.func,
-  item: PropTypes.shape({
-    'aria-label': PropTypes.string,
-    key: PropTypes.string,
-    props: PropTypes.shape({
-      'data-id': PropTypes.string,
-      isSeparator: PropTypes.bool,
-      isPressed: PropTypes.bool
-    }),
-    rendered: PropTypes.node,
-    isDisabled: PropTypes.bool
-  }),
-  state: PropTypes.shape({
-    disabledKeys: isIterableProp,
-    selectionManager: PropTypes.shape({
-      isSelected: PropTypes.func
-    })
-  })
-};
 MenuItem.defaultProps = {
   isDisabled: false,
   isPressed: false

package/lib/components/MenuItem/MenuItem.test.js

@@ -12,15 +12,18 @@ var testId = 'testId';
 var defaultMenuItems = [{
   key: 'MenuItem 1',
   children: 'MenuItem 1',
-  'data-id': 'menuItem1'
+  'data-id': 'menuItem1',
+  isPressed: false
 }, {
   key: 'MenuItem 2',
   children: 'MenuItem 2',
-  'data-id': 'menuItem2'
+  'data-id': 'menuItem2',
+  isPressed: false
 }, {
   key: 'MenuItem 3',
   children: 'MenuItem 3',
-  'data-id': 'menuItem3'
+  'data-id': 'menuItem3',
+  isPressed: false
 }];
 var defaultProps = {
   'data-testid': testId,
@@ -35,9 +38,7 @@ var getComponent = function getComponent() {
     _ref$renderFn = _ref.renderFn,
     renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
   return renderFn(___EmotionJSX(Menu, _extends({}, defaultProps, props), _mapInstanceProperty(items).call(items, function (li) {
-    return ___EmotionJSX(Item, _extends({
-      key: li.key
-    }, li, {
+    return ___EmotionJSX(Item, _extends({}, li, {
       sx: {
         backgroundColor: 'orange'
       }
@@ -49,9 +50,7 @@ var getComponent = function getComponent() {
 universalComponentTests({
   renderComponent: function renderComponent(props) {
     return ___EmotionJSX(Menu, _extends({}, defaultProps, props), _mapInstanceProperty(defaultMenuItems).call(defaultMenuItems, function (li) {
-      return ___EmotionJSX(Item, _extends({
-        key: li.key
-      }, li, {
+      return ___EmotionJSX(Item, _extends({}, li, {
         sx: {
           backgroundColor: 'orange'
         }
@@ -169,4 +168,20 @@ test('custom props are passed into menuItem', function () {
   var itemText1 = defaultMenuItems[0].children;
   var menuItem1 = screen.getByText(itemText1);
   expect(menuItem1).toHaveStyleRule('background-color', 'orange');
+});
+test('Selection mode given as single', function () {
+  getComponent({
+    selectionMode: 'single',
+    defaultSelectedKeys: [defaultMenuItems[0].key]
+  });
+  var menuItems = screen.queryAllByRole('menuitemradio');
+  expect(menuItems).toHaveLength(defaultMenuItems.length);
+});
+test('Selection mode given as multiple', function () {
+  getComponent({
+    selectionMode: 'multiple',
+    defaultSelectedKeys: [defaultMenuItems[0].key]
+  });
+  var menuItems = screen.queryAllByRole('menuitemcheckbox');
+  expect(menuItems).toHaveLength(defaultMenuItems.length);
 });

package/lib/components/Tabs/Tabs.stories.js

@@ -212,12 +212,12 @@ export var WithList = function WithList() {
       key: 'tab1list',
       name: 'Tab 1 list',
       children: 'Tab 1 from list',
-      role: 'listitem'
+      role: 'menuitemradio'
     }, {
       key: 'tab2list',
       name: 'Tab 2 list',
       children: 'Tab 2 from list',
-      role: 'listitem'
+      role: 'menuitemradio'
     }]
   }]);
   return ___EmotionJSX(Tabs, {

package/lib/components/Tabs/Tabs.test.js

@@ -54,12 +54,12 @@ var tabsWithList = [{
     key: 'tab1list',
     name: 'Tab 1 list',
     children: 'Tab 1 from list',
-    role: 'listitem'
+    role: 'menuitemradio'
   }, {
     key: 'tab2list',
     name: 'Tab 2 list',
     children: 'Tab 2 from list',
-    role: 'listitem'
+    role: 'menuitemradio'
   }]
 }];
 var defaultProps = {
@@ -471,7 +471,7 @@ test('will render tab with list if provided', /*#__PURE__*/_asyncToGenerator( /*
         userEvent.click(menuBtn);
         expect(screen.queryByRole('menu')).toBeInTheDocument();
         testTabPanel(0);
-        menuItems = screen.queryAllByRole('listitem');
+        menuItems = screen.queryAllByRole('menuitemradio');
         expect(menuItems).toHaveLength(tabsWithList[1].list.length);
         expect(menuItems[0]).not.toHaveFocus();
         userEvent.click(menuItems[0]);
@@ -509,7 +509,7 @@ test('tab list is accessible via keyboard', function () {
   });
   expect(screen.queryByRole('menu')).toBeInTheDocument();
   testTabPanel(0);
-  var menuItems = screen.queryAllByRole('listitem');
+  var menuItems = screen.queryAllByRole('menuitemradio');
   expect(menuItems).toHaveLength(tabsWithList[1].list.length);
   expect(menuItems[0]).toHaveFocus();
   fireEvent.keyDown(menuItems[0], {

package/lib/context/MenuContext/index.js

@@ -1,8 +1,5 @@
 import { createContext, useContext } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-
 export var MenuContext = /*#__PURE__*/createContext({});
-export var useMenuContext = function useMenuContext() {
+export function useMenuContext() {
   return useContext(MenuContext);
-};
+}

package/lib/types/index.js

@@ -14,6 +14,8 @@ export * from './item';
 export * from './link';
 export * from './listItem';
 export * from './loader';
+export * from './menu';
+export * from './menuItem';
 export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './popoverMenu';

package/lib/types/menu.js

@@ -0,0 +1 @@
+export {};

package/lib/types/menuItem.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.49.0-alpha.1",
+  "version": "2.49.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",