@etsoo/materialui 1.4.68 → 1.4.70

package/lib/cjs/ComboBoxPro.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBoxPro = ComboBoxPro;
+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 InputField_1 = require("./InputField");
+const shared_1 = require("@etsoo/shared");
+function ComboBoxPro(props) {
+    // Labels
+    const { noOptions, loading: loadingLabel, open: openDefault } = ReactApp_1.globalApp?.getLabels("noOptions", "loading", "open") ?? {};
+    // Destruct
+    const { noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, onValueChange, ...rest } = props;
+    const [open, setOpen] = react_1.default.useState(false);
+    const [localOptions, setOptions] = react_1.default.useState([]);
+    const [localValue, setValue] = react_1.default.useState(null);
+    const [loading, setLoading] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        if (value === undefined)
+            return;
+        setValue(value);
+    }, [value]);
+    react_1.default.useEffect(() => {
+        if (idValue == null)
+            return;
+        const option = localOptions.find((option) => option.id === idValue);
+        if (option) {
+            setValue(option);
+            if (onValueChange)
+                onValueChange(option);
+        }
+        else
+            setValue(null);
+    }, [localOptions, idValue]);
+    react_1.default.useEffect(() => {
+        if (typeof options === "function") {
+            setLoading(true);
+            options().then((result) => {
+                setLoading(false);
+                if (result != null)
+                    setOptions(result);
+            });
+        }
+        else {
+            setOptions(options);
+        }
+    }, [options]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { id: name, value: localValue == null ? "" : localValue, open: open, freeSolo: true, clearOnBlur: false, onOpen: () => {
+            setOpen(true);
+        }, onClose: () => {
+            setOpen(false);
+        }, options: localOptions, loading: loading, openOnFocus: openOnFocus, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...inputProps, ...params, label: label, name: name, onBlur: (event) => {
+                if (onChange) {
+                    const value = event.target.value;
+                    if (!localValue && localValue != value)
+                        onChange(event, value, "blur", undefined);
+                }
+            } })), getOptionLabel: (item) => typeof item === "object" ? shared_1.DataTypes.getListItemLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
+            setValue(value);
+            if (onChange)
+                onChange(event, value, reason, details);
+            if (onValueChange) {
+                if (typeof value === "object")
+                    onValueChange(value == null ? null : value);
+            }
+        }, ...rest }));
+}

package/lib/cjs/CountdownButton.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.CountdownButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+/**
+ * Countdown button
+ * @param props Props
+ * @returns Button
+ */
+exports.CountdownButton = react_1.default.forwardRef((props, ref) => {
+    // Destructure
+    const { initState = 0, onAction, onClick, ...rest } = props;
+    // State
+    // 0 - normal
+    // 1 - loading
+    // >= 2 - countdown seconds
+    const [state, updateState] = react_1.default.useState(0);
+    // Ignore seconds
+    const ignoreSeconds = 2;
+    // Refs
+    const refs = react_1.default.useRef({ isMounted: false, maxLength: 0 });
+    // Set state
+    const setState = react_1.default.useCallback((result) => {
+        // Seconds to wait, 120
+        if (result > ignoreSeconds) {
+            // Here 122
+            result += ignoreSeconds;
+            updateState(result);
+            // Update max length
+            refs.current.maxLength = result.toString().length;
+            const seed = setInterval(() => {
+                // Mounted?
+                if (!refs.current.isMounted)
+                    return;
+                // Last 1 second and then complete
+                if (result > ignoreSeconds + 1) {
+                    result--;
+                    updateState(result);
+                }
+                else {
+                    clearInterval(seed);
+                    updateState(0);
+                }
+            }, 1000);
+        }
+        else {
+            updateState(0);
+        }
+    }, []);
+    // endIcon
+    let endIcon;
+    if (state === 0) {
+        endIcon = undefined;
+    }
+    else if (state === 1) {
+        endIcon = (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 12 });
+    }
+    else {
+        const countdown = (state - ignoreSeconds)
+            .toString()
+            .padStart(refs.current.maxLength, "0");
+        endIcon = (0, jsx_runtime_1.jsx)("span", { style: { fontSize: "smaller" }, children: countdown });
+    }
+    // Disabled?
+    const disabled = state > 0;
+    // Local click
+    const localClick = (event) => {
+        // Show loading
+        updateState(1);
+        // Callback
+        if (onClick != null)
+            onClick(event);
+        // Return any countdown
+        onAction().then(setState);
+    };
+    react_1.default.useEffect(() => {
+        refs.current.isMounted = true;
+        return () => {
+            refs.current.isMounted = false;
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        setState(initState);
+    }, [initState]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Button, { disabled: disabled, endIcon: endIcon, onClick: localClick, ref: ref, ...rest }));
+});

