@etsoo/materialui 1.4.68 → 1.4.70

package/lib/cjs/AddresSelector.js

@@ -0,0 +1,141 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddressField = void 0;
+exports.AddressSelector = AddressSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const ReactApp_1 = require("./app/ReactApp");
+const ComboBox_1 = require("./ComboBox");
+const Tiplist_1 = require("./Tiplist");
+/**
+ * Address field
+ */
+var AddressField;
+(function (AddressField) {
+    AddressField["Region"] = "region";
+    AddressField["State"] = "state";
+    AddressField["City"] = "city";
+    AddressField["District"] = "district";
+})(AddressField || (exports.AddressField = AddressField = {}));
+/**
+ * Address selector
+ * @param props Props
+ */
+function AddressSelector(props) {
+    // Labels
+    const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = ReactApp_1.globalApp?.getLabels("region", "state", "city", "district") ?? {};
+    // Destruct
+    const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, favoredIds, helperText, hideRegion, label, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault, breakPoints = { xs: 12, md: 6, lg: hideRegion ? 4 : 3 } } = props;
+    const isMounted = react_1.default.useRef(true);
+    react_1.default.useEffect(() => () => {
+        isMounted.current = false;
+    }, []);
+    // States
+    const [regionState, setRegion] = react_1.default.useState(region);
+    const [stateState, setState] = react_1.default.useState(state);
+    const [cityState, setCity] = react_1.default.useState(city);
+    const [districtState, setDistrict] = react_1.default.useState(district);
+    react_1.default.useEffect(() => setRegion(region), [region]);
+    react_1.default.useEffect(() => setState(state), [state]);
+    react_1.default.useEffect(() => setCity(city), [city]);
+    react_1.default.useEffect(() => setDistrict(district), [district]);
+    const [states, setStates] = react_1.default.useState([]);
+    const [cities, setCities] = react_1.default.useState([]);
+    const [districts, setDistricts] = react_1.default.useState([]);
+    react_1.default.useEffect(() => {
+        if (regionState == null)
+            setStates([]);
+        else
+            api
+                .states(regionState, favoredIds == null ? undefined : favoredIds(AddressField.State))
+                .then((items) => {
+                if (items == null || !isMounted.current)
+                    return;
+                setStates(items);
+            });
+    }, [regionState]);
+    react_1.default.useEffect(() => {
+        if (stateState == null)
+            setCities([]);
+        else
+            api
+                .cities(stateState, favoredIds == null ? undefined : favoredIds(AddressField.City))
+                .then((items) => {
+                if (items == null || !isMounted.current)
+                    return;
+                setCities(items);
+            });
+    }, [stateState]);
+    react_1.default.useEffect(() => {
+        if (cityState == null)
+            setDistricts([]);
+        else
+            api
+                .districts(cityState, favoredIds == null ? undefined : favoredIds(AddressField.District))
+                .then((items) => {
+                if (items == null || !isMounted.current)
+                    return;
+                setDistricts(items);
+            });
+    }, [cityState]);
+    // Handle field change
+    const handleChange = (event) => {
+        if (!isMounted.current)
+            return;
+        if (onChange)
+            onChange(event);
+        const [field, data] = event;
+        if (field === AddressField.Region) {
+            if (data == null) {
+                setRegion(undefined);
+            }
+            else {
+                setRegion(data.id);
+            }
+            setState(undefined);
+            setCity(undefined);
+            setDistrict(undefined);
+            return;
+        }
+        if (field === AddressField.State) {
+            if (data == null) {
+                setState(undefined);
+            }
+            else {
+                setState(data.id);
+            }
+            setCity(undefined);
+            setDistrict(undefined);
+            return;
+        }
+        if (field === AddressField.City) {
+            if (data == null) {
+                setCity(undefined);
+            }
+            else {
+                setCity(data.id);
+            }
+            setDistrict(undefined);
+            return;
+        }
+        if (data == null) {
+            setDistrict(undefined);
+        }
+        else {
+            setDistrict(data.id);
+        }
+    };
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: { xs: 12 }, children: (0, jsx_runtime_1.jsx)(material_1.FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), !hideRegion && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.regions({
+                        keyword,
+                        id,
+                        items,
+                        favoredIds: favoredIds == null
+                            ? undefined
+                            : favoredIds(AddressField.Region)
+                    }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: required, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange([AddressField.State, value]) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }) })] }));
+}

