@sproutsocial/racine 12.20.0 → 12.21.0

package/commonjs/Menu/index.js

@@ -2,127 +2,91 @@
 
 exports.__esModule = 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 _styles = require("./styles");
-
 var _constants = require("./constants");
-
 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 _mixins = require("../utils/mixins");
-
 var _innerText = _interopRequireDefault(require("../utils/innerText"));
-
 var _hooks = require("../utils/hooks");
-
 var _descendants = require("./descendants");
-
 var _hooks2 = require("./hooks");
-
 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"];
-
+  _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 _extends() { _extends = Object.assign || 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 _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 _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;
   }
 };
-
 function isValueSelected(menuValue, value) {
   if (!menuValue) return false;
-
-  if (typeof menuValue === "string") {
+  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 = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    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 = _objectWithoutPropertiesLoose(_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;
-
+    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;
-
+    filteredItems = menuState.filteredItems;
   var _useContext2 = (0, React.useContext)(_hooks2.MenuButtonContext),
-      closePopout = _useContext2.closePopout,
-      closeOnItemClick = _useContext2.closeOnItemClick;
-
+    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-");
+    return idProp || (0, _lodash.default)('MenuItem-');
   }, [idProp]);
-  var textContent = (0, _hooks.useTextContent)("");
+  var textContent = (0, _hooks.useTextContent)('');
   var label = labelProp || textContent.current;
   var ref = (0, React.useRef)(null);
   var index = (0, _descendants.useDescendant)({
@@ -136,23 +100,20 @@ var MenuItem = function MenuItem(_ref) {
   var isHidden = filteredItems && !filteredItems.includes(index);
   var isFocused = index === selectionIndex;
   selectCallbacks.current[index] = onClick;
-
   var _useState = (0, React.useState)(false),
-      keyPressed = _useState[0],
-      setKeyPressed = _useState[1];
-
+    keyPressed = _useState[0],
+    setKeyPressed = _useState[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");
-
+      var input = ref.current.querySelector('input');
       if (input) {
         input.tabIndex = -1;
       }
@@ -167,19 +128,15 @@ var MenuItem = function MenuItem(_ref) {
   }, [selectionIndex, filteredItems]);
   var handleClick = (0, React.useCallback)(function (e) {
     var _menuRef$current;
-
     (_menuRef$current = menuRef.current) == null ? 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-" + id,
@@ -202,7 +159,6 @@ var MenuItem = function MenuItem(_ref) {
   }, [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",
@@ -220,7 +176,7 @@ var MenuItem = function MenuItem(_ref) {
     "aria-label": labelProp,
     value: valueProp,
     "data-value": valueProp,
-    forwardedAs: as || "li",
+    forwardedAs: as || 'li',
     "aria-checked": isCheckboxOrRadio ? isSelected : undefined,
     "aria-selected": itemRole === _constants.MENU_ITEM_ROLES.OPTION ? isSelected : undefined,
     disabled: disabled,
@@ -235,53 +191,46 @@ var MenuItem = function MenuItem(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: {
-      display: "flex",
-      alignItems: props.alignItems || "center",
-      justifyContent: "space-between"
+      display: 'flex',
+      alignItems: props.alignItems || 'center',
+      justifyContent: 'space-between'
     }
   }, before, /*#__PURE__*/React.createElement("div", {
     style: {
       flexGrow: 1,
-      wordBreak: "break-word",
+      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 = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
+    title = _ref2.title,
+    titleAs = _ref2.titleAs,
+    _ref2$disabled = _ref2.disabled,
+    isDisabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    props = _objectWithoutPropertiesLoose(_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",
+    forwardedAs: titleAs || 'div',
     fontSize: 200,
     fontWeight: 600,
     mt: 350,
@@ -292,9 +241,7 @@ var MenuGroup = function MenuGroup(_ref2) {
     role: "group"
   }), children));
 };
-
 exports.MenuGroup = MenuGroup;
-
 var MenuDivider = function MenuDivider(props) {
   return /*#__PURE__*/React.createElement(_Box.default, _extends({
     as: "li",
@@ -303,18 +250,14 @@ var MenuDivider = function MenuDivider(props) {
     borderColor: "container.border.base"
   }, props));
 };
-
 exports.MenuDivider = MenuDivider;
-
 var MenuFilterInput = function MenuFilterInput(props) {
   var onChange = props.onChange,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur;
-
+    onFocus = props.onFocus,
+    onBlur = props.onBlur;
   var _useContext3 = (0, React.useContext)(_hooks2.MenuContext),
-      state = _useContext3.state,
-      setState = _useContext3.setState;
-
+    state = _useContext3.state,
+    setState = _useContext3.setState;
   var handleOnChange = (0, React.useCallback)(function (event, value) {
     onChange && onChange(event, value);
     setState({
@@ -340,18 +283,15 @@ var MenuFilterInput = function MenuFilterInput(props) {
     onBlur: handleOnBlur
   }));
 };
-
 var MenuItems = function MenuItems(_ref3) {
   var children = _ref3.children,
-      role = _ref3.role,
-      multiselect = _ref3.multiselect,
-      innerRef = _ref3.innerRef,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-
+    role = _ref3.role,
+    multiselect = _ref3.multiselect,
+    innerRef = _ref3.innerRef,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   var _useMenuKeyDown = (0, _hooks2.useMenuKeyDown)(),
-      handleKeyDown = _useMenuKeyDown.handleKeyDown,
-      activeDescendent = _useMenuKeyDown.activeDescendent;
-
+    handleKeyDown = _useMenuKeyDown.handleKeyDown,
+    activeDescendent = _useMenuKeyDown.activeDescendent;
   return /*#__PURE__*/React.createElement(_styles.MenuItemsContainer, _extends({}, props, {
     forwardedAs: "ul",
     ref: innerRef,
@@ -365,30 +305,26 @@ var MenuItems = function MenuItems(_ref3) {
     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 = _objectWithoutPropertiesLoose(_ref4, _excluded4);
-
+    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 = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   var _useDescendants = (0, _descendants.useDescendants)(),
-      descendants = _useDescendants[0],
-      setDescendants = _useDescendants[1];
-
+    descendants = _useDescendants[0],
+    setDescendants = _useDescendants[1];
   var _useState2 = (0, React.useState)({
-    selectionIndex: 0,
-    filterQuery: "",
-    filteredItems: null,
-    isFilterInputFocused: false
-  }),
-      state = _useState2[0],
-      setState = _useState2[1];
-
+      selectionIndex: 0,
+      filterQuery: '',
+      filteredItems: null,
+      isFilterInputFocused: false
+    }),
+    state = _useState2[0],
+    setState = _useState2[1];
   var selectCallbacks = (0, React.useRef)([]);
   var menuRef = (0, React.useRef)(null);
   var setContextState = (0, React.useCallback)(function (newState) {
@@ -420,7 +356,6 @@ var Menu = function Menu(_ref4) {
     }), children)))
   );
 };
-
 exports.Menu = Menu;
 Menu.Group = MenuGroup;
 Menu.Item = MenuItem;
@@ -428,39 +363,36 @@ 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";
+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 = _objectWithoutPropertiesLoose(_ref5, _excluded5);
-
+    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 = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   var _useState3 = (0, React.useState)(false),
-      isOpen = _useState3[0],
-      setIsOpen = _useState3[1];
-
+    isOpen = _useState3[0],
+    setIsOpen = _useState3[1];
   var closePopout = (0, React.useCallback)(function () {
     return setIsOpen(false);
   }, [setIsOpen]);
-  var ariaLabelledBy = props["aria-labelledby"] ? props["aria-labelledby"] + " " + id : undefined;
-  var ariaLabel = props["aria-label"] ? props["aria-label"] + " " + (0, _innerText.default)(children) : undefined;
+  var ariaLabelledBy = props['aria-labelledby'] ? props['aria-labelledby'] + " " + id : undefined;
+  var ariaLabel = props['aria-label'] ? props['aria-label'] + " " + (0, _innerText.default)(children) : undefined;
   return /*#__PURE__*/React.createElement(_hooks2.MenuButtonContext.Provider, {
     value: {
       closePopout: closePopout,
@@ -480,7 +412,7 @@ var MenuButton = function MenuButton(_ref5) {
     "aria-label": ariaLabel == null ? void 0 : ariaLabel.trim(),
     active: isOpen,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         _onClick && _onClick(e);
         setIsOpen(true);
       }
@@ -491,11 +423,9 @@ var MenuButton = function MenuButton(_ref5) {
     }
   }), 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"