@sproutsocial/racine 13.7.1 → 14.0.0

package/commonjs/Menu/Menu.js

@@ -0,0 +1,468 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 _utils = require("./utils");
+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; }
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+var noop = function noop() {};
+var getMenuItemRole = function getMenuItemRole(menuRole) {
+  switch (menuRole) {
+    case _utils.MENU_ROLES.LIST:
+      return _utils.MENU_ITEM_ROLES.LISTITEM;
+    case _utils.MENU_ROLES.LISTBOX:
+      return _utils.MENU_ITEM_ROLES.OPTION;
+    case _utils.MENU_ROLES.MENU:
+    default:
+      return _utils.MENU_ITEM_ROLES.MENUITEM;
+  }
+};
+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);
+  }
+  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)(_utils.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)(_utils.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)('');
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  var label = labelProp || textContent.current;
+  var ref = (0, React.useRef)(null);
+  var index = (0, _utils.useDescendant)({
+    context: _utils.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 = [_utils.MENU_ITEM_ROLES.CHECKBOX, _utils.MENU_ITEM_ROLES.RADIO
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ].includes(itemRole); // @ts-notes @refactor - since we're only really checking against the string I think we can safely leave this for refactor, nothing else worked for me
+  var interactive = onClick || onKeyPress || [_utils.MENU_ITEM_ROLES.OPTION, _utils.MENU_ITEM_ROLES.MENUITEM, _utils.MENU_ITEM_ROLES.CHECKBOX, _utils.MENU_ITEM_ROLES.RADIO
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ].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 !== _utils.MENU_ITEM_ROLES.LISTITEM) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      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 === _utils.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 === _utils.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",
+        "aria-hidden": 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 === _utils.MENU_ITEM_ROLES.OPTION ? isSelected : undefined,
+    disabled: disabled,
+    "aria-disabled": disabled,
+    isCheckboxOrRadio: isCheckboxOrRadio,
+    hidden: Boolean(isHidden) // @ts migration note: coercing to a boolean here otherwise it thinks its actually receiving callbacks
+    ,
+    interactive: Boolean(interactive) // @ts migration note: coercing to a boolean here otherwise it thinks its actually receiving callbacks
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore handleclick takes in different event type than what it receives half the times
+    ,
+    onClick: !disabled ? handleClick : undefined,
+    role: itemRole,
+    selected: isSelected,
+    tabIndex: itemRole !== _utils.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
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore some legacy ref type mismatch between divs
+    ,
+    ref: textContent
+  }, children), after));
+};
+exports.MenuItem = MenuItem;
+var MenuCheckbox = function MenuCheckbox(props) {
+  return /*#__PURE__*/React.createElement(MenuItem, _extends({
+    role: _utils.MENU_ITEM_ROLES.CHECKBOX
+  }, props));
+};
+exports.MenuCheckbox = MenuCheckbox;
+var MenuRadio = function MenuRadio(props) {
+  return /*#__PURE__*/React.createElement(MenuItem, _extends({
+    role: _utils.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 : undefined
+  }, 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) {
+  // @ts-note should probably user input types when Input is converted
+  var onChange = props.onChange,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur;
+  var _useContext3 = (0, React.useContext)(_utils.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, _utils.useMenuKeyDown)(),
+    handleKeyDown = _useMenuKeyDown.handleKeyDown,
+    activeDescendent = _useMenuKeyDown.activeDescendent;
+  return /*#__PURE__*/React.createElement(_styles.MenuItemsContainer, _extends({}, props, {
+    forwardedAs: "ul",
+    ref: innerRef,
+    role: role
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ,
+    "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 ? _utils.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, _utils.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(_utils.DescendantProvider, {
+    context: _utils.MenuDescendantContext,
+    items: descendants,
+    set: setDescendants
+  }, /*#__PURE__*/React.createElement(_utils.MenuContext.Provider, {
+    value: {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      menuRef: innerRef || menuRef,
+      role: role,
+      onChange: onChange,
+      value: value,
+      multiselect: multiselect,
+      state: state,
+      setState: setContextState,
+      selectCallbacks: selectCallbacks
+    }
+  }, /*#__PURE__*/React.createElement(MenuItems, _extends({}, props, {
+    role: role,
+    multiselect: multiselect,
+    innerRef: menuRef
+  }), children)));
+};
+exports.Menu = Menu;
+MenuGroup.displayName = 'Menu.Group';
+MenuItem.displayName = 'Menu.Item';
+MenuCheckbox.displayName = 'Menu.Checkbox';
+MenuRadio.displayName = 'Menu.Radio';
+MenuDivider.displayName = 'Menu.Divider';
+MenuFilterInput.displayName = 'Menu.FilterInput';
+Menu.displayName = 'Menu';
+Menu.Group = MenuGroup;
+Menu.Item = MenuItem;
+Menu.Checkbox = MenuCheckbox;
+Menu.Radio = MenuRadio;
+Menu.Divider = MenuDivider;
+Menu.FilterInput = MenuFilterInput;
+var CustomPopoutContent = (0, _styledComponents.default)(_Popout.default.Content).withConfig({
+  displayName: "Menu__CustomPopoutContent",
+  componentId: "sc-1jmjosz-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(_utils.MenuButtonContext.Provider, {
+    value: {
+      closePopout: closePopout,
+      closeOnItemClick: closeOnItemClick
+    }
+  }, /*#__PURE__*/React.createElement(_Popout.default, _extends({
+    isOpen: isOpen,
+    setIsOpen: setIsOpen,
+    content: /*#__PURE__*/React.createElement(CustomPopoutContent, null, content),
+    placement: placement
+  }, popoutProps, {
+    width: 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') {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _onClick && _onClick(e); // @ts-notes unfortunately we're passing in a keyboard event here and not the mouse event it expects, so no way to coerce it
+        setIsOpen(true);
+      }
+    },
+    onClick: function onClick(e) {
+      _onClick && _onClick(e);
+      setIsOpen(!isOpen);
+    }
+  }), children)));
+};
+exports.MenuButton = MenuButton;
+var _default = Menu;
+exports.default = _default;
+var _StyledText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Menu___StyledText",
+  componentId: "sc-1jmjosz-1"
+})(["", ""], function (p) {
+  return p.$_css;
+});

package/commonjs/Menu/MenuTypes.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/commonjs/Menu/index.flow.js

@@ -1,11 +1,27 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var React = _interopRequireWildcard(require("react"));
-var _Box = _interopRequireDefault(require("../Box"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _Popout = _interopRequireDefault(require("../Popout"));
-var _constants = require("./constants");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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; }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Menu = require("./Menu.flow");
+Object.keys(_Menu).forEach(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 _constants = require("./utils/constants.flow");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _constants[key];
+    }
+  });
+});