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

package/dist/SuperDatePicker/components/EndpointPopover.d.ts

@@ -0,0 +1,18 @@
+import type { SuperDatePickerProps } from "../SuperDatePicker.types";
+type EndpointPopoverProps = {
+    opened: boolean;
+    disabled: boolean;
+    label: string;
+    value?: string | null;
+    onOpenChange: (opened: boolean) => void;
+    onInputChange: (value?: string | null) => void;
+    onCalendarChange: (date: Date | null) => void;
+    format: NonNullable<SuperDatePickerProps["format"]>;
+    size: NonNullable<SuperDatePickerProps["size"]>;
+    utc: boolean;
+    min?: Date;
+    max?: Date;
+    timeIntervalMinutes?: number;
+};
+declare const EndpointPopover: ({ opened, disabled, label, value, onOpenChange, onInputChange, onCalendarChange, format, size, utc, min, max, timeIntervalMinutes, }: EndpointPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default EndpointPopover;

package/dist/SuperDatePicker/components/EndpointPopover.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from "../../Popover";
+import EndpointCalendarDropdown from "./EndpointCalendarDropdown";
+import EndpointDateInput from "./EndpointDateInput";
+const EndpointPopover = ({ opened, disabled, label, value, onOpenChange, onInputChange, onCalendarChange, format, size, utc, min, max, timeIntervalMinutes, }) => {
+    return (_jsxs(Popover, { opened: opened, onChange: (nextOpened) => onOpenChange(!disabled && nextOpened), position: "bottom-start", offset: 5, withinPortal: true, children: [_jsx(Popover.Target, { children: _jsx(EndpointDateInput, { active: opened, ariaLabel: label, value: value, onChange: onInputChange, onOpen: () => onOpenChange(true), format: format, size: size, disabled: disabled, utc: utc, min: min, max: max }) }), _jsx(Popover.Dropdown, { style: {
+                    border: "none",
+                    padding: 0,
+                }, children: _jsx(EndpointCalendarDropdown, { value: value, onChange: onCalendarChange, min: min, max: max, timeIntervalMinutes: timeIntervalMinutes, utc: utc }) })] }));
+};
+export default EndpointPopover;

package/dist/SuperDatePicker/components/QuickRangeDropdown.d.ts

@@ -0,0 +1,14 @@
+import type { CommonRangeGroupConfig, QuickDirection, QuickUnit, SuperDatePickerPreset } from "../SuperDatePicker.types";
+type QuickRangeDropdownProps = {
+    commonRangeGroups: CommonRangeGroupConfig[];
+    quickDirection: QuickDirection;
+    quickAmount: string;
+    quickUnit: QuickUnit;
+    onQuickDirectionChange: (direction: QuickDirection) => void;
+    onQuickAmountChange: (amount: string) => void;
+    onQuickAmountSubmit: () => void;
+    onQuickUnitChange: (unit: QuickUnit) => void;
+    onPresetClick: (preset: SuperDatePickerPreset) => void;
+};
+declare const QuickRangeDropdown: ({ commonRangeGroups, quickDirection, quickAmount, quickUnit, onQuickDirectionChange, onQuickAmountChange, onQuickAmountSubmit, onQuickUnitChange, onPresetClick, }: QuickRangeDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default QuickRangeDropdown;

package/dist/SuperDatePicker/components/QuickRangeDropdown.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectBox } from "../../SelectBox";
+import { TextInput } from "../../TextInput";
+import { StyledContent } from "../../core";
+import { QUICK_DIRECTION_OPTIONS, QUICK_UNITS, } from "../SuperDatePicker.constants";
+import { CommonRangesSection, PanelTitle, QuickRangePanel, QuickRangeSection, QuickSelectRow, } from "../SuperDatePicker.styled";
+import CommonPresetGroups from "./CommonPresetGroups";
+const QuickRangeDropdown = ({ commonRangeGroups, quickDirection, quickAmount, quickUnit, onQuickDirectionChange, onQuickAmountChange, onQuickAmountSubmit, onQuickUnitChange, onPresetClick, }) => {
+    const handleAmountKeyDown = (event) => {
+        if (event.key === "Enter") {
+            onQuickAmountSubmit();
+        }
+    };
+    const handleAmountChange = (event) => {
+        onQuickAmountChange(event.target.value);
+    };
+    return (_jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsxs(QuickRangePanel, { children: [_jsxs(QuickRangeSection, { children: [_jsx(PanelTitle, { children: "Quick select" }), _jsxs(QuickSelectRow, { children: [_jsx(SelectBox, { data: QUICK_DIRECTION_OPTIONS, value: quickDirection, onChange: (value) => onQuickDirectionChange(value), size: "xs", variant: "outlined", width: "100%", openOnFocus: false, arrow: true }), _jsx(TextInput, { type: "number", min: 1, value: quickAmount, onChange: handleAmountChange, onKeyDown: handleAmountKeyDown, size: "xs", variant: "outlined" }), _jsx(SelectBox, { data: QUICK_UNITS, value: quickUnit, onChange: (value) => onQuickUnitChange(value), size: "xs", variant: "outlined", width: "100%", openOnFocus: false, arrow: true })] })] }), _jsxs(CommonRangesSection, { children: [_jsx(PanelTitle, { children: "Presets" }), _jsx(CommonPresetGroups, { groups: commonRangeGroups, onPresetClick: onPresetClick })] })] }) }));
+};
+export default QuickRangeDropdown;

