@thecb/components 4.2.7-beta.5 → 4.2.7-beta.8

package/dist/index.cjs.js

@@ -6481,7 +6481,7 @@ function _templateObject2$2() {
 }
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  overflow: ", ";\n  box-sizing: border-box;\n"]);
+  var data = _taggedTemplateLiteral(["\n  overflow: ", ";\n  box-sizing: border-box;\n  justify-self: ", ";\n  align-self: ", ";\n  flex-grow: ", ";\n  ", ";\n"]);
 
   _templateObject$3 = function _templateObject() {
     return data;
@@ -6499,27 +6499,39 @@ var ClusterWrapper = styled__default(function (_ref) {
 })(_templateObject$3(), function (_ref2) {
   var overflow = _ref2.overflow;
   return overflow ? "visible" : "hidden";
+}, function (_ref3) {
+  var justifySelf = _ref3.justifySelf;
+  return justifySelf;
+}, function (_ref4) {
+  var alignSelf = _ref4.alignSelf;
+  return alignSelf;
+}, function (_ref5) {
+  var flexGrow = _ref5.flexGrow;
+  return flexGrow;
+}, function (_ref6) {
+  var extraStyles = _ref6.extraStyles;
+  return extraStyles;
 });
-var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref3) {
-  var nowrap = _ref3.nowrap;
+var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref7) {
+  var nowrap = _ref7.nowrap;
   return nowrap ? "nowrap" : "wrap";
-}, function (_ref4) {
-  var justify = _ref4.justify;
+}, function (_ref8) {
+  var justify = _ref8.justify;
   return justify;
-}, function (_ref5) {
-  var align = _ref5.align;
+}, function (_ref9) {
+  var align = _ref9.align;
   return align;
-}, function (_ref6) {
-  var childGap = _ref6.childGap;
+}, function (_ref10) {
+  var childGap = _ref10.childGap;
   return childGap;
-}, function (_ref7) {
-  var minHeight = _ref7.minHeight;
+}, function (_ref11) {
+  var minHeight = _ref11.minHeight;
   return minHeight;
-}, function (_ref8) {
-  var minWidth = _ref8.minWidth;
+}, function (_ref12) {
+  var minWidth = _ref12.minWidth;
   return minWidth;
-}, function (_ref9) {
-  var childGap = _ref9.childGap;
+}, function (_ref13) {
+  var childGap = _ref13.childGap;
   return childGap;
 });
 
@@ -6541,12 +6553,21 @@ var Cluster = function Cluster(_ref) {
       nowrap = _ref.nowrap,
       _ref$overflow = _ref.overflow,
       overflow = _ref$overflow === void 0 ? false : _ref$overflow,
+      justifySelf = _ref.justifySelf,
+      alignSelf = _ref.alignSelf,
+      flexGrow = _ref.flexGrow,
+      extraStyles = _ref.extraStyles,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "children"]);
+      rest = _objectWithoutProperties(_ref, ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "justifySelf", "alignSelf", "flexGrow", "extraStyles", "children"]);
 
   return /*#__PURE__*/React__default.createElement(ClusterWrapper, _extends({
     overflow: overflow
-  }, rest), /*#__PURE__*/React__default.createElement(ClusterInnerWrapper, {
+  }, rest, {
+    justifySelf: justifySelf,
+    alignSelf: alignSelf,
+    flexGrow: flexGrow,
+    extraStyles: extraStyles
+  }), /*#__PURE__*/React__default.createElement(ClusterInnerWrapper, {
     justify: justify,
     align: align,
     childGap: childGap,
@@ -34746,7 +34767,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     key: "header",
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    extraStyles: "z-index: 25;"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
@@ -34771,7 +34793,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     initial: initiallyOpen ? "open" : "closed",
     exit: "closed",
     variants: wrapper,
-    extraStyles: "transform-origin: 100% 0;"
+    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;"
   }, children))));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.2.7-beta.5",
+  "version": "4.2.7-beta.8",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/layouts/Cluster.js

@@ -19,10 +19,21 @@ const Cluster = ({
   minWidth,
   nowrap,
   overflow = false,
+  justifySelf,
+  alignSelf,
+  flexGrow,
+  extraStyles,
   children,
   ...rest
 }) => (
-  <ClusterWrapper overflow={overflow} {...rest}>
+  <ClusterWrapper
+    overflow={overflow}
+    {...rest}
+    justifySelf={justifySelf}
+    alignSelf={alignSelf}
+    flexGrow={flexGrow}
+    extraStyles={extraStyles}
+  >
     <ClusterInnerWrapper
       justify={justify}
       align={align}

package/src/components/atoms/layouts/Cluster.styled.js

@@ -7,6 +7,10 @@ export const ClusterWrapper = styled(({ overflow, ...props }) => (
 ))`
   overflow: ${({ overflow }) => (overflow ? "visible" : "hidden")};
   box-sizing: border-box;
+  justify-self: ${({ justifySelf }) => justifySelf};
+  align-self: ${({ alignSelf }) => alignSelf};
+  flex-grow: ${({ flexGrow }) => flexGrow};
+  ${({ extraStyles }) => extraStyles};
 `;
 
 export const ClusterInnerWrapper = styled.div`

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -79,6 +79,7 @@ const CollapsibleSection = ({
           hoverStyles={`cursor: pointer;`}
           tabIndex="0"
           onKeyDown={handleKeyDown}
+          extraStyles={`z-index: 25;`}
         >
           <Cluster justify="space-between" align="center">
             {customTitle ? (
@@ -113,7 +114,7 @@ const CollapsibleSection = ({
               initial={initiallyOpen ? "open" : "closed"}
               exit="closed"
               variants={wrapper}
-              extraStyles={`transform-origin: 100% 0;`}
+              extraStyles={`transform-origin: 100% 0; overflow-y: hidden;`}
             >
               {children}
             </Motion>