@monolith-forensics/monolith-ui 1.1.25 → 1.1.26

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 (7) hide show
  1. package/dist/Table/Table.d.ts +90 -0
  2. package/dist/Table/Table.js +740 -0
  3. package/dist/Table/index.d.ts +2 -0
  4. package/dist/Table/index.js +10 -0
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.js +5 -1
  7. package/package.json +7 -1
package/dist/Table/Table.d.ts ADDED
@@ -0,0 +1,90 @@
1
+ interface ColumnProps {
2
+ className?: string;
3
+ key?: string | number;
4
+ dataField: string;
5
+ caption: string;
6
+ columnId?: string | number;
7
+ allowSorting?: boolean;
8
+ allowReorder?: boolean;
9
+ resizeEnabled?: boolean;
10
+ width?: number;
11
+ sorting?: {
12
+ active: boolean;
13
+ direction: "asc" | "desc";
14
+ };
15
+ format?: {
16
+ type: string;
17
+ };
18
+ props?: any;
19
+ render: (data: any, options: any) => React.ReactNode;
20
+ componentType?: string;
21
+ }
22
+ export declare const Column: {
23
+ ({ dataField, caption, columnId, sorting, format, componentType, }: ColumnProps): null;
24
+ displayName: string;
25
+ };
26
+ interface onResizeProps {
27
+ columns: {
28
+ dataField: string;
29
+ width: number;
30
+ }[];
31
+ }
32
+ type SelectionState = "all" | "none" | "someIncluded" | "someExcluded";
33
+ interface TableInstanceProps {
34
+ setTableInstance: (e: any) => void;
35
+ toggleCompact: () => void;
36
+ toggleStripes: () => void;
37
+ isCompact: boolean;
38
+ isStriped: boolean;
39
+ getVirtualSelectionTotal: () => number;
40
+ getSelectedRows: () => any[];
41
+ getExcludedRows: () => any[];
42
+ getSelectionState: () => SelectionState;
43
+ clearSelections: () => void;
44
+ onColumnResize: (e: onResizeProps) => void;
45
+ }
46
+ export declare const useTable: () => {
47
+ setTableInstance: import("react").Dispatch<import("react").SetStateAction<TableInstanceProps | null>>;
48
+ toggleCompact: () => void | undefined;
49
+ toggleStripes: () => void | undefined;
50
+ isCompact: boolean;
51
+ isStriped: boolean;
52
+ getVirtualSelectionTotal: () => number;
53
+ getSelectedRows: () => any[];
54
+ getExcludedRows: () => any[];
55
+ getSelectionState: () => {};
56
+ clearSelections: () => void | undefined;
57
+ onColumnResize: (e: onResizeProps) => void | undefined;
58
+ };
59
+ interface TableProps {
60
+ className?: string;
61
+ children: React.ReactNode | React.ReactNode[];
62
+ data: {
63
+ [key: string]: any;
64
+ }[];
65
+ rowHeight?: number;
66
+ headerHeight?: number;
67
+ tableInstance?: TableInstanceProps;
68
+ queryKey?: any;
69
+ totalRecords?: number;
70
+ compact?: boolean;
71
+ focusedRow?: {
72
+ [key: string]: any;
73
+ };
74
+ keyValue?: string;
75
+ onScroll?: (e: any) => void;
76
+ allowColumnResize?: boolean;
77
+ allowColumnReorder?: boolean;
78
+ showActionColumn?: boolean;
79
+ showSelection?: boolean;
80
+ selectAll?: boolean;
81
+ reloadFn?: () => void;
82
+ onColumnReorder?: (e: any) => void;
83
+ onSelectionChanged?: (e: any) => void;
84
+ onActionButtonClick?: (e: any) => void;
85
+ onHeaderClick?: (e: any) => void;
86
+ onColumnResize?: (e: any) => void;
87
+ onRowUpdated?: (e: any) => void;
88
+ }
89
+ declare const Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TableProps, never>> & string & Omit<({ className, children, data, rowHeight, headerHeight, tableInstance, queryKey, totalRecords, compact, focusedRow, keyValue, onScroll, allowColumnResize, allowColumnReorder, showActionColumn, showSelection, selectAll, reloadFn, onColumnReorder, onSelectionChanged, onActionButtonClick, onHeaderClick, onColumnResize, onRowUpdated, }: TableProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
90
+ export default Table;
package/dist/Table/Table.js ADDED
@@ -0,0 +1,740 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __rest = (this && this.__rest) || function (s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
28
+ t[p] = s[p];
29
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
30
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
32
+ t[p[i]] = s[p[i]];
33
+ }
34
+ return t;
35
+ };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.useTable = exports.Column = void 0;
41
+ const jsx_runtime_1 = require("react/jsx-runtime");
42
+ const react_window_1 = require("react-window");
43
+ const react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
44
+ const overlayscrollbars_react_1 = require("overlayscrollbars-react");
45
+ const short_uuid_1 = __importDefault(require("short-uuid"));
46
+ const styled_components_1 = __importStar(require("styled-components"));
47
+ const react_1 = require("react");
48
+ const lucide_react_1 = require("lucide-react");
49
+ const lucide_react_2 = require("lucide-react");
50
+ const moment_1 = __importDefault(require("moment"));
51
+ const __1 = require("..");
52
+ const MIN_COLUMN_WIDTH = 125;
53
+ const Column = ({ dataField, caption, columnId = short_uuid_1.default.generate(), sorting, format, componentType = "Column", }) => {
54
+ return null;
55
+ };
56
+ exports.Column = Column;
57
+ exports.Column.displayName = "Column";
58
+ const StyledTable = styled_components_1.default.table `
59
+ position: relative;
60
+ border-collapse: separate;
61
+ border-spacing: 0;
62
+ min-width: 100%;
63
+ border-top: none;
64
+ border-radius: 4px;
65
+ `;
66
+ const StyledThead = styled_components_1.default.thead `
67
+ position: relative;
68
+ `;
69
+ const StyledTbody = styled_components_1.default.tbody `
70
+ & [data-even="true"].tr td {
71
+ background-color: ${({ stripes, theme }) => stripes ? theme.palette.background.secondary : "transparent"};
72
+ }
73
+ & .tr:hover td {
74
+ background-color: ${({ theme }) => theme.palette.action.hover};
75
+ }
76
+ `;
77
+ const StyledTr = styled_components_1.default.tr `
78
+ position: relative;
79
+ height: ${({ compact, rowHeight }) => rowHeight ? rowHeight : compact ? 28 : 38}px;
80
+ width: 100%;
81
+ display: flex;
82
+
83
+ & .action-button {
84
+ opacity: 0;
85
+ border-radius: 4px;
86
+ }
87
+ * .custom-action-button {
88
+ opacity: 0;
89
+ }
90
+
91
+ &:hover .action-button,
92
+ &:hover .custom-action-button {
93
+ opacity: 1;
94
+ }
95
+
96
+ &.focused .td {
97
+ border-top: 1px solid ${({ theme }) => theme.palette.primary.main};
98
+ border-bottom: 1px solid ${({ theme }) => theme.palette.primary.main} !important;
99
+ transition: border 0.3s ease;
100
+ }
101
+ &.focused .td:first-child {
102
+ border-left: 1px solid ${({ theme }) => theme.palette.primary.main};
103
+ }
104
+ &.focused .td:last-child {
105
+ border-right: 1px solid ${({ theme }) => theme.palette.primary.main};
106
+ }
107
+
108
+ // last item in row
109
+ & .td:last-child {
110
+ width: auto !important;
111
+ max-width: none !important;
112
+ }
113
+ `;
114
+ const StyledHeaderRow = (0, styled_components_1.default)(StyledTr) `
115
+ height: ${({ compact, headerHeight }) => headerHeight ? headerHeight : compact ? 28 : 38}px;
116
+
117
+ display: table-row;
118
+
119
+ // last item in row
120
+ & .th:last-child {
121
+ width: auto !important;
122
+ max-width: none !important;
123
+ }
124
+ `;
125
+ const StyledTd = styled_components_1.default.td `
126
+ position: relative;
127
+ display: flex;
128
+ align-items: center;
129
+ flex: 1;
130
+ padding: ${({ compact }) => (compact ? "3px" : "8px")};
131
+ font-size: ${({ compact }) => (compact ? "10px" : "12px")};
132
+ overflow: hidden;
133
+ text-overflow: ellipsis;
134
+ white-space: nowrap;
135
+
136
+ background-color: ${({ theme }) => theme.palette.background.default};
137
+
138
+ border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
139
+
140
+ &:first-child {
141
+ border-left: 1px solid ${({ theme }) => theme.palette.divider};
142
+ }
143
+
144
+ &:last-child {
145
+ border-right: 1px solid ${({ theme }) => theme.palette.divider};
146
+ }
147
+ `;
148
+ const StyledTh = styled_components_1.default.th `
149
+ position: sticky;
150
+ top: 0;
151
+ z-index: 1;
152
+ flex: 1;
153
+ vertical-align: middle;
154
+ user-select: none;
155
+ padding: ${({ compact }) => (compact ? "3px" : "8px")};
156
+ font-size: ${({ compact }) => (compact ? "10px" : "12px")};
157
+ text-align: left;
158
+ font-weight: bold;
159
+ overflow: hidden;
160
+ text-overflow: ellipsis;
161
+ white-space: nowrap;
162
+
163
+ background-color: ${({ theme }) => theme.palette.background.alt};
164
+
165
+ border-top: 1px solid ${({ theme }) => theme.palette.divider};
166
+ border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
167
+
168
+ &:first-child {
169
+ border-left: 1px solid ${({ theme }) => theme.palette.divider};
170
+ border-top-left-radius: 4px;
171
+ }
172
+
173
+ &:last-child {
174
+ border-right: 1px solid ${({ theme }) => theme.palette.divider};
175
+ border-top-right-radius: 4px;
176
+ }
177
+
178
+ &:hover {
179
+ background-color: ${({ theme }) => theme.name === "DARK" ? "#2e2e2e" : "#f5f5f5"};
180
+ cursor: pointer;
181
+ }
182
+ &.dragging:active {
183
+ cursor: grabbing;
184
+ }
185
+ &.dragover .resizer {
186
+ opacity: 1;
187
+ background: ${(props) => props.theme.palette.primary.main};
188
+ cursor: grabbing;
189
+ }
190
+ `;
191
+ const enableResizeClass = (dataField) => {
192
+ document
193
+ .querySelectorAll(`.resizer.column-${dataField}`)
194
+ .forEach((resizer) => {
195
+ resizer.classList.add("isResizing");
196
+ });
197
+ };
198
+ const disableResizeClass = (dataField) => {
199
+ document
200
+ .querySelectorAll(`.resizer.column-${dataField}`)
201
+ .forEach((resizer) => {
202
+ resizer.classList.remove("isResizing");
203
+ });
204
+ };
205
+ const resizeHandler = ({ event, columnId, columnProps, onResize, onResizeFinished, }) => {
206
+ let col = event.target
207
+ .parentElement;
208
+ let newColumns = [];
209
+ let x = 0;
210
+ let w = 0;
211
+ const mouseMoveHandler = function (e) {
212
+ const selectedColumn = document.querySelectorAll(`.col-${columnId}`);
213
+ const columnHeaders = document.querySelectorAll(`.th.col-${columnId}`);
214
+ const dx = e.clientX - x;
215
+ let newWidth = w + dx;
216
+ if (newWidth < MIN_COLUMN_WIDTH) {
217
+ newWidth = MIN_COLUMN_WIDTH;
218
+ }
219
+ selectedColumn.forEach((col) => {
220
+ var _a;
221
+ col.style.width = `${newWidth}px`;
222
+ col.style.maxWidth = `${newWidth}px`;
223
+ col.style.minWidth = `${newWidth}px`;
224
+ newColumns.push({
225
+ dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
226
+ width: newWidth,
227
+ });
228
+ });
229
+ newColumns = Array.from(columnHeaders).map((col) => {
230
+ var _a;
231
+ return {
232
+ dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
233
+ width: newWidth,
234
+ };
235
+ });
236
+ onResize({
237
+ columns: newColumns,
238
+ });
239
+ };
240
+ const mouseUpHandler = function () {
241
+ var _a, _b, _c;
242
+ disableResizeClass(columnId);
243
+ document.removeEventListener("mousemove", mouseMoveHandler);
244
+ document.removeEventListener("mouseup", mouseUpHandler);
245
+ onResizeFinished === null || onResizeFinished === void 0 ? void 0 : onResizeFinished({
246
+ column: columnProps,
247
+ columnId: columnId,
248
+ columns: newColumns,
249
+ targetColumn: document.querySelector(`.col-${columnId}`),
250
+ newWidth: ((_c = (_b = (_a = document === null || document === void 0 ? void 0 : document.querySelector) === null || _a === void 0 ? void 0 : _a.call(document, `.col-${columnId}`)) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.width) || null,
251
+ });
252
+ };
253
+ x = event.clientX;
254
+ const styles = window.getComputedStyle(col);
255
+ w = parseInt(styles.width, 10);
256
+ document.addEventListener("mousemove", mouseMoveHandler);
257
+ document.addEventListener("mouseup", mouseUpHandler);
258
+ enableResizeClass(columnId);
259
+ };
260
+ const Resizer = (0, styled_components_1.default)(({ className, resizeHandler, onResize = () => { }, onResizeFinished, column, }) => {
261
+ return ((0, jsx_runtime_1.jsx)("div", { className: `${className} resizer column-${column.props.columnId}`, onClick: (e) => {
262
+ e.stopPropagation();
263
+ e.nativeEvent.stopImmediatePropagation();
264
+ e.preventDefault();
265
+ }, onMouseDown: (e) => {
266
+ e.stopPropagation();
267
+ e.nativeEvent.stopImmediatePropagation();
268
+ e.preventDefault();
269
+ if (resizeHandler)
270
+ resizeHandler({
271
+ event: e,
272
+ columnId: column.props.columnId,
273
+ columnProps: column.props,
274
+ onResize: onResize,
275
+ onResizeFinished: onResizeFinished,
276
+ });
277
+ } }));
278
+ }) `
279
+ &.resizer {
280
+ position: absolute;
281
+ right: 0;
282
+ top: 0;
283
+ height: 100%;
284
+ width: 3px;
285
+ background-color: ${(props) => props.theme.palette.divider};
286
+ cursor: col-resize;
287
+ user-select: none;
288
+ touch-action: none;
289
+ opacity: 0;
290
+ &.isResizing {
291
+ opacity: 1;
292
+ background: ${(props) => props.theme.palette.primary.main};
293
+ }
294
+ // dragover css
295
+ &.dragover {
296
+ opacity: 1;
297
+ background: ${(props) => props.theme.palette.primary.main};
298
+ }
299
+ }
300
+ `;
301
+ const HeaderRowComponent = ({ columns, _compact, resizeState, headerHeight, onHeaderClick, onColumnResize, dropColumn, dragColumn, showSelection, selectAll, selectionState, handleSelectAll, handleColumnReorder, }) => {
302
+ const theme = (0, styled_components_1.useTheme)();
303
+ return ((0, jsx_runtime_1.jsx)(StyledThead, { children: (0, jsx_runtime_1.jsx)(StyledHeaderRow, { compact: _compact, headerHeight: headerHeight, children: columns.map((column) => {
304
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
305
+ let savedColSize = ((_c = (_b = (_a = resizeState === null || resizeState === void 0 ? void 0 : resizeState.current) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.find((col) => col.dataField === column.props.dataField)) === null || _c === void 0 ? void 0 : _c.width) || MIN_COLUMN_WIDTH;
306
+ if (savedColSize < MIN_COLUMN_WIDTH) {
307
+ savedColSize = MIN_COLUMN_WIDTH;
308
+ }
309
+ return ((0, jsx_runtime_1.jsxs)(StyledTh, Object.assign({}, column.props, { className: `th ${((_d = column === null || column === void 0 ? void 0 : column.props) === null || _d === void 0 ? void 0 : _d.columnId) ? `col-${column.props.columnId}` : ""}`, "data-field": column.props.dataField, "data-type": "th", compact: _compact, onClick: (e) => {
310
+ if (column.props.allowSorting !== false)
311
+ onHeaderClick === null || onHeaderClick === void 0 ? void 0 : onHeaderClick(column.props);
312
+ }, draggable: column.props.allowReorder !== false ? true : false, onDragOver: (e) => {
313
+ e.preventDefault();
314
+ e.dataTransfer.dropEffect = "move";
315
+ }, onDragEnter: (e) => {
316
+ e.target.classList.add("dragover");
317
+ dropColumn.current = column.props;
318
+ }, onDragLeave: (e) => {
319
+ e.target.classList.remove("dragover");
320
+ }, onDrop: (e) => {
321
+ e.preventDefault();
322
+ e.target.classList.remove("dragover");
323
+ handleColumnReorder(dragColumn.current, dropColumn.current);
324
+ }, onDragStart: (e) => {
325
+ //set dragging class
326
+ dragColumn.current = column.props;
327
+ e.target.classList.add("dragging");
328
+ }, onDragEnd: (e) => {
329
+ e.target.classList.remove("dragging");
330
+ }, style: {
331
+ width: ((_e = column === null || column === void 0 ? void 0 : column.props) === null || _e === void 0 ? void 0 : _e.width)
332
+ ? (_f = column === null || column === void 0 ? void 0 : column.props) === null || _f === void 0 ? void 0 : _f.width
333
+ : savedColSize || "auto",
334
+ maxWidth: ((_g = column === null || column === void 0 ? void 0 : column.props) === null || _g === void 0 ? void 0 : _g.width)
335
+ ? (_h = column === null || column === void 0 ? void 0 : column.props) === null || _h === void 0 ? void 0 : _h.width
336
+ : savedColSize || "auto",
337
+ minWidth: ((_j = column === null || column === void 0 ? void 0 : column.props) === null || _j === void 0 ? void 0 : _j.width)
338
+ ? (_k = column === null || column === void 0 ? void 0 : column.props) === null || _k === void 0 ? void 0 : _k.width
339
+ : savedColSize || MIN_COLUMN_WIDTH,
340
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
341
+ display: "flex",
342
+ alignContent: "center",
343
+ alignItems: "center",
344
+ pointerEvents: column.props.dataField === "action" ? "all" : "none",
345
+ }, children: [showSelection && column.props.dataField === "action" ? ((0, jsx_runtime_1.jsx)("div", { style: {
346
+ display: "flex",
347
+ alignContent: "center",
348
+ alignItems: "center",
349
+ cursor: "pointer",
350
+ color: theme.palette.text.secondary,
351
+ marginRight: 5,
352
+ marginLeft: 3,
353
+ }, children: selectAll && ((0, jsx_runtime_1.jsx)(__1.CheckBox, { value: selectionState === "all", partialCheck: selectionState.includes("some"), onChange: handleSelectAll })) })) : ((0, jsx_runtime_1.jsx)("div", { children: column.props.caption })), ((_m = (_l = column.props) === null || _l === void 0 ? void 0 : _l.sorting) === null || _m === void 0 ? void 0 : _m.active) && ((0, jsx_runtime_1.jsx)("div", { style: { marginLeft: 5 }, children: column.props.sorting.direction === "asc" ? ((0, jsx_runtime_1.jsx)(lucide_react_2.ArrowUpIcon, { size: 12 })) : ((0, jsx_runtime_1.jsx)(lucide_react_2.ArrowDownIcon, { size: 12 })) }))] }), ((_o = column === null || column === void 0 ? void 0 : column.props) === null || _o === void 0 ? void 0 : _o.resizeEnabled) !== false && ((0, jsx_runtime_1.jsx)(Resizer, { resizeHandler: resizeHandler, column: column, onResize: (e) => {
354
+ resizeState.current = e;
355
+ }, onResizeFinished: (e) => {
356
+ onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize(e);
357
+ } }))] }), short_uuid_1.default.generate()));
358
+ }) }) }));
359
+ };
360
+ const InnerElement = (0, react_1.forwardRef)((_a, ref) => {
361
+ var { children, columns, resizeState, _compact, stripes, onHeaderClick, dropColumn, dragColumn, showSelection, selectAll, selectionState, handleSelectAll, handleColumnReorder, onColumnResize, headerHeight } = _a, rest = __rest(_a, ["children", "columns", "resizeState", "_compact", "stripes", "onHeaderClick", "dropColumn", "dragColumn", "showSelection", "selectAll", "selectionState", "handleSelectAll", "handleColumnReorder", "onColumnResize", "headerHeight"]);
362
+ return ((0, jsx_runtime_1.jsxs)(StyledTable, Object.assign({ ref: ref }, rest, { children: [(0, jsx_runtime_1.jsx)(HeaderRowComponent, { columns: columns, resizeState: resizeState, _compact: _compact, headerHeight: headerHeight, onHeaderClick: onHeaderClick, dropColumn: dropColumn, dragColumn: dragColumn, showSelection: showSelection, selectAll: selectAll, selectionState: selectionState, handleSelectAll: handleSelectAll, handleColumnReorder: handleColumnReorder, onColumnResize: onColumnResize }), (0, jsx_runtime_1.jsx)(StyledTbody, { className: "tbody" + (stripes ? " striped" : ""), stripes: stripes, children: children })] })));
363
+ });
364
+ const Row = ({ data, index, style }) => {
365
+ const { data: dataRows, columns, focusedRow, keyValue, _compact, queryKey, reloadFn, headerHeight, resizeState, onRowUpdated, } = data;
366
+ const item = (dataRows === null || dataRows === void 0 ? void 0 : dataRows[index]) || {};
367
+ const handleRowUpdated = (data) => {
368
+ onRowUpdated === null || onRowUpdated === void 0 ? void 0 : onRowUpdated({ rowData: item, updateData: data });
369
+ };
370
+ const isRowFocused = focusedRow
371
+ ? focusedRow[keyValue] === item[keyValue]
372
+ : false;
373
+ const row = columns.map((column) => {
374
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
375
+ let value = null;
376
+ let savedColSize = ((_c = (_b = (_a = resizeState === null || resizeState === void 0 ? void 0 : resizeState.current) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.find((col) => col.dataField === column.props.dataField)) === null || _c === void 0 ? void 0 : _c.width) || MIN_COLUMN_WIDTH;
377
+ if (savedColSize < MIN_COLUMN_WIDTH) {
378
+ savedColSize = MIN_COLUMN_WIDTH;
379
+ }
380
+ // parse datafield dot syntax
381
+ if ((_d = column.props.dataField) === null || _d === void 0 ? void 0 : _d.includes(".")) {
382
+ const fields = (_e = column.props.dataField) === null || _e === void 0 ? void 0 : _e.split(".");
383
+ value = fields.reduce((acc, field) => {
384
+ return acc === null || acc === void 0 ? void 0 : acc[field];
385
+ }, item);
386
+ }
387
+ else
388
+ value = item === null || item === void 0 ? void 0 : item[column.props.dataField];
389
+ // format date values
390
+ if (column.props.dataType === "date" &&
391
+ ((_g = (_f = column === null || column === void 0 ? void 0 : column.props) === null || _f === void 0 ? void 0 : _f.format) === null || _g === void 0 ? void 0 : _g.type) &&
392
+ value) {
393
+ const dateFormat = (_j = (_h = column === null || column === void 0 ? void 0 : column.props) === null || _h === void 0 ? void 0 : _h.format) === null || _j === void 0 ? void 0 : _j.type;
394
+ value = (0, moment_1.default)(value).format(dateFormat);
395
+ }
396
+ if (column.props.render) {
397
+ return ((0, jsx_runtime_1.jsxs)(StyledTd, { className: `td ${((_k = column === null || column === void 0 ? void 0 : column.props) === null || _k === void 0 ? void 0 : _k.columnId) ? `col-${column.props.columnId}` : ""}`, title: ((_l = column === null || column === void 0 ? void 0 : column.props) === null || _l === void 0 ? void 0 : _l.titleRender) ? (_m = column === null || column === void 0 ? void 0 : column.props) === null || _m === void 0 ? void 0 : _m.titleRender(item) : null, compact: _compact, style: Object.assign({ width: ((_o = column === null || column === void 0 ? void 0 : column.props) === null || _o === void 0 ? void 0 : _o.width)
398
+ ? (_p = column === null || column === void 0 ? void 0 : column.props) === null || _p === void 0 ? void 0 : _p.width
399
+ : savedColSize || "auto", maxWidth: ((_q = column === null || column === void 0 ? void 0 : column.props) === null || _q === void 0 ? void 0 : _q.width)
400
+ ? (_r = column === null || column === void 0 ? void 0 : column.props) === null || _r === void 0 ? void 0 : _r.width
401
+ : savedColSize || "auto", minWidth: ((_s = column === null || column === void 0 ? void 0 : column.props) === null || _s === void 0 ? void 0 : _s.width)
402
+ ? (_t = column === null || column === void 0 ? void 0 : column.props) === null || _t === void 0 ? void 0 : _t.width
403
+ : savedColSize || MIN_COLUMN_WIDTH }, (((_u = column === null || column === void 0 ? void 0 : column.props) === null || _u === void 0 ? void 0 : _u.style) || {})), "data-type": "td", children: [column.props.resizeEnabled !== false && (0, jsx_runtime_1.jsx)(Resizer, { column: column }), column.props.render(item, {
404
+ queryKey: queryKey || "",
405
+ reload: reloadFn,
406
+ onRowUpdated: handleRowUpdated,
407
+ })] }, short_uuid_1.default.generate()));
408
+ }
409
+ return ((0, jsx_runtime_1.jsxs)(StyledTd, { className: `td ${((_v = column === null || column === void 0 ? void 0 : column.props) === null || _v === void 0 ? void 0 : _v.columnId) ? `col-${column.props.columnId}` : ""}`, compact: _compact, title: ((_w = column === null || column === void 0 ? void 0 : column.props) === null || _w === void 0 ? void 0 : _w.titleRender) ? (_x = column === null || column === void 0 ? void 0 : column.props) === null || _x === void 0 ? void 0 : _x.titleRender(item) : null, "data-type": "td", style: {
410
+ width: ((_y = column === null || column === void 0 ? void 0 : column.props) === null || _y === void 0 ? void 0 : _y.width)
411
+ ? (_z = column === null || column === void 0 ? void 0 : column.props) === null || _z === void 0 ? void 0 : _z.width
412
+ : savedColSize || "auto",
413
+ maxWidth: ((_0 = column === null || column === void 0 ? void 0 : column.props) === null || _0 === void 0 ? void 0 : _0.width)
414
+ ? (_1 = column === null || column === void 0 ? void 0 : column.props) === null || _1 === void 0 ? void 0 : _1.width
415
+ : savedColSize || "auto",
416
+ minWidth: ((_2 = column === null || column === void 0 ? void 0 : column.props) === null || _2 === void 0 ? void 0 : _2.width)
417
+ ? (_3 = column === null || column === void 0 ? void 0 : column.props) === null || _3 === void 0 ? void 0 : _3.width
418
+ : savedColSize || MIN_COLUMN_WIDTH,
419
+ }, children: [column.props.resizeEnabled !== false && (0, jsx_runtime_1.jsx)(Resizer, { column: column }), value] }, short_uuid_1.default.generate()));
420
+ });
421
+ return ((0, jsx_runtime_1.jsx)(StyledTr, { className: `tr${isRowFocused ? " focused" : ""}`, "data-key": item[keyValue], "data-type": "tr", "data-even": index % 2 === 0 ? "true" : "false", compact: _compact, style: Object.assign(Object.assign({}, style), { top: ((style === null || style === void 0 ? void 0 : style.top) || 0) + headerHeight }), children: row }, short_uuid_1.default.generate()));
422
+ };
423
+ const useTable = () => {
424
+ const [tableInstance, setTableInstance] = (0, react_1.useState)(null);
425
+ return {
426
+ setTableInstance,
427
+ toggleCompact: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.toggleCompact(),
428
+ toggleStripes: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.toggleStripes(),
429
+ isCompact: (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.isCompact) || false,
430
+ isStriped: (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.isStriped) || false,
431
+ getVirtualSelectionTotal: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getVirtualSelectionTotal()) || 0,
432
+ getSelectedRows: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getSelectedRows()) || [],
433
+ getExcludedRows: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getExcludedRows()) || [],
434
+ getSelectionState: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getSelectionState()) || {},
435
+ clearSelections: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.clearSelections(),
436
+ onColumnResize: (e) => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.onColumnResize(e),
437
+ };
438
+ };
439
+ exports.useTable = useTable;
440
+ const Table = (0, styled_components_1.default)(({ className, children, data, rowHeight, headerHeight, tableInstance, queryKey, totalRecords, compact, focusedRow, keyValue, onScroll, allowColumnResize, allowColumnReorder, showActionColumn, showSelection, selectAll, reloadFn, onColumnReorder, onSelectionChanged, onActionButtonClick, onHeaderClick, onColumnResize, onRowUpdated, }) => {
441
+ const theme = (0, styled_components_1.useTheme)();
442
+ const rootRef = (0, react_1.useRef)(null);
443
+ const [initialize, getInstance] = (0, overlayscrollbars_react_1.useOverlayScrollbars)({
444
+ options: {
445
+ scrollbars: {
446
+ autoHide: "scroll",
447
+ autoHideDelay: 500,
448
+ },
449
+ },
450
+ events: { scroll: (_, event) => onScroll === null || onScroll === void 0 ? void 0 : onScroll(event) },
451
+ });
452
+ const [targetElm, setTargetElm] = (0, react_1.useState)(null);
453
+ const [listElm, setListElm] = (0, react_1.useState)(null);
454
+ const dragColumn = (0, react_1.useRef)(null);
455
+ const dropColumn = (0, react_1.useRef)(null);
456
+ const [_compact, setCompact] = (0, react_1.useState)(compact);
457
+ const [stripes, setStripes] = (0, react_1.useState)(false);
458
+ const [selectedRows, setSelectedRows] = (0, react_1.useState)([]);
459
+ const [virtualSelectionTotal, setVirtualSelectionTotal] = (0, react_1.useState)(0);
460
+ const [excludedRows, setExcludedRows] = (0, react_1.useState)([]);
461
+ const [selectionState, setSelectionState] = (0, react_1.useState)("none");
462
+ const resizeState = (0, react_1.useRef)([]);
463
+ // check if children is an array
464
+ children = (0, react_1.useMemo)(() => {
465
+ return Array.isArray(children) ? children : [children];
466
+ }, [children]);
467
+ let columns = (0, react_1.useMemo)(() => {
468
+ var _a, _b;
469
+ return (_b = (_a = children === null || children === void 0 ? void 0 : children.filter) === null || _a === void 0 ? void 0 : _a.call(children, (child) => child.props.componentType === "Column")) === null || _b === void 0 ? void 0 : _b.map((column) => {
470
+ return (0, react_1.cloneElement)(column, {
471
+ columnId: short_uuid_1.default.generate(),
472
+ allowResize: allowColumnResize !== undefined
473
+ ? allowColumnResize
474
+ : column.props.allowResize,
475
+ allowReorder: allowColumnReorder !== undefined
476
+ ? allowColumnReorder
477
+ : column.props.allowReorder,
478
+ resizeEnabled: allowColumnResize !== undefined
479
+ ? allowColumnResize
480
+ : column.props.resizeEnabled,
481
+ });
482
+ });
483
+ }, [children]);
484
+ const [columnOrder, setColumnOrder] = (0, react_1.useState)(columns.map((col, index) => {
485
+ var _a, _b;
486
+ return {
487
+ column: (_a = col.props) === null || _a === void 0 ? void 0 : _a.dataField,
488
+ order: ((_b = col.props) === null || _b === void 0 ? void 0 : _b.order) || index,
489
+ };
490
+ }));
491
+ const handleColumnReorder = (dragColumn, dropColumn) => {
492
+ var _a;
493
+ const dropColumnOrder = (_a = columnOrder.find((col) => col.column === dropColumn.dataField)) === null || _a === void 0 ? void 0 : _a.order;
494
+ const newColumnOrder = columnOrder.map((col) => {
495
+ if (col.column === dragColumn.dataField) {
496
+ return { column: col.column, order: dropColumnOrder + 1 };
497
+ }
498
+ else {
499
+ return col.order > dropColumnOrder
500
+ ? Object.assign(Object.assign({}, col), { order: col.order + 1 }) : col;
501
+ }
502
+ });
503
+ onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(newColumnOrder);
504
+ setColumnOrder(newColumnOrder);
505
+ };
506
+ const handleSelectAll = () => {
507
+ let newSelectionState = null;
508
+ let newVirtualSelectionTotal = null;
509
+ if (selectionState === "all") {
510
+ // clear current selections
511
+ setSelectedRows([]);
512
+ // turn off all rows selected
513
+ newSelectionState = "none";
514
+ setSelectionState("none");
515
+ // clear excluded rows
516
+ setExcludedRows([]);
517
+ newVirtualSelectionTotal = 0;
518
+ setVirtualSelectionTotal(newVirtualSelectionTotal);
519
+ }
520
+ else {
521
+ // turn on all rows selected
522
+ newSelectionState = "all";
523
+ setSelectionState("all");
524
+ // clear excluded rows
525
+ setExcludedRows([]);
526
+ newVirtualSelectionTotal = totalRecords;
527
+ setVirtualSelectionTotal(newVirtualSelectionTotal);
528
+ }
529
+ onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged({
530
+ selectedRows: [],
531
+ excludedRows: [],
532
+ selectionState: newSelectionState,
533
+ virtualSelectionTotal: newVirtualSelectionTotal,
534
+ });
535
+ };
536
+ const handleSelectRow = ({ rowData, checked, }) => {
537
+ let newSelectedRows = [];
538
+ let newExcludedRows = [];
539
+ let newSelectionState = null;
540
+ let newVirtualSelectionTotal = null;
541
+ if (selectionState === "all") {
542
+ newExcludedRows = [...excludedRows, rowData];
543
+ newSelectionState = "someExcluded";
544
+ newVirtualSelectionTotal = totalRecords ? totalRecords - 1 : 0;
545
+ }
546
+ else if (selectionState === "none") {
547
+ newSelectedRows = [rowData];
548
+ newSelectionState = "someIncluded";
549
+ newVirtualSelectionTotal = 1;
550
+ }
551
+ else if (selectionState === "someExcluded") {
552
+ newSelectionState = "someExcluded";
553
+ newSelectedRows = selectedRows;
554
+ if (checked) {
555
+ // remove from excluded rows
556
+ newExcludedRows = excludedRows.filter((row) => keyValue ? (row === null || row === void 0 ? void 0 : row[keyValue]) !== (rowData === null || rowData === void 0 ? void 0 : rowData[keyValue]) : false);
557
+ newVirtualSelectionTotal = virtualSelectionTotal
558
+ ? virtualSelectionTotal + 1
559
+ : 0;
560
+ }
561
+ else {
562
+ // add to excluded rows
563
+ newExcludedRows = [...excludedRows, rowData];
564
+ newVirtualSelectionTotal = virtualSelectionTotal
565
+ ? virtualSelectionTotal - 1
566
+ : 0;
567
+ }
568
+ }
569
+ else if (selectionState === "someIncluded") {
570
+ newSelectionState = "someIncluded";
571
+ newExcludedRows = excludedRows;
572
+ if (checked) {
573
+ // add to selected rows
574
+ newSelectedRows = [...selectedRows, rowData];
575
+ newVirtualSelectionTotal = virtualSelectionTotal
576
+ ? virtualSelectionTotal + 1
577
+ : 0;
578
+ }
579
+ else {
580
+ // remove from selected rows
581
+ newSelectedRows = selectedRows.filter((row) => keyValue ? row[keyValue] !== rowData[keyValue] : false);
582
+ newVirtualSelectionTotal = virtualSelectionTotal
583
+ ? virtualSelectionTotal - 1
584
+ : 0;
585
+ }
586
+ }
587
+ if (newVirtualSelectionTotal === totalRecords) {
588
+ newSelectionState = "all";
589
+ }
590
+ else if (newVirtualSelectionTotal === 0) {
591
+ newSelectionState = "none";
592
+ }
593
+ setSelectedRows(newSelectedRows);
594
+ setExcludedRows(newExcludedRows);
595
+ setVirtualSelectionTotal(newVirtualSelectionTotal);
596
+ setSelectionState(newSelectionState);
597
+ onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged({
598
+ selectedRows: newSelectedRows,
599
+ excludedRows: newExcludedRows,
600
+ selectionState: newSelectionState,
601
+ virtualSelectionTotal: newVirtualSelectionTotal,
602
+ });
603
+ };
604
+ // sort columns
605
+ columns = (0, react_1.useMemo)(() => columns.sort((a, b) => {
606
+ var _a, _b;
607
+ const aOrder = (_a = columnOrder.find((col) => col.column === a.props.dataField)) === null || _a === void 0 ? void 0 : _a.order;
608
+ const bOrder = (_b = columnOrder.find((col) => col.column === b.props.dataField)) === null || _b === void 0 ? void 0 : _b.order;
609
+ return aOrder - bOrder;
610
+ }), [columnOrder, columns]);
611
+ const hiddenColumns = columns
612
+ .filter((col) => col.props.visible === false)
613
+ .map((col) => col.props.dataField);
614
+ // insert action column as first column
615
+ showActionColumn &&
616
+ (columns = [
617
+ (0, jsx_runtime_1.jsx)(exports.Column, { className: "action-column", dataField: "action", allowSorting: false, allowReorder: false, caption: "", width: showSelection ? 55 : 35, resizeEnabled: false, render: (rowData) => ((0, jsx_runtime_1.jsxs)("div", { style: {
618
+ display: "flex",
619
+ alignContent: "center",
620
+ alignItems: "center",
621
+ padding: 4,
622
+ color: theme.palette.text.secondary,
623
+ }, children: [showSelection && ((0, jsx_runtime_1.jsx)("div", { style: {
624
+ display: "flex",
625
+ alignContent: "center",
626
+ alignItems: "center",
627
+ cursor: "pointer",
628
+ color: theme.palette.text.secondary,
629
+ marginRight: 5,
630
+ }, children: (0, jsx_runtime_1.jsx)(__1.CheckBox, { value: selectionState === "all"
631
+ ? true
632
+ : selectionState === "someIncluded"
633
+ ? !!selectedRows.find((row) => keyValue
634
+ ? row[keyValue] === rowData[keyValue]
635
+ : false)
636
+ : selectionState === "someExcluded"
637
+ ? !excludedRows.find((row) => keyValue
638
+ ? row[keyValue] === rowData[keyValue]
639
+ : false)
640
+ : false, onChange: (newValue) => handleSelectRow({ rowData, checked: newValue }) }) })), (0, jsx_runtime_1.jsx)("div", { className: "action-button", title: "Show More Details", style: {
641
+ display: "flex",
642
+ alignContent: "center",
643
+ alignItems: "center",
644
+ cursor: "pointer",
645
+ color: theme.palette.primary.main,
646
+ marginRight: 5,
647
+ }, onClick: (e) => {
648
+ onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData);
649
+ }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2Icon, { size: _compact ? 8 : 12 }) })] })) }, short_uuid_1.default.generate()),
650
+ ...columns,
651
+ ]);
652
+ (0, react_1.useEffect)(() => {
653
+ if (targetElm && listElm) {
654
+ initialize({
655
+ target: targetElm,
656
+ elements: {
657
+ viewport: listElm,
658
+ },
659
+ });
660
+ return () => { var _a; return (_a = getInstance()) === null || _a === void 0 ? void 0 : _a.destroy(); };
661
+ }
662
+ }, [targetElm, listElm]);
663
+ (0, react_1.useEffect)(() => {
664
+ if (tableInstance) {
665
+ tableInstance.setTableInstance({
666
+ getSelectedRows: () => selectedRows,
667
+ getExcludedRows: () => excludedRows,
668
+ getVirtualSelectionTotal: () => virtualSelectionTotal,
669
+ getSelectionState: () => selectionState,
670
+ clearSelections: () => {
671
+ setSelectedRows([]);
672
+ setVirtualSelectionTotal(0);
673
+ setSelectionState("none");
674
+ setExcludedRows([]);
675
+ },
676
+ toggleCompact: () => setCompact(!_compact),
677
+ isCompact: _compact,
678
+ toggleStripes: () => setStripes(!stripes),
679
+ isStriped: stripes,
680
+ });
681
+ }
682
+ }, [
683
+ selectedRows,
684
+ excludedRows,
685
+ virtualSelectionTotal,
686
+ selectionState,
687
+ _compact,
688
+ stripes,
689
+ tableInstance,
690
+ ]);
691
+ (0, react_1.useEffect)(() => {
692
+ // Scroll to selected row if outside of viewport
693
+ if (focusedRow) {
694
+ const focusedRowElm = keyValue
695
+ ? document.querySelector(`[data-type="tr"][data-key="${focusedRow[keyValue]}"]`)
696
+ : null;
697
+ if (focusedRowElm) {
698
+ focusedRowElm.scrollIntoView({
699
+ behavior: "smooth",
700
+ block: "nearest",
701
+ inline: "nearest",
702
+ });
703
+ }
704
+ }
705
+ }, [focusedRow]);
706
+ return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: className + " table-wrapper", children: (0, jsx_runtime_1.jsx)(react_virtualized_auto_sizer_1.default, { children: ({ height, width }) => ((0, jsx_runtime_1.jsx)("div", { style: { width, height }, "data-overlayscrollbars": "", ref: setTargetElm, children: (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { overscanCount: 10, itemData: {
707
+ data,
708
+ columns: columns.filter((col) => !hiddenColumns.includes(col.props.dataField)),
709
+ focusedRow,
710
+ keyValue,
711
+ _compact,
712
+ queryKey,
713
+ reloadFn,
714
+ rowHeight: rowHeight ? rowHeight : _compact ? 28 : 38,
715
+ headerHeight: headerHeight
716
+ ? headerHeight
717
+ : _compact
718
+ ? 28
719
+ : 38,
720
+ resizeState,
721
+ onRowUpdated,
722
+ tableWidth: width,
723
+ }, height: height, innerElementType: (props) => ((0, jsx_runtime_1.jsx)(InnerElement, Object.assign({}, props, { columns: columns.filter((col) => !hiddenColumns.includes(col.props.dataField)), tableWidth: width, resizeState: resizeState, _compact: _compact, stripes: stripes, onHeaderClick: onHeaderClick, dropColumn: dropColumn, dragColumn: dragColumn, showSelection: showSelection, selectAll: selectAll, selectionState: selectionState, handleSelectAll: handleSelectAll, handleColumnReorder: handleColumnReorder, onColumnResize: onColumnResize }))), itemCount: data === null || data === void 0 ? void 0 : data.length, itemSize: rowHeight ? rowHeight : _compact ? 28 : 38, width: width, outerRef: setListElm, children: Row }) })) }) }));
724
+ }) `
725
+ position: relative;
726
+ flex: 1 1 auto;
727
+ overflow: hidden;
728
+ display: flex;
729
+ flex-direction: column;
730
+
731
+ .os-scrollbar {
732
+ pointer-events: auto;
733
+ visibility: visible;
734
+ }
735
+
736
+ .action-column {
737
+ max-width: 55px;
738
+ }
739
+ `;
740
+ exports.default = Table;
package/dist/Table/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default } from "./Table";
2
+ export { Column } from "./Table";
package/dist/Table/index.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Column = exports.default = void 0;
7
+ var Table_1 = require("./Table");
8
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
9
+ var Table_2 = require("./Table");
10
+ Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return Table_2.Column; } });
package/dist/index.d.ts CHANGED
@@ -20,5 +20,7 @@ export { default as Input } from "./Input";
20
20
  export { default as Tooltip } from "./Tooltip";