package/lib/cjs/CountryList.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountryList = CountryList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const Tiplist_1 = require("./Tiplist");
+/**
+ * Country list
+ * @param props Props
+ * @returns Component
+ */
+function CountryList(props) {
+    // Destruct
+    const { items = 16, loadData, loadFavoredIds, name = "countryId", ...rest } = props;
+    // Ref
+    const favoredIds = react_1.default.useRef([]);
+    // Ready
+    react_1.default.useEffect(() => {
+        if (loadFavoredIds && favoredIds.current.length === 0)
+            loadFavoredIds().then((ids) => {
+                favoredIds.current = ids;
+            });
+    }, [loadFavoredIds]);
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { name: name, loadData: (keyword, id) => loadData({ id, keyword, favoredIds: favoredIds.current, items }), ...rest }));
+}

package/lib/cjs/CultureDataTable.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CultureDataTable = CultureDataTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DataTable_1 = require("./DataTable");
+const react_1 = __importDefault(require("react"));
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * Culture DataTable
+ * @param props Props
+ * @returns Component
+ */
+function CultureDataTable(props) {
+    // Destruct
+    const { cultures, cultureLabel = ReactApp_1.globalApp?.get("culture"), editable = true, titleLabel, hasDescription = false, descriptionLabel = ReactApp_1.globalApp?.get("description"), ...rest } = props;
+    const getCultureLabel = react_1.default.useCallback((value) => cultures.find((c) => c.id == value.id)?.label ?? `${value.value}`, [cultures]);
+    return ((0, jsx_runtime_1.jsx)(DataTable_1.DataTable, { columns: [
+            {
+                field: "id",
+                headerName: cultureLabel,
+                renderCell: getCultureLabel,
+                width: 150,
+                editable: false,
+                sortable: false
+            },
+            {
+                field: "title",
+                headerName: titleLabel,
+                flex: 1,
+                editable,
+                sortable: false
+            },
+            ...(hasDescription
+                ? [
+                    {
+                        field: "description",
+                        headerName: descriptionLabel,
+                        flex: 1,
+                        editable,
+                        sortable: false
+                    }
+                ]
+                : [])
+        ], ...rest }));
+}

package/lib/cjs/CustomFabProps.js

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

package/lib/cjs/DataGridEx.js

