@etsoo/materialui 1.4.68 → 1.4.70

package/lib/cjs/app/ServiceApp.js

@@ -0,0 +1,232 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServiceApp = void 0;
+const appscript_1 = require("@etsoo/appscript");
+const ReactApp_1 = require("./ReactApp");
+const coreName = "core";
+const coreTokenKey = "core-refresh-token";
+const tryLoginKey = "tryLogin";
+/**
+ * Core Service App
+ * Service login to core system, get the refesh token and access token
+ * Use the acess token to the service api, get a service access token
+ * Use the new acess token and refresh token to login
+ */
+class ServiceApp extends ReactApp_1.ReactApp {
+    /**
+     * Core endpoint
+     */
+    coreEndpoint;
+    /**
+     * Core system API
+     */
+    coreApi;
+    /**
+     * Core system origin
+     */
+    coreOrigin;
+    coreAccessToken;
+    /**
+     * Constructor
+     * @param settings Settings
+     * @param name Application name
+     * @param debug Debug mode
+     */
+    constructor(settings, name, debug = false) {
+        super(settings, name, debug);
+        const coreEndpoint = settings.endpoints?.core;
+        if (coreEndpoint == null) {
+            throw new Error("Core API endpont is required.");
+        }
+        this.coreEndpoint = coreEndpoint;
+        this.coreOrigin = new URL(coreEndpoint.webUrl).origin;
+        this.coreApi = this.createApi(coreName, coreEndpoint);
+        this.keepLogin = true;
+    }
+    /**
+     * Load core system UI
+     * @param tryLogin Try login or not
+     */
+    loadCore(tryLogin = false) {
+        if (appscript_1.BridgeUtils.host == null) {
+            let url = this.coreEndpoint.webUrl;
+            if (!tryLogin)
+                url = url.addUrlParam(tryLoginKey, tryLogin);
+            globalThis.location.href = url;
+        }
+        else {
+            const startUrl = tryLogin
+                ? undefined
+                : "".addUrlParam(tryLoginKey, tryLogin);
+            appscript_1.BridgeUtils.host.loadApp(coreName, startUrl);
+        }
+    }
+    /**
+     * Go to the login page
+     * @param data Login parameters
+     */
+    toLoginPage(data) {
+        // Destruct
+        const { removeUrl, showLoading, params } = data ?? {};
+        // Cache current URL
+        this.cachedUrl = removeUrl ? undefined : globalThis.location.href;
+        //  Get the redirect URL
+        new appscript_1.AuthApi(this)
+            .getLogInUrl({
+            region: this.region,
+            device: this.deviceId
+        })
+            .then((url) => {
+            if (!url)
+                return;
+            // Add try login flag
+            if (params != null) {
+                url = url.addUrlParams(params);
+            }
+            // Is it embeded?
+            if (this.embedded) {
+                globalThis.parent.postMessage(["login", url], this.coreOrigin);
+            }
+            else {
+                if (appscript_1.BridgeUtils.host == null) {
+                    globalThis.location.href = url;
+                }
+                else {
+                    appscript_1.BridgeUtils.host.loadApp(coreName, url);
+                }
+            }
+        });
+        // Make sure apply new device id for new login
+        this.clearDeviceId();
+    }
+    /**
+     * Signout, with userLogout and toLoginPage
+     * @param action Callback
+     */
+    signout(action) {
+        // Clear core token
+        this.storage.setData(coreTokenKey, undefined);
+        // Super call
+        return super.signout(action);
+    }
+    /**
+     *
+     * @param user Current user
+     * @param core Core system API token data
+     * @param keep Keep in local storage or not
+     * @param dispatch User state dispatch
+     */
+    userLoginEx(user, core, dispatch) {
+        if (user.clientDeviceId && user.passphrase) {
+            // Save the passphrase
+            // Interpolated string expressions are different between TypeScript and C# for the null value
+            const passphrase = this.decrypt(user.passphrase, `${user.uid ?? ""}-${this.settings.appId}`);
+            if (passphrase) {
+                this.deviceId = user.clientDeviceId;
+                this.updatePassphrase(passphrase);
+            }
+        }
+        // User login
+        const { refreshToken } = user;
+        // Core system login
+        // It's the extreme case, the core system token should not be the same with the current app user token
+        core ??= {
+            refreshToken,
+            accessToken: user.token,
+            tokenType: user.tokenScheme ?? "Bearer",
+            expiresIn: user.seconds
+        };
+        // Cache the core system data
+        this.saveCoreToken(core);
+        // User login and trigger the dispatch at last
+        this.userLogin(user, refreshToken, dispatch);
+    }
+    /**
+     * Save core system data
+     * @param data Data
+     */
+    saveCoreToken(data) {
+        // Hold the core system access token
+        this.coreAccessToken = data.accessToken;
+        // Cache the core system refresh token
+        this.storage.setData(coreTokenKey, this.encrypt(data.refreshToken));
+        // Exchange tokens
+        this.exchangeTokenAll(data, coreName);
+    }
+    /**
+     * Switch organization
+     * @param organizationId Organization ID
+     * @param fromOrganizationId From organization ID
+     * @param payload Payload
+     */
+    async switchOrg(organizationId, fromOrganizationId, payload) {
+        if (!this.coreAccessToken) {
+            throw new Error("Core access token is required to switch organization.");
+        }
+        const [result, refreshToken] = await new appscript_1.AuthApi(this).switchOrg({ organizationId, fromOrganizationId, token: this.coreAccessToken }, payload);
+        if (result == null)
+            return;
+        if (!result.ok) {
+            return result;
+        }
+        if (result.data == null) {
+            throw new Error("Invalid switch organization result.");
+        }
+        let core;
+        if ("core" in result.data && typeof result.data.core === "string") {
+            core = JSON.parse(result.data.core);
+            delete result.data.core;
+        }
+        // Override the user data's refresh token
+        const user = refreshToken ? { ...result.data, refreshToken } : result.data;
+        // User login
+        this.userLoginEx(user, core, true);
+        return result;
+    }
+    async refreshTokenSucceed(user, token, callback) {
+        // Check core system token
+        const coreToken = this.storage.getData(coreTokenKey);
+        if (!coreToken) {
+            callback?.({ ok: false, type: "noData", title: "Core token is blank" });
+            return;
+        }
+        const coreTokenDecrypted = this.decrypt(coreToken);
+        if (!coreTokenDecrypted) {
+            callback?.({
+                ok: false,
+                type: "noData",
+                title: "Core token decrypted is blank"
+            });
+            return;
+        }
+        // Call the core system API refresh token
+        const data = await this.apiRefreshTokenData(this.coreApi, {
+            token: coreTokenDecrypted,
+            appId: this.settings.appId
+        });
+        if (data == null)
+            return;
+        // Cache the core system refresh token
+        // Follow similar logic in userLoginEx
+        this.saveCoreToken(data);
+        // Call the super
+        await super.refreshTokenSucceed(user, token, callback);
+    }
+    /**
+     * Try login
+     * @param params Login parameters
+     */
+    async tryLogin(params) {
+        // Destruct
+        params ??= {};
+        let { onFailure, ...rest } = params;
+        if (onFailure == null) {
+            onFailure = params.onFailure = (type) => {
+                console.log(`Try login failed: ${type}.`);
+                this.toLoginPage(rest);
+            };
+        }
+        return await super.tryLogin(params);
+    }
+}
+exports.ServiceApp = ServiceApp;

