@monolith-forensics/monolith-ui 1.1.24 → 1.1.26

package/dist/DateInput/DateInput.js

@@ -489,9 +489,7 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
                                 }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
                         }
                         return ((0, jsx_runtime_1.jsx)(InputSegment, { className: "input", contentEditable: true, suppressContentEditableWarning: true, tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
-                    }), utc && (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), enableCalendar && isOpen && ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: (0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, children: (0, jsx_runtime_1.jsx)(core_1.StyledContent, { maxDropdownHeight: "fit-content", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.Calendar, { value: value ? (0, moment_1.default)(value).toDate() : undefined, clearable: false, min: min, max: max, 
-                                // hourFormat={hourFormat}
-                                onChange: (date) => {
+                    }), utc && (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), enableCalendar && isOpen && ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: (0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, children: (0, jsx_runtime_1.jsx)(core_1.StyledContent, { maxDropdownHeight: "fit-content", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.Calendar, { defaultValue: value ? (0, moment_1.default)(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
                                     setValue((prev) => {
                                         // make copy of prev variable
                                         const oldValue = (0, moment_1.default)(prev).toISOString();

package/dist/SelectBox/SelectBox.js

@@ -440,9 +440,9 @@ const SelectBox = (0, styled_components_1.default)(({ className, data = [], plac
             setDropDownHeight(bottomHeight);
         };
     }, [topHeight, bottomHeight, isOpen]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsxs)(exports.StyledInputContainer, { ref: refs.setReference, onClick: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)(__1.Input, { ref: inputRef, onChange: debouncedHandleOnChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable }), clearable && (selected || !!((_h = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _h === void 0 ? void 0 : _h.value)) ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, { onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsxs)(exports.StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [(0, jsx_runtime_1.jsx)(__1.Input, { ref: inputRef, onChange: debouncedHandleOnChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable }), clearable && (selected || !!((_h = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _h === void 0 ? void 0 : _h.value)) ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { className: "input-btn", onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, { onClick: (e) => {
                             e.preventDefault();
-                            e.stopPropagation();
+                            // e.stopPropagation();
                         }, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();

package/dist/Table/Table.d.ts

@@ -0,0 +1,90 @@
+interface ColumnProps {
+    className?: string;
+    key?: string | number;
+    dataField: string;
+    caption: string;
+    columnId?: string | number;
+    allowSorting?: boolean;
+    allowReorder?: boolean;
+    resizeEnabled?: boolean;
+    width?: number;
+    sorting?: {
+        active: boolean;
+        direction: "asc" | "desc";
+    };
+    format?: {
+        type: string;
+    };
+    props?: any;
+    render: (data: any, options: any) => React.ReactNode;
+    componentType?: string;
+}
+export declare const Column: {
+    ({ dataField, caption, columnId, sorting, format, componentType, }: ColumnProps): null;
+    displayName: string;
+};
+interface onResizeProps {
+    columns: {
+        dataField: string;
+        width: number;
+    }[];
+}
+type SelectionState = "all" | "none" | "someIncluded" | "someExcluded";
+interface TableInstanceProps {
+    setTableInstance: (e: any) => void;
+    toggleCompact: () => void;
+    toggleStripes: () => void;
+    isCompact: boolean;
+    isStriped: boolean;
+    getVirtualSelectionTotal: () => number;
+    getSelectedRows: () => any[];
+    getExcludedRows: () => any[];
+    getSelectionState: () => SelectionState;
+    clearSelections: () => void;
+    onColumnResize: (e: onResizeProps) => void;
+}
+export declare const useTable: () => {
+    setTableInstance: import("react").Dispatch<import("react").SetStateAction<TableInstanceProps | null>>;
+    toggleCompact: () => void | undefined;
+    toggleStripes: () => void | undefined;
+    isCompact: boolean;
+    isStriped: boolean;
+    getVirtualSelectionTotal: () => number;
+    getSelectedRows: () => any[];
+    getExcludedRows: () => any[];
+    getSelectionState: () => {};
+    clearSelections: () => void | undefined;
+    onColumnResize: (e: onResizeProps) => void | undefined;
+};
+interface TableProps {
+    className?: string;
+    children: React.ReactNode | React.ReactNode[];
+    data: {
+        [key: string]: any;
+    }[];
+    rowHeight?: number;
+    headerHeight?: number;
+    tableInstance?: TableInstanceProps;
+    queryKey?: any;
+    totalRecords?: number;
+    compact?: boolean;
+    focusedRow?: {
+        [key: string]: any;
+    };
+    keyValue?: string;
+    onScroll?: (e: any) => void;
+    allowColumnResize?: boolean;
+    allowColumnReorder?: boolean;
+    showActionColumn?: boolean;
+    showSelection?: boolean;
+    selectAll?: boolean;
+    reloadFn?: () => void;
+    onColumnReorder?: (e: any) => void;
+    onSelectionChanged?: (e: any) => void;
+    onActionButtonClick?: (e: any) => void;
+    onHeaderClick?: (e: any) => void;
+    onColumnResize?: (e: any) => void;
+    onRowUpdated?: (e: any) => void;
+}
+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>>;
+export default Table;

package/dist/Table/Table.js

@@ -0,0 +1,740 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTable = exports.Column = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_window_1 = require("react-window");
+const react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
+const overlayscrollbars_react_1 = require("overlayscrollbars-react");
+const short_uuid_1 = __importDefault(require("short-uuid"));
+const styled_components_1 = __importStar(require("styled-components"));
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const lucide_react_2 = require("lucide-react");
+const moment_1 = __importDefault(require("moment"));
+const __1 = require("..");
+const MIN_COLUMN_WIDTH = 125;
+const Column = ({ dataField, caption, columnId = short_uuid_1.default.generate(), sorting, format, componentType = "Column", }) => {
+    return null;
+};
+exports.Column = Column;
+exports.Column.displayName = "Column";
+const StyledTable = styled_components_1.default.table `
+  position: relative;
+  border-collapse: separate;
+  border-spacing: 0;
+  min-width: 100%;
+  border-top: none;
+  border-radius: 4px;
+`;
+const StyledThead = styled_components_1.default.thead `
+  position: relative;
+`;
+const StyledTbody = styled_components_1.default.tbody `
+  & [data-even="true"].tr td {
+    background-color: ${({ stripes, theme }) => stripes ? theme.palette.background.secondary : "transparent"};
+  }
+  & .tr:hover td {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+`;
+const StyledTr = styled_components_1.default.tr `
+  position: relative;
+  height: ${({ compact, rowHeight }) => rowHeight ? rowHeight : compact ? 28 : 38}px;
+  width: 100%;
+  display: flex;
+
+  & .action-button {
+    opacity: 0;
+    border-radius: 4px;
+  }
+  * .custom-action-button {
+    opacity: 0;
+  }
+
+  &:hover .action-button,
+  &:hover .custom-action-button {
+    opacity: 1;
+  }
+
+  &.focused .td {
+    border-top: 1px solid ${({ theme }) => theme.palette.primary.main};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.primary.main} !important;
+    transition: border 0.3s ease;
+  }
+  &.focused .td:first-child {
+    border-left: 1px solid ${({ theme }) => theme.palette.primary.main};
+  }
+  &.focused .td:last-child {
+    border-right: 1px solid ${({ theme }) => theme.palette.primary.main};
+  }
+
+  // last item in row
+  & .td:last-child {
+    width: auto !important;
+    max-width: none !important;
+  }
+`;
+const StyledHeaderRow = (0, styled_components_1.default)(StyledTr) `
+  height: ${({ compact, headerHeight }) => headerHeight ? headerHeight : compact ? 28 : 38}px;
+
+  display: table-row;
+
+  // last item in row
+  & .th:last-child {
+    width: auto !important;
+    max-width: none !important;
+  }
+`;
+const StyledTd = styled_components_1.default.td `
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: ${({ compact }) => (compact ? "3px" : "8px")};
+  font-size: ${({ compact }) => (compact ? "10px" : "12px")};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+
+  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+
+  &:first-child {
+    border-left: 1px solid ${({ theme }) => theme.palette.divider};
+  }
+
+  &:last-child {
+    border-right: 1px solid ${({ theme }) => theme.palette.divider};
+  }
+`;
+const StyledTh = styled_components_1.default.th `
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  flex: 1;
+  vertical-align: middle;
+  user-select: none;
+  padding: ${({ compact }) => (compact ? "3px" : "8px")};
+  font-size: ${({ compact }) => (compact ? "10px" : "12px")};
+  text-align: left;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  background-color: ${({ theme }) => theme.palette.background.alt};
+
+  border-top: 1px solid ${({ theme }) => theme.palette.divider};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+
+  &:first-child {
+    border-left: 1px solid ${({ theme }) => theme.palette.divider};
+    border-top-left-radius: 4px;
+  }
+
+  &:last-child {
+    border-right: 1px solid ${({ theme }) => theme.palette.divider};
+    border-top-right-radius: 4px;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.name === "DARK" ? "#2e2e2e" : "#f5f5f5"};
+    cursor: pointer;
+  }
+  &.dragging:active {
+    cursor: grabbing;
+  }
+  &.dragover .resizer {
+    opacity: 1;
+    background: ${(props) => props.theme.palette.primary.main};
+    cursor: grabbing;
+  }
+`;
+const enableResizeClass = (dataField) => {
+    document
+        .querySelectorAll(`.resizer.column-${dataField}`)
+        .forEach((resizer) => {
+        resizer.classList.add("isResizing");
+    });
+};
+const disableResizeClass = (dataField) => {
+    document
+        .querySelectorAll(`.resizer.column-${dataField}`)
+        .forEach((resizer) => {
+        resizer.classList.remove("isResizing");
+    });
+};
+const resizeHandler = ({ event, columnId, columnProps, onResize, onResizeFinished, }) => {
+    let col = event.target
+        .parentElement;
+    let newColumns = [];
+    let x = 0;
+    let w = 0;
+    const mouseMoveHandler = function (e) {
+        const selectedColumn = document.querySelectorAll(`.col-${columnId}`);
+        const columnHeaders = document.querySelectorAll(`.th.col-${columnId}`);
+        const dx = e.clientX - x;
+        let newWidth = w + dx;
+        if (newWidth < MIN_COLUMN_WIDTH) {
+            newWidth = MIN_COLUMN_WIDTH;
+        }
+        selectedColumn.forEach((col) => {
+            var _a;
+            col.style.width = `${newWidth}px`;
+            col.style.maxWidth = `${newWidth}px`;
+            col.style.minWidth = `${newWidth}px`;
+            newColumns.push({
+                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
+                width: newWidth,
+            });
+        });
+        newColumns = Array.from(columnHeaders).map((col) => {
+            var _a;
+            return {
+                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
+                width: newWidth,
+            };
+        });
+        onResize({
+            columns: newColumns,
+        });
+    };
+    const mouseUpHandler = function () {
+        var _a, _b, _c;
+        disableResizeClass(columnId);
+        document.removeEventListener("mousemove", mouseMoveHandler);
+        document.removeEventListener("mouseup", mouseUpHandler);
+        onResizeFinished === null || onResizeFinished === void 0 ? void 0 : onResizeFinished({
+            column: columnProps,
+            columnId: columnId,
+            columns: newColumns,
+            targetColumn: document.querySelector(`.col-${columnId}`),
+            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,
+        });
+    };
+    x = event.clientX;
+    const styles = window.getComputedStyle(col);
+    w = parseInt(styles.width, 10);
+    document.addEventListener("mousemove", mouseMoveHandler);
+    document.addEventListener("mouseup", mouseUpHandler);
+    enableResizeClass(columnId);
+};
+const Resizer = (0, styled_components_1.default)(({ className, resizeHandler, onResize = () => { }, onResizeFinished, column, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `${className} resizer column-${column.props.columnId}`, onClick: (e) => {
+            e.stopPropagation();
+            e.nativeEvent.stopImmediatePropagation();
+            e.preventDefault();
+        }, onMouseDown: (e) => {
+            e.stopPropagation();
+            e.nativeEvent.stopImmediatePropagation();
+            e.preventDefault();
+            if (resizeHandler)
+                resizeHandler({
+                    event: e,
+                    columnId: column.props.columnId,
+                    columnProps: column.props,
+                    onResize: onResize,
+                    onResizeFinished: onResizeFinished,
+                });
+        } }));
+}) `
+  &.resizer {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 3px;
+    background-color: ${(props) => props.theme.palette.divider};
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+    opacity: 0;
+    &.isResizing {
+      opacity: 1;
+      background: ${(props) => props.theme.palette.primary.main};
+    }
+    // dragover css
+    &.dragover {
+      opacity: 1;
+      background: ${(props) => props.theme.palette.primary.main};
+    }
+  }
+`;
+const HeaderRowComponent = ({ columns, _compact, resizeState, headerHeight, onHeaderClick, onColumnResize, dropColumn, dragColumn, showSelection, selectAll, selectionState, handleSelectAll, handleColumnReorder, }) => {
+    const theme = (0, styled_components_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(StyledThead, { children: (0, jsx_runtime_1.jsx)(StyledHeaderRow, { compact: _compact, headerHeight: headerHeight, children: columns.map((column) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+                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;
+                if (savedColSize < MIN_COLUMN_WIDTH) {
+                    savedColSize = MIN_COLUMN_WIDTH;
+                }
+                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) => {
+                        if (column.props.allowSorting !== false)
+                            onHeaderClick === null || onHeaderClick === void 0 ? void 0 : onHeaderClick(column.props);
+                    }, draggable: column.props.allowReorder !== false ? true : false, onDragOver: (e) => {
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = "move";
+                    }, onDragEnter: (e) => {
+                        e.target.classList.add("dragover");
+                        dropColumn.current = column.props;
+                    }, onDragLeave: (e) => {
+                        e.target.classList.remove("dragover");
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        e.target.classList.remove("dragover");
+                        handleColumnReorder(dragColumn.current, dropColumn.current);
+                    }, onDragStart: (e) => {
+                        //set dragging class
+                        dragColumn.current = column.props;
+                        e.target.classList.add("dragging");
+                    }, onDragEnd: (e) => {
+                        e.target.classList.remove("dragging");
+                    }, style: {
+                        width: ((_e = column === null || column === void 0 ? void 0 : column.props) === null || _e === void 0 ? void 0 : _e.width)
+                            ? (_f = column === null || column === void 0 ? void 0 : column.props) === null || _f === void 0 ? void 0 : _f.width
+                            : savedColSize || "auto",
+                        maxWidth: ((_g = column === null || column === void 0 ? void 0 : column.props) === null || _g === void 0 ? void 0 : _g.width)
+                            ? (_h = column === null || column === void 0 ? void 0 : column.props) === null || _h === void 0 ? void 0 : _h.width
+                            : savedColSize || "auto",
+                        minWidth: ((_j = column === null || column === void 0 ? void 0 : column.props) === null || _j === void 0 ? void 0 : _j.width)
+                            ? (_k = column === null || column === void 0 ? void 0 : column.props) === null || _k === void 0 ? void 0 : _k.width
+                            : savedColSize || MIN_COLUMN_WIDTH,
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: "flex",
+                                alignContent: "center",
+                                alignItems: "center",
+                                pointerEvents: column.props.dataField === "action" ? "all" : "none",
+                            }, children: [showSelection && column.props.dataField === "action" ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                        display: "flex",
+                                        alignContent: "center",
+                                        alignItems: "center",
+                                        cursor: "pointer",
+                                        color: theme.palette.text.secondary,
+                                        marginRight: 5,
+                                        marginLeft: 3,
+                                    }, 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) => {
+                                resizeState.current = e;
+                            }, onResizeFinished: (e) => {
+                                onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize(e);
+                            } }))] }), short_uuid_1.default.generate()));
+            }) }) }));
+};
+const InnerElement = (0, react_1.forwardRef)((_a, ref) => {
+    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"]);
+    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 })] })));
+});
+const Row = ({ data, index, style }) => {
+    const { data: dataRows, columns, focusedRow, keyValue, _compact, queryKey, reloadFn, headerHeight, resizeState, onRowUpdated, } = data;
+    const item = (dataRows === null || dataRows === void 0 ? void 0 : dataRows[index]) || {};
+    const handleRowUpdated = (data) => {
+        onRowUpdated === null || onRowUpdated === void 0 ? void 0 : onRowUpdated({ rowData: item, updateData: data });
+    };
+    const isRowFocused = focusedRow
+        ? focusedRow[keyValue] === item[keyValue]
+        : false;
+    const row = columns.map((column) => {
+        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;
+        let value = null;
+        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;
+        if (savedColSize < MIN_COLUMN_WIDTH) {
+            savedColSize = MIN_COLUMN_WIDTH;
+        }
+        // parse datafield dot syntax
+        if ((_d = column.props.dataField) === null || _d === void 0 ? void 0 : _d.includes(".")) {
+            const fields = (_e = column.props.dataField) === null || _e === void 0 ? void 0 : _e.split(".");
+            value = fields.reduce((acc, field) => {
+                return acc === null || acc === void 0 ? void 0 : acc[field];
+            }, item);
+        }
+        else
+            value = item === null || item === void 0 ? void 0 : item[column.props.dataField];
+        // format date values
+        if (column.props.dataType === "date" &&
+            ((_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) &&
+            value) {
+            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;
+            value = (0, moment_1.default)(value).format(dateFormat);
+        }
+        if (column.props.render) {
+            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)
+                        ? (_p = column === null || column === void 0 ? void 0 : column.props) === null || _p === void 0 ? void 0 : _p.width
+                        : savedColSize || "auto", maxWidth: ((_q = column === null || column === void 0 ? void 0 : column.props) === null || _q === void 0 ? void 0 : _q.width)
+                        ? (_r = column === null || column === void 0 ? void 0 : column.props) === null || _r === void 0 ? void 0 : _r.width
+                        : savedColSize || "auto", minWidth: ((_s = column === null || column === void 0 ? void 0 : column.props) === null || _s === void 0 ? void 0 : _s.width)
+                        ? (_t = column === null || column === void 0 ? void 0 : column.props) === null || _t === void 0 ? void 0 : _t.width
+                        : 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, {
+                        queryKey: queryKey || "",
+                        reload: reloadFn,
+                        onRowUpdated: handleRowUpdated,
+                    })] }, short_uuid_1.default.generate()));
+        }
+        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: {
+                width: ((_y = column === null || column === void 0 ? void 0 : column.props) === null || _y === void 0 ? void 0 : _y.width)
+                    ? (_z = column === null || column === void 0 ? void 0 : column.props) === null || _z === void 0 ? void 0 : _z.width
+                    : savedColSize || "auto",
+                maxWidth: ((_0 = column === null || column === void 0 ? void 0 : column.props) === null || _0 === void 0 ? void 0 : _0.width)
+                    ? (_1 = column === null || column === void 0 ? void 0 : column.props) === null || _1 === void 0 ? void 0 : _1.width
+                    : savedColSize || "auto",
+                minWidth: ((_2 = column === null || column === void 0 ? void 0 : column.props) === null || _2 === void 0 ? void 0 : _2.width)
+                    ? (_3 = column === null || column === void 0 ? void 0 : column.props) === null || _3 === void 0 ? void 0 : _3.width
+                    : savedColSize || MIN_COLUMN_WIDTH,
+            }, children: [column.props.resizeEnabled !== false && (0, jsx_runtime_1.jsx)(Resizer, { column: column }), value] }, short_uuid_1.default.generate()));
+    });
+    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()));
+};
+const useTable = () => {
+    const [tableInstance, setTableInstance] = (0, react_1.useState)(null);
+    return {
+        setTableInstance,
+        toggleCompact: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.toggleCompact(),
+        toggleStripes: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.toggleStripes(),
+        isCompact: (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.isCompact) || false,
+        isStriped: (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.isStriped) || false,
+        getVirtualSelectionTotal: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getVirtualSelectionTotal()) || 0,
+        getSelectedRows: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getSelectedRows()) || [],
+        getExcludedRows: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getExcludedRows()) || [],
+        getSelectionState: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getSelectionState()) || {},
+        clearSelections: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.clearSelections(),
+        onColumnResize: (e) => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.onColumnResize(e),
+    };
+};
+exports.useTable = useTable;
+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, }) => {
+    const theme = (0, styled_components_1.useTheme)();
+    const rootRef = (0, react_1.useRef)(null);
+    const [initialize, getInstance] = (0, overlayscrollbars_react_1.useOverlayScrollbars)({
+        options: {
+            scrollbars: {
+                autoHide: "scroll",
+                autoHideDelay: 500,
+            },
+        },
+        events: { scroll: (_, event) => onScroll === null || onScroll === void 0 ? void 0 : onScroll(event) },
+    });
+    const [targetElm, setTargetElm] = (0, react_1.useState)(null);
+    const [listElm, setListElm] = (0, react_1.useState)(null);
+    const dragColumn = (0, react_1.useRef)(null);
+    const dropColumn = (0, react_1.useRef)(null);
+    const [_compact, setCompact] = (0, react_1.useState)(compact);
+    const [stripes, setStripes] = (0, react_1.useState)(false);
+    const [selectedRows, setSelectedRows] = (0, react_1.useState)([]);
+    const [virtualSelectionTotal, setVirtualSelectionTotal] = (0, react_1.useState)(0);
+    const [excludedRows, setExcludedRows] = (0, react_1.useState)([]);
+    const [selectionState, setSelectionState] = (0, react_1.useState)("none");
+    const resizeState = (0, react_1.useRef)([]);
+    // check if children is an array
+    children = (0, react_1.useMemo)(() => {
+        return Array.isArray(children) ? children : [children];
+    }, [children]);
+    let columns = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        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) => {
+            return (0, react_1.cloneElement)(column, {
+                columnId: short_uuid_1.default.generate(),
+                allowResize: allowColumnResize !== undefined
+                    ? allowColumnResize
+                    : column.props.allowResize,
+                allowReorder: allowColumnReorder !== undefined
+                    ? allowColumnReorder
+                    : column.props.allowReorder,
+                resizeEnabled: allowColumnResize !== undefined
+                    ? allowColumnResize
+                    : column.props.resizeEnabled,
+            });
+        });
+    }, [children]);
+    const [columnOrder, setColumnOrder] = (0, react_1.useState)(columns.map((col, index) => {
+        var _a, _b;
+        return {
+            column: (_a = col.props) === null || _a === void 0 ? void 0 : _a.dataField,
+            order: ((_b = col.props) === null || _b === void 0 ? void 0 : _b.order) || index,
+        };
+    }));
+    const handleColumnReorder = (dragColumn, dropColumn) => {
+        var _a;
+        const dropColumnOrder = (_a = columnOrder.find((col) => col.column === dropColumn.dataField)) === null || _a === void 0 ? void 0 : _a.order;
+        const newColumnOrder = columnOrder.map((col) => {
+            if (col.column === dragColumn.dataField) {
+                return { column: col.column, order: dropColumnOrder + 1 };
+            }
+            else {
+                return col.order > dropColumnOrder
+                    ? Object.assign(Object.assign({}, col), { order: col.order + 1 }) : col;
+            }
+        });
+        onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(newColumnOrder);
+        setColumnOrder(newColumnOrder);
+    };
+    const handleSelectAll = () => {
+        let newSelectionState = null;
+        let newVirtualSelectionTotal = null;
+        if (selectionState === "all") {
+            // clear current selections
+            setSelectedRows([]);
+            // turn off all rows selected
+            newSelectionState = "none";
+            setSelectionState("none");
+            // clear excluded rows
+            setExcludedRows([]);
+            newVirtualSelectionTotal = 0;
+            setVirtualSelectionTotal(newVirtualSelectionTotal);
+        }
+        else {
+            // turn on all rows selected
+            newSelectionState = "all";
+            setSelectionState("all");
+            // clear excluded rows
+            setExcludedRows([]);
+            newVirtualSelectionTotal = totalRecords;
+            setVirtualSelectionTotal(newVirtualSelectionTotal);
+        }
+        onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged({
+            selectedRows: [],
+            excludedRows: [],
+            selectionState: newSelectionState,
+            virtualSelectionTotal: newVirtualSelectionTotal,
+        });
+    };
+    const handleSelectRow = ({ rowData, checked, }) => {
+        let newSelectedRows = [];
+        let newExcludedRows = [];
+        let newSelectionState = null;
+        let newVirtualSelectionTotal = null;
+        if (selectionState === "all") {
+            newExcludedRows = [...excludedRows, rowData];
+            newSelectionState = "someExcluded";
+            newVirtualSelectionTotal = totalRecords ? totalRecords - 1 : 0;
+        }
+        else if (selectionState === "none") {
+            newSelectedRows = [rowData];
+            newSelectionState = "someIncluded";
+            newVirtualSelectionTotal = 1;
+        }
+        else if (selectionState === "someExcluded") {
+            newSelectionState = "someExcluded";
+            newSelectedRows = selectedRows;
+            if (checked) {
+                // remove from excluded rows
+                newExcludedRows = excludedRows.filter((row) => keyValue ? (row === null || row === void 0 ? void 0 : row[keyValue]) !== (rowData === null || rowData === void 0 ? void 0 : rowData[keyValue]) : false);
+                newVirtualSelectionTotal = virtualSelectionTotal
+                    ? virtualSelectionTotal + 1
+                    : 0;
+            }
+            else {
+                // add to excluded rows
+                newExcludedRows = [...excludedRows, rowData];
+                newVirtualSelectionTotal = virtualSelectionTotal
+                    ? virtualSelectionTotal - 1
+                    : 0;
+            }
+        }
+        else if (selectionState === "someIncluded") {
+            newSelectionState = "someIncluded";
+            newExcludedRows = excludedRows;
+            if (checked) {
+                // add to selected rows
+                newSelectedRows = [...selectedRows, rowData];
+                newVirtualSelectionTotal = virtualSelectionTotal
+                    ? virtualSelectionTotal + 1
+                    : 0;
+            }
+            else {
+                // remove from selected rows
+                newSelectedRows = selectedRows.filter((row) => keyValue ? row[keyValue] !== rowData[keyValue] : false);
+                newVirtualSelectionTotal = virtualSelectionTotal
+                    ? virtualSelectionTotal - 1
+                    : 0;
+            }
+        }
+        if (newVirtualSelectionTotal === totalRecords) {
+            newSelectionState = "all";
+        }
+        else if (newVirtualSelectionTotal === 0) {
+            newSelectionState = "none";
+        }
+        setSelectedRows(newSelectedRows);
+        setExcludedRows(newExcludedRows);
+        setVirtualSelectionTotal(newVirtualSelectionTotal);
+        setSelectionState(newSelectionState);
+        onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged({
+            selectedRows: newSelectedRows,
+            excludedRows: newExcludedRows,
+            selectionState: newSelectionState,
+            virtualSelectionTotal: newVirtualSelectionTotal,
+        });
+    };
+    // sort columns
+    columns = (0, react_1.useMemo)(() => columns.sort((a, b) => {
+        var _a, _b;
+        const aOrder = (_a = columnOrder.find((col) => col.column === a.props.dataField)) === null || _a === void 0 ? void 0 : _a.order;
+        const bOrder = (_b = columnOrder.find((col) => col.column === b.props.dataField)) === null || _b === void 0 ? void 0 : _b.order;
+        return aOrder - bOrder;
+    }), [columnOrder, columns]);
+    const hiddenColumns = columns
+        .filter((col) => col.props.visible === false)
+        .map((col) => col.props.dataField);
+    // insert action column as first column
+    showActionColumn &&
+        (columns = [
+            (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: {
+                        display: "flex",
+                        alignContent: "center",
+                        alignItems: "center",
+                        padding: 4,
+                        color: theme.palette.text.secondary,
+                    }, children: [showSelection && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                display: "flex",
+                                alignContent: "center",
+                                alignItems: "center",
+                                cursor: "pointer",
+                                color: theme.palette.text.secondary,
+                                marginRight: 5,
+                            }, children: (0, jsx_runtime_1.jsx)(__1.CheckBox, { value: selectionState === "all"
+                                    ? true
+                                    : selectionState === "someIncluded"
+                                        ? !!selectedRows.find((row) => keyValue
+                                            ? row[keyValue] === rowData[keyValue]
+                                            : false)
+                                        : selectionState === "someExcluded"
+                                            ? !excludedRows.find((row) => keyValue
+                                                ? row[keyValue] === rowData[keyValue]
+                                                : false)
+                                            : false, onChange: (newValue) => handleSelectRow({ rowData, checked: newValue }) }) })), (0, jsx_runtime_1.jsx)("div", { className: "action-button", title: "Show More Details", style: {
+                                display: "flex",
+                                alignContent: "center",
+                                alignItems: "center",
+                                cursor: "pointer",
+                                color: theme.palette.primary.main,
+                                marginRight: 5,
+                            }, onClick: (e) => {
+                                onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData);
+                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2Icon, { size: _compact ? 8 : 12 }) })] })) }, short_uuid_1.default.generate()),
+            ...columns,
+        ]);
+    (0, react_1.useEffect)(() => {
+        if (targetElm && listElm) {
+            initialize({
+                target: targetElm,
+                elements: {
+                    viewport: listElm,
+                },
+            });
+            return () => { var _a; return (_a = getInstance()) === null || _a === void 0 ? void 0 : _a.destroy(); };
+        }
+    }, [targetElm, listElm]);
+    (0, react_1.useEffect)(() => {
+        if (tableInstance) {
+            tableInstance.setTableInstance({
+                getSelectedRows: () => selectedRows,
+                getExcludedRows: () => excludedRows,
+                getVirtualSelectionTotal: () => virtualSelectionTotal,
+                getSelectionState: () => selectionState,
+                clearSelections: () => {
+                    setSelectedRows([]);
+                    setVirtualSelectionTotal(0);
+                    setSelectionState("none");
+                    setExcludedRows([]);
+                },
+                toggleCompact: () => setCompact(!_compact),
+                isCompact: _compact,
+                toggleStripes: () => setStripes(!stripes),
+                isStriped: stripes,
+            });
+        }
+    }, [
+        selectedRows,
+        excludedRows,
+        virtualSelectionTotal,
+        selectionState,
+        _compact,
+        stripes,
+        tableInstance,
+    ]);
+    (0, react_1.useEffect)(() => {
+        // Scroll to selected row if outside of viewport
+        if (focusedRow) {
+            const focusedRowElm = keyValue
+                ? document.querySelector(`[data-type="tr"][data-key="${focusedRow[keyValue]}"]`)
+                : null;
+            if (focusedRowElm) {
+                focusedRowElm.scrollIntoView({
+                    behavior: "smooth",
+                    block: "nearest",
+                    inline: "nearest",
+                });
+            }
+        }
+    }, [focusedRow]);
+    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: {
+                        data,
+                        columns: columns.filter((col) => !hiddenColumns.includes(col.props.dataField)),
+                        focusedRow,
+                        keyValue,
+                        _compact,
+                        queryKey,
+                        reloadFn,
+                        rowHeight: rowHeight ? rowHeight : _compact ? 28 : 38,
+                        headerHeight: headerHeight
+                            ? headerHeight
+                            : _compact
+                                ? 28
+                                : 38,
+                        resizeState,
+                        onRowUpdated,
+                        tableWidth: width,
+                    }, 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 }) })) }) }));
+}) `
+  position: relative;
+  flex: 1 1 auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .os-scrollbar {
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  .action-column {
+    max-width: 55px;
+  }
+`;
+exports.default = Table;

