@etsoo/materialui 1.5.98 → 1.6.0

package/lib/cjs/ComboBox.js

@@ -27,7 +27,7 @@ function ComboBox(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading", "open", "add");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idIsString = false, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
+    const { disabled, search = false, autoAddBlankItem = search, idField = "id", idValue, idIsString = false, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
     // Options state
@@ -124,7 +124,7 @@ function ComboBox(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue, disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom

package/lib/cjs/ComboBoxMultiple.js

@@ -29,7 +29,7 @@ function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
     // Options state
@@ -121,11 +121,11 @@ function ComboBoxMultiple(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue == null
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue == null
                     ? []
                     : Array.isArray(stateValue)
                         ? stateValue
-                        : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                        : [stateValue], disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value.concat());
                     // Custom

package/lib/cjs/InputField.d.ts

@@ -5,21 +5,17 @@ import { TextFieldProps } from "@mui/material/TextField";
  */
 export type InputFieldProps = TextFieldProps & {
     /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
+     * Change [delay (ms), Minimum characters] to avoid repeatly dispatch
      */
-    changeDelay?: number;
+    changeDelay?: [number, number?];
     /**
-     * Change delay handler, without it onChange will be applied
+     * Change delay handler
      */
     onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /**
      * Is the field read only?
      */
     readOnly?: boolean;
-    /**
-     * Minimum characters to trigger the change event
-     */
-    minChars?: number;
 };
 /**
  * Input field

package/lib/cjs/InputField.js

@@ -16,31 +16,29 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
  */
 function InputField(props) {
     // Destruct
-    const { InputProps = {}, inputProps = {}, slotProps, changeDelay, onChange, onChangeDelay, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
+    const { InputProps = {}, inputProps = {}, slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, ...rest } = props;
     // Slot props
     const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = react_2.default.useRef(true);
     const createDelayed = () => {
-        if (changeDelay != null && changeDelay >= 1) {
-            const changeHandler = onChangeDelay ?? onChange;
-            if (changeHandler)
-                return (0, react_1.useDelayedExecutor)(changeHandler, changeDelay);
+        if (onChangeDelay && changeDelay && changeDelay[0] >= 1) {
+            return (0, react_1.useDelayedExecutor)(onChangeDelay, changeDelay[0]);
         }
         return undefined;
     };
     const delayed = createDelayed();
     const onChangeEx = (event) => {
-        // Min characters check
-        const len = event.target.value.length;
-        if (len > 0 && len < minChars) {
-            // Avoid to trigger the form change event
-            event.stopPropagation();
-            event.preventDefault();
-            return;
+        // Change handler
+        onChange?.(event);
+        if (onChangeDelay && changeDelay && delayed) {
+            const [_, minChars = 0] = changeDelay;
+            if (minChars > 0) {
+                const len = event.target.value.length;
+                if (len < minChars)
+                    return;
+            }
+            delayed.call(undefined, event);
         }
-        if (onChange && (delayed == null || onChangeDelay != null))
-            onChange(event);
-        delayed?.call(undefined, event);
     };
     react_2.default.useEffect(() => {
         return () => {
@@ -51,7 +49,7 @@ function InputField(props) {
     // Layout
     return ((0, jsx_runtime_1.jsx)(TextField_1.default, { slotProps: {
             htmlInput: {
-                ["data-min-chars"]: minChars,
+                ["data-min-chars"]: changeDelay?.[1],
                 ...htmlInput,
                 ...inputProps
             },

package/lib/cjs/InputTipField.js

@@ -35,7 +35,7 @@ function InputTipField(props) {
     const [anchorEl, setAnchorEl] = react_1.default.useState();
     const [data, setData] = react_1.default.useState();
     // Destruct
-    const { component = "input", componentProps, changeDelay = 480, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
+    const { component = "input", componentProps, changeDelay, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
     const { labelProps = {
         title: app?.get("clickForDetails"),
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }

package/lib/cjs/IntInputField.js

@@ -18,7 +18,7 @@ const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
  */
 function IntInputField(props) {
     // Destruct
-    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
+    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = [600], onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
     // State
     const [localValue, setLocalValue] = react_1.default.useState();
     const setValue = (value, source, init = false) => {

package/lib/cjs/QuickList.js

@@ -40,7 +40,7 @@ function QuickList(props) {
         loadDataLocal();
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: gap, height: height, ...rest, children: [(0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: gap, height: height, ...rest, children: [(0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, onChangeDelay: (event) => {
                     // Stop bubble
                     event.preventDefault();
                     event.stopPropagation();

package/lib/cjs/TagList.d.ts

@@ -12,7 +12,7 @@ export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "o
     /**
      * Input props
      */
-    inputProps?: Omit<InputFieldProps, "onChange">;
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
     /**
      * Max items
      */

package/lib/cjs/TagList.js

@@ -20,7 +20,7 @@ function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
+    const { renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return (0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
@@ -54,7 +54,7 @@ function TagList(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, onChangeDelay: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/cjs/TagListPro.d.ts

@@ -13,7 +13,7 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<Autocomplete
     /**
      * Input props
      */
-    inputProps?: Omit<InputFieldProps, "onChange">;
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
     /**
      * Max items
      */

package/lib/cjs/TagListPro.js

@@ -56,7 +56,7 @@ function TagListPro(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, onChangeDelay: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/cjs/Tiplist.js

@@ -23,7 +23,7 @@ function Tiplist(props) {
     // Labels
     const { noOptions, loading, more1 = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more1", "open") ?? {};
     // Destruct
-    const { search = false, idField = "id", idValue, idIsString = false, 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, getOptionKey = (option) => `${option[idField]}`, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
+    const { search = false, idField = "id", idValue, idIsString = false, 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, getOptionKey = (option) => `${option[idField]}`, getOptionLabel, getOptionDisabled, sx = {}, minChars, disabled, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -77,8 +77,12 @@ function Tiplist(props) {
         }
         // Stop bubble
         event.stopPropagation();
+        const value = event.currentTarget.value;
+        if (minChars && minChars > 0 && value.length < minChars) {
+            return;
+        }
         // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
+        delayed.call(undefined, value);
     };
     // Directly load data
     const loadDataDirect = (keyword, id) => {
@@ -172,7 +176,7 @@ function Tiplist(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, disabled: disabled, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom
@@ -197,7 +201,7 @@ function Tiplist(props) {
                         open: false,
                         ...(!states.value && { options: [] })
                     });
-                }, loading: states.loading, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.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 })) : ((0, jsx_runtime_1.jsx)(InputField_1.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) => {
+                }, loading: states.loading, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.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) => {
                     if (item[idField] === "n/a")
                         return true;
                     return getOptionDisabled ? getOptionDisabled(item) : false;

package/lib/cjs/TiplistPro.js

@@ -22,7 +22,7 @@ function TiplistPro(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     // Destruct
-    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, getOptionKey = (option) => typeof option === "string" ? option : option.id, onChange, onValueChange, minChars, ...rest } = props;
+    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, getOptionKey = (option) => typeof option === "string" ? option : option.id, onChange, onValueChange, minChars, disabled, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -66,8 +66,12 @@ function TiplistPro(props) {
         }
         // Stop bubble
         event.stopPropagation();
+        const value = event.currentTarget.value;
+        if (minChars && minChars > 0 && value.length < minChars) {
+            return;
+        }
         // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
+        delayed.call(undefined, value);
     };
     // Directly load data
     const loadDataDirect = (keyword, id) => {
@@ -158,7 +162,7 @@ function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, disabled: disabled, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);
@@ -189,7 +193,7 @@ function TiplistPro(props) {
                         open: false,
                         ...(!states.value && { options: [] })
                     });
-                }, loading: states.loading, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { minChars: minChars, ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
+                }, loading: states.loading, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...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, getOptionKey: getOptionKey, getOptionDisabled: (item) => {

package/lib/mjs/ComboBox.js

@@ -21,7 +21,7 @@ export function ComboBox(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading", "open", "add");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idIsString = false, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
+    const { disabled, search = false, autoAddBlankItem = search, idField = "id", idValue, idIsString = false, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -118,7 +118,7 @@ export function ComboBox(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), _jsxs(Stack, { gap: 0.5, direction: "row", width: "100%", children: [_jsx(Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsxs(Stack, { gap: 0.5, direction: "row", width: "100%", children: [_jsx(Autocomplete, { value: stateValue, disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom

package/lib/mjs/ComboBoxMultiple.js

@@ -23,7 +23,7 @@ export function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -115,11 +115,11 @@ export function ComboBoxMultiple(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { value: stateValue == null
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsx(Autocomplete, { value: stateValue == null
                     ? []
                     : Array.isArray(stateValue)
                         ? stateValue
-                        : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                        : [stateValue], disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value.concat());
                     // Custom

package/lib/mjs/InputField.d.ts

@@ -5,21 +5,17 @@ import { TextFieldProps } from "@mui/material/TextField";
  */
 export type InputFieldProps = TextFieldProps & {
     /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
+     * Change [delay (ms), Minimum characters] to avoid repeatly dispatch
      */
-    changeDelay?: number;
+    changeDelay?: [number, number?];
     /**
-     * Change delay handler, without it onChange will be applied
+     * Change delay handler
      */
     onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /**
      * Is the field read only?
      */
     readOnly?: boolean;
-    /**
-     * Minimum characters to trigger the change event
-     */
-    minChars?: number;
 };
 /**
  * Input field

package/lib/mjs/InputField.js

@@ -10,31 +10,29 @@ import TextField from "@mui/material/TextField";
  */
 export function InputField(props) {
     // Destruct
-    const { InputProps = {}, inputProps = {}, slotProps, changeDelay, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
+    const { InputProps = {}, inputProps = {}, slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
     // Slot props
     const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = React.useRef(true);
     const createDelayed = () => {
-        if (changeDelay != null && changeDelay >= 1) {
-            const changeHandler = onChangeDelay ?? onChange;
-            if (changeHandler)
-                return useDelayedExecutor(changeHandler, changeDelay);
+        if (onChangeDelay && changeDelay && changeDelay[0] >= 1) {
+            return useDelayedExecutor(onChangeDelay, changeDelay[0]);
         }
         return undefined;
     };
     const delayed = createDelayed();
     const onChangeEx = (event) => {
-        // Min characters check
-        const len = event.target.value.length;
-        if (len > 0 && len < minChars) {
-            // Avoid to trigger the form change event
-            event.stopPropagation();
-            event.preventDefault();
-            return;
+        // Change handler
+        onChange?.(event);
+        if (onChangeDelay && changeDelay && delayed) {
+            const [_, minChars = 0] = changeDelay;
+            if (minChars > 0) {
+                const len = event.target.value.length;
+                if (len < minChars)
+                    return;
+            }
+            delayed.call(undefined, event);
         }
-        if (onChange && (delayed == null || onChangeDelay != null))
-            onChange(event);
-        delayed?.call(undefined, event);
     };
     React.useEffect(() => {
         return () => {
@@ -45,7 +43,7 @@ export function InputField(props) {
     // Layout
     return (_jsx(TextField, { slotProps: {
             htmlInput: {
-                ["data-min-chars"]: minChars,
+                ["data-min-chars"]: changeDelay?.[1],
                 ...htmlInput,
                 ...inputProps
             },

package/lib/mjs/InputTipField.js

@@ -29,7 +29,7 @@ export function InputTipField(props) {
     const [anchorEl, setAnchorEl] = React.useState();
     const [data, setData] = React.useState();
     // Destruct
-    const { component = "input", componentProps, changeDelay = 480, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
+    const { component = "input", componentProps, changeDelay, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
     const { labelProps = {
         title: app?.get("clickForDetails"),
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }

package/lib/mjs/IntInputField.js

@@ -12,7 +12,7 @@ import IconButton from "@mui/material/IconButton";
  */
 export function IntInputField(props) {
     // Destruct
-    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
+    const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = [600], onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
     // State
     const [localValue, setLocalValue] = React.useState();
     const setValue = (value, source, init = false) => {

package/lib/mjs/QuickList.js

@@ -34,7 +34,7 @@ export function QuickList(props) {
         loadDataLocal();
     }, []);
     // Layout
-    return (_jsxs(VBox, { gap: gap, height: height, ...rest, children: [_jsx(InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
+    return (_jsxs(VBox, { gap: gap, height: height, ...rest, children: [_jsx(InputField, { label: label, onChangeDelay: (event) => {
                     // Stop bubble
                     event.preventDefault();
                     event.stopPropagation();

package/lib/mjs/TagList.d.ts

@@ -12,7 +12,7 @@ export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "o
     /**
      * Input props
      */
-    inputProps?: Omit<InputFieldProps, "onChange">;
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
     /**
      * Max items
      */

package/lib/mjs/TagList.js

@@ -14,7 +14,7 @@ export function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = ({ key, ...props }, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderTags = (value, getTagProps) => value.map((option, index) => {
+    const { renderOption = ({ key, ...props }, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return _jsx(Chip, { variant: "outlined", label: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
@@ -48,7 +48,7 @@ export function TagList(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (_jsx(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, clearOnBlur: true, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => (_jsx(InputField, { label: label, onChangeDelay: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/mjs/TagListPro.d.ts

@@ -13,7 +13,7 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<Autocomplete
     /**
      * Input props
      */
-    inputProps?: Omit<InputFieldProps, "onChange">;
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
     /**
      * Max items
      */

package/lib/mjs/TagListPro.js

@@ -50,7 +50,7 @@ export function TagListPro(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => (_jsx(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => (_jsx(InputField, { label: label, onChangeDelay: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();

package/lib/mjs/Tiplist.js

@@ -17,7 +17,7 @@ export function Tiplist(props) {
     // Labels
     const { noOptions, loading, more1 = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more1", "open") ?? {};
     // Destruct
-    const { search = false, idField = "id", idValue, idIsString = false, 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, getOptionKey = (option) => `${option[idField]}`, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
+    const { search = false, idField = "id", idValue, idIsString = false, 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, getOptionKey = (option) => `${option[idField]}`, getOptionLabel, getOptionDisabled, sx = {}, minChars, disabled, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -71,8 +71,12 @@ export function Tiplist(props) {
         }
         // Stop bubble
         event.stopPropagation();
+        const value = event.currentTarget.value;
+        if (minChars && minChars > 0 && value.length < minChars) {
+            return;
+        }
         // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
+        delayed.call(undefined, value);
     };
     // Directly load data
     const loadDataDirect = (keyword, id) => {
@@ -166,7 +170,7 @@ export function Tiplist(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, disabled: disabled, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom
@@ -191,7 +195,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, 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) => {
+                }, 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) => {
                     if (item[idField] === "n/a")
                         return true;
                     return getOptionDisabled ? getOptionDisabled(item) : false;

package/lib/mjs/TiplistPro.js

@@ -16,7 +16,7 @@ export function TiplistPro(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     // Destruct
-    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, getOptionKey = (option) => typeof option === "string" ? option : option.id, onChange, onValueChange, minChars, ...rest } = props;
+    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, getOptionKey = (option) => typeof option === "string" ? option : option.id, onChange, onValueChange, minChars, disabled, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -60,8 +60,12 @@ export function TiplistPro(props) {
         }
         // Stop bubble
         event.stopPropagation();
+        const value = event.currentTarget.value;
+        if (minChars && minChars > 0 && value.length < minChars) {
+            return;
+        }
         // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
+        delayed.call(undefined, value);
     };
     // Directly load data
     const loadDataDirect = (keyword, id) => {
@@ -152,7 +156,7 @@ export function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, disabled: disabled, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);
@@ -183,7 +187,7 @@ export function TiplistPro(props) {
                         open: false,
                         ...(!states.value && { options: [] })
                     });
-                }, loading: states.loading, renderInput: (params) => (_jsx(InputField, { minChars: minChars, ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
+                }, loading: states.loading, renderInput: (params) => (_jsx(InputField, { ...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, getOptionKey: getOptionKey, getOptionDisabled: (item) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.98",
+  "version": "1.6.0",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -44,9 +44,9 @@
     "@etsoo/notificationbase": "^1.1.66",
     "@etsoo/react": "^1.8.68",
     "@etsoo/shared": "^1.2.80",
-    "@mui/icons-material": "^7.3.6",
-    "@mui/material": "^7.3.6",
-    "@mui/x-data-grid": "^8.23.0",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
+    "@mui/x-data-grid": "^8.24.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.1",

package/src/ComboBox.tsx

@@ -86,6 +86,7 @@ export function ComboBox<
 
   // Destruct
   const {
+    disabled,
     search = false,
     autoAddBlankItem = search,
     idField = "id" as D,
@@ -246,11 +247,13 @@ export function ComboBox<
         value={getValue(stateValue)}
         readOnly
         onChange={inputOnChange}
+        disabled={disabled}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
       <Stack gap={0.5} direction="row" width="100%">
         <Autocomplete<T, false, false, false>
           value={stateValue}
+          disabled={disabled}
           disableCloseOnSelect={disableCloseOnSelect}
           getOptionLabel={getOptionLabel}
           isOptionEqualToValue={(option: T, value: T) =>

package/src/ComboBoxMultiple.tsx

@@ -126,6 +126,7 @@ export function ComboBoxMultiple<
     sx = { minWidth: "150px" },
     noOptionsText = labels?.noOptions,
     loadingText = labels?.loading,
+    disabled,
     ...rest
   } = props;
 
@@ -249,6 +250,7 @@ export function ComboBoxMultiple<
         value={getValue(stateValue)}
         readOnly
         onChange={inputOnChange}
+        disabled={disabled}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
       <Autocomplete<T, true, false, false>
@@ -259,6 +261,7 @@ export function ComboBoxMultiple<
             ? stateValue
             : [stateValue]
         }
+        disabled={disabled}
         disableCloseOnSelect={disableCloseOnSelect}
         getOptionLabel={getOptionLabel}
         getOptionKey={getOptionKey}

package/src/InputField.tsx

@@ -8,12 +8,12 @@ import TextField, { TextFieldProps } from "@mui/material/TextField";
  */
 export type InputFieldProps = TextFieldProps & {
   /**
-   * Change delay (ms) to avoid repeatly dispatch onChange
+   * Change [delay (ms), Minimum characters] to avoid repeatly dispatch
    */
-  changeDelay?: number;
+  changeDelay?: [number, number?];
 
   /**
-   * Change delay handler, without it onChange will be applied
+   * Change delay handler
    */
   onChangeDelay?: React.ChangeEventHandler<
     HTMLTextAreaElement | HTMLInputElement
@@ -23,11 +23,6 @@ export type InputFieldProps = TextFieldProps & {
    * Is the field read only?
    */
   readOnly?: boolean;
-
-  /**
-   * Minimum characters to trigger the change event
-   */
-  minChars?: number;
 };
 
 /**
@@ -41,13 +36,12 @@ export function InputField(props: InputFieldProps) {
     InputProps = {},
     inputProps = {},
     slotProps,
-    changeDelay,
     onChange,
     onChangeDelay,
+    changeDelay = onChangeDelay ? [480] : undefined,
     readOnly,
     size = MUGlobal.inputFieldSize,
     variant = MUGlobal.inputFieldVariant,
-    minChars = 0,
     ...rest
   } = props;
 
@@ -56,9 +50,8 @@ export function InputField(props: InputFieldProps) {
 
   const isMounted = React.useRef(true);
   const createDelayed = () => {
-    if (changeDelay != null && changeDelay >= 1) {
-      const changeHandler = onChangeDelay ?? onChange;
-      if (changeHandler) return useDelayedExecutor(changeHandler, changeDelay);
+    if (onChangeDelay && changeDelay && changeDelay[0] >= 1) {
+      return useDelayedExecutor(onChangeDelay, changeDelay[0]);
     }
     return undefined;
   };
@@ -67,17 +60,19 @@ export function InputField(props: InputFieldProps) {
   const onChangeEx = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    // Min characters check
-    const len = event.target.value.length;
-    if (len > 0 && len < minChars) {
-      // Avoid to trigger the form change event
-      event.stopPropagation();
-      event.preventDefault();
-      return;
-    }
+    // Change handler
+    onChange?.(event);
 
-    if (onChange && (delayed == null || onChangeDelay != null)) onChange(event);
-    delayed?.call(undefined, event);
+    if (onChangeDelay && changeDelay && delayed) {
+      const [_, minChars = 0] = changeDelay;
+
+      if (minChars > 0) {
+        const len = event.target.value.length;
+        if (len < minChars) return;
+      }
+
+      delayed.call(undefined, event);
+    }
   };
 
   React.useEffect(() => {
@@ -92,7 +87,7 @@ export function InputField(props: InputFieldProps) {
     <TextField
       slotProps={{
         htmlInput: {
-          ["data-min-chars"]: minChars,
+          ["data-min-chars"]: changeDelay?.[1],
           ...htmlInput,
           ...inputProps
         },

package/src/InputTipField.tsx

@@ -96,7 +96,7 @@ export function InputTipField<T extends ItemType = ItemType>(
   const {
     component = "input",
     componentProps,
-    changeDelay = 480,
+    changeDelay,
     onChangeDelay,
     fullWidth = true,
     slotProps = {},

package/src/IntInputField.tsx

@@ -87,7 +87,7 @@ export function IntInputField(props: IntInputFieldProps) {
     endSymbol,
     symbol,
     value,
-    changeDelay = 600,
+    changeDelay = [600],
     onChangeDelay,
     onChange,
     onFocus = (event) => event.currentTarget.select(),

package/src/QuickList.tsx

@@ -118,11 +118,11 @@ export function QuickList<T extends ListType2 = ListType2>(
     <VBox gap={gap} height={height} {...rest}>
       <InputField
         label={label}
-        changeDelay={480}
         onChangeDelay={(event) => {
           // Stop bubble
           event.preventDefault();
           event.stopPropagation();
+
           loadDataLocal(event.target.value);
         }}
         fullWidth

package/src/TagList.tsx

@@ -27,7 +27,7 @@ export type TagListProps = Omit<
   /**
    * Input props
    */
-  inputProps?: Omit<InputFieldProps, "onChange">;
+  inputProps?: Omit<InputFieldProps, "onChangeDelay">;
 
   /**
    * Max items
@@ -62,7 +62,7 @@ export function TagList(props: TagListProps) {
         {option}
       </li>
     ),
-    renderTags = (value: readonly string[], getTagProps) =>
+    renderValue = (value: readonly string[], getTagProps) =>
       value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return <Chip variant="outlined" key={key} label={option} {...rest} />;
@@ -129,12 +129,11 @@ export function TagList(props: TagListProps) {
       clearOnBlur
       openOnFocus={openOnFocus}
       renderOption={renderOption}
-      renderTags={renderTags}
+      renderValue={renderValue}
       renderInput={(params) => (
         <InputField
           label={label}
-          changeDelay={480}
-          onChange={async (event) => {
+          onChangeDelay={async (event) => {
             // Stop bubble
             event.preventDefault();
             event.stopPropagation();

package/src/TagListPro.tsx

@@ -28,7 +28,7 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<
   /**
    * Input props
    */
-  inputProps?: Omit<InputFieldProps, "onChange">;
+  inputProps?: Omit<InputFieldProps, "onChangeDelay">;
 
   /**
    * Max items
@@ -147,8 +147,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
       renderInput={(params) => (
         <InputField
           label={label}
-          changeDelay={480}
-          onChange={async (event) => {
+          onChangeDelay={async (event) => {
             // Stop bubble
             event.preventDefault();
             event.stopPropagation();

package/src/Tiplist.tsx

@@ -102,6 +102,7 @@ export function Tiplist<
     getOptionDisabled,
     sx = {},
     minChars,
+    disabled,
     ...rest
   } = props;
 
@@ -177,8 +178,13 @@ export function Tiplist<
     // Stop bubble
     event.stopPropagation();
 
+    const value = event.currentTarget.value;
+    if (minChars && minChars > 0 && value.length < minChars) {
+      return;
+    }
+
     // Call with delay
-    delayed.call(undefined, event.currentTarget.value);
+    delayed.call(undefined, value);
   };
 
   // Directly load data
@@ -297,10 +303,12 @@ export function Tiplist<
         }`}
         readOnly
         onChange={inputOnChange}
+        disabled={disabled}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
       <Autocomplete<T, undefined, false, false>
         filterOptions={(options, _state) => options}
+        disabled={disabled}
         value={states.value}
         options={states.options}
         onChange={(event, value, reason, details) => {
@@ -349,7 +357,6 @@ export function Tiplist<
               label={label}
               name={name + "Input"}
               margin={inputMargin}
-              minChars={minChars}
               variant={inputVariant}
               required={inputRequired}
               autoComplete={inputAutoComplete}
@@ -363,7 +370,6 @@ export function Tiplist<
               label={label}
               name={name + "Input"}
               margin={inputMargin}
-              minChars={minChars}
               variant={inputVariant}
               required={inputRequired}
               autoComplete={inputAutoComplete}

package/src/TiplistPro.tsx

@@ -132,6 +132,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     onChange,
     onValueChange,
     minChars,
+    disabled,
     ...rest
   } = props;
 
@@ -194,8 +195,13 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     // Stop bubble
     event.stopPropagation();
 
+    const value = event.currentTarget.value;
+    if (minChars && minChars > 0 && value.length < minChars) {
+      return;
+    }
+
     // Call with delay
-    delayed.call(undefined, event.currentTarget.value);
+    delayed.call(undefined, value);
   };
 
   // Directly load data
@@ -309,12 +315,14 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         value={inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}
         readOnly
         onChange={inputOnChange}
+        disabled={disabled}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
       <Autocomplete<T, false, false, true>
         filterOptions={(options, _state) => options}
         value={states.value}
         options={states.options}
+        disabled={disabled}
         freeSolo
         clearOnBlur={false}
         onChange={(event, value, reason, details) => {
@@ -363,7 +371,6 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         loading={states.loading}
         renderInput={(params) => (
           <InputField
-            minChars={minChars}
             {...inputProps}
             {...params}
             onChange={changeHandle}