@sproutsocial/racine 8.5.1 → 8.6.1

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

@@ -15,7 +15,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 = useState("Racine-collapsible-" + idCounter++),
       id = _useState[0];
@@ -24,11 +27,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"]);
@@ -50,20 +67,18 @@ var Panel = function Panel(_ref3) {
   var _useContext2 = useContext(CollapsibleContext),
       isOpen = _useContext2.isOpen,
       id = _useContext2.id,
-      offset = _useContext2.offset;
+      offset = _useContext2.offset,
+      collapsedHeight = _useContext2.collapsedHeight,
+      openHeight = _useContext2.openHeight;
 
   var ref = useRef();
   var measurement = useMeasure(ref);
 
   var _useState2 = 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. */
 
   useEffect(function () {
@@ -89,12 +104,14 @@ var Panel = function Panel(_ref3) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(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, {
     width: "100%",
-    hidden: isHidden,
+    hidden: isHidden && collapsedHeight === 0,
     "aria-hidden": !isOpen,
     id: id,
     ref: ref

package/lib/Collapsible/styles.js

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

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
+  }
+};

package/lib/themes/dark/theme.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import COLORS from "@sproutsocial/seeds-color";
 import defaultTheme from "../default/theme";
+import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
 
 var darkTheme = _extends({}, defaultTheme, {
@@ -178,7 +179,7 @@ var darkTheme = _extends({}, defaultTheme, {
         selected: COLORS.COLOR_NEUTRAL_0
       }
     }
-  }),
+  }, datavizPalette),
   mode: "dark"
 });
 

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

@@ -0,0 +1,26 @@
+import COLORS from "@sproutsocial/seeds-color";
+export var 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/lib/themes/default/theme.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import COLORS from "@sproutsocial/seeds-color";
 import literalColors from "./literal-colors";
+import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
 import NETWORKCOLORS from "@sproutsocial/seeds-networkcolor";
 import TYPOGRAPHY from "@sproutsocial/seeds-typography";
@@ -211,7 +212,7 @@ var colors = _extends({
     whatsapp: NETWORKCOLORS.NETWORK_COLOR_WHATSAPP,
     tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK
   }
-}, literalColors);
+}, literalColors, datavizPalette);
 
 export var typography = {
   "100": TYPOGRAPHY.TYPOGRAPHY_SIZE_100,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.5.1",
+  "version": "8.6.1",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -39,6 +39,7 @@
     "lint-css": "stylelint 'src/**/*.js'",
     "lint-icons": "yarn icon-lint check 'icons/*.svg'",
     "jest": "jest",
+    "jest:watch": "jest --watch",
     "test": "npm-run-all flow lint-js lint-css lint-icons jest",
     "new": "node ./bin/scaffold.js",
     "playground": "node ./bin/scaffold-playground.js && yarn start",
@@ -108,7 +109,7 @@
     "@storybook/react": "^6.1.11",
     "@storybook/theming": "^6.1.11",
     "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.5.0",
+    "@testing-library/user-event": "^13.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.1.0",