@monolith-forensics/monolith-ui 1.1.90 → 1.1.91

package/dist/NewTable/TableHeader.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import ColumnResizer from "./ColumnResizer";
+import { InnerCellContent, TH, THead, THR } from "./TableComponents";
+import { resolveColumnResize } from "./Utils";
+import useTable from "./useTable";
+import CheckBox from "../CheckBox";
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
+import resolveColumnReorder from "./Utils/resolveColumnReorder";
+const TableHeader = ({ headerRowElm }) => {
+    var _a;
+    const { columnState, sortState, setColumnState, onColumnResize, handleColumnReorder, enableColumnReorder, handleColumnHeaderClick, enableColumnResize, headerRowHeight, enableActionButton, enableSelection, selectionState, disableSelectAll, selectAllRows, clearSelections, } = useTable();
+    const [dragColumn, setDragColumn] = useState(null);
+    const [dropColumn, setDropColumn] = useState(null);
+    const handleResize = (e) => {
+        const columnId = e.column.columnId;
+        setColumnState((prevColumnState) => {
+            const newState = prevColumnState.map((col) => {
+                if (col.columnId === columnId) {
+                    return Object.assign(Object.assign({}, col), { width: Number(e.newWidth) });
+                }
+                return col;
+            });
+            onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize({
+                column: Object.assign(Object.assign({}, e.column), { width: Number(e.newWidth) }),
+                columnState: newState,
+            });
+            return newState;
+        });
+    };
+    const handleChangeSelection = (e) => {
+        e ? selectAllRows() : clearSelections();
+    };
+    return (_jsx(THead, { className: "mfui-thead", children: _jsxs(THR, { ref: headerRowElm, height: headerRowHeight, children: [enableSelection && (_jsx(TH, { className: `mfui-th column-action`, style: {
+                        width: "40px",
+                        minWidth: "40px",
+                        maxWidth: "40px",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: disableSelectAll !== true && (_jsx(CheckBox, { value: selectionState.selectionStatus === "all", partialCheck: (_a = selectionState.selectionStatus) === null || _a === void 0 ? void 0 : _a.includes("some"), onChange: handleChangeSelection })) }) })), enableActionButton && (_jsx(TH, { className: `mfui-th column-action`, style: {
+                        width: "40px",
+                        minWidth: "40px",
+                        maxWidth: "40px",
+                    }, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content" }) })), columnState.map((column) => {
+                    if (column.visible === false)
+                        return null;
+                    const canReorder = resolveColumnReorder(column, enableColumnReorder);
+                    const canResize = resolveColumnResize(column, enableColumnResize);
+                    const dndEvents = canReorder
+                        ? {
+                            onDragOver: (e) => {
+                                e.preventDefault();
+                                e.dataTransfer.dropEffect = "move";
+                            },
+                            onDragEnter: (e) => {
+                                e.target.classList.add("dragover");
+                                setDropColumn(column);
+                            },
+                            onDragLeave: (e) => {
+                                e.target.classList.remove("dragover");
+                            },
+                            onDrop: (e) => {
+                                e.preventDefault();
+                                e.target.classList.remove("dragover");
+                                if (dragColumn && dropColumn) {
+                                    handleColumnReorder(dragColumn, dropColumn);
+                                }
+                            },
+                            onDragStart: (e) => {
+                                //set dragging class
+                                setDragColumn(column);
+                                e.target.classList.add("dragging");
+                            },
+                            onDragEnd: (e) => {
+                                e.target.classList.remove("dragging");
+                            },
+                        }
+                        : {};
+                    return (_jsxs(TH, Object.assign({ className: `mfui-th column-${column.columnId}`, "data-field": column.dataField, draggable: canReorder, onClick: () => handleColumnHeaderClick(column) }, dndEvents, { style: {
+                            width: column.width,
+                            minWidth: column.minWidth,
+                            flex: column.width ? "0 0 auto" : "1",
+                        }, children: [canResize && (_jsx(ColumnResizer, { column: column, showOnHover: true, onResize: (e) => {
+                                    // console.log("onResize", e);
+                                }, onResizeFinished: (e) => {
+                                    handleResize(e);
+                                } })), _jsxs(InnerCellContent, { className: "mfui inner-cell-content", children: [column.caption, (sortState === null || sortState === void 0 ? void 0 : sortState.dataField) === column.dataField &&
+                                        (sortState.dir === "asc" ? (_jsx(ArrowUpIcon, { size: 14 })) : (_jsx(ArrowDownIcon, { size: 14 })))] })] }), column.columnId));
+                })] }) }));
+};
+export default TableHeader;

