@monolith-forensics/monolith-ui 1.1.90 → 1.2.0

package/dist/Table/TableProvider.js

@@ -0,0 +1,499 @@
+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";
+import moment from "moment";
+export const TableContext = createContext(null);
+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, searchState: savedSearchState, filterState: savedFilterState, } = savedTableState || {};
+    const [compactState, setCompactState] = useState(props.compact || false);
+    const [columnState, setColumnState] = useState(syncColumnState(_columns, savedColumnState));
+    const [search, setSearch] = useState(savedSearchState || "");
+    const [filterState, setFilterState] = useState(savedFilterState);
+    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 handleFilterChange = (query) => {
+        setFilterState(query);
+    };
+    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 filterData = (filter) => {
+        // create copy of data
+        let processedData = props.data.map((row) => row);
+        const { combinator, rules } = filter;
+        if (!combinator || !rules)
+            return props.data;
+        for (const rule of rules) {
+            const column = columnState.find((col) => col.dataField === rule.dataField);
+            const { value, operator, dataField } = rule;
+            if (!value) {
+                continue;
+            }
+            switch (operator.value) {
+                case "=":
+                    processedData = processedData.filter((row) => {
+                        if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
+                            return moment(row[dataField]).isSame(moment(value), "day");
+                        }
+                        else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
+                            return moment(row[dataField]).isSame(moment(value));
+                        }
+                        return row[dataField] == value;
+                    });
+                    break;
+                case "!=":
+                    processedData = processedData.filter((row) => {
+                        if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
+                            return !moment(row[dataField]).isSame(moment(value), "day");
+                        }
+                        else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
+                            return !moment(row[dataField]).isSame(moment(value));
+                        }
+                        return row[dataField] != value;
+                    });
+                    break;
+                case ">":
+                    processedData = processedData.filter((row) => {
+                        if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
+                            return moment(row[dataField]).isAfter(moment(value), "day");
+                        }
+                        else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
+                            return moment(row[dataField]).isAfter(moment(value));
+                        }
+                        return row[dataField] > value;
+                    });
+                    break;
+                case "<":
+                    processedData = processedData.filter((row) => {
+                        if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
+                            return moment(row[dataField]).isBefore(moment(value), "day");
+                        }
+                        else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
+                            return moment(row[dataField]).isBefore(moment(value));
+                        }
+                        return row[dataField] < value;
+                    });
+                    break;
+                case ">=":
+                    processedData = processedData.filter((row) => {
+                        if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
+                            return moment(row[dataField]).isSameOrAfter(moment(value), "day");
+                        }
+                        else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
+                            return moment(row[dataField]).isSameOrAfter(moment(value));
+                        }
+                        return row[dataField] >= value;
+                    });
+                    break;
+                case "<=":
+                    processedData = processedData.filter((row) => {
+                        if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
+                            return moment(row[dataField]).isSameOrBefore(moment(value), "day");
+                        }
+                        else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
+                            return moment(row[dataField]).isSameOrBefore(moment(value));
+                        }
+                        return row[dataField] <= value;
+                    });
+                    break;
+                case "between":
+                    processedData = processedData.filter((row) => {
+                        if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
+                            return moment(row[dataField]).isBetween(moment(value === null || value === void 0 ? void 0 : value[0]), moment(value === null || value === void 0 ? void 0 : value[1]), "day", "[]");
+                        }
+                        else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
+                            return moment(row[dataField]).isBetween(moment(value === null || value === void 0 ? void 0 : value[0]), moment(value === null || value === void 0 ? void 0 : value[1]), undefined, "[]");
+                        }
+                        return (row[dataField] >= value[0] &&
+                            row[dataField] <= value[1]);
+                    });
+                    break;
+                case "notBetween":
+                    processedData = processedData.filter((row) => {
+                        if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
+                            return !moment(row[dataField]).isBetween(moment(value === null || value === void 0 ? void 0 : value[0]), moment(value === null || value === void 0 ? void 0 : value[1]), "day", "[]");
+                        }
+                        else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
+                            return !moment(row[dataField]).isBetween(moment(value === null || value === void 0 ? void 0 : value[0]), moment(value === null || value === void 0 ? void 0 : value[1]), undefined, "[]");
+                        }
+                        return (row[dataField] < value[0] ||
+                            row[dataField] > value[1]);
+                    });
+                    break;
+                case "contains":
+                    processedData = processedData.filter((row) => {
+                        return row[dataField]
+                            .toLowerCase()
+                            .includes(value.toLowerCase());
+                    });
+                    break;
+                case "doesNotContain":
+                    processedData = processedData.filter((row) => {
+                        return !row[dataField]
+                            .toLowerCase()
+                            .includes(value.toLowerCase());
+                    });
+                    break;
+                case "in":
+                    if (!Array.isArray(value)) {
+                        break;
+                    }
+                    else if (value.length === 0) {
+                        break;
+                    }
+                    processedData = processedData.filter((row) => {
+                        return value.find((v) => v == row[dataField]);
+                    });
+                    break;
+                case "nin":
+                    if (!Array.isArray(value)) {
+                        break;
+                    }
+                    else if (value.length === 0) {
+                        break;
+                    }
+                    processedData = processedData.filter((row) => {
+                        return !value.find((v) => v == row[dataField]);
+                    });
+                    break;
+                default:
+                    break;
+            }
+        }
+        return processedData;
+    };
+    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 toggleCompact = () => {
+        setCompactState((prev) => !prev);
+    };
+    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);
+    };
+    const getCalculatedSelectionTotal = () => {
+        switch (selectionStatus) {
+            case SelectionStatus.All:
+                return (props === null || props === void 0 ? void 0 : props.totalRecords) || props.data.length;
+            case SelectionStatus.SomeIncluded:
+                return selectedRowKeys.length;
+            case SelectionStatus.SomeExcluded:
+                return (props === null || props === void 0 ? void 0 : props.totalRecords)
+                    ? props.totalRecords - excludedRowKeys.length
+                    : props.data.length - excludedRowKeys.length;
+            default:
+                return 0;
+        }
+    };
+    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]);
+    useEffect(() => {
+        if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
+            if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
+                StateStorage.setSearchState(stateStorage.key, search);
+            }
+        }
+    }, [search]);
+    useEffect(() => {
+        if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
+            if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
+                StateStorage.setFilterState(stateStorage.key, filterState);
+            }
+        }
+    }, [filterState]);
+    const _data = useMemo(() => {
+        let processedData = props.data;
+        if (props.manualSorting !== true) {
+            processedData = sortData(sortState);
+        }
+        if (props.manualFiltering !== true && filterState) {
+            processedData = filterData(filterState);
+        }
+        if (props.manualSearch !== true && search) {
+            processedData = searchData(search);
+        }
+        return processedData;
+    }, [props.data, columnState, search, sortState, filterState]);
+    return (_jsx(TableContext.Provider, { value: Object.assign(Object.assign({ columnState,
+            setColumnState,
+            sortState, searchState: search, handleColumnReorder,
+            handleColumnHeaderClick, selectionState: {
+                selectedRowKeys,
+                excludedRowKeys,
+                selectionStatus,
+            }, selectRow,
+            deselectRow,
+            isRowSelected,
+            selectedRowKeys,
+            getSelectedRowKeys,
+            selectAllRows,
+            clearSelections,
+            toggleColumnVisibility,
+            runSearch,
+            handleFilterChange,
+            filterState,
+            compactState,
+            toggleCompact,
+            getCalculatedSelectionTotal }, props), { data: _data }), children: children }));
+};
+export default TableProvider;

package/dist/Table/TableRow.d.ts

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

package/dist/Table/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, "data-selected": selected, children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", 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/Table/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/Table/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/Table/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/Table/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/Table/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/Table/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/Table/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/Table/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/Table/Utils/syncColumnState.d.ts

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