@linzjs/lui 17.4.0 → 17.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [17.5.0](https://github.com/linz/lui/compare/v17.4.0...v17.5.0) (2022-06-01)
+
+
+### Features
+
+* **LuiSearchInput:** Add no result message to LuiSearchInput component. ([#689](https://github.com/linz/lui/issues/689)) ([f7d23c3](https://github.com/linz/lui/commit/f7d23c3107c8a87db179fb869c43537b7d634c05))
+
 # [17.4.0](https://github.com/linz/lui/compare/v17.3.3...v17.4.0) (2022-06-01)
 
 

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

@@ -19,6 +19,7 @@ export interface ISearchInputProps {
     disclaimer?: string;
     initialValue?: string;
     inputTransformer?: (input: string) => string;
+    name?: string;
 }
 export declare function isGroupedResult(result: ISearchResult[] | ISearchGroupedResult[]): result is ISearchGroupedResult[];
 export declare const LuiSearchInput: React.FC<ISearchInputProps>;

package/dist/index.js

@@ -56014,6 +56014,25 @@ var LuiSearchInput = function (props) {
             },
         } })) : null;
     var searchIcon = (React__default["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["default"].createElement("div", { className: "LuiSearchInput" },
         React__default["default"].createElement("span", { className: "LuiSearchInput-inputWrapper" },
             searchIcon,
@@ -56022,10 +56041,16 @@ 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["default"].createElement("div", null,
             React__default["default"].createElement(ResultsDisplay, { results: results, selectedId: selectedId, setSelectedId: setSelectedId, selectedRef: selectedRef, onClick: selectItem, isLoading: isLoading, renderItem: props.renderItem }))),
+        props.name &&
+            haveFocus &&
+            results.length === 0 &&
+            noOptionsMessage(typedValue) && (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" }, noOptionsMessage(typedValue)))),
         props.disclaimer && haveFocus && (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)))));