@etsoo/materialui 1.1.70 → 1.1.72

package/lib/ComboBoxPro.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { AutocompleteProps } from "@mui/material";
+import { InputFieldProps } from "./InputField";
+type DataType = {
+    id: number | string;
+} & ({
+    label: string;
+} | {
+    name: string;
+});
+export type ComboBoxProProps<D extends DataType = DataType> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Field name
+     */
+    name?: string;
+    /**
+     * Id value
+     */
+    idValue?: D["id"] | null;
+    /**
+     * Options
+     */
+    options: (() => PromiseLike<D[] | null | undefined>) | D[];
+    /**
+     * Input props
+     */
+    inputProps?: Omit<InputFieldProps, "onChange">;
+};
+export declare function ComboBoxPro<D extends DataType = DataType>(props: ComboBoxProProps<D>): JSX.Element;
+export {};

package/lib/ComboBoxPro.js

@@ -0,0 +1,50 @@
+import { Autocomplete } from "@mui/material";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+import { InputField } from "./InputField";
+export function ComboBoxPro(props) {
+    var _a;
+    // Labels
+    const { noOptions, loading: loadingLabel, open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "open")) !== null && _a !== void 0 ? _a : {};
+    const getLabel = (item) => "label" in item ? item.label : "name" in item ? item.name : "";
+    // Destruct
+    const { noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, ...rest } = props;
+    const [open, setOpen] = React.useState(false);
+    const [localOptions, setOptions] = React.useState([]);
+    const [localValue, setValue] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    React.useEffect(() => {
+        if (value == null)
+            return;
+        setValue(value);
+    }, [value]);
+    React.useEffect(() => {
+        if (idValue == null)
+            return;
+        const option = localOptions.find((option) => option.id === idValue);
+        if (option)
+            setValue(option);
+    }, [localOptions]);
+    React.useEffect(() => {
+        if (typeof options === "function") {
+            setLoading(true);
+            options().then((result) => {
+                setLoading(false);
+                if (result != null)
+                    setOptions(result);
+            });
+        }
+        else {
+            setOptions(options);
+        }
+    }, [options]);
+    return (React.createElement(Autocomplete, { id: name, value: localValue, open: open, freeSolo: true, onOpen: () => {
+            setOpen(true);
+        }, onClose: () => {
+            setOpen(false);
+        }, options: localOptions, loading: loading, openOnFocus: openOnFocus, renderInput: (params) => (React.createElement(InputField, { ...inputProps, ...params, label: label, name: name })), getOptionLabel: (item) => typeof item === "object" ? getLabel(item) : item, 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);
+        }, ...rest }));
+}

package/lib/SelectEx.d.ts

@@ -1,10 +1,10 @@
-import { SelectProps } from '@mui/material';
-import React from 'react';
-import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
+import { SelectProps } from "@mui/material";
+import React from "react";
+import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
 /**
  * Extended select component props
  */