package/dist/SuperDatePicker/components/QuickRangePopover.d.ts

@@ -0,0 +1,18 @@
+import type { CommonRangeGroupConfig, QuickDirection, QuickUnit, SuperDatePickerPreset, SuperDatePickerProps } from "../SuperDatePicker.types";
+type QuickRangePopoverProps = {
+    opened: boolean;
+    disabled: boolean;
+    size: NonNullable<SuperDatePickerProps["size"]>;
+    commonRangeGroups: CommonRangeGroupConfig[];
+    quickDirection: QuickDirection;
+    quickAmount: string;
+    quickUnit: QuickUnit;
+    onOpenChange: (opened: boolean) => void;
+    onQuickDirectionChange: (direction: QuickDirection) => void;
+    onQuickAmountChange: (amount: string) => void;
+    onQuickAmountSubmit: () => void;
+    onQuickUnitChange: (unit: QuickUnit) => void;
+    onPresetClick: (preset: SuperDatePickerPreset) => void;
+};
+declare const QuickRangePopover: ({ opened, disabled, size, commonRangeGroups, quickDirection, quickAmount, quickUnit, onOpenChange, onQuickDirectionChange, onQuickAmountChange, onQuickAmountSubmit, onQuickUnitChange, onPresetClick, }: QuickRangePopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default QuickRangePopover;

package/dist/SuperDatePicker/components/QuickRangePopover.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDaysIcon } from "lucide-react";
+import { Popover } from "../../Popover";
+import { SegmentButton, TriggerIcon, } from "../SuperDatePicker.styled";
+import QuickRangeDropdown from "./QuickRangeDropdown";
+const QuickRangePopover = ({ opened, disabled, size, commonRangeGroups, quickDirection, quickAmount, quickUnit, onOpenChange, onQuickDirectionChange, onQuickAmountChange, onQuickAmountSubmit, onQuickUnitChange, onPresetClick, }) => {
+    return (_jsxs(Popover, { opened: opened, onChange: (nextOpened) => onOpenChange(!disabled && nextOpened), position: "bottom-start", offset: 5, withinPortal: true, children: [_jsx(Popover.Target, { children: _jsx(SegmentButton, { type: "button", size: size, "$iconOnly": true, disabled: disabled, "aria-label": "Open quick date ranges", title: "Open quick date ranges", "data-active": opened, children: _jsx(TriggerIcon, { size: size, children: _jsx(CalendarDaysIcon, {}) }) }) }), _jsx(Popover.Dropdown, { style: {
+                    border: "none",
+                    padding: 0,
+                }, children: _jsx(QuickRangeDropdown, { commonRangeGroups: commonRangeGroups, quickDirection: quickDirection, quickAmount: quickAmount, quickUnit: quickUnit, onQuickDirectionChange: onQuickDirectionChange, onQuickAmountChange: onQuickAmountChange, onQuickAmountSubmit: onQuickAmountSubmit, onQuickUnitChange: onQuickUnitChange, onPresetClick: onPresetClick }) })] }));
+};
+export default QuickRangePopover;

package/dist/SuperDatePicker/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as CommonPresetGroups } from "./CommonPresetGroups";
+export { default as EndpointCalendarDropdown } from "./EndpointCalendarDropdown";
+export { default as EndpointDateInput } from "./EndpointDateInput";
+export { default as EndpointPopover } from "./EndpointPopover";
+export { default as QuickRangeDropdown } from "./QuickRangeDropdown";
+export { default as QuickRangePopover } from "./QuickRangePopover";

