@linzjs/lui 21.52.0 → 21.53.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [21.53.1](https://github.com/linz/lui/compare/v21.53.0...v21.53.1) (2024-11-11)
+
+
+### Bug Fixes
+
+* **searchbox:** style padding for passive search input ([#1170](https://github.com/linz/lui/issues/1170)) ([1854c9f](https://github.com/linz/lui/commit/1854c9f46da1d42a189f7cbd1e2b6a77e2a02e79))
+
+# [21.53.0](https://github.com/linz/lui/compare/v21.52.0...v21.53.0) (2024-11-04)
+
+
+### Features
+
+* Adding an imperative API to LuiListBox to allow selecting or focusing the first item ([#1169](https://github.com/linz/lui/issues/1169)) ([fd56d9c](https://github.com/linz/lui/commit/fd56d9c520e4523820bd22567a0bf8e420b3a455))
+
 # [21.52.0](https://github.com/linz/lui/compare/v21.51.1...v21.52.0) (2024-11-03)
 
 

package/dist/components/LuiListBox/LuiListBox.d.ts

@@ -1,6 +1,6 @@
 import './LuiListBox.scss';
 import 'react-loading-skeleton/dist/skeleton.css';
-import { HTMLAttributes, Key, ReactNode } from 'react';
+import { HTMLAttributes, Key, ReactNode, MutableRefObject } from 'react';
 import { SelectionBehavior, SelectionMode } from '@react-types/shared';
 import { AriaListBoxOptions } from '@react-aria/listbox';
 export declare type KeyGetter<T> = (item: T) => Key;
@@ -46,4 +46,13 @@ export interface ILuiListBoxProps<T = ILuiListBoxItem> extends Omit<HTMLAttribut
     emptyIndicator?: () => ReactNode;
     onNavigateOutOfBounds?: (bound: 'start' | 'end') => void;
 }
-export declare function LuiListBox<T extends object = ILuiListBoxItem>({ ariaLabel, ariaLabelledBy, itemRenderer, groupHeadingRenderer, loadingIndicator, emptyIndicator, selectionMode, selectionBehavior, disabled, disabledKeys, items, value, onChange, getKey, getGroup, getLabel, ariaProps, className, onNavigateOutOfBounds, ...ulProps }: ILuiListBoxProps<T>): JSX.Element;
+export interface ILuiListBoxHandle {
+    focusFirstItem: () => void;
+    selectFirstItem: () => void;
+}
+declare type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
+export declare const LuiListBox: <T extends object = ILuiListBoxItem>(props: ILuiListBoxProps<T> & {
+    ref?: ForwardedRef<ILuiListBoxHandle> | undefined;
+}) => ReturnType<typeof LuiListBoxWithRef>;
+declare function LuiListBoxWithRef<T extends object = ILuiListBoxItem>(props: ILuiListBoxProps<T>, ref: ForwardedRef<ILuiListBoxHandle>): JSX.Element;
+export {};

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

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import { LuiButtonProps } from '../LuiButton/LuiButton';
 import { ISearchGroupedResult, ISearchResult } from '../LuiSearchInput/ResultsDisplay';
+import { InputValidationResult } from '../LuiSearchInput/LuiPassiveSearchInput';
 export interface ISearchMenuOption {
     name?: string;
     groupTitle?: string | ReactElement;
@@ -14,6 +15,13 @@ export interface ISearchMenuOption {
     renderItem?: (item: any) => ReactElement;
     icon?: ReactElement;
     columnBreak?: boolean;
+    onSearch?: (searchString: string) => void;
+    validateInput?: (input: string) => InputValidationResult | undefined;
+    /**
+     * @deprecated customizedInput was designed to enhance search box input component diversity.
+     * But considering to keep the input memory be consistent among all the input components,
+     * uncontrolled customized components are hard to be coordinated.
+     */
     customizedInput?: React.ReactElement;
 }
 export interface ILuiSearchBoxProps {

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

@@ -16,4 +16,13 @@ export interface IPassiveSearchInputProps {
     onClickInput?: () => void;
     validateInput?: (input: string) => InputValidationResult | undefined;
 }
+export declare const ControlledPassiveSearchInputComponent: (props: IPassiveSearchInputProps & {
+    typedValue: string;
+    setTypedValue: (value: string) => void;
+}) => JSX.Element;
+/**
+ * @deprecated This was created for client to easily customize the passive input component.
+ * But that is hard to keep input memory to be consistent with other input components.
+ * Has extracted the controlled version and let LuiSearchInput to align the input value.
+ */
 export declare const LuiPassiveSearchInput: (props: React.PropsWithChildren<IPassiveSearchInputProps>) => JSX.Element;

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

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { ISearchGroupedResult, ISearchResult } from './ResultsDisplay';
+import { InputValidationResult } from './LuiPassiveSearchInput';
 export interface ISearchInputProps<SearchResult extends ISearchResult = ISearchResult> {
     minCharactersForSearch: number;
     placeholderText: string;
@@ -15,5 +16,7 @@ export interface ISearchInputProps<SearchResult extends ISearchResult = ISearchR
     onClearCallback?: () => void;
     onClickInput?: () => void;
     externalSearch?: boolean;
+    onSearch?: (searchString: string) => void;
+    validateInput?: (input: string) => InputValidationResult | undefined;
 }
 export declare const LuiSearchInput: <SearchResult extends ISearchResult = ISearchResult>(props: React.PropsWithChildren<ISearchInputProps<SearchResult>>) => JSX.Element;

package/dist/index.d.ts

@@ -59,7 +59,7 @@ export { LuiAccordicard } from './components/LuiAccordicard/LuiAccordicard';
 export { LuiAccordicardStatic } from './components/LuiAccordicardStatic/LuiAccordicardStatic';
 export { LuiAccordion } from './components/LuiAccordion/LuiAccordion';
 export * from './components/LuiMultiSwitch/LuiMultiSwitch';
-export { LuiListBox, type ILuiListBoxItem, type ILuiListBoxProps, type IItemRendererProps, } from './components/LuiListBox/LuiListBox';
+export { LuiListBox, type ILuiListBoxItem, type ILuiListBoxProps, type IItemRendererProps, type ILuiListBoxHandle, } from './components/LuiListBox/LuiListBox';
 export { RadioItemRenderer } from './components/LuiListBox/Renderers/RadioItemRenderer';
 export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/CheckboxItemRenderer';
 export { LuiSideMenu, type ILuiSideMenuProps, } from './components/LuiSideMenu/LuiSideMenu';

package/dist/index.js

@@ -42490,6 +42490,67 @@ var ResultsDisplay = function (_a) {
         children));
 };
 
+var ControlledPassiveSearchInputComponent = function (props) {
+    var _a = React.useState(), inputValidationResult = _a[0], setInputValidationResult = _a[1];
+    var inputRef = React.useRef(null);
+    var typedValue = props.typedValue, setTypedValue = props.setTypedValue;
+    // set focus to input box
+    React.useEffect(function () {
+        var _a;
+        if (props.focusUpdate !== undefined)
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [props.focusUpdate]);
+    // validate input
+    React.useEffect(function () {
+        setInputValidationResult((props.validateInput && props.validateInput(typedValue)) || undefined);
+    }, [typedValue]);
+    function setInputValue(value) {
+        setTypedValue(props.inputTransformer ? props.inputTransformer(value) : value);
+    }
+    function handleKeyDown(event) {
+        switch (event.key) {
+            case 'Enter':
+                if (inputValidationResult &&
+                    inputValidationResult.stopProgress === true)
+                    return;
+                props.onSearch(typedValue);
+        }
+    }
+    var cancelIcon = typedValue !== '' ? (React__default["default"].createElement(LuiIcon, { alt: "clear", name: "ic_cancel_clear", size: "md", color: '#6b6966', spanProps: {
+            onClick: function () {
+                var _a;
+                setInputValue('');
+                (_a = props.onClearCallback) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+        } })) : null;
+    var searchIcon = typedValue === '' || (inputValidationResult === null || inputValidationResult === void 0 ? void 0 : inputValidationResult.stopProgress) === true ? (React__default["default"].createElement("div", { className: "LuiSearchInput-search-button-disabled" },
+        React__default["default"].createElement(LuiIcon, { name: "ic_search", size: "md", alt: "search", color: '#989189' }))) : (React__default["default"].createElement("div", { onClick: function () { return props.onSearch(typedValue); }, className: "LuiSearchInput-search-button" },
+        React__default["default"].createElement(LuiIcon, { name: "ic_search", size: "md", alt: "search", color: '#FFFFFF' })));
+    return (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
+        React__default["default"].createElement("span", { className: "LuiSearchInput-inputWrapper" },
+            React__default["default"].createElement("input", { type: "text", className: clsx('LuiSearchPassiveInput-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();
+                }, style: { pointerEvents: 'auto' } }),
+            React__default["default"].createElement("div", { className: "LuiSearchPassiveInput-buttons-panel" },
+                cancelIcon,
+                searchIcon)),
+        inputValidationResult && inputValidationResult.userMessage && (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" }, inputValidationResult.userMessage))),
+        props.disclaimer && (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)))));
+};
+/**
+ * @deprecated This was created for client to easily customize the passive input component.
+ * But that is hard to keep input memory to be consistent with other input components.
+ * Has extracted the controlled version and let LuiSearchInput to align the input value.
+ */
+var LuiPassiveSearchInput = function (props) {
+    var _a = React.useState(props.initialValue ? props.initialValue : ''), typedValue = _a[0], setTypedValue = _a[1];
+    return (React__default["default"].createElement(ControlledPassiveSearchInputComponent, __assign({ typedValue: typedValue, setTypedValue: setTypedValue }, props)));
+};
+
 function flatten(items) {
     if (isGroupedResult(items)) {
         return items.flatMap(function (item) { return item.items; });
@@ -42663,7 +42724,7 @@ var LuiSearchInput = function (props) {
         else
             return null;
     }
-    return (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
+    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) {
@@ -42688,64 +42749,6 @@ var LuiSearchInput = function (props) {
             React__default["default"].createElement("div", { "data-testid": "disclaimer", className: "LuiSearchInput-disclaimer" }, props.disclaimer)))));
 };
 
-var LuiPassiveSearchInput = function (props) {
-    var _a = React.useState(props.initialValue ? props.initialValue : ''), typedValue = _a[0], setTypedValue = _a[1];
-    var _b = React.useState(), inputValidationResult = _b[0], setInputValidationResult = _b[1];
-    var inputRef = React.useRef(null);
-    // set focus to input box
-    React.useEffect(function () {
-        var _a;
-        if (props.focusUpdate !== undefined)
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [props.focusUpdate]);
-    // validate input
-    React.useEffect(function () {
-        setInputValidationResult((props.validateInput && props.validateInput(typedValue)) || undefined);
-    }, [typedValue]);
-    function setInputValue(value) {
-        setTypedValue(props.inputTransformer ? props.inputTransformer(value) : value);
-    }
-    function handleKeyDown(event) {
-        switch (event.key) {
-            case 'Enter':
-                if (inputValidationResult &&
-                    inputValidationResult.stopProgress === true)
-                    return;
-                props.onSearch(typedValue);
-        }
-    }
-    var cancelIcon = typedValue !== '' ? (React__default["default"].createElement(LuiIcon, { alt: "clear", name: "ic_cancel_clear", size: "md", color: '#6b6966', spanProps: {
-            onClick: function () {
-                var _a;
-                setInputValue('');
-                (_a = props.onClearCallback) === null || _a === void 0 ? void 0 : _a.call(props);
-            }
-        } })) : null;
-    var searchIcon = typedValue === '' || (inputValidationResult === null || inputValidationResult === void 0 ? void 0 : inputValidationResult.stopProgress) === true ? (React__default["default"].createElement("div", { className: "LuiSearchInput-search-button-disabled" },
-        React__default["default"].createElement(LuiIcon, { name: "ic_search", size: "md", alt: "search", color: '#989189' }))) : (React__default["default"].createElement("div", { onClick: function () { return props.onSearch(typedValue); }, className: "LuiSearchInput-search-button" },
-        React__default["default"].createElement(LuiIcon, { name: "ic_search", size: "md", alt: "search", color: '#FFFFFF' })));
-    return (React__default["default"].createElement("div", { className: "LuiSearchInput", onClick: props.onClickInput },
-        React__default["default"].createElement("span", { className: "LuiSearchInput-inputWrapper" },
-            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();
-                }, style: { pointerEvents: 'auto' } }),
-            React__default["default"].createElement("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    paddingRight: '8px',
-                    gap: '14px',
-                    alignItems: 'center'
-                } },
-                cancelIcon,
-                searchIcon)),
-        inputValidationResult && inputValidationResult.userMessage && (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" }, inputValidationResult.userMessage))),
-        props.disclaimer && (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)))));
-};
-
 var resultStyle = { verticalAlign: 'middle' };
 /**
  *  LuiSearchBox is a search input with select menu.
@@ -42823,7 +42826,7 @@ var LuiSearchBox = function (_a) {
                 ? selectedMenuOption.renderItem
                 : function (item) {
                     return React__default["default"].createElement("span", { style: resultStyle }, item.description);
-                }, disclaimer: selectedMenuOption.disclaimer, focusUpdate: autoFocus && isFocus ? focusUpdate : undefined, externalSearch: externalSearch, initialValue: !!externalSearch ? searchString : undefined, onClickInput: onClickInput, onClearCallback: onClearInput })))));
+                }, disclaimer: selectedMenuOption.disclaimer, focusUpdate: autoFocus && isFocus ? focusUpdate : undefined, externalSearch: externalSearch, initialValue: !!externalSearch ? searchString : undefined, onClickInput: onClickInput, onClearCallback: onClearInput, onSearch: selectedMenuOption.onSearch, validateInput: selectedMenuOption.validateInput })))));
 };
 var LuiSearchBoxButton = React__default["default"].forwardRef(function (props, ref) {
     var button = React.useMemo(function () {
@@ -58330,8 +58333,9 @@ function LuiListBoxGroup(_a) {
         React__default["default"].createElement("ul", __assign({ className: "LuiListBoxGroup-items" }, groupProps), (group.childNodes || []).map(function (node) { return (React__default["default"].createElement(LuiListBoxItem, { key: node.key, node: node, state: state, renderer: itemRenderer })); }))));
 }
 
-function LuiListBox(_a) {
-    var ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, _b = _a.itemRenderer, itemRenderer = _b === void 0 ? DefaultItemRenderer : _b, _c = _a.groupHeadingRenderer, groupHeadingRenderer = _c === void 0 ? DefaultGroupHeadingRenderer : _c, _d = _a.loadingIndicator, loadingIndicator = _d === void 0 ? DefaultLoadingIndicator : _d, _e = _a.emptyIndicator, emptyIndicator = _e === void 0 ? DefaultEmptyIndicator : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? 'single' : _f, _g = _a.selectionBehavior, selectionBehavior = _g === void 0 ? 'toggle' : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.disabledKeys, disabledKeys = _j === void 0 ? [] : _j, items = _a.items, value = _a.value, onChange = _a.onChange, getKey = _a.getKey, getGroup = _a.getGroup, getLabel = _a.getLabel, ariaProps = _a.ariaProps, className = _a.className, onNavigateOutOfBounds = _a.onNavigateOutOfBounds, ulProps = __rest(_a, ["ariaLabel", "ariaLabelledBy", "itemRenderer", "groupHeadingRenderer", "loadingIndicator", "emptyIndicator", "selectionMode", "selectionBehavior", "disabled", "disabledKeys", "items", "value", "onChange", "getKey", "getGroup", "getLabel", "ariaProps", "className", "onNavigateOutOfBounds"]);
+var LuiListBox = React.forwardRef(LuiListBoxWithRef);
+function LuiListBoxWithRef(props, ref) {
+    var ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, _a = props.itemRenderer, itemRenderer = _a === void 0 ? DefaultItemRenderer : _a, _b = props.groupHeadingRenderer, groupHeadingRenderer = _b === void 0 ? DefaultGroupHeadingRenderer : _b, _c = props.loadingIndicator, loadingIndicator = _c === void 0 ? DefaultLoadingIndicator : _c, _d = props.emptyIndicator, emptyIndicator = _d === void 0 ? DefaultEmptyIndicator : _d, _e = props.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = props.selectionBehavior, selectionBehavior = _f === void 0 ? 'toggle' : _f, _g = props.disabled, disabled = _g === void 0 ? false : _g, _h = props.disabledKeys, disabledKeys = _h === void 0 ? [] : _h, items = props.items, value = props.value, onChange = props.onChange, getKey = props.getKey, getGroup = props.getGroup, getLabel = props.getLabel, ariaProps = props.ariaProps, className = props.className, onNavigateOutOfBounds = props.onNavigateOutOfBounds, ulProps = __rest(props, ["ariaLabel", "ariaLabelledBy", "itemRenderer", "groupHeadingRenderer", "loadingIndicator", "emptyIndicator", "selectionMode", "selectionBehavior", "disabled", "disabledKeys", "items", "value", "onChange", "getKey", "getGroup", "getLabel", "ariaProps", "className", "onNavigateOutOfBounds"]);
     var listProps = useLuiListBox({
         selectionMode: selectionMode,
         selectionBehavior: selectionBehavior,
@@ -58346,9 +58350,20 @@ function LuiListBox(_a) {
         disabledKeys: disabledKeys
     });
     var ariaListBoxProps = React.useMemo(function () { return (__assign({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }, listProps)); }, [listProps, ariaLabel, ariaLabelledBy]);
-    var ref = React.useRef(null);
+    var listRef = React.useRef(null);
     var state = $e72dd72e1c76a225$export$2f645645f7bca764(listProps);
-    var listBoxProps = $c132121280ec012d$export$50eacbbf140a3141(ariaListBoxProps, state, ref).listBoxProps;
+    var listBoxProps = $c132121280ec012d$export$50eacbbf140a3141(ariaListBoxProps, state, listRef).listBoxProps;
+    var getFirstItem = function () { var _a; return (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li[data-key]:first-of-type'); };
+    React.useImperativeHandle(ref, function () { return ({
+        focusFirstItem: function () {
+            var _a;
+            (_a = getFirstItem()) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+        selectFirstItem: function () {
+            var _a;
+            (_a = getFirstItem()) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }); });
     var onKeyDown = function (e) {
         var _a, _b;
         var lastFocusedKey = state.selectionManager.focusedKey;
@@ -58366,7 +58381,7 @@ function LuiListBox(_a) {
             onNavigateOutOfBounds === null || onNavigateOutOfBounds === void 0 ? void 0 : onNavigateOutOfBounds('end');
         }
     };
-    return (React__default["default"].createElement("ul", __assign({}, ulProps, listBoxProps, { onKeyDown: onKeyDown, ref: ref, className: clsx('LuiListBox', className) }),
+    return (React__default["default"].createElement("ul", __assign({}, ulProps, listBoxProps, { onKeyDown: onKeyDown, ref: listRef, className: clsx('LuiListBox', className) }),
         !items && loadingIndicator(),
         (items === null || items === void 0 ? void 0 : items.length) === 0 && emptyIndicator(),
         Array.from(state.collection).map(function (node) {