@etsoo/materialui 1.6.2 → 1.6.3

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.2",
+  "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/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 ? (