package/lib/cjs/AuditDisplay.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuditDisplay = AuditDisplay;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const ReactApp_1 = require("./app/ReactApp");
+const ListMoreDisplay_1 = require("./ListMoreDisplay");
+const ShowDataComparison_1 = require("./ShowDataComparison");
+// Get label
+const getLabel = (key) => {
+    return ReactApp_1.globalApp?.get(shared_1.Utils.formatInitial(key)) ?? key;
+};
+// Format date
+const formatDate = (date) => {
+    if (ReactApp_1.globalApp)
+        return ReactApp_1.globalApp.formatDate(date, "ds");
+    return date.toUTCString();
+};
+/**
+ * Audit display
+ * @param props Props
+ * @returns Component
+ */
+function AuditDisplay(props) {
+    // Theme
+    const theme = (0, material_1.useTheme)();
+    // Title
+    var title = getLabel("dataComparison");
+    // Destruct
+    const { getItemStyle = (index, theme) => ({
+        padding: [theme.spacing(1.5), theme.spacing(1)].join(" "),
+        background: index % 2 === 0 ? theme.palette.grey[100] : theme.palette.grey[50]
+    }), getColumnLabel, equalCheck, itemRenderer = (data) => {
+        const { newData, oldData, changes = { newData: newData ?? {}, oldData: oldData ?? {} } } = data;
+        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [changes != null && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => (0, ShowDataComparison_1.ShowDataComparison)(changes, title, getColumnLabel, equalCheck), sx: {
+                        marginLeft: theme.spacing(1),
+                        marginTop: theme.spacing(-0.5),
+                        float: "right"
+                    }, children: title })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: formatDate(data.creation) +
+                        ", [" +
+                        getLabel(data.action) +
+                        "], " +
+                        data.user })] }));
+    }, headerTitle = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: getLabel("audits") }), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), ...rest } = props;
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(ListMoreDisplay_1.ListMoreDisplay, { headerTitle: headerTitle, ...rest, children: (data, index) => ((0, jsx_runtime_1.jsx)("div", { style: getItemStyle(index, theme), children: itemRenderer(data, index) }, data.id)) }));
+}

package/lib/cjs/AutocompleteExtendedProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/BackButton.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackButton = BackButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ArrowBack_1 = __importDefault(require("@mui/icons-material/ArrowBack"));
+const react_router_1 = require("react-router");
+/**
+ * BackButton
+ * @param props Props
+ * @returns Component
+ */
+function BackButton(props) {
+    // Destruct
+    const { color = "primary", size = "small", onClick, ...rest } = props;
+    // Theme
+    const theme = (0, material_1.useTheme)();
+    // Navigate
+    const navigate = (0, react_router_1.useNavigate)();
+    // Color
+    const pColor = color != "inherit" && color != "default" && color in theme.palette
+        ? theme.palette[color]
+        : theme.palette.primary;
+    // Click handler
+    const onClickLocal = async (event) => {
+        if (onClick)
+            onClick(event);
+        // Navigate
+        navigate(-1);
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "Back", color: color, size: size, onClick: onClickLocal, sx: {
+            backgroundColor: pColor.contrastText,
+            border: `1px solid ${pColor.light}`
+        }, ...rest, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) }));
+}

package/lib/cjs/BridgeCloseButton.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BridgeCloseButton = BridgeCloseButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const appscript_1 = require("@etsoo/appscript");
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * Bridge close button
+ * @param props Props
+ * @returns Component
+ */
+function BridgeCloseButton(props) {
+    // Destruct
+    const { boxProps, onClick, title = ReactApp_1.globalApp?.get("close") ?? "Close", validate, ...rest } = props;
+    // Host
+    const host = appscript_1.BridgeUtils.host;
+    if (host == null ||
+        !host.closable() ||
+        (validate && validate(host) === false)) {
+        return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});
+    }
+    // Click handler
+    const onClickLocal = (event) => {
+        if (onClick)
+            onClick(event);
+        host.exit();
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ...boxProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "close", onClick: onClickLocal, title: title, ...rest, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }) }));
+}

package/lib/cjs/ButtonLink.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonLink = ButtonLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_router_1 = require("react-router");
+/**
+ * ButtonLink
+ * @param props Props
+ * @returns Component
+ */
+function ButtonLink(props) {
+    // Destruct
+    const { href, state, ...rest } = props;
+    // Navigate
+    const navigate = (0, react_router_1.useNavigate)();
+    const onClick = href.includes("://")
+        ? () => window.open(href, "_blank")
+        : () => navigate(href, { state });
+    // Layout
+    return (0, jsx_runtime_1.jsx)(material_1.Button, { ...rest, onClick: onClick });
+}

