@linzjs/lui 23.4.0 → 23.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [23.6.0](https://github.com/linz/lui/compare/v23.5.0...v23.6.0) (2025-07-07)
+
+
+### Features
+
+* Adds an autoexpanding TextArea. Can be replaced with native CSS in a year ([#1235](https://github.com/linz/lui/issues/1235)) ([8ec3398](https://github.com/linz/lui/commit/8ec33987889a08ef9c9eb9a4aa13c6dbbcad9e5c))
+
+# [23.5.0](https://github.com/linz/lui/compare/v23.4.0...v23.5.0) (2025-07-02)
+
+
+### Features
+
+* SRVTRI-4048 add ref to toolbar button ([#1234](https://github.com/linz/lui/issues/1234)) ([f477328](https://github.com/linz/lui/commit/f4773281b9c5477c8a3fa6058b0368badb33ef00))
+
 # [23.4.0](https://github.com/linz/lui/compare/v23.3.0...v23.4.0) (2025-06-30)
 
 

package/dist/components/LuiFormElements/LuiTextAreaInput/LuiAutoExpandTextAreaInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type LuiTextAreaInputProps } from './LuiTextAreaInput';
+export declare const LuiAutoExpandTextAreaInput: (props: LuiTextAreaInputProps) => JSX.Element;

package/dist/components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, InputHTMLAttributes } from 'react';
+import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
 export interface LuiTextAreaInputProps {
     label: JSX.Element | string;
     mandatory?: boolean;
@@ -7,5 +7,6 @@ export interface LuiTextAreaInputProps {
     value: string;
     error?: string | boolean;
     warning?: string;
+    rows?: number;
 }
-export declare const LuiTextAreaInput: (props: LuiTextAreaInputProps) => JSX.Element;
+export declare const LuiTextAreaInput: React.ForwardRefExoticComponent<LuiTextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/LuiSideToolbar/ToolbarButton.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import 'react-loading-skeleton/dist/skeleton.css';
 import './ToolbarButton.scss';
+import 'react-loading-skeleton/dist/skeleton.css';
+import React from 'react';
 export interface ToolbarButtonProps {
     disabled?: boolean;
     highlighted?: boolean;
@@ -18,4 +18,4 @@ export interface ToolbarButtonProps {
  * @param props
  * @returns
  */
-export declare const ToolbarButton: ({ disabled, highlighted, iconImage, iconName, loading, onClick, panelTitle, panelKey, tooltip, }: ToolbarButtonProps) => JSX.Element;
+export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/index.js

@@ -7198,23 +7198,24 @@ var LuiSelectInput = function (props) {
                 props.warning)))));
 };
 
-var LuiTextAreaInput = function (props) {
+var LuiTextAreaInput = React__default["default"].forwardRef(function (props, ref) {
     var _a, _b;
     var id = useGenerateOrDefaultId((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.id);
+    var rows = props.rows !== undefined ? props.rows : 5;
+    console.log('🚀 ~ rows:', rows);
     return (React__default["default"].createElement("div", { className: clsx('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),
             React__default["default"].createElement("div", { className: "LuiTextAreaInput-wrapper" },
-                ' ',
-                React__default["default"].createElement("textarea", __assign({ id: id, value: props.value, onChange: props.onChange, rows: 5 }, props.inputProps)))),
+                React__default["default"].createElement("textarea", __assign({ id: id, value: props.value, onChange: props.onChange, ref: ref, rows: rows }, 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.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 = React__default["default"].forwardRef(function (_a, ref) {
     var inputProps = _a.inputProps, rest = __rest(_a, ["inputProps"]);
@@ -33716,6 +33717,9 @@ function LuiSideToolbar(props) {
     return (React__default["default"].createElement("div", { className: clsx(['Toolbar', 'app--shadow-sm', props.direction]), "data-testid": "toolbar" }, props.children));
 }
 
+var css_248z$c = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToolbarButton {\n  height: 40px;\n  width: 40px;\n  line-height: 12px;\n  margin: 2px;\n  padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ToolbarButton img {\n  border-radius: 3px;\n  margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n  border-radius: 5px;\n  border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n  height: 2px;\n  background-color: #eaeaea;\n  width: 100%;\n}";
+styleInject(css_248z$c);
+
 /**
  * Show LuiIcon or Image.
  *
@@ -33727,24 +33731,21 @@ var ToolbarIcon = function (_a) {
     return iconImage ? (React__default["default"].createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default["default"].createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
 };
 
-var css_248z$c = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToolbarButton {\n  height: 40px;\n  width: 40px;\n  line-height: 12px;\n  margin: 2px;\n  padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ToolbarButton img {\n  border-radius: 3px;\n  margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n  border-radius: 5px;\n  border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n  height: 2px;\n  background-color: #eaeaea;\n  width: 100%;\n}";
-styleInject(css_248z$c);
-
 /**
  * Create button for using either LuiIcon or Image.
  *
  * @param props
  * @returns
  */
-var ToolbarButton = function (_a) {
+var ToolbarButton = React.forwardRef(function ToolbarButton(_a, ref) {
     var disabled = _a.disabled, highlighted = _a.highlighted, iconImage = _a.iconImage, iconName = _a.iconName, loading = _a.loading, onClick = _a.onClick, panelTitle = _a.panelTitle, panelKey = _a.panelKey, tooltip = _a.tooltip;
     if (loading) {
         return React__default["default"].createElement(Skeleton, { className: "ToolbarButton", height: 40, width: 40 });
     }
-    var button = (React__default["default"].createElement("button", { className: "".concat(highlighted ? 'lui-button-primary' : 'lui-button-secondary', " ToolbarButton ToolbarButton-placement"), "data-testid": "ToolbarButton-".concat(panelKey), disabled: disabled, onClick: onClick, title: panelTitle, type: "button" },
+    var button = (React__default["default"].createElement("button", { ref: ref, className: "".concat(highlighted ? 'lui-button-primary' : 'lui-button-secondary', " ToolbarButton ToolbarButton-placement"), "data-testid": "ToolbarButton-".concat(panelKey), disabled: disabled, onClick: onClick, title: panelTitle, type: "button" },
         React__default["default"].createElement(ToolbarIcon, { iconImage: iconImage, iconName: iconName })));
-    return tooltip ? (React__default["default"].createElement(LuiTooltip, { placement: "auto", message: tooltip }, button)) : (React__default["default"].createElement(React__default["default"].Fragment, null, button));
-};
+    return tooltip ? (React__default["default"].createElement(LuiTooltip, { placement: "auto", content: tooltip }, button)) : (React__default["default"].createElement(React__default["default"].Fragment, null, button));
+});
 
 /**
  * Allows any item to be added into the toolbar (with appropriate styles and size)