package/lib/cjs/custom/CustomFieldUtils.js

@@ -0,0 +1,152 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFieldUtils = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const FieldCheckbox_1 = require("./FieldCheckbox");
+const FieldAmountLabel_1 = require("./FieldAmountLabel");
+const FieldDateInput_1 = require("./FieldDateInput");
+const FieldDivider_1 = require("./FieldDivider");
+const FieldCombobox_1 = require("./FieldCombobox");
+const FieldInput_1 = require("./FieldInput");
+const FieldLabel_1 = require("./FieldLabel");
+const FieldNumberInput_1 = require("./FieldNumberInput");
+const FieldTexarea_1 = require("./FieldTexarea");
+const FieldJson_1 = require("./FieldJson");
+const FieldRadio_1 = require("./FieldRadio");
+const FieldSelect_1 = require("./FieldSelect");
+const FieldSwitch_1 = require("./FieldSwitch");
+/**
+ * Custom field utilities
+ */
+var CustomFieldUtils;
+(function (CustomFieldUtils) {
+    /**
+     * Custom field creators
+     */
+    CustomFieldUtils.customFieldCreators = {
+        amountlabel: FieldAmountLabel_1.FieldAmountLabel,
+        checkbox: FieldCheckbox_1.FieldCheckbox,
+        combobox: FieldCombobox_1.FieldCombobox,
+        date: FieldDateInput_1.FieldDateInput,
+        divider: FieldDivider_1.FieldDivider,
+        input: FieldInput_1.FieldInput,
+        json: FieldJson_1.FieldJson,
+        label: FieldLabel_1.FieldLabel,
+        number: FieldNumberInput_1.FieldNumberInput,
+        radio: FieldRadio_1.FieldRadio,
+        select: FieldSelect_1.FieldSelect,
+        switch: FieldSwitch_1.FieldSwitch,
+        textarea: FieldTexarea_1.FieldTexarea
+    };
+    /**
+     * Create layout
+     * @param fields Fields
+     * @param collections Ref collections
+     * @param getValue Get default value callback
+     * @param onChange Callback for value change
+     * @param globalCallback Global label callback, can be repeated
+     * @param fieldCalback Field callback
+     * @returns
+     */
+    function create(fields, collections, getValue, onChange, globalCallback, fieldCalback) {
+        return fields.map((field, index) => {
+            // Global callback for labels
+            if (globalCallback) {
+                if (field.label)
+                    field.label = globalCallback(field.label);
+                if (field.helperText)
+                    field.helperText = globalCallback(field.helperText);
+                if (field.mainSlotProps)
+                    updateProperties(field.mainSlotProps, globalCallback);
+            }
+            // Field callback for each field
+            if (fieldCalback)
+                fieldCalback(field);
+            const creator = CustomFieldUtils.customFieldCreators[field.type];
+            if (creator == null) {
+                return ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, index));
+            }
+            const Creator = creator;
+            const mref = react_1.default.createRef();
+            let ui = ((0, jsx_runtime_1.jsx)(Creator, { field: field, mref: mref, onChange: onChange, defaultValue: getValue(field) }));
+            const name = field.name;
+            if (name) {
+                if (collections[name] == null) {
+                    collections[name] = [mref, field];
+                }
+                else {
+                    ui = `Duplicate custom field ${name}`;
+                }
+            }
+            return ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: transformSpace(field.space), ...field.gridItemProps, children: ui }, name ?? index));
+        });
+    }
+    CustomFieldUtils.create = create;
+    /**
+     * Create multiline label
+     * @param label Original label
+     * @param props Properties
+     * @returns Result
+     */
+    function createMultilineLabel(label, props) {
+        return label?.split("\n").map((line, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", ...props, children: line }, index)));
+    }
+    CustomFieldUtils.createMultilineLabel = createMultilineLabel;
+    /**
+     * Transform custom field space
+     * @param space Space
+     * @returns Result
+     */
+    function transformSpace(space) {
+        const size = space === "full"
+            ? { xs: 12 }
+            : space === "quater"
+                ? { sm: 12, md: 6, lg: 3 }
+                : space === "five"
+                    ? { sm: 12, md: 5 }
+                    : space === "seven"
+                        ? { sm: 12, md: 7 }
+                        : space === "half1"
+                            ? { xs: 12, sm: 6 }
+                            : { sm: 12, md: 6 };
+        return size;
+    }
+    CustomFieldUtils.transformSpace = transformSpace;
+    /**
+     * Update ref options
+     * @param fields Fields
+     * @param callback Callback
+     */
+    function updateOptions(fields, callback) {
+        fields.forEach((field) => {
+            if (field.refs == null || field.refs.length < 2)
+                return;
+            const key = field.refs[0];
+            const ids = field.refs.slice(1);
+            field.options = callback(key, ids);
+        });
+    }
+    CustomFieldUtils.updateOptions = updateOptions;
+    /**
+     * Update properties
+     * @param input Input object
+     * @param globalCallback Global callback
+     */
+    function updateProperties(input, globalCallback) {
+        for (const key in input) {
+            const value = Reflect.get(input, key);
+            if (typeof value === "string") {
+                Reflect.set(input, key, globalCallback(value));
+            }
+            else if (typeof value === "object" && value != null) {
+                updateProperties(value, globalCallback);
+            }
+        }
+    }
+    CustomFieldUtils.updateProperties = updateProperties;
+})(CustomFieldUtils || (exports.CustomFieldUtils = CustomFieldUtils = {}));

