@sproutsocial/racine 8.4.0 → 8.6.0

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/IconViewBoxes.js

@@ -86,6 +86,9 @@ module.exports = {
   "crop": "0 0 16 16",
   "crown": "0 0 16 16",
   "dashboard": "0 0 16 14",
+  "deconstructed-negative-sentiment": "0 0 18 18",
+  "deconstructed-neutral-sentiment": "0 0 18 18",
+  "deconstructed-positive-sentiment": "0 0 18 18",
   "discovery": "0 0 16 16",
   "dislike-outline": "0 0 15 16",
   "dislike": "0 0 16 16",
@@ -135,6 +138,12 @@ module.exports = {
   "filter": "0 0 16 16",
   "flag-outline": "0 0 16 16",
   "flag": "0 0 16 16",
+  "flat-negative-sentiment-outline": "0 0 18 18",
+  "flat-negative-sentiment": "0 0 18 18",
+  "flat-neutral-sentiment-outline": "0 0 18 18",
+  "flat-neutral-sentiment": "0 0 18 18",
+  "flat-positive-sentiment-outline": "0 0 18 18",
+  "flat-positive-sentiment": "0 0 18 18",
   "folder-open": "0 0 16 15",
   "folder": "0 0 16 16",
   "follow-outline": "0 0 20 16",
@@ -305,6 +314,7 @@ module.exports = {
   "team": "0 0 18 16",
   "text-asset": "0 0 16 16",
   "text": "0 0 8 16",
+  "tiktok": "0 0 16 18",
   "times": "0 0 16 22",
   "trash-can-outline": "0 0 14 16",
   "trash-can": "0 0 14 16",
@@ -338,7 +348,7 @@ module.exports = {
   "window-minimize": "0 0 16 16",
   "window-regular": "0 0 16 16",
   "window-restore": "0 0 16 16",
-  "woocommerce": "0 0 16 16",
+  "woocommerce": "0 0 18 16",
   "x": "0 0 16 18",
   "yelp-full-star": "0 0 16 16",
   "yelp-half-star": "0 0 16 16",

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