@linzjs/lui 17.4.0 → 17.5.2

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [17.5.2](https://github.com/linz/lui/compare/v17.5.1...v17.5.2) (2022-06-02)
+
+
+### Bug Fixes
+
+* clear search input after search type changed. ([#692](https://github.com/linz/lui/issues/692)) ([9c4138c](https://github.com/linz/lui/commit/9c4138c335b92788cb8e3420fdcc45a6d3f80658))
+
+## [17.5.1](https://github.com/linz/lui/compare/v17.5.0...v17.5.1) (2022-06-01)
+
+
+### Bug Fixes
+
+* Release for LuiSearchBox change. ([#691](https://github.com/linz/lui/issues/691)) ([b449ab8](https://github.com/linz/lui/commit/b449ab8488bc232570ae496405d464207adebfdf))
+
+# [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/README.md

@@ -50,4 +50,3 @@ There is lots to do in this project, often things will be left until there is de
 Storybook is the main source of documentation.
 
 - [Lui Storybook](https://linz.github.io/Lui/)
-

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

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react';
 import { LuiButtonProps } from '../LuiButton/LuiButton';
 import { ISearchResult, ISearchGroupedResult } from '../LuiSearchInput/LuiSearchInput';
 export interface ISearchMenuOption {
+    name?: string;
     groupTitle?: string;
     groupDivider?: boolean;
     value: string;

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

@@ -55910,6 +55910,10 @@ var LuiSearchInput = function (props) {
     var _e = React.useState(false), isLoading = _e[0], setIsLoading = _e[1];
     var inputRef = React.useRef(null);
     var selectedRef = React.useRef(null);
+    //clear result after search types changed
+    React.useEffect(function () {
+        setResults([]);
+    }, [props.getOptions]);
     function setInputValue(value) {
         setTypedValue(props.inputTransformer ? props.inputTransformer(value) : value);
     }
@@ -56014,6 +56018,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 +56045,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["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 &&
+            !isLoading &&
+            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)))));
@@ -56059,7 +56089,7 @@ var LuiSearchBox = function (_a) {
     return (React__default["default"].createElement("div", { className: "LuiSearchBox" },
         React__default["default"].createElement(LuiSelectMenu, { menuButton: React__default["default"].createElement(LuiSearchBoxButton, null, selectedMenuOption.title) }, renderSelectMenu(searchBoxOptions, handleMenuSelected)),
         React__default["default"].createElement("div", { className: "LuiSearchBox-right" },
-            React__default["default"].createElement(LuiSearchInput, { minCharactersForSearch: 2, placeholderText: selectedMenuOption.placeholderText, getOptions: selectedMenuOption.getOption, onSelectOption: selectedMenuOption.onSelectOption, renderItem: selectedMenuOption.renderItem
+            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$1 }, item.description);
@@ -56112,6 +56142,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,