package/dist/NewTable/TableProvider.d.ts

@@ -0,0 +1,4 @@
+import { TableContextType, TableProviderProps } from "./types";
+export declare const TableContext: import("react").Context<TableContextType>;
+declare const TableProvider: React.FC<TableProviderProps>;
+export default TableProvider;

package/dist/NewTable/TableProvider.js

@@ -0,0 +1,330 @@
+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 } from "react/jsx-runtime";
+import { createContext, useEffect, useMemo, useState } from "react";
+import StateStorage from "./StateStorage";
+import { resolveColumnResize, syncColumnState } from "./Utils";
+import TableDefaults from "./TableDefaults";
+import shortUUID from "short-uuid";
+import { SelectionStatus } from "./enums";
+const defaultSelectionState = {
+    selectedRowKeys: [],
+    excludedRowKeys: [],
+    selectionStatus: SelectionStatus.None,
+};
+export const TableContext = createContext({
+    columnState: [],
+    data: [],
+    setColumnState: () => { },
+    onColumnResize: () => { },
+    onColumnStateChange: () => { },
+    handleColumnReorder: () => { },
+    handleColumnHeaderClick: () => { },
+    onSelectionChange: () => { },
+    selectedRowKeys: [],
+    selectionState: defaultSelectionState,
+    isRowSelected: () => false,
+    selectRow: () => { },
+    deselectRow: () => { },
+    getSelectedRowKeys: () => [],
+    selectAllRows: () => { },
+    clearSelections: () => { },
+});
+const TableProvider = (_a) => {
+    var { children, columns, tableInstanceRef, stateStorage } = _a, props = __rest(_a, ["children", "columns", "tableInstanceRef", "stateStorage"]);
+    const _columns = columns
+        .map((child, index) => {
+        if (child.dataField === "__key") {
+            throw new Error("dataField cannot be __key");
+        }
+        // check for duplicate dataFields
+        const dataFieldCount = columns.filter((col) => col.dataField === child.dataField).length;
+        if (dataFieldCount > 1) {
+            throw new Error(`Duplicate dataField found: ${child.dataField}. dataField must be unique.`);
+        }
+        return Object.assign(Object.assign({}, child), { visible: child.visible === undefined ? true : child.visible, orderValue: index, minWidth: (child === null || child === void 0 ? void 0 : child.width)
+                ? child.width < TableDefaults.td.minWidth
+                    ? child.width
+                    : TableDefaults.td.minWidth
+                : TableDefaults.td.minWidth, columnId: shortUUID.generate(), enableResize: resolveColumnResize(child, props.enableColumnResize) });
+    })
+        .sort((a, b) => a.orderValue - b.orderValue);
+    const savedTableState = useMemo(() => {
+        return (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled)
+            ? StateStorage.getTableState(stateStorage.key)
+            : undefined;
+    }, []);
+    const { columnState: savedColumnState, selectionState: savedSelectionState, sortState: savedSortState, } = savedTableState || {};
+    const [columnState, setColumnState] = useState(syncColumnState(_columns, savedColumnState));
+    const [search, setSearch] = useState();
+    const [sortState, setSortState] = useState(savedSortState);
+    const [selectionStatus, setSelectionStatus] = useState((savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.selectionStatus) || SelectionStatus.None);
+    const [excludedRowKeys, setExcludedRowKeys] = useState((savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.excludedRowKeys) || []);
+    const [selectedRowKeys, setSelectedRowKeys] = useState((savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.selectedRowKeys) || []);
+    const getColumnState = (dataField) => {
+        return columnState.find((col) => col.dataField === dataField);
+    };
+    const handleColumnReorder = (dragColumn, dropColumn) => {
+        var _a, _b, _c;
+        if (!dragColumn || !dropColumn)
+            return;
+        const dropColumnOrder = (_a = columnState.find((col) => col.dataField === dropColumn.dataField)) === null || _a === void 0 ? void 0 : _a.orderValue;
+        const dragColumnOrder = (_b = columnState.find((col) => col.dataField === dragColumn.dataField)) === null || _b === void 0 ? void 0 : _b.orderValue;
+        if (dropColumnOrder === undefined || dragColumnOrder === undefined)
+            return;
+        const moveDirection = dragColumnOrder < dropColumnOrder ? "right" : "left";
+        const newColumnState = columnState
+            .map((col) => {
+            if (col.dataField === dragColumn.dataField) {
+                col.orderValue =
+                    dropColumnOrder + (moveDirection === "right" ? 1 : -1);
+            }
+            else {
+                if (col.orderValue > dropColumnOrder) {
+                    col.orderValue = col.orderValue + 1;
+                }
+            }
+            return col;
+        })
+            .sort((a, b) => a.orderValue - b.orderValue);
+        setColumnState(newColumnState);
+        (_c = props.onColumnReorder) === null || _c === void 0 ? void 0 : _c.call(props, {
+            columnState: newColumnState,
+            column: dragColumn,
+        });
+    };
+    const handleColumnHeaderClick = (column) => {
+        var _a;
+        if (props.enableSorting === true || column.enableSorting === true) {
+            setSortState((prevSortState) => {
+                var _a;
+                let newSortState = {
+                    dataField: column.dataField,
+                    dir: "asc",
+                };
+                if ((prevSortState === null || prevSortState === void 0 ? void 0 : prevSortState.dataField) === column.dataField) {
+                    if (prevSortState.dir === "desc") {
+                        newSortState = null;
+                    }
+                    else {
+                        if (newSortState) {
+                            newSortState.dir = prevSortState.dir === "asc" ? "desc" : "asc";
+                        }
+                    }
+                }
+                (_a = props.onColumnHeaderClick) === null || _a === void 0 ? void 0 : _a.call(props, { column, sort: newSortState });
+                return newSortState;
+            });
+        }
+        else {
+            (_a = props.onColumnHeaderClick) === null || _a === void 0 ? void 0 : _a.call(props, { column, sort: null });
+        }
+    };
+    const runSearch = (searchText) => {
+        setSearch(searchText);
+    };
+    const sortData = (sortState) => {
+        // sort data
+        return props.data.sort((a, b) => {
+            if (sortState) {
+                if (sortState.dir === "asc") {
+                    if (a[sortState.dataField] < b[sortState.dataField]) {
+                        return -1;
+                    }
+                    if (a[sortState.dataField] > b[sortState.dataField]) {
+                        return 1;
+                    }
+                    return 0;
+                }
+                else if (sortState.dir === "desc") {
+                    if (a[sortState.dataField] > b[sortState.dataField]) {
+                        return -1;
+                    }
+                    if (a[sortState.dataField] < b[sortState.dataField]) {
+                        return 1;
+                    }
+                    return 0;
+                }
+            }
+            // sort by __index
+            if (a.__index < b.__index) {
+                return -1;
+            }
+            if (a.__index > b.__index) {
+                return 1;
+            }
+            return 0;
+        });
+    };
+    const searchData = (searchText) => {
+        return props.data.filter((row) => {
+            return Object.keys(row)
+                .filter((key) => key !== "__key" && key !== "__index")
+                .some((key) => {
+                if (typeof row[key] === "string") {
+                    return row[key].toLowerCase().includes(searchText.toLowerCase());
+                }
+                return false;
+            });
+        });
+    };
+    const toggleColumnVisibility = (dataField) => {
+        setColumnState((prevColumnState) => {
+            return prevColumnState.map((col) => {
+                if (col.dataField === dataField) {
+                    return Object.assign(Object.assign({}, col), { visible: !col.visible });
+                }
+                return col;
+            });
+        });
+    };
+    const getColumnVisibility = (dataField) => {
+        var _a;
+        return (((_a = columnState.find((col) => col.dataField === dataField)) === null || _a === void 0 ? void 0 : _a.visible) || true);
+    };
+    const selectRow = (row) => {
+        const key = !!props.keyField ? row[props.keyField] : row.__key;
+        const keyField = !!props.keyField ? props.keyField : "__key";
+        if (props.data.length === selectedRowKeys.length + 1) {
+            setSelectionStatus(SelectionStatus.All);
+        }
+        else {
+            setSelectionStatus(SelectionStatus.SomeIncluded);
+        }
+        setSelectedRowKeys((prevSelectedRowKeys) => {
+            return [...prevSelectedRowKeys, key];
+        });
+        setExcludedRowKeys((prev) => prev.filter((k) => k !== key));
+    };
+    const deselectRow = (row) => {
+        const key = !!props.keyField ? props.keyField : "__key";
+        if (selectionStatus === SelectionStatus.All ||
+            selectionStatus === SelectionStatus.SomeExcluded) {
+            setSelectionStatus(SelectionStatus.SomeExcluded);
+            setExcludedRowKeys((prev) => [...prev, row[key]]);
+        }
+        if (selectedRowKeys.length === 1) {
+            setSelectionStatus(SelectionStatus.None);
+        }
+        setSelectedRowKeys((prevSelectedRowKeys) => {
+            return prevSelectedRowKeys.filter((k) => k !== row[key]);
+        });
+    };
+    const selectAllRows = () => {
+        var _a;
+        const keys = ((_a = props.data) === null || _a === void 0 ? void 0 : _a.map((row) => !!props.keyField ? row[props.keyField] : row.__key)) || [];
+        setSelectedRowKeys(keys);
+        setSelectionStatus(SelectionStatus.All);
+        setExcludedRowKeys([]);
+    };
+    const clearSelections = () => {
+        setSelectedRowKeys([]);
+        setSelectionStatus(SelectionStatus.None);
+        setExcludedRowKeys([]);
+    };
+    const getSelectedRows = () => {
+        return props.data.filter((row) => {
+            const key = !!props.keyField ? row[props.keyField] : row.__key;
+            return selectedRowKeys.includes(key);
+        });
+    };
+    const getSelectedRowKeys = () => {
+        return selectedRowKeys;
+    };
+    const isRowSelected = (row) => {
+        const key = !!props.keyField ? row[props.keyField] : row.__key;
+        return selectedRowKeys.includes(key);
+    };
+    useEffect(() => {
+        var _a;
+        (_a = props.onColumnStateChange) === null || _a === void 0 ? void 0 : _a.call(props, columnState);
+        if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
+            if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
+                StateStorage.setColumnState(stateStorage.key, columnState);
+            }
+        }
+        if (tableInstanceRef) {
+            tableInstanceRef.current = {
+                columnState,
+                setColumnState,
+                getColumnState,
+                toggleColumnVisibility,
+                getColumnVisibility,
+                getSelectedRows,
+                getSelectedRowKeys,
+                selectRow,
+                deselectRow,
+                selectAllRows,
+                clearSelections,
+                runSearch,
+            };
+        }
+    }, [columnState]);
+    useEffect(() => {
+        var _a;
+        (_a = props === null || props === void 0 ? void 0 : props.onSelectionChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+            selectedRowKeys,
+            excludedRowKeys,
+            selectionStatus,
+        });
+        if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
+            if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
+                StateStorage.setSelectionState(stateStorage.key, {
+                    selectedRowKeys,
+                    excludedRowKeys,
+                    selectionStatus,
+                });
+            }
+        }
+    }, [
+        selectedRowKeys,
+        selectionStatus,
+        excludedRowKeys,
+        props === null || props === void 0 ? void 0 : props.onSelectionChange,
+        stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled,
+        stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type,
+        stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.key,
+    ]);
+    useEffect(() => {
+        if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
+            if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
+                StateStorage.setSortState(stateStorage.key, sortState);
+            }
+        }
+    }, [sortState]);
+    const _data = useMemo(() => {
+        let processedData = props.data;
+        if (props.manualSorting !== true) {
+            processedData = sortData(sortState);
+        }
+        if (search) {
+            processedData = searchData(search);
+        }
+        return processedData;
+    }, [props.data, columnState, search, sortState]);
+    return (_jsx(TableContext.Provider, { value: Object.assign(Object.assign({ columnState,
+            setColumnState,
+            sortState,
+            handleColumnReorder,
+            handleColumnHeaderClick, selectionState: {
+                selectedRowKeys,
+                excludedRowKeys,
+                selectionStatus,
+            }, selectRow,
+            deselectRow,
+            isRowSelected,
+            selectedRowKeys,
+            getSelectedRowKeys,
+            selectAllRows,
+            clearSelections }, props), { data: _data }), children: children }));
+};
+export default TableProvider;

