@sproutsocial/racine 8.4.0-collapsible-updates.0 → 8.5.1

package/commonjs/Avatar/index.js

@@ -5,7 +5,9 @@ exports.default = exports.Avatar = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -31,8 +33,20 @@ var AvatarText = (0, _styledComponents.default)(function (_ref) {
 }).withConfig({
   displayName: "Avatar__AvatarText",
   componentId: "yx873f-0"
-})(["font-size:", "px;"], function (props) {
+})(["font-size:", "px;color:", "px;"], function (props) {
   return props.fontSize;
+}, function (props) {
+  return props.color;
+});
+var Container = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "Avatar__Container",
+  componentId: "yx873f-1"
+})(["", ""], function (_ref2) {
+  var theme = _ref2.theme,
+      type = _ref2.type,
+      variant = _ref2.variant,
+      bg = _ref2.bg;
+  return (0, _styledComponents.css)(["color:", ";background:", ";"], theme.colors[type][variant === "dark" ? "200" : "900"], bg ? bg : theme.colors[type][variant === "dark" ? "900" : "200"]);
 });
 
 var getInitials = function getInitials(name, fallback) {
@@ -48,14 +62,20 @@ var getInitials = function getInitials(name, fallback) {
   .join("");
 };
 
-var Avatar = function Avatar(_ref2) {
-  var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? "circle" : _ref2$appearance,
-      name = _ref2.name,
-      src = _ref2.src,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? "40px" : _ref2$size,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["appearance", "name", "src", "size"]);
+var Avatar = function Avatar(_ref3) {
+  var _ref3$appearance = _ref3.appearance,
+      appearance = _ref3$appearance === void 0 ? "circle" : _ref3$appearance,
+      name = _ref3.name,
+      src = _ref3.src,
+      _ref3$variant = _ref3.variant,
+      variant = _ref3$variant === void 0 ? "light" : _ref3$variant,
+      _ref3$type = _ref3.type,
+      type = _ref3$type === void 0 ? "neutral" : _ref3$type,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? "40px" : _ref3$size,
+      bg = _ref3.bg,
+      color = _ref3.color,
+      rest = _objectWithoutPropertiesLoose(_ref3, ["appearance", "name", "src", "variant", "type", "size", "bg", "color"]);
 
   var _useState = (0, React.useState)(false),
       imageFailedLoading = _useState[0],
@@ -69,7 +89,8 @@ var Avatar = function Avatar(_ref2) {
   }, [setImageFailedLoading]); // Font size for initials is half the size of the avatar, rounded down.
 
   var fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
-  return /*#__PURE__*/React.createElement(_Box.default, _extends({
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    className: (0, _classnames.default)(variant),
     size: size,
     overflow: "hidden",
     borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
@@ -79,13 +100,16 @@ var Avatar = function Avatar(_ref2) {
     justifyContent: "center",
     alignItems: "center",
     title: name,
-    bg: "neutral.200",
+    bg: bg,
+    variant: variant,
+    type: type,
     "data-qa-user-avatar": name // $FlowIssue - upgrade v0.112.0
 
   }, rest), !src || imageFailedLoading ? /*#__PURE__*/React.createElement(AvatarText, {
     lineHeight: size,
     fontWeight: "semibold",
-    fontSize: fontSize
+    fontSize: fontSize,
+    color: color
   }, initials) : /*#__PURE__*/React.createElement(_Image.default, {
     alt: name,
     width: "auto",

package/commonjs/Collapsible/index.js

@@ -29,10 +29,7 @@ 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,
-      _ref$collapsedHeight = _ref.collapsedHeight,
-      collapsedHeight = _ref$collapsedHeight === void 0 ? 0 : _ref$collapsedHeight,
-      openHeight = _ref.openHeight;
+      offset = _ref$offset === void 0 ? 0 : _ref$offset;
 
   var _useState = (0, React.useState)("Racine-collapsible-" + idCounter++),
       id = _useState[0];
@@ -41,25 +38,11 @@ var Collapsible = function Collapsible(_ref) {
     value: {
       isOpen: isOpen,
       id: id,
-      offset: offset,
-      collapsedHeight: collapsedHeight,
-      openHeight: openHeight
+      offset: offset
     }
   }, 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"]);
@@ -81,18 +64,20 @@ var Panel = function Panel(_ref3) {
   var _useContext2 = (0, React.useContext)(CollapsibleContext),
       isOpen = _useContext2.isOpen,
       id = _useContext2.id,
-      offset = _useContext2.offset,
-      collapsedHeight = _useContext2.collapsedHeight,
-      openHeight = _useContext2.openHeight;
+      offset = _useContext2.offset;
 
   var ref = (0, React.useRef)();
   var measurement = (0, _useMeasure.default)(ref);
 
   var _useState2 = (0, React.useState)(undefined),
       isHidden = _useState2[0],
-      setIsHidden = _useState2[1];
+      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
+
 
-  var maxHeight = determineMaxHeight(isHidden, openHeight, measurement.height + offset);
+  var maxHeight = isHidden === undefined ? undefined : 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 () {
@@ -118,14 +103,12 @@ var Panel = function Panel(_ref3) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(_styles.CollapsingBox, _extends({
-    scrollable: isOpen,
-    maxHeight: isOpen ? maxHeight : collapsedHeight,
-    minHeight: collapsedHeight,
+    maxHeight: isOpen ? maxHeight : "0",
     "data-qa-collapsible": "",
     "data-qa-collapsible-isopen": isOpen === true
   }, rest), /*#__PURE__*/React.createElement(_Box.default, {
     width: "100%",
-    hidden: isHidden && collapsedHeight === 0,
+    hidden: isHidden,
     "aria-hidden": !isOpen,
     id: id,
     ref: ref

package/commonjs/Collapsible/styles.js

@@ -12,16 +12,9 @@ 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;overflow:hidden;"], 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/IconViewBoxes.js

@@ -34,6 +34,7 @@ module.exports = {
   "barcode": "0 0 18 16",
   "basketball": "0 0 16 16",
   "bell-outline": "0 0 14 16",
+  "bigcommerce": "0 0 16 16",
   "bitly": "0 0 16 16",
   "bold": "0 0 16 16",
   "book": "0 0 14 16",
@@ -87,6 +88,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",
@@ -136,6 +140,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",
@@ -306,6 +316,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",
@@ -339,6 +350,7 @@ module.exports = {
   "window-minimize": "0 0 16 16",
   "window-regular": "0 0 16 16",
   "window-restore": "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/commonjs/Link/styles.js

@@ -20,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "styles__Container",
   componentId: "adcw4a-0"
-})(["border:0;font-family:", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", ""], function (props) {
+})(["border:0;font-family:", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.underline ? "underline" : "none";
@@ -38,6 +38,6 @@ var Container = (0, _styledComponents.default)(_Text.default).withConfig({
   return !props.href && (0, _styledComponents.css)(["background:none;"]);
 }, function (props) {
   return props.disabled && _mixins.disabled;
-}, _systemProps.COMMON, _systemProps.TYPOGRAPHY);
+}, _systemProps.COMMON, _systemProps.TYPOGRAPHY, _systemProps.FLEXBOX);
 var _default = Container;
 exports.default = _default;

package/commonjs/Menu/index.js

@@ -411,7 +411,9 @@ var MenuButton = function MenuButton(_ref5) {
       closeOnItemClick = _ref5$closeOnItemClic === void 0 ? true : _ref5$closeOnItemClic,
       _ref5$id = _ref5.id,
       id = _ref5$id === void 0 ? (0, _lodash.default)("MenuButton-") : _ref5$id,
-      props = _objectWithoutPropertiesLoose(_ref5, ["content", "popoutProps", "children", "onClick", "closeOnItemClick", "id"]);
+      _ref5$placement = _ref5.placement,
+      placement = _ref5$placement === void 0 ? "bottom" : _ref5$placement,
+      props = _objectWithoutPropertiesLoose(_ref5, ["content", "popoutProps", "children", "onClick", "closeOnItemClick", "id", "placement"]);
 
   var _useState2 = (0, React.useState)(false),
       isOpen = _useState2[0],
@@ -431,7 +433,7 @@ var MenuButton = function MenuButton(_ref5) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     content: /*#__PURE__*/React.createElement(CustomPopoutContent, null, content),
-    placement: "bottom"
+    placement: placement
   }, popoutProps, {
     // $FlowIssue
     width: props.width

package/commonjs/OverflowList/index.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactVirtualized = require("react-virtualized");
 
-var _AutoSizer = _interopRequireDefault(require("react-virtualized/dist/es/AutoSizer"));
-
 var _Box = _interopRequireDefault(require("../Box"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -59,7 +57,7 @@ var VirtualizedList = function VirtualizedList(_ref) {
       })));
     });
   }, [items, getItemProps, cache, itemWrapperProps]);
-  return /*#__PURE__*/_react.default.createElement(_AutoSizer.default, null, function (_ref4) {
+  return /*#__PURE__*/_react.default.createElement(_reactVirtualized.AutoSizer, null, function (_ref4) {
     var height = _ref4.height,
         width = _ref4.width;
     return /*#__PURE__*/_react.default.createElement(_styles.default, _extends({