@@ -0,0 +1,333 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridExCalColumns = DataGridExCalColumns;
+exports.DataGridEx = DataGridEx;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+const react_1 = require("@etsoo/react");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const DataGridRenderers_1 = require("./DataGridRenderers");
+// Borders
+const boldBorder = "2px solid rgba(224, 224, 224, 1)";
+const thinBorder = "1px solid rgba(224, 224, 224, 1)";
+// Scroll bar size
+const scrollbarSize = 16;
+// Minimum width
+const minWidth = 120;
+const createGridStyle = (alternatingColors, selectedColor, hoverColor) => {
+    return (0, css_1.css)({
+        ".DataGridEx-Selected": {
+            backgroundColor: selectedColor
+        },
+        ".DataGridEx-Hover:not(.DataGridEx-Selected)": {
+            backgroundColor: hoverColor
+        },
+        "& .DataGridEx-Cell0:not(.DataGridEx-Hover):not(.DataGridEx-Selected)": {
+            backgroundColor: alternatingColors[0]
+        },
+        "& .DataGridEx-Cell1:not(.DataGridEx-Hover):not(.DataGridEx-Selected)": {
+            backgroundColor: alternatingColors[1]
+        },
+        "& .DataGridEx-Cell-Border": {
+            borderBottom: thinBorder
+        }
+    });
+};
+const rowItems = (div, callback) => {
+    const row = div.dataset["row"];
+    if (div.parentElement == null || row == null)
+        return;
+    doRowItems(div.parentElement, parseFloat(row), callback);
+};
+const doRowItems = (parent, rowIndex, callback) => {
+    if (parent == null || rowIndex == null)
+        return;
+    parent
+        ?.querySelectorAll(`div[data-row="${rowIndex}"]`)
+        .forEach((rowItem) => {
+        callback(rowItem);
+    });
+};
+/**
+ * Extended datagrid columns calculation
+ * @param columns
+ * @returns Total width and unset items
+ */
+function DataGridExCalColumns(columns) {
+    return columns.reduce((previousValue, currentItem) => {
+        previousValue.total +=
+            currentItem.width ?? currentItem.minWidth ?? minWidth;
+        if (currentItem.width == null)
+            previousValue.unset++;
+        return previousValue;
+    }, {
+        total: 0,
+        unset: 0
+    });
+}
+/**
+ * Extended DataGrid with VariableSizeGrid
+ * @param props Props
+ * @returns Component
+ */
+function DataGridEx(props) {
+    // Theme
+    const theme = (0, material_1.useTheme)();
+    const defaultHeaderRenderer = (states) => {
+        const { orderBy } = states.queryPaging;
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridEx-Header", display: "flex", alignItems: "center", borderBottom: boldBorder, fontWeight: 500, minWidth: widthCalculator.total, height: headerHeight, children: columns.map((column, index) => {
+                // Destruct
+                const { align, field, header, headerCellRenderer, sortable, sortAsc = true, type } = column;
+                // Header text
+                const headerText = header ?? field;
+                // Cell props
+                const cellProps = {};
+                // Sortable
+                let sortLabel;
+                if (headerCellRenderer) {
+                    sortLabel = headerCellRenderer({
+                        cellProps,
+                        column,
+                        columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
+                        states
+                    });
+                }
+                else if (sortable && field != null) {
+                    const active = orderBy?.some((o) => o.field.toUpperCase() === field.toUpperCase());
+                    sortLabel = ((0, jsx_runtime_1.jsx)(material_1.TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
+                            if (active)
+                                column.sortAsc = !sortAsc;
+                            handleSort(field, column.sortAsc);
+                        }, children: headerText }));
+                }
+                else {
+                    sortLabel = headerText;
+                }
+                return ((0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: (0, react_1.GridAlignGet)(align, type), width: columnWidth(index), children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: sortLabel }) }, field ?? index.toString()));
+            }) }));
+    };
+    function defaultFooterRenderer(rows, states) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridEx-Footer", display: "flex", alignItems: "center", borderTop: thinBorder, marginTop: "1px", minWidth: widthCalculator.total, height: bottomHeight - 1, children: columns.map((column, index) => {
+                // Destruct
+                const { align, field, type } = column;
+                // Cell props
+                const cellProps = {};
+                // Cell
+                const cell = footerItemRenderer
+                    ? footerItemRenderer(rows, {
+                        column,
+                        index: checkable ? index - 1 : index, // Ignore the checkbox case
+                        states,
+                        cellProps,
+                        checkable
+                    })
+                    : undefined;
+                return ((0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: (0, react_1.GridAlignGet)(align, type), width: columnWidth(index), children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: cell }) }, "bottom-" + (field ?? index.toString())));
+            }) }));
+    }
+    // Destruct
+    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers_1.DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = react_2.default.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = "#edf4fb", width, ...rest } = props;
+    if (checkable) {
+        const cbColumn = {
+            field: "selected", // Avoid validation from data model
+            header: "",
+            sortable: false,
+            width: 50,
+            cellRenderer: ({ cellProps, data, selected }) => {
+                cellProps.sx = {
+                    padding: "4px!important"
+                };
+                return ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", checked: selected, onChange: (_event, checked) => {
+                        refs.current.ref?.selectItem(data, checked);
+                    } }));
+            },
+            headerCellRenderer: ({ cellProps, states }) => {
+                // 2 = border height
+                const hpad = (headerHeight - 42) / 2;
+                cellProps.sx = {
+                    padding: `${hpad}px 4px ${hpad - 1}px 4px!important`
+                };
+                return ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", indeterminate: states.selectedItems.length > 0 &&
+                        states.selectedItems.length < states.loadedItems, checked: states.selectedItems.length > 0, onChange: (_event, checked) => refs.current.ref?.selectAll(checked) }));
+            }
+        };
+        // Update to the latest version
+        if (columns[0].field === "selected") {
+            columns[0] = cbColumn;
+        }
+        else {
+            columns.unshift(cbColumn);
+        }
+    }
+    const refs = react_2.default.useRef({});
+    const mRefLocal = (0, react_1.useCombinedRefs)(mRef, (ref) => {
+        if (ref == null)
+            return;
+        refs.current.ref = ref;
+    });
+    // New sort
+    const handleSort = (field, asc) => {
+        reset({
+            queryPaging: { orderBy: [{ field, desc: !(asc ?? true) }] }
+        });
+    };
+    // Reset
+    const reset = (add) => {
+        refs.current.ref?.reset(add);
+    };
+    // Show hover tooltip for trucated text
+    const handleMouseEnter = (event) => {
+        const div = event.currentTarget;
+        const { innerText, offsetWidth, scrollWidth } = div;
+        if (offsetWidth < scrollWidth) {
+            div.title = innerText;
+        }
+        else {
+            div.title = "";
+        }
+    };
+    // selectedRowIndex state
+    const selectedRowIndex = react_2.default.useRef(-1);
+    const handleMouseDown = (event) => {
+        const div = event.currentTarget;
+        const row = div.dataset["row"];
+        if (div.parentElement == null || row == null)
+            return;
+        const rowIndex = parseFloat(row);
+        // No change
+        if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current)
+            return;
+        if (selectedRowIndex.current != -1) {
+            doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
+                preDiv.classList.remove("DataGridEx-Selected");
+            });
+        }
+        rowItems(div, (currentDiv) => {
+            currentDiv.classList.add("DataGridEx-Selected");
+        });
+        selectedRowIndex.current = rowIndex;
+    };
+    const handleMouseOver = (event) => {
+        rowItems(event.currentTarget, (div) => {
+            div.classList.add("DataGridEx-Hover");
+        });
+    };
+    const handleMouseOut = (event) => {
+        rowItems(event.currentTarget, (div) => {
+            div.classList.remove("DataGridEx-Hover");
+        });
+    };
+    /**
+     * Item renderer
+     */
+    const itemRenderer = ({ columnIndex, rowIndex, style, data, selectedItems, setItems }) => {
+        // Column
+        const { align, cellRenderer = DataGridRenderers_1.DataGridRenderers.defaultCellRenderer, cellBoxStyle, field, type, valueFormatter, renderProps } = columns[columnIndex];
+        // Props
+        const formatProps = {
+            data,
+            field,
+            rowIndex,
+            columnIndex
+        };
+        let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
+        if (borderRowsCount != null &&
+            borderRowsCount > 0 &&
+            (rowIndex + 1) % borderRowsCount === 0) {
+            rowClass += ` DataGridEx-Cell-Border`;
+        }
+        // Selected
+        const selected = data != null &&
+            (selectedRowIndex.current === rowIndex ||
+                selectedItems.some((selectedItem) => selectedItem != null && selectedItem[idField] === data[idField]));
+        if (selected) {
+            rowClass += ` DataGridEx-Selected`;
+        }
+        // Box style
+        const boxStyle = data == null || cellBoxStyle == null
+            ? undefined
+            : typeof cellBoxStyle === "function"
+                ? cellBoxStyle(data)
+                : cellBoxStyle;
+        const cellProps = {
+            className: "DataGridEx-Cell",
+            textAlign: (0, react_1.GridAlignGet)(align, type),
+            sx: { ...boxStyle }
+        };
+        const child = cellRenderer({
+            data,
+            field,
+            formattedValue: valueFormatter ? valueFormatter(formatProps) : undefined,
+            selected,
+            type,
+            rowIndex,
+            columnIndex,
+            cellProps,
+            renderProps: typeof renderProps === "function" ? renderProps(data) : renderProps,
+            setItems
+        });
+        return ((0, jsx_runtime_1.jsx)("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data), children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...cellProps, onMouseEnter: handleMouseEnter, children: child }) }));
+    };
+    // Column width calculator
+    const widthCalculator = react_2.default.useMemo(() => DataGridExCalColumns(columns), [columns]);
+    // Column width
+    const columnWidth = react_2.default.useCallback((index) => {
+        // Ignore null case
+        if (width == null)
+            return 0;
+        // Column
+        const column = columns[index];
+        if (column.width != null)
+            return column.width;
+        // More space
+        const leftWidth = width - widthCalculator.total - (width < 800 ? 0 : scrollbarSize);
+        // Shared width
+        const sharedWidth = leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
+        return (column.minWidth || minWidth) + sharedWidth;
+    }, [columns, width]);
+    // Table
+    const table = react_2.default.useMemo(() => {
+        return ((0, jsx_runtime_1.jsx)(react_1.ScrollerGrid, { className: shared_1.Utils.mergeClasses("DataGridEx-Body", "DataGridEx-CustomBar", className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, height: height -
+                headerHeight -
+                (hideFooter ? 0 : bottomHeight + 1) -
+                scrollbarSize, headerRenderer: headerRenderer, idField: idField, itemRenderer: itemRenderer, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width ?? 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
+    }, [width]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Paper, { sx: {
+            fontSize: "0.875rem",
+            height,
+            "& .DataGridEx-Cell": {
+                padding: 2,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+            },
+            "& .DataGridEx-CustomBar": {
+                "@media (min-width: 800px)": {
+                    "::-webkit-scrollbar": {
+                        width: scrollbarSize,
+                        height: scrollbarSize,
+                        backgroundColor: "#f6f6f6"
+                    },
+                    "::-webkit-scrollbar-thumb": {
+                        backgroundColor: "rgba(0,0,0,0.4)",
+                        borderRadius: "2px"
+                    },
+                    "::-webkit-scrollbar-track-piece:start": {
+                        background: "transparent"
+                    },
+                    "::-webkit-scrollbar-track-piece:end": {
+                        background: "transparent"
+                    }
+                }
+            }
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: "DataGridEx-CustomBar", style: {
+                width,
+                overflowX: "auto",
+                overflowY: "hidden"
+            }, children: table }) }));
+}

package/lib/cjs/DataGridRenderers.js

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridRenderers = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const shared_1 = require("@etsoo/shared");
+const Check_1 = __importDefault(require("@mui/icons-material/Check"));
+const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
+const DateText_1 = require("./texts/DateText");
+const react_1 = require("@etsoo/react");
+/**
+ * Data grid renderers
+ */
+var DataGridRenderers;
+(function (DataGridRenderers) {
+    /**
+     * Default cell renderer
+     * @param param Props
+     * @returns Component
+     */
+    function defaultCellRenderer({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }) {
+        // Is loading
+        if (data == null) {
+            // First column, show loading indicator
+            if (columnIndex === 0)
+                return (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 15 });
+            // Others return undefined
+            return undefined;
+        }
+        // No formatted value and data field
+        if (formattedValue == null && field == null)
+            return undefined;
+        // Cell value
+        const value = formattedValue ?? data[field];
+        if (value == null)
+            return undefined;
+        // For date time
+        // Conversion if necessary
+        if (type === react_1.GridDataType.Date || type === react_1.GridDataType.DateTime) {
+            const dateValue = value instanceof Date ? value : new Date(value);
+            const option = type === react_1.GridDataType.DateTime ? "ds" : "d";
+            const nearDays = renderProps?.nearDays;
+            if (nearDays != null) {
+                return ((0, jsx_runtime_1.jsx)(DateText_1.DateText, { value: dateValue, locale: renderProps?.culture, timeZone: renderProps?.timeZone, options: option, nearDays: nearDays }));
+            }
+            return shared_1.DateUtils.format(dateValue, renderProps?.culture, option, renderProps?.timeZone);
+        }
+        // For numbers
+        if (typeof value === "number") {
+            if (type === react_1.GridDataType.Money || type === react_1.GridDataType.IntMoney)
+                return shared_1.NumberUtils.formatMoney(value, renderProps?.currency, renderProps?.culture, type === react_1.GridDataType.IntMoney, renderProps?.numberFormatOptions);
+            else
+                return shared_1.NumberUtils.format(value, renderProps?.culture, renderProps?.numberFormatOptions);
+        }
+        // For boolean
+        if (typeof value === "boolean") {
+            // Add style
+            if ("align" in cellProps) {
+                cellProps.sx = {
+                    paddingTop: "12px!important",
+                    paddingBottom: "6px!important"
+                };
+            }
+            else {
+                cellProps.sx = {
+                    paddingTop: "16px!important",
+                    paddingBottom: "8px!important"
+                };
+            }
+            if (value)
+                return (0, jsx_runtime_1.jsx)(Check_1.default, { fontSize: "small" });
+            else
+                return (0, jsx_runtime_1.jsx)(Clear_1.default, { fontSize: "small", color: "warning" });
+        }
+        // To string
+        return new String(value);
+    }
+    DataGridRenderers.defaultCellRenderer = defaultCellRenderer;
+    /**
+     * Default footer item renderer
+     * @param rows Rows
+     * @param props Renderer props
+     * @param location Renderer location (column index)
+     * @returns Component
+     */
+    function defaultFooterItemRenderer(_rows, { index, states, checkable }, location = 0) {
+        const { selectedItems, loadedItems, hasNextPage } = states;
+        if (index === location) {
+            if (checkable) {
+                return [
+                    selectedItems.length,
+                    loadedItems.toLocaleString() + (hasNextPage ? "+" : "")
+                ].join(" / ");
+            }
+            else {
+                return loadedItems.toLocaleString() + (hasNextPage ? "+" : "");
+            }
+        }
+        return undefined;
+    }
+    DataGridRenderers.defaultFooterItemRenderer = defaultFooterItemRenderer;
+})(DataGridRenderers || (exports.DataGridRenderers = DataGridRenderers = {}));