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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist/Calendar/Calendar.d.ts +4 -1
  2. package/dist/Calendar/Calendar.js +126 -50
  3. package/dist/Calendar/CalendarStyles.d.ts +3 -2
  4. package/dist/Calendar/CalendarStyles.js +62 -23
  5. package/dist/Calendar/calendarHelpers.d.ts +1 -1
  6. package/dist/CheckBox/CheckBox.js +35 -4
  7. package/dist/DropDownMenu/DropDownMenu.js +25 -15
  8. package/dist/DropDownMenu/components/MenuComponent.js +6 -1
  9. package/dist/DropDownMenu/components/MenuItem.js +6 -0
  10. package/dist/DropDownMenu/components/MenuItemList.d.ts +2 -0
  11. package/dist/DropDownMenu/components/MenuItemList.js +94 -13
  12. package/dist/DropDownMenu/components/StyledContent.js +1 -2
  13. package/dist/DropDownMenu/types.d.ts +1 -0
  14. package/dist/FileViewer/viewers/ImageViewer.js +75 -18
  15. package/dist/MonolithUIProvider/MonolithUIProvider.d.ts +1 -0
  16. package/dist/QueryFilter/QueryFilter.constants.d.ts +134 -0
  17. package/dist/QueryFilter/QueryFilter.constants.js +39 -0
  18. package/dist/QueryFilter/QueryFilter.d.ts +1 -1
  19. package/dist/QueryFilter/QueryFilter.js +3 -303
  20. package/dist/QueryFilter/QueryFilter.lib.d.ts +14 -0
  21. package/dist/QueryFilter/QueryFilter.lib.js +84 -0
  22. package/dist/QueryFilter/QueryFilter.styled.d.ts +89 -0
  23. package/dist/QueryFilter/QueryFilter.styled.js +184 -0
  24. package/dist/QueryFilter/{types.d.ts → QueryFilter.types.d.ts} +11 -2
  25. package/dist/QueryFilter/components/MultiSelectEditor.d.ts +7 -0
  26. package/dist/QueryFilter/components/MultiSelectEditor.js +44 -0
  27. package/dist/QueryFilter/components/RuleChip.d.ts +8 -0
  28. package/dist/QueryFilter/components/RuleChip.js +37 -0
  29. package/dist/QueryFilter/components/Rules.d.ts +11 -0
  30. package/dist/QueryFilter/components/Rules.js +41 -0
  31. package/dist/QueryFilter/components/UnavailableRuleChip.d.ts +5 -0
  32. package/dist/QueryFilter/components/UnavailableRuleChip.js +7 -0
  33. package/dist/QueryFilter/components/ValueEditor.d.ts +7 -0
  34. package/dist/QueryFilter/components/ValueEditor.js +45 -0
  35. package/dist/QueryFilter/components/ValueSelector.d.ts +7 -0
  36. package/dist/QueryFilter/components/ValueSelector.js +34 -0
  37. package/dist/QueryFilter/components/index.d.ts +6 -0
  38. package/dist/QueryFilter/components/index.js +6 -0
  39. package/dist/QueryFilter/index.d.ts +3 -2
  40. package/dist/QueryFilter/index.js +3 -2
  41. package/dist/QueryFilter/useQueryFilter.d.ts +1 -1
  42. package/dist/QueryFilter/useQueryFilter.js +23 -19
  43. package/dist/RichTextEditor/Extensions/getTiptapExtensions.js +5 -15
  44. package/dist/RichTextEditor/Plugins/ImageActionsPlugin.d.ts +3 -0
  45. package/dist/RichTextEditor/Plugins/ImageActionsPlugin.js +241 -0
  46. package/dist/RichTextEditor/Plugins/UploadImagesPlugin.d.ts +15 -0
  47. package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js +115 -51
  48. package/dist/RichTextEditor/Plugins/index.d.ts +1 -0
  49. package/dist/RichTextEditor/Plugins/index.js +1 -0
  50. package/dist/RichTextEditor/RichTextEditor.d.ts +3 -2
  51. package/dist/RichTextEditor/RichTextEditor.js +309 -35
  52. package/dist/RichTextEditor/Toolbar/Toolbar.js +14 -2
  53. package/dist/SuperDatePicker/SuperDatePicker.constants.d.ts +24 -0
  54. package/dist/SuperDatePicker/SuperDatePicker.constants.js +30 -0
  55. package/dist/SuperDatePicker/SuperDatePicker.d.ts +3 -0
  56. package/dist/SuperDatePicker/SuperDatePicker.js +31 -0
  57. package/dist/SuperDatePicker/SuperDatePicker.lib.d.ts +17 -0
  58. package/dist/SuperDatePicker/SuperDatePicker.lib.js +206 -0
  59. package/dist/SuperDatePicker/SuperDatePicker.styled.d.ts +60 -0
  60. package/dist/SuperDatePicker/SuperDatePicker.styled.js +256 -0
  61. package/dist/SuperDatePicker/SuperDatePicker.types.d.ts +48 -0
  62. package/dist/SuperDatePicker/SuperDatePicker.types.js +1 -0
  63. package/dist/SuperDatePicker/components/CommonPresetGroups.d.ts +7 -0
  64. package/dist/SuperDatePicker/components/CommonPresetGroups.js +6 -0
  65. package/dist/SuperDatePicker/components/EndpointCalendarDropdown.d.ts +10 -0
  66. package/dist/SuperDatePicker/components/EndpointCalendarDropdown.js +9 -0
  67. package/dist/SuperDatePicker/components/EndpointDateInput.d.ts +16 -0
  68. package/dist/SuperDatePicker/components/EndpointDateInput.js +26 -0
  69. package/dist/SuperDatePicker/components/EndpointPopover.d.ts +18 -0
  70. package/dist/SuperDatePicker/components/EndpointPopover.js +11 -0
  71. package/dist/SuperDatePicker/components/QuickRangeDropdown.d.ts +14 -0
  72. package/dist/SuperDatePicker/components/QuickRangeDropdown.js +19 -0
  73. package/dist/SuperDatePicker/components/QuickRangePopover.d.ts +18 -0
  74. package/dist/SuperDatePicker/components/QuickRangePopover.js +12 -0
  75. package/dist/SuperDatePicker/components/index.d.ts +6 -0
  76. package/dist/SuperDatePicker/components/index.js +6 -0
  77. package/dist/SuperDatePicker/index.d.ts +3 -0
  78. package/dist/SuperDatePicker/index.js +3 -0
  79. package/dist/SuperDatePicker/useSuperDatePicker.d.ts +32 -0
  80. package/dist/SuperDatePicker/useSuperDatePicker.js +125 -0
  81. package/dist/Table/ColumnResizer.d.ts +6 -9
  82. package/dist/Table/ColumnResizer.js +30 -10
  83. package/dist/Table/TableComponents.js +14 -10
  84. package/dist/Table/TableHeader.js +31 -16
  85. package/dist/Table/TableMenu/TableMenu.js +1 -1
  86. package/dist/Table/TableProvider.js +91 -4
  87. package/dist/Table/TableRow.js +19 -12
  88. package/dist/Table/Utils/index.d.ts +0 -1
  89. package/dist/Table/Utils/index.js +0 -1
  90. package/dist/Table/types.d.ts +6 -19
  91. package/dist/index.d.ts +2 -0
  92. package/dist/index.js +1 -0
  93. package/dist/theme/variants.js +2 -0
  94. package/package.json +22 -18
  95. package/dist/QueryFilter/DefaultOperators.d.ts +0 -76
  96. package/dist/QueryFilter/DefaultOperators.js +0 -21
  97. package/dist/Table/Utils/resizeHandler.d.ts +0 -3
  98. package/dist/Table/Utils/resizeHandler.js +0 -84
  99. /package/dist/QueryFilter/{types.js → QueryFilter.types.js} +0 -0
