@sproutsocial/racine 8.5.2 → 8.6.2

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/__flow__/dataviz/dataviz.stories.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { DataVizRotation } from ".";
+
+export default {
+  title: "Dataviz color rotation",
+};
+
+export const JSdataviz = () => <DataVizRotation />;
+
+JSdataviz.story = {
+  name: "JS dataviz rotation",
+};

package/__flow__/dataviz/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Box from "../Box";
+import { withTheme } from "styled-components";
+
+export const DataVizRotation = withTheme((p) => {
+  return p.theme.colors.DATAVIZ_COLORS_LIST.map((color, i) => {
+    return (
+      <Box key={color} py={300} px={400} bg={color}>
+        {i + 1}
+      </Box>
+    );
+  });
+});

package/__flow__/themes/dark/dataviz-palette.js

@@ -0,0 +1,50 @@
+// @flow strict-local
+
+import COLORS from "@sproutsocial/seeds-color";
+
+export const datavizPalette = {
+  DATAVIZ_COLORS_LIST: [
+    COLORS.COLOR_TEAL_400,
+    COLORS.COLOR_PURPLE_400,
+    COLORS.COLOR_PINK_400,
+    COLORS.COLOR_YELLOW_500,
+    COLORS.COLOR_BLUE_400,
+    COLORS.COLOR_MAGENTA_400,
+    COLORS.COLOR_GREEN_400,
+    COLORS.COLOR_ORANGE_400,
+    COLORS.COLOR_RED_700,
+    COLORS.COLOR_TEAL_700,
+    COLORS.COLOR_PURPLE_700,
+    COLORS.COLOR_PINK_700,
+    COLORS.COLOR_YELLOW_800,
+    COLORS.COLOR_BLUE_700,
+    COLORS.COLOR_MAGENTA_700,
+    COLORS.COLOR_GREEN_700,
+    COLORS.COLOR_ORANGE_700,
+    COLORS.COLOR_RED_400,
+    COLORS.COLOR_GREEN_200,
+    COLORS.COLOR_YELLOW_200,
+  ],
+  DATAVIZ_COLORS_MAP: {
+    "1": COLORS.COLOR_TEAL_400,
+    "2": COLORS.COLOR_PURPLE_400,
+    "3": COLORS.COLOR_PINK_400,
+    "4": COLORS.COLOR_YELLOW_500,
+    "5": COLORS.COLOR_BLUE_400,
+    "6": COLORS.COLOR_MAGENTA_400,
+    "7": COLORS.COLOR_GREEN_400,
+    "8": COLORS.COLOR_ORANGE_400,
+    "9": COLORS.COLOR_RED_700,
+    "10": COLORS.COLOR_TEAL_700,
+    "11": COLORS.COLOR_PURPLE_700,
+    "12": COLORS.COLOR_PINK_700,
+    "13": COLORS.COLOR_YELLOW_800,
+    "14": COLORS.COLOR_BLUE_700,
+    "15": COLORS.COLOR_MAGENTA_700,
+    "16": COLORS.COLOR_GREEN_700,
+    "17": COLORS.COLOR_ORANGE_700,
+    "18": COLORS.COLOR_RED_400,
+    "19": COLORS.COLOR_GREEN_200,
+    "20": COLORS.COLOR_YELLOW_200,
+  },
+};

package/__flow__/themes/dark/theme.js

@@ -2,6 +2,7 @@
 
 import COLORS from "@sproutsocial/seeds-color";
 import defaultTheme from "../default/theme";
+import { datavizPalette } from "./dataviz-palette";
 import {
   green,
   blue,
@@ -188,6 +189,7 @@ const darkTheme = {
         selected: COLORS.COLOR_NEUTRAL_0,
       },
     },
+    ...datavizPalette,
   },
   mode: "dark",
 };

package/__flow__/themes/default/dataviz-palette.js

