@sproutsocial/racine 12.20.0 → 12.21.1

package/lib/Menu/index.js

@@ -1,102 +1,87 @@
 import _styled from "styled-components";
 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 _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); }
-
+  _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 _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; }
-
-import * as React from "react";
-import styled from "styled-components";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import uniqueId from "lodash.uniqueid";
-import { MenuItemContainer, MenuItemsContainer } from "./styles";
-import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
-import Box from "../Box";
-import Button from "../Button";
-import Checkbox from "../Checkbox";
-import Icon from "../Icon";
-import Input from "../Input";
-import Popout from "../Popout";
-import Radio from "../Radio";
-import Text from "../Text";
-import { disabled } from "../utils/mixins";
-import innerText from "../utils/innerText";
-import { useTextContent } from "../utils/hooks";
-import { DescendantProvider, useDescendant, useDescendants } from "./descendants";
-import { MenuButtonContext, MenuContext, MenuDescendantContext, useMenuKeyDown } from "./hooks";
-
+import * as React from 'react';
+import styled from 'styled-components';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import uniqueId from 'lodash.uniqueid';
+import { MenuItemContainer, MenuItemsContainer } from './styles';
+import { MENU_ITEM_ROLES, MENU_ROLES } from './constants';
+import Box from '../Box';
+import Button from '../Button';
+import Checkbox from '../Checkbox';
+import Icon from '../Icon';
+import Input from '../Input';
+import Popout from '../Popout';
+import Radio from '../Radio';
+import Text from '../Text';
+import { disabled } from '../utils/mixins';
+import innerText from '../utils/innerText';
+import { useTextContent } from '../utils/hooks';
+import { DescendantProvider, useDescendant, useDescendants } from './descendants';
+import { MenuButtonContext, MenuContext, MenuDescendantContext, useMenuKeyDown } from './hooks';
 var noop = function noop() {};
