@etsoo/materialui 1.6.2 → 1.6.4

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/TagList.js

@@ -53,6 +53,7 @@ function TagList(props) {
                 loadDataLocal();
             }
         }, onClose: () => {
+            setOptions([]);
             setOpen(false);
         }, 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

package/lib/cjs/TagListPro.d.ts

@@ -10,6 +10,10 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<Autocomplete
      * Load data callback
      */
     loadData: (keyword: string | undefined, items: number) => PromiseLike<D[] | null | undefined>;
+    /**
+     * Load value from ids
+     */
+    loadIdValue?: () => PromiseLike<D[] | null | undefined>;
     /**
      * Input props
      */

package/lib/cjs/TagListPro.js

@@ -25,12 +25,13 @@ function TagListPro(props) {
     const { getOptionKey = (option) => typeof option === "string" ? option : option.id, renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsx)("li", { ...props, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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 }), getLabel(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: getLabel(option), ...rest }, key));
-    }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
+    }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, loadIdValue, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
     const [open, setOpen] = react_1.default.useState(false);
     const [options, setOptions] = react_1.default.useState([]);
     const [loading, setLoading] = react_1.default.useState(false);
+    const [valueState, setValueState] = react_1.default.useState(value ?? []);
     const currentValue = react_1.default.useRef([]);