package/dist/NewTable/TableRow.d.ts

@@ -0,0 +1,3 @@
+import { TableRowProps } from "./types";
+declare const TableRow: React.FC<TableRowProps>;
+export default TableRow;

package/dist/NewTable/TableRow.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Maximize2Icon } from "lucide-react";
+import ColumnResizer from "./ColumnResizer";
+import { InnerCellContent, TD, TR } from "./TableComponents";
+import useTable from "./useTable";
+import ActionCell from "./ActionCell";
+import ActionButton from "./ActionButton";
+import CheckBox from "../CheckBox";
+const TableRow = ({ rowData, rowStyle }) => {
+    const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, } = useTable();
+    const selected = isRowSelected(rowData);
+    const handleSelectionChange = (e) => {
+        e === true ? selectRow(rowData) : deselectRow(rowData);
+    };
+    return (_jsxs(TR, { className: "mfui-tr", style: rowStyle, "data-key": rowData.__key, children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: _jsx(CheckBox, { value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
+                if (column.visible === false)
+                    return null;
+                return (_jsxs(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, style: {
+                        width: column.width,
+                        minWidth: column.minWidth,
+                        flex: column.width ? "0 0 auto" : "1",
+                    }, children: [(column === null || column === void 0 ? void 0 : column.enableResize) === true && _jsx(ColumnResizer, { column: column }), _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: column.render
+                                ? column.render(rowData)
+                                : rowData[column.dataField] })] }, index));
+            })] }));
+};
+export default TableRow;

