@etsoo/materialui 1.6.1 → 1.6.3

package/lib/cjs/AutocompleteExtendedProps.d.ts

@@ -73,6 +73,7 @@ export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys
     /**
      * Value change handler
      * @param value New value
+     * @param input Input element
      */
-    onValueChange?: (value: T | null) => void;
+    onValueChange?: (value: T | null, input?: HTMLInputElement | null) => void;
 };

package/lib/cjs/ComboBox.js

@@ -56,7 +56,7 @@ function ComboBox(props) {
         if (localValue != null && localValue != stateValue) {
             setStateValue(localValue);
             if (onValueChange)
-                onValueChange(localValue);
+                onValueChange(localValue, inputRef.current);
         }
     }, [localValue]);
     // Add readOnly
@@ -131,7 +131,7 @@ function ComboBox(props) {
                             if (onChange != null)
                                 onChange(event, value, reason, details);
                             if (onValueChange)
-                                onValueChange(value);
+                                onValueChange(value, inputRef.current);
                         }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionKey: getOptionKey, ...rest }), onAdd && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => {
                             onAdd(doLoadData);
                         }, title: addLabel, children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }))] })] }));

package/lib/cjs/IntInputField.js

@@ -13,14 +13,25 @@ const InputField_1 = require("./InputField");
 const Box_1 = __importDefault(require("@mui/material/Box"));
 const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
 const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const react_2 = require("@etsoo/react");
 /**
  * Integer input field (controlled)
  */
 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, inputRef, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = [600], onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
+    const isControlled = value !== undefined;
     // State
-    const [localValue, setLocalValue] = react_1.default.useState();
+    const [localValue, setInnerLocalValue] = react_1.default.useState();
+    const localRef = react_1.default.useRef(null);
+    function setLocalValue(value) {
+        if (isControlled) {
+            setInnerLocalValue(value);
+        }
+        else if (localRef.current) {
+            localRef.current.value = value?.toString() ?? "";
+        }
+    }
     const setValue = (value, source, init = false) => {
         if (onValueChange) {
             const newValue = onValueChange(value, source, init);
@@ -40,10 +51,17 @@ function IntInputField(props) {
         }
     };
     react_1.default.useEffect(() => {
-        setValue(value, undefined, true);
-    }, [value]);
+        if (isControlled)
+            setValue(value, undefined, true);
+    }, [value, isControlled]);
     // Layout
-    const layout = ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", value: localValue == null ? (required ? min : "") : localValue, slotProps: {
+    const layout = ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", inputRef: (0, react_2.useCombinedRefs)(inputRef, localRef), value: isControlled
+            ? localValue == null
+                ? required
+                    ? min
+                    : ""
+                : localValue
+            : undefined, slotProps: {
             input: {
                 startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: symbol }) })) : undefined,
                 endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: endSymbol })) : undefined

package/lib/cjs/Tiplist.js

@@ -113,7 +113,7 @@ function Tiplist(props) {
             if (id && options && onValueChange) {
                 const option = options.find((o) => o[idField] === id);
                 if (option)
-                    onValueChange(option);
+                    onValueChange(option, inputRef.current);
             }
             // Indicates loading completed
             stateUpdate({
@@ -183,7 +183,7 @@ function Tiplist(props) {
                     if (onChange != null)
                         onChange(event, value, reason, details);
                     if (onValueChange)
-                        onValueChange(value);
+                        onValueChange(value, inputRef.current);
                     // For clear case
                     if (reason === "clear") {
                         stateUpdate({ options: [], open: event.type === "click" });

package/lib/mjs/AutocompleteExtendedProps.d.ts

@@ -73,6 +73,7 @@ export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys
     /**
      * Value change handler
      * @param value New value
+     * @param input Input element
      */
-    onValueChange?: (value: T | null) => void;
+    onValueChange?: (value: T | null, input?: HTMLInputElement | null) => void;
 };

package/lib/mjs/ComboBox.js

@@ -50,7 +50,7 @@ export function ComboBox(props) {
         if (localValue != null && localValue != stateValue) {
             setStateValue(localValue);
             if (onValueChange)
-                onValueChange(localValue);
+                onValueChange(localValue, inputRef.current);
         }
     }, [localValue]);
     // Add readOnly
@@ -125,7 +125,7 @@ export function ComboBox(props) {
                             if (onChange != null)
                                 onChange(event, value, reason, details);
                             if (onValueChange)
-                                onValueChange(value);
+                                onValueChange(value, inputRef.current);
                         }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (_jsx(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (_jsx(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionKey: getOptionKey, ...rest }), onAdd && (_jsx(IconButton, { size: "small", onClick: () => {
                             onAdd(doLoadData);
                         }, title: addLabel, children: _jsx(AddIcon, {}) }))] })] }));

package/lib/mjs/IntInputField.js

@@ -7,14 +7,25 @@ import { InputField } from "./InputField";
 import Box from "@mui/material/Box";
 import InputAdornment from "@mui/material/InputAdornment";
 import IconButton from "@mui/material/IconButton";
+import { useCombinedRefs } from "@etsoo/react";
 /**
  * Integer input field (controlled)
  */
 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, inputRef, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = [600], onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
+    const isControlled = value !== undefined;
     // State
-    const [localValue, setLocalValue] = React.useState();
+    const [localValue, setInnerLocalValue] = React.useState();
+    const localRef = React.useRef(null);
+    function setLocalValue(value) {
+        if (isControlled) {
+            setInnerLocalValue(value);
+        }
+        else if (localRef.current) {
+            localRef.current.value = value?.toString() ?? "";
+        }
+    }
     const setValue = (value, source, init = false) => {
         if (onValueChange) {
             const newValue = onValueChange(value, source, init);
@@ -34,10 +45,17 @@ export function IntInputField(props) {
         }
     };
     React.useEffect(() => {
-        setValue(value, undefined, true);
-    }, [value]);
+        if (isControlled)
+            setValue(value, undefined, true);
+    }, [value, isControlled]);
     // Layout
