@etsoo/materialui 1.5.88 → 1.5.89

package/lib/cjs/ComboBoxMultiple.js

@@ -29,7 +29,7 @@ function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
     // Options state
@@ -125,7 +125,7 @@ function ComboBoxMultiple(props) {
                     ? []
                     : Array.isArray(stateValue)
                         ? stateValue
-                        : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                        : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value.concat());
                     // Custom

package/lib/cjs/ComboBoxPro.js

@@ -16,7 +16,7 @@ function ComboBoxPro(props) {
     // Labels
     const { noOptions, loading: loadingLabel, open: openDefault } = app?.getLabels("noOptions", "loading", "open") ?? {};
     // Destruct
-    const { noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, onValueChange, ...rest } = props;
+    const { getOptionKey = (option) => typeof option === "string" ? option : option.id, getOptionLabel = (option) => typeof option === "object" ? shared_1.DataTypes.getListItemLabel(option) : option, noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, onValueChange, ...rest } = props;
     const [open, setOpen] = react_1.default.useState(false);
     const [localOptions, setOptions] = react_1.default.useState([]);
     const [localValue, setValue] = react_1.default.useState(null);
@@ -61,7 +61,7 @@ function ComboBoxPro(props) {
                     if (!localValue && localValue != value)
                         onChange(event, value, "blur", undefined);
                 }
-            } })), getOptionLabel: (item) => typeof item === "object" ? shared_1.DataTypes.getListItemLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
+            } })), getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
             setValue(value);
             if (onChange)
                 onChange(event, value, reason, details);

package/lib/cjs/TagListPro.js

@@ -22,7 +22,7 @@ function TagListPro(props) {
     const moreLabel = more + "...";
     const getLabel = (item) => shared_1.DataTypes.getListItemLabel(item);
     // Destruct
-    const { 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)), renderTags = (value, getTagProps) => value.map((option, index) => {
+    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;
@@ -56,7 +56,7 @@ function TagListPro(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, changeDelay: 480, onChange: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();
@@ -65,7 +65,7 @@ function TagListPro(props) {
             return (typeof item.id === "number" &&
                 item.id < 0 &&
                 getLabel(item) === moreLabel);
-        }, getOptionLabel: (item) => getLabel(item), 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: value, onChange: (event, value, reason, details) => {
             currentValue.current = value;
             if (onChange)
                 onChange(event, value, reason, details);

package/lib/cjs/Tiplist.js

@@ -23,7 +23,7 @@ function Tiplist(props) {
     // Labels
     const { noOptions, loading, more1 = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more1", "open") ?? {};
     // Destruct
-    const { search = false, idField = "id", idValue, idIsString = false, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
+    const { search = false, idField = "id", idValue, idIsString = false, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionKey = (option) => `${option[idField]}`, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -209,5 +209,5 @@ function Tiplist(props) {
                     return getOptionLabel
                         ? getOptionLabel(item)
                         : shared_1.DataTypes.getObjectItemLabel(item);
-                }, ...rest })] }));
+                }, getOptionKey: getOptionKey, ...rest })] }));
 }

package/lib/cjs/TiplistPro.js

