@etsoo/materialui 1.4.68 → 1.4.69

package/lib/cjs/pages/UserMenu.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eventWatcher = void 0;
+exports.UserMenu = UserMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const react_router_1 = require("react-router");
+const UserAvatar_1 = require("../UserAvatar");
+/**
+ * Event watcher
+ */
+exports.eventWatcher = new react_1.EventWatcher();
+const eventWatcherAction = "usermenu.href.transitionend";
+/**
+ * User menu
+ * @param props Props
+ * @returns Component
+ */
+function UserMenu(props) {
+    // Destruct
+    const { children, name, avatar } = props;
+    // User menu anchor
+    const [anchorEl, setAnchorEl] = react_2.default.useState();
+    // User menu open or not
+    const isMenuOpen = Boolean(anchorEl);
+    // Route
+    const navigate = (0, react_router_1.useNavigate)();
+    // User menu
+    const handleUserMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMenuClose = () => {
+        setAnchorEl(undefined);
+    };
+    const handleClick = async (event) => {
+        handleMenuClose();
+        const item = event.target?.closest("li[href]");
+        if (item != null) {
+            const href = item.getAttribute("href");
+            if (href) {
+                // Even set transitionDuration = 0, still need to wait a little bit
+                exports.eventWatcher.add({
+                    type: eventWatcherAction,
+                    action: () => {
+                        navigate(href);
+                    },
+                    once: true
+                });
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { edge: "end", "aria-haspopup": "true", onClick: handleUserMenuOpen, color: "inherit", children: (0, jsx_runtime_1.jsx)(UserAvatar_1.UserAvatar, { title: name, src: avatar }) }), (0, jsx_runtime_1.jsx)(material_1.Menu, { slotProps: {
+                    paper: {
+                        elevation: 0,
+                        sx: {
+                            overflow: "visible",
+                            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                            mt: -0.4,
+                            "& .MuiAvatar-root": {
+                                width: 32,
+                                height: 32,
+                                ml: -0.5,
+                                mr: 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
+                            }
+                        }
+                    }
+                }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "right"
+                }, keepMounted: true, transformOrigin: {
+                    vertical: "top",
+                    horizontal: "right"
+                }, open: isMenuOpen, transitionDuration: 0, onTransitionEnd: () => exports.eventWatcher.do(eventWatcherAction), onClick: handleClick, onClose: handleMenuClose, children: children(handleMenuClose) })] }));
+}

package/lib/cjs/pages/ViewPage.js