package/lib/cjs/ButtonPopover.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonPopover = ButtonPopover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+/**
+ * Button popover component
+ * @param props Props
+ * @returns Component
+ */
+function ButtonPopover(props) {
+    // Destruct
+    const { button, children, loadData } = props;
+    // States
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const [data, setData] = react_1.default.useState(null);
+    const isLoadded = react_1.default.useRef(false);
+    const open = Boolean(anchorEl);
+    // Load data
+    react_1.default.useEffect(() => {
+        if (loadData && (!isLoadded.current || open)) {
+            // First time or when open
+            loadData().then((d) => {
+                if (d == null)
+                    return;
+                setData(d);
+                isLoadded.current = true;
+            });
+        }
+    }, [loadData, open]);
+    // Children
+    const currentChildren = react_1.default.useMemo(() => children(data), [children, data]);
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [button((handler) => setAnchorEl(handler)), (0, jsx_runtime_1.jsx)(material_1.Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, slotProps: {
+                    paper: {
+                        elevation: 0,
+                        sx: {
+                            overflow: "visible",
+                            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                            mt: 1,
+                            "&::before": {
+                                content: '""',
+                                display: "block",
+                                position: "absolute",
+                                top: 0,
+                                right: 14,
+                                width: 10,
+                                height: 10,
+                                bgcolor: "background.paper",
+                                transform: "translateY(-50%) rotate(45deg)",
+                                zIndex: 0
+                            }
+                        }
+                    }
+                }, children: currentChildren })] }));
+}

package/lib/cjs/ComboBox.js

@@ -0,0 +1,134 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBox = ComboBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const shared_2 = require("@etsoo/shared");
+const react_2 = require("@etsoo/react");
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const SearchField_1 = require("./SearchField");
+const InputField_1 = require("./InputField");
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * ComboBox
+ * @param props Props
+ * @returns Component
+ */
+function ComboBox(props) {
+    // Labels
+    const labels = ReactApp_1.globalApp?.getLabels("noOptions", "loading", "open", "add");
+    // Destruct
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
+    // Value input ref
+    const inputRef = react_1.default.createRef();
+    // Options state
+    const [localOptions, setOptions] = react_1.default.useState(options ?? []);
+    const isMounted = react_1.default.useRef(true);
+    // When options change
+    // [options] will cause infinite loop
+    const propertyWay = loadData == null;
+    react_1.default.useEffect(() => {
+        if (propertyWay && options != null) {
+            setOptions(options);
+            if (stateValue != null &&
+                !options.some((option) => option[idField] === stateValue[idField])) {
+                setStateValue(null);
+            }
+        }
+    }, [options, propertyWay]);
+    // Local default value
+    const localValue = idValue != null
+        ? localOptions.find((o) => o[idField] === idValue)
+        : defaultValue ?? value;
+    // State
+    // null for controlled
+    const [stateValue, setStateValue] = react_1.default.useState(null);
+    react_1.default.useEffect(() => {
+        if (localValue != null && localValue != stateValue) {
+            setStateValue(localValue);
+            if (onValueChange)
+                onValueChange(localValue);
+        }
+    }, [localValue]);
+    // Add readOnly
+    // Before AutocompleteRenderInputParams changed, impossible to remove "InputLabelProps" and "InputProps"
+    const addReadOnly = (params) => {
+        if (readOnly != null) {
+            Object.assign(params, { readOnly });
+        }
+        Object.assign(params.inputProps, { "data-reset": inputReset });
+        if (dataReadonly) {
+            params.inputProps.onKeyDown = (event) => {
+                if (shared_1.Keyboard.isTypingContent(event.key)) {
+                    event.preventDefault();
+                }
+            };
+        }
+        // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
+        // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
+        Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
+        return params;
+    };
+    const getValue = (value) => {
+        if (value == null)
+            return "";
+        if (Array.isArray(value))
+            return value.map((item) => item[idField]).join(",");
+        return `${value[idField]}`;
+    };
+    const setInputValue = (value) => {
+        // Set state
+        setStateValue(value);
+        // Input value
+        const input = inputRef.current;
+        if (input) {
+            // Update value
+            const newValue = getValue(value);
+            if (newValue !== input.value) {
+                // Different value, trigger change event
+                react_2.ReactUtils.triggerChange(input, newValue, false);
+            }
+        }
+    };
+    const doLoadData = react_1.default.useCallback(() => {
+        if (loadData == null)
+            return;
+        loadData().then((result) => {
+            if (result == null || !isMounted.current)
+                return;
+            if (onLoadData)
+                onLoadData(result);
+            if (autoAddBlankItem) {
+                shared_2.Utils.addBlankItem(result, idField, labelField);
+            }
+            setOptions(result);
+        });
+    }, [loadData, autoAddBlankItem, idField, labelField]);
+    react_1.default.useEffect(() => {
+        if (propertyWay)
+            return;
+        doLoadData();
+    }, [propertyWay, doLoadData]);
+    react_1.default.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                            // Set value
+                            setInputValue(value);
+                            // Custom
+                            if (onChange != null)
+                                onChange(event, value, reason, details);
+                            if (onValueChange)
+                                onValueChange(value);
+                        }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionKey: getOptionKey, ...rest }), onAdd && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => {
+                            onAdd(doLoadData);
+                        }, title: addLabel, children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }))] })] }));
+}