-export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = Omit<SelectProps, 'labelId' | 'input' | 'native'> & {
+export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = Omit<SelectProps, "labelId" | "input" | "native"> & {
     /**
      * Auto add blank item
      */

package/lib/SelectEx.js

@@ -1,10 +1,10 @@
-import { Checkbox, FormControl, FormHelperText, IconButton, InputLabel, ListItemText, MenuItem, OutlinedInput, Select, Stack } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
-import { ListItemRightIcon } from './ListItemRightIcon';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import { Utils } from '@etsoo/shared';
-import { ReactUtils } from '@etsoo/react';
+import { Checkbox, FormControl, FormHelperText, IconButton, InputLabel, ListItemText, MenuItem, OutlinedInput, Select, Stack } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
+import { ListItemRightIcon } from "./ListItemRightIcon";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import { ArrayUtils, Utils } from "@etsoo/shared";
+import { ReactUtils } from "@etsoo/react";
 /**
  * Extended select component
  * @param props Props
@@ -12,7 +12,7 @@ import { ReactUtils } from '@etsoo/react';
  */
 export function SelectEx(props) {
     // Destruct
-    const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField = "id", error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = "label", loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState([]);
     const isMounted = React.useRef(false);
@@ -23,7 +23,7 @@ export function SelectEx(props) {
         if (multiple && Array.isArray(value)) {
             option = options.find((option) => value.includes(option[idField]));
         }
-        else if (value == null || value === '') {
+        else if (value == null || value === "") {
             option = undefined;
         }
         else {
@@ -46,7 +46,7 @@ export function SelectEx(props) {
     }, [options, propertyWay]);
     // Local value
     const v = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
-    const valueSource = React.useMemo(() => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v !== null && v !== void 0 ? v : ''), [multiple, v]);
+    const valueSource = React.useMemo(() => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v !== null && v !== void 0 ? v : ""), [multiple, v]);
     // Value state
     const [valueState, setValueStateBase] = React.useState(valueSource);
     const valueRef = React.useRef();
@@ -66,10 +66,10 @@ export function SelectEx(props) {
         if (id !== valueRef.current) {
             // Difference
             const diff = multiple
-                ? Utils.arrayDifferences(id, valueRef.current)
+                ? ArrayUtils.differences(id, valueRef.current)
                 : id;
             setValueState(id);
-            const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input");
             if (input) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id, false);
@@ -84,7 +84,7 @@ export function SelectEx(props) {
     };
     // Get option label
     const getLabel = (option) => {
-        return typeof labelField === 'function'
+        return typeof labelField === "function"
             ? labelField(option)
             : option[labelField];
     };
@@ -112,30 +112,28 @@ export function SelectEx(props) {
     // When layout ready
     React.useEffect(() => {
         var _a;
-        const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input");
         const inputChange = (event) => {
             // Reset case
             if (event.cancelable)
-                setValueState(multiple ? [] : '');
+                setValueState(multiple ? [] : "");
         };
-        input === null || input === void 0 ? void 0 : input.addEventListener('change', inputChange);
+        input === null || input === void 0 ? void 0 : input.addEventListener("change", inputChange);
         isMounted.current = true;
         return () => {
             isMounted.current = false;
-            input === null || input === void 0 ? void 0 : input.removeEventListener('change', inputChange);
+            input === null || input === void 0 ? void 0 : input.removeEventListener("change", inputChange);
         };
     }, [multiple]);
     // Layout
     return (React.createElement(Stack, { direction: "row" },
         React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error },
-            React.createElement(InputLabel, { id: labelId, shrink: search
-                    ? MUGlobal.searchFieldShrink
-                    : MUGlobal.inputFieldShrink }, label),
+            React.createElement(InputLabel, { id: labelId, shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink }, label),
             React.createElement(Select, { ref: divRef, value: multiple
                     ? valueState
                     : localOptions.some((o) => o[idField] === valueState)
                         ? valueState
-                        : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                        : "", input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                     if (onChange) {
                         onChange(event, child);
                         // event.preventDefault() will block executing
@@ -160,8 +158,8 @@ export function SelectEx(props) {
                             : selected === id;
                     })
                         .map((option) => getLabel(option))
-                        .join(', ');
-                }, sx: { minWidth: '150px' }, fullWidth: fullWidth, ...rest }, localOptions.map((option) => {
+                        .join(", ");
+                }, sx: { minWidth: "150px" }, fullWidth: fullWidth, ...rest }, localOptions.map((option) => {
                 // Option id
                 const id = getId(option);
                 // Option label
@@ -171,18 +169,16 @@ export function SelectEx(props) {
                         if (onItemClick) {
                             onItemClick(event, option);
                         }
-                    }, style: itemStyle == null
-                        ? undefined
-                        : itemStyle(option) },
+                    }, style: itemStyle == null ? undefined : itemStyle(option) },
                     multiple && (React.createElement(Checkbox, { checked: Array.isArray(valueState)
                             ? valueState.includes(id)
                             : valueState === id })),
                     React.createElement(ListItemText, { primary: label }),
                     itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(option[idField])))));
             })),
-            helperText != null && (React.createElement(FormHelperText, null, helperText))),
+            helperText != null && React.createElement(FormHelperText, null, helperText)),
         refresh != null &&
             loadData != null &&
-            (typeof refresh === 'string' ? (React.createElement(IconButton, { size: "small", title: refresh, onClick: refreshData },
+            (typeof refresh === "string" ? (React.createElement(IconButton, { size: "small", title: refresh, onClick: refreshData },
                 React.createElement(RefreshIcon, null))) : (refresh))));
 }

package/lib/TagList.js