package/dist/NewTable/Utils/index.d.ts

@@ -0,0 +1,3 @@
+export { default as resolveColumnResize } from "./resolveColumnResize";
+export { default as syncColumnState } from "./syncColumnState";
+export { default as resizeHandler } from "./resizeHandler";

package/dist/NewTable/Utils/index.js

@@ -0,0 +1,3 @@
+export { default as resolveColumnResize } from "./resolveColumnResize";
+export { default as syncColumnState } from "./syncColumnState";
+export { default as resizeHandler } from "./resizeHandler";

package/dist/NewTable/Utils/resizeHandler.d.ts

@@ -0,0 +1,3 @@
+import { ResizeHandlerProps } from "../types";
+declare const resizeHandler: ({ event, columnId, columnProps, onResize, onResizeFinished, }: ResizeHandlerProps) => void;
+export default resizeHandler;

package/dist/NewTable/Utils/resizeHandler.js

@@ -0,0 +1,84 @@
+import TableDefaults from "../TableDefaults";
+const enableResizeClass = (dataField) => {
+    if (dataField === undefined) {
+        return;
+    }
+    document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
+        resizer.classList.add("isResizing");
+    });
+};
+const disableResizeClass = (dataField) => {
+    if (dataField === undefined) {
+        return;
+    }
+    document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
+        resizer.classList.remove("isResizing");
+    });
+};
+const resizeHandler = ({ event, columnId, columnProps, onResize, onResizeFinished, }) => {
+    let col = event.target
+        .parentElement;
+    let newColumns = [];
+    let x = 0;
+    let w = 0;
+    const mouseMoveHandler = function (e) {
+        const selectedColumn = document.querySelectorAll(`.column-${columnId}`);
+        const columnHeaders = document.querySelectorAll(`.mfui-th.column-${columnId}`);
+        const dx = e.clientX - x;
+        let newWidth = w + dx;
+        // Calculate what the minimum width should be
+        // min width should be the defined column width or the default min width
+        if (columnProps.minWidth === undefined) {
+            if (newWidth < TableDefaults.td.minWidth)
+                newWidth = TableDefaults.td.minWidth;
+        }
+        else {
+            if (newWidth < columnProps.minWidth)
+                newWidth = columnProps.minWidth;
+        }
+        selectedColumn.forEach((col) => {
+            var _a;
+            col.style.width = `${newWidth}px`;
+            col.style.flex = "0 0 auto";
+            // col.style.maxWidth = `${newWidth}px`;
+            // col.style.minWidth = `${newWidth}px`;
+            newColumns.push({
+                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
+                width: newWidth,
+            });
+        });
+        newColumns = Array.from(columnHeaders).map((col) => {
+            var _a;
+            return {
+                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
+                width: newWidth,
+            };
+        });
+        onResize({
+            columns: newColumns,
+        });
+    };
+    const mouseUpHandler = function () {
+        var _a, _b, _c;
+        let newWidth = ((_c = (_b = (_a = document === null || document === void 0 ? void 0 : document.querySelector) === null || _a === void 0 ? void 0 : _a.call(document, `.column-${columnId}`)) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.width) || null;
+        if (newWidth) {
+            newWidth = newWidth.replace("px", "");
+        }
+        disableResizeClass(columnId);
+        document.removeEventListener("mousemove", mouseMoveHandler);
+        document.removeEventListener("mouseup", mouseUpHandler);
+        onResizeFinished === null || onResizeFinished === void 0 ? void 0 : onResizeFinished({
+            column: columnProps,
+            columnId: columnId,
+            targetColumn: document.querySelector(`.column-${columnId}`),
+            newWidth,
+        });
+    };
+    x = event.clientX;
+    const styles = window.getComputedStyle(col);
+    w = parseInt(styles.width, 10);
+    document.addEventListener("mousemove", mouseMoveHandler);
+    document.addEventListener("mouseup", mouseUpHandler);
+    enableResizeClass(columnId);
+};
+export default resizeHandler;

package/dist/NewTable/Utils/resolveColumnReorder.d.ts

@@ -0,0 +1,3 @@
+import { ColumnProps } from "../types";
+declare const resolveColumnReorder: (column: ColumnProps, enableColumnReorder?: boolean) => boolean;
+export default resolveColumnReorder;

package/dist/NewTable/Utils/resolveColumnReorder.js

@@ -0,0 +1,5 @@
+const resolveColumnReorder = (column, enableColumnReorder) => {
+    return ((enableColumnReorder === true && column.enableReorder === undefined) ||
+        column.enableReorder === true);
+};
+export default resolveColumnReorder;

package/dist/NewTable/Utils/resolveColumnResize.d.ts

@@ -0,0 +1,3 @@
+import { ColumnProps } from "../types";
+declare const resolveColumnResize: (column: ColumnProps, enableColumnResize?: boolean) => boolean;
+export default resolveColumnResize;

package/dist/NewTable/Utils/resolveColumnResize.js

@@ -0,0 +1,5 @@
+const resolveColumnResize = (column, enableColumnResize) => {
+    return ((enableColumnResize === true && column.enableResize === undefined) ||
+        column.enableResize === true);
+};
+export default resolveColumnResize;

package/dist/NewTable/Utils/syncColumnState.d.ts

@@ -0,0 +1,3 @@
+import { ColumnState } from "../types";
+declare function syncColumnState(initialState: ColumnState[], columnState?: ColumnState[]): ColumnState[];
+export default syncColumnState;

package/dist/NewTable/Utils/syncColumnState.js

@@ -0,0 +1,26 @@
+// Synchronizes columnDefs and stored column state
+// Ensures if ColumnDefs are updated, the column state is updated as well
+function syncColumnState(initialState, columnState) {
+    if (!columnState) {
+        return initialState;
+    }
+    const newColumnState = [...initialState];
+    // remove columns that are no longer in columnDefs
+    columnState = columnState.filter((savedColumn) => initialState.find((c) => savedColumn.dataField.includes("custom_field_") || // ignore custom fields
+        c.dataField === savedColumn.dataField));
+    for (const savedColumn of columnState) {
+        const column = initialState.find((c) => c.dataField === savedColumn.dataField);
+        if (column) {
+            column.visible = savedColumn.visible;
+            // column.sorting = savedColumn.sorting;
+            column.columnId = savedColumn.columnId;
+            column.width = savedColumn.width;
+            column.orderValue = savedColumn.orderValue;
+        }
+        else {
+            newColumnState.push(savedColumn);
+        }
+    }
+    return newColumnState.sort((a, b) => a.orderValue - b.orderValue);
+}
+export default syncColumnState;

package/dist/NewTable/VirtualIzedRows.d.ts

@@ -0,0 +1,12 @@
+declare const VirtualizedRows: React.FC<{
+    tableDimensions: {
+        width: number;
+        height: number;
+    };
+    targetElm: React.RefObject<HTMLDivElement>;
+    listElm: React.RefObject<HTMLDivElement>;
+    rowHeight?: number;
+    headerRowHeight?: number;
+    compact?: boolean;
+}>;
+export default VirtualizedRows;

package/dist/NewTable/VirtualIzedRows.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FixedSizeList } from "react-window";
+import { TableViewPort } from "./TableComponents";
+import useTable from "./useTable";
+import TableDefaults from "./TableDefaults";
+import TableRow from "./TableRow";
+const VirtualizedRows = ({ tableDimensions, targetElm, listElm, rowHeight, headerRowHeight, compact, }) => {
+    const { data } = useTable();
+    return (_jsx(TableViewPort, { className: "mfui-tbody-viewport", ref: targetElm, style: tableDimensions, children: _jsx(FixedSizeList, { itemData: { data }, overscanCount: 10, height: tableDimensions.height -
+                (headerRowHeight
+                    ? headerRowHeight
+                    : compact
+                        ? TableDefaults.row.height.compact
+                        : TableDefaults.row.height.normal), width: tableDimensions.width, itemCount: (data === null || data === void 0 ? void 0 : data.length) || 0, itemSize: rowHeight
+                ? rowHeight
+                : compact
+                    ? TableDefaults.row.height.compact
+                    : TableDefaults.row.height.normal, outerRef: listElm, innerElementType: (props) => {
+                return _jsx("tbody", Object.assign({ className: "mfui-tbody" }, props));
+            }, children: ({ data, index, style }) => {
+                var _a;
+                const row = ((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a[index]) || {};
+                return (_jsx(TableRow, { rowData: row, rowStyle: Object.assign(Object.assign({}, style), { height: rowHeight }) }, index));
+            } }) }));
+};
+export default VirtualizedRows;

package/dist/NewTable/enums.d.ts

@@ -0,0 +1,6 @@
+export declare enum SelectionStatus {
+    None = "none",
+    SomeIncluded = "someIncluded",
+    SomeExcluded = "someExcluded",
+    All = "all"
+}