@etsoo/materialui 1.4.39 → 1.4.41

package/__tests__/ComboBox.tsx

@@ -1,6 +1,12 @@
 import React from "react";
 import { ComboBox } from "../src";
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor
+} from "@testing-library/react";
 
 it("Render ComboBox", async () => {
   // Arrange
@@ -21,11 +27,19 @@ it("Render ComboBox", async () => {
     );
   });
 
+  await vi.waitFor(
+    async () => {
+      await screen.findByRole("button");
+    },
+    {
+      timeout: 500, // default is 1000
+      interval: 20 // default is 50
+    }
+  );
+
   // Act, click the list
-  act(() => {
-    const clicked = fireEvent.click(screen.getByRole("button"));
-    expect(clicked).toBeTruthy();
-  });
+  const clicked = fireEvent.click(screen.getByRole("button"));
+  expect(clicked).toBeTruthy();
 
   // Get list item
   const item = screen.getByText("Name 1");

package/lib/ComboBox.js

@@ -50,6 +50,7 @@ export function ComboBox(props) {
         }
     }, [localValue]);
     // Add readOnly
+    // Before AutocompleteRenderInputParams changed, impossible to remove "InputLabelProps" and "InputProps"
     const addReadOnly = (params) => {
         if (readOnly != null) {
             Object.assign(params, { readOnly });

package/lib/InputField.d.ts

@@ -16,6 +16,10 @@ export type InputFieldProps = TextFieldProps & {
      * Is the field read only?
      */
     readOnly?: boolean;
+    /**
+     * Minimum characters to trigger the change event
+     */
+    minChars?: number;
 };
 /**
  * Input field
@@ -35,6 +39,10 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Is the field read only?
      */
     readOnly?: boolean;
+    /**
+     * Minimum characters to trigger the change event
+     */
+    minChars?: number;
 }, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
@@ -48,6 +56,10 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Is the field read only?
      */
     readOnly?: boolean;
+    /**
+     * Minimum characters to trigger the change event
+     */
+    minChars?: number;
 }, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
@@ -61,4 +73,8 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Is the field read only?
      */
     readOnly?: boolean;
+    /**
+     * Minimum characters to trigger the change event
+     */
+    minChars?: number;
 }, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/lib/InputField.js

@@ -10,7 +10,7 @@ import { MUGlobal } from "./MUGlobal";
  */
 export const InputField = React.forwardRef((props, ref) => {
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
     // Shrink
     InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
     // Read only
@@ -27,6 +27,10 @@ export const InputField = React.forwardRef((props, ref) => {
     };
     const delayed = createDelayed();
     const onChangeEx = (event) => {
+        // Min characters check
+        const len = event.target.value.length;
+        if (len > 0 && len < minChars)
+            return;
         if (onChange && (delayed == null || onChangeDelay != null))
             onChange(event);
         delayed?.call(undefined, event);

package/lib/MUUtils.js

@@ -45,6 +45,9 @@ export var MUUtils;
                 const keysets = orderBy.map((o) => Reflect.get(lastItem, o.field));
                 data.queryPaging.keysets = keysets;
             }
+            else {
+                data.queryPaging.keysets = undefined;
+            }
         }
         return data;
     }

package/lib/SearchBar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Drawer, IconButton, Stack } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import { DomUtils } from "@etsoo/shared";
+import { DomUtils, NumberUtils } from "@etsoo/shared";
 import { ReactUtils, useDelayedExecutor, useDimensions } from "@etsoo/react";
 import { Labels } from "./app/Labels";
 // Cached width attribute name
