@sproutsocial/racine 13.8.0 → 14.0.0

package/commonjs/Menu/index.js

@@ -4,449 +4,61 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MenuRadio = exports.MenuItem = exports.MenuGroup = exports.MenuDivider = exports.MenuCheckbox = exports.MenuButton = exports.Menu = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var React = _interopRequireWildcard(require("react"));
-var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
-var _hooks = require("../utils/hooks");
-var _innerText = _interopRequireDefault(require("../utils/innerText"));
-var _mixins = require("../utils/mixins");
-var _Box = _interopRequireDefault(require("../Box"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _Checkbox = _interopRequireDefault(require("../Checkbox"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _Input = _interopRequireDefault(require("../Input"));
-var _Popout = _interopRequireDefault(require("../Popout"));
-var _Radio = _interopRequireDefault(require("../Radio"));
-var _Text = _interopRequireDefault(require("../Text"));
-var _constants = require("./constants");
-var _descendants = require("./descendants");
-var _hooks2 = require("./hooks");
-var _styles = require("./styles");
-var _excluded = ["id", "index", "as", "children", "role", "elemBefore", "elemAfter", "value", "onKeyPress", "onClick", "selected", "disabled", "indeterminate", "label"],
-  _excluded2 = ["children", "title", "titleAs", "disabled"],
-  _excluded3 = ["children", "role", "multiselect", "innerRef"],
-  _excluded4 = ["role", "children", "onChange", "value", "multiselect", "innerRef"],
-  _excluded5 = ["content", "popoutProps", "children", "onClick", "closeOnItemClick", "id", "placement"];
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var noop = function noop() {};
-var getMenuItemRole = function getMenuItemRole(menuRole) {
-  switch (menuRole) {
-    case _constants.MENU_ROLES.LIST:
-      return _constants.MENU_ITEM_ROLES.LISTITEM;
-    case _constants.MENU_ROLES.LISTBOX:
-      return _constants.MENU_ITEM_ROLES.OPTION;
-    case _constants.MENU_ROLES.MENU:
-    default:
-      return _constants.MENU_ITEM_ROLES.MENUITEM;
-  }
+var _exportNames = {
+  Menu: true,
+  MenuButton: true
 };
-function isValueSelected(menuValue, value) {
-  if (!menuValue) return false;
-  if (typeof menuValue === 'string') {
-    return Boolean(menuValue && value && menuValue === value);
-  } else if (Array.isArray(menuValue)) {
-    return menuValue.includes(value);
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function get() {
+    return _Menu.default;
   }
-  return false;
-}
-var MenuItem = function MenuItem(_ref) {
-  var idProp = _ref.id,
-    indexProp = _ref.index,
-    as = _ref.as,
-    children = _ref.children,
-    roleProp = _ref.role,
-    elemBefore = _ref.elemBefore,
-    elemAfter = _ref.elemAfter,
-    valueProp = _ref.value,
-    onKeyPress = _ref.onKeyPress,
-    onClick = _ref.onClick,
-    selected = _ref.selected,
-    disabled = _ref.disabled,
-    indeterminate = _ref.indeterminate,
-    labelProp = _ref.label,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useContext = (0, React.useContext)(_hooks2.MenuContext),
-    menuRole = _useContext.role,
-    onChange = _useContext.onChange,
-    value = _useContext.value,
-    multiselect = _useContext.multiselect,
-    menuState = _useContext.state,
-    selectCallbacks = _useContext.selectCallbacks,
-    menuRef = _useContext.menuRef;
-  var selectionIndex = menuState.selectionIndex,
-    filteredItems = menuState.filteredItems;
-  var _useContext2 = (0, React.useContext)(_hooks2.MenuButtonContext),
-    closePopout = _useContext2.closePopout,
-    closeOnItemClick = _useContext2.closeOnItemClick;
-  var isSelected = selected || isValueSelected(value, valueProp);
-  var shouldClosePopout = closeOnItemClick && !multiselect;
-  var itemRole = roleProp || getMenuItemRole(menuRole);
-  var id = (0, React.useMemo)(function () {
-    return idProp || (0, _lodash.default)('MenuItem-');
-  }, [idProp]);
-  var textContent = (0, _hooks.useTextContent)('');
-  var label = labelProp || textContent.current;
-  var ref = (0, React.useRef)(null);
-  var index = (0, _descendants.useDescendant)({
-    context: _hooks2.MenuDescendantContext,
-    element: ref.current,
-    value: valueProp || label,
-    label: label,
-    disabled: disabled,
-    id: id
-  }, indexProp);
-  var isHidden = filteredItems && !filteredItems.includes(index);
-  var isFocused = index === selectionIndex;
-  selectCallbacks.current[index] = onClick;
-  var _useState = (0, React.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    keyPressed = _useState2[0],
-    setKeyPressed = _useState2[1];
-  var isCheckboxOrRadio = [_constants.MENU_ITEM_ROLES.CHECKBOX, _constants.MENU_ITEM_ROLES.RADIO].includes(itemRole);
-  var interactive = onClick || onKeyPress || [_constants.MENU_ITEM_ROLES.OPTION, _constants.MENU_ITEM_ROLES.MENUITEM, _constants.MENU_ITEM_ROLES.CHECKBOX, _constants.MENU_ITEM_ROLES.RADIO].includes(itemRole);
-
-  /**
-   * The Checkbox/Radio component doesn't expose a tabIndex prop, so we can't set the tabIndex on the underlying input
-   * to remove it from the tab order. Resulting to DOM manipulation as a last resort. We can remove this if Checkbox
-   * exposes this prop in the future.
-   */
-  (0, React.useEffect)(function () {
-    if (isCheckboxOrRadio && ref.current) {
-      var input = ref.current.querySelector('input');
-      if (input) {
-        input.tabIndex = -1;
-      }
-    }
-  }, [ref, isCheckboxOrRadio]);
-  (0, React.useEffect)(function () {
-    if (filteredItems) {
-      setKeyPressed(true);
-    } else if (selectionIndex !== 0) {
-      setKeyPressed(true);
-    }
-  }, [selectionIndex, filteredItems]);
-  var handleClick = (0, React.useCallback)(function (e) {
-    var _menuRef$current;
-    (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.focus();
-    if (onChange && itemRole !== _constants.MENU_ITEM_ROLES.LISTITEM) {
-      onChange(valueProp || label);
-    }
-    shouldClosePopout && closePopout && closePopout();
-    onClick && onClick(e);
-  }, [menuRef, onChange, itemRole, shouldClosePopout, closePopout, onClick, valueProp, label]);
-  var before = (0, React.useMemo)(function () {
-    if (elemBefore) return elemBefore;
-    if (itemRole === _constants.MENU_ITEM_ROLES.CHECKBOX) {
-      return /*#__PURE__*/React.createElement(_Checkbox.default, {
-        id: "Checkbox-".concat(id),
-        checked: isSelected,
-        "aria-hidden": "true",
-        onChange: noop,
-        indeterminate: indeterminate,
-        mr: 300
-      });
-    } else if (itemRole === _constants.MENU_ITEM_ROLES.RADIO) {
-      return /*#__PURE__*/React.createElement(_Radio.default, {
-        id: "Radio-".concat(id),
-        name: "Radio-".concat(id),
-        checked: isSelected,
-        "aria-hidden": "true",
-        onChange: noop,
-        mr: 300
-      });
-    }
-  }, [elemBefore, id, indeterminate, isSelected, itemRole]);
-  var after = (0, React.useMemo)(function () {
-    if (elemAfter) return elemAfter;
-    if (isSelected && !isCheckboxOrRadio) {
-      return /*#__PURE__*/React.createElement(_Icon.default, {
-        name: "check",
-        ariaHidden: true,
-        size: "mini",
-        ml: 300
-      });
-    }
-  }, [elemAfter, isCheckboxOrRadio, isSelected]);
-  return /*#__PURE__*/React.createElement(_styles.MenuItemContainer, _extends({
-    "data-qa-menu-item": label
-  }, props, {
-    active: isFocused && keyPressed,
-    id: id,
-    "aria-label": labelProp,
-    value: valueProp,
-    "data-value": valueProp,
-    forwardedAs: as || 'li',
-    "aria-checked": isCheckboxOrRadio ? isSelected : undefined,
-    "aria-selected": itemRole === _constants.MENU_ITEM_ROLES.OPTION ? isSelected : undefined,
-    disabled: disabled,
-    "aria-disabled": disabled,
-    hidden: isHidden,
-    interactive: interactive,
-    isCheckboxOrRadio: isCheckboxOrRadio,
-    onClick: !disabled ? handleClick : undefined,
-    role: itemRole,
-    selected: isSelected,
-    tabIndex: itemRole !== _constants.MENU_ITEM_ROLES.LISTITEM && !disabled ? -1 : undefined
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    style: {
-      display: 'flex',
-      alignItems: props.alignItems || 'center',
-      justifyContent: 'space-between'
-    }
-  }, before, /*#__PURE__*/React.createElement("div", {
-    style: {
-      flexGrow: 1,
-      wordBreak: 'break-word',
-      minWidth: 0
-    },
-    ref: textContent
-  }, children), after));
-};
-exports.MenuItem = MenuItem;
-var MenuCheckbox = function MenuCheckbox(props) {
-  return /*#__PURE__*/React.createElement(MenuItem, _extends({
-    role: _constants.MENU_ITEM_ROLES.CHECKBOX
-  }, props));
-};
-exports.MenuCheckbox = MenuCheckbox;
-var MenuRadio = function MenuRadio(props) {
-  return /*#__PURE__*/React.createElement(MenuItem, _extends({
-    role: _constants.MENU_ITEM_ROLES.RADIO
-  }, props));
-};
-exports.MenuRadio = MenuRadio;
-var MenuGroup = function MenuGroup(_ref2) {
-  var children = _ref2.children,
-    title = _ref2.title,
-    titleAs = _ref2.titleAs,
-    _ref2$disabled = _ref2.disabled,
-    isDisabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(_Box.default, {
-    pl: 400,
-    borderTop: "1px solid",
-    borderColor: "container.border.base",
-    mt: "-1px"
-  }, /*#__PURE__*/React.createElement(_StyledText, {
-    forwardedAs: titleAs || 'div',
-    fontSize: 200,
-    fontWeight: 600,
-    mt: 350,
-    color: "text.headline",
-    $_css: isDisabled && _mixins.disabled
-  }, title)), /*#__PURE__*/React.createElement(_Box.default, _extends({}, props, {
-    p: 300,
-    role: "group"
-  }), children));
-};
-exports.MenuGroup = MenuGroup;
-var MenuDivider = function MenuDivider(props) {
-  return /*#__PURE__*/React.createElement(_Box.default, _extends({
-    as: "li",
-    role: "separator",
-    borderTop: "1px solid",
-    borderColor: "container.border.base"
-  }, props));
-};
-exports.MenuDivider = MenuDivider;
-var MenuFilterInput = function MenuFilterInput(props) {
-  var onChange = props.onChange,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur;
-  var _useContext3 = (0, React.useContext)(_hooks2.MenuContext),
-    state = _useContext3.state,
-    setState = _useContext3.setState;
-  var handleOnChange = (0, React.useCallback)(function (event, value) {
-    onChange && onChange(event, value);
-    setState({
-      filterQuery: value
-    });
-  }, [setState, onChange]);
-  var handleOnFocus = (0, React.useCallback)(function (event) {
-    onFocus && onFocus(event);
-    setState({
-      isFilterInputFocused: true
-    });
-  }, [setState, onFocus]);
-  var handleOnBlur = (0, React.useCallback)(function (event) {
-    onBlur && onBlur(event);
-    setState({
-      isFilterInputFocused: false
-    });
-  }, [setState, onBlur]);
-  return /*#__PURE__*/React.createElement(_Input.default, _extends({}, props, {
-    value: state.filterQuery,
-    onChange: handleOnChange,
-    onFocus: handleOnFocus,
-    onBlur: handleOnBlur
-  }));
-};
-var MenuItems = function MenuItems(_ref3) {
-  var children = _ref3.children,
-    role = _ref3.role,
-    multiselect = _ref3.multiselect,
-    innerRef = _ref3.innerRef,
-    props = _objectWithoutProperties(_ref3, _excluded3);
-  var _useMenuKeyDown = (0, _hooks2.useMenuKeyDown)(),
-    handleKeyDown = _useMenuKeyDown.handleKeyDown,
-    activeDescendent = _useMenuKeyDown.activeDescendent;
-  return /*#__PURE__*/React.createElement(_styles.MenuItemsContainer, _extends({}, props, {
-    forwardedAs: "ul",
-    ref: innerRef,
-    role: role,
-    "aria-activedescendant": activeDescendent === null || activeDescendent === void 0 ? void 0 : activeDescendent.id,
-    "aria-multiselectable": multiselect ? true : undefined,
-    tabIndex: 0,
-    onKeyDown: handleKeyDown,
-    margin: 0,
-    padding: 0,
-    overflow: "hidden"
-  }), children);
-};
-var Menu = function Menu(_ref4) {
-  var _ref4$role = _ref4.role,
-    role = _ref4$role === void 0 ? _constants.MENU_ROLES.MENU : _ref4$role,
-    children = _ref4.children,
-    onChange = _ref4.onChange,
-    value = _ref4.value,
-    multiselect = _ref4.multiselect,
-    innerRef = _ref4.innerRef,
-    props = _objectWithoutProperties(_ref4, _excluded4);
-  var _useDescendants = (0, _descendants.useDescendants)(),
-    _useDescendants2 = _slicedToArray(_useDescendants, 2),
-    descendants = _useDescendants2[0],
-    setDescendants = _useDescendants2[1];
-  var _useState3 = (0, React.useState)({
-      selectionIndex: 0,
-      filterQuery: '',
-      filteredItems: null,
-      isFilterInputFocused: false
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
-  var selectCallbacks = (0, React.useRef)([]);
-  var menuRef = (0, React.useRef)(null);
-  var setContextState = (0, React.useCallback)(function (newState) {
-    setState(_objectSpread(_objectSpread({}, state), newState));
-  }, [state]);
-  return /*#__PURE__*/React.createElement(_descendants.DescendantProvider, {
-    context: _hooks2.MenuDescendantContext,
-    items:
-    // $FlowIssue
-    descendants,
-    set: setDescendants
-  }, /*#__PURE__*/React.createElement(_hooks2.MenuContext.Provider, {
-    value: {
-      // $FlowIssue
-      menuRef: innerRef || menuRef,
-      role: role,
-      onChange: onChange,
-      value: value,
-      multiselect: multiselect,
-      state: state,
-      setState: setContextState,
-      selectCallbacks: selectCallbacks
+});
+Object.defineProperty(exports, "MenuButton", {
+  enumerable: true,
+  get: function get() {
+    return _Menu.MenuButton;
+  }
+});
+exports.default = void 0;
+var _Menu = _interopRequireWildcard(require("./Menu"));
+var _MenuTypes = require("./MenuTypes");
+Object.keys(_MenuTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _MenuTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MenuTypes[key];
     }
-  }, /*#__PURE__*/React.createElement(MenuItems, _extends({}, props, {
-    role: role,
-    multiselect: multiselect,
-    innerRef: menuRef
-  }), children)));
-};
-exports.Menu = Menu;
-Menu.Group = MenuGroup;
-Menu.Item = MenuItem;
-Menu.Checkbox = MenuCheckbox;
-Menu.Radio = MenuRadio;
-Menu.Divider = MenuDivider;
-Menu.FilterInput = MenuFilterInput;
-Menu.Group.displayName = 'Menu.Group';
-Menu.Item.displayName = 'Menu.Item';
-Menu.Checkbox.displayName = 'Menu.Checkbox';
-Menu.Radio.displayName = 'Menu.Radio';
-Menu.Divider.displayName = 'Menu.Divider';
-Menu.FilterInput.displayName = 'Menu.FilterInput';
-var CustomPopoutContent = (0, _styledComponents.default)(_Popout.default.Content).withConfig({
-  displayName: "Menu__CustomPopoutContent",
-  componentId: "sc-1p3rdnp-0"
-})(["padding:0;margin-left:0;margin-right:0;"]);
-var MenuButton = function MenuButton(_ref5) {
-  var content = _ref5.content,
-    popoutProps = _ref5.popoutProps,
-    children = _ref5.children,
-    _onClick = _ref5.onClick,
-    _ref5$closeOnItemClic = _ref5.closeOnItemClick,
-    closeOnItemClick = _ref5$closeOnItemClic === void 0 ? true : _ref5$closeOnItemClic,
-    _ref5$id = _ref5.id,
-    id = _ref5$id === void 0 ? (0, _lodash.default)('MenuButton-') : _ref5$id,
-    _ref5$placement = _ref5.placement,
-    placement = _ref5$placement === void 0 ? 'bottom' : _ref5$placement,
-    props = _objectWithoutProperties(_ref5, _excluded5);
-  var _useState5 = (0, React.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isOpen = _useState6[0],
-    setIsOpen = _useState6[1];
-  var closePopout = (0, React.useCallback)(function () {
-    return setIsOpen(false);
-  }, [setIsOpen]);
-  var ariaLabelledBy = props['aria-labelledby'] ? "".concat(props['aria-labelledby'], " ").concat(id) : undefined;
-  var ariaLabel = props['aria-label'] ? "".concat(props['aria-label'], " ").concat((0, _innerText.default)(children)) : undefined;
-  return /*#__PURE__*/React.createElement(_hooks2.MenuButtonContext.Provider, {
-    value: {
-      closePopout: closePopout,
-      closeOnItemClick: closeOnItemClick
+  });
+});
+var _styles = require("./styles");
+Object.keys(_styles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styles[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styles[key];
     }
-  }, /*#__PURE__*/React.createElement(_Popout.default, _extends({
-    isOpen: isOpen,
-    setIsOpen: setIsOpen,
-    content: /*#__PURE__*/React.createElement(CustomPopoutContent, null, content),
-    placement: placement
-  }, popoutProps, {
-    width:
-    // $FlowIssue - both types are inexact, so this should work
-    props.width
-  }), /*#__PURE__*/React.createElement(_Button.default, _extends({}, props, {
-    id: id,
-    "aria-labelledby": ariaLabelledBy === null || ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy.trim(),
-    "aria-label": ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim(),
-    active: isOpen,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        _onClick && _onClick(e);
-        setIsOpen(true);
-      }
-    },
-    onClick: function onClick(e) {
-      _onClick && _onClick(e);
-      setIsOpen(!isOpen);
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils[key];
     }
-  }), children)));
-};
-exports.MenuButton = MenuButton;
-var _default = Menu;
-exports.default = _default;
-var _StyledText = (0, _styledComponents.default)(_Text.default).withConfig({
-  displayName: "Menu___StyledText",
-  componentId: "sc-1p3rdnp-1"
-})(["", ""], function (p) {
-  return p.$_css;
-});
+  });
+});
+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; }
+var _default = _Menu.default;
+exports.default = _default;

