@linzjs/lui 23.12.0 → 23.13.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [23.13.1](https://github.com/linz/lui/compare/v23.13.0...v23.13.1) (2025-10-08)
+
+
+### Bug Fixes
+
+* **LuiComboSelect:**  Fix LuiComboSelect to properly set custom classnames ([#1254](https://github.com/linz/lui/issues/1254)) ([8fdc579](https://github.com/linz/lui/commit/8fdc579e44bb496295a4acfa4b1d069641a694da))
+
+# [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)
 
 

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.d.ts

@@ -29,7 +29,7 @@ export { LuiIcon } from './components/LuiIcon/LuiIcon';
 export { LuiBearingInput } from './components/LuiBearingInput/LuiBearingInput';
 export { LuiFooter } from './components/LuiFooter/LuiFooter';
 export { LuiAppFooterSml } from './components/LuiFooter/LuiAppFooterSml';
-export { LuiComboSelect, type LuiComboSelectProps, type LuiComboSelectOption, } from './components/LuiForms/LuiComboSelect/LuiComboSelect';
+export { LuiComboSelect, type LuiComboSelectProps, type LuiComboSelectOption, } from './components/LuiFormElements/LuiComboSelect/LuiComboSelect';
 export { LuiFormSectionHeader, type IFormSectionHeaderProps, } from './components/LuiForms/LuiFormSection/LuiFormSectionHeader';
 export * from './components/LuiHeader/LuiHeader';
 export * from './components/LuiHeaderV2/LuiHeaderV2';

package/dist/index.js

@@ -15042,7 +15042,7 @@ function LuiComboSelectActual(givenProps, ref) {
     // box-shadow: "-8px 0px 0 0 #cc0000";
     // border-radius: "4px";
     var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
-    var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: colors['sea'], primary75: colors['electric'], primary50: colors['spray'], primary25: colors['polar'], neutral90: colors['charcoal'], neutral80: colors['charcoal'], neutral70: colors['charcoal'], neutral60: colors['fuscous'], neutral50: colors['fuscous'], neutral40: colors['gray'], neutral30: colors['gray'], neutral20: colors['silver'], neutral10: colors['lily'], neutral5: colors['hint'], danger: colors['error'], dangerLight: colors['error-bg'] }) })); }, styles: {
+    var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', className: undefined, theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: colors['sea'], primary75: colors['electric'], primary50: colors['spray'], primary25: colors['polar'], neutral90: colors['charcoal'], neutral80: colors['charcoal'], neutral70: colors['charcoal'], neutral60: colors['fuscous'], neutral50: colors['fuscous'], neutral40: colors['gray'], neutral30: colors['gray'], neutral20: colors['silver'], neutral10: colors['lily'], neutral5: colors['hint'], danger: colors['error'], dangerLight: colors['error-bg'] }) })); }, styles: {
             control: function (provided, state) { return (__assign(__assign({}, provided), { 
                 /* matches style of .LuiTextInput-input */
                 boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
@@ -15062,12 +15062,13 @@ function LuiComboSelectActual(givenProps, ref) {
                 return (__assign(__assign({}, provided), { color: colors['input-text'], backgroundColor: isSelected ? colors['selection'] : colors['white'] }));
             }
         } });
-    return (React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
-        React__default["default"].createElement("span", { className: clsx('LuiSelect-label-text', props.hideLabel ? 'LuiScreenReadersOnly' : '') }, props.label),
-        props.isCreateable ? (React__default["default"].createElement(CreatableSelect, __assign({ formatCreateLabel: function (inputValue) { return inputValue; }, createOptionPosition: "first", ref: ref }, selectProp))) : (React__default["default"].createElement(Select, __assign({ ref: ref }, selectProp))),
-        props.error && (React__default["default"].createElement("span", { className: "LuiComboSelect-error" },
-            React__default["default"].createElement(LuiIcon, { alt: 'Error', name: "ic_error", className: "LuiComboSelect-error-icon", size: "sm", status: "error" }),
-            props.error))));
+    return (React__default["default"].createElement("div", { className: clsx('LuiComboSelect', props.className) },
+        React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
+            React__default["default"].createElement("span", { className: clsx('LuiSelect-label-text', props.hideLabel ? 'LuiScreenReadersOnly' : '') }, props.label),
+            props.isCreateable ? (React__default["default"].createElement(CreatableSelect, __assign({ formatCreateLabel: function (inputValue) { return inputValue; }, createOptionPosition: "first", ref: ref }, selectProp))) : (React__default["default"].createElement(Select, __assign({ ref: ref }, selectProp))),
+            props.error && (React__default["default"].createElement("span", { className: "LuiComboSelect-error" },
+                React__default["default"].createElement(LuiIcon, { alt: 'Error', name: "ic_error", className: "LuiComboSelect-error-icon", size: "sm", status: "error" }),
+                props.error)))));
 }
 
 var LuiShadow = function (props) {
@@ -17844,8 +17845,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 +18010,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 +18050,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' };