@etsoo/materialui 1.6.6 → 1.6.8

package/lib/cjs/TagList.js

@@ -27,13 +27,12 @@ function TagList(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 currentValue = react_1.default.useRef([]);
-    currentValue.current = value ?? [];
+    const [valueState, setValueState] = react_1.default.useState(value ?? []);
     const loadDataLocal = async (keyword) => {
         setLoading(true);
         const result = (await loadData(keyword, maxItems)) ?? [];
         const len = result.length;
-        currentValue.current.forEach((item) => {
+        valueState.forEach((item) => {
             if (!result.includes(item))
                 result.push(item);
         });
@@ -60,10 +59,10 @@ function TagList(props) {
                 event.preventDefault();
                 event.stopPropagation();
                 await loadDataLocal(event.target.value);
-            }, ...inputProps, ...params })), getOptionDisabled: (item) => {
+            }, ...inputProps, ...params })), getOptionLabel: getOptionLabel, getOptionDisabled: (item) => {
             return item === moreLabel;
-        }, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: value, onChange: (event, value, reason, details) => {
-            currentValue.current = value;
+        }, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
+            setValueState(value);
             if (onChange)
                 onChange(event, value, reason, details);
         }, ...rest }));

package/lib/cjs/TagListPro.js

@@ -29,13 +29,11 @@ function TagListPro(props) {
     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 = valueState;
     const loadDataLocal = async (keyword) => {
         setLoading(true);
         const result = (await loadData(keyword, maxItems)) ?? [];
         const len = result.length;
-        currentValue.current.forEach((item) => {
+        valueState.forEach((item) => {
             if (!result.some((r) => r.id === item.id))
                 result.push(item);
         });
@@ -77,7 +75,7 @@ function TagListPro(props) {
                 "name" in item &&
                 item["name"] === moreLabel);
         }, getOptionKey: getOptionKey, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
-            currentValue.current = value;
+            setValueState(value);
             if (onChange)
                 onChange(event, value, reason, details);
         }, ...rest }));

package/lib/mjs/TagList.js

@@ -21,13 +21,12 @@ export function TagList(props) {
     const [open, setOpen] = React.useState(false);
     const [options, setOptions] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
-    const currentValue = React.useRef([]);
-    currentValue.current = value ?? [];
+    const [valueState, setValueState] = React.useState(value ?? []);
     const loadDataLocal = async (keyword) => {
         setLoading(true);
         const result = (await loadData(keyword, maxItems)) ?? [];
         const len = result.length;
-        currentValue.current.forEach((item) => {
+        valueState.forEach((item) => {
             if (!result.includes(item))
                 result.push(item);
         });
@@ -54,10 +53,10 @@ export function TagList(props) {
                 event.preventDefault();
                 event.stopPropagation();
                 await loadDataLocal(event.target.value);
-            }, ...inputProps, ...params })), getOptionDisabled: (item) => {
+            }, ...inputProps, ...params })), getOptionLabel: getOptionLabel, getOptionDisabled: (item) => {
             return item === moreLabel;
-        }, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: value, onChange: (event, value, reason, details) => {
-            currentValue.current = value;
+        }, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
+            setValueState(value);
             if (onChange)
                 onChange(event, value, reason, details);
         }, ...rest }));

package/lib/mjs/TagListPro.js

@@ -23,13 +23,11 @@ export function TagListPro(props) {
     const [options, setOptions] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
     const [valueState, setValueState] = React.useState(value ?? []);
-    const currentValue = React.useRef([]);
-    currentValue.current = valueState;
     const loadDataLocal = async (keyword) => {
         setLoading(true);
         const result = (await loadData(keyword, maxItems)) ?? [];
         const len = result.length;
-        currentValue.current.forEach((item) => {
+        valueState.forEach((item) => {
             if (!result.some((r) => r.id === item.id))
                 result.push(item);
         });
@@ -71,7 +69,7 @@ export function TagListPro(props) {
                 "name" in item &&
                 item["name"] === moreLabel);
         }, getOptionKey: getOptionKey, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: valueState, onChange: (event, value, reason, details) => {
-            currentValue.current = value;
+            setValueState(value);
             if (onChange)
                 onChange(event, value, reason, details);
         }, ...rest }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -42,21 +42,21 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.53",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.71",
+    "@etsoo/react": "^1.8.72",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
-    "@mui/x-data-grid": "^8.25.0",
+    "@mui/x-data-grid": "^8.26.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.1",
-    "eventemitter3": "^5.0.1",
+    "eventemitter3": "^5.0.4",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
-    "react": "^19.2.3",
+    "react": "^19.2.4",
     "react-avatar-editor": "^13.0.2",
     "react-chartjs-2": "^5.3.1",
-    "react-dom": "^19.2.3",
+    "react-dom": "^19.2.4",
     "react-draggable": "^4.5.0",
     "react-imask": "7.6.1"
   },
@@ -72,16 +72,16 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@babel/runtime-corejs3": "^7.28.6",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^19.2.8",
+    "@types/react": "^19.2.10",
     "@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.17"
+    "vitest": "^4.0.18"
   }
 }

package/src/TagList.tsx

@@ -85,9 +85,7 @@ export function TagList(props: TagListProps) {
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState<readonly string[]>([]);
   const [loading, setLoading] = React.useState(false);
-
-  const currentValue = React.useRef<readonly string[]>([]);
-  currentValue.current = value ?? [];
+  const [valueState, setValueState] = React.useState<string[]>(value ?? []);
 
   const loadDataLocal = async (keyword?: string) => {
     setLoading(true);
@@ -95,7 +93,7 @@ export function TagList(props: TagListProps) {
 
     const len = result.length;
 
-    currentValue.current.forEach((item) => {
+    valueState.forEach((item) => {
       if (!result.includes(item)) result.push(item);
     });
 
@@ -146,15 +144,16 @@ export function TagList(props: TagListProps) {
           {...params}
         />
       )}
+      getOptionLabel={getOptionLabel}
       getOptionDisabled={(item) => {
         return item === moreLabel;
       }}
       noOptionsText={noOptionsText}
       loadingText={loadingText}
       openText={openText}
-      value={value}
+      value={valueState}
       onChange={(event, value, reason, details) => {
-        currentValue.current = value;
+        setValueState(value);
         if (onChange) onChange(event, value, reason, details);
       }}
       {...rest}

package/src/TagListPro.tsx

@@ -107,15 +107,12 @@ export function TagListPro<D extends ListType2 = ListType2>(
   const [loading, setLoading] = React.useState(false);
   const [valueState, setValueState] = React.useState<D[]>(value ?? []);
 
-  const currentValue = React.useRef<readonly D[]>([]);
-  currentValue.current = valueState;
-
   const loadDataLocal = async (keyword?: string) => {
     setLoading(true);
     const result = (await loadData(keyword, maxItems)) ?? [];
     const len = result.length;
 
-    currentValue.current.forEach((item) => {
+    valueState.forEach((item) => {
       if (!result.some((r) => r.id === item.id)) result.push(item);
     });
 
@@ -190,7 +187,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
       openText={openText}
       value={valueState}
       onChange={(event, value, reason, details) => {
-        currentValue.current = value;
+        setValueState(value);
         if (onChange) onChange(event, value, reason, details);
       }}
       {...rest}