package/commonjs/Menu/styles.js

@@ -13,7 +13,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemContainer",
-  componentId: "sc-fjvae4-0"
+  componentId: "sc-168zlb1-0"
 })(["", ";width:100%;border-radius:", ";background-color:", ";border:none;text-align:left;color:", ";font-family:", ";font-weight:", ";padding:", ";list-style-type:none;outline:0;", ";", " ", " ", " ", " ", ""], function (props) {
   return !props.hidden && (0, _styledComponents.css)(["display:block;"]);
 }, function (props) {
@@ -54,6 +54,6 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
 exports.MenuItemContainer = MenuItemContainer;
 var MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
-  componentId: "sc-fjvae4-1"
+  componentId: "sc-168zlb1-1"
 })(["list-style-type:none;&:focus{", "}"], _mixins.focusRing);
 exports.MenuItemsContainer = MenuItemsContainer;

package/commonjs/Menu/utils/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MENU_ROLES = exports.MENU_ITEM_ROLES = void 0;
+var MENU_ROLES = Object.freeze({
+  MENU: 'menu',
+  LIST: 'list',
+  LISTBOX: 'listbox'
+});
+exports.MENU_ROLES = MENU_ROLES;
+var MENU_ITEM_ROLES = Object.freeze({
+  MENUITEM: 'menuitem',
+  LISTITEM: 'listitem',
+  OPTION: 'option',
+  RADIO: 'menuitemradio',
+  CHECKBOX: 'menuitemcheckbox'
+});
+exports.MENU_ITEM_ROLES = MENU_ITEM_ROLES;