@pingux/astro 2.7.0-alpha.2 → 2.7.0

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

@@ -25,7 +25,6 @@ var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _SwitchField = _interopRequireDefault(require("./SwitchField.mdx"));
-var _switchFieldAttributes = require("./switchFieldAttributes");
 var _react2 = require("@emotion/react");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -44,7 +43,40 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _switchFieldAttributes.switchFieldArgTypes), _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  argTypes: _objectSpread(_objectSpread(_objectSpread({
+    label: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Example Label'
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    },
+    hintText: {
+      control: {
+        type: 'text'
+      }
+    },
+    value: {
+      defaultValue: 'my-switch'
+    },
+    name: {},
+    className: {},
+    isDisabled: {},
+    isRequired: {},
+    isReadOnly: {},
+    isDefaultSelected: {},
+    hasAutoFocus: {},
+    id: {},
+    isSelected: {
+      control: {
+        type: 'none'
+      }
+    }
+  }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var Default = function Default(args) {

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

@@ -8,9 +8,10 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _SwitchField = _interopRequireDefault(require("./SwitchField"));
 var _react2 = require("@emotion/react");
-var TEST_LABEL = 'test label';
+var testId = 'test-switch';
 var defaultProps = {
-  label: TEST_LABEL
+  label: 'Example label',
+  'data-testid': testId
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -23,9 +24,9 @@ test('renders Switch component', function () {
   getComponent({
     'aria-label': 'test'
   });
-  var switchComponent = _testWrapper.screen.getByText(TEST_LABEL);
+  var switchComponent = _testWrapper.screen.getByTestId(testId);
   _testWrapper.screen.getByRole('switch');
-  expect(switchComponent).toBeInstanceOf(HTMLLabelElement);
+  expect(switchComponent).toBeInstanceOf(HTMLDivElement);
   expect(switchComponent).toBeInTheDocument();
 });
 test('renders label', function () {

package/lib/cjs/index.js

@@ -109,11 +109,7 @@ var _exportNames = {
   DataTableCell: true,
   DataTableColumn: true,
   DataTableHeader: true,
-  DataTableRow: true,
-  ListItemEditButton: true,
-  ListItemMenu: true,
-  ListItemSwitchField: true,
-  StyledListItem: true
+  DataTableRow: true
 };
 _Object$defineProperty(exports, "AccordionGridGroup", {
   enumerable: true,
@@ -421,24 +417,6 @@ _Object$defineProperty(exports, "ListItem", {
     return _ListItem["default"];
   }
 });
-_Object$defineProperty(exports, "ListItemEditButton", {
-  enumerable: true,
-  get: function get() {
-    return _ListItemEditButton["default"];
-  }
-});
-_Object$defineProperty(exports, "ListItemMenu", {
-  enumerable: true,
-  get: function get() {
-    return _ListItemMenu["default"];
-  }
-});
-_Object$defineProperty(exports, "ListItemSwitchField", {
-  enumerable: true,
-  get: function get() {
-    return _ListItemSwitchField["default"];
-  }
-});
 _Object$defineProperty(exports, "ListView", {
   enumerable: true,
   get: function get() {
@@ -607,12 +585,6 @@ _Object$defineProperty(exports, "Stepper", {
     return _Stepper["default"];
   }
 });
-_Object$defineProperty(exports, "StyledListItem", {
-  enumerable: true,
-  get: function get() {
-    return _StyledListItem["default"];
-  }
-});
 _Object$defineProperty(exports, "Switch", {
   enumerable: true,
   get: function get() {
@@ -1617,9 +1589,5 @@ _forEachInstanceProperty(_context73 = _Object$keys(_DataTable)).call(_context73,
 });
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
-var _ListItemEditButton = _interopRequireDefault(require("./experimental/StyledListItem/controls/ListItemEditButton"));
-var _ListItemMenu = _interopRequireDefault(require("./experimental/StyledListItem/controls/ListItemMenu"));
-var _ListItemSwitchField = _interopRequireDefault(require("./experimental/StyledListItem/controls/ListItemSwitchField"));
-var _StyledListItem = _interopRequireDefault(require("./experimental/StyledListItem/StyledListItem"));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/cjs/utils/docUtils/ariaAttributes.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAriaAttributeProps = exports.descriptions = exports.ariaAttributesBasePropTypes = exports.ariaAttributeBaseDocSettings = exports.ariaAttributeBaseArgTypes = void 0;
+exports.getAriaAttributeProps = exports.ariaAttributesBasePropTypes = exports.ariaAttributeBaseDocSettings = exports.ariaAttributeBaseArgTypes = void 0;
 var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
 var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
@@ -30,7 +30,6 @@ var descriptions = {
   ariaLabel: 'Defines a string value that labels the current element.',
   ariaLabelledby: 'Identifies the element (or elements) that labels the current element.'
 };
-exports.descriptions = descriptions;
 var ariaAttributeBaseDocSettings = {
   type: {
     summary: 'string'

package/lib/cjs/utils/docUtils/hoverProps.js

@@ -18,7 +18,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var descriptions = {
-  isHovered: 'If the item is hovered',
   onHoverStart: 'Handler that is called when a hover interaction starts.',
   onHoverEnd: 'Handler that is called when a hover interaction ends.',
   onHoverChange: 'Handler that is called when the hover state changes.'
@@ -36,9 +35,6 @@ var baseDocSettings = {
 };
 exports.baseDocSettings = baseDocSettings;
 var onHoverArgTypes = {
-  isHovered: _objectSpread({
-    description: descriptions.isHovered
-  }, baseDocSettings),
   'onHoverStart': _objectSpread({
     description: descriptions.onHoverStart
   }, baseDocSettings),
@@ -51,9 +47,8 @@ var onHoverArgTypes = {
 };
 exports.onHoverArgTypes = onHoverArgTypes;
 var onHoverPropTypes = {
-  isHovered: _propTypes["default"].bool,
-  onHoverChange: _propTypes["default"].func,
+  onHoverStart: _propTypes["default"].func,
   onHoverEnd: _propTypes["default"].func,
-  onHoverStart: _propTypes["default"].func
+  onHoverChange: _propTypes["default"].func
 };
 exports.onHoverPropTypes = onHoverPropTypes;

package/lib/components/IconButton/IconButton.js

@@ -15,11 +15,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { Pressable, useHover, usePress } from '@react-aria/interactions';
+import PropTypes from 'prop-types';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
-import { iconButtonPropTypes } from './iconButtonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
@@ -81,7 +81,43 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   }
   return button;
 });
-IconButton.propTypes = iconButtonPropTypes;
+IconButton.propTypes = {
+  /** Styling to apply to the IconButton. */
+  variant: PropTypes.string,
+  /** Defines a string value that labels the current element. */
+  'aria-label': PropTypes.string,
+  /** Content will be displayed in a tooltip on hover or focus. */
+  title: PropTypes.string,
+  /**
+   * Handler that is called when the press is released over the target.
+   * (e: PressEvent) => void
+   */
+  onPress: PropTypes.func,
+  /**
+   * Handler that is called when a press interaction starts.
+   * (e: PressEvent) => void
+   */
+  onPressStart: PropTypes.func,
+  /**
+   * Handler that is called when a press interaction ends, either over the target or when the
+   * pointer leaves the target.
+   * (e: PressEvent) => void
+   */
+  onPressEnd: PropTypes.func,
+  /**
+   * Handler that is called when the press state changes.
+   * (isPressed: boolean) => void
+   */
+  onPressChange: PropTypes.func,
+  /**
+   * Handler that is called when a press is released over the target, regardless of whether it
+   * started on the target or not.
+   * (e: PressEvent) => void
+   */
+  onPressUp: PropTypes.func,
+  /** Whether the icon is disabled. */
+  isDisabled: PropTypes.bool
+};
 IconButton.defaultProps = {
   variant: 'base',
   isDisabled: false

package/lib/components/IconButton/IconButton.stories.js

@@ -10,7 +10,6 @@ import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
 import IconButtonReadme from './IconButton.mdx';
-import { iconButtonArgTypes } from './iconButtonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/IconButton',
@@ -26,7 +25,40 @@ export default {
       }
     }
   },
-  argTypes: iconButtonArgTypes
+  argTypes: {
+    icon: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: CreateIcon,
+      description: 'The icon to render. List of icons at https://materialdesignicons.com/'
+    },
+    title: {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-label': {
+      control: {
+        type: 'text'
+      }
+    },
+    isDisabled: {},
+    variant: {
+      control: {
+        type: 'select',
+        options: ['base', 'inverted', 'invertedSquare', 'square']
+      },
+      defaultValue: 'base'
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md']
+      },
+      defaultValue: 'sm'
+    }
+  }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(IconButton, _extends({

package/lib/components/ListView/ListView.js

@@ -53,6 +53,15 @@ export function useListLayout(state) {
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
+
+/**
+ * NOTE: be careful with putting focusable elements inside ListView.
+ * It is using a grid (useList hook) with its own event listeners under the hood.
+ * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)
+ * If you decided to add a focusable element inside ListView,
+ * you should stop bubbling of a pointerDown event and put a focus on the element.
+*/
+
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   var disabledKeys = props.disabledKeys,
     _props$isHoverable = props.isHoverable,

package/lib/components/ListView/ListView.stories.js

@@ -15,18 +15,21 @@ import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { Item, useAsyncList } from 'react-stately';
+import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
+import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, ListItemMenu, ListItemSwitchField, ListView, StyledListItem } from '../../index';
+import { Box, Icon, IconButton, ListView, Text } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import ListViewReadme from './ListView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Experimental/ListView',
+  title: 'Components/ListView',
   component: ListView,
   parameters: {
     docs: {
@@ -533,18 +536,44 @@ var actions = {
 };
 var ListElement = function ListElement(_ref) {
   var item = _ref.item;
-  return ___EmotionJSX(StyledListItem, {
-    details: {
-      text: item.name,
-      icon: FormSelectIcon
+  return ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: FormSelectIcon,
+    mr: "sm",
+    color: "accent.40",
+    size: "md",
+    title: {
+      name: 'Form Select Icon'
+    }
+  }), ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    alignSelf: "center"
+  }, item.name)), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center",
+    gap: "sm"
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "create-icon"
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: "sm",
+    title: {
+      name: 'Create Icon'
+    }
+  })), ___EmotionJSX(IconButton, {
+    "aria-label": "actions-icon"
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: "sm",
+    title: {
+      name: 'More Vertical Icon'
     }
-  }, ___EmotionJSX(ListItemSwitchField, null), ___EmotionJSX(ListItemMenu, null, ___EmotionJSX(Item, {
-    key: "enable"
-  }, "Enable user"), ___EmotionJSX(Item, {
-    key: "disable"
-  }, "Disable user"), ___EmotionJSX(Item, {
-    key: "delete"
-  }, "Delete user")));
+  }))));
 };
 export var Default = function Default(_ref2) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
@@ -552,24 +581,48 @@ export var Default = function Default(_ref2) {
     items: items
   }), function (item) {
     return ___EmotionJSX(Item, {
-      "data-id": item.key,
       key: item.name,
-      listItemProps: {
-        variant: 'listViewItem.styledListItem'
-      },
-      textValue: item.name
-    }, ___EmotionJSX(StyledListItem, {
-      details: {
-        text: item.name,
-        icon: FormSelectIcon
+      textValue: item.name,
+      "data-id": item.key
+    }, ___EmotionJSX(Box, {
+      isRow: true
+    }, ___EmotionJSX(Box, {
+      isRow: true,
+      mr: "auto",
+      alignSelf: "center"
+    }, ___EmotionJSX(Icon, {
+      icon: FormSelectIcon,
+      mr: "sm",
+      color: "accent.40",
+      size: "md",
+      title: {
+        name: 'Form Select Icon'
       }
-    }, ___EmotionJSX(ListItemSwitchField, null), ___EmotionJSX(ListItemMenu, null, ___EmotionJSX(Item, {
-      key: "enable"
-    }, "Enable user"), ___EmotionJSX(Item, {
-      key: "disable"
-    }, "Disable user"), ___EmotionJSX(Item, {
-      key: "delete"
-    }, "Delete user"))));
+    }), ___EmotionJSX(Text, {
+      variant: "itemTitle",
+      alignSelf: "center"
+    }, item.name)), ___EmotionJSX(Box, {
+      isRow: true,
+      alignSelf: "center",
+      gap: "sm"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "create-icon"
+    }, ___EmotionJSX(Icon, {
+      icon: CreateIcon,
+      size: "sm",
+      title: {
+        name: 'Create Icon'
+      }
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "actions-icon",
+      size: "sm"
+    }, ___EmotionJSX(Icon, {
+      icon: MoreVertIcon,
+      size: "sm",
+      title: {
+        name: 'More Vertical Icon'
+      }
+    })))));
   });
 };
 export var InfiniteLoadingList = function InfiniteLoadingList(args) {
@@ -709,9 +762,6 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.name,
-      listItemProps: {
-        variant: 'listViewItem.styledListItem'
-      },
       textValue: item.name
     }, ___EmotionJSX(ListElement, {
       item: item
@@ -736,9 +786,6 @@ export var MultipleSelection = function MultipleSelection(_ref6) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.name,
-      listItemProps: {
-        variant: 'listViewItem.styledListItem'
-      },
       textValue: item.name
     }, ___EmotionJSX(ListElement, {
       item: item

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -35,10 +35,6 @@ var container = {
     borderBottomColor: 'line.light'
   }
 };
-var styledListItem = _objectSpread(_objectSpread({}, container), {}, {
-  padding: 0,
-  minHeight: 0
-});
 var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
   minHeight: '75px',
   height: '76px',
@@ -70,6 +66,5 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
 });
 export default {
   container: container,
-  linkedViewContainer: linkedViewContainer,
-  styledListItem: styledListItem
+  linkedViewContainer: linkedViewContainer
 };

