@linzjs/lui 18.5.0 → 18.5.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [18.5.1](https://github.com/linz/lui/compare/v18.5.0...v18.5.1) (2023-08-13)
+
+
+### Bug Fixes
+
+* **LuiExpandableBanner:** fix height limit ([#983](https://github.com/linz/lui/issues/983)) ([a9d8fea](https://github.com/linz/lui/commit/a9d8feade76359f001acbcf43e2835ef1d08ee43))
+
 # [18.5.0](https://github.com/linz/lui/compare/v18.4.5...v18.5.0) (2023-08-09)
 
 

package/dist/index.js

@@ -25675,18 +25675,35 @@ var LuiMessagingContextProvider = function (props) {
         props.children));
 };
 
+var getMaxHeight = function (_a) {
+    var scrollHeight = _a.scrollHeight;
+    return Math.max(scrollHeight, 1200) + 'px';
+};
 var LuiExpandableBanner = function (props) {
-    var initiallyCollapsed = props.start === 'expanded' ? false : true;
-    var _a = React.useState(initiallyCollapsed), collapse = _a[0], setCollapse = _a[1];
+    var initiallyCollapsed = React.useRef(props.start === 'expanded' ? false : true);
+    var _a = React.useState(initiallyCollapsed.current), collapse = _a[0], setCollapse = _a[1];
+    var content = React.useRef(null);
+    var _b = React.useState('initial'), maxHeight = _b[0], setMaxHeight = _b[1];
+    React.useEffect(function () {
+        content.current && setMaxHeight(getMaxHeight(content.current));
+    }, [content]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: clsx('lui-expand-container', props.className) },
             props.labelPrefix,
-            React__default["default"].createElement("div", { className: 'lui-expand-header', onClick: function () { return setCollapse(function (prev) { return !prev; }); }, style: { width: '100%' } },
+            React__default["default"].createElement("div", { className: 'lui-expand-header', onClick: function () {
+                    setCollapse(function (prev) { return !prev; });
+                    if (content.current) {
+                        setMaxHeight(getMaxHeight(content.current));
+                    }
+                }, style: { width: '100%' } },
                 React__default["default"].createElement("h3", null, props.label),
                 React__default["default"].createElement("i", { className: clsx(collapse
                         ? 'lui-expand-icon material-icons-round'
                         : 'lui-expand-icon material-icons-round lui-expand-icon-transform') }, 'expand_more'))),
-        React__default["default"].createElement("div", { style: collapse ? { maxHeight: '0px' } : undefined, className: 'lui-accordion-content' }, props.children)));
+        React__default["default"].createElement("div", { className: "lui-accordion-content", style: {
+                maxHeight: collapse ? '0px' : maxHeight,
+                overflow: collapse ? 'hidden' : 'auto'
+            }, onTransitionEnd: function (e) { return setMaxHeight(getMaxHeight(e.currentTarget)); }, ref: content }, props.children)));
 };
 
 /**