package/dist/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Table";
+export { Column } from "./Table";

package/dist/Table/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = exports.default = void 0;
+var Table_1 = require("./Table");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+var Table_2 = require("./Table");
+Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return Table_2.Column; } });

package/dist/TagBox/TagBox.js

@@ -542,7 +542,7 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
     const scrollActive = scrollEl
         ? (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) > (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.clientHeight)
         : false;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className + " mfTagBox", children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsxs)(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className + " mfTagBox", children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsxs)(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onMouseDown: () => {
                     setIsOpen(true);
                     handleFocus();
                 }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [(0, jsx_runtime_1.jsx)(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: (0, jsx_runtime_1.jsxs)(PillContainer, { size: size, children: [selectedItems.map((item, index) => ((0, jsx_runtime_1.jsx)(__1.Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
@@ -556,15 +556,29 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
                                         }
                                         update();
                                     }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue) }))] }) }), clearable &&
-                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), isOpen && ((0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: (0, jsx_runtime_1.jsx)(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0, children: !loading && grouped
-                        ? groups.map((group, index) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
-                                    return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(item), "data-highlighted": isObjectArray
+                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, { onClick: (e) => {
+                            e.preventDefault();
+                        }, onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            toggleOpen();
+                        } })) : null] }), isOpen && ((0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: (0, jsx_runtime_1.jsx)(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0, children: !loading && grouped
+                        ? groups.map((group) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
+                                    return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                handleItemClick(item);
+                                            }, "data-highlighted": isObjectArray
                                                 ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
                                                     item.value
                                                 : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
                                 })] }, group.label)))
                         : filteredItems.map((item, index) => {
-                            return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(item), "data-highlighted": isObjectArray
+                            return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleItemClick(item);
+                                    }, "data-highlighted": isObjectArray
                                         ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
                                             item.value
                                         : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));

