@sproutsocial/racine 8.6.0 → 8.6.3-dar10.0

package/__flow__/Menu/index.stories.js

@@ -203,3 +203,23 @@ export const MenuWithCheckboxes = (props) => {
     </Menu>
   );
 };
+
+// Specifically testing that icons with a color inverse when active like the text does.
+export const MenuWithIcons = (props) => {
+  return (
+    <Menu width="200px" {...props}>
+      <Menu.Item key="positive" onClick={() => alert("positive")}>
+        <Icon name="flat-positive-sentiment" mr={200} color="blue.600" />
+        Positive
+      </Menu.Item>
+      <Menu.Item key="negative" onClick={() => alert("negative")}>
+        <Icon name="flat-negative-sentiment" mr={200} color="red.500" />
+        Negative
+      </Menu.Item>
+      <Menu.Item key="neutral" onClick={() => alert("neutral")}>
+        <Icon name="flat-neutral-sentiment" mr={200} />
+        Neutral
+      </Menu.Item>
+    </Menu>
+  );
+};

package/__flow__/Menu/styles.js

@@ -41,6 +41,10 @@ export const MenuItemContainer = styled<
     css`
       color: ${(props) => props.theme.colors.text.inverse};
       background-color: ${props.theme.colors.listItem.background.selected};
+
+      .Icon-svg {
+        color: ${(props) => props.theme.colors.text.inverse};
+      }
     `}
 
   ${(props) =>

package/commonjs/Collapsible/index.js

@@ -118,6 +118,7 @@ var Panel = function Panel(_ref3) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(_styles.CollapsingBox, _extends({
+    hasShadow: collapsedHeight || openHeight > 0,
     scrollable: isOpen,
     maxHeight: isOpen ? maxHeight : collapsedHeight,
     minHeight: collapsedHeight,

package/commonjs/Collapsible/styles.js

@@ -12,16 +12,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var CollapsingBox = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__CollapsingBox",
   componentId: "sc-1xvfbl7-0"
-})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;background:linear-gradient( ", " 30%,rgba(255,255,255,0) ),linear-gradient( rgba(255,255,255,0),", " 70% ) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";"], function (p) {
+})(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;", ""], function (p) {
   return p.theme.duration.medium;
 }, function (p) {
   return p.theme.easing.ease_inout;
-}, function (p) {
-  return p.theme.colors.neutral[100];
-}, function (p) {
-  return p.theme.colors.neutral[100];
 }, function (_ref) {
-  var scrollable = _ref.scrollable;
-  return scrollable ? "overflow: auto" : "overflow: hidden";
+  var hasShadow = _ref.hasShadow,
+      theme = _ref.theme,
+      scrollable = _ref.scrollable;
+  return hasShadow ? "background:  /* Shadow covers */ linear-gradient(\n        transparent 30%,\n        rgba(255, 255, 255, 0)\n      ),\n      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n      /* Shadows */\n        radial-gradient(\n          farthest-side at 50% 0,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        ),\n      radial-gradient(\n          farthest-side at 50% 100%,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        )\n        0 100%;\n    background-repeat: no-repeat;\n    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n    background-attachment: local, local, scroll, scroll;\n    " + (scrollable ? "overflow: auto" : "overflow: hidden") + ";" : "";
 });
 exports.CollapsingBox = CollapsingBox;

package/commonjs/Menu/hooks.js

@@ -25,7 +25,8 @@ var MenuContext = /*#__PURE__*/(0, _react.createContext)({
   state: {
     selectionIndex: 0,
     filterQuery: "",
-    filteredItems: null
+    filteredItems: null,
+    isFilterInputFocused: false
   },
   setState: function setState() {},
   selectCallbacks: {
@@ -75,7 +76,8 @@ function useMenuKeyDown() {
       _useContext$state = _useContext.state,
       filterQuery = _useContext$state.filterQuery,
       selectionIndex = _useContext$state.selectionIndex,
-      filteredItems = _useContext$state.filteredItems;
+      filteredItems = _useContext$state.filteredItems,
+      isFilterInputFocused = _useContext$state.isFilterInputFocused;
 
   var _useContext2 = (0, _react.useContext)(MenuButtonContext),
       closePopout = _useContext2.closePopout,
@@ -134,8 +136,15 @@ function useMenuKeyDown() {
       var key = event.key;
 
       switch (key) {
-        case "Enter":
         case " ":
+          if (isFilterInputFocused) {
+            return;
+          }
+
+        // falls through
+        // eslint-disable-next-line no-fallthrough
+
+        case "Enter":
           var selected = items[selectionIndex];
 
           if (selected) {

package/commonjs/Menu/index.js

@@ -296,18 +296,37 @@ var MenuDivider = function MenuDivider(props) {
 exports.MenuDivider = MenuDivider;
 
 var MenuFilterInput = function MenuFilterInput(props) {
+  var onChange = props.onChange,
+      onFocus = props.onFocus,
+      onBlur = props.onBlur;
+
   var _useContext3 = (0, React.useContext)(_hooks2.MenuContext),
       state = _useContext3.state,
       setState = _useContext3.setState;
 
-  var updateFilterQuery = (0, React.useCallback)(function (event) {
-    return setState({
-      filterQuery: event.currentTarget.value
+  var handleOnChange = (0, React.useCallback)(function (event, value) {
+    onChange && onChange(event, value);
+    setState({
+      filterQuery: value
+    });
+  }, [setState, onChange]);
+  var handleOnFocus = (0, React.useCallback)(function (event) {
+    onFocus && onFocus(event);
+    setState({
+      isFilterInputFocused: true
+    });
+  }, [setState, onFocus]);
+  var handleOnBlur = (0, React.useCallback)(function (event) {
+    onBlur && onBlur(event);
+    setState({
+      isFilterInputFocused: false
     });
-  }, [setState]);
+  }, [setState, onBlur]);
   return /*#__PURE__*/React.createElement(_Input.default, _extends({}, props, {
     value: state.filterQuery,
-    onChange: updateFilterQuery
+    onChange: handleOnChange,
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur
   }));
 };
 
@@ -353,7 +372,8 @@ var Menu = function Menu(_ref4) {
   var _useState = (0, React.useState)({
     selectionIndex: 0,
     filterQuery: "",
-    filteredItems: null
+    filteredItems: null,
+    isFilterInputFocused: false
   }),
       state = _useState[0],
       setState = _useState[1];

package/commonjs/Menu/styles.js

@@ -35,9 +35,11 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
 }, function (props) {
   return (0, _styledComponents.css)(["", ";"], props.theme.typography[200]);
 }, function (props) {
-  return props.active && !props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";"], 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);
+  }, 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;