@linzjs/lui 17.4.0 → 17.5.2

package/dist/lui.esm.js

@@ -55882,6 +55882,10 @@ var LuiSearchInput = function (props) {
     var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
     var inputRef = useRef(null);
     var selectedRef = useRef(null);
+    //clear result after search types changed
+    useEffect(function () {
+        setResults([]);
+    }, [props.getOptions]);
     function setInputValue(value) {
         setTypedValue(props.inputTransformer ? props.inputTransformer(value) : value);
     }
@@ -55986,6 +55990,25 @@ var LuiSearchInput = function (props) {
             },
         } })) : null;
     var searchIcon = (React__default.createElement(LuiIcon, { className: 'LuiSearchInput-startIconPosition', name: "ic_search", size: "md", alt: "search", spanProps: { onClick: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } } }));
+    var typeMore = 'You need to type a few more characters';
+    function enoughChars(input) {
+        if (typeof props.minCharactersForSearch === 'number')
+            return input.length >= props.minCharactersForSearch;
+        else
+            return false;
+    }
+    function noOptionsMessage(inputValue) {
+        if (inputValue === '') {
+            return null;
+        }
+        if (!enoughChars(inputValue)) {
+            return typeMore;
+        }
+        if (props.name)
+            return "The " + props.name + " could not be displayed or does not exist.";
+        else
+            return null;
+    }
     return (React__default.createElement("div", { className: "LuiSearchInput" },
         React__default.createElement("span", { className: "LuiSearchInput-inputWrapper" },
             searchIcon,
@@ -55994,10 +56017,17 @@ var LuiSearchInput = function (props) {
                     setHaveFocus(true);
                 }, 
                 // This timeout could be a little brittle but allows the menu to stay open long enough to click it
-                onBlur: function () { return setTimeout(function () { return setHaveFocus(false); }, 100); } }),
+                onBlur: function () { return setTimeout(function () { return setHaveFocus(false); }, 200); } }),
             cancelIcon),
         (isLoading || results.length > 0) && haveFocus && (React__default.createElement("div", null,
             React__default.createElement(ResultsDisplay, { results: results, selectedId: selectedId, setSelectedId: setSelectedId, selectedRef: selectedRef, onClick: selectItem, isLoading: isLoading, renderItem: props.renderItem }))),
+        props.name &&
+            haveFocus &&
+            results.length === 0 &&
+            !isLoading &&
+            noOptionsMessage(typedValue) && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
+            React__default.createElement("div", { "data-testid": "no-result-msg", className: "LuiSearchInput-disclaimer" }, noOptionsMessage(typedValue)))),
         props.disclaimer && haveFocus && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
             React__default.createElement("div", { "data-testid": "disclaimer", className: "LuiSearchInput-disclaimer" }, props.disclaimer)))));
@@ -56031,7 +56061,7 @@ var LuiSearchBox = function (_a) {
     return (React__default.createElement("div", { className: "LuiSearchBox" },
         React__default.createElement(LuiSelectMenu, { menuButton: React__default.createElement(LuiSearchBoxButton, null, selectedMenuOption.title) }, renderSelectMenu(searchBoxOptions, handleMenuSelected)),
         React__default.createElement("div", { className: "LuiSearchBox-right" },
-            React__default.createElement(LuiSearchInput, { minCharactersForSearch: 2, placeholderText: selectedMenuOption.placeholderText, getOptions: selectedMenuOption.getOption, onSelectOption: selectedMenuOption.onSelectOption, renderItem: selectedMenuOption.renderItem
+            React__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.createElement("span", { style: resultStyle$1 }, item.description);
@@ -56084,6 +56114,7 @@ var searchBoxOptions = [
         groupTitle: 'Title',
         value: 'address',
         title: 'Address',
+        name: 'address',
         placeholderText: 'Enter a place, street or address. e.g. Newlands',
         disclaimer: 'This is a default disclaimer, add your own search options',
         getOption: getDefaultOptions,