@linzjs/lui 21.49.0 → 21.50.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [21.50.0](https://github.com/linz/lui/compare/v21.49.0...v21.50.0) (2024-10-18)
+
+
+### Features
+
+* empty commit to release customized search input ([#1165](https://github.com/linz/lui/issues/1165)) ([d54a410](https://github.com/linz/lui/commit/d54a41024fabb92d2f805c78a507c160f601b665))
+
 # [21.49.0](https://github.com/linz/lui/compare/v21.48.1...v21.49.0) (2024-10-16)
 
 

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

@@ -14,6 +14,7 @@ export interface ISearchMenuOption {
     renderItem?: (item: any) => ReactElement;
     icon?: ReactElement;
     columnBreak?: boolean;
+    customizedInput?: React.ReactElement;
 }
 export interface ILuiSearchBoxProps {
     searchBoxOptions: ISearchMenuOption[];

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import 'react-loading-skeleton/dist/skeleton.css';
+export interface InputValidationResult {
+    stopProgress: boolean;
+    userMessage?: React.ReactNode;
+}
+export interface IPassiveSearchInputProps {
+    minCharactersForSearch: number;
+    placeholderText: string;
+    onSearch: (searchString: string) => void;
+    disclaimer?: string;
+    initialValue?: string;
+    inputTransformer?: (input: string) => string;
+    focusUpdate?: boolean;
+    onClearCallback?: () => void;
+    onClickInput?: () => void;
+    validateInput?: (input: string) => InputValidationResult | undefined;
+}
+export declare const LuiPassiveSearchInput: (props: React.PropsWithChildren<IPassiveSearchInputProps>) => JSX.Element;

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export { LuiModal, LuiAlertModal, LuiAlertModalButtons, } from './components/Lui
 export { LuiModalV2, type LuiModalV2Props, } from './components/LuiModal/LuiModalV2';
 export { LuiAlertModalV2, type LuiAlertModalLevel, type LuiAlertModalV2Props, } from './components/LuiModal/LuiAlertModalV2';
 export { type ISearchInputProps, LuiSearchInput, } from './components/LuiSearchInput/LuiSearchInput';
+export { type IPassiveSearchInputProps, type InputValidationResult, LuiPassiveSearchInput, } from './components/LuiSearchInput/LuiPassiveSearchInput';
 export { type ISearchGroupedResult, type ISearchResult, } from './components/LuiSearchInput/ResultsDisplay';
 export { type ISearchMenuOption, type ILuiSearchBoxProps, LuiSearchBox, } from './components/LuiSearchBox/LuiSearchBox';
 export { type ILuiSplitButtonProps, type ILuiSplitButtonMenuItemProps, LuiSplitButtonPosition, LuiSplitButtonMenuItem, LuiSplitButton, } from './components/LuiSplitButton/LuiSplitButton';

package/dist/index.js

@@ -42685,6 +42685,64 @@ 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.
@@ -42758,12 +42816,11 @@ var LuiSearchBox = function (_a) {
         React__default["default"].createElement("div", { className: clsx({
                 'LuiSearchBox-right': true,
                 'LuiSearchBox-right-stacked': showStacked
-            }) },
-            React__default["default"].createElement(LuiSearchInput, { name: selectedMenuOption.name ? selectedMenuOption.name : undefined, minCharactersForSearch: 2, placeholderText: selectedMenuOption.placeholderText, getOptions: selectedMenuOption.getOption, onSelectOption: selectedMenuOption.onSelectOption, renderItem: selectedMenuOption.renderItem
-                    ? 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 }))));
+            }) }, selectedMenuOption.customizedInput ? (selectedMenuOption.customizedInput) : (React__default["default"].createElement(LuiSearchInput, { name: selectedMenuOption.name ? selectedMenuOption.name : undefined, minCharactersForSearch: 2, placeholderText: selectedMenuOption.placeholderText, getOptions: selectedMenuOption.getOption, onSelectOption: selectedMenuOption.onSelectOption, renderItem: selectedMenuOption.renderItem
+                ? 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 })))));
 };
 var LuiSearchBoxButton = React__default["default"].forwardRef(function (props, ref) {
     var button = React.useMemo(function () {
@@ -60060,6 +60117,7 @@ exports.LuiMoneyInput = LuiMoneyInput;
 exports.LuiMultiSwitch = LuiMultiSwitch;
 exports.LuiMultiSwitchYesNo = LuiMultiSwitchYesNo;
 exports.LuiPagination = LuiPagination;
+exports.LuiPassiveSearchInput = LuiPassiveSearchInput;
 exports.LuiProgressBar = LuiProgressBar;
 exports.LuiRadioInput = LuiRadioInput;
 exports.LuiResizableLayout = LuiResizableLayout;