@linzjs/lui 20.0.1 → 20.0.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Bug Fixes
+
+* **LuiExpandableBanner:** configure overflow ([#1013](https://github.com/linz/lui/issues/1013)) ([da054c2](https://github.com/linz/lui/commit/da054c25aa9b0ae194a03c019f4249164823abd5))
+
 ## [20.0.1](https://github.com/linz/lui/compare/v20.0.0...v20.0.1) (2023-09-20)
 
 

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

@@ -1,8 +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,28 @@ 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) },
             props.labelPrefix,
@@ -25716,7 +25726,7 @@ var LuiExpandableBanner = function (props) {
                         : 'lui-expand-icon material-icons-round lui-expand-icon-transform') }, 'expand_more'))),
         React__default["default"].createElement("div", { className: "lui-accordion-content", style: {
                 maxHeight: collapse ? '0px' : maxHeight,
-                overflow: collapse ? 'hidden' : 'auto'
+                overflow: collapse ? 'hidden' : accordionExpandedOverflow
             }, onTransitionEnd: function (e) { return setMaxHeight(getMaxHeight(e.currentTarget)); }, ref: content }, props.children)));
 };