@sproutsocial/racine 20.5.0 → 20.6.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Change Log
 
+## 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__/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__/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/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/dist/types/Listbox/Listbox.d.ts

@@ -18,6 +18,10 @@ export declare const Listbox: {
         (props: import("../Menu").TypeMenuItemProps): JSX.Element;
         displayName: string;
     };
+    Switch: {
+        (props: import("../Menu").TypeMenuSwitchProps): JSX.Element;
+        displayName: string;
+    };
     Group: {
         ({ children, title, titleAs, disabled: isDisabled, ...props }: import("../Menu").TypeMenuGroupProps): JSX.Element;
         displayName: string;

package/dist/types/Listbox/Listbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../../src/Listbox/Listbox.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAC,gBAAgB,EAAE,sBAAsB,EAAC,MAAM,gBAAgB,CAAC;AAC7E,eAAO,MAAM,OAAO;kCAIjB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,oPAuDlC,CAAC;AACF,eAAO,MAAM,aAAa,+BAGvB,sBAAsB,gBAaxB,CAAC;AAOF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../../src/Listbox/Listbox.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAC,gBAAgB,EAAE,sBAAsB,EAAC,MAAM,gBAAgB,CAAC;AAC7E,eAAO,MAAM,OAAO;kCAIjB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,oPAuDlC,CAAC;AACF,eAAO,MAAM,aAAa,+BAGvB,sBAAsB,gBAaxB,CAAC;AAQF,eAAe,OAAO,CAAC"}

package/dist/types/Menu/Menu.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TypeBoxProps } from '../Box';
 import { TypeInputProps } from '../Input';