@@ -68,6 +68,69 @@ const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) =
68
68
  }
69
69
  };
70
70
  export const TableContext = createContext(null);
71
+ const expandColumnWidthsToTable = ({ columnWidths, columns, expansionColumns, tableWidth, fixedCellWidth, }) => {
72
+ const availableWidth = Math.max(tableWidth - fixedCellWidth, 0);
73
+ const columnWidthTotal = columns.reduce((sum, column) => {
74
+ return sum + (columnWidths[column.columnId] || 0);
75
+ }, 0);
76
+ const remainingWidth = availableWidth - columnWidthTotal;
77
+ if (remainingWidth <= 0 || columns.length === 0) {
78
+ return columnWidths;
79
+ }
80
+ const targetColumns = expansionColumns.length > 0
81
+ ? expansionColumns
82
+ : [columns[columns.length - 1]].filter(Boolean);
83
+ const widthToAdd = remainingWidth / targetColumns.length;
84
+ return targetColumns.reduce((widths, column) => (Object.assign(Object.assign({}, widths), { [column.columnId]: (widths[column.columnId] || column.minWidth) + widthToAdd })), columnWidths);
85
+ };
86
+ const getVisibleColumnLayout = ({ columns, tableWidth, fixedCellWidth, resizeColumnWidths, }) => {
87
+ const visibleColumns = columns.filter((column) => column.visible !== false);
88
+ const fluidColumns = visibleColumns.filter((column) => typeof column.width !== "number" || column.width <= 0);
89
+ if (resizeColumnWidths) {
90
+ const columnWidths = expandColumnWidthsToTable({
91
+ columnWidths: resizeColumnWidths,
92
+ columns: visibleColumns,
93
+ expansionColumns: fluidColumns,
94
+ tableWidth,
95
+ fixedCellWidth,
96
+ });
97
+ const contentWidth = fixedCellWidth +
98
+ visibleColumns.reduce((sum, column) => {
99
+ return sum + (columnWidths[column.columnId] || column.minWidth);
100
+ }, 0);
101
+ return {
102
+ contentWidth: Math.max(tableWidth, contentWidth),
103
+ columnWidths,
104
+ };
105
+ }
106
+ const fixedColumns = visibleColumns.filter((column) => typeof column.width === "number" && column.width > 0);
107
+ const fixedWidth = fixedColumns.reduce((sum, column) => sum + column.width, 0);
108
+ const fluidMinWidth = fluidColumns.reduce((sum, column) => sum + column.minWidth, 0);
109
+ const availableFluidWidth = Math.max(tableWidth - fixedCellWidth - fixedWidth, fluidMinWidth);
110
+ const fluidWidth = fluidColumns.length > 0 ? availableFluidWidth / fluidColumns.length : 0;
111
+ const baseColumnWidths = visibleColumns.reduce((widths, column) => {
112
+ widths[column.columnId] =
113
+ typeof column.width === "number" && column.width > 0
114
+ ? column.width
115
+ : Math.max(column.minWidth, fluidWidth);
116
+ return widths;
117
+ }, {});
118
+ const columnWidths = expandColumnWidthsToTable({
119
+ columnWidths: baseColumnWidths,
120
+ columns: visibleColumns,
121
+ expansionColumns: fluidColumns,
122
+ tableWidth,
123
+ fixedCellWidth,
124
+ });
125
+ const contentWidth = fixedCellWidth +
126
+ visibleColumns.reduce((sum, column) => {
127
+ return sum + columnWidths[column.columnId];
128
+ }, 0);
129
+ return {
130
+ contentWidth: Math.max(tableWidth, contentWidth),
131
+ columnWidths,
132
+ };
133
+ };
71
134
  const TableProvider = (_a) => {
72
135
  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"]);
73
136
  const _treeOptions = treeOptions || DEFAULT_TREE_OPTIONS;
@@ -105,6 +168,7 @@ const TableProvider = (_a) => {
105
168
  const { columnState: savedColumnState, selectionState: savedSelectionState, sortState: savedSortState, searchState: savedSearchState, filterState: savedFilterState, expandedKeys: savedExpandedKeys, } = savedTableState || {};
106
169
  const [compactState, setCompactState] = useState(compact || false);
107
170
  const [columnState, _setColumnState] = useState(syncColumnState(_columns, savedColumnState));
171
+ const [resizeColumnWidths, setResizeColumnWidths] = useState(null);
108
172
  const columnStateRef = useRef(columnState);
109
173
  useEffect(() => {
110
174
  columnStateRef.current = columnState;
@@ -142,6 +206,19 @@ const TableProvider = (_a) => {
142
206
  return Object.assign(Object.assign({}, prev), { selectedRowKeys });
143
207
  });
144
208
  };
209
+ const tableLayout = useMemo(() => getVisibleColumnLayout({
210
+ columns: columnState,
211
+ tableWidth: tableDimensions.width,
212
+ fixedCellWidth: (props.enableSelection ? TableDefaults.actionCell.width : 0) +
213
+ (props.enableActionButton ? TableDefaults.actionCell.width : 0),
214
+ resizeColumnWidths,
215
+ }), [
216
+ columnState,
217
+ tableDimensions.width,
218
+ props.enableSelection,
219
+ props.enableActionButton,
220
+ resizeColumnWidths,
221
+ ]);
145
222
  const getCalculatedSelectionTotal = () => {
146
223
  return calculateSelectionTotal({
147
224
  selectedRowKeys,
@@ -383,7 +460,6 @@ const TableProvider = (_a) => {
383
460
  };
384
461
  };
385
462
  const rowMatchesRule = (row, rule) => {
386
- var _a, _b, _c, _d;
387
463
  const column = columnState.find((col) => col.dataField === rule.dataField);
388
464
  const { value, operator, dataField } = rule;
389
465
  if (operator.value === "isEmpty") {
@@ -395,6 +471,15 @@ const TableProvider = (_a) => {
395
471
  if (!value || value.length === 0) {
396
472
  return true;
397
473
  }
474
+ if ((operator.value === "between" || operator.value === "notBetween") &&
475
+ (value[0] == null ||
476
+ value[0] === "" ||
477
+ value[1] == null ||
478
+ value[1] === "")) {
479
+ return true;
480
+ }
481
+ const fieldText = row[dataField] == null ? "" : row[dataField].toString().toLowerCase();
482
+ const ruleText = value[0] == null ? "" : value[0].toString().toLowerCase();
398
483
  switch (operator.value) {
399
484
  case "=":
400
485
  if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
@@ -463,9 +548,9 @@ const TableProvider = (_a) => {
463
548
  return (row[dataField] < value[0] ||
464
549
  row[dataField] > value[1]);
465
550
  case "contains":
466
- 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());
551
+ return fieldText.includes(ruleText);
467
552
  case "doesNotContain":
468
- 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()));
553
+ return !fieldText.includes(ruleText);
469
554
  case "in":
470
555
  if (!Array.isArray(value) || value.length === 0) {
471
556
  return true;
@@ -801,7 +886,9 @@ const TableProvider = (_a) => {
801
886
  },
802
887
  };
803
888
  }
804
- return (_jsx(TableContext.Provider, { value: Object.assign({ columnState, setColumnState: updateColumnState, sortState, searchState: search, totalRecords,
889
+ return (_jsx(TableContext.Provider, { value: Object.assign({ columnState, setColumnState: updateColumnState, tableLayout,
890
+ setResizeColumnWidths,
891
+ sortState, searchState: search, totalRecords,
805
892
  keyField,
806
893
  handleColumnReorder,
807
894
  handleColumnHeaderClick, selectionState: _selectionState, selectRow,
@@ -1,6 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { ChevronRightIcon, Maximize2Icon } from "lucide-react";
3
- import ColumnResizer from "./ColumnResizer";
4
3
  import { InnerCellContent, TD, TR, TreeCellContent, TreeCellWrapper, TreeChevronButton, TreeChevronPlaceholder, TreeIndentSpacer, } from "./TableComponents";
5
4
  import useTable from "./useTable";
6
5
  import ActionCell from "./ActionCell";
@@ -8,21 +7,25 @@ import ActionButton from "./ActionButton";
8
7
  import CheckBox from "../CheckBox";
9
8
  import { LoadingCellIndicator } from "./LoadingCellIndicator";
10
9
  const TableRow = ({ rowData, loading, rowStyle }) => {
11
- const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, isRowFocused, onRowUpdated, treeOptions, firstVisibleDataField, isRowExpanded, toggleRowExpanded, } = useTable();
10
+ const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, isRowFocused, onRowUpdated, treeOptions, firstVisibleDataField, isRowExpanded, toggleRowExpanded, tableLayout, } = useTable();
12
11
  const selected = isRowSelected(rowData);
13
12
  const focused = isRowFocused(rowData);
14
13
  const handleSelectionChange = (e) => {
15
14
  e === true ? selectRow(rowData) : deselectRow(rowData);
16
15
  };
17
- 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) => {
16
+ 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) => {
18
17
  var _a;
19
18
  if (column.visible === false)
20
19
  return null;
21
20
  if (loading) {
21
+ const columnWidth = tableLayout.columnWidths[column.columnId] || column.minWidth;
22
22
  return (_jsx(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, style: {
23
- width: column.width,
23
+ width: columnWidth,
24
24
  minWidth: column.minWidth,
25
- flex: column.width ? "0 0 auto" : "1",
25
+ maxWidth: column.maxWidth,
26
+ flexBasis: columnWidth,
27
+ flexGrow: 0,
28
+ flexShrink: 0,
26
29
  }, children: _jsx(LoadingCellIndicator, {}) }, index));
27
30
  }
28
31
  const cellBody = column.render
@@ -31,14 +34,18 @@ const TableRow = ({ rowData, loading, rowStyle }) => {
31
34
  const isTreeColumn = (treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.enabled) === true &&
32
35
  column.dataField === firstVisibleDataField;
33
36
  const expanded = isTreeColumn ? isRowExpanded(rowData) : false;
34
- return (_jsxs(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, "data-tree-cell": isTreeColumn ? "true" : undefined, style: {
35
- width: column.width,
37
+ const columnWidth = tableLayout.columnWidths[column.columnId] || column.minWidth;
38
+ return (_jsx(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, "data-tree-cell": isTreeColumn ? "true" : undefined, style: {
39
+ width: columnWidth,
36
40
  minWidth: column.minWidth,
37
- flex: column.width ? "0 0 auto" : "1",
38
- }, 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) => {
39
- e.stopPropagation();
40
- toggleRowExpanded(rowData);
41
- }, "aria-label": expanded ? "Collapse row" : "Expand row", "aria-expanded": expanded, children: _jsx(ChevronRightIcon, { size: 14 }) })) : (_jsx(TreeChevronPlaceholder, {})), _jsx(TreeCellContent, { children: cellBody })] })) : (cellBody) })] }, index));
41
+ maxWidth: column.maxWidth,
42
+ flexBasis: columnWidth,
43
+ flexGrow: 0,
44
+ flexShrink: 0,
45
+ }, 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) => {
46
+ e.stopPropagation();
47
+ toggleRowExpanded(rowData);
48
+ }, "aria-label": expanded ? "Collapse row" : "Expand row", "aria-expanded": expanded, children: _jsx(ChevronRightIcon, { size: 14 }) })) : (_jsx(TreeChevronPlaceholder, {})), _jsx(TreeCellContent, { children: cellBody })] })) : (cellBody) }) }, index));
42
49
  })] }));
