@sproutsocial/racine 11.0.0 → 11.0.2-beta.0

package/lib/Breadcrumb/index.js

@@ -49,4 +49,5 @@ var Breadcrumb = function Breadcrumb(_ref2) {
 };
 
 Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Item.displayName = "Breadcrumb.Item";
 export default Breadcrumb;

package/lib/Collapsible/index.js

@@ -121,4 +121,6 @@ var Panel = function Panel(_ref3) {
 
 Collapsible.Trigger = Trigger;
 Collapsible.Panel = Panel;
+Collapsible.Trigger.displayName = "Collapsible.Trigger";
+Collapsible.Panel.displayName = "Collapsible.Panel";
 export default Collapsible;

package/lib/Drawer/index.js

@@ -213,4 +213,7 @@ 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";
 export default DrawerContainer;

package/lib/Fieldset/index.js

@@ -37,7 +37,7 @@ var Fieldset = function Fieldset(_ref) {
   );
 };
 
-Fieldset.Legend = function (_ref2) {
+var FieldsetLegend = function FieldsetLegend(_ref2) {
   var children = _ref2.children,
       rest = _objectWithoutPropertiesLoose(_ref2, ["children"]);
 
@@ -50,7 +50,7 @@ Fieldset.Legend = function (_ref2) {
   }, rest), children);
 };
 
-Fieldset.HelperText = function (_ref3) {
+var FieldsetHelperText = function FieldsetHelperText(_ref3) {
   var children = _ref3.children,
       rest = _objectWithoutPropertiesLoose(_ref3, ["children"]);
 
@@ -61,4 +61,8 @@ Fieldset.HelperText = function (_ref3) {
   }, rest), children);
 };
 
+Fieldset.Legend = FieldsetLegend;
+Fieldset.HelperText = FieldsetHelperText;
+Fieldset.Legend.displayName = "Fieldset.Legend";
+Fieldset.HelperText.displayName = "Fieldset.HelperText";
 export default Fieldset;

package/lib/Icon/index.js

@@ -48,7 +48,7 @@ var ToggleableIcon = styled(Icon).withConfig({
   return !p.active && 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,
@@ -84,4 +84,6 @@ Icon.Toggle = function (_ref2) {
   );
 };
 
+Icon.Toggle = IconToggle;
+Icon.Toggle.displayName = "Icon.Toggle";
 export default Icon;

package/lib/IconViewBoxes.js

@@ -4,6 +4,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",
@@ -208,6 +209,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/lib/Menu/index.js

@@ -66,9 +66,8 @@ export 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 = useContext(MenuContext),
       menuRole = _useContext.role,
@@ -106,6 +105,11 @@ 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];
+
   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);
   /**
@@ -123,6 +127,13 @@ export var MenuItem = function MenuItem(_ref) {
       }
     }
   }, [ref, isCheckboxOrRadio]);
+  useEffect(function () {
+    if (filteredItems) {
+      setKeyPressed(true);
+    } else if (selectionIndex !== 0) {
+      setKeyPressed(true);
+    }
+  }, [selectionIndex, filteredItems]);
   var handleClick = useCallback(function (e) {
     var _menuRef$current;
 
@@ -173,7 +184,7 @@ export var MenuItem = function MenuItem(_ref) {
   return /*#__PURE__*/React.createElement(MenuItemContainer, _extends({
     "data-qa-menu-item": label
   }, props, {
-    active: active || isFocused,
+    active: isFocused && keyPressed,
     id: id,
     "aria-label": labelProp,
     value: valueProp,
@@ -332,14 +343,14 @@ export var Menu = function Menu(_ref4) {
       descendants = _useDescendants[0],
       setDescendants = _useDescendants[1];
 
-  var _useState = useState({
+  var _useState2 = useState({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
     isFilterInputFocused: false
   }),
-      state = _useState[0],
-      setState = _useState[1];
+      state = _useState2[0],
+      setState = _useState2[1];
 
   var selectCallbacks = useRef([]);
   var menuRef = useRef(null);
@@ -378,6 +389,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 = styled(Popout.Content).withConfig({
   displayName: "Menu__CustomPopoutContent",
   componentId: "sc-1p3rdnp-1"
@@ -395,9 +412,9 @@ export 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 = useState(false),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+      isOpen = _useState3[0],
+      setIsOpen = _useState3[1];
 
   var closePopout = useCallback(function () {
     return setIsOpen(false);

package/lib/Menu/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import Box from "../Box";
-import { disabled } from "../utils/mixins";
+import { disabled, focusRing } from "../utils/mixins";
 export var MenuItemContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemContainer",
   componentId: "fjvae4-0"
@@ -20,16 +20,16 @@ export var MenuItemContainer = styled(Box).withConfig({
   return "6px " + props.theme.space[300];
 }, function (props) {
   return css(["", ";"], props.theme.typography[200]);
+}, function (props) {
+  return props.selected && !props.isCheckboxOrRadio && css(["font-weight:", ";"], function (props) {
+    return props.theme.fontWeights.semibold;
+  });
 }, function (props) {
   return props.active && !props.disabled && 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 && css(["font-weight:", ";"], function (props) {
-    return props.theme.fontWeights.semibold;
-  });
 }, function (props) {
   return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;
@@ -44,4 +44,4 @@ export var MenuItemContainer = styled(Box).withConfig({
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "fjvae4-1"
-})(["list-style-type:none;outline:0;"]);
+})(["list-style-type:none;&:focus{", "}"], focusRing);

package/lib/Message/index.js

@@ -82,6 +82,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,
@@ -93,6 +95,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,
@@ -106,6 +110,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,
@@ -119,12 +125,16 @@ Message.Meta = function (props) {
   });
 };
 
+Message.Meta.displayName = "Message.Meta";
+
 Message.Button = function (props) {
   return /*#__PURE__*/React.createElement(Button, _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;
@@ -134,6 +144,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;
@@ -148,6 +160,7 @@ Message.Checkbox = function (props) {
   });
 };
 
+Message.Checkbox.displayName = "Message.Checkbox";
 Message.Context = MessageContext;
 Message.DENSITIES = MESSAGE_DENSITIES;
 export default Message;

package/lib/Modal/index.js

@@ -131,6 +131,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/lib/Popout/index.js

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

package/lib/SegmentedControl/index.js

@@ -77,4 +77,5 @@ var SegmentedControl = function SegmentedControl(_ref2) {
 };
 
 SegmentedControl.Item = SegmentedControlItem;
+SegmentedControl.Item.displayName = "SegmentedControl.Item";
 export default SegmentedControl;

package/lib/Table/index.js

@@ -78,4 +78,9 @@ Table.TableBody = TableBody;
 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/lib/Text/index.js

@@ -92,4 +92,11 @@ 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";
 export default Text;