mig-schema-table 4.0.5 → 4.0.7

package/dist/SchemaTable/index.js

@@ -1,715 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { createPortal } from "react-dom";
-import { VariableSizeGrid, VariableSizeList } from "react-window";
-import { localeFormat } from "../inc/date";
-import { defaultTranslate } from "../inc/string";
-import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
-import Td from "./Td";
-import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, ENumberColumnFilterOperation, MINIMUM_COLUMN_WIDTH, } from "../inc/constant";
-import { parseLocationHash, serializeLocationHash } from "../inc/data";
-import Th, { EColumnFilterStatus } from "./Th";
-import ThMenu from "./ThMenu";
-import { saveAs } from "file-saver";
-import ColumnResizers from "./ColumnResizers";
-import { difference, isFinite, sum } from "lodash";
-import { Workbook } from "exceljs";
-const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
-const numberFormatter = new Intl.NumberFormat("nl-NL");
-const currencyFormatter = new Intl.NumberFormat("nl-NL", {
-    style: "currency",
-    currency: "EUR",
-});
-function getSortByValue(propSchema, propConfig) {
-    const { TdBody, sortByValue } = propConfig || {};
-    if (sortByValue !== undefined) {
-        return sortByValue;
-    }
-    if (!propSchema) {
-        return false;
-    }
-    const { format, type } = propSchema;
-    const isDate = format === null || format === void 0 ? void 0 : format.startsWith("date");
-    return isDate || type === "boolean" || type === "integer" || !!TdBody;
-}
-function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
-    return !!(isTableSortable &&
-        (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isSortable) !== false &&
-        (propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort)));
-}
-function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus = true, enableRowCounter = true, getRowClassName, getRowSelected, isColumnFilterable = true, isExportable = true, isResizable = true, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight = 36, schema, searchPlaceholder, settingsStorageKey, style, translate = defaultTranslate, useFilterStateHash, width, tableRef, }) {
-    var _a;
-    const [columnNames, setColumnNames] = React.useState();
-    const [resizeColumnIndex, setResizeColumnIndex] = React.useState(-1);
-    const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
-    const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
-    const [thMenuConfig, setThMenuConfig] = React.useState();
-    const isDataFunction = data instanceof Function;
-    const [sourceData, setSourceData] = React.useState(isDataFunction ? undefined : data);
-    const [columnWidths, setColumnWidths] = React.useState();
-    const [locationHash, setLocationHash] = React.useState(useFilterStateHash ? parseLocationHash(window.location.hash) : null);
-    const [searchQuery, setSearchQuery] = React.useState((locationHash === null || locationHash === void 0 ? void 0 : locationHash.searchQuery) || "");
-    const [columnFilterMap, setColumnFilterMap] = React.useState((locationHash === null || locationHash === void 0 ? void 0 : locationHash.columnFilterMap) || defaultColumnFilters || {});
-    const [isDirty, setIsDirty] = React.useState(false);
-    React.useEffect(() => {
-        const removeThMenuConfig = () => {
-            setThMenuConfig(undefined);
-        };
-        window.addEventListener("resize", removeThMenuConfig);
-        window.addEventListener("scroll", removeThMenuConfig);
-        return () => {
-            window.removeEventListener("resize", removeThMenuConfig);
-            window.removeEventListener("scroll", removeThMenuConfig);
-        };
-    }, []);
-    React.useEffect(() => {
-        if (isDataFunction) {
-            return;
-        }
-        setSourceData(data);
-    }, [data, isDataFunction]);
-    React.useEffect(() => {
-        if (!isDataFunction || sourceData !== undefined) {
-            return;
-        }
-        data({
-            searchQuery,
-            columnFilterMap,
-            sortColumn,
-            sortAsc,
-        }).then(setSourceData);
-    }, [
-        columnFilterMap,
-        data,
-        isDataFunction,
-        searchQuery,
-        sortAsc,
-        sortColumn,
-        sourceData,
-    ]);
-    const { properties = {}, required = [] } = schema;
-    const serializedStoredColumnNames = settingsStorageKey
-        ? localStorage.getItem(`${settingsStorageKey}.columnNames`)
-        : null;
-    const serializedStoredColumnWidths = settingsStorageKey
-        ? localStorage.getItem(`${settingsStorageKey}.columnWidths`)
-        : null;
-    React.useEffect(() => {
-        const storedColumnNames = serializedStoredColumnNames
-            ? JSON.parse(serializedStoredColumnNames)
-            : undefined;
-        let freshColumnNames = Object.keys(properties);
-        if (onCheckedIndexesChange) {
-            freshColumnNames.unshift(SELECT_ALL_COLUMN_NAME);
-        }
-        if (config) {
-            Object.keys(config).forEach((configKey) => {
-                if (!freshColumnNames.includes(configKey)) {
-                    freshColumnNames.push(configKey);
-                }
-            });
-            const invisibleColumns = Object.entries(config).reduce((prev, [propName, propConfig]) => {
-                if (propConfig.hidden) {
-                    prev.push(propName);
-                }
-                return prev;
-            }, []);
-            freshColumnNames = freshColumnNames
-                .filter((key) => !invisibleColumns.includes(key))
-                .sort((columnA, columnB) => {
-                let orderA = config[columnA] ? config[columnA].order : undefined;
-                if (orderA === undefined) {
-                    orderA = Object.keys(properties).findIndex((propName) => propName === columnA);
-                }
-                let orderB = config[columnB] ? config[columnB].order : undefined;
-                if (orderB === undefined) {
-                    orderB = Object.keys(properties).findIndex((propName) => propName === columnB);
-                }
-                if (columnB === SELECT_ALL_COLUMN_NAME ||
-                    columnA === SELECT_ALL_COLUMN_NAME) {
-                    return 0;
-                }
-                if (orderA === -1) {
-                    return 1;
-                }
-                if (orderB === -1) {
-                    return -1;
-                }
-                return orderA - orderB;
-            });
-        }
-        setColumnNames((storedColumnNames === null || storedColumnNames === void 0 ? void 0 : storedColumnNames.length) === freshColumnNames.length
-            ? storedColumnNames
-            : freshColumnNames);
-    }, [config, onCheckedIndexesChange, properties, serializedStoredColumnNames]);
-    const renderData = React.useMemo(() => sourceData && columnNames
-        ? sourceData.map((object, rowIndex) => columnNames.reduce((prev, propName) => {
-            var _a;
-            const schema = properties[propName];
-            const propConfig = config ? config[propName] : undefined;
-            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) {
-                prev[propName] = propConfig.renderData(object, rowIndex);
-                return prev;
-            }
-            if (!schema || propName === SELECT_ALL_COLUMN_NAME) {
-                prev[propName] = "";
-                return prev;
-            }
-            const rawValue = object[propName];
-            switch (schema.type) {
-                case "array":
-                    prev[propName] =
-                        ((_a = schema.items) === null || _a === void 0 ? void 0 : _a.type) === "string" &&
-                            rawValue
-                            ? rawValue.map(translate).join(", ")
-                            : JSON.stringify(rawValue);
-                    return prev;
-                case "boolean":
-                    prev[propName] = rawValue ? "✓" : "✕";
-                    return prev;
-                case "number":
-                case "integer":
-                    if (rawValue === undefined) {
-                        prev[propName] = "";
-                        return prev;
-                    }
-                    prev[propName] =
-                        schema.format === "currency"
-                            ? currencyFormatter.format(rawValue)
-                            : numberFormatter.format(rawValue);
-                    return prev;
-                // @ts-ignore
-                case "string":
-                    if (schema.format === "date" && rawValue) {
-                        prev[propName] = ["2999-12-31", "1970-01-01"].includes(rawValue)
-                            ? "-"
-                            : localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_FORMAT);
-                        return prev;
-                    }
-                    if (schema.format === "date-time" && rawValue) {
-                        prev[propName] = localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_TIME_FORMAT);
-                        return prev;
-                    }
-                    if (schema.enum) {
-                        prev[propName] = rawValue ? translate(rawValue) : "";
-                        return prev;
-                    }
-                // fallthrough
-                default:
-                    prev[propName] = rawValue ? `${rawValue}` : "";
-                    return prev;
-            }
-        }, { _index: rowIndex }))
-        : undefined, [sourceData, columnNames, properties, config, translate]);
-    const columnCount = columnNames ? columnNames.length : 0;
-    const { dynamicWidthColumnCount, fixedWidthColumnsWidth } = React.useMemo(() => {
-        let fixedWidthColumnsWidth = 0;
-        let dynamicWidthColumnCount = 0;
-        (columnNames || []).forEach((propName) => {
-            if (propName === SELECT_ALL_COLUMN_NAME) {
-                fixedWidthColumnsWidth += SELECT_ALL_COLUMN_WIDTH;
-                return;
-            }
-            const propConfig = config ? config[propName] : undefined;
-            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) {
-                fixedWidthColumnsWidth += propConfig.width;
-            }
-            else {
-                dynamicWidthColumnCount += 1;
-            }
-        }, 0);
-        return { dynamicWidthColumnCount, fixedWidthColumnsWidth };
-    }, [columnNames, config]);
-    React.useEffect(() => {
-        if (!columnNames) {
-            return;
-        }
-        const storedColumnWidths = serializedStoredColumnWidths
-            ? JSON.parse(serializedStoredColumnWidths)
-            : undefined;
-        const dynamicColumnWidth = Math.max(Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount), MINIMUM_COLUMN_WIDTH);
-        let roundingDifference = (width - fixedWidthColumnsWidth) % dynamicWidthColumnCount;
-        const freshColumnWidths = columnNames.map((propName) => {
-            if (propName === SELECT_ALL_COLUMN_NAME) {
-                return SELECT_ALL_COLUMN_WIDTH;
-            }
-            const propConfig = config ? config[propName] : undefined;
-            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) {
-                return propConfig === null || propConfig === void 0 ? void 0 : propConfig.width;
-            }
-            if (roundingDifference) {
-                roundingDifference -= 1;
-                return dynamicColumnWidth + 1;
-            }
-            return dynamicColumnWidth;
-        });
-        setColumnWidths((storedColumnWidths === null || storedColumnWidths === void 0 ? void 0 : storedColumnWidths.length) === freshColumnWidths.length
-            ? storedColumnWidths
-            : freshColumnWidths);
-    }, [
-        columnNames,
-        config,
-        dynamicWidthColumnCount,
-        fixedWidthColumnsWidth,
-        serializedStoredColumnWidths,
-        settingsStorageKey,
-        width,
-    ]);
-    const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
-    const filteredRenderData = React.useMemo(() => {
-        if (!renderData ||
-            (!isColumnFilterable && !isSearchable) ||
-            isDataFunction) {
-            return renderData;
-        }
-        return renderData.filter((item) => {
-            const lcSearchQuery = searchQuery.toLowerCase();
-            if (searchQuery &&
-                columnNames &&
-                !columnNames.find((columnName) => `${item[columnName]}`.toLowerCase().includes(lcSearchQuery))) {
-                return false;
-            }
-            let result = true;
-            Object.entries(columnFilterMap).forEach(([propName, columnFilterValue]) => {
-                if (!result || columnFilterValue === undefined) {
-                    return;
-                }
-                const propConfig = config ? config[propName] : undefined;
-                if (sourceData && (propConfig === null || propConfig === void 0 ? void 0 : propConfig.filter)) {
-                    result = propConfig.filter(sourceData[item._index], columnFilterValue);
-                    return;
-                }
-                const propSchema = properties[propName];
-                // @ts-ignore
-                const rawValue = sourceData[item._index][propName];
-                switch (propSchema === null || propSchema === void 0 ? void 0 : propSchema.type) {
-                    case "boolean":
-                    case "number":
-                    case "integer":
-                        if (typeof columnFilterValue === "object") {
-                            if (columnFilterValue.filterEmpty && rawValue === undefined) {
-                                result = false;
-                            }
-                            for (const operation of Object.keys(ENumberColumnFilterOperation)) {
-                                const operationFilterValue = columnFilterValue[operation];
-                                if (result && isFinite(operationFilterValue)) {
-                                    switch (operation) {
-                                        case ENumberColumnFilterOperation.EQ:
-                                            if (rawValue !== operationFilterValue) {
-                                                result = false;
-                                            }
-                                            break;
-                                        case ENumberColumnFilterOperation.GT:
-                                            if (rawValue <= operationFilterValue) {
-                                                result = false;
-                                            }
-                                            break;
-                                        case ENumberColumnFilterOperation.LT:
-                                            if (rawValue >= operationFilterValue) {
-                                                result = false;
-                                            }
-                                            break;
-                                    }
-                                }
-                            }
-                        }
-                        else {
-                            result = rawValue === columnFilterValue;
-                        }
-                        break;
-                    // @ts-ignore
-                    case "string":
-                        if (typeof columnFilterValue === "object" &&
-                            (propSchema.format === "date" ||
-                                propSchema.format === "date-time")) {
-                            const { from, to, filterEmpty } = columnFilterValue;
-                            if (!rawValue) {
-                                result = !filterEmpty;
-                            }
-                            else {
-                                const rawDate = rawValue ? new Date(rawValue) : undefined;
-                                if ((from && (!rawDate || rawDate < from)) ||
-                                    (to && (!rawDate || rawDate > to))) {
-                                    result = false;
-                                }
-                            }
-                            return;
-                        }
-                    // fall through
-                    default:
-                        // fallback by looking at the render value
-                        if (propSchema === null || propSchema === void 0 ? void 0 : propSchema.enum) {
-                            result = rawValue === columnFilterValue;
-                            return;
-                        }
-                        result = `${item[propName]}`
-                            .toLowerCase()
-                            .includes(`${columnFilterValue}`.toLowerCase());
-                }
-            });
-            return result;
-        });
-    }, [
-        renderData,
-        isColumnFilterable,
-        isSearchable,
-        isDataFunction,
-        searchQuery,
-        columnNames,
-        columnFilterMap,
-        config,
-        sourceData,
-        properties,
-    ]);
-    // Sort the filtered data
-    const sortedRenderData = React.useMemo(() => {
-        var _a;
-        if (!sortColumn || !filteredRenderData || !sourceData || isDataFunction) {
-            return filteredRenderData;
-        }
-        const sortSchema = properties[sortColumn];
-        const propConfig = config ? config[sortColumn] : undefined;
-        const columnSort = propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort;
-        if (columnSort) {
-            return filteredRenderData.sort((a, b) => {
-                const aData = sourceData[a._index];
-                const bData = sourceData[b._index];
-                if (!aData) {
-                    return 1;
-                }
-                if (!bData) {
-                    return -1;
-                }
-                return columnSort(aData, bData, sortAsc);
-            });
-        }
-        const isDate = sortSchema && ((_a = sortSchema.format) === null || _a === void 0 ? void 0 : _a.startsWith("date"));
-        const sortByValue = getSortByValue(sortSchema, propConfig);
-        return filteredRenderData.sort((a, b) => {
-            let x = sortByValue && sourceData[a._index]
-                ? // @ts-ignore
-                    sourceData[a._index][sortColumn]
-                : a[sortColumn].toLowerCase();
-            let y = sortByValue && sourceData[b._index]
-                ? // @ts-ignore
-                    sourceData[b._index][sortColumn]
-                : b[sortColumn].toLowerCase();
-            if (sortByValue && isDate) {
-                x = new Date(x);
-                if (isNaN(x)) {
-                    x = startOfTheWorldDate;
-                }
-                y = new Date(y);
-                if (isNaN(y)) {
-                    y = startOfTheWorldDate;
-                }
-            }
-            if (x === y) {
-                return 0;
-            }
-            if (!x) {
-                return sortAsc ? -1 : 1;
-            }
-            if (!y) {
-                return sortAsc ? 1 : -1;
-            }
-            return (x < y ? 1 : -1) * (sortAsc ? -1 : 1);
-        });
-    }, [
-        sortColumn,
-        filteredRenderData,
-        sourceData,
-        isDataFunction,
-        properties,
-        config,
-        sortAsc,
-    ]);
-    const onSelectAllIndexesHandler = React.useCallback(() => {
-        if (!onCheckedIndexesChange || !filteredRenderData) {
-            return;
-        }
-        onCheckedIndexesChange(filteredRenderData
-            .map((el) => el._index)
-            .filter((index) => !(disabledCheckedIndexes === null || disabledCheckedIndexes === void 0 ? void 0 : disabledCheckedIndexes.includes(index))));
-    }, [onCheckedIndexesChange, filteredRenderData, disabledCheckedIndexes]);
-    const isAllRowsChecked = React.useMemo(() => {
-        const tableData = [...(filteredRenderData || [])].filter((el) => (checkedIndexes ? checkedIndexes.includes(el._index) : true) ||
-            (disabledCheckedIndexes
-                ? !disabledCheckedIndexes.includes(el._index)
-                : true));
-        return ((checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length) !== 0 &&
-            tableData.length === (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length));
-    }, [checkedIndexes, disabledCheckedIndexes, filteredRenderData]);
-    const disableColumnFilter = React.useCallback((propName) => {
-        const newColumnFilterMap = Object.assign({}, columnFilterMap);
-        delete newColumnFilterMap[propName];
-        if (isDataFunction) {
-            setIsDirty(true);
-        }
-        setColumnFilterMap(newColumnFilterMap);
-    }, [columnFilterMap, isDataFunction]);
-    const onSetSortColumn = React.useCallback((x) => {
-        if (isDataFunction) {
-            setIsDirty(true);
-        }
-        setSortColumn(x);
-    }, [isDataFunction]);
-    const onSetSortAsc = React.useCallback((x) => {
-        if (isDataFunction) {
-            setIsDirty(true);
-        }
-        setSortAsc(x);
-    }, [isDataFunction]);
-    const onColumnWidthsChange = React.useCallback((newColumnWidths) => {
-        if (settingsStorageKey) {
-            localStorage.setItem(`${settingsStorageKey}.columnWidths`, JSON.stringify(newColumnWidths));
-        }
-        setColumnWidths(newColumnWidths);
-    }, [settingsStorageKey]);
-    const onColumnPositionChange = React.useCallback((dragColumnName, dropColumnName) => {
-        if (!columnNames || !columnWidths) {
-            return;
-        }
-        // First move the actual name...
-        const dragColumnIndex = columnNames.indexOf(dragColumnName);
-        let newColumnNames = [...columnNames];
-        newColumnNames.splice(dragColumnIndex, 1);
-        const dropColumnIndex = newColumnNames.indexOf(dropColumnName);
-        newColumnNames.splice(dropColumnIndex + 1, 0, dragColumnName);
-        localStorage.setItem(`${settingsStorageKey}.columnNames`, JSON.stringify(newColumnNames));
-        setColumnNames(newColumnNames);
-        // ...then make sure the width of column is moved as well
-        let newColumnWidths = [...columnWidths];
-        const draggedColumnWidth = newColumnWidths[dragColumnIndex];
-        newColumnWidths.splice(dragColumnIndex, 1);
-        newColumnWidths.splice(dropColumnIndex + 1, 0, draggedColumnWidth);
-        onColumnWidthsChange(newColumnWidths);
-    }, [columnNames, columnWidths, onColumnWidthsChange, settingsStorageKey]);
-    const ConfiguredTh = React.useCallback(({ style, index }) => {
-        if (!columnNames || !isFinite(style.left)) {
-            return null;
-        }
-        const propName = columnNames[index];
-        const propSchema = (propName === SELECT_ALL_COLUMN_NAME
-            ? { type: "boolean" }
-            : properties[propName]);
-        const propConfig = config ? config[propName] : undefined;
-        let columnFilterStatus = isColumnFilterable &&
-            (propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.FilterMenu)) &&
-            (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable) !== false
-            ? EColumnFilterStatus.AVAILABLE
-            : EColumnFilterStatus.UNAVAILABLE;
-        if (columnFilterMap[propName] !== undefined) {
-            columnFilterStatus = EColumnFilterStatus.ACTIVE;
-        }
-        return (_jsx(Th, { columnFilterStatus: columnFilterStatus, 
-            // disableColumnFilter={disableColumnFilter}
-            isAllChecked: isAllRowsChecked, isSortable: getIsColumnSortable(!!isSortable, propSchema, propConfig), numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, onColumnPositionChange: resizeColumnIndex === -1 && settingsStorageKey
-                ? onColumnPositionChange
-                : undefined, propConfig: propConfig, propIsRequired: required.includes(propName), propName: propName, schema: propSchema, setMenuConfig: setThMenuConfig, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style, translate: translate }));
-    }, [
-        checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
-        columnFilterMap,
-        columnNames,
-        config,
-        isAllRowsChecked,
-        isColumnFilterable,
-        isSortable,
-        onColumnPositionChange,
-        onSelectAllIndexesHandler,
-        onSetSortAsc,
-        onSetSortColumn,
-        properties,
-        required,
-        resizeColumnIndex,
-        settingsStorageKey,
-        sortAsc,
-        sortColumn,
-        translate,
-    ]);
-    const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
-        const propName = columnNames[columnIndex];
-        const propSchema = (propName === SELECT_ALL_COLUMN_NAME
-            ? { type: "boolean" }
-            : properties[propName]);
-        return sourceData ? (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: sourceData, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: propSchema, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style, translate: translate })) : null;
-    }, [
-        columnNames,
-        properties,
-        sourceData,
-        checkedIndexes,
-        disabledCheckedIndexes,
-        getRowClassName,
-        getRowSelected,
-        onCheckedIndexesChange,
-        onRowClick,
-        onRowDoubleClick,
-        config,
-        sortedRenderData,
-        translate,
-    ]);
-    const onSearchChange = React.useCallback((e) => {
-        if (isDataFunction) {
-            setIsDirty(true);
-        }
-        setSearchQuery(e.currentTarget.value);
-    }, [isDataFunction]);
-    const refreshData = React.useCallback(() => {
-        setIsDirty(false);
-        setSourceData(undefined);
-    }, []);
-    const onInputKeyDown = React.useCallback((e) => {
-        if (e.key === "Enter") {
-            setThMenuConfig(undefined);
-            if (isDirty) {
-                refreshData();
-            }
-            if (onSearchEnter &&
-                e.currentTarget.className === "mig-schema-table__search") {
-                onSearchEnter(searchQuery);
-            }
-        }
-    }, [isDirty, searchQuery, onSearchEnter, refreshData]);
-    const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
-    const rowWidth = React.useMemo(() => sum(columnWidths), [columnWidths]);
-    const rowCount = React.useMemo(() => (sortedRenderData ? sortedRenderData.length : 0), [sortedRenderData]);
-    const tableBodyHeight = React.useMemo(() => {
-        const rowsHeight = rowHeight * rowCount;
-        const rowsMaxHeight = maxHeight ? maxHeight - (isSearchable ? 50 : 0) : 0;
-        return rowsMaxHeight && rowsMaxHeight < rowsHeight
-            ? rowsMaxHeight
-            : rowsHeight;
-    }, [maxHeight, isSearchable, rowCount, rowHeight]);
-    const onPopoverClose = React.useCallback((e) => {
-        setThMenuConfig(undefined);
-        e.preventDefault();
-        e.stopPropagation();
-    }, []);
-    React.useEffect(() => {
-        if (!useFilterStateHash) {
-            return;
-        }
-        const onHashChange = () => {
-            setLocationHash(parseLocationHash(window.location.hash));
-        };
-        window.addEventListener("hashchange", onHashChange);
-        return () => {
-            window.removeEventListener("hashchange", onHashChange);
-        };
-    }, [useFilterStateHash]);
-    React.useEffect(() => {
-        if (!useFilterStateHash) {
-            return;
-        }
-        setColumnFilterMap((locationHash === null || locationHash === void 0 ? void 0 : locationHash.columnFilterMap) || defaultColumnFilters || {});
-        setSearchQuery((locationHash === null || locationHash === void 0 ? void 0 : locationHash.searchQuery) || "");
-    }, [locationHash, useFilterStateHash, defaultColumnFilters]);
-    const onSchemaColumnFilterChange = React.useCallback((newColumnFilterValue, persistState) => {
-        if (!thMenuConfig) {
-            return;
-        }
-        if (isDataFunction) {
-            setIsDirty(true);
-        }
-        if (useFilterStateHash && persistState !== false) {
-            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { columnFilterMap: Object.assign(Object.assign({}, columnFilterMap), { [thMenuConfig.propName]: newColumnFilterValue }) }));
-            return;
-        }
-        if (newColumnFilterValue === undefined) {
-            disableColumnFilter(thMenuConfig.propName);
-            return;
-        }
-        setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [thMenuConfig.propName]: newColumnFilterValue })));
-    }, [
-        columnFilterMap,
-        disableColumnFilter,
-        isDataFunction,
-        locationHash,
-        thMenuConfig,
-        useFilterStateHash,
-    ]);
-    const onClearFiltersButtonClick = React.useCallback(() => {
-        if (useFilterStateHash) {
-            window.location.hash = serializeLocationHash({
-                columnFilterMap: {},
-                searchQuery: "",
-            });
-            return;
-        }
-        setColumnFilterMap({});
-        setSearchQuery("");
-    }, [useFilterStateHash]);
-    const onSearchBlur = React.useCallback(() => {
-        const oldSearchQuery = (locationHash === null || locationHash === void 0 ? void 0 : locationHash.searchQuery) || "";
-        if (useFilterStateHash &&
-            // prevent hash change for undefined vs empty string compare
-            (searchQuery || oldSearchQuery) &&
-            searchQuery !== oldSearchQuery) {
-            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { searchQuery }));
-        }
-    }, [locationHash, searchQuery, useFilterStateHash]);
-    const onExportDataClick = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (!sortedRenderData) {
-            return;
-        }
-        const workbook = new Workbook();
-        const worksheet = workbook.addWorksheet("Data");
-        if (!sortedRenderData.length) {
-            return;
-        }
-        worksheet.addRow(difference(Object.keys(sortedRenderData[0]), [
-            "_index",
-            "SELECT_ALL_COLUMN_NAME",
-        ]));
-        worksheet.getRow(1).font = { bold: true };
-        worksheet.addRows(sortedRenderData.map((row) => {
-            const { _index, SELECT_ALL_COLUMN_NAME } = row, data = __rest(row, ["_index", "SELECT_ALL_COLUMN_NAME"]);
-            return Object.values(data);
-        }));
-        // Save the workbook to a Blob
-        workbook.xlsx
-            .writeBuffer()
-            .then((buffer) => {
-            const blob = new Blob([buffer], {
-                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-            });
-            saveAs(blob, "export.xlsx");
-        })
-            .catch((error) => {
-            console.error("Error generating Excel file:", error);
-        });
-    }, [sortedRenderData]);
-    const onClearSettingsButtonClick = React.useCallback(() => {
-        if (!settingsStorageKey) {
-            return;
-        }
-        localStorage.removeItem(`${settingsStorageKey}.columnNames`);
-        localStorage.removeItem(`${settingsStorageKey}.columnWidths`);
-        setColumnWidths(undefined);
-    }, [settingsStorageKey]);
-    return (_jsxs("div", Object.assign({ className: `mig-schema-table${onRowClick ? " mig-schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: Math.min(rowWidth, width) }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "mig-schema-table__action-container" }, { children: [_jsx("div", { children: isSearchable ? (_jsx("input", { className: "mig-schema-table__search", type: "text", name: "search", autoComplete: "off", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, onKeyDown: onInputKeyDown, autoFocus: enableAutoFocus, onBlur: onSearchBlur })) : null }), customElement || (_jsx("div", { className: "mig-schema-table__custom_element_placeholder" })), enableRowCounter ? (_jsx("span", Object.assign({ className: "mig-schema-table__row_counter" }, { children: translate("showingFilteredCountOfTotalCount", (sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) || 0, data.length) }))) : null, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: translate("exportData") }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: translate("clearFilters") }))) : null, settingsStorageKey ? (_jsx("button", Object.assign({ onClick: onClearSettingsButtonClick, style: { marginLeft: 8 }, disabled: !serializedStoredColumnNames && !serializedStoredColumnWidths }, { children: translate("clearSettings") }))) : null] })), columnNames && columnWidths ? (_jsxs("div", Object.assign({ className: "mig-schema-table__column_resize_container" }, { children: [_jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "mig-schema-table__th-row" }, { children: ConfiguredTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnWidths.join(" ")}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "mig-schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount, ref: tableRef }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}_${columnWidths.join(" ")}`)) : (_jsx("div", Object.assign({ style: {
-                            width: rowWidth,
-                            height: Math.max(50, tableBodyHeight),
-                            border: "1px solid #BBB",
-                            textAlign: "center",
-                            display: "flex",
-                            backgroundColor: "#CCC",
-                            alignItems: "center",
-                            justifyContent: "center",
-                        } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), isResizable ? (_jsx(ColumnResizers, { columnWidths: columnWidths, onColumnWidthsChange: onColumnWidthsChange, resizeColumnIndex: resizeColumnIndex, setResizeColumnIndex: setResizeColumnIndex, tableBodyHeight: tableBodyHeight })) : null] }))) : null, createPortal(thMenuConfig ? (_jsx(ThMenu, { isFilterable: isColumnFilterable &&
-                    ((_a = thMenuConfig.propConfig) === null || _a === void 0 ? void 0 : _a.isFilterable) !== false, isSortable: getIsColumnSortable(!!isSortable, schema.properties[thMenuConfig.propName], thMenuConfig.propConfig), onChange: onSchemaColumnFilterChange, onClose: onPopoverClose, onInputKeyDown: onInputKeyDown, propConfig: thMenuConfig.propConfig, propIsRequired: thMenuConfig.propIsRequired, propName: thMenuConfig.propName, propSchema: schema.properties[thMenuConfig.propName], referenceElement: thMenuConfig.referenceElement, setSortAsc: setSortAsc, setSortColumn: setSortColumn, translate: translate, value: columnFilterMap[thMenuConfig.propName] })) : null, document.body)] })));
-}
-export default React.memo(SchemaTable);