@sproutsocial/racine 8.5.1 → 8.6.1

package/__flow__/Listbox/index.test.js

@@ -1,5 +1,10 @@
 import React from "react";
-import { render, fireEvent, cleanup } from "../utils/react-testing-library";
+import {
+  render,
+  fireEvent,
+  cleanup,
+  userEvent,
+} from "../utils/react-testing-library";
 import Listbox, { ListboxButton } from "./";
 import { useSelect, useMultiselect } from "../utils/hooks";
 import { MENU_ITEM_ROLES } from "../Menu/constants";
@@ -16,6 +21,7 @@ const lotsOfFruit = [
   "Jackalope",
   "Lingonberry",
   "Dingleberry",
+  "Kaffir Lime",
 ];
 const mockOnClick = jest.fn();
 
@@ -182,6 +188,26 @@ describe("Listbox", () => {
       expect(await findByText(fruit[1])).toBeInTheDocument();
       expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
+
+    it("should trigger select on enter", async () => {
+      const { findByText, queryByLabelText } = render(<AsListbox />);
+      const button = queryByLabelText(/Select a fruit/);
+
+      fireEvent.click(button);
+      userEvent.keyboard("{enter}");
+      expect(await findByText(fruit[0])).toBeInTheDocument();
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("should trigger select on space", async () => {
+      const { findByText, queryByLabelText } = render(<AsListbox />);
+      const button = queryByLabelText(/Select a fruit/);
+
+      fireEvent.click(button);
+      userEvent.keyboard("{space}");
+      expect(await findByText(fruit[0])).toBeInTheDocument();
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe("AsListbox multiselect", () => {
@@ -252,9 +278,33 @@ describe("Listbox", () => {
         <AsListboxWithFilterInput />
       );
       const input = queryByLabelText("Search fruit...");
-      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(10);
+      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(11);
       fireEvent.change(input, { target: { value: "berry" } });
       expect(queryAllByRole("menuitemcheckbox")).toHaveLength(2);
     });
+
+    it("should allow spaces to be typed in the input", async () => {
+      const { queryByLabelText, queryAllByRole } = render(
+        <AsListboxWithFilterInput />
+      );
+
+      const input = queryByLabelText("Search fruit...");
+      userEvent.type(input, "Kaffir{space}L");
+      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(1);
+    });
+
+    it("should trigger a submit on space if the input is not focused", async () => {
+      const { queryByRole } = render(<AsListboxWithFilterInput />);
+
+      // tab focus away from input
+      userEvent.tab();
+      userEvent.keyboard("{space}");
+      const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
+        name: fruit[0],
+      });
+
+      expect(firstItem).toHaveAttribute("aria-checked", "true");
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
   });
 });

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -70,6 +70,10 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   background-color: #364141;
 }
 
+.c6 .Icon-svg {
+  color: #FFFFFF;
+}
+
 .c6:focus,
 .c6:hover {
   color: #364141;

package/__flow__/Menu/hooks.js

@@ -24,6 +24,7 @@ export const MenuContext = createContext<TypeMenuContext>({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
+    isFilterInputFocused: false,
   },
   setState: () => {},
   selectCallbacks: {
@@ -75,7 +76,7 @@ export function useMenuKeyDown() {
     selectCallbacks,
     setState,
     multiselect,
-    state: { filterQuery, selectionIndex, filteredItems },
+    state: { filterQuery, selectionIndex, filteredItems, isFilterInputFocused },
   } = useContext(MenuContext);
   const { closePopout, closeOnItemClick } = useContext(MenuButtonContext);
   const { descendants: items } = useContext(MenuDescendantContext);
@@ -142,10 +143,14 @@ export function useMenuKeyDown() {
     handleKeyDown: wrapEvent<SyntheticKeyboardEvent<>>(
       function (event) {
         const { key } = event;
-
         switch (key) {
-          case "Enter":
           case " ":
+            if (isFilterInputFocused) {
+              return;
+            }
+          // falls through
+          // eslint-disable-next-line no-fallthrough
+          case "Enter":
             const selected = items[selectionIndex];
 
             if (selected) {

package/__flow__/Menu/index.flow.js

@@ -12,6 +12,7 @@ export type TypeMenuState = {|
   selectionIndex: number,
   filterQuery: string,
   filteredItems: ?(number[]),
+  isFilterInputFocused: boolean,
 |};
 
 export type TypeMenuSharedProps = {|

package/__flow__/Menu/index.js

@@ -308,14 +308,40 @@ export const MenuDivider = (props: any) => (
 );
 
 const MenuFilterInput = (props: React$ElementConfig<typeof Input>) => {
+  const { onChange, onFocus, onBlur } = props;
   const { state, setState } = useContext(MenuContext);
-  const updateFilterQuery = useCallback(
-    (event) => setState({ filterQuery: event.currentTarget.value }),
-    [setState]
+  const handleOnChange = useCallback(
+    (event, value) => {
+      onChange && onChange(event, value);
+      setState({ filterQuery: value });
+    },
+    [setState, onChange]
+  );
+
+  const handleOnFocus = useCallback(
+    (event) => {
+      onFocus && onFocus(event);
+      setState({ isFilterInputFocused: true });
+    },
+    [setState, onFocus]
+  );
+
+  const handleOnBlur = useCallback(
+    (event) => {
+      onBlur && onBlur(event);
+      setState({ isFilterInputFocused: false });
+    },
+    [setState, onBlur]
   );
 
   return (
-    <Input {...props} value={state.filterQuery} onChange={updateFilterQuery} />
+    <Input
+      {...props}
+      value={state.filterQuery}
+      onChange={handleOnChange}
+      onFocus={handleOnFocus}
+      onBlur={handleOnBlur}
+    />
   );
 };
 
@@ -364,6 +390,7 @@ export const Menu = ({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
+    isFilterInputFocused: false,
   });
   const selectCallbacks = useRef<(?(() => void))[]>([]);
   const menuRef = useRef(null);

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

@@ -29,7 +29,10 @@ var Collapsible = function Collapsible(_ref) {
       _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
       _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? 0 : _ref$offset;
+      offset = _ref$offset === void 0 ? 0 : _ref$offset,
+      _ref$collapsedHeight = _ref.collapsedHeight,
+      collapsedHeight = _ref$collapsedHeight === void 0 ? 0 : _ref$collapsedHeight,
+      openHeight = _ref.openHeight;
 
   var _useState = (0, React.useState)("Racine-collapsible-" + idCounter++),
       id = _useState[0];
@@ -38,11 +41,25 @@ var Collapsible = function Collapsible(_ref) {
     value: {
       isOpen: isOpen,
       id: id,
-      offset: offset
+      offset: offset,
+      collapsedHeight: collapsedHeight,
+      openHeight: openHeight
     }
   }, children);
 };
 
+var determineMaxHeight = function determineMaxHeight(isHidden, openHeight, computedHeight) {
+  // If isHidden is undefined this is the first render.  Return undefined so the max-height prop is not added
+  // This is a hack to prevent css from animating if it begins in the open state
+  // css animates when attribute values change (IE from 0 to another number)
+  // css does not animate when simply adding an attribute to an HTML element
+  if (isHidden === undefined) return undefined; // If the user has defined an explicit open height, return that as the max height
+
+  if (!!openHeight) return openHeight; // Otherwise, fallback to the computed height
+
+  return computedHeight;
+};
+
 var Trigger = function Trigger(_ref2) {
   var children = _ref2.children,
       rest = _objectWithoutPropertiesLoose(_ref2, ["children"]);
@@ -64,20 +81,18 @@ var Panel = function Panel(_ref3) {
   var _useContext2 = (0, React.useContext)(CollapsibleContext),
       isOpen = _useContext2.isOpen,
       id = _useContext2.id,
-      offset = _useContext2.offset;
+      offset = _useContext2.offset,
+      collapsedHeight = _useContext2.collapsedHeight,
+      openHeight = _useContext2.openHeight;
 
   var ref = (0, React.useRef)();
   var measurement = (0, _useMeasure.default)(ref);
 
   var _useState2 = (0, React.useState)(undefined),
       isHidden = _useState2[0],
-      setIsHidden = _useState2[1]; // If this is the initial render isHidden will be undefined
-  // When that is the case, set maxHeight to undefined rather than the comptued 0
-  // This prevents an initial expansion animation if a component starts out open
-  // There is no animation because css is not changing the maxHeight property after mount
-
+      setIsHidden = _useState2[1];
 
-  var maxHeight = isHidden === undefined ? undefined : measurement.height + offset;
+  var maxHeight = determineMaxHeight(isHidden, openHeight, measurement.height + offset);
   /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it fucks with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
 
   (0, React.useEffect)(function () {
@@ -103,12 +118,14 @@ var Panel = function Panel(_ref3) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(_styles.CollapsingBox, _extends({
-    maxHeight: isOpen ? maxHeight : "0",
+    scrollable: isOpen,
+    maxHeight: isOpen ? maxHeight : collapsedHeight,
+    minHeight: collapsedHeight,
     "data-qa-collapsible": "",
     "data-qa-collapsible-isopen": isOpen === true
   }, rest), /*#__PURE__*/React.createElement(_Box.default, {
     width: "100%",
-    hidden: isHidden,
+    hidden: isHidden && collapsedHeight === 0,
     "aria-hidden": !isOpen,
     id: id,
     ref: ref

package/commonjs/Collapsible/styles.js

@@ -12,9 +12,16 @@ 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;overflow:hidden;"], function (p) {
+})(["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) {
   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";
 });
 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"
 });