@etsoo/materialui 1.6.3 → 1.6.5

package/__tests__/ComboBox.tsx

@@ -27,10 +27,11 @@ it("Render ComboBox", async () => {
   });
 
   await waitFor(async () => {
-    const button = await screen.findByRole("button");
+    const button = document.querySelector("button");
+    expect(button).toBeTruthy();
 
     // Act, click the list
-    const clicked = fireEvent.click(button);
+    const clicked = fireEvent.click(button!);
     expect(clicked).toBeTruthy();
 
     // Get list item

package/lib/cjs/TagList.js

@@ -20,7 +20,7 @@ function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, 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 }), option] }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
+    const { getOptionLabel = (option) => option, renderOption = ({ key, ...props }, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, 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 }), getOptionLabel(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: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
@@ -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

@@ -20,17 +20,17 @@ function TagListPro(props) {
     // Labels
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
-    const getLabel = (item) => shared_1.DataTypes.getListItemLabel(item);
     // Destruct
-    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 { getOptionKey = (option) => typeof option === "string" ? option : option.id, getOptionLabel = (option) => shared_1.DataTypes.getListItemLabel(option), 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 }), getOptionLabel(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;
+        return ((0, jsx_runtime_1.jsx)(Chip_1.default, { variant: "outlined", label: getOptionLabel(option), ...rest }, key));
+    }), 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 +49,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
@@ -64,8 +74,9 @@ function TagListPro(props) {
             }, ...inputProps, ...params })), getOptionDisabled: (item) => {
             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) => {
+                "name" in item &&
+                item["name"] === moreLabel);
+        }, 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

@@ -14,7 +14,7 @@ export function TagList(props) {
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
     // Destruct
-    const { renderOption = ({ key, ...props }, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), option] }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
+    const { getOptionLabel = (option) => option, renderOption = ({ key, ...props }, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: _jsx(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), getOptionLabel(option)] }, key)), renderValue = (value, getTagProps) => value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return _jsx(Chip, { variant: "outlined", label: option, ...rest }, key);
     }), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, onChange, value, ...rest } = props;
@@ -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

@@ -14,17 +14,17 @@ export function TagListPro(props) {
     // Labels
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     const moreLabel = more + "...";
-    const getLabel = (item) => DataTypes.getListItemLabel(item);
     // Destruct
-    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 { getOptionKey = (option) => typeof option === "string" ? option : option.id, getOptionLabel = (option) => DataTypes.getListItemLabel(option), 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 }), getOptionLabel(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;
+        return (_jsx(Chip, { variant: "outlined", label: getOptionLabel(option), ...rest }, key));
+    }), 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 +43,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
@@ -58,8 +68,9 @@ export function TagListPro(props) {
             }, ...inputProps, ...params })), getOptionDisabled: (item) => {
             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) => {
+                "name" in item &&
+                item["name"] === moreLabel);
+        }, 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.5",
   "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

@@ -51,6 +51,7 @@ export function TagList(props: TagListProps) {
 
   // Destruct
   const {
+    getOptionLabel = (option) => option,
     renderOption = ({ key, ...props }, option, { selected }) => (
       <li key={key} {...props}>
         <Checkbox
@@ -59,7 +60,7 @@ export function TagList(props: TagListProps) {
           style={{ marginRight: 8 }}
           checked={selected}
         />
-        {option}
+        {getOptionLabel(option)}
       </li>
     ),
     renderValue = (value: readonly string[], getTagProps) =>
@@ -121,6 +122,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
    */
@@ -52,12 +57,11 @@ export function TagListPro<D extends ListType2 = ListType2>(
 
   const moreLabel = more + "...";
 
-  const getLabel = (item: D) => DataTypes.getListItemLabel(item);
-
   // Destruct
   const {
     getOptionKey = (option) =>
       typeof option === "string" ? option : option.id,
+    getOptionLabel = (option) => DataTypes.getListItemLabel(option),
     renderOption = ({ key, ...props }, option, { selected }) => (
       <li key={key} {...props}>
         <>
@@ -67,7 +71,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
             style={{ marginRight: 8 }}
             checked={selected}
           />
-          {getLabel(option)}
+          {getOptionLabel(option)}
         </>
       </li>
     ),
@@ -78,7 +82,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
           <Chip
             variant="outlined"
             key={key}
-            label={getLabel(option)}
+            label={getOptionLabel(option)}
             {...rest}
           />
         );
@@ -87,6 +91,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
     loadingText = loadingLabel,
     openText = openDefault,
     loadData,
+    loadIdValue,
     maxItems = 16,
     disableCloseOnSelect = true,
     openOnFocus = true,
@@ -100,9 +105,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 +130,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 +151,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
         }
       }}
       onClose={() => {
+        setOptions([]);
         setOpen(false);
       }}
       options={options}
@@ -162,16 +178,16 @@ export function TagListPro<D extends ListType2 = ListType2>(
         return (
           typeof item.id === "number" &&
           item.id < 0 &&
-          getLabel(item) === moreLabel
+          "name" in item &&
+          item["name"] === moreLabel
         );
       }}
-      getOptionLabel={(item) => getLabel(item)}
       getOptionKey={getOptionKey}
       isOptionEqualToValue={(option, value) => option.id === value.id}
       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);