@@ -22,7 +22,7 @@ function TiplistPro(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     // Destruct
-    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
+    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, getOptionKey = (option) => typeof option === "string" ? option : option.id, onChange, onValueChange, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -192,7 +192,7 @@ function TiplistPro(props) {
                 }, loading: states.loading, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { minChars: minChars, ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
                         if (states.value == null && onChange)
                             onChange(event, event.target.value, "blur", undefined);
-                    }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                    }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionKey: getOptionKey, getOptionDisabled: (item) => {
                     if (item.id === -1)
                         return true;
                     return getOptionDisabled ? getOptionDisabled(item) : false;

package/lib/mjs/ComboBoxMultiple.js

@@ -23,7 +23,7 @@ export function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -119,7 +119,7 @@ export function ComboBoxMultiple(props) {
                     ? []
                     : Array.isArray(stateValue)
                         ? stateValue
-                        : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                        : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value.concat());
                     // Custom

package/lib/mjs/ComboBoxPro.js

@@ -10,7 +10,7 @@ export function ComboBoxPro(props) {
     // Labels
     const { noOptions, loading: loadingLabel, open: openDefault } = app?.getLabels("noOptions", "loading", "open") ?? {};
     // Destruct
-    const { noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, onValueChange, ...rest } = props;
+    const { getOptionKey = (option) => typeof option === "string" ? option : option.id, getOptionLabel = (option) => typeof option === "object" ? DataTypes.getListItemLabel(option) : option, noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, onValueChange, ...rest } = props;
     const [open, setOpen] = React.useState(false);
     const [localOptions, setOptions] = React.useState([]);
     const [localValue, setValue] = React.useState(null);
@@ -55,7 +55,7 @@ export function ComboBoxPro(props) {
                     if (!localValue && localValue != value)
                         onChange(event, value, "blur", undefined);
                 }
-            } })), getOptionLabel: (item) => typeof item === "object" ? DataTypes.getListItemLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
+            } })), getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
             setValue(value);
             if (onChange)
                 onChange(event, value, reason, details);

package/lib/mjs/TagListPro.js

@@ -16,7 +16,7 @@ export function TagListPro(props) {
     const moreLabel = more + "...";
     const getLabel = (item) => DataTypes.getListItemLabel(item);
     // Destruct
-    const { 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)), renderTags = (value, getTagProps) => value.map((option, index) => {
+    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;
@@ -50,7 +50,7 @@ export function TagListPro(props) {
             }
         }, onClose: () => {
             setOpen(false);
-        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (_jsx(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderValue: renderValue, renderInput: (params) => (_jsx(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
                 // Stop bubble
                 event.preventDefault();
                 event.stopPropagation();
@@ -59,7 +59,7 @@ export function TagListPro(props) {
             return (typeof item.id === "number" &&
                 item.id < 0 &&
                 getLabel(item) === moreLabel);
-        }, getOptionLabel: (item) => getLabel(item), 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: value, onChange: (event, value, reason, details) => {
             currentValue.current = value;
             if (onChange)
                 onChange(event, value, reason, details);

package/lib/mjs/Tiplist.js

@@ -17,7 +17,7 @@ export function Tiplist(props) {
     // Labels
     const { noOptions, loading, more1 = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more1", "open") ?? {};
     // Destruct
-    const { search = false, idField = "id", idValue, idIsString = false, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
+    const { search = false, idField = "id", idValue, idIsString = false, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionKey = (option) => `${option[idField]}`, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -203,5 +203,5 @@ export function Tiplist(props) {
                     return getOptionLabel
                         ? getOptionLabel(item)
                         : DataTypes.getObjectItemLabel(item);
-                }, ...rest })] }));
+                }, getOptionKey: getOptionKey, ...rest })] }));
 }

package/lib/mjs/TiplistPro.js

@@ -16,7 +16,7 @@ export function TiplistPro(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     // Destruct
-    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
+    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, getOptionKey = (option) => typeof option === "string" ? option : option.id, onChange, onValueChange, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -186,7 +186,7 @@ export function TiplistPro(props) {
                 }, loading: states.loading, renderInput: (params) => (_jsx(InputField, { minChars: minChars, ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
                         if (states.value == null && onChange)
                             onChange(event, event.target.value, "blur", undefined);
-                    }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                    }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionKey: getOptionKey, getOptionDisabled: (item) => {
                     if (item.id === -1)
                         return true;
                     return getOptionDisabled ? getOptionDisabled(item) : false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.88",
+  "version": "1.5.89",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -43,10 +43,10 @@
     "@etsoo/appscript": "^1.6.48",
     "@etsoo/notificationbase": "^1.1.66",
     "@etsoo/react": "^1.8.63",
-    "@etsoo/shared": "^1.2.79",
+    "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.5",
     "@mui/material": "^7.3.5",
-    "@mui/x-data-grid": "^8.18.0",
+    "@mui/x-data-grid": "^8.19.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.0",
@@ -76,13 +76,13 @@
     "@testing-library/react": "^16.3.0",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^19.2.5",
+    "@types/react": "^19.2.7",
     "@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.1",
     "jsdom": "^27.2.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.9"
+    "vitest": "^4.0.14"
   }
 }

package/src/ComboBoxMultiple.tsx

@@ -122,6 +122,7 @@ export function ComboBoxMultiple<
       </li>
     ),
     getOptionLabel = (option: T) => `${option[labelField]}`,