-import type { TypeMenuButtonProps, TypeMenuGroupProps, TypeMenuItemProps, TypeMenuProps } from './MenuTypes';
+import type { TypeMenuButtonProps, TypeMenuGroupProps, TypeMenuItemProps, TypeMenuProps, TypeMenuSwitchProps } from './MenuTypes';
 export declare const MenuItem: {
     ({ id: idProp, index: indexProp, as, children, role: roleProp, elemBefore, elemAfter, value: valueProp, onKeyPress, onClick, selected, disabled, indeterminate, label: labelProp, ...props }: TypeMenuItemProps): JSX.Element;
     displayName: string;
@@ -14,6 +14,10 @@ export declare const MenuRadio: {
     (props: TypeMenuItemProps): JSX.Element;
     displayName: string;
 };
+export declare const MenuSwitch: {
+    (props: TypeMenuSwitchProps): JSX.Element;
+    displayName: string;
+};
 export declare const MenuGroup: {
     ({ children, title, titleAs, disabled: isDisabled, ...props }: TypeMenuGroupProps): JSX.Element;
     displayName: string;
@@ -41,6 +45,10 @@ export declare const Menu: {
         (props: TypeMenuItemProps): JSX.Element;
         displayName: string;
     };
+    Switch: {
+        (props: TypeMenuSwitchProps): JSX.Element;
+        displayName: string;
+    };
     Divider: {
         (props: TypeBoxProps): JSX.Element;
         displayName: string;

package/dist/types/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/Menu/Menu.tsx"],"names":[],"mappings":";AAcA,OAAY,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AAI3C,OAAc,EAAC,cAAc,EAAC,MAAM,YAAY,CAAC;AAIjD,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EAEjB,aAAa,EAEd,MAAM,aAAa,CAAC;AA8CrB,eAAO,MAAM,QAAQ;kMAgBlB,iBAAiB;;CAuLnB,CAAC;AACF,eAAO,MAAM,YAAY;YAAW,iBAAiB;;CAEpD,CAAC;AACF,eAAO,MAAM,SAAS;YAAW,iBAAiB;;CAEjD,CAAC;AAUF,eAAO,MAAM,SAAS;mEAMnB,kBAAkB;;CA2BpB,CAAC;AAEF,eAAO,MAAM,WAAW;YAAW,YAAY;;CAQ9C,CAAC;AA4FF,eAAO,MAAM,IAAI;0FASd,aAAa;;;uEA1Ib,kBAAkB;;;;sMA7MlB,iBAAiB;;;;gBAwLgB,iBAAiB;;;;gBAGpB,iBAAiB;;;;gBA+Cf,YAAY;;;;gBAUf,cAAc;;;CAuJ7C,CAAC;AAqBF,eAAO,MAAM,UAAU,2FASpB,mBAAmB,gBA+CrB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/Menu/Menu.tsx"],"names":[],"mappings":";AAcA,OAAY,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AAI3C,OAAc,EAAC,cAAc,EAAC,MAAM,YAAY,CAAC;AAKjD,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EAEjB,aAAa,EAEb,mBAAmB,EACpB,MAAM,aAAa,CAAC;AA8CrB,eAAO,MAAM,QAAQ;kMAgBlB,iBAAiB;;CAuLnB,CAAC;AACF,eAAO,MAAM,YAAY;YAAW,iBAAiB;;CAEpD,CAAC;AACF,eAAO,MAAM,SAAS;YAAW,iBAAiB;;CAEjD,CAAC;AAEF,eAAO,MAAM,UAAU;YAAW,mBAAmB;;CA8CpD,CAAC;AAUF,eAAO,MAAM,SAAS;mEAMnB,kBAAkB;;CA2BpB,CAAC;AAEF,eAAO,MAAM,WAAW;YAAW,YAAY;;CAQ9C,CAAC;AA4FF,eAAO,MAAM,IAAI;0FASd,aAAa;;;uEA1Ib,kBAAkB;;;;sMA7PlB,iBAAiB;;;;gBAwLgB,iBAAiB;;;;gBAGpB,iBAAiB;;;;gBAIhB,mBAAmB;;;;gBA2FlB,YAAY;;;;gBAUf,cAAc;;;CAuJ7C,CAAC;AAuBF,eAAO,MAAM,UAAU,2FASpB,mBAAmB,gBA+CrB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/Menu/MenuTypes.d.ts

@@ -2,7 +2,9 @@ import type { TypeStyledComponentsCommonProps } from '../types/styled-components
 import * as React from 'react';
 import type { TypeBoxProps } from '../Box';
 import type { TypeButtonProps } from '../Button';
+import type { TypeTextProps } from '../Text';
 import type { EnumPlacements, TypePopoutProps } from '../Popout/PopoutTypes';
+import type { TypeSwitchProps } from '../Switch';
 import { MENU_ITEM_ROLES, MENU_ROLES } from './utils/constants';
 export type TypeMenuRoles = (typeof MENU_ROLES)[keyof typeof MENU_ROLES];
 export type TypeMenuItemRoles = (typeof MENU_ITEM_ROLES)[keyof typeof MENU_ITEM_ROLES];
@@ -53,6 +55,17 @@ export interface TypeMenuItemProps {
     'data-qa-menu-item'?: string;
     alignItems?: string;
 }
+export interface TypeMenuSwitchProps extends 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?: Partial<Omit<TypeTextProps, 'children'>>;
+    /** 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?: Partial<Omit<TypeSwitchProps, 'onClick'>>;
+}
 export interface TypeMenuGroupProps extends Omit<TypeBoxProps, 'title'> {
     children: React.ReactNode;
     /** If provided, a visible title will be rendered for the group. */

package/dist/types/Menu/MenuTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTypes.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAC;AAClF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAC,cAAc,EAAE,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAC3B,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,oBAAoB,EAAE,OAAO,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,EAAE,CAAC;CAChD;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,OAAO,EAAE;QACP,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;KAChC,CAAC;IACF,QAAQ,EAAE,CAAC,aAAa,KAAA,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,eAAe,EAAE;QAEf,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;KACrD,CAAC;CACH;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,MAAM,CAAC,EAC7C,mBAAmB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAE1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,GAAG,SAAS,CAAC;IACvC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,EAAE,CAAC,EAAE,+BAA+B,CAAC,IAAI,CAAC,CAAC;IAC3C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,mEAAmE;IACnE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAEjC,4EAA4E;IAC5E,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC;CACzB;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,EACtC,qBAAqB;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IACzD,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB;IACnE,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;CACpC"}
+{"version":3,"file":"MenuTypes.d.ts","sourceRoot":"","sources":["../../../src/Menu/MenuTypes.ts"],"names":[],"mappings":"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"}

package/dist/types/Menu/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Menu/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,qBAAqB,CAAC;AAEpE,eAAO,MAAM,iBAAiB,mQAoE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,2OAQ9B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Menu/styles.ts"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,qBAAqB,CAAC;AAEpE,eAAO,MAAM,iBAAiB,mQA8E7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,2OAQ9B,CAAC"}

package/lib/Listbox/Listbox.js

@@ -98,6 +98,7 @@ export var ListboxButton = function ListboxButton(_ref2) {
 Listbox.Option = Listbox.Item = Menu.Item;
 Listbox.Checkbox = Menu.Checkbox;
 Listbox.Radio = Menu.Radio;
+Listbox.Switch = Menu.Switch;
 Listbox.Group = Menu.Group;
 Listbox.Divider = Menu.Divider;
 Listbox.FilterInput = Menu.FilterInput;

package/lib/Menu/Menu.js

@@ -1,10 +1,11 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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", "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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -33,6 +34,7 @@ import Icon from "../Icon";
 import Input from "../Input";
 import Popout from "../Popout";
 import Radio from "../Radio";
+import Switch from "../Switch";
 import Text from "../Text";
 import { MENU_ITEM_ROLES, MENU_ROLES, DescendantProvider, useDescendant, useDescendants, MenuButtonContext, MenuContext, MenuDescendantContext, useMenuKeyDown } from "./utils";
 import { MenuItemContainer, MenuItemsContainer } from "./styles";
@@ -237,6 +239,51 @@ export var MenuRadio = function MenuRadio(props) {
     role: MENU_ITEM_ROLES.RADIO
   }, props));
 };