-
 var getMenuItemRole = function getMenuItemRole(menuRole) {
   switch (menuRole) {
     case MENU_ROLES.LIST:
       return MENU_ITEM_ROLES.LISTITEM;
-
     case MENU_ROLES.LISTBOX:
       return MENU_ITEM_ROLES.OPTION;
-
     case MENU_ROLES.MENU:
     default:
       return 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;
 }
-
 export 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 = useContext(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 = useContext(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 = useMemo(function () {
-    return idProp || uniqueId("MenuItem-");
+    return idProp || uniqueId('MenuItem-');
   }, [idProp]);
-  var textContent = useTextContent("");
+  var textContent = useTextContent('');
   var label = labelProp || textContent.current;
   var ref = useRef(null);
   var index = useDescendant({
@@ -110,23 +95,20 @@ export var MenuItem = function MenuItem(_ref) {
   var isHidden = filteredItems && !filteredItems.includes(index);
   var isFocused = index === selectionIndex;
   selectCallbacks.current[index] = onClick;
-
   var _useState = useState(false),
-      keyPressed = _useState[0],
-      setKeyPressed = _useState[1];
-
+    keyPressed = _useState[0],
+    setKeyPressed = _useState[1];
   var isCheckboxOrRadio = [MENU_ITEM_ROLES.CHECKBOX, MENU_ITEM_ROLES.RADIO].includes(itemRole);
   var interactive = onClick || onKeyPress || [MENU_ITEM_ROLES.OPTION, MENU_ITEM_ROLES.MENUITEM, MENU_ITEM_ROLES.CHECKBOX, 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.
    */
-
   useEffect(function () {
     if (isCheckboxOrRadio && ref.current) {
-      var input = ref.current.querySelector("input");
-
+      var input = ref.current.querySelector('input');
       if (input) {
         input.tabIndex = -1;
       }
@@ -141,19 +123,15 @@ export var MenuItem = function MenuItem(_ref) {
   }, [selectionIndex, filteredItems]);
   var handleClick = useCallback(function (e) {
     var _menuRef$current;
-
     (_menuRef$current = menuRef.current) == null ? void 0 : _menuRef$current.focus();
-
     if (onChange && itemRole !== MENU_ITEM_ROLES.LISTITEM) {
       onChange(valueProp || label);
     }
-
     shouldClosePopout && closePopout && closePopout();
     onClick && onClick(e);
   }, [menuRef, onChange, itemRole, shouldClosePopout, closePopout, onClick, valueProp, label]);
   var before = useMemo(function () {
     if (elemBefore) return elemBefore;
-
     if (itemRole === MENU_ITEM_ROLES.CHECKBOX) {
       return /*#__PURE__*/React.createElement(Checkbox, {
         id: "Checkbox-" + id,
@@ -176,7 +154,6 @@ export var MenuItem = function MenuItem(_ref) {
   }, [elemBefore, id, indeterminate, isSelected, itemRole]);
   var after = useMemo(function () {
     if (elemAfter) return elemAfter;
-
     if (isSelected && !isCheckboxOrRadio) {
       return /*#__PURE__*/React.createElement(Icon, {
         name: "check",
@@ -194,7 +171,7 @@ export 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 === MENU_ITEM_ROLES.OPTION ? isSelected : undefined,
     disabled: disabled,
@@ -209,14 +186,14 @@ export 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
@@ -234,19 +211,18 @@ export var MenuRadio = function MenuRadio(props) {
 };
 export 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, {
     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,
@@ -265,16 +241,13 @@ export var MenuDivider = function MenuDivider(props) {
     borderColor: "container.border.base"
   }, props));
 };
-
 var MenuFilterInput = function MenuFilterInput(props) {
   var onChange = props.onChange,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur;
-
+    onFocus = props.onFocus,
+    onBlur = props.onBlur;
   var _useContext3 = useContext(MenuContext),
-      state = _useContext3.state,
-      setState = _useContext3.setState;
-
+    state = _useContext3.state,
+    setState = _useContext3.setState;
   var handleOnChange = useCallback(function (event, value) {
     onChange && onChange(event, value);
     setState({
@@ -300,18 +273,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 = useMenuKeyDown(),
-      handleKeyDown = _useMenuKeyDown.handleKeyDown,
-      activeDescendent = _useMenuKeyDown.activeDescendent;
-
+    handleKeyDown = _useMenuKeyDown.handleKeyDown,
+    activeDescendent = _useMenuKeyDown.activeDescendent;
   return /*#__PURE__*/React.createElement(MenuItemsContainer, _extends({}, props, {
     forwardedAs: "ul",
     ref: innerRef,
@@ -325,30 +295,26 @@ var MenuItems = function MenuItems(_ref3) {
     overflow: "hidden"
   }), children);
 };
-
 export var Menu = function Menu(_ref4) {
   var _ref4$role = _ref4.role,
-      role = _ref4$role === void 0 ? 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 ? 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 = useDescendants(),
-      descendants = _useDescendants[0],
-      setDescendants = _useDescendants[1];
-
+    descendants = _useDescendants[0],
+    setDescendants = _useDescendants[1];
   var _useState2 = 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 = useRef([]);
   var menuRef = useRef(null);
   var setContextState = useCallback(function (newState) {
@@ -386,38 +352,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 = styled(Popout.Content).withConfig({
   displayName: "Menu__CustomPopoutContent",
   componentId: "sc-1p3rdnp-0"
 })(["padding:0;margin-left:0;margin-right:0;"]);
 export 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 ? uniqueId("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 ? uniqueId('MenuButton-') : _ref5$id,
+    _ref5$placement = _ref5.placement,
+    placement = _ref5$placement === void 0 ? 'bottom' : _ref5$placement,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   var _useState3 = useState(false),
-      isOpen = _useState3[0],
-      setIsOpen = _useState3[1];
-
+    isOpen = _useState3[0],
+    setIsOpen = _useState3[1];
   var closePopout = useCallback(function () {
     return setIsOpen(false);
   }, [setIsOpen]);
-  var ariaLabelledBy = props["aria-labelledby"] ? props["aria-labelledby"] + " " + id : undefined;
-  var ariaLabel = props["aria-label"] ? props["aria-label"] + " " + innerText(children) : undefined;
+  var ariaLabelledBy = props['aria-labelledby'] ? props['aria-labelledby'] + " " + id : undefined;
+  var ariaLabel = props['aria-label'] ? props['aria-label'] + " " + innerText(children) : undefined;
   return /*#__PURE__*/React.createElement(MenuButtonContext.Provider, {
     value: {
       closePopout: closePopout,
@@ -437,7 +401,7 @@ export 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);
       }
@@ -449,7 +413,6 @@ export var MenuButton = function MenuButton(_ref5) {
   }), children)));
 };
 export default Menu;
-
 var _StyledText = styled(Text).withConfig({
   displayName: "Menu___StyledText",
   componentId: "sc-1p3rdnp-1"