package/lib/components/Menu/Menu.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["isDisabled", "isNotFocusedOnHover", "onAction", "onHoverChange", "onHoverEnd", "onHoverStart", "onSelectionChange", "selectionMode"];
+var _excluded = ["isDisabled", "isNotFocusedOnHover", "onAction", "onHoverChange", "onHoverEnd", "onHoverStart", "onSelectionChange"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 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; }
@@ -19,25 +19,23 @@ 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 PropTypes from 'prop-types';
 import { MenuContext } from '../../context/MenuContext';
 import { usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { onHoverPropTypes } from '../../utils/docUtils/hoverProps';
 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;
-  var _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+  var isDisabled = props.isDisabled,
     isNotFocusedOnHover = props.isNotFocusedOnHover,
     onAction = props.onAction,
     onHoverChange = props.onHoverChange,
     onHoverEnd = props.onHoverEnd,
     onHoverStart = props.onHoverStart,
     onSelectionChange = props.onSelectionChange,
-    _props$selectionMode = props.selectionMode,
-    selectionMode = _props$selectionMode === void 0 ? 'none' : _props$selectionMode,
     others = _objectWithoutProperties(props, _excluded);
   var contextProps = useContext(MenuContext);
   var completeProps = _objectSpread({}, mergeProps(contextProps, props));
@@ -81,6 +79,61 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }));
 });
