@linzjs/lui 20.0.2 → 20.0.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [20.0.3](https://github.com/linz/lui/compare/v20.0.2...v20.0.3) (2023-09-21)
+
+
+### Bug Fixes
+
+* **LuiExpandableBanner:** configure max-height ([#1014](https://github.com/linz/lui/issues/1014)) ([5a291c4](https://github.com/linz/lui/commit/5a291c483488b8abe5a5f0313727a34456719ff7))
+
 ## [20.0.2](https://github.com/linz/lui/compare/v20.0.1...v20.0.2) (2023-09-21)
 
 

package/dist/components/LuiExpandableBanner/LuiExpandableBanner.d.ts

@@ -1,11 +1,19 @@
 import React, { ReactNode } from 'react';
 declare type OverflowType = 'hidden' | 'auto' | 'inherit' | 'overlay' | 'revert' | 'scroll' | 'unset' | 'visible';
+declare type MaxHeight = 'none' | ' max-content' | 'min-content' | string | number;
+declare type ContentMaxHeight = {
+    type: 'calculated';
+} | {
+    type: 'fixed';
+    maxHeight: MaxHeight;
+};
 export interface Expandable {
     className?: string;
     label: ReactNode;
     labelPrefix?: ReactNode;
     start?: 'collapsed' | 'expanded';
     expandedOverflow?: OverflowType;
+    contentMaxHeight?: ContentMaxHeight;
 }
 export declare const LuiExpandableBanner: React.FC<React.PropsWithChildren<Expandable>>;
 export {};

package/dist/index.js

@@ -25689,18 +25689,27 @@ 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 contentMaxHeight = props.contentMaxHeight;
     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 getMaxHeight = React.useCallback(function (_a) {
+        var scrollHeight = _a.scrollHeight;
+        if (contentMaxHeight && contentMaxHeight.type === 'calculated') {
+            return scrollHeight + 'px';
+        }
+        else if (contentMaxHeight && contentMaxHeight.type === 'fixed') {
+            return contentMaxHeight.maxHeight;
+        }
+        else {
+            return Math.max(scrollHeight, 1200) + 'px';
+        }
+    }, [content, props.contentMaxHeight]);
     var _b = React.useState('initial'), maxHeight = _b[0], setMaxHeight = _b[1];
     React.useEffect(function () {
         content.current && setMaxHeight(getMaxHeight(content.current));
-    }, [content]);
+    }, [content, getMaxHeight]);
     var accordionExpandedOverflow = props.expandedOverflow || 'auto';
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: clsx('lui-expand-container', props.className) },