21
21
  export { default as Pill } from "./Pill";
22
22
  export { default as Calendar } from "./Calendar";
23
+ export { default as Table } from "./Table";
24
+ export { Column } from "./Table";
23
25
  export { default as MonolithUIProvider } from "./MonolithUIProvider";
24
26
  export { useMonolithUITheme } from "./MonolithUIProvider";
package/dist/index.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.useMonolithUITheme = exports.MonolithUIProvider = exports.Calendar = exports.Pill = exports.Tooltip = exports.Input = exports.CheckBox = exports.Switch = exports.FileInputField = exports.FlyoutTitle = exports.FlyoutHeader = exports.Flyout = exports.Modal = exports.FieldLabel = exports.TagBox = exports.TextAreaInput = exports.TextArea = exports.DateInput = exports.DropDownMenu = exports.IconButton = exports.Button = exports.SelectBox = exports.TextInput = exports.Grid = exports.FormSection = void 0;
6
+ exports.useMonolithUITheme = exports.MonolithUIProvider = exports.Column = exports.Table = exports.Calendar = exports.Pill = exports.Tooltip = exports.Input = exports.CheckBox = exports.Switch = exports.FileInputField = exports.FlyoutTitle = exports.FlyoutHeader = exports.Flyout = exports.Modal = exports.FieldLabel = exports.TagBox = exports.TextAreaInput = exports.TextArea = exports.DateInput = exports.DropDownMenu = exports.IconButton = exports.Button = exports.SelectBox = exports.TextInput = exports.Grid = exports.FormSection = void 0;
7
7
  var FormSection_1 = require("./FormSection");