@@ -0,0 +1,50 @@
+// @flow strict-local
+
+import COLORS from "@sproutsocial/seeds-color";
+
+export const datavizPalette = {
+  DATAVIZ_COLORS_LIST: [
+    COLORS.COLOR_TEAL_500,
+    COLORS.COLOR_PURPLE_700,
+    COLORS.COLOR_PINK_700,
+    COLORS.COLOR_YELLOW_500,
+    COLORS.COLOR_BLUE_500,
+    COLORS.COLOR_MAGENTA_500,
+    COLORS.COLOR_GREEN_500,
+    COLORS.COLOR_ORANGE_500,
+    COLORS.COLOR_RED_700,
+    COLORS.COLOR_TEAL_900,
+    COLORS.COLOR_PURPLE_400,
+    COLORS.COLOR_PINK_900,
+    COLORS.COLOR_YELLOW_900,
+    COLORS.COLOR_BLUE_900,
+    COLORS.COLOR_MAGENTA_900,
+    COLORS.COLOR_GREEN_900,
+    COLORS.COLOR_ORANGE_900,
+    COLORS.COLOR_RED_400,
+    COLORS.COLOR_GREEN_700,
+    COLORS.COLOR_YELLOW_800,
+  ],
+  DATAVIZ_COLORS_MAP: {
+    "1": COLORS.COLOR_TEAL_500,
+    "2": COLORS.COLOR_PURPLE_700,
+    "3": COLORS.COLOR_PINK_700,
+    "4": COLORS.COLOR_YELLOW_500,
+    "5": COLORS.COLOR_BLUE_500,
+    "6": COLORS.COLOR_MAGENTA_500,
+    "7": COLORS.COLOR_GREEN_500,
+    "8": COLORS.COLOR_ORANGE_500,
+    "9": COLORS.COLOR_RED_700,
+    "10": COLORS.COLOR_TEAL_900,
+    "11": COLORS.COLOR_PURPLE_400,
+    "12": COLORS.COLOR_PINK_900,
+    "13": COLORS.COLOR_YELLOW_900,
+    "14": COLORS.COLOR_BLUE_900,
+    "15": COLORS.COLOR_MAGENTA_900,
+    "16": COLORS.COLOR_GREEN_900,
+    "17": COLORS.COLOR_ORANGE_900,
+    "18": COLORS.COLOR_RED_400,
+    "19": COLORS.COLOR_GREEN_700,
+    "20": COLORS.COLOR_YELLOW_800,
+  },
+};

package/__flow__/themes/default/theme.js

@@ -2,6 +2,7 @@
 
 import COLORS from "@sproutsocial/seeds-color";
 import literalColors from "./literal-colors";
+import { datavizPalette } from "./dataviz-palette";
 import {
   green,
   blue,
@@ -223,6 +224,7 @@ const colors = {
     tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK,
   },
   ...literalColors,
+  ...datavizPalette,
 };
 
 export const typography = {

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;

package/commonjs/dataviz/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.DataVizRotation = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _styledComponents = require("styled-components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DataVizRotation = (0, _styledComponents.withTheme)(function (p) {
+  return p.theme.colors.DATAVIZ_COLORS_LIST.map(function (color, i) {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, {
+      key: color,
+      py: 300,
+      px: 400,
+      bg: color
+    }, i + 1);
+  });
+});
+exports.DataVizRotation = DataVizRotation;

package/commonjs/themes/dark/dataviz-palette.js

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+exports.datavizPalette = void 0;
+
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var datavizPalette = {
+  DATAVIZ_COLORS_LIST: [_seedsColor.default.COLOR_TEAL_400, _seedsColor.default.COLOR_PURPLE_400, _seedsColor.default.COLOR_PINK_400, _seedsColor.default.COLOR_YELLOW_500, _seedsColor.default.COLOR_BLUE_400, _seedsColor.default.COLOR_MAGENTA_400, _seedsColor.default.COLOR_GREEN_400, _seedsColor.default.COLOR_ORANGE_400, _seedsColor.default.COLOR_RED_700, _seedsColor.default.COLOR_TEAL_700, _seedsColor.default.COLOR_PURPLE_700, _seedsColor.default.COLOR_PINK_700, _seedsColor.default.COLOR_YELLOW_800, _seedsColor.default.COLOR_BLUE_700, _seedsColor.default.COLOR_MAGENTA_700, _seedsColor.default.COLOR_GREEN_700, _seedsColor.default.COLOR_ORANGE_700, _seedsColor.default.COLOR_RED_400, _seedsColor.default.COLOR_GREEN_200, _seedsColor.default.COLOR_YELLOW_200],
+  DATAVIZ_COLORS_MAP: {
+    "1": _seedsColor.default.COLOR_TEAL_400,
+    "2": _seedsColor.default.COLOR_PURPLE_400,
+    "3": _seedsColor.default.COLOR_PINK_400,
+    "4": _seedsColor.default.COLOR_YELLOW_500,
+    "5": _seedsColor.default.COLOR_BLUE_400,
+    "6": _seedsColor.default.COLOR_MAGENTA_400,
+    "7": _seedsColor.default.COLOR_GREEN_400,
+    "8": _seedsColor.default.COLOR_ORANGE_400,
+    "9": _seedsColor.default.COLOR_RED_700,
+    "10": _seedsColor.default.COLOR_TEAL_700,
+    "11": _seedsColor.default.COLOR_PURPLE_700,
+    "12": _seedsColor.default.COLOR_PINK_700,
+    "13": _seedsColor.default.COLOR_YELLOW_800,
+    "14": _seedsColor.default.COLOR_BLUE_700,
+    "15": _seedsColor.default.COLOR_MAGENTA_700,
+    "16": _seedsColor.default.COLOR_GREEN_700,
+    "17": _seedsColor.default.COLOR_ORANGE_700,
+    "18": _seedsColor.default.COLOR_RED_400,
+    "19": _seedsColor.default.COLOR_GREEN_200,
+    "20": _seedsColor.default.COLOR_YELLOW_200
+  }
+};
+exports.datavizPalette = datavizPalette;