-Menu.propTypes = menuPropTypes;
+Menu.propTypes = _objectSpread({
+  /** The type of selection that is allowed. */
+  selectionMode: PropTypes.oneOf(['none', 'single', 'multiple']),
+  /**
+   * The item keys that are disabled. These items cannot be selected, focused, or otherwise
+   * interacted with.
+   */
+  disabledKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+  /**
+   * The initial selected keys in the collection (uncontrolled).
+   *
+   * `defaultSelectedKeys="all"` can be used to select every key.
+   */
+  defaultSelectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  /**
+   * The currently selected keys in the collection (controlled).
+   *
+   * `selectedKeys="all"` can be used to select every key.
+   */
+  selectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  /** Whether the item is disabled. */
+  isDisabled: PropTypes.bool,
+  /** Whether the menu item is selected. */
+  isSelected: PropTypes.bool,
+  /**
+   * Whether menu item should receive focus state on hover.
+   */
+  isNotFocusedOnHover: PropTypes.bool,
+  /**
+   * Handler that is called when an item is selected.
+   *
+   * `(key: Key) => void`
+   */
+  onAction: PropTypes.func,
+  /**
+   * Handler that is called when the selection changes. Does not fire when `selectionMode="none"`.
+   *
+   * `(keys: Selection) => any`
+   */
+  onSelectionChange: PropTypes.func,
+  /** A screen reader only label for the menu item. */
+  'aria-label': PropTypes.string,
+  /** Identifies the element (or elements) that labels the current element. */
+  'aria-labelledby': PropTypes.string,
+  /** Identifies the element (or elements) that describes the object. */
+  'aria-describedby': PropTypes.string,
+  /**
+   * Identifies the element (or elements) that provide a detailed,
+   * extended description for the object.
+   */
+  'aria-details': PropTypes.string
+}, onHoverPropTypes);
+Menu.defaultProps = {
+  selectionMode: 'none',
+  isDisabled: false
+};
 Menu.displayName = 'Menu';
 export default Menu;