@linzjs/lui 23.14.2 → 23.14.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [23.14.4](https://github.com/linz/lui/compare/v23.14.3...v23.14.4) (2025-10-27)
+
+
+### Bug Fixes
+
+* **SearchInput:** CS8444 - show filter when no result ([#1264](https://github.com/linz/lui/issues/1264)) ([0edcaad](https://github.com/linz/lui/commit/0edcaad78c8a6bc316306e12a66440bfb40593d9))
+
+## [23.14.3](https://github.com/linz/lui/compare/v23.14.2...v23.14.3) (2025-10-22)
+
+
+### Bug Fixes
+
+* **SearchInput:** Cs8444 add option to exclude leading and trailing whitespace from minchar check ([#1262](https://github.com/linz/lui/issues/1262)) ([9242296](https://github.com/linz/lui/commit/92422969ae7401a683d1fbd73d1b4c7548b0f515))
+
 ## [23.14.2](https://github.com/linz/lui/compare/v23.14.1...v23.14.2) (2025-10-16)
 
 

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

@@ -25,5 +25,6 @@ export interface ISearchInputProps<SearchResult extends ISearchResult = ISearchR
     hideNoOptionsMessage?: boolean;
     hideSearchIcon?: boolean;
     filterElement?: ReactElement;
+    trimBeforeMinCharCheck?: boolean;
 }
 export declare const LuiSearchInput: <SearchResult extends ISearchResult = ISearchResult>(props: React.PropsWithChildren<ISearchInputProps<SearchResult>>) => JSX.Element;

package/dist/hooks/useClickedOutsideElement.d.ts

@@ -11,4 +11,4 @@ import { MutableRefObject, RefObject } from 'react';
   return <button ref={refElement}>Click Me!</button>;
  ```
  */
-export declare function useClickedOutsideElement(refElement: RefObject<HTMLElement> | MutableRefObject<HTMLElement>, handleClickOutside: CallableFunction): void;
+export declare function useClickedOutsideElement(refElement: RefObject<HTMLElement | null> | MutableRefObject<HTMLElement | null>, handleClickOutside: CallableFunction): void;

package/dist/index.js

@@ -17857,9 +17857,7 @@ var LuiSearchInput = function (props) {
     }, [props.focusUpdate]);
     React.useEffect(function () {
         // if the way of getOptions changes, then the current results (options) are no longer applicable
-        if (haveFocus &&
-            typedValue &&
-            typedValue.length >= props.minCharactersForSearch) {
+        if (haveFocus && typedValue && enoughChars(typedValue)) {
             retrieveResults(typedValue);
         }
         else {
@@ -17920,7 +17918,7 @@ var LuiSearchInput = function (props) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        if (!(input !== '' && input.length >= props.minCharactersForSearch)) return [3 /*break*/, 6];
+                        if (!(input !== '' && enoughChars(input))) return [3 /*break*/, 6];
                         setIsLoading(true);
                         _b.label = 1;
                     case 1:
@@ -17945,9 +17943,7 @@ var LuiSearchInput = function (props) {
                         return [7 /*endfinally*/];
                     case 5: return [3 /*break*/, 7];
                     case 6:
-                        if (input !== '' &&
-                            input.length < props.minCharactersForSearch &&
-                            results.length > 0) {
+                        if (input !== '' && enoughChars(input) && results.length > 0) {
                             setResults([]);
                         }
                         else if (input === '' && results.length > 0) {
@@ -17998,10 +17994,8 @@ var LuiSearchInput = function (props) {
     var searchIcon = props.externalSearch ? (React__default["default"].createElement(LuiIcon, { className: "LuiSearchInput-startIconPosition ".concat(typedValue ? 'LuiSearchInput-startIconPosition-enabled' : ''), name: "ic_create", size: "md", alt: "edit", spanProps: { onClick: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } } })) : (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;
+        return ((props.trimBeforeMinCharCheck ? input.trim().length : input.length) >=
+            props.minCharactersForSearch);
     }
     function noOptionsMessage(inputValue) {
         if (inputValue === '') {
@@ -18024,7 +18018,14 @@ var LuiSearchInput = function (props) {
     }
     var filterRef = React.useRef(null);
     function determineFilterElement() {
-        if (props.filterElement && haveFocus && results.length > 0) {
+        var showingResults = results.length > 0;
+        var showingNoResults = enoughChars(typedValue) &&
+            results.length === 0 &&
+            !isLoading &&
+            props.hideNoOptionsMessage !== true;
+        if (props.filterElement &&
+            haveFocus &&
+            (showingResults || showingNoResults)) {
             return (React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement("hr", { className: "LuiSearchInput-resultSeparator" }),
                 React__default["default"].createElement("div", { ref: filterRef, tabIndex: -1, "data-testid": "filter", className: "LuiSearchInput-filter" }, props.filterElement)));
@@ -33905,7 +33906,7 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null, !(selectedNum === 0 && !countZero) && (React__default["default"].createElement("span", __assign({ ref: ref, className: determineCounterClassname(), "data-testid": "lui-counter-number-".concat(shape), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()))));
 });
 
-var css_248z$b = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-pagination-override-mobile .lui-pagination-desktop {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-mobile .lui-pagination-mobile {\n  display: flex;\n}\n\n.lui-pagination-override-desktop .lui-pagination-mobile {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-desktop .lui-pagination-desktop {\n  display: flex;\n}\n\n.lui-pagination-controller {\n  container-type: inline-size;\n}\n@container (min-width: 500px) {\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: flex;\n  }\n}\n@container (max-width: 499px) {\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: flex;\n  }\n}\n\n.lui-pagination {\n  display: flex;\n  user-select: none;\n  justify-content: center;\n}\n.lui-pagination-page-counter {\n  display: flex;\n  align-items: center;\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n.lui-pagination .lui-button {\n  color: #2a292c;\n  height: 40px;\n  padding: 0.5rem 0.75rem;\n  vertical-align: top;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon path {\n  fill: #2a292c;\n}\n.lui-pagination .lui-button-selected {\n  background-color: #007198;\n  color: #ffffff;\n}\n.lui-pagination-ellipsis {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon path {\n  fill: #989189 !important;\n}\n\n.pan-left {\n  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n  transform: perspective(1000px) rotateY(20deg) translateX(-10px);\n  opacity: 0.5;\n}\n\n.pan-right {\n  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n  transform: perspective(1000px) rotateY(-20deg) translateX(10px);\n  opacity: 0.5;\n}";
+var css_248z$b = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-pagination-override-mobile .lui-pagination-desktop {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-mobile .lui-pagination-mobile {\n  display: flex;\n}\n\n.lui-pagination-override-desktop .lui-pagination-mobile {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-desktop .lui-pagination-desktop {\n  display: flex;\n}\n\n.lui-pagination-controller {\n  container-type: inline-size;\n}\n@container (min-width: 500px) {\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: flex;\n  }\n}\n@container (max-width: 499px) {\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: flex;\n  }\n}\n\n.lui-pagination {\n  display: flex;\n  user-select: none;\n  justify-content: center;\n}\n.lui-pagination-page-counter {\n  display: flex;\n  align-items: center;\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n.lui-pagination .lui-button {\n  color: #2a292c;\n  height: 40px;\n  padding: 0.5rem 0.75rem;\n  vertical-align: top;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon path {\n  fill: #2a292c;\n}\n.lui-pagination .lui-button-selected {\n  background-color: #007198;\n  color: #ffffff;\n}\n.lui-pagination-ellipsis {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon path {\n  fill: #989189 !important;\n}\n.lui-pagination-navigate-disabled {\n  pointer-events: none;\n}\n\n.pan-left {\n  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n  transform: perspective(1000px) rotateY(20deg) translateX(-10px);\n  opacity: 0.5;\n}\n\n.pan-right {\n  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n  transform: perspective(1000px) rotateY(-20deg) translateX(10px);\n  opacity: 0.5;\n}";
 styleInject(css_248z$b);
 
 /**