@sproutsocial/racine 20.5.0 → 20.7.0

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # Change Log
 
+## 20.7.0
+
+### Minor Changes
+
+- 0c09b39cc: Adding Threads logo in light and dark versions
+
+### Patch Changes
+
+- 7989c088f: Fix `Menu` keyboard functionality to not select disabled menu item
+
+## 20.6.0
+
+### Minor Changes
+
+- 75ca2857b: Adds Menu.Switch subcomponent to Menu and Listbox
+
+  - Including a Switch in a Menu by passing it as a Menu.Item's children or elemAfter is not accessible for keyboard users.
+  - The new Menu.Switch component allows a consumer to use a Switch in a Menu while retaining keyboard accessibility.
+  - Like the Menu.Checkbox and Menu.Radio subcomponents, Menu.Switch should be used in place of a Menu.Item, not as a Menu.Item's children, elemBefore, or elemAfter.
+  - The placement of the Switch, i.e., in `elemBefore` or `elemAfter`, is determined by the `placement` prop.
+  - The text that serves as a label for the Switch can be passed into Menu.Switch as the `children` or `label` prop. Menu will handle programmatically associating the text with the Switch. You should not wrap the text in a Label component.
+  - Listbox is a variant of Menu; the same changes and guidelines apply to Listbox.
+
+  Simplified example migration:
+
+  ### Before
+
+  ```javascript
+  <Menu>
+    <Menu.Item>
+      <Label htmlFor="switch-id">Switch label</Label>
+      <Switch id="switch-id" onClick={handleClick} checked={selected} />
+    </Menu.Item>
+  </Menu>
+  ```
+
+  ### After
+
+  ```javascript
+  <Menu>
+    <Menu.Switch
+      id="switch-id"
+      placement="after"
+      onClick={handleClick}
+      selected={selected}
+    >
+      Switch label
+    </Menu.Switch>
+  </Menu>
+  ```
+
+- bc2935791: Add X (Twitter) logo to partner logos
+
+### Patch Changes
+
+- bc2935791: Upgrade @babel/traverse
+
 ## 20.5.0
 
 ### Minor Changes

package/__flow__/EnumLogoNames.flow.js

@@ -1,2 +1,2 @@
 // @flow
-export type EnumLogoNames = "adobe-experience-manager" | "android" | "apple-app-store" | "apple" | "bigcommerce" | "bitly" | "bynder" | "canva" | "dropbox" | "facebook-audience-network" | "facebook" | "facebook-groups" | "facebook-shops" | "feedly" | "github" | "glassdoor" | "google-analytics" | "google-business-messages" | "google-drive" | "google-my-business" | "google-play-store" | "hubspot" | "instagram" | "linkedin-audience-network" | "linkedin" | "marketo" | "messenger" | "microsoft-dynamics" | "pinterest" | "reddit" | "salesforce-cloud" | "salesforce" | "shopify" | "slack" | "sproutsocial" | "tableau" | "tiktok" | "tripadvisor" | "tumblr" | "twitter-audience-network" | "twitter" | "whatsapp" | "woocommerce" | "x-twitter" | "yelp" | "youtube" | "zendesk";
+export type EnumLogoNames = "adobe-experience-manager" | "android" | "apple-app-store" | "apple" | "bigcommerce" | "bitly" | "bynder" | "canva" | "dropbox" | "facebook-audience-network" | "facebook" | "facebook-groups" | "facebook-shops" | "feedly" | "github" | "glassdoor" | "google-analytics" | "google-business-messages" | "google-drive" | "google-my-business" | "google-play-store" | "hubspot" | "instagram" | "linkedin-audience-network" | "linkedin" | "marketo" | "messenger" | "microsoft-dynamics" | "pinterest" | "reddit" | "salesforce-cloud" | "salesforce" | "shopify" | "slack" | "sproutsocial" | "tableau" | "threads" | "tiktok" | "tripadvisor" | "tumblr" | "twitter-audience-network" | "twitter" | "whatsapp" | "woocommerce" | "x-twitter" | "yelp" | "youtube" | "zendesk";

package/__flow__/Listbox/Listbox.flow.js

@@ -25,6 +25,7 @@ declare class Listbox extends React.Component<TypeListboxProps> {
   static Checkbox: typeof Menu.Checkbox,
   static Radio: typeof Menu.Radio,
   static Group: typeof Menu.Group,
+  static Switch: typeof Menu.Switch,
   static Divider: typeof Menu.Divider,
   static FilterInput: typeof Menu.FilterInput,
 }

package/__flow__/LogoViewBoxes.js

