@linzjs/lui 21.22.0 → 21.23.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [21.23.1](https://github.com/linz/lui/compare/v21.23.0...v21.23.1) (2024-02-22)
+
+
+### Bug Fixes
+
+* **Splitter:** stop flashing behavior ([#1074](https://github.com/linz/lui/issues/1074)) ([3ebae79](https://github.com/linz/lui/commit/3ebae794183327d144d0d6c8d8985f3bb3326fdf))
+
+# [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/components/Splitter/helpers/useValueSeparator.d.ts

@@ -2,6 +2,8 @@ import { RefObject } from 'react';
 /**
  * Ensures valueNow is set to a valid value within its allowed boundaries.
  * If boundaries and/or initialRatio are not specified, they will be defaulted.
+ * It's possible that multiple events trigger setValueNow simultaneosly with the same value.
+ * This multiple calls are expected, and setValueNow will resize only once.
  */
 export declare const useValueSeparator: ({ separator, ratio, onResized, boundaries: { min, max }, }: {
     ratio?: number | undefined;

package/dist/components/Splitter/helpers/useValueSeparatorEffects.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+/**
+ * Calls setValueNow when the separator attributes change.
+ */
+export declare const useValueSeparatorEffects: (setValueNow: (val?: number) => void, separator: RefObject<HTMLDivElement>, ratio?: number) => void;

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; });
@@ -58680,25 +58680,23 @@ var animateSeparator = function (separatorRef, animate) {
 };
 
 /**
- * Ensures valueNow is set to a valid value within its allowed boundaries.
- * If boundaries and/or initialRatio are not specified, they will be defaulted.
+ * Moves separator as per ratio changes. Centers on first render if ratio is undefined.
  */
-var useValueSeparator = function (_a) {
-    var separator = _a.separator, ratio = _a.ratio, onResized = _a.onResized, _b = _a.boundaries, min = _b.min, max = _b.max;
-    var prev = React.useRef();
-    var setValueNow = React.useCallback(function (val) {
-        var valueNow = getSeparatorAttributes({ ref: separator }).valueNow;
-        var value = val !== null && val !== void 0 ? val : (valueNow || min + (max - min) / 2);
-        var newValue = clampSeparator({ value: value, max: max, min: min });
-        resize(separator, newValue);
-        if (prev.current !== newValue) {
-            prev.current = newValue;
-            onResized === null || onResized === void 0 ? void 0 : onResized(newValue);
-        }
-    }, [onResized, min, max, prev]);
+var useRatioEffect = function (setValueNow, ratio) {
+    var firstRun = React.useRef(true);
     React.useEffect(function () {
-        setValueNow(ratio);
-    }, [setValueNow, ratio]);
+        if (firstRun.current || ratio !== undefined) {
+            firstRun.current = false;
+            // If ratio is undefined, setValueNow will place the separator in the middle as a starting point.
+            // Whatever value is `the middle` will be determined by setValueNow
+            setValueNow(ratio);
+        }
+    }, [setValueNow, ratio, firstRun]);
+};
+/**
+ * Re-arranges the splitter if the limits or orientation change.
+ */
+var useConfigEffect = function (setValueNow, separator) {
     React.useEffect(function () {
         var callback = function () {
             var value = getSeparatorAttributes({ ref: separator }).valueNow;
@@ -58711,6 +58709,11 @@ var useValueSeparator = function (_a) {
         });
         return function () { return observer.disconnect(); };
     }, [separator, setValueNow]);
+};
+/**
+ * Broadcasts changes if separator aria-valuenow was altered.
+ */
+var useValueNowEffect = function (setValueNow, separator) {
     React.useEffect(function () {
         var observer = new MutationObserver(function (_a) {
             var target = _a[0].target;
@@ -58725,6 +58728,36 @@ var useValueSeparator = function (_a) {
         observer.observe(separator.current, { attributeFilter: attributeFilter });
         return function () { return observer.disconnect(); };
     }, [separator, setValueNow]);
+};
+/**
+ * Calls setValueNow when the separator attributes change.
+ */
+var useValueSeparatorEffects = function (setValueNow, separator, ratio) {
+    useRatioEffect(setValueNow, ratio);
+    useConfigEffect(setValueNow, separator);
+    useValueNowEffect(setValueNow, separator);
+};
+
+/**
+ * Ensures valueNow is set to a valid value within its allowed boundaries.
+ * If boundaries and/or initialRatio are not specified, they will be defaulted.
+ * It's possible that multiple events trigger setValueNow simultaneosly with the same value.
+ * This multiple calls are expected, and setValueNow will resize only once.
+ */
+var useValueSeparator = function (_a) {
+    var separator = _a.separator, ratio = _a.ratio, onResized = _a.onResized, _b = _a.boundaries, min = _b.min, max = _b.max;
+    var prev = React.useRef(null);
+    var setValueNow = React.useCallback(function (val) {
+        var valueNow = getSeparatorAttributes({ ref: separator }).valueNow;
+        var value = val !== null && val !== void 0 ? val : (valueNow || min + (max - min) / 2);
+        var newValue = clampSeparator({ value: value, max: max, min: min });
+        resize(separator, newValue);
+        if (prev.current !== newValue) {
+            prev.current = newValue;
+            onResized === null || onResized === void 0 ? void 0 : onResized(newValue);
+        }
+    }, [onResized, min, max, prev]);
+    useValueSeparatorEffects(setValueNow, separator, ratio);
     return { setValueNow: setValueNow };
 };
 var resize = function (separator, value) {