8
8
  Object.defineProperty(exports, "FormSection", { enumerable: true, get: function () { return __importDefault(FormSection_1).default; } });
9
9
  var Grid_1 = require("./Grid");
@@ -49,6 +49,10 @@ var Pill_1 = require("./Pill");
49
49
  Object.defineProperty(exports, "Pill", { enumerable: true, get: function () { return __importDefault(Pill_1).default; } });
50
50
  var Calendar_1 = require("./Calendar");
51
51
  Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return __importDefault(Calendar_1).default; } });
52
+ var Table_1 = require("./Table");
53
+ Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
54
+ var Table_2 = require("./Table");
55
+ Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return Table_2.Column; } });
52
56
  var MonolithUIProvider_1 = require("./MonolithUIProvider");
53
57
  Object.defineProperty(exports, "MonolithUIProvider", { enumerable: true, get: function () { return __importDefault(MonolithUIProvider_1).default; } });
54
58
  var MonolithUIProvider_2 = require("./MonolithUIProvider");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@monolith-forensics/monolith-ui",
3
- "version": "1.1.25",
3
+ "version": "1.1.26",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Matt Danner (Monolith Forensics LLC)",
@@ -24,9 +24,14 @@
24
24
  "deepmerge": "^4.3.1",
25
25
  "lucide-react": "^0.378.0",
26
26
  "moment": "^2.29.1",
27
+ "nanoid": "^5.0.7",
28
+ "overlayscrollbars-react": "^0.5.6",
27
29
  "react-dropzone": "^14.2.3",
28
30
  "react-icons": "^5.2.1",
29
31
  "react-textarea-autosize": "^8.5.3",
32
+ "react-virtualized-auto-sizer": "^1.0.24",
33
+ "react-window": "^1.8.10",
34
+ "short-uuid": "^5.2.0",
30
35
  "styled-components": "^6.1.11",
31
36
  "use-debounce": "^10.0.0"
32
37
  },
@@ -34,6 +39,7 @@
34
39
  "react": "18.2.0"
35
40
  },
36
41
  "devDependencies": {
42
+ "@types/react-window": "^1.8.8",
37
43
  "typescript": "^5.5.4"
38
44
  }
39
45
  }