+    getOptionKey = (option: T) => `${option[idField]}`,
     sx = { minWidth: "150px" },
     noOptionsText = labels?.noOptions,
     loadingText = labels?.loading,
@@ -260,6 +261,7 @@ export function ComboBoxMultiple<
         }
         disableCloseOnSelect={disableCloseOnSelect}
         getOptionLabel={getOptionLabel}
+        getOptionKey={getOptionKey}
         multiple
         isOptionEqualToValue={(option: T, value: T) =>
           option[idField] === value[idField]

package/src/ComboBoxPro.tsx

@@ -55,6 +55,10 @@ export function ComboBoxPro<D extends ListType2 = ListType2>(
 
   // Destruct
   const {
+    getOptionKey = (option) =>
+      typeof option === "string" ? option : option.id,
+    getOptionLabel = (option) =>
+      typeof option === "object" ? DataTypes.getListItemLabel(option) : option,
     noOptionsText = noOptions,
     loadingText = loadingLabel,
     openText = openDefault,
@@ -132,9 +136,8 @@ export function ComboBoxPro<D extends ListType2 = ListType2>(
           }}
         />
       )}
-      getOptionLabel={(item) =>
-        typeof item === "object" ? DataTypes.getListItemLabel(item) : item
-      }
+      getOptionLabel={getOptionLabel}
+      getOptionKey={getOptionKey}
       isOptionEqualToValue={(option, value) => option.id === value.id}
       noOptionsText={noOptionsText}
       loadingText={loadingText}

package/src/TagListPro.tsx

@@ -56,6 +56,8 @@ export function TagListPro<D extends ListType2 = ListType2>(
 
   // Destruct
   const {
+    getOptionKey = (option) =>
+      typeof option === "string" ? option : option.id,
     renderOption = ({ key, ...props }, option, { selected }) => (
       <li key={key} {...props}>
         <>
@@ -69,7 +71,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
         </>
       </li>
     ),
-    renderTags = (value: readonly D[], getTagProps) =>
+    renderValue = (value: readonly D[], getTagProps) =>
       value.map((option, index) => {
         const { key, ...rest } = getTagProps({ index });
         return (
@@ -141,7 +143,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
       disableCloseOnSelect={disableCloseOnSelect}
       openOnFocus={openOnFocus}
       renderOption={renderOption}
-      renderTags={renderTags}
+      renderValue={renderValue}
       renderInput={(params) => (
         <InputField
           label={label}
@@ -165,6 +167,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
         );
       }}
       getOptionLabel={(item) => getLabel(item)}
+      getOptionKey={getOptionKey}
       isOptionEqualToValue={(option, value) => option.id === value.id}
       noOptionsText={noOptionsText}
       loadingText={loadingText}

package/src/Tiplist.tsx

@@ -97,6 +97,7 @@ export function Tiplist<
     noOptionsText = noOptions,
     loadingText = loading,
     openText = openDefault,
+    getOptionKey = (option) => `${option[idField]}`,
     getOptionLabel,
     getOptionDisabled,
     sx = {},
@@ -389,6 +390,7 @@ export function Tiplist<
             ? getOptionLabel(item)
             : DataTypes.getObjectItemLabel(item);
         }}
+        getOptionKey={getOptionKey}
         {...rest}
       />
     </div>

package/src/TiplistPro.tsx

@@ -127,6 +127,8 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     openText = openDefault,
     getOptionDisabled,
     getOptionLabel,
+    getOptionKey = (option) =>
+      typeof option === "string" ? option : option.id,
     onChange,
     onValueChange,
     minChars,
@@ -379,6 +381,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         noOptionsText={noOptionsText}
         loadingText={loadingText}
         openText={openText}
+        getOptionKey={getOptionKey}
         getOptionDisabled={(item) => {
           if (item.id === -1) return true;
           return getOptionDisabled ? getOptionDisabled(item) : false;