@@ -12,15 +12,22 @@ export function TagList(props) {
     // Destruct
     const { renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
         React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
-        option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, ...rest } = props;
+        option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, 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 currentValue = React.useRef([]);
+    currentValue.current = value !== null && value !== void 0 ? value : [];
     const loadDataLocal = async (keyword) => {
         var _a;
         setLoading(true);
         const result = (_a = (await loadData(keyword, maxItems))) !== null && _a !== void 0 ? _a : [];
-        if (result.length >= maxItems) {
+        const len = result.length;
+        currentValue.current.forEach((item) => {
+            if (!result.includes(item))
+                result.push(item);
+        });
+        if (len >= maxItems) {
             result.push(moreLabel);
         }
         setOptions(result);
@@ -40,5 +47,9 @@ export function TagList(props) {
                 await loadDataLocal(event.target.value);
             }, ...inputProps, ...params })), getOptionDisabled: (item) => {
             return item === moreLabel;
-        }, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, ...rest }));
+        }, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, value: value, onChange: (event, value, reason, details) => {
+            currentValue.current = value;
+            if (onChange)
+                onChange(event, value, reason, details);
+        }, ...rest }));
 }

package/lib/TagListPro.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { AutocompleteProps } from "@mui/material";
+import { InputFieldProps } from "./InputField";
+type DataType = {
+    id: number | string;
+} & ({
+    label: string;
+} | {
+    name: string;
+});
+export type TagListProProps<D extends DataType = DataType> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Load data callback
+     */
+    loadData: (keyword: string | undefined, items: number) => PromiseLike<D[] | null | undefined>;
+    /**
+     * Input props
+     */
+    inputProps?: Omit<InputFieldProps, "onChange">;
+    /**
+     * Max items
+     */
+    maxItems?: number;
+};
+export declare function TagListPro<D extends DataType = DataType>(props: TagListProProps<D>): JSX.Element;
+export {};

package/lib/TagListPro.js

@@ -0,0 +1,59 @@
+import { Autocomplete, Checkbox, Chip } from "@mui/material";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import React from "react";
+import { InputField } from "./InputField";
+import { globalApp } from "./app/ReactApp";
+export function TagListPro(props) {
+    var _a;
+    // Labels
+    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more", "open")) !== null && _a !== void 0 ? _a : {};
+    const moreLabel = more + "...";
+    const getLabel = (item) => "label" in item ? item.label : "name" in item ? item.name : "";
+    // Destruct
+    const { renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
+        React.createElement(React.Fragment, null,
+            React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
+            getLabel(option)))), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: getLabel(option), ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, 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 currentValue = React.useRef([]);
+    currentValue.current = value !== null && value !== void 0 ? value : [];
+    const loadDataLocal = async (keyword) => {
+        var _a;
+        setLoading(true);
+        const result = (_a = (await loadData(keyword, maxItems))) !== null && _a !== void 0 ? _a : [];
+        const len = result.length;
+        currentValue.current.forEach((item) => {
+            if (!result.some((r) => r.id === item.id))
+                result.push(item);
+        });
+        if (len >= maxItems) {
+            result.push({ id: -1, name: moreLabel });
+        }
+        setOptions(result);
+        setLoading(false);
+    };
+    return (React.createElement(Autocomplete, { multiple: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
+            setOpen(true);
+            if (options.length === 0) {
+                loadDataLocal();
+            }
+        }, onClose: () => {
+            setOpen(false);
+        }, options: options, loading: loading, disableCloseOnSelect: disableCloseOnSelect, openOnFocus: openOnFocus, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+                // Stop bubble
+                event.preventDefault();
+                event.stopPropagation();
+                await loadDataLocal(event.target.value);
+            }, ...inputProps, ...params })), getOptionDisabled: (item) => {
+            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) => {
+            currentValue.current = value;
+            if (onChange)
+                onChange(event, value, reason, details);
+        }, ...rest }));
+}

package/lib/Tiplist.d.ts

@@ -13,6 +13,10 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<A
      * Max items to read and display
      */
     maxItems?: number;
