@etsoo/materialui 1.5.87 → 1.5.89

package/__tests__/ComboBox.tsx

@@ -1,6 +1,11 @@
-import React from "react";
 import { ComboBox } from "../src";
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor
+} from "@testing-library/react";
 
 it("Render ComboBox", async () => {
   // Arrange
@@ -21,21 +26,15 @@ it("Render ComboBox", async () => {
     );
   });
 
-  await vi.waitFor(
-    async () => {
-      await screen.findByRole("button");
-    },
-    {
-      timeout: 500, // default is 1000
-      interval: 20 // default is 50
-    }
-  );
+  await waitFor(async () => {
+    const button = await screen.findByRole("button");
 
-  // Act, click the list
-  const clicked = fireEvent.click(screen.getByRole("button"));
-  expect(clicked).toBeTruthy();
+    // Act, click the list
+    const clicked = fireEvent.click(button);
+    expect(clicked).toBeTruthy();
 
-  // Get list item
-  const item = screen.getByText("Name 1");
-  expect(item.nodeName).toBe("LI");
+    // Get list item
+    const item = await screen.findByText("Name 1");
+    expect(item.nodeName).toBe("LI");
+  });
 });

package/__tests__/CustomFields.tsx

@@ -137,13 +137,13 @@ it("Render FieldSelect", async () => {
     );
   });
 
-  const button = screen.getByRole("combobox");
+  const button = await screen.findByRole("combobox");
 
   act(() => {
     // Act, click to open the dropdown list
     vi.useFakeTimers();
     fireEvent.mouseDown(button);
-    vi.advanceTimersByTime(100);
+    vi.runAllTimers();
   });
 
   const input = document.querySelector<HTMLInputElement>("input");

package/__tests__/InputTipField.tsx

@@ -0,0 +1,76 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act } from "react";
+import { InputTipField } from "../src";
+
+it("Render default InputTipField", async () => {
+  // Render component
+  act(() => {
+    render(
+      <InputTipField
+        name="amount"
+        type="number"
+        componentProps={{
+          loadData: (_value) => Promise.resolve([])
+        }}
+        slotProps={{ htmlInput: { role: "input" } }}
+      />
+    );
+  });
+
+  const input = screen.getByRole<HTMLInputElement>("input");
+  expect(input.type).toBe("number");
+});
+
+it("Render email InputTipField", async () => {
+  // Arrange
+  type T = { id: number; name: string };
+  const options: T[] = [
+    { id: 1, name: "Name 1" },
+    { id: 2, name: "Name 2" }
+  ];
+
+  const changeHandler = vi.fn();
+
+  const flag = "2 items";
+
+  // Render component
+  act(() => {
+    render(
+      <InputTipField<T>
+        component="email"
+        componentProps={{
+          loadData: (_value) => Promise.resolve([options, flag]),
+          itemLabel: (item) => item.name + ` (${item.id})`
+        }}
+        onChangeDelay={changeHandler}
+        slotProps={{ htmlInput: { role: "input" } }}
+      />
+    );
+  });
+
+  const input = screen.getByRole<HTMLInputElement>("input");
+  expect(input.type).toBe("email");
+
+  act(() => {
+    vi.useFakeTimers();
+
+    fireEvent.change(input, { target: { value: "info@etsoo.com" } });
+    expect(input.value).toBe("info@etsoo.com");
+
+    vi.runAllTimers();
+    expect(changeHandler).toHaveBeenCalled();
+
+    // Restore timers, otherwise 'waitFor' will fail
+    vi.useRealTimers();
+  });
+
+  await waitFor(() => {
+    const button = screen.getByText(flag);
+    expect(button.nodeName).toBe("P");
+
+    fireEvent.click(button);
+
+    const item = screen.getByText("Name 2 (2)");
+    expect(item.nodeName).toBe("LI");
+  });
+});

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/InputTipField.d.ts