package/lib/cjs/custom/CustomFieldViewer.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFieldViewer = CustomFieldViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const CustomFieldUtils_1 = require("./CustomFieldUtils");
+const MUGlobal_1 = require("../MUGlobal");
+const FlexBox_1 = require("../FlexBox");
+const shared_1 = require("@etsoo/shared");
+/**
+ * Custom field viewer
+ * 自定义字段查看器
+ * @param props Props
+ * @returns Component
+ */
+function CustomFieldViewer(props) {
+    // Destruct
+    const { fields, gridProps, jsonData, titleProps, verticalGap = 0.5, valueLabelFormatter = (value, field) => {
+        if (value == null)
+            return "";
+        if (field.options) {
+            const option = field.options.find((o) => o.id === value);
+            if (option) {
+                return shared_1.DataTypes.getListItemLabel(option);
+            }
+        }
+        if (typeof value === "object") {
+            if (value instanceof Date) {
+                return value.toLocaleString();
+            }
+            else {
+                return JSON.stringify(value);
+            }
+        }
+        else {
+            return `${value}`;
+        }
+    }, valueProps } = props;
+    const spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings);
+    const data = typeof jsonData === "string" ? JSON.parse(jsonData) : jsonData;
+    if (data == null || typeof data !== "object" || Array.isArray(data)) {
+        throw new Error("Invalid JSON data");
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "left", spacing: spacing, sx: {
+            ".MuiTypography-subtitle2": {
+                fontWeight: "bold"
+            }
+        }, ...gridProps, children: fields.map((field, index) => {
+            // Field name
+            const name = field.name;
+            if (!name)
+                return;
+            // Field value
+            const value = shared_1.Utils.getNestedValue(data, name);
+            return ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: CustomFieldUtils_1.CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: (0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: verticalGap, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
+        }) }));
+}