package/lib/cjs/ComboBoxMultiple.js

@@ -0,0 +1,132 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBoxMultiple = ComboBoxMultiple;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const shared_2 = require("@etsoo/shared");
+const react_2 = require("@etsoo/react");
+const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
+const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
+const SearchField_1 = require("./SearchField");
+const InputField_1 = require("./InputField");
+const ReactApp_1 = require("./app/ReactApp");
+const icon = (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" });
+const checkedIcon = (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" });
+/**
+ * ComboBox multiple
+ * @param props Props
+ * @returns Component
+ */
+function ComboBoxMultiple(props) {
+    // Labels
+    const labels = ReactApp_1.globalApp?.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)(material_1.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;
+    // Value input ref
+    const inputRef = react_1.default.createRef();
+    // Options state
+    const [localOptions, setOptions] = react_1.default.useState(options ?? []);
+    const isMounted = react_1.default.useRef(true);
+    // Local default value
+    const localValue = idValue != null
+        ? localOptions.filter((o) => o[idField] === idValue)
+        : idValues != null
+            ? localOptions.filter((o) => idValues?.includes(o[idField]))
+            : defaultValue?.concat() ?? value?.concat();
+    // State
+    // null for controlled
+    const [stateValue, setStateValue] = react_1.default.useState(null);
+    react_1.default.useEffect(() => {
+        setStateValue(localValue ?? []);
+    }, [localValue]);
+    // When options change
+    // [options] will cause infinite loop
+    const propertyWay = loadData == null;
+    react_1.default.useEffect(() => {
+        if (propertyWay && options != null) {
+            setOptions(options);
+            if (stateValue != null) {
+                if (Array.isArray(stateValue)) {
+                    const newState = stateValue.filter((item) => options.some((option) => option[idField] === item[idField]));
+                    setStateValue(newState);
+                }
+                else if (!options.some((option) => option[idField] === stateValue[idField])) {
+                    setStateValue(null);
+                }
+            }
+        }
+    }, [options, propertyWay]);
+    // Add readOnly
+    const addReadOnly = (params) => {
+        if (readOnly != null) {
+            Object.assign(params, { readOnly });
+        }
+        Object.assign(params.inputProps, { "data-reset": inputReset });
+        if (dataReadonly) {
+            params.inputProps.onKeyDown = (event) => {
+                if (shared_1.Keyboard.isTypingContent(event.key)) {
+                    event.preventDefault();
+                }
+            };
+        }
+        // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
+        // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
+        Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
+        return params;
+    };
+    const getValue = (value) => {
+        if (value == null)
+            return "";
+        return value.map((item) => item[idField]).join(",");
+    };
+    const setInputValue = (value) => {
+        // Set state
+        setStateValue(value);
+        // Input value
+        const input = inputRef.current;
+        if (input) {
+            // Update value
+            const newValue = getValue(value);
+            if (newValue !== input.value) {
+                // Different value, trigger change event
+                react_2.ReactUtils.triggerChange(input, newValue, false);
+            }
+        }
+    };
+    react_1.default.useEffect(() => {
+        if (propertyWay || loadData == null)
+            return;
+        loadData().then((result) => {
+            if (result == null || !isMounted.current)
+                return;
+            if (onLoadData)
+                onLoadData(result);
+            if (autoAddBlankItem) {
+                shared_2.Utils.addBlankItem(result, idField, labelField);
+            }
+            setOptions(result);
+        });
+    }, [propertyWay, autoAddBlankItem, idField, labelField]);
+    react_1.default.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { value: stateValue == null
+                    ? []
+                    : Array.isArray(stateValue)
+                        ? stateValue
+                        : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                    // Set value
+                    setInputValue(value.concat());
+                    // Custom
+                    if (onChange != null)
+                        onChange(event, value, reason, details);
+                }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })] }));
+}