-    const layout = (_jsx(InputField, { type: "number", value: localValue == null ? (required ? min : "") : localValue, slotProps: {
+    const layout = (_jsx(InputField, { type: "number", inputRef: useCombinedRefs(inputRef, localRef), value: isControlled
+            ? localValue == null
+                ? required
+                    ? min
+                    : ""
+                : localValue
+            : undefined, slotProps: {
             input: {
                 startAdornment: symbol ? (_jsx(React.Fragment, { children: _jsx(InputAdornment, { position: "start", children: symbol }) })) : undefined,
                 endAdornment: endSymbol ? (_jsx(InputAdornment, { position: "end", children: endSymbol })) : undefined

package/lib/mjs/Tiplist.js

@@ -107,7 +107,7 @@ export function Tiplist(props) {
             if (id && options && onValueChange) {
                 const option = options.find((o) => o[idField] === id);
                 if (option)
-                    onValueChange(option);
+                    onValueChange(option, inputRef.current);
             }
             // Indicates loading completed
             stateUpdate({
@@ -177,7 +177,7 @@ export function Tiplist(props) {
                     if (onChange != null)
                         onChange(event, value, reason, details);
                     if (onValueChange)
-                        onValueChange(value);
+                        onValueChange(value, inputRef.current);
                     // For clear case
                     if (reason === "clear") {
                         stateUpdate({ options: [], open: event.type === "click" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,9 +40,9 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.52",
+    "@etsoo/appscript": "^1.6.53",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.69",
+    "@etsoo/react": "^1.8.70",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
@@ -75,7 +75,7 @@
     "@testing-library/react": "^16.3.1",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.8",
     "@types/react-avatar-editor": "^13.0.4",
     "@types/react-dom": "^19.2.3",
     "@types/react-input-mask": "^3.0.6",

package/src/AutocompleteExtendedProps.ts

@@ -96,6 +96,7 @@ export type AutocompleteExtendedProps<
   /**
    * Value change handler
    * @param value New value
+   * @param input Input element
    */
-  onValueChange?: (value: T | null) => void;
+  onValueChange?: (value: T | null, input?: HTMLInputElement | null) => void;
 };

package/src/ComboBox.tsx

@@ -160,7 +160,7 @@ export function ComboBox<
   React.useEffect(() => {
     if (localValue != null && localValue != stateValue) {
       setStateValue(localValue);
-      if (onValueChange) onValueChange(localValue);
+      if (onValueChange) onValueChange(localValue, inputRef.current);
     }
   }, [localValue]);
 
@@ -266,7 +266,7 @@ export function ComboBox<
             // Custom
             if (onChange != null) onChange(event, value, reason, details);
 
-            if (onValueChange) onValueChange(value);
+            if (onValueChange) onValueChange(value, inputRef.current);
           }}
           openOnFocus={openOnFocus}
           sx={sx}

package/src/IntInputField.tsx

@@ -6,6 +6,7 @@ import { InputField, InputFieldProps } from "./InputField";
 import Box, { BoxProps } from "@mui/material/Box";
 import InputAdornment from "@mui/material/InputAdornment";
 import IconButton from "@mui/material/IconButton";
+import { useCombinedRefs } from "@etsoo/react";
 
 /**
  * Integer input field props
@@ -81,6 +82,7 @@ export function IntInputField(props: IntInputFieldProps) {
     min = 0,
     step = 1,
     max = 9999999,
+    inputRef,
     inputStyle = { textAlign: "right" },
     boxProps,
     buttons,
@@ -96,8 +98,20 @@ export function IntInputField(props: IntInputFieldProps) {
     ...rest
   } = props;
 
+  const isControlled = value !== undefined;
+
   // State
-  const [localValue, setLocalValue] = React.useState<number | string>();
+  const [localValue, setInnerLocalValue] = React.useState<number | string>();
+
+  const localRef = React.useRef<HTMLInputElement>(null);
+
+  function setLocalValue(value: number | string | undefined) {
+    if (isControlled) {
+      setInnerLocalValue(value);
+    } else if (localRef.current) {
+      localRef.current.value = value?.toString() ?? "";
+    }
+  }
 
   const setValue = (
     value: number | undefined,
@@ -121,14 +135,23 @@ export function IntInputField(props: IntInputFieldProps) {
   };
 
   React.useEffect(() => {
-    setValue(value, undefined, true);
-  }, [value]);
+    if (isControlled) setValue(value, undefined, true);
+  }, [value, isControlled]);
 
   // Layout
   const layout = (
     <InputField
       type="number"
-      value={localValue == null ? (required ? min : "") : localValue}
+      inputRef={useCombinedRefs(inputRef, localRef)}
+      value={
+        isControlled
+          ? localValue == null
+            ? required
+              ? min
+              : ""
+            : localValue
+          : undefined
+      }
       slotProps={{
         input: {
           startAdornment: symbol ? (

package/src/Tiplist.tsx

@@ -220,7 +220,7 @@ export function Tiplist<
 
       if (id && options && onValueChange) {
         const option = options.find((o) => o[idField] === id);
-        if (option) onValueChange(option);
+        if (option) onValueChange(option, inputRef.current);
       }
 
       // Indicates loading completed
@@ -318,7 +318,7 @@ export function Tiplist<
           // Custom
           if (onChange != null) onChange(event, value, reason, details);
 
-          if (onValueChange) onValueChange(value);
+          if (onValueChange) onValueChange(value, inputRef.current);
 
           // For clear case
           if (reason === "clear") {