@@ -0,0 +1,160 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewPageGridItem = ViewPageGridItem;
+exports.ViewPage = ViewPage;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("@etsoo/react");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_3 = __importDefault(require("react"));
+const Labels_1 = require("../app/Labels");
+const ReactApp_1 = require("../app/ReactApp");
+const GridDataFormat_1 = require("../GridDataFormat");
+const MUGlobal_1 = require("../MUGlobal");
+const PullToRefreshUI_1 = require("../PullToRefreshUI");
+const CommonPage_1 = require("./CommonPage");
+const MessageUtils_1 = require("../messages/MessageUtils");
+const OperationMessageContainer_1 = require("../messages/OperationMessageContainer");
+/**
+ * View page grid item
+ * @param props Props
+ * @returns Result
+ */
+function ViewPageGridItem(props) {
+    // Destruct
+    const { data, label, singleRow, ...gridProps } = props;
+    // Default options
+    let options = {};
+    if (gridProps.size == null) {
+        options = getResp(singleRow ?? "small");
+    }
+    else if (singleRow != null) {
+        options = getResp(singleRow ?? "small");
+    }
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid2, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: data }))] }));
+}
+function formatItemData(fieldData) {
+    if (fieldData == null)
+        return undefined;
+    if (typeof fieldData === "string")
+        return fieldData;
+    if (fieldData instanceof Date)
+        return ReactApp_1.globalApp
+            ? ReactApp_1.globalApp.formatDate(fieldData, "d")
+            : shared_1.DateUtils.format(fieldData, "d");
+    return `${fieldData}`;
+}
+function getResp(singleRow) {
+    const size = typeof singleRow === "object"
+        ? singleRow
+        : singleRow === "medium"
+            ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
+            : singleRow === true
+                ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
+                : {
+                    xs: singleRow === false ? 12 : 6,
+                    sm: 6,
+                    md: 4,
+                    lg: 3,
+                    xl: 2
+                };
+    return { size };
+}
+function getItemField(field, data) {
+    // Item data and label
+    let itemData, itemLabel, gridProps = {};
+    if (Array.isArray(field)) {
+        const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
+        itemData = (0, GridDataFormat_1.GridDataFormat)(data[fieldData], fieldType, renderProps);
+        itemLabel = ReactApp_1.globalApp?.get(fieldData) ?? fieldData;
+        gridProps = { ...getResp(singleRow) };
+    }
+    else if (typeof field === "object") {
+        // Destruct
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", ...rest } = field;
+        gridProps = {
+            ...rest,
+            ...getResp(singleRow)
+        };
+        // Field data
+        if (typeof fieldData === "function")
+            itemData = fieldData(data);
+        else if (dataType == null)
+            itemData = formatItemData(data[fieldData]);
+        else
+            itemData = (0, GridDataFormat_1.GridDataFormat)(data[fieldData], dataType, renderProps);
+        // Field label
+        itemLabel =
+            typeof fieldLabel === "function"
+                ? fieldLabel(data)
+                : fieldLabel != null
+                    ? ReactApp_1.globalApp?.get(fieldLabel) ?? fieldLabel
+                    : fieldLabel;
+    }
+    else {
+        itemData = formatItemData(data[field]);
+        itemLabel = ReactApp_1.globalApp?.get(field) ?? field;
+    }
+    return [itemData, itemLabel, gridProps];
+}
+/**
+ * View page
+ * @param props Props
+ */
+function ViewPage(props) {
+    // Destruct
+    const { actions, children, fields, loadData, paddings = MUGlobal_1.MUGlobal.pagePaddings, spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, ...rest } = props;
+    // Data
+    const [data, setData] = react_3.default.useState();
+    // Labels
+    const labels = Labels_1.Labels.CommonPage;
+    // Container
+    const pullContainer = "#page-container";
+    // Load data
+    const refresh = react_3.default.useCallback(async () => {
+        const result = await loadData();
+        if (result == null)
+            return;
+        setData(result);
+    }, [loadData]);
+    react_3.default.useEffect(() => {
+        const refreshHandler = async () => {
+            await refresh();
+        };
+        MessageUtils_1.MessageUtils.onRefresh(refreshHandler);
+        return () => {
+            MessageUtils_1.MessageUtils.offRefresh(refreshHandler);
+        };
+    }, [refresh]);
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : ((0, jsx_runtime_1.jsxs)(react_3.default.Fragment, { children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: "id" in operationMessageHandler
+                        ? [
+                            operationMessageHandler.types,
+                            refresh,
+                            operationMessageHandler.id
+                        ]
+                        : operationMessageHandler })), (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
+                        ".MuiTypography-subtitle2": {
+                            fontWeight: "bold"
+                        }
+                    }, children: fields.map((field, index) => {
+                        // Get data
+                        if (typeof field === "function") {
+                            // Most flexible way, do whatever you want
+                            return field(data, refresh);
+                        }
+                        const [itemData, itemLabel, gridProps] = getItemField(field, data);
+                        // Some callback function may return '' instead of undefined
+                        if (itemData == null || itemData === "")
+                            return undefined;
+                        // Layout
+                        return ((0, react_1.createElement)(ViewPageGridItem, { ...gridProps, key: index, data: itemData, label: itemLabel }));
+                    }) }), actions !== null && ((0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings, children: actions != null && shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
+                        const container = document.querySelector(pullContainer);
+                        return !container?.scrollTop;
+                    } })), (0, jsx_runtime_1.jsx)(react_2.ScrollRestoration, {})] })) }));
+}

package/lib/cjs/texts/DateText.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateText = DateText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+/**
+ * Date text
+ * @param props Props
+ * @returns Component
+ */
+function DateText(props) {
+    // Destruct
+    const { nearDays, locale = "lookup", options, timeZone, value, ...rest } = props;
+    // Format date
+    const date = shared_1.DateUtils.parse(value);
+    // Formatted value
+    const localValue = date == null
+        ? undefined
+        : shared_1.DateUtils.format(value, locale, options, timeZone);
+    if (nearDays != null &&
+        date != null &&
+        Math.abs(new Date().substract(date).totalDays) <= nearDays) {
+        rest.color = "error";
+    }
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", fontSize: "inherit", ...rest, children: localValue }));
+}

package/lib/cjs/texts/MoneyText.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoneyText = MoneyText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+/**
+ * Money text
+ * @param props Props
+ * @returns Component
+ */
+function MoneyText(props) {
+    // Destruct
+    const { currency, isInteger = false, locale, options = {}, value, ...rest } = props;
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", fontSize: "inherit", ...rest, children: value == null
+            ? ""
+            : shared_1.NumberUtils.formatMoney(value, currency, locale, isInteger, options) }));
+}

