@linzjs/lui 23.6.0 → 23.6.1

package/dist/lui.esm.js

@@ -7188,6 +7188,43 @@ var LuiTextAreaInput = React__default.forwardRef(function (props, ref) {
             props.warning))));
 });
 
+// Example taken from https://codesandbox.io/p/github/philals/auto-size-input/main?file=%2Fsrc%2FApp.tsx%3A54%2C53&import=true&workspaceId=ws_HCohVkSSrGceH2wAjz2JrW
+// Note soon this can be replaced by the new CSS class field-sizing (https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing)h
+var LuiAutoExpandTextAreaInput = function (props) {
+    var _a;
+    var handleInputChange = function (e) {
+        if (props.onChange) {
+            props.onChange(e);
+        }
+        adjustHeight(e.target);
+    };
+    var ref = useRef(null);
+    var adjustHeight = useCallback(function (element) {
+        // Reset height to auto to get proper scrollHeight
+        element.style.height = 'auto';
+        var height = "".concat(element.scrollHeight, "px");
+        // Set the height to match content
+        element.style.height = height;
+    }, []);
+    useEffect(function () {
+        if (ref.current) {
+            adjustHeight(ref.current);
+        }
+    }, [props.value, adjustHeight]); // Re-run when value changes
+    // Since we can't directly use refs, we'll use a custom render approach
+    // We'll handle the auto-resize via the onChange and onKeyUp events
+    var customInputProps = __assign(__assign({}, props.inputProps), { onKeyUp: function (e) {
+            var _a;
+            adjustHeight(e.currentTarget);
+            if ((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.onKeyUp) {
+                props.inputProps.onKeyUp(e);
+            }
+        }, style: __assign({ resize: 'none', overflow: 'hidden', maxHeight: '500px', 
+            // boxSizing: 'border-box',
+            minHeight: '1px' }, (_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.style) });
+    return (React__default.createElement(LuiTextAreaInput, __assign({}, props, { rows: 1, onChange: handleInputChange, inputProps: customInputProps, ref: ref })));
+};
+
 var LuiDateInput = React__default.forwardRef(function (_a, ref) {
     var inputProps = _a.inputProps, rest = __rest(_a, ["inputProps"]);
     var mapped = __assign({ inputProps: __assign(__assign({}, inputProps), { type: 'date' }) }, rest);
@@ -35318,5 +35355,5 @@ var LuiErrorPanel = forwardRef$1(function (props, ref) {
             props.subtext && (React__default.createElement("div", { className: "lui-error-panel-container-subtext", "data-testid": "lui-error-panel-container-subtext" }, props.subtext)))));
 });
 
-export { CheckboxItemRenderer, ColorBucket, ColorInput, ColorInputGroup, ColorPalette, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAlertModalV2, LuiAppFooterSml, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiErrorPanel, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiModalV2, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiPassiveSearchInput, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuDivider, LuiSelectMenuHeader, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, defaultColours, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
+export { CheckboxItemRenderer, ColorBucket, ColorInput, ColorInputGroup, ColorPalette, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAlertModalV2, LuiAppFooterSml, LuiAutoExpandTextAreaInput, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiErrorPanel, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiModalV2, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiPassiveSearchInput, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuDivider, LuiSelectMenuHeader, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, defaultColours, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
 //# sourceMappingURL=lui.esm.js.map