package/commonjs/themes/dark/theme.js

@@ -7,6 +7,8 @@ var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 
 var _theme = _interopRequireDefault(require("../default/theme"));
 
+var _datavizPalette = require("./dataviz-palette");
+
 var _decorativePalettes = require("./decorative-palettes");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -187,7 +189,7 @@ var darkTheme = _extends({}, _theme.default, {
         selected: _seedsColor.default.COLOR_NEUTRAL_0
       }
     }
-  }),
+  }, _datavizPalette.datavizPalette),
   mode: "dark"
 });
 

package/commonjs/themes/default/dataviz-palette.js

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+exports.datavizPalette = void 0;
+
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var datavizPalette = {
+  DATAVIZ_COLORS_LIST: [_seedsColor.default.COLOR_TEAL_500, _seedsColor.default.COLOR_PURPLE_700, _seedsColor.default.COLOR_PINK_700, _seedsColor.default.COLOR_YELLOW_500, _seedsColor.default.COLOR_BLUE_500, _seedsColor.default.COLOR_MAGENTA_500, _seedsColor.default.COLOR_GREEN_500, _seedsColor.default.COLOR_ORANGE_500, _seedsColor.default.COLOR_RED_700, _seedsColor.default.COLOR_TEAL_900, _seedsColor.default.COLOR_PURPLE_400, _seedsColor.default.COLOR_PINK_900, _seedsColor.default.COLOR_YELLOW_900, _seedsColor.default.COLOR_BLUE_900, _seedsColor.default.COLOR_MAGENTA_900, _seedsColor.default.COLOR_GREEN_900, _seedsColor.default.COLOR_ORANGE_900, _seedsColor.default.COLOR_RED_400, _seedsColor.default.COLOR_GREEN_700, _seedsColor.default.COLOR_YELLOW_800],
+  DATAVIZ_COLORS_MAP: {
+    "1": _seedsColor.default.COLOR_TEAL_500,
+    "2": _seedsColor.default.COLOR_PURPLE_700,
+    "3": _seedsColor.default.COLOR_PINK_700,
+    "4": _seedsColor.default.COLOR_YELLOW_500,
+    "5": _seedsColor.default.COLOR_BLUE_500,
+    "6": _seedsColor.default.COLOR_MAGENTA_500,
+    "7": _seedsColor.default.COLOR_GREEN_500,
+    "8": _seedsColor.default.COLOR_ORANGE_500,
+    "9": _seedsColor.default.COLOR_RED_700,
+    "10": _seedsColor.default.COLOR_TEAL_900,
+    "11": _seedsColor.default.COLOR_PURPLE_400,
+    "12": _seedsColor.default.COLOR_PINK_900,
+    "13": _seedsColor.default.COLOR_YELLOW_900,
+    "14": _seedsColor.default.COLOR_BLUE_900,
+    "15": _seedsColor.default.COLOR_MAGENTA_900,
+    "16": _seedsColor.default.COLOR_GREEN_900,
+    "17": _seedsColor.default.COLOR_ORANGE_900,
+    "18": _seedsColor.default.COLOR_RED_400,
+    "19": _seedsColor.default.COLOR_GREEN_700,
+    "20": _seedsColor.default.COLOR_YELLOW_800
+  }
+};
+exports.datavizPalette = datavizPalette;

package/commonjs/themes/default/theme.js

@@ -7,6 +7,8 @@ var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 
 var _literalColors = _interopRequireDefault(require("./literal-colors"));
 
+var _datavizPalette = require("./dataviz-palette");
+
 var _decorativePalettes = require("./decorative-palettes");
 
 var _seedsNetworkcolor = _interopRequireDefault(require("@sproutsocial/seeds-networkcolor"));
@@ -228,7 +230,7 @@ var colors = _extends({
     whatsapp: _seedsNetworkcolor.default.NETWORK_COLOR_WHATSAPP,
     tiktok: _seedsNetworkcolor.default.NETWORK_COLOR_TIKTOK
   }
-}, _literalColors.default);
+}, _literalColors.default, _datavizPalette.datavizPalette);
 
 var typography = {
   "100": _seedsTypography.default.TYPOGRAPHY_SIZE_100,

package/lib/Collapsible/index.js

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

package/lib/Collapsible/styles.js

@@ -3,15 +3,13 @@ import Box from "../Box";
 export var CollapsingBox = styled(Box).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") + ";" : "";
 });

