@linzjs/lui 21.22.0 → 21.23.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [21.23.0](https://github.com/linz/lui/compare/v21.22.0...v21.23.0) (2024-02-21)
+
+
+### Features
+
+* **Extend pros for SearchInput:** TI-1738 ([#1099](https://github.com/linz/lui/issues/1099)) ([794be11](https://github.com/linz/lui/commit/794be111ff52e03a043e043722c0bba0f473bd43))
+
 # [21.22.0](https://github.com/linz/lui/compare/v21.21.0...v21.22.0) (2024-02-15)
 
 

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

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { LuiButtonProps } from '../LuiButton/LuiButton';
-import { ISearchResult, ISearchGroupedResult } from '../LuiSearchInput/LuiSearchInput';
+import { ISearchGroupedResult, ISearchResult } from '../LuiSearchInput/ResultsDisplay';
 export interface ISearchMenuOption {
     name?: string;
     groupTitle?: string;

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

@@ -1,21 +1,12 @@
 import React, { ReactElement } from 'react';
 import 'react-loading-skeleton/dist/skeleton.css';
-export interface ISearchResult {
-    id: string;
-    description: string;
-}
-export interface ISearchGroupedResult {
-    id: string;
-    description: string;
-    label: string;
-    items: ISearchResult[];
-}
-export interface ISearchInputProps {
+import { ISearchGroupedResult, ISearchResult } from './ResultsDisplay';
+export interface ISearchInputProps<SearchResult extends ISearchResult = ISearchResult> {
     minCharactersForSearch: number;
     placeholderText: string;
-    onSelectOption: (selectedOption: ISearchResult) => void;
-    getOptions: (inputValue: string) => Promise<ISearchResult[] | ISearchGroupedResult[]>;
-    renderItem: (item: ISearchResult) => ReactElement;
+    onSelectOption: (selectedOption: SearchResult) => void;
+    getOptions: (inputValue: string) => Promise<SearchResult[] | ISearchGroupedResult<SearchResult>[]>;
+    renderItem: (item: SearchResult) => ReactElement;
     disclaimer?: string;
     initialValue?: string;
     inputTransformer?: (input: string) => string;
@@ -23,5 +14,4 @@ export interface ISearchInputProps {
     focusUpdate?: boolean;
     onClearCallback?: () => void;
 }
-export declare function isGroupedResult(result: ISearchResult[] | ISearchGroupedResult[]): result is ISearchGroupedResult[];
-export declare const LuiSearchInput: React.FC<React.PropsWithChildren<ISearchInputProps>>;
+export declare const LuiSearchInput: <SearchResult extends ISearchResult = ISearchResult>(props: React.PropsWithChildren<ISearchInputProps<SearchResult>>) => JSX.Element;

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

@@ -1,13 +1,23 @@
 import React, { ReactElement, RefObject } from 'react';
-import { ISearchGroupedResult, ISearchResult } from './LuiSearchInput';
-export interface IResultsProps {
+export interface ISearchResult {
+    id: string;
+    description: string;
+}
+export interface ISearchGroupedResult<SearchResult extends ISearchResult = ISearchResult> {
+    id: string;
+    description: string;
+    label: string;
+    items: SearchResult[];
+}
+export interface IResultsProps<SearchResult extends ISearchResult = ISearchResult> {
     selectedId: string;
     isLoading: boolean;
     onClick: (id: string) => void;
     setSelectedId: (id: string) => void;
-    renderItem: (item: ISearchResult) => ReactElement;
-    results: ISearchResult[] | ISearchGroupedResult[];
+    renderItem: (item: SearchResult) => ReactElement;
+    results: SearchResult[] | ISearchGroupedResult<SearchResult>[];
     selectedRef: RefObject<HTMLDivElement>;
 }
-declare const ResultsDisplay: React.FC<React.PropsWithChildren<IResultsProps>>;
+export declare function isGroupedResult<SearchResult extends ISearchResult = ISearchResult>(result: SearchResult[] | ISearchGroupedResult<SearchResult>[]): result is ISearchGroupedResult<SearchResult>[];
+declare const ResultsDisplay: <SearchResults extends ISearchResult = ISearchResult>({ isLoading, onClick, children, selectedId, selectedRef, setSelectedId, results, renderItem, }: React.PropsWithChildren<IResultsProps<SearchResults>>) => ReactElement;
 export default ResultsDisplay;

package/dist/index.d.ts

@@ -37,7 +37,8 @@ export * from './components/LuiHeaderMenu/LuiHeaderMenus';
 export * from './components/LuiHeaderMenuV2/LuiHeaderMenusV2';
 export { LuiUpdatesSplashModal } from './components/LuiUpdateSplashModal/LuiUpdatesSplashModal';
 export { LuiModal, LuiAlertModal, LuiAlertModalButtons, } from './components/LuiModal/LuiModal';
-export { type ISearchInputProps, type ISearchGroupedResult, type ISearchResult, LuiSearchInput, } from './components/LuiSearchInput/LuiSearchInput';
+export { type ISearchInputProps, LuiSearchInput, } from './components/LuiSearchInput/LuiSearchInput';
+export { type ISearchGroupedResult, type ISearchResult, } from './components/LuiSearchInput/ResultsDisplay';
 export { type ISearchMenuOption, type ILuiSearchBoxProps, LuiSearchBox, } from './components/LuiSearchBox/LuiSearchBox';
 export { type ILuiSplitButtonProps, type ILuiSplitButtonMenuItemProps, LuiSplitButtonPosition, LuiSplitButtonMenuItem, LuiSplitButton, } from './components/LuiSplitButton/LuiSplitButton';
 export { LuiErrorPage } from './components/LuiErrorPage/LuiErrorPage';

package/dist/index.js

@@ -42336,6 +42336,12 @@ function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, con
 }
 
 var SKELETON_COUNT = 3;
+function isGroupedResult(result) {
+    if (result && result.length) {
+        return (result[0].items !== undefined);
+    }
+    return false;
+}
 var ResultsDisplay = function (_a) {
     var isLoading = _a.isLoading, onClick = _a.onClick, children = _a.children, selectedId = _a.selectedId, selectedRef = _a.selectedRef, setSelectedId = _a.setSelectedId, results = _a.results, renderItem = _a.renderItem;
     var ResultLine = function (result) {
@@ -42367,12 +42373,6 @@ var ResultsDisplay = function (_a) {
         children));
 };
 
-function isGroupedResult(result) {
-    if (result && result.length) {
-        return result[0].items !== undefined;
-    }
-    return false;
-}
 function flatten(items) {
     if (isGroupedResult(items)) {
         return items.flatMap(function (item) { return item.items; });