@sproutsocial/racine 11.0.0 → 11.0.2-beta.0

package/__flow__/Menu/styles.js

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import Box from "../Box";
 import type { TypeMenuItemProps } from "./index.flow";
 import type { TypeTheme } from "../types/theme.flow";
-import { disabled } from "../utils/mixins";
+import { disabled, focusRing } from "../utils/mixins";
 
 export const MenuItemContainer = styled<
   typeof Box,
@@ -35,6 +35,13 @@ export const MenuItemContainer = styled<
     ${props.theme.typography[200]};
   `};
 
+  ${(props) =>
+    props.selected &&
+    !props.isCheckboxOrRadio &&
+    css`
+      font-weight: ${(props) => props.theme.fontWeights.semibold};
+    `}
+
   ${(props) =>
     props.active &&
     !props.disabled &&
@@ -48,13 +55,6 @@ export const MenuItemContainer = styled<
     `}
 
   ${(props) =>
-    props.selected &&
-    !props.isCheckboxOrRadio &&
-    css`
-      font-weight: ${(props) => props.theme.fontWeights.semibold};
-    `}
-
-		${(props) =>
     !props.disabled &&
     css`
       &:focus,
@@ -86,5 +86,7 @@ export const MenuItemContainer = styled<
 
 export const MenuItemsContainer = styled<typeof Box, TypeTheme>(Box)`
   list-style-type: none;
-  outline: 0;
+  &:focus {
+    ${focusRing}
+  }
 `;

package/__flow__/Message/index.js

@@ -92,6 +92,7 @@ Message.Body = (props) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Body.displayName = "Message.Body";
 
 Message.Header = (props) => (
   <MessageContext.Consumer>
@@ -100,6 +101,7 @@ Message.Header = (props) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Header.displayName = "Message.Header";
 
 Message.Footer = (props) => (
   <MessageContext.Consumer>
@@ -113,6 +115,7 @@ Message.Footer = (props) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Footer.displayName = "Message.Footer";
 
 Message.Meta = (props) => (
   <MessageContext.Consumer>
@@ -126,16 +129,19 @@ Message.Meta = (props) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Meta.displayName = "Message.Meta";
 
 Message.Button = (props: TypeButtonProps) => (
   <Button {...props} appearance={props.appearance || "pill"} />
 );
+Message.Button.displayName = "Message.Button";
 
 Message.Avatar = (props: TypeAvatarProps) => (
   <MessageContext.Consumer>
     {({ density }) => <Avatar size={avatarSizeMap(density)} {...props} />}
   </MessageContext.Consumer>
 );
+Message.Avatar.displayName = "Message.Avatar";
 
 Message.Checkbox = (props: TypeCheckboxProps) => (
   <MessageContext.Consumer>
@@ -145,6 +151,7 @@ Message.Checkbox = (props: TypeCheckboxProps) => (
     )}
   </MessageContext.Consumer>
 );
+Message.Checkbox.displayName = "Message.Checkbox";
 
 Message.Context = MessageContext;
 Message.DENSITIES = MESSAGE_DENSITIES;

package/__flow__/Modal/index.js

@@ -183,6 +183,11 @@ Modal.Footer = ModalFooter;
 Modal.Content = ModalContent;
 Modal.CloseButton = ModalCloseButton;
 
+Modal.Header.displayName = "Modal.Header";
+Modal.Footer.displayName = "Modal.Footer";
+Modal.Content.displayName = "Modal.Content";
+Modal.CloseButton.displayName = "Modal.CloseButton";
+
 Modal.defaultProps = {
   width: "800px",
   zIndex: 6,

package/__flow__/Popout/index.js

@@ -388,7 +388,7 @@ export default function Popout({
 }
 
 type TypePopoutContentProps = React.ElementConfig<typeof Box>;
-Popout.Content = ({ children, ...rest }: TypePopoutContentProps) => (
+const PopoutContent = ({ children, ...rest }: TypePopoutContentProps) => (
   <Box
     bg="container.background.base"
     color="text.body"
@@ -403,3 +403,6 @@ Popout.Content = ({ children, ...rest }: TypePopoutContentProps) => (
     {children}
   </Box>
 );
+
+Popout.Content = PopoutContent;
+Popout.Content.displayName = "Popout.Content";

package/__flow__/SegmentedControl/index.js

@@ -111,4 +111,6 @@ const SegmentedControl = ({
 
 SegmentedControl.Item = SegmentedControlItem;
 
+SegmentedControl.Item.displayName = "SegmentedControl.Item";
+
 export default SegmentedControl;

package/__flow__/Table/index.js

@@ -116,4 +116,10 @@ Table.TableRow = TableRow;
 Table.HeaderCell = TableHeaderCell;
 Table.Cell = TableCell;
 
+Table.TableHead.displayName = "Table.TableHead";
+Table.TableBody.displayName = "Table.TableBody";
+Table.TableRow.displayName = "Table.TableRow";
+Table.HeaderCell.displayName = "Table.HeaderCell";
+Table.Cell.displayName = "Table.Cell";
+
 export default Table;

package/__flow__/Text/index.js

@@ -83,4 +83,12 @@ Text.SmallByline = SmallByline;
 Text.BodyCopy = BodyCopy;
 Text.SmallBodyCopy = SmallBodyCopy;
 
+Text.Headline.displayName = "Text.Headline";
+Text.SubHeadline.displayName = "Text.SubHeadline";
+Text.SmallSubHeadline.displayName = "Text.SmallSubHeadline";
+Text.Byline.displayName = "Text.Byline";
+Text.SmallByline.displayName = "Text.SmallByline";
+Text.BodyCopy.displayName = "Text.BodyCopy";
+Text.SmallBodyCopy.displayName = "Text.SmallBodyCopy";
+
 export default Text;

package/commonjs/Breadcrumb/index.js

@@ -63,5 +63,6 @@ var Breadcrumb = function Breadcrumb(_ref2) {
 };
 
 Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Item.displayName = "Breadcrumb.Item";
 var _default = Breadcrumb;
 exports.default = _default;

package/commonjs/Collapsible/index.js

@@ -135,5 +135,7 @@ var Panel = function Panel(_ref3) {
 
 Collapsible.Trigger = Trigger;
 Collapsible.Panel = Panel;
+Collapsible.Trigger.displayName = "Collapsible.Trigger";
+Collapsible.Panel.displayName = "Collapsible.Panel";
 var _default = Collapsible;
 exports.default = _default;

package/commonjs/Drawer/index.js

@@ -233,5 +233,8 @@ var DrawerContainer = function DrawerContainer(_ref4) {
 DrawerContainer.Header = DrawerHeader;
 DrawerContainer.Content = DrawerContent;
 DrawerContainer.CloseButton = DrawerCloseButton;
+DrawerContainer.Header.displayName = "Drawer.Header";
+DrawerContainer.Content.displayName = "Drawer.Content";
+DrawerContainer.CloseButton.displayName = "Drawer.CloseButton";
 var _default = DrawerContainer;
 exports.default = _default;

package/commonjs/Fieldset/index.js

@@ -51,7 +51,7 @@ var Fieldset = function Fieldset(_ref) {
   );
 };
 
-Fieldset.Legend = function (_ref2) {
+var FieldsetLegend = function FieldsetLegend(_ref2) {
   var children = _ref2.children,
       rest = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
@@ -64,7 +64,7 @@ Fieldset.Legend = function (_ref2) {
   }, rest), children);
 };
 
-Fieldset.HelperText = function (_ref3) {
+var FieldsetHelperText = function FieldsetHelperText(_ref3) {
   var children = _ref3.children,
       rest = _objectWithoutPropertiesLoose(_ref3, ["children"]);
 
@@ -75,5 +75,9 @@ Fieldset.HelperText = function (_ref3) {
   }, rest), children);
 };
 
+Fieldset.Legend = FieldsetLegend;
+Fieldset.HelperText = FieldsetHelperText;
+Fieldset.Legend.displayName = "Fieldset.Legend";
+Fieldset.HelperText.displayName = "Fieldset.HelperText";
 var _default = Fieldset;
 exports.default = _default;

package/commonjs/Icon/index.js

@@ -64,7 +64,7 @@ var ToggleableIcon = (0, _styledComponents.default)(Icon).withConfig({
   return !p.active && (0, _styledComponents.css)(["position:absolute;opacity:0;transform:scale(0);"]);
 });
 
-Icon.Toggle = function (_ref2) {
+var IconToggle = function IconToggle(_ref2) {
   var activeName = _ref2.activeName,
       inactiveName = _ref2.inactiveName,
       isActive = _ref2.isActive,
@@ -100,5 +100,7 @@ Icon.Toggle = function (_ref2) {
   );
 };
 
+Icon.Toggle = IconToggle;
+Icon.Toggle.displayName = "Icon.Toggle";
 var _default = Icon;
 exports.default = _default;

package/commonjs/IconViewBoxes.js

@@ -6,6 +6,7 @@ module.exports = {
   "add-keyword": "0 0 16 16",
   "add-team-member": "0 0 18 13",
   "add-variable": "0 0 18 14",
+  "address-card-outline": "0 0 16 16",
   "address-card-solid": "0 0 18 16",
   "adobe-experience-manager": "0 0 16 18",
   "ads": "0 0 9 16",
@@ -210,6 +211,7 @@ module.exports = {
   "location-outline": "0 0 12 16",
   "location": "0 0 12 16",
   "lock": "0 0 14 16",
+  "magic-wand": "0 0 17 16",
   "male": "0 0 16 20",
   "marketo": "0 0 16 18",
   "mention": "0 0 16 16",

package/commonjs/Menu/index.js

@@ -91,9 +91,8 @@ var MenuItem = function MenuItem(_ref) {
       selected = _ref.selected,
       disabled = _ref.disabled,
       indeterminate = _ref.indeterminate,
-      active = _ref.active,
       labelProp = _ref.label,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "index", "as", "children", "role", "elemBefore", "elemAfter", "value", "onKeyPress", "onClick", "selected", "disabled", "indeterminate", "active", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["id", "index", "as", "children", "role", "elemBefore", "elemAfter", "value", "onKeyPress", "onClick", "selected", "disabled", "indeterminate", "label"]);
 
   var _useContext = (0, React.useContext)(_hooks2.MenuContext),
       menuRole = _useContext.role,
@@ -131,6 +130,11 @@ 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];
+
   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);
   /**
@@ -148,6 +152,13 @@ var MenuItem = function MenuItem(_ref) {
       }
     }
   }, [ref, isCheckboxOrRadio]);
+  (0, React.useEffect)(function () {
+    if (filteredItems) {
+      setKeyPressed(true);
+    } else if (selectionIndex !== 0) {
+      setKeyPressed(true);
+    }
+  }, [selectionIndex, filteredItems]);
   var handleClick = (0, React.useCallback)(function (e) {
     var _menuRef$current;
 
@@ -198,7 +209,7 @@ var MenuItem = function MenuItem(_ref) {
   return /*#__PURE__*/React.createElement(_styles.MenuItemContainer, _extends({
     "data-qa-menu-item": label
   }, props, {
-    active: active || isFocused,
+    active: isFocused && keyPressed,
     id: id,
     "aria-label": labelProp,
     value: valueProp,
@@ -370,14 +381,14 @@ var Menu = function Menu(_ref4) {
       descendants = _useDescendants[0],
       setDescendants = _useDescendants[1];
 
-  var _useState = (0, React.useState)({
+  var _useState2 = (0, React.useState)({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
     isFilterInputFocused: false
   }),
-      state = _useState[0],
-      setState = _useState[1];
+      state = _useState2[0],
+      setState = _useState2[1];
 
   var selectCallbacks = (0, React.useRef)([]);
   var menuRef = (0, React.useRef)(null);
@@ -418,6 +429,12 @@ 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";
 var CustomPopoutContent = (0, _styledComponents.default)(_Popout.default.Content).withConfig({
   displayName: "Menu__CustomPopoutContent",
   componentId: "sc-1p3rdnp-1"
@@ -436,9 +453,9 @@ var MenuButton = function MenuButton(_ref5) {
       placement = _ref5$placement === void 0 ? "bottom" : _ref5$placement,
       props = _objectWithoutPropertiesLoose(_ref5, ["content", "popoutProps", "children", "onClick", "closeOnItemClick", "id", "placement"]);
 
-  var _useState2 = (0, React.useState)(false),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+  var _useState3 = (0, React.useState)(false),
+      isOpen = _useState3[0],
+      setIsOpen = _useState3[1];
 
   var closePopout = (0, React.useCallback)(function () {
     return setIsOpen(false);

package/commonjs/Menu/styles.js

@@ -34,16 +34,16 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
   return "6px " + props.theme.space[300];
 }, function (props) {
   return (0, _styledComponents.css)(["", ";"], props.theme.typography[200]);
+}, function (props) {
+  return props.selected && !props.isCheckboxOrRadio && (0, _styledComponents.css)(["font-weight:", ";"], function (props) {
+    return props.theme.fontWeights.semibold;
+  });
 }, function (props) {
   return props.active && !props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";.Icon-svg{color:", ";}"], function (props) {
     return props.theme.colors.text.inverse;
   }, props.theme.colors.listItem.background.selected, function (props) {
     return props.theme.colors.text.inverse;
   });
-}, function (props) {
-  return props.selected && !props.isCheckboxOrRadio && (0, _styledComponents.css)(["font-weight:", ";"], function (props) {
-    return props.theme.fontWeights.semibold;
-  });
 }, 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;
@@ -59,5 +59,5 @@ exports.MenuItemContainer = MenuItemContainer;
 var MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "fjvae4-1"
-})(["list-style-type:none;outline:0;"]);
+})(["list-style-type:none;&:focus{", "}"], _mixins.focusRing);
 exports.MenuItemsContainer = MenuItemsContainer;

package/commonjs/Message/index.js

@@ -98,6 +98,8 @@ Message.Body = function (props) {
   });
 };
 
+Message.Body.displayName = "Message.Body";
+
 Message.Header = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref3) {
     var density = _ref3.density,
@@ -109,6 +111,8 @@ Message.Header = function (props) {
   });
 };
 
+Message.Header.displayName = "Message.Header";
+
 Message.Footer = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref4) {
     var density = _ref4.density,
@@ -122,6 +126,8 @@ Message.Footer = function (props) {
   });
 };
 
+Message.Footer.displayName = "Message.Footer";
+
 Message.Meta = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref5) {
     var density = _ref5.density,
@@ -135,12 +141,16 @@ Message.Meta = function (props) {
   });
 };
 
+Message.Meta.displayName = "Message.Meta";
+
 Message.Button = function (props) {
   return /*#__PURE__*/React.createElement(_Button.default, _extends({}, props, {
     appearance: props.appearance || "pill"
   }));
 };
 
+Message.Button.displayName = "Message.Button";
+
 Message.Avatar = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref6) {
     var density = _ref6.density;
@@ -150,6 +160,8 @@ Message.Avatar = function (props) {
   });
 };
 
+Message.Avatar.displayName = "Message.Avatar";
+
 Message.Checkbox = function (props) {
   return /*#__PURE__*/React.createElement(MessageContext.Consumer, null, function (_ref7) {
     var density = _ref7.density;
@@ -164,6 +176,7 @@ Message.Checkbox = function (props) {
   });
 };
 
+Message.Checkbox.displayName = "Message.Checkbox";
 Message.Context = MessageContext;
 Message.DENSITIES = MESSAGE_DENSITIES;
 var _default = Message;

package/commonjs/Modal/index.js

@@ -147,6 +147,10 @@ Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 Modal.Content = ModalContent;
 Modal.CloseButton = ModalCloseButton;
+Modal.Header.displayName = "Modal.Header";
+Modal.Footer.displayName = "Modal.Footer";
+Modal.Content.displayName = "Modal.Content";
+Modal.CloseButton.displayName = "Modal.CloseButton";
 Modal.defaultProps = {
   width: "800px",
   zIndex: 6

package/commonjs/Popout/index.js

@@ -280,7 +280,7 @@ function Popout(_ref) {
   }));
 }
 
-Popout.Content = function (_ref4) {
+var PopoutContent = function PopoutContent(_ref4) {
   var children = _ref4.children,
       rest = _objectWithoutPropertiesLoose(_ref4, ["children"]);
 
@@ -294,4 +294,7 @@ Popout.Content = function (_ref4) {
     p: 400,
     m: 300
   }, rest), children);
-};
+};
+
+Popout.Content = PopoutContent;
+Popout.Content.displayName = "Popout.Content";

package/commonjs/SegmentedControl/index.js

@@ -90,5 +90,6 @@ var SegmentedControl = function SegmentedControl(_ref2) {
 };
 
 SegmentedControl.Item = SegmentedControlItem;
+SegmentedControl.Item.displayName = "SegmentedControl.Item";
 var _default = SegmentedControl;
 exports.default = _default;

package/commonjs/Table/index.js

@@ -103,5 +103,10 @@ Table.TableBody = TableBody;
 Table.TableRow = TableRow;
 Table.HeaderCell = _TableHeaderCell.default;
 Table.Cell = _TableCell.default;
+Table.TableHead.displayName = "Table.TableHead";
+Table.TableBody.displayName = "Table.TableBody";
+Table.TableRow.displayName = "Table.TableRow";
+Table.HeaderCell.displayName = "Table.HeaderCell";
+Table.Cell.displayName = "Table.Cell";
 var _default = Table;
 exports.default = _default;

package/commonjs/Text/index.js

@@ -106,5 +106,12 @@ Text.Byline = Byline;
 Text.SmallByline = SmallByline;
 Text.BodyCopy = BodyCopy;
 Text.SmallBodyCopy = SmallBodyCopy;
+Text.Headline.displayName = "Text.Headline";
+Text.SubHeadline.displayName = "Text.SubHeadline";
+Text.SmallSubHeadline.displayName = "Text.SmallSubHeadline";
+Text.Byline.displayName = "Text.Byline";
+Text.SmallByline.displayName = "Text.SmallByline";
+Text.BodyCopy.displayName = "Text.BodyCopy";
+Text.SmallBodyCopy.displayName = "Text.SmallBodyCopy";
 var _default = Text;
 exports.default = _default;