@etsoo/materialui 1.6.3 → 1.6.4

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/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.3",
+  "version": "1.6.4",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -42,11 +42,11 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.53",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.70",
+    "@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,13 +65,13 @@
     "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",
@@ -82,6 +82,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/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);