package/dist/SuperDatePicker/components/index.js

@@ -0,0 +1,6 @@
+export { default as CommonPresetGroups } from "./CommonPresetGroups";
+export { default as EndpointCalendarDropdown } from "./EndpointCalendarDropdown";
+export { default as EndpointDateInput } from "./EndpointDateInput";
+export { default as EndpointPopover } from "./EndpointPopover";
+export { default as QuickRangeDropdown } from "./QuickRangeDropdown";
+export { default as QuickRangePopover } from "./QuickRangePopover";

package/dist/SuperDatePicker/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./SuperDatePicker";
+export * from "./SuperDatePicker";
+export * from "./SuperDatePicker.types";

package/dist/SuperDatePicker/index.js

@@ -0,0 +1,3 @@
+export { default } from "./SuperDatePicker";
+export * from "./SuperDatePicker";
+export * from "./SuperDatePicker.types";

package/dist/SuperDatePicker/useSuperDatePicker.d.ts

@@ -0,0 +1,32 @@
+import type { MouseEvent } from "react";
+import type { CommonRangeGroupConfig, Endpoint, OpenSegment, QuickDirection, QuickUnit, SuperDatePickerPreset, SuperDatePickerProps, SuperDatePickerValue } from "./SuperDatePicker.types";
+type UseSuperDatePickerOptions = {
+    defaultValue: SuperDatePickerValue;
+    value?: SuperDatePickerValue;
+    onChange: NonNullable<SuperDatePickerProps["onChange"]>;
+    disabled: boolean;
+    min?: Date;
+    max?: Date;
+    utc: boolean;
+    presets?: SuperDatePickerPreset[];
+};
+declare const useSuperDatePicker: ({ defaultValue, value, onChange, disabled, min, max, utc, presets, }: UseSuperDatePickerOptions) => {
+    value: SuperDatePickerValue;
+    openSegment: OpenSegment;
+    quickDirection: QuickDirection;
+    quickAmount: string;
+    quickUnit: QuickUnit;
+    commonRangeGroups: CommonRangeGroupConfig[];
+    handleOpenSegmentChange: (segment: Endpoint | "quick", opened: boolean) => void;
+    handleClear: (event?: MouseEvent) => void;
+    handlePreset: (preset: SuperDatePickerPreset) => void;
+    handleQuickDirectionChange: (nextDirection: QuickDirection) => void;
+    handleQuickAmountChange: (nextAmount: string) => void;
+    handleQuickAmountSubmit: () => void;
+    handleQuickUnitChange: (nextUnit: QuickUnit) => void;
+    handleEndpointChange: (endpoint: Endpoint, nextValue?: string | null) => void;
+    handleCalendarChange: (endpoint: Endpoint, date: Date | null) => void;
+    getEndpointMin: (endpoint: Endpoint) => Date | undefined;
+    getEndpointMax: (endpoint: Endpoint) => Date | undefined;
+};
+export default useSuperDatePicker;

package/dist/SuperDatePicker/useSuperDatePicker.js