+    /**
+     * Width
+     */
+    width?: number;
 };
 /**
  * Tiplist

package/lib/Tiplist.js

@@ -15,7 +15,9 @@ export function Tiplist(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more", "open")) !== null && _a !== void 0 ? _a : {};
     // Destruct
-    const { search = false, idField = "id", idValue, inputAutoComplete = "new-password", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, maxItems = 16, name, readOnly, onChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, ...rest } = props;
+    const { search = false, idField = "id", idValue, inputAutoComplete = "new-password", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width, name, readOnly, onChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, ...rest } = props;
+    if (width && sx)
+        Object.assign(sx, { width: `${width}px` });
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -156,7 +158,7 @@ export function Tiplist(props) {
                     open: false,
                     ...(!states.value && { options: [] })
                 });
-            }, loading: states.loading, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+            }, loading: states.loading, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
                 if (item[idField] === "n/a")
                     return true;
                 return getOptionDisabled ? getOptionDisabled(item) : false;

package/lib/index.d.ts

@@ -34,6 +34,7 @@ export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
 export * from "./ComboBox";
 export * from "./ComboBoxMultiple";
+export * from "./ComboBoxPro";
 export * from "./CountdownButton";
 export * from "./CountryList";
 export * from "./CustomFabProps";
@@ -87,6 +88,7 @@ export * from "./TableEx";
 export * from "./TextFieldEx";
 export * from "./Tiplist";
 export * from "./TagList";
+export * from "./TagListPro";
 export * from "./TwoFieldInput";
 export * from "./TooltipClick";
 export * from "./UserAvatar";

package/lib/index.js

@@ -34,6 +34,7 @@ export * from "./BridgeCloseButton";
 export * from "./ButtonLink";
 export * from "./ComboBox";
 export * from "./ComboBoxMultiple";
+export * from "./ComboBoxPro";
 export * from "./CountdownButton";
 export * from "./CountryList";
 export * from "./CustomFabProps";
@@ -87,6 +88,7 @@ export * from "./TableEx";
 export * from "./TextFieldEx";
 export * from "./Tiplist";
 export * from "./TagList";
+export * from "./TagListPro";
 export * from "./TwoFieldInput";
 export * from "./TooltipClick";
 export * from "./UserAvatar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.70",
+  "version": "1.1.72",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,10 +50,10 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.82",
+    "@etsoo/appscript": "^1.3.83",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.55",
-    "@etsoo/shared": "^1.1.92",
+    "@etsoo/react": "^1.6.56",
+    "@etsoo/shared": "^1.1.93",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.14",
     "@mui/x-data-grid": "^6.0.3",

package/src/ComboBoxPro.tsx

@@ -0,0 +1,129 @@
+import { Autocomplete, AutocompleteProps } from "@mui/material";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+import { InputField, InputFieldProps } from "./InputField";
+
+type DataType = {
+  id: number | string;
+} & ({ label: string } | { name: string });
+
+export type ComboBoxProProps<D extends DataType = DataType> = Omit<
+  AutocompleteProps<D, false, false, true>,
+  "open" | "multiple" | "options" | "renderInput"
+> & {
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Field name
+   */
+  name?: string;
+
+  /**
+   * Id value
+   */
+  idValue?: D["id"] | null;
+
+  /**
+   * Options
+   */
+  options: (() => PromiseLike<D[] | null | undefined>) | D[];
+
+  /**
+   * Input props
+   */
+  inputProps?: Omit<InputFieldProps, "onChange">;
+};
+
+export function ComboBoxPro<D extends DataType = DataType>(
+  props: ComboBoxProProps<D>
+) {
+  // Labels
+  const {
+    noOptions,
+    loading: loadingLabel,
+    open: openDefault
+  } = globalApp?.getLabels("noOptions", "loading", "open") ?? {};
+
+  const getLabel = (item: D) =>
+    "label" in item ? item.label : "name" in item ? item.name : "";
+
+  // Destruct
+  const {
+    noOptionsText = noOptions,
+    loadingText = loadingLabel,
+    openText = openDefault,
+    options,
+    openOnFocus = true,
+    label,
+    inputProps,
+    name,
+    value,
+    idValue,
+    onChange,
+    ...rest
+  } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const [localOptions, setOptions] = React.useState<readonly D[]>([]);
+  const [localValue, setValue] = React.useState<string | D | null>(null);
+  const [loading, setLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    if (value == null) return;
+    setValue(value);
+  }, [value]);
+
+  React.useEffect(() => {
+    if (idValue == null) return;
+    const option = localOptions.find((option) => option.id === idValue);
+    if (option) setValue(option);
+  }, [localOptions]);
+
+  React.useEffect(() => {
+    if (typeof options === "function") {
+      setLoading(true);
+      options().then((result) => {
+        setLoading(false);
+        if (result != null) setOptions(result);
+      });
+    } else {
+      setOptions(options);
+    }
+  }, [options]);
+
+  return (
+    <Autocomplete<D, false, false, true>
+      id={name}
+      value={localValue}
+      open={open}
+      freeSolo
+      onOpen={() => {
+        setOpen(true);
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      options={localOptions}
+      loading={loading}
+      openOnFocus={openOnFocus}
+      renderInput={(params) => (
+        <InputField {...inputProps} {...params} label={label} name={name} />
+      )}
+      getOptionLabel={(item) =>
+        typeof item === "object" ? getLabel(item) : item
+      }
+      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);
+      }}
+      {...rest}
+    />
+  );
+}