@linzjs/lui 21.53.0 → 21.53.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [21.53.1](https://github.com/linz/lui/compare/v21.53.0...v21.53.1) (2024-11-11)
+
+
+### Bug Fixes
+
+* **searchbox:** style padding for passive search input ([#1170](https://github.com/linz/lui/issues/1170)) ([1854c9f](https://github.com/linz/lui/commit/1854c9f46da1d42a189f7cbd1e2b6a77e2a02e79))
+
 # [21.53.0](https://github.com/linz/lui/compare/v21.52.0...v21.53.0) (2024-11-04)
 
 

package/dist/components/LuiSearchBox/LuiSearchBox.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import { LuiButtonProps } from '../LuiButton/LuiButton';
 import { ISearchGroupedResult, ISearchResult } from '../LuiSearchInput/ResultsDisplay';
+import { InputValidationResult } from '../LuiSearchInput/LuiPassiveSearchInput';
 export interface ISearchMenuOption {
     name?: string;
     groupTitle?: string | ReactElement;
@@ -14,6 +15,13 @@ export interface ISearchMenuOption {
     renderItem?: (item: any) => ReactElement;
     icon?: ReactElement;
     columnBreak?: boolean;
+    onSearch?: (searchString: string) => void;
+    validateInput?: (input: string) => InputValidationResult | undefined;
+    /**
+     * @deprecated customizedInput was designed to enhance search box input component diversity.
+     * But considering to keep the input memory be consistent among all the input components,
+     * uncontrolled customized components are hard to be coordinated.
+     */
     customizedInput?: React.ReactElement;
 }
 export interface ILuiSearchBoxProps {

package/dist/components/LuiSearchInput/LuiPassiveSearchInput.d.ts

@@ -16,4 +16,13 @@ export interface IPassiveSearchInputProps {
     onClickInput?: () => void;
     validateInput?: (input: string) => InputValidationResult | undefined;
 }
+export declare const ControlledPassiveSearchInputComponent: (props: IPassiveSearchInputProps & {
+    typedValue: string;
+    setTypedValue: (value: string) => void;
+}) => JSX.Element;
+/**
+ * @deprecated This was created for client to easily customize the passive input component.
+ * But that is hard to keep input memory to be consistent with other input components.
+ * Has extracted the controlled version and let LuiSearchInput to align the input value.
+ */
 export declare const LuiPassiveSearchInput: (props: React.PropsWithChildren<IPassiveSearchInputProps>) => JSX.Element;

package/dist/components/LuiSearchInput/LuiSearchInput.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { ISearchGroupedResult, ISearchResult } from './ResultsDisplay';
+import { InputValidationResult } from './LuiPassiveSearchInput';
 export interface ISearchInputProps<SearchResult extends ISearchResult = ISearchResult> {
     minCharactersForSearch: number;
     placeholderText: string;
@@ -15,5 +16,7 @@ export interface ISearchInputProps<SearchResult extends ISearchResult = ISearchR
     onClearCallback?: () => void;
     onClickInput?: () => void;
     externalSearch?: boolean;
+    onSearch?: (searchString: string) => void;
+    validateInput?: (input: string) => InputValidationResult | undefined;
 }
 export declare const LuiSearchInput: <SearchResult extends ISearchResult = ISearchResult>(props: React.PropsWithChildren<ISearchInputProps<SearchResult>>) => JSX.Element;

package/dist/index.js

@@ -42490,6 +42490,67 @@ var ResultsDisplay = function (_a) {
         children));
 };
 
+var ControlledPassiveSearchInputComponent = function (props) {
+    var _a = React.useState(), inputValidationResult = _a[0], setInputValidationResult = _a[1];
+    var inputRef = React.useRef(null);
+    var typedValue = props.typedValue, setTypedValue = props.setTypedValue;
+    // set focus to input box
+    React.useEffect(function () {
+        var _a;
+        if (props.focusUpdate !== undefined)
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [props.focusUpdate]);
+    // validate input
+    React.useEffect(function () {
+        setInputValidationResult((props.validateInput && props.validateInput(typedValue)) || undefined);
+    }, [typedValue]);
+    function setInputValue(value) {
+        setTypedValue(props.inputTransformer ? props.inputTransformer(value) : value);
+    }
+    function handleKeyDown(event) {
+        switch (event.key) {
+            case 'Enter':
+                if (inputValidationResult &&
+                    inputValidationResult.stopProgress === true)
+                    return;
+                props.onSearch(typedValue);
+        }
+    }
+    var cancelIcon = typedValue !== '' ? (React__default["default"].createElement(LuiIcon, { alt: "clear", name: "ic_cancel_clear", size: "md", color: '#6b6966', spanProps: {
+            onClick: function () {
+                var _a;
+                setInputValue('');
+                (_a = props.onClearCallback) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+        } })) : null;
+    var searchIcon = typedValue === '' || (inputValidationResult === null || inputValidationResult === void 0 ? void 0 : inputValidationResult.stopProgress) === true ? (React__default["default"].createElement("div", { className: "LuiSearchInput-search-button-disabled" },
+        React__default["default"].createElement(LuiIcon, { name: "ic_search", size: "md", alt: "search", color: '#989189' }))) : (React__default["default"].createElement("div", { onClick: function () { return props.onSearch(typedValue); }, className: "LuiSearchInput-search-button" },
+        React__default["default"].createElement(LuiIcon, { name: "ic_search", size: "md", alt: "search", color: '#FFFFFF' })));
+    return (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
+        React__default["default"].createElement("span", { className: "LuiSearchInput-inputWrapper" },
+            React__default["default"].createElement("input", { type: "text", className: clsx('LuiSearchPassiveInput-input'), ref: inputRef, value: typedValue, placeholder: props.placeholderText, "aria-label": "Search", onChange: function (e) { return setInputValue(e.target.value); }, onKeyDown: handleKeyDown, onFocus: function (e) {
+                    e.target.select();
+                }, style: { pointerEvents: 'auto' } }),
+            React__default["default"].createElement("div", { className: "LuiSearchPassiveInput-buttons-panel" },
+                cancelIcon,
+                searchIcon)),
+        inputValidationResult && inputValidationResult.userMessage && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
+            React__default["default"].createElement("div", { "data-testid": "no-result-msg", className: "LuiSearchInput-disclaimer" }, inputValidationResult.userMessage))),
+        props.disclaimer && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
+            React__default["default"].createElement("div", { "data-testid": "disclaimer", className: "LuiSearchInput-disclaimer" }, props.disclaimer)))));
+};
+/**
+ * @deprecated This was created for client to easily customize the passive input component.
+ * But that is hard to keep input memory to be consistent with other input components.
+ * Has extracted the controlled version and let LuiSearchInput to align the input value.
+ */
+var LuiPassiveSearchInput = function (props) {
+    var _a = React.useState(props.initialValue ? props.initialValue : ''), typedValue = _a[0], setTypedValue = _a[1];
+    return (React__default["default"].createElement(ControlledPassiveSearchInputComponent, __assign({ typedValue: typedValue, setTypedValue: setTypedValue }, props)));
+};
+
 function flatten(items) {
     if (isGroupedResult(items)) {
         return items.flatMap(function (item) { return item.items; });
@@ -42663,7 +42724,7 @@ var LuiSearchInput = function (props) {
         else
             return null;
     }
-    return (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
+    return props.onSearch ? (React__default["default"].createElement(ControlledPassiveSearchInputComponent, __assign({ typedValue: typedValue, setTypedValue: setTypedValue }, props, { minCharactersForSearch: props.minCharactersForSearch, placeholderText: props.placeholderText, onSearch: props.onSearch, disclaimer: props.disclaimer, initialValue: props.initialValue, inputTransformer: props.inputTransformer, focusUpdate: props.focusUpdate, onClearCallback: props.onClearCallback, onClickInput: props.onClickInput, validateInput: props.validateInput }))) : (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
         React__default["default"].createElement("span", { className: "LuiSearchInput-inputWrapper" },
             searchIcon,
             React__default["default"].createElement("input", { type: "text", className: clsx('LuiSearchInput-input'), ref: inputRef, value: typedValue, placeholder: props.placeholderText, "aria-label": "Search", onChange: function (e) { return setInputValue(e.target.value); }, onKeyDown: handleKeyDown, onFocus: function (e) {
@@ -42688,64 +42749,6 @@ var LuiSearchInput = function (props) {
             React__default["default"].createElement("div", { "data-testid": "disclaimer", className: "LuiSearchInput-disclaimer" }, props.disclaimer)))));
 };
 
-var LuiPassiveSearchInput = function (props) {
-    var _a = React.useState(props.initialValue ? props.initialValue : ''), typedValue = _a[0], setTypedValue = _a[1];
-    var _b = React.useState(), inputValidationResult = _b[0], setInputValidationResult = _b[1];
-    var inputRef = React.useRef(null);
-    // set focus to input box
-    React.useEffect(function () {
-        var _a;
-        if (props.focusUpdate !== undefined)
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [props.focusUpdate]);
-    // validate input
-    React.useEffect(function () {
-        setInputValidationResult((props.validateInput && props.validateInput(typedValue)) || undefined);
-    }, [typedValue]);
-    function setInputValue(value) {
-        setTypedValue(props.inputTransformer ? props.inputTransformer(value) : value);
-    }
-    function handleKeyDown(event) {
-        switch (event.key) {
-            case 'Enter':
-                if (inputValidationResult &&
-                    inputValidationResult.stopProgress === true)
-                    return;
-                props.onSearch(typedValue);
-        }
-    }
-    var cancelIcon = typedValue !== '' ? (React__default["default"].createElement(LuiIcon, { alt: "clear", name: "ic_cancel_clear", size: "md", color: '#6b6966', spanProps: {
-            onClick: function () {
-                var _a;
-                setInputValue('');
-                (_a = props.onClearCallback) === null || _a === void 0 ? void 0 : _a.call(props);
-            }
-        } })) : null;
-    var searchIcon = typedValue === '' || (inputValidationResult === null || inputValidationResult === void 0 ? void 0 : inputValidationResult.stopProgress) === true ? (React__default["default"].createElement("div", { className: "LuiSearchInput-search-button-disabled" },
-        React__default["default"].createElement(LuiIcon, { name: "ic_search", size: "md", alt: "search", color: '#989189' }))) : (React__default["default"].createElement("div", { onClick: function () { return props.onSearch(typedValue); }, className: "LuiSearchInput-search-button" },
-        React__default["default"].createElement(LuiIcon, { name: "ic_search", size: "md", alt: "search", color: '#FFFFFF' })));
-    return (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
-        React__default["default"].createElement("span", { className: "LuiSearchInput-inputWrapper" },
-            React__default["default"].createElement("input", { type: "text", className: clsx('LuiSearchInput-input'), ref: inputRef, value: typedValue, placeholder: props.placeholderText, "aria-label": "Search", onChange: function (e) { return setInputValue(e.target.value); }, onKeyDown: handleKeyDown, onFocus: function (e) {
-                    e.target.select();
-                }, style: { pointerEvents: 'auto' } }),
-            React__default["default"].createElement("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    paddingRight: '8px',
-                    gap: '14px',
-                    alignItems: 'center'
-                } },
-                cancelIcon,
-                searchIcon)),
-        inputValidationResult && inputValidationResult.userMessage && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
-            React__default["default"].createElement("div", { "data-testid": "no-result-msg", className: "LuiSearchInput-disclaimer" }, inputValidationResult.userMessage))),
-        props.disclaimer && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
-            React__default["default"].createElement("div", { "data-testid": "disclaimer", className: "LuiSearchInput-disclaimer" }, props.disclaimer)))));
-};
-
 var resultStyle = { verticalAlign: 'middle' };
 /**
  *  LuiSearchBox is a search input with select menu.
@@ -42823,7 +42826,7 @@ var LuiSearchBox = function (_a) {
                 ? selectedMenuOption.renderItem
                 : function (item) {
                     return React__default["default"].createElement("span", { style: resultStyle }, item.description);
-                }, disclaimer: selectedMenuOption.disclaimer, focusUpdate: autoFocus && isFocus ? focusUpdate : undefined, externalSearch: externalSearch, initialValue: !!externalSearch ? searchString : undefined, onClickInput: onClickInput, onClearCallback: onClearInput })))));
+                }, disclaimer: selectedMenuOption.disclaimer, focusUpdate: autoFocus && isFocus ? focusUpdate : undefined, externalSearch: externalSearch, initialValue: !!externalSearch ? searchString : undefined, onClickInput: onClickInput, onClearCallback: onClearInput, onSearch: selectedMenuOption.onSearch, validateInput: selectedMenuOption.validateInput })))));
 };
 var LuiSearchBoxButton = React__default["default"].forwardRef(function (props, ref) {
     var button = React.useMemo(function () {