@linzjs/lui 17.43.3 → 17.44.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [17.44.0](https://github.com/linz/lui/compare/v17.43.3...v17.44.0) (2023-03-22)
+
+
+### Features
+
+* **LuiExpandableBanner:** allow initial state as prop ([#898](https://github.com/linz/lui/issues/898)) ([f453a11](https://github.com/linz/lui/commit/f453a115e671d56f238509bbbcf6a6a15d032113))
+
 ## [17.43.3](https://github.com/linz/lui/compare/v17.43.2...v17.43.3) (2023-03-21)
 
 

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

@@ -3,5 +3,6 @@ export interface Expandable {
     className?: string;
     label: ReactNode;
     labelPrefix?: ReactNode;
+    start?: 'collapsed' | 'expanded';
 }
 export declare const LuiExpandableBanner: React.FC<React.PropsWithChildren<Expandable>>;

package/dist/index.js

@@ -13061,55 +13061,17 @@ var LuiMessagingContextProvider = function (props) {
 };
 
 var LuiExpandableBanner = function (props) {
-    var display = React$1.useRef(null);
-    var _a = React$1.useState(true), collapse = _a[0], setCollapse = _a[1];
-    var collapseSection = function (element) {
-        // get the height of the element's inner content, regardless of its actual size
-        var sectionHeight = element.scrollHeight;
-        // on the next frame (as soon as the previous style change has taken effect),
-        // explicitly set the element's height to its current pixel height, so we
-        // aren't transitioning out of 'auto'
-        requestAnimationFrame(function () {
-            element.style.height = sectionHeight + 'px';
-            // on the next frame (as soon as the previous style change has taken effect),
-            // have the element transition to height: 0
-            requestAnimationFrame(function () {
-                element.style.height = 0 + 'px';
-            });
-        });
-        // mark the section as "currently collapsed"
-        setCollapse(true);
-    };
-    var expandSection = function (element) {
-        // get the height of the element's inner content, regardless of its actual size
-        var sectionHeight = element.scrollHeight;
-        // have the element transition to the height of its inner content
-        element.style.height = sectionHeight + 'px';
-        // when the next css transition finishes (which should be the one we just triggered)
-        setTimeout(function () {
-            element.style.height = 'auto';
-        }, 500);
-        // mark the section as "currently not collapsed"
-        setCollapse(false);
-    };
-    var expandFunction = function () {
-        var section = display.current;
-        if (collapse) {
-            expandSection(section);
-        }
-        else {
-            collapseSection(section);
-        }
-    };
+    var initiallyCollapsed = props.start === 'expanded' ? false : true;
+    var _a = React$1.useState(initiallyCollapsed), collapse = _a[0], setCollapse = _a[1];
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: clsx$1('lui-expand-container', props.className) },
             props.labelPrefix,
-            React__default["default"].createElement("div", { className: 'lui-expand-header', onClick: expandFunction, style: { width: '100%' } },
+            React__default["default"].createElement("div", { className: 'lui-expand-header', onClick: function () { return setCollapse(function (prev) { return !prev; }); }, style: { width: '100%' } },
                 React__default["default"].createElement("h3", null, props.label),
                 React__default["default"].createElement("i", { className: clsx$1(collapse
                         ? 'lui-expand-icon material-icons-round'
                         : 'lui-expand-icon material-icons-round lui-expand-icon-transform') }, 'expand_more'))),
-        React__default["default"].createElement("div", { className: 'lui-collapse-text', ref: display }, props.children)));
+        React__default["default"].createElement("div", { style: collapse ? { maxHeight: '0px' } : undefined, className: 'lui-accordion-content' }, props.children)));
 };
 
 /**