+export var MenuSwitch = function MenuSwitch(props) {
+  var _useContext3 = useContext(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 = useMemo(function () {
+    return id || uniqueId('MenuItem-');
+  }, [id]);
+  var labelId = "".concat(menuItemId, "-label");
+  var switchElement = /*#__PURE__*/React.createElement(Switch, _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, _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
+  })));
+};
 var MenuTitle = styled(Text).withConfig({
   displayName: "Menu__MenuTitle",
   componentId: "sc-1jmjosz-0"
@@ -265,8 +312,10 @@ export 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 = uniqueId('menu-title-');
+    props = _objectWithoutProperties(_ref6, _excluded3);
+  var menuTitleId = useMemo(function () {
+    return uniqueId('menu-title-');
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _extends({
     p: 300,
     role: "group",
@@ -294,9 +343,9 @@ var MenuFilterInput = function MenuFilterInput(props) {
   var onChange = props.onChange,
     onFocus = props.onFocus,
     onBlur = props.onBlur;
-  var _useContext3 = useContext(MenuContext),
-    state = _useContext3.state,
-    setState = _useContext3.setState;
+  var _useContext4 = useContext(MenuContext),
+    state = _useContext4.state,
+    setState = _useContext4.setState;
   var handleOnChange = useCallback(function (event, value) {
     onChange && onChange(event, value);
     setState({
@@ -327,7 +376,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 = useMenuKeyDown(),
     handleKeyDown = _useMenuKeyDown.handleKeyDown,
     activeDescendent = _useMenuKeyDown.activeDescendent;
@@ -349,8 +398,8 @@ var MenuItems = function MenuItems(_ref7) {
 };
 var MenuFooter = function MenuFooter(_ref8) {
   var children = _ref8.children;
-  var _useContext4 = useContext(MenuContext),
-    setState = _useContext4.setState;
+  var _useContext5 = useContext(MenuContext),
+    setState = _useContext5.setState;
   var handleOnBlur = useCallback(function () {
     setState({
       isFooterFocused: false
@@ -375,7 +424,7 @@ export var Menu = function Menu(_ref9) {
     multiselect = _ref9.multiselect,
     innerRef = _ref9.innerRef,
     footerContent = _ref9.footerContent,
-    props = _objectWithoutProperties(_ref9, _excluded4);
+    props = _objectWithoutProperties(_ref9, _excluded5);
   var _useDescendants = useDescendants(),
     _useDescendants2 = _slicedToArray(_useDescendants, 2),
     descendants = _useDescendants2[0],
@@ -422,6 +471,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';
@@ -429,6 +479,7 @@ Menu.Group = MenuGroup;
 Menu.Item = MenuItem;
 Menu.Checkbox = MenuCheckbox;
 Menu.Radio = MenuRadio;
+Menu.Switch = MenuSwitch;
 Menu.Divider = MenuDivider;
 Menu.FilterInput = MenuFilterInput;
 var CustomPopoutContent = styled(Popout.Content).withConfig({
@@ -446,7 +497,7 @@ export var MenuButton = function MenuButton(_ref10) {
     id = _ref10$id === void 0 ? uniqueId('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 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isOpen = _useState6[0],

package/lib/Menu/styles.js

@@ -1,10 +1,11 @@
 import styled, { css } from 'styled-components';
 import { disabled, focusRing } from "../utils/mixins";
 import Box from "../Box";
+import { StyledSwitchButton as Switch } from "../Switch/styles";
 export var MenuItemContainer = styled(Box).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 && css(["display:block;"]);
 }, function (props) {
   return props.theme.radii[500];
@@ -30,6 +31,10 @@ export var MenuItemContainer = styled(Box).withConfig({
   }, props.theme.colors.listItem.background.selected, function (props) {
     return props.theme.colors.text.inverse;
   });
+}, Switch, function (props) {
+  return props.active && !props.disabled && css(["border-color:", ";"], function (props) {
+    return props.theme.colors.container.border.base;
+  });
 }, function (props) {
   return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "20.5.0",
+  "version": "20.6.0",
   "license": "MIT",
   "files": [
     "__flow__",