43
50
  };
44
51
  export default TableRow;
@@ -1,4 +1,3 @@
1
1
  export { default as resolveColumnResize } from "./resolveColumnResize";
2
2
  export { default as syncColumnState } from "./syncColumnState";
3
- export { default as resizeHandler } from "./resizeHandler";
4
3
  export { exportTableToExcel } from "./tableExport";
@@ -1,4 +1,3 @@
1
1
  export { default as resolveColumnResize } from "./resolveColumnResize";
2
2
  export { default as syncColumnState } from "./syncColumnState";
3
- export { default as resizeHandler } from "./resizeHandler";
4
3
  export { exportTableToExcel } from "./tableExport";
@@ -93,26 +93,7 @@ export type TableState = {
93
93
  searchState?: string;
94
94
  expandedKeys?: ExpandedKeysState;
95
95
  };
96
- export interface onResizeFinishedProps {
97
- column: ColumnState;
98
- columnId?: string;
99
- targetColumn: Element | null;
100
- newWidth: string | null;
101
- }
102
- export interface onResizeProps {
103
- columns: {
104
- dataField: string;
105
- width: number;
106
- }[];
107
- }
108
96
  export type ColumnStateUpdate = ColumnState[] | ((prevColumnState: ColumnState[]) => ColumnState[]);