@@ -1,7 +1,7 @@
 import { IdType } from "@etsoo/shared";
 import { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { InputField } from "./InputField";
+import { InputFieldProps } from "./InputField";
 import { EmailInput } from "./EmailInput";
 import { MobileInput } from "./MobileInput";
 import { PhoneInput } from "./PhoneInput";
@@ -9,52 +9,62 @@ type ItemType = {
     id: IdType;
 };
 declare const componentMap: {
-    input: typeof InputField;
     email: typeof EmailInput;
     phone: typeof PhoneInput;
     mobile: typeof MobileInput;
 };
 type ComponentMap = typeof componentMap;
 type ComponentKey = keyof ComponentMap;
+type ComponentProps<T extends ItemType> = {
+    /**
+     * Load data
+     * @param value Duplicate test value
+     */
+    loadData(value: string): Promise<[T[]?, string?]>;
+    /**
+     * Label props
+     */
+    labelProps?: Omit<TypographyProps, "onClick">;
+    /**
+     * Custom item label
+     * @param item List item data
+     * @returns Result
+     */
+    itemLabel?: (item: T) => React.ReactNode;
+    /**
+     * Custom render item
+     * @param item List item data
+     * @returns Result
+     */
+    renderItem?: (item: T) => React.ReactNode;
+};
 /**
  * InputField with tips properties
  */
-export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
+export type InputTipFieldProps<T extends ItemType = ItemType> = {
     /**
-     * Component key
+     * Component properties
      */
-    component?: K;
+    componentProps: ComponentProps<T>;
+} & (({
     /**
      * Component properties
      */
-    componentProps: {
-        /**
-         * Load data
-         * @param value Duplicate test value
-         */
-        loadData(value: string): Promise<[T[]?, string?]>;
-        /**
-         * Label props
-         */
-        labelProps?: Omit<TypographyProps, "onClick">;
-        /**
-         * Custom item label
-         * @param item List item data
-         * @returns Result
-         */
-        itemLabel?: (item: T) => React.ReactNode;
+    componentProps: ComponentProps<T>;
+} & {
+    [K in ComponentKey]: {
         /**
-         * Custom render item
-         * @param item List item data
-         * @returns Result
+         * Component key
          */
-        renderItem?: (item: T) => React.ReactNode;
-    };
-};
+        component: K;
+    } & Omit<React.ComponentProps<ComponentMap[K]>, "component">;
+}[ComponentKey]) | ({
+    component?: "input";
+} & Omit<InputFieldProps, "component">));
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
-export declare function InputTipField<T extends ItemType = ItemType, K extends ComponentKey = "input">(props: InputTipFieldProps<T, K>): import("react/jsx-runtime").JSX.Element;
+export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/cjs/InputTipField.js

@@ -18,7 +18,6 @@ const EmailInput_1 = require("./EmailInput");
 const MobileInput_1 = require("./MobileInput");
 const PhoneInput_1 = require("./PhoneInput");
 const componentMap = {
-    input: InputField_1.InputField,
     email: EmailInput_1.EmailInput,
     phone: PhoneInput_1.PhoneInput,
     mobile: MobileInput_1.MobileInput
@@ -42,7 +41,7 @@ function InputTipField(props) {
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
     }, loadData, itemLabel = (item) => shared_1.DataTypes.getObjectItemLabel(item), renderItem = (item) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: itemLabel(item) }, item.id) } = componentProps;
     const { input, ...slotRests } = slotProps;