package/dist/index.d.ts

@@ -20,5 +20,7 @@ export { default as Input } from "./Input";
 export { default as Tooltip } from "./Tooltip";
 export { default as Pill } from "./Pill";
 export { default as Calendar } from "./Calendar";
+export { default as Table } from "./Table";
+export { Column } from "./Table";
 export { default as MonolithUIProvider } from "./MonolithUIProvider";
 export { useMonolithUITheme } from "./MonolithUIProvider";

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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;
 var FormSection_1 = require("./FormSection");
 Object.defineProperty(exports, "FormSection", { enumerable: true, get: function () { return __importDefault(FormSection_1).default; } });
 var Grid_1 = require("./Grid");
@@ -49,6 +49,10 @@ var Pill_1 = require("./Pill");
 Object.defineProperty(exports, "Pill", { enumerable: true, get: function () { return __importDefault(Pill_1).default; } });
 var Calendar_1 = require("./Calendar");
 Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return __importDefault(Calendar_1).default; } });
+var Table_1 = require("./Table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+var Table_2 = require("./Table");
+Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return Table_2.Column; } });
 var MonolithUIProvider_1 = require("./MonolithUIProvider");
 Object.defineProperty(exports, "MonolithUIProvider", { enumerable: true, get: function () { return __importDefault(MonolithUIProvider_1).default; } });
 var MonolithUIProvider_2 = require("./MonolithUIProvider");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -24,9 +24,14 @@
     "deepmerge": "^4.3.1",
     "lucide-react": "^0.378.0",
     "moment": "^2.29.1",
+    "nanoid": "^5.0.7",
+    "overlayscrollbars-react": "^0.5.6",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-textarea-autosize": "^8.5.3",
+    "react-virtualized-auto-sizer": "^1.0.24",
+    "react-window": "^1.8.10",
+    "short-uuid": "^5.2.0",
     "styled-components": "^6.1.11",
     "use-debounce": "^10.0.0"
   },
@@ -34,6 +39,7 @@
     "react": "18.2.0"
   },
   "devDependencies": {
+    "@types/react-window": "^1.8.8",
     "typescript": "^5.5.4"
   }
 }