@linzjs/lui 17.5.0 → 17.5.3

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [17.5.3](https://github.com/linz/lui/compare/v17.5.2...v17.5.3) (2022-06-13)
+
+
+### Bug Fixes
+
+* **LuiSearchInput:** trigger dataload when focused. ([#695](https://github.com/linz/lui/issues/695)) ([e87b3a9](https://github.com/linz/lui/commit/e87b3a9298a10d1b0bc2441c8e94f520e481167f))
+* Adding balance parcel and vector sequence ([#693](https://github.com/linz/lui/issues/693)) ([c88f18b](https://github.com/linz/lui/commit/c88f18b9d74a806198287f9a3f418880ad7a0df3))
+
+## [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)
 
 

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/assets/icons/balance_parcel.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23 15h-2v2h2v-2Zm0-4h-2v2h2v-2Zm0 8h-2v2c1 0 2-1 2-2ZM15 3h-2v2h2V3Zm8 4h-2v2h2V7Zm-2-4v2h2c0-1-1-2-2-2ZM3 21h8v-6H1v4c0 1.1.9 2 2 2ZM3 7H1v2h2V7Zm12 12h-2v2h2v-2Zm4-16h-2v2h2V3Zm0 16h-2v2h2v-2ZM3 3C2 3 1 4 1 5h2V3Zm0 8H1v2h2v-2Zm8-8H9v2h2V3ZM7 3H5v2h2V3Z" fill="#000"/></svg>

package/dist/assets/icons/vector_sequence.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 21h2v-2h-2v2Zm4 0h2v-2h-2v2ZM7 21h2v-2H7v2Zm4 0h2v-2h-2v2Zm8-4h2v-2h-2v2Zm0-4h2v-2h-2v2ZM3 5v15c0 .55.45 1 1 1s1-.45 1-1V6c0-.55.45-1 1-1h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.1 0-2 .9-2 2Zm16 4h2V7h-2v2Z" fill="#000"/></svg>

package/dist/assets/svg-content.tsx

@@ -117,6 +117,12 @@ iconMap['ic_attachment'] = (
   </svg>
 );
 
+iconMap['ic_balance_parcel'] = (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M23 15h-2v2h2v-2Zm0-4h-2v2h2v-2Zm0 8h-2v2c1 0 2-1 2-2ZM15 3h-2v2h2V3Zm8 4h-2v2h2V7Zm-2-4v2h2c0-1-1-2-2-2ZM3 21h8v-6H1v4c0 1.1.9 2 2 2ZM3 7H1v2h2V7Zm12 12h-2v2h2v-2Zm4-16h-2v2h2V3Zm0 16h-2v2h2v-2ZM3 3C2 3 1 4 1 5h2V3Zm0 8H1v2h2v-2Zm8-8H9v2h2V3ZM7 3H5v2h2V3Z" />
+  </svg>
+);
+
 iconMap['ic_blocked'] = (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2ZM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9A7.902 7.902 0 0 1 4 12Zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1A7.902 7.902 0 0 1 20 12c0 4.42-3.58 8-8 8Z" />
@@ -703,6 +709,12 @@ iconMap['ic_upload'] = (
   </svg>
 );
 
+iconMap['ic_vector_sequence'] = (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 21h2v-2h-2v2Zm4 0h2v-2h-2v2ZM7 21h2v-2H7v2Zm4 0h2v-2h-2v2Zm8-4h2v-2h-2v2Zm0-4h2v-2h-2v2ZM3 5v15c0 .55.45 1 1 1s1-.45 1-1V6c0-.55.45-1 1-1h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.1 0-2 .9-2 2Zm16 4h2V7h-2v2Z" />
+  </svg>
+);
+
 iconMap['ic_view'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4Zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3Z" />

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/index.js

@@ -197,6 +197,8 @@ iconMap['ic_attach_file'] = (React__default["default"].createElement("svg", { vi
     React__default["default"].createElement("path", { d: "m19.571 10.586-8.132 8.132a3.999 3.999 0 0 1-5.657 0 3.999 3.999 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a3.999 3.999 0 0 0 0-5.657 3.999 3.999 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131-1.06-1.061Z" })));
 iconMap['ic_attachment'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M2.016 12.023c0-1.531.531-2.836 1.594-3.914C4.673 7.03 5.97 6.492 7.501 6.492h10.5c1.094 0 2.032.398 2.813 1.195.781.797 1.172 1.742 1.172 2.836 0 1.094-.39 2.032-1.172 2.813-.781.781-1.719 1.172-2.813 1.172H9.517a2.472 2.472 0 0 1-1.781-.727c-.5-.485-.75-1.07-.75-1.758 0-.687.25-1.281.75-1.781s1.094-.75 1.781-.75h7.5v2.016H9.423c-.281 0-.422.164-.422.492 0 .328.14.492.422.492h8.578c.531 0 1-.195 1.406-.586.406-.39.609-.852.609-1.383s-.203-1-.609-1.406c-.406-.406-.875-.61-1.406-.61h-10.5c-.969 0-1.797.345-2.484 1.032a3.386 3.386 0 0 0-1.031 2.484c0 .969.344 1.789 1.031 2.46a3.425 3.425 0 0 0 2.484 1.009h9.516v2.016H7.501c-1.531 0-2.828-.531-3.891-1.594-1.063-1.063-1.594-2.36-1.594-3.891Z" })));
+iconMap['ic_balance_parcel'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+    React__default["default"].createElement("path", { d: "M23 15h-2v2h2v-2Zm0-4h-2v2h2v-2Zm0 8h-2v2c1 0 2-1 2-2ZM15 3h-2v2h2V3Zm8 4h-2v2h2V7Zm-2-4v2h2c0-1-1-2-2-2ZM3 21h8v-6H1v4c0 1.1.9 2 2 2ZM3 7H1v2h2V7Zm12 12h-2v2h2v-2Zm4-16h-2v2h2V3Zm0 16h-2v2h2v-2ZM3 3C2 3 1 4 1 5h2V3Zm0 8H1v2h2v-2Zm8-8H9v2h2V3ZM7 3H5v2h2V3Z" })));
 iconMap['ic_blocked'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default["default"].createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2ZM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9A7.902 7.902 0 0 1 4 12Zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1A7.902 7.902 0 0 1 20 12c0 4.42-3.58 8-8 8Z" })));
 iconMap['ic_border_color'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
@@ -399,6 +401,8 @@ iconMap['ic_unlink'] = (React__default["default"].createElement("svg", { xmlns:
     React__default["default"].createElement("path", { d: "m14.39 11.065 1.61 1.61v-1.61h-1.61zm2.61-4h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.27-.77 2.37-1.87 2.84l1.4 1.4a4.986 4.986 0 0 0 2.37-4.24c0-2.76-2.24-5-5-5zM2 4.335l3.11 3.11A4.991 4.991 0 0 0 2 12.065c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.21-2.9 2.76-3.07l2.07 2.07H8v2h2.73l2.27 2.27v1.73h1.73l4.01 4.01 1.41-1.41L3.41 2.925 2 4.335z" })));
 iconMap['ic_upload'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M5 4h14v2H5V4Zm0 10h4v6h6v-6h4l-7-7-7 7Zm8-2v6h-2v-6H9.83L12 9.83 14.17 12H13Z" })));
+iconMap['ic_vector_sequence'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+    React__default["default"].createElement("path", { d: "M15 21h2v-2h-2v2Zm4 0h2v-2h-2v2ZM7 21h2v-2H7v2Zm4 0h2v-2h-2v2Zm8-4h2v-2h-2v2Zm0-4h2v-2h-2v2ZM3 5v15c0 .55.45 1 1 1s1-.45 1-1V6c0-.55.45-1 1-1h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.1 0-2 .9-2 2Zm16 4h2V7h-2v2Z" })));
 iconMap['ic_view'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4Zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3Z" })));
 iconMap['ic_view_list'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
@@ -55910,6 +55914,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);
     }
@@ -56036,8 +56044,9 @@ var LuiSearchInput = function (props) {
     return (React__default["default"].createElement("div", { className: "LuiSearchInput" },
         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, autoFocus: true, "aria-label": "Search", onChange: function (e) { return setInputValue(e.target.value); }, onKeyDown: handleKeyDown, onFocus: function (e) {
+            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();
+                    retrieveResults(typedValue);
                     setHaveFocus(true);
                 }, 
                 // This timeout could be a little brittle but allows the menu to stay open long enough to click it
@@ -56048,6 +56057,7 @@ var LuiSearchInput = function (props) {
         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)))),
@@ -56084,7 +56094,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);
@@ -56137,6 +56147,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,