@@ -83,6 +83,8 @@ module.exports = {
   "tableau-lockup-dark": "0 0 291 56",
   "tableau-lockup": "0 0 291 56",
   "tableau": "0 0 18 18",
+  "threads-dark": "0 0 24 24",
+  "threads": "0 0 24 24",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/__flow__/Menu/Menu.flow.js

@@ -6,6 +6,8 @@ import Button from "../Button/index.flow";
 import Popout from "../Popout/index.flow";
 import type { TypeInputProps } from "../Input/index.flow";
 import type { EnumPlacements } from "../Popout/index.flow";
+import type { TypeSwitchProps } from "../Switch/index.flow";
+import type { TypeTextProps } from "../Text/index.flow";
 import type { TypeTheme } from "../types/theme.flow";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
@@ -65,6 +67,27 @@ export type TypeMenuItemProps = {
   alignItems?: string,
   ...
 };
+export type TypeMenuItemSwitchProps = {
+  ...TypeMenuItemProps,
+  /** Determines whether the Switch will be rendered as elemBefore or elemAfter. */
+  placement: 'before' | 'after',
+  /** Pass any valid Text props except children to the label.
+   * children is omitted because Menu.Switch's children is rendered as the label's children.*/
+  labelProps?: {
+    ...TypeTextProps,
+    children: void,
+    ...
+  },
+  /** Pass any valid Switch props except onClick to the Switch.
+   * onClick is omitted because it would only be triggered when the Switch itself is clicked with a mouse.
+   * The top-level onClick prop, which will be triggered for a click or keypress anywhere on the Menu Item, should be used instead. */
+  switchProps?: {
+    ...TypeSwitchProps,
+    onClick: void,
+    ...
+  },
+  ...
+};
 export type TypeMenuGroupProps = {
   children: React.Node,
   /** If provided, a visible title will be rendered for the group. */
@@ -101,6 +124,7 @@ declare export var MenuGroup: TypeWithDisplayName<React.StatelessFunctionalCompo
 declare export var MenuItem: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeMenuItemProps>>;
 declare export var MenuCheckbox: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeMenuItemProps>>;
 declare export var MenuRadio: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeMenuItemProps>>;
+declare export var MenuSwitch: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeMenuItemSwitchProps>>;
 declare export var MenuDivider: TypeWithDisplayName<React.StatelessFunctionalComponent<any>>;
 declare var MenuFilterInput: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeInputProps>>;
 declare class Menu extends React.Component<TypeMenuProps> {
@@ -108,6 +132,7 @@ declare class Menu extends React.Component<TypeMenuProps> {
   static Item: typeof MenuItem,
   static Checkbox: typeof MenuCheckbox,
   static Radio: typeof MenuRadio,
+  static Switch: typeof MenuSwitch,
   static Divider: typeof MenuDivider,
   static FilterInput: typeof MenuFilterInput,
 }

package/commonjs/Listbox/Listbox.js

@@ -110,6 +110,7 @@ exports.ListboxButton = ListboxButton;
 Listbox.Option = Listbox.Item = _Menu.default.Item;
 Listbox.Checkbox = _Menu.default.Checkbox;
 Listbox.Radio = _Menu.default.Radio;
+Listbox.Switch = _Menu.default.Switch;
 Listbox.Group = _Menu.default.Group;
 Listbox.Divider = _Menu.default.Divider;
 Listbox.FilterInput = _Menu.default.FilterInput;

package/commonjs/LogoViewBoxes.js

@@ -85,6 +85,8 @@ module.exports = {
   "tableau-lockup-dark": "0 0 291 56",
   "tableau-lockup": "0 0 291 56",
   "tableau": "0 0 18 18",
+  "threads-dark": "0 0 24 24",
+  "threads": "0 0 24 24",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/commonjs/Menu/Menu.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@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;
+exports.default = exports.MenuSwitch = 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"));
@@ -18,14 +18,16 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _Popout = _interopRequireDefault(require("../Popout"));
 var _Radio = _interopRequireDefault(require("../Radio"));
+var _Switch = _interopRequireDefault(require("../Switch"));
 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", "footerContent"],
-  _excluded5 = ["content", "popoutProps", "children", "onClick", "closeOnItemClick", "id", "placement"];
+  _excluded2 = ["placement", "labelProps", "switchProps", "children", "id", "label"],
+  _excluded3 = ["children", "title", "titleAs", "disabled"],
+  _excluded4 = ["children", "role", "multiselect", "innerRef"],
+  _excluded5 = ["role", "children", "onChange", "value", "multiselect", "innerRef", "footerContent"],
+  _excluded6 = ["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 }; }
@@ -246,6 +248,52 @@ var MenuRadio = function MenuRadio(props) {
   }, props));
 };
 exports.MenuRadio = MenuRadio;
+var MenuSwitch = function MenuSwitch(props) {
+  var _useContext3 = (0, React.useContext)(_utils.MenuContext),
+    menuValue = _useContext3.value;
+  var placement = props.placement,
+    _props$labelProps = props.labelProps,
+    labelProps = _props$labelProps === void 0 ? {} : _props$labelProps,
+    _props$switchProps = props.switchProps,
+    switchProps = _props$switchProps === void 0 ? {} : _props$switchProps,
+    children = props.children,
+    id = props.id,
+    label = props.label,
+    rest = _objectWithoutProperties(props, _excluded2);
+  var menuItemId = (0, React.useMemo)(function () {
+    return id || (0, _lodash.default)('MenuItem-');
+  }, [id]);
+  var labelId = "".concat(menuItemId, "-label");
+  var switchElement = /*#__PURE__*/React.createElement(_Switch.default, _extends({
+    id: "".concat(menuItemId, "-switch"),
+    checked: props.selected || isValueSelected(menuValue, props.value),
+    "aria-hidden": "true",
+    tabIndex: -1,
+    "aria-labelledby": labelId
+  }, placement === 'before' ? {
+    mr: 300
+  } : {
+    ml: 300
+  }, switchProps, {
+    // This prop is passed after switchProps to disallow overrides.
+    onClick: noop
+  }));
+  var menuItemProps = _objectSpread({
+    id: menuItemId,
+    label: label,
+    elemBefore: placement === 'before' ? switchElement : undefined,
+    // Empty fragment prevents a check icon in elemAfter when the switch is checked. Can be overridden.
+    elemAfter: placement === 'before' ? /*#__PURE__*/React.createElement(React.Fragment, null) : switchElement
+  }, rest);
+  return /*#__PURE__*/React.createElement(MenuItem, menuItemProps, /*#__PURE__*/React.createElement(_Text.default, _extends({
+    id: labelId
+  }, labelProps, {
+    // This prop is passed after labelProps to disallow overrides.
+    // Fall back to the label prop if children is falsy.
+    children: children || label
+  })));
+};
+exports.MenuSwitch = MenuSwitch;
 var MenuTitle = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Menu__MenuTitle",
   componentId: "sc-1jmjosz-0"
@@ -274,8 +322,10 @@ var MenuGroup = function MenuGroup(_ref6) {
     titleAs = _ref6.titleAs,
     _ref6$disabled = _ref6.disabled,
     isDisabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
-    props = _objectWithoutProperties(_ref6, _excluded2);
-  var menuTitleId = (0, _lodash.default)('menu-title-');
+    props = _objectWithoutProperties(_ref6, _excluded3);
+  var menuTitleId = (0, React.useMemo)(function () {
+    return (0, _lodash.default)('menu-title-');
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Box.default, _extends({
     p: 300,
     role: "group",
@@ -305,9 +355,9 @@ var MenuFilterInput = function MenuFilterInput(props) {
   var onChange = props.onChange,
     onFocus = props.onFocus,
     onBlur = props.onBlur;
-  var _useContext3 = (0, React.useContext)(_utils.MenuContext),
-    state = _useContext3.state,
-    setState = _useContext3.setState;
+  var _useContext4 = (0, React.useContext)(_utils.MenuContext),
+    state = _useContext4.state,
+    setState = _useContext4.setState;
   var handleOnChange = (0, React.useCallback)(function (event, value) {
     onChange && onChange(event, value);
     setState({
@@ -338,7 +388,7 @@ var MenuItems = function MenuItems(_ref7) {
     role = _ref7.role,
     multiselect = _ref7.multiselect,
     innerRef = _ref7.innerRef,
-    props = _objectWithoutProperties(_ref7, _excluded3);
+    props = _objectWithoutProperties(_ref7, _excluded4);
   var _useMenuKeyDown = (0, _utils.useMenuKeyDown)(),
     handleKeyDown = _useMenuKeyDown.handleKeyDown,
     activeDescendent = _useMenuKeyDown.activeDescendent;
@@ -360,8 +410,8 @@ var MenuItems = function MenuItems(_ref7) {
 };
 var MenuFooter = function MenuFooter(_ref8) {
   var children = _ref8.children;
-  var _useContext4 = (0, React.useContext)(_utils.MenuContext),
-    setState = _useContext4.setState;
+  var _useContext5 = (0, React.useContext)(_utils.MenuContext),
+    setState = _useContext5.setState;
   var handleOnBlur = (0, React.useCallback)(function () {
     setState({
       isFooterFocused: false
@@ -386,7 +436,7 @@ var Menu = function Menu(_ref9) {
     multiselect = _ref9.multiselect,
     innerRef = _ref9.innerRef,
     footerContent = _ref9.footerContent,
-    props = _objectWithoutProperties(_ref9, _excluded4);
+    props = _objectWithoutProperties(_ref9, _excluded5);
   var _useDescendants = (0, _utils.useDescendants)(),
     _useDescendants2 = _slicedToArray(_useDescendants, 2),
     descendants = _useDescendants2[0],
@@ -434,6 +484,7 @@ MenuGroup.displayName = 'Menu.Group';
 MenuItem.displayName = 'Menu.Item';
 MenuCheckbox.displayName = 'Menu.Checkbox';
 MenuRadio.displayName = 'Menu.Radio';
+MenuSwitch.displayName = 'Menu.Switch';
 MenuDivider.displayName = 'Menu.Divider';
 MenuFilterInput.displayName = 'Menu.FilterInput';
 Menu.displayName = 'Menu';
@@ -441,6 +492,7 @@ Menu.Group = MenuGroup;
 Menu.Item = MenuItem;
 Menu.Checkbox = MenuCheckbox;
 Menu.Radio = MenuRadio;
+Menu.Switch = MenuSwitch;
 Menu.Divider = MenuDivider;
 Menu.FilterInput = MenuFilterInput;
 var CustomPopoutContent = (0, _styledComponents.default)(_Popout.default.Content).withConfig({
@@ -458,7 +510,7 @@ var MenuButton = function MenuButton(_ref10) {
     id = _ref10$id === void 0 ? (0, _lodash.default)('MenuButton-') : _ref10$id,
     _ref10$placement = _ref10.placement,
     placement = _ref10$placement === void 0 ? 'bottom' : _ref10$placement,
-    props = _objectWithoutProperties(_ref10, _excluded5);
+    props = _objectWithoutProperties(_ref10, _excluded6);
   var _useState5 = (0, React.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isOpen = _useState6[0],

package/commonjs/Menu/styles.js

@@ -8,13 +8,14 @@ exports.MenuItemsContainer = exports.MenuItemContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _mixins = require("../utils/mixins");
 var _Box = _interopRequireDefault(require("../Box"));
+var _styles = require("../Switch/styles");
 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; }
 var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemContainer",
   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) {
+})(["", ";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) {
   return props.theme.radii[500];
@@ -40,6 +41,10 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
   }, props.theme.colors.listItem.background.selected, function (props) {
     return props.theme.colors.text.inverse;
   });
+}, _styles.StyledSwitchButton, function (props) {
+  return props.active && !props.disabled && (0, _styledComponents.css)(["border-color:", ";"], function (props) {
+    return props.theme.colors.container.border.base;
+  });
 }, function (props) {
   return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;

package/commonjs/Menu/utils/hooks.js

@@ -142,7 +142,7 @@ function useMenuKeyDown() {
         // eslint-disable-next-line no-fallthrough
         case 'Enter':
           var selected = items[selectionIndex];
-          if (selected) {
+          if (selected && !selected.disabled) {
             event.preventDefault();
             var func = selectCallbacks.current[selected.index];
             (func === null || func === void 0 ? void 0 : func.call) && func();

package/commonjs/logoNames.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = ["adobe-experience-manager", "android", "apple-app-store", "apple", "bigcommerce", "bitly", "bynder", "canva", "dropbox", "facebook-audience-network", "facebook", "facebook-groups", "facebook-shops", "feedly", "github", "glassdoor", "google-analytics", "google-business-messages", "google-drive", "google-my-business", "google-play-store", "hubspot", "instagram", "linkedin-audience-network", "linkedin", "marketo", "messenger", "microsoft-dynamics", "pinterest", "reddit", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "tiktok", "tripadvisor", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "x-twitter", "yelp", "youtube", "zendesk"];
+var _default = ["adobe-experience-manager", "android", "apple-app-store", "apple", "bigcommerce", "bitly", "bynder", "canva", "dropbox", "facebook-audience-network", "facebook", "facebook-groups", "facebook-shops", "feedly", "github", "glassdoor", "google-analytics", "google-business-messages", "google-drive", "google-my-business", "google-play-store", "hubspot", "instagram", "linkedin-audience-network", "linkedin", "marketo", "messenger", "microsoft-dynamics", "pinterest", "reddit", "salesforce-cloud", "salesforce", "shopify", "slack", "sproutsocial", "tableau", "threads", "tiktok", "tripadvisor", "tumblr", "twitter-audience-network", "twitter", "whatsapp", "woocommerce", "x-twitter", "yelp", "youtube", "zendesk"];
 exports.default = _default;