-    const Component = componentMap[component];
+    const Component = component === "input" ? InputField_1.InputField : componentMap[component];
     const load = (value) => {
         if (value.length < 2) {
             setTitle(undefined);

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/InputTipField.d.ts

@@ -1,7 +1,7 @@
 import { IdType } from "@etsoo/shared";
 import { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { InputField } from "./InputField";
+import { InputFieldProps } from "./InputField";
 import { EmailInput } from "./EmailInput";
 import { MobileInput } from "./MobileInput";
 import { PhoneInput } from "./PhoneInput";
@@ -9,52 +9,62 @@ type ItemType = {
     id: IdType;
 };
 declare const componentMap: {
-    input: typeof InputField;
     email: typeof EmailInput;
     phone: typeof PhoneInput;
     mobile: typeof MobileInput;
 };
 type ComponentMap = typeof componentMap;
 type ComponentKey = keyof ComponentMap;
+type ComponentProps<T extends ItemType> = {
+    /**
+     * Load data
+     * @param value Duplicate test value
+     */
+    loadData(value: string): Promise<[T[]?, string?]>;
+    /**
+     * Label props
+     */
+    labelProps?: Omit<TypographyProps, "onClick">;
+    /**
+     * Custom item label
+     * @param item List item data
+     * @returns Result
+     */
+    itemLabel?: (item: T) => React.ReactNode;
+    /**
+     * Custom render item
+     * @param item List item data
+     * @returns Result
+     */
+    renderItem?: (item: T) => React.ReactNode;
+};
 /**
  * InputField with tips properties
  */
-export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
+export type InputTipFieldProps<T extends ItemType = ItemType> = {
     /**
-     * Component key
+     * Component properties
      */
-    component?: K;
+    componentProps: ComponentProps<T>;
+} & (({
     /**
      * Component properties
      */
-    componentProps: {
-        /**
-         * Load data
-         * @param value Duplicate test value
-         */
-        loadData(value: string): Promise<[T[]?, string?]>;
-        /**
-         * Label props
-         */
-        labelProps?: Omit<TypographyProps, "onClick">;
-        /**
-         * Custom item label
-         * @param item List item data
-         * @returns Result
-         */
-        itemLabel?: (item: T) => React.ReactNode;
+    componentProps: ComponentProps<T>;
+} & {
+    [K in ComponentKey]: {
         /**
-         * Custom render item
-         * @param item List item data
-         * @returns Result
+         * Component key
          */
-        renderItem?: (item: T) => React.ReactNode;
-    };
-};
+        component: K;
+    } & Omit<React.ComponentProps<ComponentMap[K]>, "component">;
+}[ComponentKey]) | ({
+    component?: "input";
+} & Omit<InputFieldProps, "component">));
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
-export declare function InputTipField<T extends ItemType = ItemType, K extends ComponentKey = "input">(props: InputTipFieldProps<T, K>): import("react/jsx-runtime").JSX.Element;
+export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/mjs/InputTipField.js

@@ -12,7 +12,6 @@ import { EmailInput } from "./EmailInput";
 import { MobileInput } from "./MobileInput";
 import { PhoneInput } from "./PhoneInput";
 const componentMap = {
-    input: InputField,
     email: EmailInput,
     phone: PhoneInput,
     mobile: MobileInput
@@ -36,7 +35,7 @@ export function InputTipField(props) {
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
     }, loadData, itemLabel = (item) => DataTypes.getObjectItemLabel(item), renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id) } = componentProps;
     const { input, ...slotRests } = slotProps;
-    const Component = componentMap[component];
+    const Component = component === "input" ? InputField : componentMap[component];
     const load = (value) => {
         if (value.length < 2) {
             setTitle(undefined);

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.87",
+  "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/InputTipField.tsx

@@ -1,7 +1,7 @@
 import { DataTypes, IdType } from "@etsoo/shared";
 import Typography, { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { InputField } from "./InputField";
+import { InputField, InputFieldProps } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
 import ListItem from "@mui/material/ListItem";
 import Popover from "@mui/material/Popover";
@@ -16,7 +16,6 @@ type ItemType = {
 };
 
 const componentMap = {
-  input: InputField,
   email: EmailInput,
   phone: PhoneInput,
   mobile: MobileInput
@@ -25,58 +24,66 @@ const componentMap = {
 type ComponentMap = typeof componentMap;
 type ComponentKey = keyof ComponentMap;
 
-/**
- * InputField with tips properties
- */
-export type InputTipFieldProps<
-  T extends ItemType = ItemType,
-  K extends ComponentKey = "input"
-> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
+type ComponentProps<T extends ItemType> = {
   /**
-   * Component key
+   * Load data
+   * @param value Duplicate test value
    */
-  component?: K;
+  loadData(value: string): Promise<[T[]?, string?]>;
 
   /**
-   * Component properties
+   * Label props
    */
-  componentProps: {
-    /**
-     * Load data
-     * @param value Duplicate test value
-     */
-    loadData(value: string): Promise<[T[]?, string?]>;
-
-    /**
-     * Label props
-     */
-    labelProps?: Omit<TypographyProps, "onClick">;
-
-    /**
-     * Custom item label
-     * @param item List item data
-     * @returns Result
-     */
-    itemLabel?: (item: T) => React.ReactNode;
-
-    /**
-     * Custom render item
-     * @param item List item data
-     * @returns Result
-     */
-    renderItem?: (item: T) => React.ReactNode;
-  };
+  labelProps?: Omit<TypographyProps, "onClick">;
+
+  /**
+   * Custom item label
+   * @param item List item data
+   * @returns Result
+   */
+  itemLabel?: (item: T) => React.ReactNode;
+
+  /**
+   * Custom render item
+   * @param item List item data
+   * @returns Result
+   */
+  renderItem?: (item: T) => React.ReactNode;
 };
 
+/**
+ * InputField with tips properties
+ */
+export type InputTipFieldProps<T extends ItemType = ItemType> = {
+  /**
+   * Component properties
+   */
+  componentProps: ComponentProps<T>;
+} & (
+  | ({
+      /**
+       * Component properties
+       */
+      componentProps: ComponentProps<T>;
+    } & {
+      [K in ComponentKey]: {
+        /**
+         * Component key
+         */
+        component: K;
+      } & Omit<React.ComponentProps<ComponentMap[K]>, "component">;
+    }[ComponentKey])
+  | ({ component?: "input" } & Omit<InputFieldProps, "component">)
+);
+
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
-export function InputTipField<
-  T extends ItemType = ItemType,
-  K extends ComponentKey = "input"
->(props: InputTipFieldProps<T, K>) {
+export function InputTipField<T extends ItemType = ItemType>(
+  props: InputTipFieldProps<T>
+) {
   // Global app
   const app = useAppContext();
 
@@ -108,7 +115,8 @@ export function InputTipField<
 
   const { input, ...slotRests } = slotProps;
 
-  const Component = componentMap[component];
+  const Component =
+    component === "input" ? InputField : componentMap[component];
 
   const load = (value: string) => {
     if (value.length < 2) {
@@ -160,7 +168,7 @@ export function InputTipField<
           },
           ...slotRests
         }}
-        {...(rest as any)}
+        {...rest}
       />
     </React.Fragment>
   );

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;