package/lib/cjs/texts/NumberText.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberText = NumberText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+/**
+ * Number text
+ * @param props Props
+ * @returns Component
+ */
+function NumberText(props) {
+    // Destruct
+    const { locale, options = {}, value, ...rest } = props;
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", fontSize: "inherit", ...rest, children: value == null ? "" : shared_1.NumberUtils.format(value, locale, options) }));
+}

package/lib/mjs/AddresSelector.d.ts

@@ -0,0 +1,107 @@
+import { AddressCity, AddressDistrict, AddressRegionDb, AddressState, IApiPayload } from "@etsoo/appscript";
+import { GridSize } from "@mui/material";
+import React from "react";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
+import { RegionsRQ } from "./RegionsRQ";
+/**
+ * Address field
+ */
+export declare enum AddressField {
+    Region = "region",
+    State = "state",
+    City = "city",
+    District = "district"
+}
+type AddressFieldType<F extends AddressField> = F extends AddressField.Region ? [F, AddressRegionDb | null] : F extends AddressField.State ? [F, AddressState | null] : F extends AddressField.City ? [F, AddressCity | null] : [F, AddressDistrict | null];
+type AddressFavorType<F extends AddressField> = F extends AddressField.Region | AddressField.State ? string : number;
+/**
+ * Address selector props
+ */
+export type AddressSelectorProps = {
+    /**
+     * Address API
+     */
+    api: {
+        regions(rq: RegionsRQ, payload?: IApiPayload<AddressRegionDb[]>): Promise<AddressRegionDb[] | undefined>;
+        states(regionId: string, favoredIds?: string[], payload?: IApiPayload<AddressState[]>, culture?: string): Promise<AddressState[] | undefined>;
+        cities(stateId: string, favoredIds?: number[], payload?: IApiPayload<AddressCity[]>, culture?: string): Promise<AddressCity[] | undefined>;
+        districts(cityId: number, favoredIds?: number[], payload?: IApiPayload<AddressDistrict[]>, culture?: string): Promise<AddressDistrict[] | undefined>;
+    };
+    /**
+     * Break points
+     */
+    breakPoints?: ResponsiveStyleValue<GridSize>;
+    /**
+     * City
+     */
+    city?: number;
+    /**
+     * City label
+     */
+    cityLabel?: string;
+    /**
+     * District
+     */
+    district?: number;
+    /**
+     * District label
+     */
+    districtLabel?: string;
+    /**
+     * Error
+     */
+    error?: boolean;
+    /**
+     * Get favored ids
+     * @param field Field
+     * @returns Result
+     */
+    favoredIds?: <F extends AddressField>(field: F) => AddressFavorType<F>[];
+    /**
+     * The helper text content.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Hide the region
+     */
+    hideRegion?: boolean;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Onchange hanlder
+     * @param event Event
+     */
+    onChange?: <F extends AddressField>(event: AddressFieldType<F>) => void;
+    /**
+     * Country or region
+     */
+    region?: string;
+    /**
+     * Region label
+     */
+    regionLabel?: string;
+    /**
+     * Required
+     */
+    required?: boolean;
+    /**
+     * Search mode
+     */
+    search?: boolean;
+    /**
+     * State
+     */
+    state?: string;
+    /**
+     * State label
+     */
+    stateLabel?: string;
+};
+/**
+ * Address selector
+ * @param props Props
+ */
+export declare function AddressSelector(props: AddressSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/mjs/AuditDisplay.d.ts

@@ -0,0 +1,31 @@
+import { Theme } from "@mui/material";
+import React, { CSSProperties } from "react";
+import { ListMoreDisplayProps } from "./ListMoreDisplay";
+import { AuditLineDto } from "@etsoo/appscript";
+/**
+ * Audit display props
+ */
+export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLineDto>, "children"> {
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (index: number, theme: Theme) => CSSProperties;
+    /**
+     * Get column label
+     */
+    getColumnLabel?: (field: string) => string;
+    /**
+     * Equal check
+     */
+    equalCheck?: boolean;
+    /**
+     * Item/line renderer
+     */
+    itemRenderer?: (data: AuditLineDto, index: number) => React.ReactNode;
+}
+/**
+ * Audit display
+ * @param props Props
+ * @returns Component
+ */
+export declare function AuditDisplay(props: AuditDisplayProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/AutocompleteExtendedProps.d.ts

@@ -0,0 +1,73 @@
+import { DataTypes } from "@etsoo/shared";
+import { AutocompleteProps } from "@mui/material";
+import { ChangeEventHandler } from "react";
+/**
+ * Autocomplete extended props
+ */
+export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>, M extends boolean | undefined = boolean | undefined> = Omit<AutocompleteProps<T, M, false, false>, "renderInput" | "options" | "multiple"> & {
+    /**
+     * Id field
+     */
+    idField?: D;
+    /**
+     * Id value
+     */
+    idValue?: T[D];
+    /**
+     * Autocomplete for the input
+     */
+    inputAutoComplete?: string;
+    /**
+     * If `true`, the label is displayed in an error state.
+     * @default false
+     */
+    inputError?: boolean;
+    /**
+     * The helper text content.
+     */
+    inputHelperText?: React.ReactNode;
+    /**
+     * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+     * @default 'none'
+     */
+    inputMargin?: "dense" | "normal" | "none";
+    /**
+     * Input onChange hanlder
+     */
+    inputOnChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+    /**
+     * If `true`, the label will indicate that the `input` is required.
+     * @default false
+     */
+    inputRequired?: boolean;
+    /**
+     * Set 'data-reset'
+     */
+    inputReset?: boolean;
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    inputVariant?: "standard" | "outlined" | "filled";
+    /**
+     * Label of the field
+     */
+    label: string;
+    /**
+     * Name of the field
+     */
+    name: string;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean;
+    /**
+     * Is search field?
+     */
+    search?: boolean;
+    /**
+     * Value change handler
+     * @param value New value
+     */
+    onValueChange?: (value: T | null) => void;
+};

package/lib/mjs/BackButton.d.ts

@@ -0,0 +1,12 @@
+import { IconButtonProps } from "@mui/material";
+/**
+ * BackButton props
+ */
+export interface BackButtonProps extends IconButtonProps {
+}
+/**
+ * BackButton
+ * @param props Props
+ * @returns Component
+ */
+export declare function BackButton(props: BackButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/BridgeCloseButton.d.ts

@@ -0,0 +1,22 @@
+import { IBridgeHost } from "@etsoo/appscript";
+import { BoxProps, IconButtonProps } from "@mui/material";
+/**
+ * Bridge close button props
+ */
+export interface BridgeCloseButtonProps extends IconButtonProps {
+    /**
+     * Box props
+     */
+    boxProps?: BoxProps;
+    /**
+     * Validate the host
+     * @param host Host
+     */
+    validate?(host: IBridgeHost): boolean;
+}
+/**
+ * Bridge close button
+ * @param props Props
+ * @returns Component
+ */
+export declare function BridgeCloseButton(props: BridgeCloseButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/ButtonLink.d.ts

@@ -0,0 +1,20 @@
+import { ButtonProps } from "@mui/material";
+/**
+ * ButtonLink props
+ */
+export type ButtonLinkProps = Omit<ButtonProps, "href" | "onClick"> & {
+    /**
+     * To href
+     */
+    href: string;
+    /**
+     * Link state
+     */
+    state?: any;
+};
+/**
+ * ButtonLink
+ * @param props Props
+ * @returns Component
+ */
+export declare function ButtonLink(props: ButtonLinkProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/ButtonPopover.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+/**
+ * Button popover props
+ */
+export type ButtonPopoverProps<T> = {
+    /**
+     * Button component
+     * @param callback Button click callback
+     * @returns Layout
+     */
+    button: (callback: (handler: HTMLElement | null) => void) => React.ReactNode;
+    /**
+     * Children component
+     * @param data Data
+     * @returns Layout
+     */
+    children: (data: T | null) => React.ReactNode;
+    /**
+     * Load data
+     * @returns Data promise
+     */
+    loadData?: () => Promise<T | undefined>;
+};
+/**
+ * Button popover component
+ * @param props Props
+ * @returns Component
+ */
+export declare function ButtonPopover<T>(props: ButtonPopoverProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/ComboBox.d.ts

@@ -0,0 +1,45 @@
+import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
+import type { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
+/**
+ * ComboBox props
+ */
+export type ComboBoxProps<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = AutocompleteExtendedProps<T, D, false> & {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
+    /**
+     * Data readonly
+     */
+    dataReadonly?: boolean;
+    /**
+     * Label field
+     */
+    labelField?: L;
+    /**
+     * Load data callback
+     */
+    loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * On load data handler
+     */
+    onLoadData?: (options: T[]) => void;
+    /**
+     * Array of options.
+     */
+    options?: ReadonlyArray<T>;
+    /**
+     * Add label
+     */
+    addLabel?: string;
+    /**
+     * On add callback
+     */
+    onAdd?: (callback: () => void) => void;
+};
+/**
+ * ComboBox
+ * @param props Props
+ * @returns Component
+ */
+export declare function ComboBox<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: ComboBoxProps<T, D, L>): import("react/jsx-runtime").JSX.Element;