package/lib/cjs/custom/CustomFieldWindow.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFieldWindow = CustomFieldWindow;
+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 MUGlobal_1 = require("../MUGlobal");
+const CustomFieldUtils_1 = require("./CustomFieldUtils");
+function calculateKeys(data) {
+    let count = 0;
+    for (const key in data) {
+        const item = data[key];
+        if (typeof item === "object" && item !== null && !Array.isArray(item)) {
+            count += calculateKeys(item);
+        }
+        else {
+            count++;
+        }
+    }
+    return count;
+}
+function parseJsonData(jsonData) {
+    let data = {};
+    if (jsonData) {
+        try {
+            data =
+                typeof jsonData === "object"
+                    ? jsonData
+                    : typeof jsonData === "string"
+                        ? JSON.parse(jsonData)
+                        : {};
+        }
+        catch { }
+    }
+    return [data, calculateKeys(data)];
+}
+/**
+ * Custom field window
+ * 自定义字段窗口
+ * @param props Props
+ * @returns Component
+ */
+function CustomFieldWindow(props) {
+    // Validate app
+    const app = ReactApp_1.globalApp;
+    if (app == null) {
+        throw new Error("No globalApp");
+    }
+    const { children, label = app.get("jsonData"), gridProps, jsonData, inputName = "jsonData", inputRef, onUpdate } = props;
+    const spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings);
+    const [count, setCount] = react_1.default.useState(0);
+    const [initData, propertyCount] = parseJsonData(jsonData);
+    react_1.default.useEffect(() => setCount(propertyCount), [propertyCount]);
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, ref: inputRef }), children((customFields, jsonData) => {
+                const collections = {};
+                let data = {};
+                jsonData ??= inputRef?.current?.value;
+                if (jsonData) {
+                    const [d, pc] = parseJsonData(jsonData);
+                    data = d;
+                    setCount(pc);
+                }
+                else {
+                    data = initData;
+                }
+                app.notifier.confirm(label, undefined, (value) => {
+                    if (value) {
+                        if (inputRef?.current) {
+                            inputRef.current.value = JSON.stringify(data);
+                        }
+                        setCount(calculateKeys(data));
+                        if (onUpdate)
+                            onUpdate(data);
+                    }
+                }, {
+                    fullScreen: app.smDown,
+                    inputs: ((0, jsx_runtime_1.jsx)(material_1.Stack, { marginTop: 1.5, children: (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "left", spacing: spacing, sx: {
+                                ".MuiTypography-subtitle2": {
+                                    fontWeight: "bold"
+                                }
+                            }, ...gridProps, children: CustomFieldUtils_1.CustomFieldUtils.create(customFields, collections, (field) => {
+                                if (field.name == null)
+                                    return;
+                                return shared_1.Utils.getNestedValue(data, field.name);
+                            }, (name, value) => {
+                                shared_1.Utils.setNestedValue(data, name, value);
+                            }) }) }))
+                });
+            }, label, count)] }));
+}

