@linzjs/lui 23.11.2 → 23.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [23.13.0](https://github.com/linz/lui/compare/v23.12.0...v23.13.0) (2025-10-08)
+
+
+### Features
+
+* **LuiSearchInput:** add 2 new optional variations to support design for CS-8444 ([#1256](https://github.com/linz/lui/issues/1256)) ([469f0b7](https://github.com/linz/lui/commit/469f0b7747e8e94a3436dca2f8086eae8f2ee198))
+
+# [23.12.0](https://github.com/linz/lui/compare/v23.11.2...v23.12.0) (2025-10-06)
+
+
+### Features
+
+* SURVEY-27089 add LuiPermissionDeniedPage ([#1250](https://github.com/linz/lui/issues/1250)) ([82caf9d](https://github.com/linz/lui/commit/82caf9ded76bfc7a4dd5b466a86cfd5a5a358e0b))
+
 ## [23.11.2](https://github.com/linz/lui/compare/v23.11.1...v23.11.2) (2025-10-02)
 
 

package/dist/components/LuiErrorPage/LuiErrorPage.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import { LuiErrorIllustrationType } from './LuiErrorIllustration';
 export declare const LuiErrorPage: React.FC<React.PropsWithChildren<{
     header?: React.ReactElement;
     footer?: React.ReactElement;
     content?: React.ReactElement;
     illustration?: React.ReactElement;
+    type?: LuiErrorIllustrationType;
 }>>;

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

@@ -23,5 +23,7 @@ export interface ISearchInputProps<SearchResult extends ISearchResult = ISearchR
     validateInput?: (input: string) => InputValidationResult | undefined;
     hideDisclaimerOnFail?: boolean;
     hideNoOptionsMessage?: boolean;
+    hideSearchIcon?: boolean;
+    filterElement?: ReactElement;
 }
 export declare const LuiSearchInput: <SearchResult extends ISearchResult = ISearchResult>(props: React.PropsWithChildren<ISearchInputProps<SearchResult>>) => JSX.Element;

package/dist/index.js

@@ -17844,8 +17844,13 @@ var LuiSearchInput = function (props) {
         if (props.focusUpdate !== undefined)
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [props.focusUpdate]);
-    //clear result after search types changed
     React.useEffect(function () {
+        //if there is a filter under way, recalculate the results
+        if (props.filterElement) {
+            retrieveResults(typedValue);
+            return;
+        }
+        //if there is not a filter under way, then the results are no longer valid, clear them
         setResults([]);
     }, [props.getOptions]);
     React.useEffect(function () {
@@ -18004,16 +18009,36 @@ var LuiSearchInput = function (props) {
         }
         return null;
     }
+    var filterRef = React.useRef(null);
+    function determineFilterElement() {
+        if (props.filterElement && haveFocus && results.length > 0) {
+            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)));
+        }
+        return null;
+    }
     return props.onSearch ? (React__default["default"].createElement(ControlledPassiveSearchInputComponent, __assign({ typedValue: typedValue, setTypedValue: setTypedValue }, props, { minCharactersForSearch: props.minCharactersForSearch, placeholderText: props.placeholderText, onSearch: props.onSearch, disclaimer: props.disclaimer, initialValue: props.initialValue, inputTransformer: props.inputTransformer, focusUpdate: props.focusUpdate, onClearCallback: props.onClearCallback, onClickInput: props.onClickInput, validateInput: props.validateInput }))) : (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
         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, "aria-label": "Search", onChange: function (e) { return setInputValue(e.target.value); }, onKeyDown: handleKeyDown, onFocus: function (e) {
+            !props.hideSearchIcon && searchIcon,
+            React__default["default"].createElement("input", { type: "text", className: clsx("LuiSearchInput-input ".concat(props.hideSearchIcon ? 'LuiSearchInput-input-hiddenIcon' : '')), ref: inputRef, value: typedValue, placeholder: props.placeholderText, "aria-label": "Search", onChange: function (e) {
+                    setInputValue(e.target.value);
+                }, onKeyDown: handleKeyDown, onFocus: function (e) {
                     e.target.select();
                     retrieveResults(typedValue);
                     setHaveFocus(true);
                 }, style: { pointerEvents: props.externalSearch ? 'none' : 'auto' }, 
                 // 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); }, 200); }, disabled: props.externalSearch }),
+                onBlur: function (event) {
+                    // retain haveFocus while interacting with any supplied filter element
+                    // this is not a perfect solution, the filter ref will still get the focus, and maybe not have an onBlur
+                    if (filterRef.current &&
+                        event.relatedTarget === filterRef.current) {
+                        return;
+                    }
+                    // otherwise set the focus to false (close the results etc)
+                    setTimeout(function () { return setHaveFocus(false); }, 200);
+                }, disabled: props.externalSearch }),
             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 }))),
@@ -18024,7 +18049,8 @@ var LuiSearchInput = function (props) {
             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)))),
-        determineDisclaimer()));
+        determineDisclaimer(),
+        determineFilterElement()));
 };
 
 var resultStyle = { verticalAlign: 'middle' };
@@ -18239,7 +18265,7 @@ var LuiErrorPage = function (props) {
         props.header,
         React__default["default"].createElement("div", { className: "LuiErrorPage-wrapper" },
             React__default["default"].createElement("div", { className: 'LuiErrorPage-content' }, props.content),
-            React__default["default"].createElement("div", { className: 'LuiErrorPage-image' }, props.illustration ? props.illustration : React__default["default"].createElement(LuiErrorIllustration, null))),
+            React__default["default"].createElement("div", { className: 'LuiErrorPage-image' }, props.illustration ? (props.illustration) : (React__default["default"].createElement(LuiErrorIllustration, { type: props.type })))),
         props.footer));
 };