-    currentValue.current = value ?? [];
+    currentValue.current = valueState;
     const loadDataLocal = async (keyword) => {
         setLoading(true);
         const result = (await loadData(keyword, maxItems)) ?? [];
@@ -49,12 +50,22 @@ function TagListPro(props) {
         setOptions(result);
         setLoading(false);
     };
+    react_1.default.useEffect(() => {
+        if (loadIdValue) {
+            loadIdValue().then((result) => {
+                if (result == null)
+                    return;
+                setValueState(result);
+            });
+        }
+    }, [loadIdValue]);
     return ((0, jsx_runtime_1.jsx)(Autocomplete_1.default, { multiple: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
             setOpen(true);
             if (options.length === 0) {
                 loadDataLocal();
             }
         }, onClose: () => {
+            setOptions([]);
             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, onChangeDelay: async (event) => {
                 // Stop bubble
@@ -65,7 +76,7 @@ function TagListPro(props) {
             return (typeof item.id === "number" &&
                 item.id < 0 &&
                 getLabel(item) === moreLabel);
-        }, getOptionLabel: (item) => getLabel(item), getOptionKey: getOptionKey, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: value, onChange: (event, value, reason, details) => {
+        }, getOptionLabel: (item) => getLabel(item), getOptionKey: getOptionKey, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
             currentValue.current = value;
             if (onChange)
                 onChange(event, value, reason, details);

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/TagList.js

@@ -47,6 +47,7 @@ export function TagList(props) {
                 loadDataLocal();
             }
         }, onClose: () => {
+            setOptions([]);
             setOpen(false);
         }, 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

package/lib/mjs/TagListPro.d.ts

@@ -10,6 +10,10 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<Autocomplete
      * Load data callback
      */
     loadData: (keyword: string | undefined, items: number) => PromiseLike<D[] | null | undefined>;
+    /**
+     * Load value from ids
+     */
+    loadIdValue?: () => PromiseLike<D[] | null | undefined>;
     /**
      * Input props
      */

package/lib/mjs/TagListPro.js

@@ -19,12 +19,13 @@ export function TagListPro(props) {
     const { getOptionKey = (option) => typeof option === "string" ? option : option.id, renderOption = ({ key, ...props }, option, { selected }) => (_jsx("li", { ...props, children: _jsxs(_Fragment, { children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getLabel(option)] }) }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return (_jsx(Chip, { variant: "outlined", label: getLabel(option), ...rest }, key));
-    }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
+    }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, loadIdValue, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
     const [open, setOpen] = React.useState(false);
     const [options, setOptions] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
+    const [valueState, setValueState] = React.useState(value ?? []);
     const currentValue = React.useRef([]);
-    currentValue.current = value ?? [];
+    currentValue.current = valueState;
     const loadDataLocal = async (keyword) => {
         setLoading(true);
         const result = (await loadData(keyword, maxItems)) ?? [];
@@ -43,12 +44,22 @@ export function TagListPro(props) {
         setOptions(result);
         setLoading(false);
     };
+    React.useEffect(() => {
+        if (loadIdValue) {
+            loadIdValue().then((result) => {
+                if (result == null)
+                    return;
+                setValueState(result);
+            });
+        }
+    }, [loadIdValue]);
     return (_jsx(Autocomplete, { multiple: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
             setOpen(true);
             if (options.length === 0) {
                 loadDataLocal();
             }
         }, onClose: () => {
+            setOptions([]);
             setOpen(false);
         }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => (_jsx(InputField, { label: label, onChangeDelay: async (event) => {
                 // Stop bubble
@@ -59,7 +70,7 @@ export function TagListPro(props) {
             return (typeof item.id === "number" &&
                 item.id < 0 &&
                 getLabel(item) === moreLabel);
-        }, getOptionLabel: (item) => getLabel(item), getOptionKey: getOptionKey, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: value, onChange: (event, value, reason, details) => {
+        }, getOptionLabel: (item) => getLabel(item), getOptionKey: getOptionKey, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
             currentValue.current = value;
             if (onChange)
                 onChange(event, value, reason, details);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
     "@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.71",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
-    "@mui/x-data-grid": "^8.24.0",
+    "@mui/x-data-grid": "^8.25.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.1",
@@ -65,23 +65,23 @@
     "react-dom": "$react-dom"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.5",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.28.6",
     "@babel/plugin-transform-runtime": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-env": "^7.28.6",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@babel/runtime-corejs3": "^7.28.4",
+    "@babel/runtime-corejs3": "^7.28.6",
     "@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",
     "@vitejs/plugin-react": "^5.1.2",
     "jsdom": "^27.4.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.16"
+    "vitest": "^4.0.17"
   }
 }

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/TagList.tsx

@@ -121,6 +121,7 @@ export function TagList(props: TagListProps) {
         }
       }}
       onClose={() => {
+        setOptions([]);
         setOpen(false);
       }}
       options={options}

package/src/TagListPro.tsx

@@ -25,6 +25,11 @@ export type TagListProProps<D extends ListType2 = ListType2> = Omit<
     items: number
   ) => PromiseLike<D[] | null | undefined>;
 
+  /**
+   * Load value from ids
+   */
+  loadIdValue?: () => PromiseLike<D[] | null | undefined>;
+
   /**
    * Input props
    */
@@ -87,6 +92,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
     loadingText = loadingLabel,
     openText = openDefault,
     loadData,
+    loadIdValue,
     maxItems = 16,
     disableCloseOnSelect = true,
     openOnFocus = true,
@@ -100,9 +106,10 @@ export function TagListPro<D extends ListType2 = ListType2>(
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState<readonly D[]>([]);
   const [loading, setLoading] = React.useState(false);
+  const [valueState, setValueState] = React.useState<D[]>(value ?? []);
 
   const currentValue = React.useRef<readonly D[]>([]);
-  currentValue.current = value ?? [];
+  currentValue.current = valueState;
 
   const loadDataLocal = async (keyword?: string) => {
     setLoading(true);
@@ -124,6 +131,15 @@ export function TagListPro<D extends ListType2 = ListType2>(
     setLoading(false);
   };
 
+  React.useEffect(() => {
+    if (loadIdValue) {
+      loadIdValue().then((result) => {
+        if (result == null) return;
+        setValueState(result);
+      });
+    }
+  }, [loadIdValue]);
+
   return (
     <Autocomplete<D, true, false, false>
       multiple
@@ -136,6 +152,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
         }
       }}
       onClose={() => {
+        setOptions([]);
         setOpen(false);
       }}
       options={options}
@@ -171,7 +188,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
       noOptionsText={noOptionsText}
       loadingText={loadingText}
       openText={openText}
-      value={value}
+      value={valueState}
       onChange={(event, value, reason, details) => {
         currentValue.current = value;
         if (onChange) onChange(event, value, reason, details);