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

package/dist/Table/TableProvider.js

@@ -68,6 +68,69 @@ const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) =
     }
 };
 export const TableContext = createContext(null);
+const expandColumnWidthsToTable = ({ columnWidths, columns, expansionColumns, tableWidth, fixedCellWidth, }) => {
+    const availableWidth = Math.max(tableWidth - fixedCellWidth, 0);
+    const columnWidthTotal = columns.reduce((sum, column) => {
+        return sum + (columnWidths[column.columnId] || 0);
+    }, 0);
+    const remainingWidth = availableWidth - columnWidthTotal;
+    if (remainingWidth <= 0 || columns.length === 0) {
+        return columnWidths;
+    }
+    const targetColumns = expansionColumns.length > 0
+        ? expansionColumns
+        : [columns[columns.length - 1]].filter(Boolean);
+    const widthToAdd = remainingWidth / targetColumns.length;
+    return targetColumns.reduce((widths, column) => (Object.assign(Object.assign({}, widths), { [column.columnId]: (widths[column.columnId] || column.minWidth) + widthToAdd })), columnWidths);
+};
+const getVisibleColumnLayout = ({ columns, tableWidth, fixedCellWidth, resizeColumnWidths, }) => {
+    const visibleColumns = columns.filter((column) => column.visible !== false);
+    const fluidColumns = visibleColumns.filter((column) => typeof column.width !== "number" || column.width <= 0);
+    if (resizeColumnWidths) {
+        const columnWidths = expandColumnWidthsToTable({
+            columnWidths: resizeColumnWidths,
+            columns: visibleColumns,
+            expansionColumns: fluidColumns,
+            tableWidth,
+            fixedCellWidth,
+        });
+        const contentWidth = fixedCellWidth +
+            visibleColumns.reduce((sum, column) => {
+                return sum + (columnWidths[column.columnId] || column.minWidth);
+            }, 0);
+        return {
+            contentWidth: Math.max(tableWidth, contentWidth),
+            columnWidths,
+        };
+    }
+    const fixedColumns = visibleColumns.filter((column) => typeof column.width === "number" && column.width > 0);
+    const fixedWidth = fixedColumns.reduce((sum, column) => sum + column.width, 0);
+    const fluidMinWidth = fluidColumns.reduce((sum, column) => sum + column.minWidth, 0);
+    const availableFluidWidth = Math.max(tableWidth - fixedCellWidth - fixedWidth, fluidMinWidth);
+    const fluidWidth = fluidColumns.length > 0 ? availableFluidWidth / fluidColumns.length : 0;
+    const baseColumnWidths = visibleColumns.reduce((widths, column) => {
+        widths[column.columnId] =
+            typeof column.width === "number" && column.width > 0
+                ? column.width
+                : Math.max(column.minWidth, fluidWidth);
+        return widths;
+    }, {});
+    const columnWidths = expandColumnWidthsToTable({
+        columnWidths: baseColumnWidths,
+        columns: visibleColumns,
+        expansionColumns: fluidColumns,
+        tableWidth,
+        fixedCellWidth,
+    });
+    const contentWidth = fixedCellWidth +
+        visibleColumns.reduce((sum, column) => {
+            return sum + columnWidths[column.columnId];
+        }, 0);
+    return {
+        contentWidth: Math.max(tableWidth, contentWidth),
+        columnWidths,
+    };
+};
 const TableProvider = (_a) => {
     var { children, columns, data, keyField, tableInstanceRef, stateStorage, tableMenuOptions, manualSorting, manualFiltering, manualSearch, manualExport, height, maxHeight, minHeight, focusedRowId, enableColumnResize, enableSorting, compact, totalRecords, onColumnStateChange, onColumnReorder, onColumnHeaderClick, onSort, onRowUpdated, tableElement, headerRowElm, tableDimensions, targetElm, listElm, defaultSelectionState, selectionState, onSelectionChange, defaultFilterState, filterState, onFilterChange, treeOptions, treeMeta, defaultExpandedKeys, expandedKeys, onExpandedChange } = _a, props = __rest(_a, ["children", "columns", "data", "keyField", "tableInstanceRef", "stateStorage", "tableMenuOptions", "manualSorting", "manualFiltering", "manualSearch", "manualExport", "height", "maxHeight", "minHeight", "focusedRowId", "enableColumnResize", "enableSorting", "compact", "totalRecords", "onColumnStateChange", "onColumnReorder", "onColumnHeaderClick", "onSort", "onRowUpdated", "tableElement", "headerRowElm", "tableDimensions", "targetElm", "listElm", "defaultSelectionState", "selectionState", "onSelectionChange", "defaultFilterState", "filterState", "onFilterChange", "treeOptions", "treeMeta", "defaultExpandedKeys", "expandedKeys", "onExpandedChange"]);
     const _treeOptions = treeOptions || DEFAULT_TREE_OPTIONS;
@@ -105,6 +168,7 @@ const TableProvider = (_a) => {
     const { columnState: savedColumnState, selectionState: savedSelectionState, sortState: savedSortState, searchState: savedSearchState, filterState: savedFilterState, expandedKeys: savedExpandedKeys, } = savedTableState || {};
     const [compactState, setCompactState] = useState(compact || false);
     const [columnState, _setColumnState] = useState(syncColumnState(_columns, savedColumnState));
+    const [resizeColumnWidths, setResizeColumnWidths] = useState(null);
     const columnStateRef = useRef(columnState);
     useEffect(() => {
         columnStateRef.current = columnState;
@@ -142,6 +206,19 @@ const TableProvider = (_a) => {
             return Object.assign(Object.assign({}, prev), { selectedRowKeys });
         });
     };
+    const tableLayout = useMemo(() => getVisibleColumnLayout({
+        columns: columnState,
+        tableWidth: tableDimensions.width,
+        fixedCellWidth: (props.enableSelection ? TableDefaults.actionCell.width : 0) +
+            (props.enableActionButton ? TableDefaults.actionCell.width : 0),
+        resizeColumnWidths,
+    }), [
+        columnState,
+        tableDimensions.width,
+        props.enableSelection,
+        props.enableActionButton,
+        resizeColumnWidths,
+    ]);
     const getCalculatedSelectionTotal = () => {
         return calculateSelectionTotal({
             selectedRowKeys,
@@ -383,7 +460,6 @@ const TableProvider = (_a) => {
         };
     };
     const rowMatchesRule = (row, rule) => {
-        var _a, _b, _c, _d;
         const column = columnState.find((col) => col.dataField === rule.dataField);
         const { value, operator, dataField } = rule;
         if (operator.value === "isEmpty") {
@@ -395,6 +471,15 @@ const TableProvider = (_a) => {
         if (!value || value.length === 0) {
             return true;
         }
+        if ((operator.value === "between" || operator.value === "notBetween") &&
+            (value[0] == null ||
+                value[0] === "" ||
+                value[1] == null ||
+                value[1] === "")) {
+            return true;
+        }
+        const fieldText = row[dataField] == null ? "" : row[dataField].toString().toLowerCase();
+        const ruleText = value[0] == null ? "" : value[0].toString().toLowerCase();
         switch (operator.value) {
             case "=":
                 if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
@@ -463,9 +548,9 @@ const TableProvider = (_a) => {
                 return (row[dataField] < value[0] ||
                     row[dataField] > value[1]);
             case "contains":
-                return (_a = row[dataField]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes((_b = value[0]) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase());
+                return fieldText.includes(ruleText);
             case "doesNotContain":
-                return !((_c = row[dataField]) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes((_d = value[0]) === null || _d === void 0 ? void 0 : _d.toString().toLowerCase()));
+                return !fieldText.includes(ruleText);
             case "in":
                 if (!Array.isArray(value) || value.length === 0) {
                     return true;
@@ -801,7 +886,9 @@ const TableProvider = (_a) => {
             },
         };
     }
-    return (_jsx(TableContext.Provider, { value: Object.assign({ columnState, setColumnState: updateColumnState, sortState, searchState: search, totalRecords,
+    return (_jsx(TableContext.Provider, { value: Object.assign({ columnState, setColumnState: updateColumnState, tableLayout,
+            setResizeColumnWidths,
+            sortState, searchState: search, totalRecords,
             keyField,
             handleColumnReorder,
             handleColumnHeaderClick, selectionState: _selectionState, selectRow,

package/dist/Table/TableRow.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon, Maximize2Icon } from "lucide-react";
-import ColumnResizer from "./ColumnResizer";
 import { InnerCellContent, TD, TR, TreeCellContent, TreeCellWrapper, TreeChevronButton, TreeChevronPlaceholder, TreeIndentSpacer, } from "./TableComponents";
 import useTable from "./useTable";
 import ActionCell from "./ActionCell";
@@ -8,21 +7,25 @@ import ActionButton from "./ActionButton";
 import CheckBox from "../CheckBox";
 import { LoadingCellIndicator } from "./LoadingCellIndicator";
 const TableRow = ({ rowData, loading, rowStyle }) => {
-    const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, isRowFocused, onRowUpdated, treeOptions, firstVisibleDataField, isRowExpanded, toggleRowExpanded, } = useTable();
+    const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, isRowFocused, onRowUpdated, treeOptions, firstVisibleDataField, isRowExpanded, toggleRowExpanded, tableLayout, } = useTable();
     const selected = isRowSelected(rowData);
     const focused = isRowFocused(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, "data-focused": focused, children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action row-selection-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) => {
+    return (_jsxs(TR, { className: "mfui-tr", "data-key": rowData.__key, "data-selected": selected, "data-focused": focused, style: Object.assign(Object.assign({}, rowStyle), { width: tableLayout.contentWidth }), children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action row-selection-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) => {
                 var _a;
                 if (column.visible === false)
                     return null;
                 if (loading) {
+                    const columnWidth = tableLayout.columnWidths[column.columnId] || column.minWidth;
                     return (_jsx(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, style: {
-                            width: column.width,
+                            width: columnWidth,
                             minWidth: column.minWidth,
-                            flex: column.width ? "0 0 auto" : "1",
+                            maxWidth: column.maxWidth,
+                            flexBasis: columnWidth,
+                            flexGrow: 0,
+                            flexShrink: 0,
                         }, children: _jsx(LoadingCellIndicator, {}) }, index));
                 }
                 const cellBody = column.render
@@ -31,14 +34,18 @@ const TableRow = ({ rowData, loading, rowStyle }) => {
                 const isTreeColumn = (treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.enabled) === true &&
                     column.dataField === firstVisibleDataField;
                 const expanded = isTreeColumn ? isRowExpanded(rowData) : false;
-                return (_jsxs(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, "data-tree-cell": isTreeColumn ? "true" : undefined, style: {
-                        width: column.width,
+                const columnWidth = tableLayout.columnWidths[column.columnId] || column.minWidth;
+                return (_jsx(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, "data-tree-cell": isTreeColumn ? "true" : undefined, style: {
+                        width: columnWidth,
                         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: isTreeColumn ? (_jsxs(TreeCellWrapper, { children: [_jsx(TreeIndentSpacer, { "$level": (_a = rowData.__level) !== null && _a !== void 0 ? _a : 0, "$indentPx": treeOptions.indentPx }), rowData.__hasChildren ? (_jsx(TreeChevronButton, { type: "button", "$expanded": expanded, onClick: (e) => {
-                                            e.stopPropagation();
-                                            toggleRowExpanded(rowData);
-                                        }, "aria-label": expanded ? "Collapse row" : "Expand row", "aria-expanded": expanded, children: _jsx(ChevronRightIcon, { size: 14 }) })) : (_jsx(TreeChevronPlaceholder, {})), _jsx(TreeCellContent, { children: cellBody })] })) : (cellBody) })] }, index));
+                        maxWidth: column.maxWidth,
+                        flexBasis: columnWidth,
+                        flexGrow: 0,
+                        flexShrink: 0,
+                    }, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: isTreeColumn ? (_jsxs(TreeCellWrapper, { children: [_jsx(TreeIndentSpacer, { "$level": (_a = rowData.__level) !== null && _a !== void 0 ? _a : 0, "$indentPx": treeOptions.indentPx }), rowData.__hasChildren ? (_jsx(TreeChevronButton, { type: "button", "$expanded": expanded, onClick: (e) => {
+                                        e.stopPropagation();
+                                        toggleRowExpanded(rowData);
+                                    }, "aria-label": expanded ? "Collapse row" : "Expand row", "aria-expanded": expanded, children: _jsx(ChevronRightIcon, { size: 14 }) })) : (_jsx(TreeChevronPlaceholder, {})), _jsx(TreeCellContent, { children: cellBody })] })) : (cellBody) }) }, index));
             })] }));
 };
 export default TableRow;

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

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

package/dist/Table/Utils/index.js

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

package/dist/Table/types.d.ts

@@ -93,26 +93,7 @@ export type TableState = {
     searchState?: string;
     expandedKeys?: ExpandedKeysState;
 };
-export interface onResizeFinishedProps {
-    column: ColumnState;
-    columnId?: string;
-    targetColumn: Element | null;
-    newWidth: string | null;
-}
-export interface onResizeProps {
-    columns: {
-        dataField: string;
-        width: number;
-    }[];
-}
 export type ColumnStateUpdate = ColumnState[] | ((prevColumnState: ColumnState[]) => ColumnState[]);
-export interface ResizeHandlerProps {
-    event: React.MouseEvent<HTMLDivElement>;
-    columnId?: string;
-    columnProps: ColumnState;
-    onResize: (e: onResizeProps) => void;
-    onResizeFinished?: (e: onResizeFinishedProps) => void;
-}
 export interface TableHeaderProps {
     headerRowHeight?: number;
     enableColumnResize?: boolean;
@@ -131,9 +112,15 @@ export type TableDimensions = {
     width: number;
     height: number;
 };
+export type TableLayout = {
+    contentWidth: number;
+    columnWidths: Record<string, number>;
+};
 export type TableContextType = {
     columnState: ColumnState[];
     setColumnState: (columnStateUpdate: ColumnStateUpdate) => void;
+    tableLayout: TableLayout;
+    setResizeColumnWidths: (widths: Record<string, number> | null) => void;
     sortState?: SortState | null;
     filterState?: Query | null;
     searchState?: string | null;

package/dist/index.d.ts

@@ -14,6 +14,8 @@ export * from "./Alert";
 export * from "./Kanban";
 export { default as IconButton } from "./IconButton";
 export { default as DateInput } from "./DateInput";
+export { default as SuperDatePicker } from "./SuperDatePicker";
+export type { SuperDatePickerChangeMeta, SuperDatePickerProps, SuperDatePickerPreset, SuperDatePickerValue, } from "./SuperDatePicker";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";
 export type { ActionMenuOptions, TextAreaInputProps } from "./TextAreaInput";

package/dist/index.js

@@ -9,6 +9,7 @@ export * from "./Alert";
 export * from "./Kanban";
 export { default as IconButton } from "./IconButton";
 export { default as DateInput } from "./DateInput";
+export { default as SuperDatePicker } from "./SuperDatePicker";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";
 export { default as TagBox } from "./TagBox";

package/dist/theme/variants.js

@@ -79,6 +79,7 @@ const lightVariant = {
             alt: "#ededed",
             secondary: "#f0f0f0",
             gradient: "linear-gradient(#FFFFFF 0%, #ccdcf9 50%)",
+            subtle: "#ededed",
         },
         menu: {
             background: "#FFF",
@@ -242,6 +243,7 @@ const darkVariant = merge(lightVariant, {
             alt: "#1e1e1e",
             secondary: "#303030",
             gradient: "linear-gradient(#333333 0%, #1e1e1e 50%)",
+            subtle: "#333333",
         },
         menu: {
             background: "#222222",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.8.1-dev.2",
+  "version": "1.8.1-dev.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -40,22 +40,18 @@
     "@radix-ui/react-switch": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tabler/icons-react": "^3.11.0",
-    "@tiptap/extension-color": "^2.9.1",
-    "@tiptap/extension-focus": "^2.5.9",
-    "@tiptap/extension-horizontal-rule": "^2.5.9",
-    "@tiptap/extension-image": "^2.5.9",
-    "@tiptap/extension-placeholder": "^2.5.9",
-    "@tiptap/extension-table": "^2.5.8",
-    "@tiptap/extension-table-cell": "^2.5.8",
-    "@tiptap/extension-table-header": "^2.5.8",
-    "@tiptap/extension-table-row": "^2.5.8",
-    "@tiptap/extension-text-align": "^2.5.8",
-    "@tiptap/extension-text-style": "^2.9.1",
-    "@tiptap/extension-underline": "^2.5.8",
-    "@tiptap/pm": "^2.5.8",
-    "@tiptap/react": "^2.5.8",
-    "@tiptap/starter-kit": "^2.5.8",
-    "@tiptap/suggestion": "^2.5.9",
+    "@tiptap/core": "3.22.4",
+    "@tiptap/extension-color": "3.22.4",
+    "@tiptap/extension-horizontal-rule": "3.22.4",
+    "@tiptap/extension-image": "3.22.4",
+    "@tiptap/extension-table": "3.22.4",
+    "@tiptap/extension-text-align": "3.22.4",
+    "@tiptap/extension-text-style": "3.22.4",
+    "@tiptap/extensions": "3.22.4",
+    "@tiptap/pm": "3.22.4",
+    "@tiptap/react": "3.22.4",
+    "@tiptap/starter-kit": "3.22.4",
+    "@tiptap/suggestion": "3.22.4",
     "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
     "d3-scale": "^4.0.2",
@@ -88,11 +84,19 @@
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
     "@types/overlayscrollbars": "^1.12.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/react-window": "^1.8.8",
     "@types/spark-md5": "^3.0.4",
     "chokidar-cli": "^3.0.0",
     "typescript": "^5.5.4",
     "yalc": "^1.0.0-pre.53"
+  },
+  "resolutions": {
+    "@types/react": "19.0.8",
+    "prosemirror-model": "1.25.4",
+    "prosemirror-state": "1.4.4",
+    "prosemirror-transform": "1.12.0",
+    "prosemirror-view": "1.41.8"
   }
 }