package/lib/Menu/hooks.js

@@ -13,7 +13,8 @@ export var MenuContext = /*#__PURE__*/createContext({
   state: {
     selectionIndex: 0,
     filterQuery: "",
-    filteredItems: null
+    filteredItems: null,
+    isFilterInputFocused: false
   },
   setState: function setState() {},
   selectCallbacks: {
@@ -59,7 +60,8 @@ export 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 = useContext(MenuButtonContext),
       closePopout = _useContext2.closePopout,
@@ -118,8 +120,15 @@ export 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/lib/Menu/index.js

@@ -258,18 +258,37 @@ export var MenuDivider = function MenuDivider(props) {
 };
 
 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 updateFilterQuery = useCallback(function (event) {
-    return setState({
-      filterQuery: event.currentTarget.value
+  var handleOnChange = useCallback(function (event, value) {
+    onChange && onChange(event, value);
+    setState({
+      filterQuery: value
+    });
+  }, [setState, onChange]);
+  var handleOnFocus = useCallback(function (event) {
+    onFocus && onFocus(event);
+    setState({
+      isFilterInputFocused: true
+    });
+  }, [setState, onFocus]);
+  var handleOnBlur = useCallback(function (event) {
+    onBlur && onBlur(event);
+    setState({
+      isFilterInputFocused: false
     });
-  }, [setState]);
+  }, [setState, onBlur]);
   return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
     value: state.filterQuery,
-    onChange: updateFilterQuery
+    onChange: handleOnChange,
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur
   }));
 };
 
@@ -315,7 +334,8 @@ export var Menu = function Menu(_ref4) {
   var _useState = useState({
     selectionIndex: 0,
     filterQuery: "",
-    filteredItems: null
+    filteredItems: null,
+    isFilterInputFocused: false
   }),
       state = _useState[0],
       setState = _useState[1];

package/lib/Menu/styles.js

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

package/lib/dataviz/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Box from "../Box";
+import { withTheme } from "styled-components";
+export var DataVizRotation = withTheme(function (p) {
+  return p.theme.colors.DATAVIZ_COLORS_LIST.map(function (color, i) {
+    return /*#__PURE__*/React.createElement(Box, {
+      key: color,
+      py: 300,
+      px: 400,
+      bg: color
+    }, i + 1);
+  });
+});

package/lib/themes/dark/dataviz-palette.js

@@ -0,0 +1,26 @@
+import COLORS from "@sproutsocial/seeds-color";
+export var datavizPalette = {
+  DATAVIZ_COLORS_LIST: [COLORS.COLOR_TEAL_400, COLORS.COLOR_PURPLE_400, COLORS.COLOR_PINK_400, COLORS.COLOR_YELLOW_500, COLORS.COLOR_BLUE_400, COLORS.COLOR_MAGENTA_400, COLORS.COLOR_GREEN_400, COLORS.COLOR_ORANGE_400, COLORS.COLOR_RED_700, COLORS.COLOR_TEAL_700, COLORS.COLOR_PURPLE_700, COLORS.COLOR_PINK_700, COLORS.COLOR_YELLOW_800, COLORS.COLOR_BLUE_700, COLORS.COLOR_MAGENTA_700, COLORS.COLOR_GREEN_700, COLORS.COLOR_ORANGE_700, COLORS.COLOR_RED_400, COLORS.COLOR_GREEN_200, COLORS.COLOR_YELLOW_200],
+  DATAVIZ_COLORS_MAP: {
+    "1": COLORS.COLOR_TEAL_400,
+    "2": COLORS.COLOR_PURPLE_400,
+    "3": COLORS.COLOR_PINK_400,
+    "4": COLORS.COLOR_YELLOW_500,
+    "5": COLORS.COLOR_BLUE_400,
+    "6": COLORS.COLOR_MAGENTA_400,
+    "7": COLORS.COLOR_GREEN_400,
+    "8": COLORS.COLOR_ORANGE_400,
+    "9": COLORS.COLOR_RED_700,
+    "10": COLORS.COLOR_TEAL_700,
+    "11": COLORS.COLOR_PURPLE_700,
+    "12": COLORS.COLOR_PINK_700,
+    "13": COLORS.COLOR_YELLOW_800,
+    "14": COLORS.COLOR_BLUE_700,
+    "15": COLORS.COLOR_MAGENTA_700,
+    "16": COLORS.COLOR_GREEN_700,
+    "17": COLORS.COLOR_ORANGE_700,
+    "18": COLORS.COLOR_RED_400,
+    "19": COLORS.COLOR_GREEN_200,
+    "20": COLORS.COLOR_YELLOW_200
+  }
+};