@sproutsocial/racine 7.7.0-beta-collapsible.0 → 7.7.0

package/lib/Collapsible/index.js

@@ -15,10 +15,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 = useState("Racine-collapsible-" + idCounter++),
       id = _useState[0];
@@ -27,9 +24,7 @@ var Collapsible = function Collapsible(_ref) {
     value: {
       isOpen: isOpen,
       id: id,
-      offset: offset,
-      collapsedHeight: collapsedHeight,
-      openHeight: openHeight
+      offset: offset
     }
   }, children);
 };
@@ -55,9 +50,7 @@ var Panel = function Panel(_ref3) {
   var _useContext2 = useContext(CollapsibleContext),
       isOpen = _useContext2.isOpen,
       id = _useContext2.id,
-      offset = _useContext2.offset,
-      collapsedHeight = _useContext2.collapsedHeight,
-      openHeight = _useContext2.openHeight;
+      offset = _useContext2.offset;
 
   var ref = useRef();
   var measurement = useMeasure(ref);
@@ -70,7 +63,7 @@ var Panel = function Panel(_ref3) {
   // There is no animation because css is not changing the maxHeight property after mount
 
 
-  var maxHeight = typeof openHeight !== "undefined" ? 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. */
 
   useEffect(function () {
@@ -96,14 +89,12 @@ var Panel = function Panel(_ref3) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React.createElement(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, {
     width: "100%",
-    hidden: isHidden && collapsedHeight === 0,
+    hidden: isHidden,
     "aria-hidden": !isOpen,
     id: id,
     ref: ref

package/lib/Collapsible/styles.js

@@ -3,15 +3,8 @@ 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;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";
 });

package/lib/IconViewBoxes.js

@@ -3,6 +3,7 @@ module.exports = {
   "add-item": "0 0 16 16",
   "add-keyword": "0 0 16 16",
   "add-team-member": "0 0 18 13",
+  "add-variable": "0 0 18 14",
   "address-card-solid": "0 0 18 16",
   "adobe-experience-manager": "0 0 16 18",
   "ads": "0 0 9 16",
@@ -275,6 +276,7 @@ module.exports = {
   "sent-message": "0 0 16 14",
   "share": "0 0 16 14",
   "shopify": "0 0 16 18",
+  "show-navigation": "0 0 18 14",
   "slack": "0 0 16 16",
   "small-density": "0 0 16 16",
   "smiley": "0 0 16 16",

package/lib/Modal/index.js

@@ -68,9 +68,8 @@ var ModalFooter = function ModalFooter(props) {
 ModalFooter.defaultProps = {
   bg: "background.container"
 };
-
-// $FlowIssue - upgrade v0.112.0
-var ModalContent = function ModalContent(_ref) {
+var ModalContent = /*#__PURE__*/React.forwardRef( // $FlowIssue - upgrade v0.112.0
+function (_ref, ref) {
   var children = _ref.children,
       rest = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
@@ -79,9 +78,10 @@ var ModalContent = function ModalContent(_ref) {
 
   return /*#__PURE__*/React.createElement(Content, _extends({
     "data-qa-modal": true,
-    "data-qa-label": label
+    "data-qa-label": label,
+    ref: ref
   }, rest), children);
-};
+});
 
 /**
  * The modal you want

package/lib/Token/styles.js

@@ -37,7 +37,7 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.disabled && css(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {
-  return !props.valid && css(["color:", ";border-color:", ";background:", ";&:hover{color:", ";}"], function (props) {
+  return !props.valid && css(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border-color:", ";background:", ";}"], function (props) {
     return props.theme.colors.text.inverse;
   }, function (props) {
     return props.theme.colors.error.color;
@@ -45,6 +45,10 @@ var Container = styled.button.withConfig({
     return props.theme.colors.error.color;
   }, function (props) {
     return props.theme.colors.text.inverse;
+  }, function (props) {
+    return props.theme.colors.red[900];
+  }, function (props) {
+    return props.theme.colors.red[900];
   });
 }, COMMON);
 export default Container;