@@ -186,6 +186,16 @@ export function SearchBar(props) {
     const moreFormChange = (event) => {
         if (event.nativeEvent.cancelable && !event.nativeEvent.composed)
             return;
+        if (event.target instanceof HTMLInputElement ||
+            event.target instanceof HTMLTextAreaElement) {
+            const minChars = NumberUtils.parse(event.target.dataset.minChars);
+            if (minChars != null && minChars > 0) {
+                const len = event.target.value.length;
+                if (len > 0 && len < minChars) {
+                    return;
+                }
+            }
+        }
         if (state.moreForm == null)
             state.moreForm = event.currentTarget;
         delayed.call();

package/lib/SearchField.d.ts

@@ -11,6 +11,10 @@ export type SearchFieldProps = TextFieldProps & {
      * Is the field read only?
      */
     readOnly?: boolean;
+    /**
+     * Minimum characters to trigger the change event
+     */
+    minChars?: number;
 };
 /**
  * Search field

package/lib/SearchField.js

@@ -10,7 +10,7 @@ import { MUGlobal } from "./MUGlobal";
  */
 export function SearchField(props) {
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, ...rest } = props;
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
     // Shrink
     InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
     // Read only
@@ -23,6 +23,10 @@ export function SearchField(props) {
     const onChangeEx = (event) => {
         if (onChange == null)
             return;
+        // Min characters check
+        const len = event.target.value.length;
+        if (len > 0 && len < minChars)
+            return;
         if (changeDelay == null || changeDelay < 1) {
             onChange(event);
             return;

package/lib/Tiplist.d.ts

@@ -12,6 +12,10 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<A
      * Max items to read and display
      */
     maxItems?: number;
+    /**
+     * Minimum characters to trigger the change event
+     */
+    minChars?: number;
     /**
      * Width
      */

package/lib/Tiplist.js

@@ -15,7 +15,7 @@ export function Tiplist(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
     // Destruct
-    const { search = false, idField = "id", idValue, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, ...rest } = props;
+    const { search = false, idField = "id", idValue, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -189,7 +189,7 @@ export function Tiplist(props) {
                         open: false,
                         ...(!states.value && { options: [] })
                     });
-                }, loading: states.loading, renderInput: (params) => search ? (_jsx(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (_jsx(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                }, loading: states.loading, renderInput: (params) => search ? (_jsx(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, minChars: minChars, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (_jsx(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, minChars: minChars, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
                     if (item[idField] === "n/a")
                         return true;
                     return getOptionDisabled ? getOptionDisabled(item) : false;

package/lib/TiplistPro.d.ts

@@ -47,6 +47,10 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<Autocomplete
      * @param value New value
      */
     onValueChange?: (value: T | null) => void;
+    /**
+     * Minimum characters to trigger the change event
+     */
+    minChars?: number;
 };
 /**
  * TiplistPro

package/lib/TiplistPro.js

@@ -14,7 +14,7 @@ export function TiplistPro(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
     // Destruct
-    const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, ...rest } = props;
+    const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -181,7 +181,7 @@ export function TiplistPro(props) {
                         open: false,
                         ...(!states.value && { options: [] })
                     });
-                }, loading: states.loading, renderInput: (params) => (_jsx(InputField, { ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
+                }, loading: states.loading, renderInput: (params) => (_jsx(InputField, { minChars: minChars, ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
                         if (states.value == null && onChange)
                             onChange(event, event.target.value, "blur", undefined);
                     }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {

package/lib/pages/FixedListPage.js

@@ -39,8 +39,8 @@ export function FixedListPage(props) {
         states.data = data;
         reset();
     };
-    const localLoadData = (props) => {
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
+    const localLoadData = (props, lastItem) => {
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/lib/pages/ListPage.js

@@ -37,8 +37,8 @@ export function ListPage(props) {
         states.data = data;
         reset();
     };
-    const localLoadData = (props) => {
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
+    const localLoadData = (props, lastItem) => {
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/lib/pages/TablePage.js

@@ -36,8 +36,8 @@ export function TablePage(props) {
         states.data = data;
         reset();
     };
-    const localLoadData = (props) => {
-        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey));
+    const localLoadData = (props, lastItem) => {
+        return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey), lastItem);
     };
     // Search data
     const searchData = GridUtils.getSearchData(cacheKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.39",
+  "version": "1.4.41",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "type": "module",

package/src/ComboBox.tsx

@@ -160,6 +160,7 @@ export function ComboBox<
   }, [localValue]);
 
   // Add readOnly
+  // Before AutocompleteRenderInputParams changed, impossible to remove "InputLabelProps" and "InputProps"
   const addReadOnly = (params: AutocompleteRenderInputParams) => {
     if (readOnly != null) {
       Object.assign(params, { readOnly });

package/src/InputField.tsx

@@ -23,6 +23,11 @@ export type InputFieldProps = TextFieldProps & {
    * Is the field read only?
    */
   readOnly?: boolean;
+
+  /**
+   * Minimum characters to trigger the change event
+   */
+  minChars?: number;
 };
 
 /**
@@ -42,6 +47,7 @@ export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
       readOnly,
       size = MUGlobal.inputFieldSize,
       variant = MUGlobal.inputFieldVariant,
+      minChars = 0,
       ...rest
     } = props;
 
@@ -65,6 +71,10 @@ export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
     const onChangeEx = (
       event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
     ) => {
+      // Min characters check
+      const len = event.target.value.length;
+      if (len > 0 && len < minChars) return;
+
       if (onChange && (delayed == null || onChangeDelay != null))
         onChange(event);
       delayed?.call(undefined, event);

package/src/MUUtils.ts

@@ -57,6 +57,8 @@ export namespace MUUtils {
       if (lastItem) {
         const keysets = orderBy.map((o) => Reflect.get(lastItem, o.field));
         data.queryPaging.keysets = keysets;
+      } else {
+        data.queryPaging.keysets = undefined;
       }
     }
 

package/src/SearchBar.tsx

@@ -1,7 +1,7 @@
 import { Button, Drawer, IconButton, Stack } from "@mui/material";
 import React from "react";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import { DomUtils } from "@etsoo/shared";
+import { DomUtils, NumberUtils } from "@etsoo/shared";
 import { ReactUtils, useDelayedExecutor, useDimensions } from "@etsoo/react";
 import { Labels } from "./app/Labels";
 
@@ -259,6 +259,19 @@ export function SearchBar(props: SearchBarProps) {
   const moreFormChange = (event: React.FormEvent<HTMLFormElement>) => {
     if (event.nativeEvent.cancelable && !event.nativeEvent.composed) return;
 
+    if (
+      event.target instanceof HTMLInputElement ||
+      event.target instanceof HTMLTextAreaElement
+    ) {
+      const minChars = NumberUtils.parse(event.target.dataset.minChars);
+      if (minChars != null && minChars > 0) {
+        const len = event.target.value.length;
+        if (len > 0 && len < minChars) {
+          return;
+        }
+      }
+    }
+
     if (state.moreForm == null) state.moreForm = event.currentTarget;
 
     delayed.call();

package/src/SearchField.tsx

@@ -16,6 +16,11 @@ export type SearchFieldProps = TextFieldProps & {
    * Is the field read only?
    */
   readOnly?: boolean;
+
+  /**
+   * Minimum characters to trigger the change event
+   */
+  minChars?: number;
 };
 
 /**
@@ -33,6 +38,7 @@ export function SearchField(props: SearchFieldProps) {
     readOnly,
     size = MUGlobal.searchFieldSize,
     variant = MUGlobal.searchFieldVariant,
+    minChars = 0,
     ...rest
   } = props;
 
@@ -53,6 +59,10 @@ export function SearchField(props: SearchFieldProps) {
   ) => {
     if (onChange == null) return;
 
+    // Min characters check
+    const len = event.target.value.length;
+    if (len > 0 && len < minChars) return;
+
     if (changeDelay == null || changeDelay < 1) {
       onChange(event);
       return;

package/src/Tiplist.tsx

@@ -28,6 +28,11 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<
    */
   maxItems?: number;
 
+  /**
+   * Minimum characters to trigger the change event
+   */
+  minChars?: number;
+
   /**
    * Width
    */
@@ -89,6 +94,7 @@ export function Tiplist<
     getOptionLabel,
     getOptionDisabled,
     sx = {},
+    minChars,
     ...rest
   } = props;
 
@@ -336,6 +342,7 @@ export function Tiplist<
               label={label}
               name={name + "Input"}
               margin={inputMargin}
+              minChars={minChars}
               variant={inputVariant}
               required={inputRequired}
               autoComplete={inputAutoComplete}
@@ -349,6 +356,7 @@ export function Tiplist<
               label={label}
               name={name + "Input"}
               margin={inputMargin}
+              minChars={minChars}
               variant={inputVariant}
               required={inputRequired}
               autoComplete={inputAutoComplete}

package/src/TiplistPro.tsx

@@ -66,6 +66,11 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<
    * @param value New value
    */
   onValueChange?: (value: T | null) => void;
+
+  /**
+   * Minimum characters to trigger the change event
+   */
+  minChars?: number;
 };
 
 // Multiple states
@@ -114,6 +119,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     getOptionLabel,
     onChange,
     onValueChange,
+    minChars,
     ...rest
   } = props;
 
@@ -345,6 +351,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         loading={states.loading}
         renderInput={(params) => (
           <InputField
+            minChars={minChars}
             {...inputProps}
             {...params}
             onChange={changeHandle}

package/src/pages/FixedListPage.tsx

@@ -88,8 +88,11 @@ export function FixedListPage<
     reset();
   };
 
-  const localLoadData = (props: GridLoadDataProps) => {
-    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
+  const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
+    return loadData(
+      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      lastItem
+    );
   };
 
   // Search data

package/src/pages/ListPage.tsx

@@ -76,8 +76,11 @@ export function ListPage<
     reset();
   };
 
-  const localLoadData = (props: GridLoadDataProps) => {
-    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
+  const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
+    return loadData(
+      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      lastItem
+    );
   };
 
   // Search data

package/src/pages/TablePage.tsx

@@ -83,8 +83,11 @@ export function TablePage<
     reset();
   };
 
-  const localLoadData = (props: GridLoadDataProps) => {
-    return loadData(GridUtils.createLoader<F>(props, fieldTemplate, cacheKey));
+  const localLoadData = (props: GridLoadDataProps, lastItem?: T) => {
+    return loadData(
+      GridUtils.createLoader<F>(props, fieldTemplate, cacheKey),
+      lastItem
+    );
   };
 
   // Search data