package/lib/cjs/custom/FieldAmountLabel.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldAmountLabel = void 0;
+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"));
+/**
+ * Amount label field creator
+ * type: amountlabel
+ * @returns Component
+ */
+const FieldAmountLabel = ({ field, mref, defaultValue }) => {
+    // Destruct
+    const { label, mainSlotProps = {}, helperText } = field;
+    const { currency, ...rest } = mainSlotProps;
+    const currencySymbol = react_1.default.useMemo(() => (currency ? shared_1.NumberUtils.getCurrencySymbol(currency) : ""), [currency]);
+    // State
+    const [amountLabel, setAmountLabel] = react_1.default.useState(label);
+    react_1.default.useEffect(() => {
+        setAmountLabel(label);
+    }, [label]);
+    // Ref
+    const getValue = () => amountLabel;
+    const setValue = (value) => {
+        if (typeof value === "number") {
+            setAmountLabel(shared_1.NumberUtils.formatMoney(value));
+        }
+        else {
+            setAmountLabel(`${value} ?? ''`);
+        }
+    };
+    react_1.default.useImperativeHandle(mref, () => ({
+        getValue,
+        setValue
+    }));
+    react_1.default.useEffect(() => {
+        if (defaultValue == null)
+            return;
+        setValue(defaultValue);
+    }, [defaultValue]);
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { ...rest, children: [currencySymbol, " ", amountLabel] }), helperText && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: helperText })] }));
+};
+exports.FieldAmountLabel = FieldAmountLabel;

package/lib/cjs/custom/FieldCheckbox.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldCheckbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const OptionGroup_1 = require("../OptionGroup");
+/**
+ * Checkbox (multiple values) field creator
+ * type: checkbox
+ * @returns Component
+ */
+const FieldCheckbox = ({ field, mref, onChange, defaultValue }) => {
+    // State
+    const [value, setLocalValue] = react_1.default.useState();
+    // Ref
+    const getValue = () => value;
+    const setValue = (value) => {
+        if (Array.isArray(value)) {
+            setLocalValue(value);
+        }
+        else if (typeof value === "string" || typeof value === "number") {
+            setLocalValue([value]);
+        }
+        else {
+            setLocalValue(undefined);
+        }
+    };
+    react_1.default.useImperativeHandle(mref, () => ({
+        getValue,
+        setValue
+    }));
+    react_1.default.useEffect(() => {
+        if (defaultValue == null)
+            return;
+        setValue(defaultValue);
+    }, [defaultValue]);
+    // Name
+    const name = field.name;
+    if (!name) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldCheckbox ", JSON.stringify(field)] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(OptionGroup_1.OptionGroup, { name: name, options: field.options ?? [], multiple: true, row: true, helperText: field.helperText, label: field.label, variant: "outlined", fullWidth: true, defaultValue: value, onValueChange: (value) => {
+            const newValue = Array.isArray(value)
+                ? value
+                : value == null
+                    ? undefined
+                    : [value];
+            setLocalValue(newValue);
+            onChange(name, newValue);
+        }, ...field.mainSlotProps }));
+};
+exports.FieldCheckbox = FieldCheckbox;

package/lib/cjs/custom/FieldCombobox.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldCombobox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const ComboBoxMultiple_1 = require("../ComboBoxMultiple");
+/**
+ * Combobox (multiple values) field creator
+ * type combobox
+ * @returns Component
+ */
+const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
+    // State
+    const [ids, setIds] = react_1.default.useState();
+    const getValue = () => ids;
+    const setValue = (value) => {
+        if (Array.isArray(value))
+            setIds(value);
+        else if (typeof value === "number" || typeof value === "string")
+            setIds([value]);
+    };
+    // Ref
+    react_1.default.useImperativeHandle(mref, () => ({
+        getValue,
+        setValue
+    }));
+    react_1.default.useEffect(() => {
+        if (defaultValue == null)
+            return;
+        setValue(defaultValue);
+    }, [defaultValue]);
+    // Name
+    const name = field.name;
+    if (!name) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ComboBoxMultiple_1.ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
+            const ids = value.map((v) => v.id);
+            setIds(ids);
+            onChange(name, ids);
+        }, ...field.mainSlotProps }));
+};
+exports.FieldCombobox = FieldCombobox;