109
- export interface ResizeHandlerProps {
110
- event: React.MouseEvent<HTMLDivElement>;
111
- columnId?: string;
112
- columnProps: ColumnState;
113
- onResize: (e: onResizeProps) => void;
114
- onResizeFinished?: (e: onResizeFinishedProps) => void;
115
- }
116
97
  export interface TableHeaderProps {
117
98
  headerRowHeight?: number;
118
99
  enableColumnResize?: boolean;
@@ -131,9 +112,15 @@ export type TableDimensions = {
131
112
  width: number;
132
113
  height: number;
133
114
  };
115
+ export type TableLayout = {
116
+ contentWidth: number;
117
+ columnWidths: Record<string, number>;
118
+ };
134
119
  export type TableContextType = {
135
120
  columnState: ColumnState[];
136
121
  setColumnState: (columnStateUpdate: ColumnStateUpdate) => void;
122
+ tableLayout: TableLayout;
123
+ setResizeColumnWidths: (widths: Record<string, number> | null) => void;
137
124
  sortState?: SortState | null;
138
125
  filterState?: Query | null;
139
126
  searchState?: string | null;
package/dist/index.d.ts CHANGED
@@ -14,6 +14,8 @@ export * from "./Alert";
14
14
  export * from "./Kanban";
15
15
  export { default as IconButton } from "./IconButton";
16
16
  export { default as DateInput } from "./DateInput";
17
+ export { default as SuperDatePicker } from "./SuperDatePicker";
18
+ export type { SuperDatePickerChangeMeta, SuperDatePickerProps, SuperDatePickerPreset, SuperDatePickerValue, } from "./SuperDatePicker";
17
19
  export { default as TextArea } from "./TextArea";
18
20
  export { default as TextAreaInput } from "./TextAreaInput";
19
21
  export type { ActionMenuOptions, TextAreaInputProps } from "./TextAreaInput";
package/dist/index.js CHANGED
@@ -9,6 +9,7 @@ export * from "./Alert";
9
9
  export * from "./Kanban";
10
10
  export { default as IconButton } from "./IconButton";
11
11
  export { default as DateInput } from "./DateInput";
12
+ export { default as SuperDatePicker } from "./SuperDatePicker";
12
13
  export { default as TextArea } from "./TextArea";
13
14
  export { default as TextAreaInput } from "./TextAreaInput";
14
15
  export { default as TagBox } from "./TagBox";
@@ -79,6 +79,7 @@ const lightVariant = {
79
79
  alt: "#ededed",
80
80
  secondary: "#f0f0f0",
81
81
  gradient: "linear-gradient(#FFFFFF 0%, #ccdcf9 50%)",
82
+ subtle: "#ededed",
82
83
  },
83
84
  menu: {
84
85
  background: "#FFF",
@@ -242,6 +243,7 @@ const darkVariant = merge(lightVariant, {
242
243
  alt: "#1e1e1e",
243
244
  secondary: "#303030",
244
245
  gradient: "linear-gradient(#333333 0%, #1e1e1e 50%)",
246
+ subtle: "#333333",
245
247
  },
246
248
  menu: {
247
249
  background: "#222222",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@monolith-forensics/monolith-ui",
3
- "version": "1.8.1-dev.2",
3
+ "version": "1.8.1-dev.4",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Matt Danner (Monolith Forensics LLC)",
@@ -40,22 +40,18 @@
40
40
  "@radix-ui/react-switch": "^1.0.7",
41
41
  "@radix-ui/react-tooltip": "^1.0.7",
42
42
  "@tabler/icons-react": "^3.11.0",
43
- "@tiptap/extension-color": "^2.9.1",
44
- "@tiptap/extension-focus": "^2.5.9",
45
- "@tiptap/extension-horizontal-rule": "^2.5.9",
46
- "@tiptap/extension-image": "^2.5.9",
47
- "@tiptap/extension-placeholder": "^2.5.9",
48
- "@tiptap/extension-table": "^2.5.8",
49
- "@tiptap/extension-table-cell": "^2.5.8",
50
- "@tiptap/extension-table-header": "^2.5.8",
51
- "@tiptap/extension-table-row": "^2.5.8",
52
- "@tiptap/extension-text-align": "^2.5.8",
53
- "@tiptap/extension-text-style": "^2.9.1",
54
- "@tiptap/extension-underline": "^2.5.8",
55
- "@tiptap/pm": "^2.5.8",
56
- "@tiptap/react": "^2.5.8",
57
- "@tiptap/starter-kit": "^2.5.8",
58
- "@tiptap/suggestion": "^2.5.9",
43
+ "@tiptap/core": "3.22.4",
44
+ "@tiptap/extension-color": "3.22.4",
45
+ "@tiptap/extension-horizontal-rule": "3.22.4",
46
+ "@tiptap/extension-image": "3.22.4",
47
+ "@tiptap/extension-table": "3.22.4",
48
+ "@tiptap/extension-text-align": "3.22.4",
49
+ "@tiptap/extension-text-style": "3.22.4",
50
+ "@tiptap/extensions": "3.22.4",
51
+ "@tiptap/pm": "3.22.4",
52
+ "@tiptap/react": "3.22.4",
53
+ "@tiptap/starter-kit": "3.22.4",
54
+ "@tiptap/suggestion": "3.22.4",
59
55
  "@uiw/codemirror-theme-vscode": "^4.23.6",
60
56
  "@uiw/react-codemirror": "^4.23.6",
61
57
  "d3-scale": "^4.0.2",
@@ -88,11 +84,19 @@
88
84
  "@types/d3-scale": "^4.0.9",
89
85
  "@types/d3-shape": "^3.1.8",
90
86
  "@types/overlayscrollbars": "^1.12.5",
91
- "@types/react-dom": "^18.3.0",
87
+ "@types/react": "19.0.8",
88
+ "@types/react-dom": "19.0.3",
92
89
  "@types/react-window": "^1.8.8",
93
90
  "@types/spark-md5": "^3.0.4",
94
91
  "chokidar-cli": "^3.0.0",
95
92
  "typescript": "^5.5.4",
96
93
  "yalc": "^1.0.0-pre.53"
94
+ },
95
+ "resolutions": {
96
+ "@types/react": "19.0.8",
97
+ "prosemirror-model": "1.25.4",
98
+ "prosemirror-state": "1.4.4",
99
+ "prosemirror-transform": "1.12.0",
100
+ "prosemirror-view": "1.41.8"
97
101
  }
98
102
  }
@@ -1,76 +0,0 @@
1
- import { Operator } from "./types";
2
- export declare const Operators: {
3
- Equals: {
4
- value: string;
5
- label: string;
6
- };
7
- NotEquals: {
8
- value: string;
9
- label: string;
10
- };
11
- LessThan: {
12
- value: string;
13
- label: string;
14
- };
15
- GreaterThan: {
16
- value: string;
17
- label: string;
18
- };
19
- LessThanOrEqual: {
20
- value: string;
21
- label: string;
22
- };
23
- GreaterThanOrEqual: {
24
- value: string;
25
- label: string;
26
- };
27
- Contains: {
28
- value: string;
29
- label: string;
30
- };
31
- BeginsWith: {
32
- value: string;
33
- label: string;
34
- };
35
- EndsWith: {
36
- value: string;
37
- label: string;
38
- };
39
- DoesNotContain: {
40
- value: string;
41
- label: string;
42
- };
43
- DoesNotBeginWith: {
44
- value: string;
45
- label: string;
46
- };
47
- DoesNotEndWith: {
48
- value: string;
49
- label: string;
50
- };
51
- IsEmpty: {
52
- value: string;
53
- label: string;
54
- };
55
- IsNotEmpty: {
56
- value: string;
57
- label: string;
58
- };
59
- In: {
60
- value: string;
61
- label: string;
62
- };
63
- NIn: {
64
- value: string;
65
- label: string;
66
- };
67
- Between: {
68
- value: string;
69
- label: string;
70
- };
71
- NotBetween: {
72
- value: string;
73
- label: string;
74
- };
75
- };
76
- export declare const DefaultOperators: Operator[];
@@ -1,21 +0,0 @@
1
- export const Operators = {
2
- Equals: { value: "=", label: "is" },
3
- NotEquals: { value: "!=", label: "is not" },
4
- LessThan: { value: "<", label: "less than" },
5
- GreaterThan: { value: ">", label: "greater than" },
6
- LessThanOrEqual: { value: "<=", label: "less than or equal" },
7
- GreaterThanOrEqual: { value: ">=", label: "greater than or equal" },
8
- Contains: { value: "contains", label: "contains" },
9
- BeginsWith: { value: "beginsWith", label: "begins with" },
10
- EndsWith: { value: "endsWith", label: "ends with" },
11
- DoesNotContain: { value: "doesNotContain", label: "does not contain" },
12
- DoesNotBeginWith: { value: "doesNotBeginWith", label: "does not begin with" },
13
- DoesNotEndWith: { value: "doesNotEndWith", label: "does not end with" },
14
- IsEmpty: { value: "isEmpty", label: "is empty" },
15
- IsNotEmpty: { value: "isNotEmpty", label: "is not empty" },
16
- In: { value: "in", label: "is any of" },
17
- NIn: { value: "nin", label: "is none of" },
18
- Between: { value: "between", label: "between" },
19
- NotBetween: { value: "notBetween", label: "not between" },
20
- };
21
- export const DefaultOperators = Object.values(Operators);
@@ -1,3 +0,0 @@
1
- import { ResizeHandlerProps } from "../types";
2
- declare const resizeHandler: ({ event, columnId, columnProps, onResize, onResizeFinished, }: ResizeHandlerProps) => void;
3
- export default resizeHandler;
@@ -1,84 +0,0 @@
1
- import TableDefaults from "../TableDefaults";
2
- const enableResizeClass = (dataField) => {
3
- if (dataField === undefined) {
4
- return;
5
- }
6
- document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
7
- resizer.classList.add("isResizing");
8
- });
9
- };
10
- const disableResizeClass = (dataField) => {
11
- if (dataField === undefined) {
12
- return;
13
- }
14
- document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
15
- resizer.classList.remove("isResizing");
16
- });
17
- };
18
- const resizeHandler = ({ event, columnId, columnProps, onResize, onResizeFinished, }) => {
19
- let col = event.target
20
- .parentElement;
21
- let newColumns = [];
22
- let x = 0;
23
- let w = 0;
24
- const mouseMoveHandler = function (e) {
25
- const selectedColumn = document.querySelectorAll(`.column-${columnId}`);
26
- const columnHeaders = document.querySelectorAll(`.mfui-th.column-${columnId}`);
27
- const dx = e.clientX - x;
28
- let newWidth = w + dx;
29
- // Calculate what the minimum width should be
30
- // min width should be the defined column width or the default min width
31
- if (columnProps.minWidth === undefined) {
32
- if (newWidth < TableDefaults.td.minWidth)
33
- newWidth = TableDefaults.td.minWidth;
34
- }
35
- else {
36
- if (newWidth < columnProps.minWidth)
37
- newWidth = columnProps.minWidth;
38
- }
39
- selectedColumn.forEach((col) => {
40
- var _a;
41
- col.style.width = `${newWidth}px`;
42
- col.style.flex = "0 0 auto";
43
- // col.style.maxWidth = `${newWidth}px`;
44
- // col.style.minWidth = `${newWidth}px`;
45
- newColumns.push({
46
- dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
47
- width: newWidth,
48
- });
49
- });
50
- newColumns = Array.from(columnHeaders).map((col) => {
51
- var _a;
52
- return {
53
- dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
54
- width: newWidth,
55
- };
56
- });
57
- onResize({
58
- columns: newColumns,
59
- });
60
- };
61
- const mouseUpHandler = function () {
62
- var _a, _b, _c;
63
- 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;
64
- if (newWidth) {
65
- newWidth = newWidth.replace("px", "");
66
- }
67
- disableResizeClass(columnId);
68
- document.removeEventListener("mousemove", mouseMoveHandler);
69
- document.removeEventListener("mouseup", mouseUpHandler);
70
- onResizeFinished === null || onResizeFinished === void 0 ? void 0 : onResizeFinished({
71
- column: columnProps,
72
- columnId: columnId,
73
- targetColumn: document.querySelector(`.column-${columnId}`),
74
- newWidth,
75
- });
76
- };
77
- x = event.clientX;
78
- const styles = window.getComputedStyle(col);
79
- w = parseInt(styles.width, 10);
80
- document.addEventListener("mousemove", mouseMoveHandler);
81
- document.addEventListener("mouseup", mouseUpHandler);
82
- enableResizeClass(columnId);
83
- };
84
- export default resizeHandler;