@@ -0,0 +1,125 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { DEFAULT_QUICK_AMOUNT, DEFAULT_QUICK_DIRECTION, DEFAULT_QUICK_UNIT, } from "./SuperDatePicker.constants";
+import { calendarDateToMoment, createRange, getAdditionalCommonRangeGroups, getDefaultCommonRangeGroups, parseRangeMoment, resolveNow, serializeMoment, } from "./SuperDatePicker.lib";
+const useSuperDatePicker = ({ defaultValue, value, onChange, disabled, min, max, utc, presets, }) => {
+    const isControlled = useRef(value !== undefined);
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const pickerValue = isControlled.current ? value || {} : uncontrolledValue;
+    const [openSegment, setOpenSegment] = useState(null);
+    const [quickDirection, setQuickDirection] = useState(DEFAULT_QUICK_DIRECTION);
+    const [quickAmount, setQuickAmount] = useState(DEFAULT_QUICK_AMOUNT);
+    const [quickUnit, setQuickUnit] = useState(DEFAULT_QUICK_UNIT);
+    const commonRangeGroups = useMemo(() => presets
+        ? [
+            {
+                label: "Presets",
+                ranges: presets,
+            },
+        ]
+        : [
+            ...getDefaultCommonRangeGroups(utc),
+            ...getAdditionalCommonRangeGroups(utc),
+        ], [presets, utc]);
+    const commitValue = useCallback((nextValue, meta) => {
+        if (!isControlled.current) {
+            setUncontrolledValue(nextValue);
+        }
+        onChange(nextValue, meta);
+    }, [onChange]);
+    const commitPartial = (patch, source) => {
+        commitValue(Object.assign(Object.assign({}, pickerValue), patch), { source });
+    };
+    const commitQuickRange = (direction = quickDirection, amountInput = quickAmount, unit = quickUnit) => {
+        if (disabled)
+            return;
+        const amount = Number(amountInput);
+        if (!Number.isFinite(amount) || amount <= 0)
+            return;
+        const now = resolveNow(utc);
+        const nextValue = direction === "last"
+            ? createRange(now.clone().subtract(amount, unit), now, utc)
+            : createRange(now, now.clone().add(amount, unit), utc);
+        commitValue(nextValue, { source: "apply" });
+    };
+    const handleOpenSegmentChange = (segment, opened) => {
+        setOpenSegment((currentSegment) => {
+            if (opened)
+                return segment;
+            return currentSegment === segment ? null : currentSegment;
+        });
+    };
+    const handleClear = (event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        commitValue({ start: null, end: null }, { source: "clear" });
+        setOpenSegment(null);
+    };
+    const handlePreset = (preset) => {
+        if (disabled)
+            return;
+        const nextValue = preset.getRange();
+        commitValue(nextValue, { source: "preset", preset });
+        setOpenSegment(null);
+    };
+    const handleQuickDirectionChange = (nextDirection) => {
+        setQuickDirection(nextDirection);
+        commitQuickRange(nextDirection);
+    };
+    const handleQuickAmountChange = (nextAmount) => {
+        setQuickAmount(nextAmount);
+        commitQuickRange(quickDirection, nextAmount, quickUnit);
+    };
+    const handleQuickAmountSubmit = () => {
+        commitQuickRange();
+    };
+    const handleQuickUnitChange = (nextUnit) => {
+        setQuickUnit(nextUnit);
+        commitQuickRange(quickDirection, quickAmount, nextUnit);
+    };
+    const handleEndpointChange = (endpoint, nextValue) => {
+        if (disabled)
+            return;
+        commitPartial({ [endpoint]: nextValue }, "apply");
+    };
+    const handleCalendarChange = (endpoint, date) => {
+        if (disabled)
+            return;
+        if (!date) {
+            handleEndpointChange(endpoint, null);
+            return;
+        }
+        handleEndpointChange(endpoint, serializeMoment(calendarDateToMoment(date, utc), utc));
+    };
+    const getEndpointMin = (endpoint) => {
+        var _a;
+        return endpoint === "end"
+            ? ((_a = parseRangeMoment(pickerValue.start, utc)) === null || _a === void 0 ? void 0 : _a.toDate()) || min
+            : min;
+    };
+    const getEndpointMax = (endpoint) => {
+        var _a;
+        return endpoint === "start"
+            ? ((_a = parseRangeMoment(pickerValue.end, utc)) === null || _a === void 0 ? void 0 : _a.toDate()) || max
+            : max;
+    };
+    return {
+        value: pickerValue,
+        openSegment,
+        quickDirection,
+        quickAmount,
+        quickUnit,
+        commonRangeGroups,
+        handleOpenSegmentChange,
+        handleClear,
+        handlePreset,
+        handleQuickDirectionChange,
+        handleQuickAmountChange,
+        handleQuickAmountSubmit,
+        handleQuickUnitChange,
+        handleEndpointChange,
+        handleCalendarChange,
+        getEndpointMin,
+        getEndpointMax,
+    };
+};
+export default useSuperDatePicker;

package/dist/Table/ColumnResizer.d.ts

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

package/dist/Table/ColumnResizer.js

@@ -1,6 +1,5 @@
 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;
@@ -24,22 +23,43 @@ const StyledContainer = styled.div `
     background: ${(props) => props.theme.palette.primary.main};
   }
 `;
