@linzjs/lui 17.43.3 → 17.45.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [17.45.0](https://github.com/linz/lui/compare/v17.44.0...v17.45.0) (2023-03-22)
+
+
+### Features
+
+* **LuiTextAreaInput:** Add warning message support for LuiTextAreaInput ([#901](https://github.com/linz/lui/issues/901)) ([296206d](https://github.com/linz/lui/commit/296206d7d07ec2f1d6b4953668117306110252aa))
+
+# [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/components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.d.ts

@@ -6,5 +6,6 @@ export interface LuiTextAreaInputProps {
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
     value: string;
     error?: string | boolean;
+    warning?: string;
 }
 export declare const LuiTextAreaInput: (props: LuiTextAreaInputProps) => JSX.Element;

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)));
 };
 
 /**
@@ -15816,7 +15778,7 @@ var LuiSelectInput = function (props) {
 var LuiTextAreaInput = function (props) {
     var _a, _b;
     var id = useGenerateOrDefaultId((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.id);
-    return (React__default["default"].createElement("div", { className: clsx$1('LuiTextAreaInput', ((_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.disabled) ? 'isDisabled' : '', (props === null || props === void 0 ? void 0 : props.error) ? 'hasError' : '') },
+    return (React__default["default"].createElement("div", { className: clsx$1('LuiTextAreaInput', ((_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.disabled) ? 'isDisabled' : '', props.error ? 'hasError' : '', props.warning ? 'hasWarning' : '') },
         React__default["default"].createElement("label", { htmlFor: id },
             props.mandatory && (React__default["default"].createElement("span", { className: "LuiTextAreaInput-mandatory" }, "*")),
             React__default["default"].createElement("span", { className: "LuiTextAreaInput-label" }, props.label),
@@ -15825,7 +15787,10 @@ var LuiTextAreaInput = function (props) {
                 React__default["default"].createElement("textarea", __assign$3({ id: id, value: props.value, onChange: props.onChange, rows: 5 }, props.inputProps)))),
         props.error && (React__default["default"].createElement("span", { className: "LuiTextAreaInput-error" },
             React__default["default"].createElement(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextAreaInput-error-icon", size: "sm", status: "error" }),
-            props.error))));
+            props.error)),
+        props.warning && (React__default["default"].createElement("span", { className: "LuiTextAreaInput-warning" },
+            React__default["default"].createElement(LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextAreaInput-warning-icon", size: "sm", status: "warning" }),
+            props.warning))));
 };
 
 var LuiDateInput = function (_a) {