@monolith-forensics/monolith-ui 1.8.1-dev.3 → 1.8.1

package/dist/Table/ColumnResizer.d.ts

@@ -1,11 +1,14 @@
-import { ColumnState } from "./types";
-declare const ColumnResizer: ({ onResizeStart, onResize, onResizeEnd, column, currentWidth, showOnHover, }: {
+import { ColumnState, onResizeFinishedProps } from "./types";
+declare const ColumnResizer: ({ onResize, onResizeFinished, column, showOnHover, }: {
     className?: string;
-    onResizeStart?: () => void;
-    onResize?: (width: number) => void;
-    onResizeEnd?: (width: number) => void;
+    onResize?: (e: {
+        columns: {
+            dataField: string;
+            width: number;
+        }[];
+    }) => void;
+    onResizeFinished?: (e: onResizeFinishedProps) => void;
     column: ColumnState;
-    currentWidth: number;
     showOnHover?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ColumnResizer;

package/dist/Table/ColumnResizer.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
+import { resizeHandler } from "./Utils";
 const StyledContainer = styled.div `
   position: absolute;
   right: 0px;
@@ -23,43 +24,22 @@ const StyledContainer = styled.div `
     background: ${(props) => props.theme.palette.primary.main};
   }
 `;
-const ColumnResizer = ({ onResizeStart, onResize, onResizeEnd, column, currentWidth, showOnHover = false, }) => {
-    const getConstrainedWidth = (width) => {
-        const minWidth = column.minWidth;
-        const maxWidth = column.maxWidth;
-        if (typeof maxWidth === "number") {
-            return Math.min(Math.max(width, minWidth), maxWidth);
-        }
-        return Math.max(width, minWidth);
-    };
+const ColumnResizer = ({ onResize = () => { }, onResizeFinished, column, showOnHover = false, }) => {
     return (_jsx(StyledContainer, { className: `resizer col-${column.columnId}`, "data-show-on-hover": showOnHover, onClick: (e) => {
             e.stopPropagation();
             e.nativeEvent.stopImmediatePropagation();
             e.preventDefault();
-        }, onPointerDown: (e) => {
+        }, onMouseDown: (e) => {
             e.stopPropagation();
             e.nativeEvent.stopImmediatePropagation();
             e.preventDefault();
-            const startX = e.clientX;
-            const startWidth = currentWidth;
-            const target = e.currentTarget;
-            const handlePointerMove = (event) => {
-                const nextWidth = getConstrainedWidth(startWidth + event.clientX - startX);
-                onResize === null || onResize === void 0 ? void 0 : onResize(nextWidth);
-            };
-            const handlePointerUp = (event) => {
-                const nextWidth = getConstrainedWidth(startWidth + event.clientX - startX);
-                target.classList.remove("isResizing");
-                document.removeEventListener("pointermove", handlePointerMove);
-                document.removeEventListener("pointerup", handlePointerUp);
-                document.removeEventListener("pointercancel", handlePointerUp);
-                onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd(nextWidth);
-            };
-            target.classList.add("isResizing");
-            onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
-            document.addEventListener("pointermove", handlePointerMove);
-            document.addEventListener("pointerup", handlePointerUp);
-            document.addEventListener("pointercancel", handlePointerUp);
+            resizeHandler({
+                event: e,
+                columnId: column.columnId,
+                columnProps: column,
+                onResize: onResize,
+                onResizeFinished: onResizeFinished,
+            });
         } }));
 };
 export default ColumnResizer;

package/dist/Table/StateStorage.d.ts

@@ -11,8 +11,6 @@ type GetSearchStateFn = (key: string) => string;
 type SetSearchStateFn = (key: string, value: string) => void;
 type GetFilterStateFn = (key: string) => Query | undefined;
 type SetFilterStateFn = (key: string, value?: Query | null) => void;
-type GetExpandedKeysFn = (key: string) => string[] | undefined;
-type SetExpandedKeysFn = (key: string, value: string[]) => void;
 declare const StateStorage: {
     getTableState: GetTableStateFn;
     getColumnState: GetColumnStateFn;
@@ -25,7 +23,5 @@ declare const StateStorage: {
     setSearchState: SetSearchStateFn;
     getFilterState: GetFilterStateFn;
     setFilterState: SetFilterStateFn;
-    getExpandedKeys: GetExpandedKeysFn;
-    setExpandedKeys: SetExpandedKeysFn;
 };
 export default StateStorage;

package/dist/Table/StateStorage.js

@@ -82,17 +82,6 @@ const setFilterState = (key, value) => {
     const newState = Object.assign(Object.assign({}, previousState), { filterState: value });
     set(key, newState);
 };
-const getExpandedKeys = (key) => {
-    const data = getTableState(key);
-    return data.expandedKeys;
-};
-const setExpandedKeys = (key, value) => {
-    // get previous state
-    const previousState = getTableState(key);
-    // merge previous state with new state
-    const newState = Object.assign(Object.assign({}, previousState), { expandedKeys: value });
-    set(key, newState);
-};
 const StateStorage = {
     getTableState,
     getColumnState,
@@ -105,7 +94,5 @@ const StateStorage = {
     setSearchState,
     getFilterState,
     setFilterState,
-    getExpandedKeys,
-    setExpandedKeys,
 };
 export default StateStorage;

package/dist/Table/Table.js

@@ -22,7 +22,6 @@ import TableMenu from "./TableMenu";
 import useTable from "./useTable";
 import LoadingIndicator from "./LoadingIndicator";
 import styled from "styled-components";
-import TableDefaults from "./TableDefaults";
 const StyledTableContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -41,20 +40,8 @@ const TableContent = ({ children, }) => {
                 }, ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx("div", { children: "No columns visible" }), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
 };
 export const Table = (_a) => {
-    var { data, columnProps, children, treeOptions } = _a, props = __rest(_a, ["data", "columnProps", "children", "treeOptions"]) // pass through props straight to table context
+    var { data, columnProps, children } = _a, props = __rest(_a, ["data", "columnProps", "children"]) // pass through props straight to table context
     ;
-    const resolvedTreeOptions = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f;
-        return ({
-            enabled: (_a = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.enabled) !== null && _a !== void 0 ? _a : false,
-            mode: (_b = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.mode) !== null && _b !== void 0 ? _b : TableDefaults.tree.defaultMode,
-            childrenField: (_c = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.childrenField) !== null && _c !== void 0 ? _c : TableDefaults.tree.defaultChildrenField,
-            parentIdField: (_d = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.parentIdField) !== null && _d !== void 0 ? _d : TableDefaults.tree.defaultParentIdField,
-            idField: treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.idField,
-            indentPx: (_e = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.indentPx) !== null && _e !== void 0 ? _e : TableDefaults.tree.indentPx,
-            autoExpandOnMatch: (_f = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.autoExpandOnMatch) !== null && _f !== void 0 ? _f : true,
-        });
-    }, [treeOptions]);
     const tableElement = useRef(null);
     const targetElm = useRef(null);
     const listElm = useRef(null);
@@ -126,153 +113,18 @@ export const Table = (_a) => {
     // Uses a WeakMap so entries are automatically garbage collected
     // when their corresponding row objects are no longer referenced.
     const uuidCache = useRef(new WeakMap());
-    const getOrAssignKey = (row) => {
-        let key = uuidCache.current.get(row);
+    // Augment each row with a stable __key (UUID) and __index.
+    // The WeakMap ensures that the same row object always receives
+    // the same UUID across re-renders, preventing unnecessary DOM
+    // reconciliation. useMemo preserves referential stability of
+    // the output array when the data reference hasn't changed.
+    const __data = useMemo(() => data === null || data === void 0 ? void 0 : data.map((d, i) => {
+        let key = uuidCache.current.get(d);
         if (!key) {
             key = shortUUID.uuid();
-            uuidCache.current.set(row, key);
-        }
-        return key;
-    };
-    // Augment each row with stable metadata. When tree mode is disabled,
-    // produces a flat 1:1 mapping with __key and __index. When enabled,
-    // walks the input (nested or flat) into a flat depth-first array
-    // and adds tree metadata (__level, __parentKey, __hasChildren, __childKeys).
-    const { rows: __data, treeMeta } = useMemo(() => {
-        const parentKeyMap = new Map();
-        const childrenKeyMap = new Map();
-        const expandableKeys = [];
-        if (!data) {
-            return {
-                rows: [],
-                treeMeta: { parentKeyMap, childrenKeyMap, expandableKeys },
-            };
-        }
-        if (!resolvedTreeOptions.enabled) {
-            const rows = data.map((d, i) => (Object.assign(Object.assign({}, d), { __key: getOrAssignKey(d), __index: i })));
-            return {
-                rows,
-                treeMeta: { parentKeyMap, childrenKeyMap, expandableKeys },
-            };
+            uuidCache.current.set(d, key);
         }
-        const rows = [];
-        let counter = 0;
-        if (resolvedTreeOptions.mode === "nested") {
-            const childrenField = resolvedTreeOptions.childrenField;
-            const walk = (node, level, parentKey) => {
-                const key = getOrAssignKey(node);
-                const rawChildren = node === null || node === void 0 ? void 0 : node[childrenField];
-                const children = Array.isArray(rawChildren) ? rawChildren : [];
-                const childKeys = children.map((c) => getOrAssignKey(c));
-                // Strip the nested children field from the augmented copy to avoid
-                // memory bloat and prevent accidental iteration of the raw tree.
-                const _a = node, _b = childrenField, _stripped = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-                const augmented = Object.assign(Object.assign({}, rest), { __key: key, __index: counter++, __level: level, __parentKey: parentKey, __hasChildren: children.length > 0, __childKeys: childKeys });
-                rows.push(augmented);
-                parentKeyMap.set(key, parentKey);
-                if (children.length > 0) {
-                    childrenKeyMap.set(key, childKeys);
-                    expandableKeys.push(key);
-                }
-                for (const child of children) {
-                    walk(child, level + 1, key);
-                }
-            };
-            const rootKeys = [];
-            for (const root of data) {
-                rootKeys.push(getOrAssignKey(root));
-                walk(root, 0, undefined);
-            }
-            childrenKeyMap.set(undefined, rootKeys);
-        }
-        else {
-            // flat mode
-            const idField = resolvedTreeOptions.idField || props.keyField;
-            if (!idField) {
-                throw new Error('Table treeOptions.mode="flat" requires either treeOptions.idField or keyField to be set so the table can resolve parent-child relationships against a stable id.');
-            }
-            const parentIdField = resolvedTreeOptions.parentIdField;
-            // Pass 1: assign __key, build idToKey
-            const idToKey = new Map();
-            const idToRow = new Map();
-            for (const d of data) {
-                const id = d === null || d === void 0 ? void 0 : d[idField];
-                if (id === undefined || id === null)
-                    continue;
-                idToKey.set(id, getOrAssignKey(d));
-                idToRow.set(id, d);
-            }
-            // Pass 2: build parent->children id map. Roots = parentId null/undefined
-            // OR parentId points at a non-existent row.
-            const parentToChildIds = new Map();
-            const rootIds = [];
-            let warnedOrphan = false;
-            for (const d of data) {
-                const id = d === null || d === void 0 ? void 0 : d[idField];
-                if (id === undefined || id === null)
-                    continue;
-                const parentId = d === null || d === void 0 ? void 0 : d[parentIdField];
-                if (parentId === undefined || parentId === null) {
-                    rootIds.push(id);
-                    continue;
-                }
-                if (!idToRow.has(parentId)) {
-                    if (!warnedOrphan) {
-                        // eslint-disable-next-line no-console
-                        console.warn(`Table tree (flat mode): row id "${id}" references missing parentId "${parentId}"; treating as root.`);
-                        warnedOrphan = true;
-                    }
-                    rootIds.push(id);
-                    continue;
-                }
-                if (!parentToChildIds.has(parentId))
-                    parentToChildIds.set(parentId, []);
-                parentToChildIds.get(parentId).push(id);
-            }
-            // Pass 3: DFS from roots with cycle detection
-            const visiting = new Set();
-            let warnedCycle = false;
-            const walkFlat = (id, level, parentKey) => {
-                if (visiting.has(id)) {
-                    if (!warnedCycle) {
-                        // eslint-disable-next-line no-console
-                        console.warn(`Table tree (flat mode): cycle detected at row id "${id}"; truncating subtree.`);
-                        warnedCycle = true;
-                    }
-                    return;
-                }
-                visiting.add(id);
-                const node = idToRow.get(id);
-                const key = idToKey.get(id);
-                const childIds = parentToChildIds.get(id) || [];
-                const childKeys = childIds
-                    .map((cid) => idToKey.get(cid))
-                    .filter((k) => !!k);
-                const augmented = Object.assign(Object.assign({}, node), { __key: key, __index: counter++, __level: level, __parentKey: parentKey, __hasChildren: childIds.length > 0, __childKeys: childKeys });
-                rows.push(augmented);
-                parentKeyMap.set(key, parentKey);
-                if (childIds.length > 0) {
-                    childrenKeyMap.set(key, childKeys);
-                    expandableKeys.push(key);
-                }
-                for (const cid of childIds) {
-                    walkFlat(cid, level + 1, key);
-                }
-                visiting.delete(id);
-            };
-            const rootKeys = [];
-            for (const id of rootIds) {
-                const k = idToKey.get(id);
-                if (k)
-                    rootKeys.push(k);
-                walkFlat(id, 0, undefined);
-            }
-            childrenKeyMap.set(undefined, rootKeys);
-        }
-        return {
-            rows,
-            treeMeta: { parentKeyMap, childrenKeyMap, expandableKeys },
-        };
-    }, [data, resolvedTreeOptions, props.keyField]);
-    return (_jsx(TableProvider, Object.assign({ columns: columnProps, data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, treeOptions: resolvedTreeOptions, treeMeta: treeMeta }, props, { children: _jsx(TableContent, { children: children }) })));
+        return Object.assign(Object.assign({}, d), { __key: key, __index: i });
+    }), [data]);
+    return (_jsx(TableProvider, Object.assign({ columns: columnProps, data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm }, props, { children: _jsx(TableContent, { children: children }) })));
 };

package/dist/Table/TableComponents.d.ts

@@ -6,16 +6,6 @@ export declare const THR: import("styled-components/dist/types").IStyledComponen
 export declare const TD: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TDProps>> & string;
 export declare const TH: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TDProps> & TDProps, never>> & string;
 export declare const InnerCellContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TreeCellWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TreeIndentSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $level: number;
-    $indentPx: number;
-}>> & string;
-export declare const TreeChevronButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $expanded: boolean;
-}>> & string;
-export declare const TreeChevronPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TreeCellContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableViewPort: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableListElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Table/TableComponents.js

@@ -8,20 +8,18 @@ export const TBody = styled.div `
   overflow: hidden;
 `;
 export const TR = styled.div `
-  box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  flex: 0 0 auto;
-  min-width: 100%;
+
+  flex: 1;
 
   height: ${({ height }) => {
     const customHeight = height ? height + "px" : undefined;
     return customHeight || `${TableDefaults.row.height.normal}px`;
 }};
 
-  box-shadow:
-    inset 1px 0 ${({ theme }) => theme.palette.divider},
-    inset -1px 0 ${({ theme }) => theme.palette.divider};
+  border-left: 1px solid ${({ theme }) => theme.palette.divider};
+  border-right: 1px solid ${({ theme }) => theme.palette.divider};
 
   .row-action {
     visibility: hidden;
@@ -32,6 +30,7 @@ export const TR = styled.div `
   }
 
   &[data-focused="true"] {
+    border: 1px solid transparent;
     outline: 1px solid ${({ theme }) => theme.palette.primary.main};
     outline-offset: -1px;
 
@@ -60,18 +59,21 @@ export const THR = styled(TR) `
   }
 `;
 export const TD = styled.div `
-  box-sizing: border-box;
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  flex: 0 0 auto;
+  flex: 1;
 
   padding: ${TableDefaults.td.padding.normal}px;
   font-size: ${`${TableDefaults.td.fontSize.normal}px`};
 
   min-width: ${TableDefaults.td.minWidth}px;
 
+  &:last-child {
+    flex: 1 !important; // ensure last column takes up remaining space
+  }
+
   background-color: ${({ theme }) => theme.palette.background.default};
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
@@ -108,72 +110,18 @@ export const TH = styled(TD) `
 `;
 export const InnerCellContent = styled.div `
   max-width: 100%;
-  min-width: 0;
 
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-export const TreeCellWrapper = styled.div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: 1 1 auto;
-  min-width: 0;
-`;
-export const TreeIndentSpacer = styled.div `
-  flex: 0 0 auto;
-  width: ${({ $level, $indentPx }) => $level * $indentPx}px;
-`;
-export const TreeChevronButton = styled.button `
-  flex: 0 0 auto;
-  width: 14px;
-  height: 16px;
-  padding: 0;
-  margin: 0 8px 0 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: ${({ theme }) => theme.palette.text.secondary};
-  transition: transform 120ms ease;
-  transform: rotate(${({ $expanded }) => ($expanded ? "90deg" : "0deg")});
-
-  &:hover {
-    color: ${({ theme }) => theme.palette.text.primary};
-  }
-
-  &:focus-visible {
-    outline: 1px solid ${({ theme }) => theme.palette.primary.main};
-    outline-offset: 1px;
-  }
-`;
-export const TreeChevronPlaceholder = styled.div `
-  flex: 0 0 auto;
-  width: 12px;
-  height: 16px;
-  margin: 0 10px 0 0;
-`;
-export const TreeCellContent = styled.div `
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
 export const TableViewPort = styled.div `
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  min-width: 0;
 `;
 export const TableListElement = styled.div `
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  min-width: 100%;
 `;
 export const TableWrapper = styled.div `
   position: relative;
@@ -183,7 +131,6 @@ export const TableWrapper = styled.div `
   flex-direction: column;
 `;
 export const StyledTable = styled.div `
-  box-sizing: border-box;
   position: relative;
   overflow: hidden;
   display: flex;
@@ -201,14 +148,6 @@ export const StyledTable = styled.div `
     font-size: ${TableDefaults.td.fontSize.compact}px !important;
   }
 
-  .mfui-td[data-tree-cell="true"] {
-    padding-left: ${TableDefaults.td.padding.normal - 3}px;
-  }
-
-  &[data-compact="true"] .mfui-td[data-tree-cell="true"] {
-    padding-left: ${TableDefaults.td.padding.compact - 3}px !important;
-  }
-
   .os-scrollbar {
     pointer-events: auto;
     visibility: visible;

package/dist/Table/TableDefaults.d.ts

@@ -21,12 +21,5 @@ declare const TableDefaults: {
         minWidth: number;
         maxWidth: number;
     };
-    tree: {
-        indentPx: number;
-        chevronWidth: number;
-        defaultMode: "nested";
-        defaultChildrenField: string;
-        defaultParentIdField: string;
-    };
 };
 export default TableDefaults;

package/dist/Table/TableDefaults.js

@@ -21,12 +21,5 @@ const TableDefaults = {
         minWidth: 35,
         maxWidth: 35,
     },
-    tree: {
-        indentPx: 16,
-        chevronWidth: 16,
-        defaultMode: "nested",
-        defaultChildrenField: "children",
-        defaultParentIdField: "parentId",
-    },
 };
 export default TableDefaults;

package/dist/Table/TableHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import ColumnResizer from "./ColumnResizer";
 import { InnerCellContent, TH, THead, THR } from "./TableComponents";
 import { resolveColumnResize } from "./Utils";
@@ -16,61 +16,45 @@ const StyledCaption = styled.span `
 `;
 const TableHeader = ({ headerRowElm }) => {
     var _a;
-    const { columnState, sortState, setColumnState: updateColumnState, onColumnResize, handleColumnReorder, enableColumnReorder, handleColumnHeaderClick, enableColumnResize, headerRowHeight, enableActionButton, enableSelection, selectionState, disableSelectAll, selectAllRows, clearSelections, compactState, tableLayout, setResizeColumnWidths, } = useTable();
+    const { columnState, sortState, setColumnState: updateColumnState, onColumnResize, handleColumnReorder, enableColumnReorder, handleColumnHeaderClick, enableColumnResize, headerRowHeight, enableActionButton, enableSelection, selectionState, disableSelectAll, selectAllRows, clearSelections, compactState, } = useTable();
     const [dragColumn, setDragColumn] = useState(null);
     const [dropColumn, setDropColumn] = useState(null);
-    const resizeStartWidths = useRef(null);
-    const getResizeWidths = (column, newWidth) => (Object.assign(Object.assign({}, (resizeStartWidths.current || tableLayout.columnWidths)), { [column.columnId]: newWidth }));
-    const handleResizeStart = () => {
-        resizeStartWidths.current = tableLayout.columnWidths;
-        setResizeColumnWidths(tableLayout.columnWidths);
-    };
-    const handleResize = (column, newWidth) => {
-        setResizeColumnWidths(getResizeWidths(column, newWidth));
-    };
-    const handleResizeEnd = (column, newWidth) => {
-        const nextWidths = getResizeWidths(column, newWidth);
+    const handleResize = (e) => {
+        const columnId = e.column.columnId;
+        const newWidth = Number(e.newWidth);
         updateColumnState((prevColumnState) => {
             const nextColumnState = prevColumnState.map((col) => {
-                if (col.columnId === column.columnId) {
+                if (col.columnId === columnId) {
                     return Object.assign(Object.assign({}, col), { width: newWidth });
                 }
                 return col;
             });
             onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize({
-                column: Object.assign(Object.assign({}, column), { width: newWidth }),
+                column: Object.assign(Object.assign({}, e.column), { width: newWidth }),
                 columnState: nextColumnState,
             });
             return nextColumnState;
         });
-        resizeStartWidths.current = null;
-        setResizeColumnWidths(null);
     };
     const handleChangeSelection = (e) => {
         e ? selectAllRows() : clearSelections();
     };
-    return (_jsx(THead, { className: "mfui-thead", children: _jsxs(THR, { className: "mfui-thr", ref: headerRowElm, height: headerRowHeight, "data-compact": compactState, style: { width: tableLayout.contentWidth }, children: [enableSelection && (_jsx(TH, { className: `mfui-th column-action`, style: {
+    return (_jsx(THead, { className: "mfui-thead", children: _jsxs(THR, { className: "mfui-thr", ref: headerRowElm, height: headerRowHeight, "data-compact": compactState, children: [enableSelection && (_jsx(TH, { className: `mfui-th column-action`, style: {
                         width: TableDefaults.actionCell.width,
                         minWidth: TableDefaults.actionCell.minWidth,
                         maxWidth: TableDefaults.actionCell.maxWidth,
-                        flexBasis: TableDefaults.actionCell.width,
-                        flexGrow: 0,
-                        flexShrink: 0,
+                        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: TableDefaults.actionCell.width,
                         minWidth: TableDefaults.actionCell.minWidth,
                         maxWidth: TableDefaults.actionCell.maxWidth,
-                        flexBasis: TableDefaults.actionCell.width,
-                        flexGrow: 0,
-                        flexShrink: 0,
                     }, 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 columnWidth = tableLayout.columnWidths[column.columnId] || column.minWidth;
                     const dndEvents = canReorder
                         ? {
                             onDragOver: (e) => {
@@ -102,13 +86,14 @@ const TableHeader = ({ headerRowElm }) => {
                         }
                         : {};
                     return (_jsxs(TH, Object.assign({ className: `mfui-th column-${column.columnId}`, "data-field": column.dataField, draggable: canReorder, onClick: () => handleColumnHeaderClick(column) }, dndEvents, { style: {
-                            width: columnWidth,
+                            width: column.width,
                             minWidth: column.minWidth,
-                            maxWidth: column.maxWidth,
-                            flexBasis: columnWidth,
-                            flexGrow: 0,
-                            flexShrink: 0,
-                        }, children: [canResize && (_jsx(ColumnResizer, { column: column, currentWidth: columnWidth, showOnHover: true, onResizeStart: handleResizeStart, onResize: (width) => handleResize(column, width), onResizeEnd: (width) => handleResizeEnd(column, width) })), _jsxs(InnerCellContent, { className: "mfui inner-cell-content", children: [_jsx(StyledCaption, { style: { flex: 1 }, children: column.caption }), _jsx(StyledCaption, { children: (sortState === null || sortState === void 0 ? void 0 : sortState.dataField) === column.dataField &&
+                            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: [_jsx(StyledCaption, { style: { flex: 1 }, children: column.caption }), _jsx(StyledCaption, { children: (sortState === null || sortState === void 0 ? void 0 : sortState.dataField) === column.dataField &&
                                             (sortState.dir === "asc" ? (_jsx(ArrowUpIcon, { size: 14 })) : (_jsx(ArrowDownIcon, { size: 14 }))) })] })] }), column.columnId));
                 })] }) }));
 };

package/dist/Table/TableMenu/TableMenu.js

@@ -36,7 +36,7 @@ const TableMenu = () => {
         return null;
     const { addButtonOptions, filterOptions, tableCountOptions, exportOptions, compactOptions, columnSelectorOptions, searchOptions, children, customMenuItems, } = tableMenuOptions;
     const queryFilter = useQueryFilter({
-        value: filterState,
+        defaultFilter: filterState,
         filterDefinitions: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) || [],
         showCombinator: (_a = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.showCombinator) !== null && _a !== void 0 ? _a : true,
         onFilterChange: (q) => {