-const ColumnResizer = ({ onResize = () => { }, onResizeFinished, column, showOnHover = false, }) => {
+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);
+    };
     return (_jsx(StyledContainer, { className: `resizer col-${column.columnId}`, "data-show-on-hover": showOnHover, onClick: (e) => {
             e.stopPropagation();
             e.nativeEvent.stopImmediatePropagation();
             e.preventDefault();
-        }, onMouseDown: (e) => {
+        }, onPointerDown: (e) => {
             e.stopPropagation();
             e.nativeEvent.stopImmediatePropagation();
             e.preventDefault();
-            resizeHandler({
-                event: e,
-                columnId: column.columnId,
-                columnProps: column,
-                onResize: onResize,
-                onResizeFinished: onResizeFinished,
-            });
+            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);
         } }));
 };
 export default ColumnResizer;

package/dist/Table/TableComponents.js

@@ -8,18 +8,20 @@ export const TBody = styled.div `
   overflow: hidden;
 `;
 export const TR = styled.div `
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
-
-  flex: 1;
+  flex: 0 0 auto;
+  min-width: 100%;
 
   height: ${({ height }) => {
     const customHeight = height ? height + "px" : undefined;
     return customHeight || `${TableDefaults.row.height.normal}px`;
 }};
 
-  border-left: 1px solid ${({ theme }) => theme.palette.divider};
-  border-right: 1px solid ${({ theme }) => theme.palette.divider};
+  box-shadow:
+    inset 1px 0 ${({ theme }) => theme.palette.divider},
+    inset -1px 0 ${({ theme }) => theme.palette.divider};
 
   .row-action {
     visibility: hidden;
@@ -30,7 +32,6 @@ export const TR = styled.div `
   }
 
   &[data-focused="true"] {
-    border: 1px solid transparent;
     outline: 1px solid ${({ theme }) => theme.palette.primary.main};
     outline-offset: -1px;
 
@@ -59,21 +60,18 @@ 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: 1;
+  flex: 0 0 auto;
 
   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};
@@ -110,6 +108,7 @@ export const TH = styled(TD) `
 `;
 export const InnerCellContent = styled.div `
   max-width: 100%;
+  min-width: 0;
 
   white-space: nowrap;
   overflow: hidden;
@@ -165,12 +164,16 @@ export const TreeCellContent = styled.div `
   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;
@@ -180,6 +183,7 @@ export const TableWrapper = styled.div `
   flex-direction: column;
 `;
 export const StyledTable = styled.div `
+  box-sizing: border-box;
   position: relative;
   overflow: hidden;
   display: flex;

package/dist/Table/TableHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import ColumnResizer from "./ColumnResizer";
 import { InnerCellContent, TH, THead, THR } from "./TableComponents";
 import { resolveColumnResize } from "./Utils";
@@ -16,45 +16,61 @@ 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, } = useTable();
+    const { columnState, sortState, setColumnState: updateColumnState, onColumnResize, handleColumnReorder, enableColumnReorder, handleColumnHeaderClick, enableColumnResize, headerRowHeight, enableActionButton, enableSelection, selectionState, disableSelectAll, selectAllRows, clearSelections, compactState, tableLayout, setResizeColumnWidths, } = useTable();
     const [dragColumn, setDragColumn] = useState(null);
     const [dropColumn, setDropColumn] = useState(null);
-    const handleResize = (e) => {
-        const columnId = e.column.columnId;
-        const newWidth = Number(e.newWidth);
+    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);
         updateColumnState((prevColumnState) => {
             const nextColumnState = prevColumnState.map((col) => {
-                if (col.columnId === columnId) {
+                if (col.columnId === column.columnId) {
                     return Object.assign(Object.assign({}, col), { width: newWidth });
                 }
                 return col;
             });
             onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize({
-                column: Object.assign(Object.assign({}, e.column), { width: newWidth }),
+                column: Object.assign(Object.assign({}, 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, 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, style: { width: tableLayout.contentWidth }, children: [enableSelection && (_jsx(TH, { className: `mfui-th column-action`, style: {
                         width: TableDefaults.actionCell.width,
                         minWidth: TableDefaults.actionCell.minWidth,
                         maxWidth: TableDefaults.actionCell.maxWidth,
-                        display: "flex",
+                        flexBasis: TableDefaults.actionCell.width,
+                        flexGrow: 0,
+                        flexShrink: 0,
                         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) => {
@@ -86,14 +102,13 @@ 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: column.width,
+                            width: columnWidth,
                             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: [_jsx(StyledCaption, { style: { flex: 1 }, children: column.caption }), _jsx(StyledCaption, { children: (sortState === null || sortState === void 0 ? void 0 : sortState.dataField) === column.dataField &&
+                            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 &&
                                             (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({
-        defaultFilter: filterState,
+        value: 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) => {