@monolith-forensics/monolith-ui 1.1.30 → 1.1.32

package/dist/Table/Table.js

@@ -1,4 +1,3 @@
-"use strict";
 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)
@@ -10,30 +9,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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");
-require("overlayscrollbars/overlayscrollbars.css");
-const short_uuid_1 = __importDefault(require("short-uuid"));
-const styled_components_1 = __importDefault(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("..");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FixedSizeList } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { useOverlayScrollbars } from "overlayscrollbars-react";
+import "overlayscrollbars/overlayscrollbars.css";
+import shortUUID from "short-uuid";
+import styled from "styled-components";
+import { cloneElement, forwardRef, useEffect, useMemo, useRef, useState, } from "react";
+import { Maximize2Icon } from "lucide-react";
+import { ArrowUpIcon, ArrowDownIcon } from "lucide-react";
+import moment from "moment";
+import { CheckBox } from "..";
 const MIN_COLUMN_WIDTH = 125;
-const Column = ({ dataField, caption, columnId = short_uuid_1.default.generate(), sorting, format, componentType = "Column", }) => {
+export const Column = ({ dataField, caption, columnId = shortUUID.generate(), sorting, format, }) => {
     return null;
 };
-exports.Column = Column;
-exports.Column.displayName = "Column";
-const StyledTable = styled_components_1.default.table `
+Column.displayName = "Column";
+const StyledTable = styled.table `
   position: relative;
   border-collapse: separate;
   border-spacing: 0;
@@ -41,10 +34,10 @@ const StyledTable = styled_components_1.default.table `
   border-top: none;
   border-radius: 4px;
 `;
-const StyledThead = styled_components_1.default.thead `
+const StyledThead = styled.thead `
   position: relative;
 `;
-const StyledTbody = styled_components_1.default.tbody `
+const StyledTbody = styled.tbody `
   & [data-even="true"].tr td {
     background-color: ${({ stripes, theme }) => stripes ? theme.palette.background.secondary : "transparent"};
   }
@@ -52,7 +45,7 @@ const StyledTbody = styled_components_1.default.tbody `
     background-color: ${({ theme }) => theme.palette.action.hover};
   }
 `;
-const StyledTr = styled_components_1.default.tr `
+const StyledTr = styled.tr `
   position: relative;
   height: ${({ compact, rowHeight }) => rowHeight ? rowHeight : compact ? 28 : 38}px;
   width: 100%;
@@ -89,7 +82,7 @@ const StyledTr = styled_components_1.default.tr `
     max-width: none !important;
   }
 `;
-const StyledHeaderRow = (0, styled_components_1.default)(StyledTr) `
+const StyledHeaderRow = styled(StyledTr) `
   height: ${({ compact, headerHeight }) => headerHeight ? headerHeight : compact ? 28 : 38}px;
 
   display: table-row;
@@ -100,7 +93,7 @@ const StyledHeaderRow = (0, styled_components_1.default)(StyledTr) `
     max-width: none !important;
   }
 `;
-const StyledTd = styled_components_1.default.td `
+const StyledTd = styled.td `
   position: relative;
   display: flex;
   align-items: center;
@@ -123,7 +116,7 @@ const StyledTd = styled_components_1.default.td `
     border-right: 1px solid ${({ theme }) => theme.palette.divider};
   }
 `;
-const StyledTh = styled_components_1.default.th `
+const StyledTh = styled.th `
   position: sticky;
   top: 0;
   z-index: 1;
@@ -164,7 +157,7 @@ const StyledTh = styled_components_1.default.th `
   }
 
   &:hover {
-    background-color: ${({ theme }) => theme.name === "DARK" ? "#2e2e2e" : "#f5f5f5"};
+    background-color: ${({ theme }) => theme.name === "dark" ? "#2e2e2e" : "#f5f5f5"};
     cursor: pointer;
   }
   &.dragging:active {
@@ -245,8 +238,8 @@ const resizeHandler = ({ event, columnId, columnProps, onResize, onResizeFinishe
     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) => {
+const Resizer = styled(({ className, resizeHandler, onResize = () => { }, onResizeFinished, column, }) => {
+    return (_jsx("div", { className: `${className} resizer column-${column.props.columnId}`, onClick: (e) => {
             e.stopPropagation();
             e.nativeEvent.stopImmediatePropagation();
             e.preventDefault();
@@ -287,13 +280,13 @@ const Resizer = (0, styled_components_1.default)(({ className, resizeHandler, on
   }
 `;
 const HeaderRowComponent = ({ columns, _compact, resizeState, headerHeight, onHeaderClick, onColumnResize, dropColumn, dragColumn, showSelection, selectAll, selectionState, handleSelectAll, handleColumnReorder, }) => {
-    return ((0, jsx_runtime_1.jsx)(StyledThead, { children: (0, jsx_runtime_1.jsx)(StyledHeaderRow, { compact: _compact, headerHeight: headerHeight, children: columns.map((column) => {
+    return (_jsx(StyledThead, { children: _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) => {
+                return (_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) => {
@@ -324,21 +317,21 @@ const HeaderRowComponent = ({ columns, _compact, resizeState, headerHeight, onHe
                         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: {
+                    }, children: [_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", { className: "action-header", 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) => {
+                            }, children: [showSelection && column.props.dataField === "action" ? (_jsx("div", { className: "action-header", children: selectAll && (_jsx(CheckBox, { value: selectionState === "all", partialCheck: selectionState.includes("some"), onChange: handleSelectAll })) })) : (_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) && (_jsx("div", { style: { marginLeft: 5 }, children: column.props.sorting.direction === "asc" ? (_jsx(ArrowUpIcon, { size: 12 })) : (_jsx(ArrowDownIcon, { size: 12 })) }))] }), ((_o = column === null || column === void 0 ? void 0 : column.props) === null || _o === void 0 ? void 0 : _o.resizeEnabled) !== false && (_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()));
+                            } }))] }), shortUUID.generate()));
             }) }) }));
 };
-const InnerElement = (0, react_1.forwardRef)((_a, ref) => {
+const InnerElement = 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 })] })));
+    return (_jsxs(StyledTable, Object.assign({ ref: ref }, rest, { children: [_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 }), _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;
@@ -370,22 +363,22 @@ const Row = ({ data, index, style }) => {
             ((_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);
+            value = moment(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)
+            return (_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, {
+                        : 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 && _jsx(Resizer, { column: column }), column.props.render(item, {
                         queryKey: queryKey || "",
                         reload: reloadFn,
                         onRowUpdated: handleRowUpdated,
-                    })] }, short_uuid_1.default.generate()));
+                    })] }, shortUUID.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: {
+        return (_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",
@@ -395,12 +388,12 @@ const Row = ({ data, index, style }) => {
                 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()));
+            }, children: [column.props.resizeEnabled !== false && _jsx(Resizer, { column: column }), value] }, shortUUID.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()));
+    return (_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 }, shortUUID.generate()));
 };
-const useTable = () => {
-    const [tableInstance, setTableInstance] = (0, react_1.useState)(null);
+export const useTable = () => {
+    const [tableInstance, setTableInstance] = useState(null);
     return {
         setTableInstance,
         toggleCompact: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.toggleCompact(),
@@ -415,10 +408,9 @@ const useTable = () => {
         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 rootRef = (0, react_1.useRef)(null);
-    const [initialize, getInstance] = (0, overlayscrollbars_react_1.useOverlayScrollbars)({
+const Table = styled(({ 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 rootRef = useRef(null);
+    const [initialize, getInstance] = useOverlayScrollbars({
         options: {
             scrollbars: {
                 autoHide: "scroll",
@@ -427,26 +419,26 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
         },
         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)([]);
+    const [targetElm, setTargetElm] = useState(null);
+    const [listElm, setListElm] = useState(null);
+    const dragColumn = useRef(null);
+    const dropColumn = useRef(null);
+    const [_compact, setCompact] = useState(compact);
+    const [stripes, setStripes] = useState(false);
+    const [selectedRows, setSelectedRows] = useState([]);
+    const [virtualSelectionTotal, setVirtualSelectionTotal] = useState(0);
+    const [excludedRows, setExcludedRows] = useState([]);
+    const [selectionState, setSelectionState] = useState("none");
+    const resizeState = useRef([]);
     // check if children is an array
-    children = (0, react_1.useMemo)(() => {
+    children = useMemo(() => {
         return Array.isArray(children) ? children : [children];
     }, [children]);
-    let columns = (0, react_1.useMemo)(() => {
+    let columns = 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(),
+        return (_b = (_a = children === null || children === void 0 ? void 0 : children.filter) === null || _a === void 0 ? void 0 : _a.call(children, (child) => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "Column"; })) === null || _b === void 0 ? void 0 : _b.map((column) => {
+            return cloneElement(column, {
+                columnId: shortUUID.generate(),
                 allowResize: allowColumnResize !== undefined
                     ? allowColumnResize
                     : column.props.allowResize,
@@ -459,7 +451,7 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
             });
         });
     }, [children]);
-    const [columnOrder, setColumnOrder] = (0, react_1.useState)(columns.map((col, index) => {
+    const [columnOrder, setColumnOrder] = useState(columns.map((col, index) => {
         var _a, _b;
         return {
             column: (_a = col.props) === null || _a === void 0 ? void 0 : _a.dataField,
@@ -580,7 +572,7 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
         });
     };
     // sort columns
-    columns = (0, react_1.useMemo)(() => columns.sort((a, b) => {
+    columns = 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;
@@ -592,7 +584,7 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
     // 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", { className: "action-column-container", children: [showSelection && ((0, jsx_runtime_1.jsx)("div", { className: "action-button", children: (0, jsx_runtime_1.jsx)(__1.CheckBox, { value: selectionState === "all"
+            _jsx(Column, { className: "action-column", dataField: "action", allowSorting: false, allowReorder: false, caption: "", width: showSelection ? 55 : 35, resizeEnabled: false, render: (rowData) => (_jsxs("div", { className: "action-column-container", children: [showSelection && (_jsx("div", { className: "action-button", children: _jsx(CheckBox, { value: selectionState === "all"
                                     ? true
                                     : selectionState === "someIncluded"
                                         ? !!selectedRows.find((row) => keyValue
@@ -602,12 +594,12 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
                                             ? !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", onClick: (e) => {
+                                            : false, onChange: (newValue) => handleSelectRow({ rowData, checked: newValue }) }) })), _jsx("div", { className: "action-button", title: "Show More Details", 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()),
+                            }, children: _jsx(Maximize2Icon, { size: _compact ? 8 : 12 }) })] })) }, shortUUID.generate()),
             ...columns,
         ]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (targetElm && listElm) {
             initialize({
                 target: targetElm,
@@ -618,7 +610,7 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
             return () => { var _a; return (_a = getInstance()) === null || _a === void 0 ? void 0 : _a.destroy(); };
         }
     }, [targetElm, listElm]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (tableInstance) {
             tableInstance.setTableInstance({
                 getSelectedRows: () => selectedRows,
@@ -646,7 +638,7 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
         stripes,
         tableInstance,
     ]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // Scroll to selected row if outside of viewport
         if (focusedRow) {
             const focusedRowElm = keyValue
@@ -661,7 +653,7 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
             }
         }
     }, [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: {
+    return (_jsx("div", { ref: rootRef, className: className + " table-wrapper", children: _jsx(AutoSizer, { children: ({ height, width }) => (_jsx("div", { style: { width, height }, "data-overlayscrollbars": "", ref: setTargetElm, children: _jsx(FixedSizeList, { overscanCount: 10, itemData: {
                         data,
                         columns: columns.filter((col) => !hiddenColumns.includes(col.props.dataField)),
                         focusedRow,
@@ -678,7 +670,7 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
                         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 }) })) }) }));
+                    }, height: height, innerElementType: (props) => (_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;
@@ -712,4 +704,4 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
     margin-right: 5px;
   }
 `;
-exports.default = Table;
+export default Table;

package/dist/Table/index.js

@@ -1,10 +1,2 @@
-"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; } });
+export { default } from "./Table";
+export { Column } from "./Table";

package/dist/TagBox/TagBox.js

@@ -1,4 +1,3 @@
-"use strict";
 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)
@@ -10,17 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_1 = require("@floating-ui/react");
-const react_2 = require("react");
-const __1 = require("..");
-const core_1 = require("../core");
-const StyledInputContainer = styled_components_1.default.div `
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { useFloating, flip, offset } from "@floating-ui/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Input, Tooltip, FieldLabel, Pill } from "..";
+import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, } from "../core";
+const StyledInputContainer = styled.div `
   position: relative;
   cursor: pointer;
 
@@ -144,9 +139,9 @@ const StyledInputContainer = styled_components_1.default.div `
   }
 `;
 // styled input with forwardRef
-const StyledInput = (0, styled_components_1.default)((_a) => {
+const StyledInput = styled((_a) => {
     var { className, inputRef } = _a, props = __rest(_a, ["className", "inputRef"]);
-    return ((0, jsx_runtime_1.jsx)(__1.Input, Object.assign({ ref: inputRef, className: className + " mfTagBox-input" }, props)));
+    return (_jsx(Input, Object.assign({ ref: inputRef, className: className + " mfTagBox-input" }, props)));
 }) `
   &.mfTagBox-input {
     pointer-events: all;
@@ -168,9 +163,9 @@ const StyledInput = (0, styled_components_1.default)((_a) => {
     }
   }
 `;
-const GroupTitle = (0, styled_components_1.default)((_a) => {
+const GroupTitle = styled((_a) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, props, { children: [(0, jsx_runtime_1.jsx)("div", { className: "group-line" }), (0, jsx_runtime_1.jsx)("div", { className: "group-label", children: children }), (0, jsx_runtime_1.jsx)("div", { className: "group-line" })] })));
+    return (_jsxs("div", Object.assign({ className: className }, props, { children: [_jsx("div", { className: "group-line" }), _jsx("div", { className: "group-label", children: children }), _jsx("div", { className: "group-line" })] })));
 }) `
   display: flex;
   flex-direction: row;
@@ -219,7 +214,7 @@ const GroupTitle = (0, styled_components_1.default)((_a) => {
     width: 100%;
   }
 `;
-const PillContainer = styled_components_1.default.div `
+const PillContainer = styled.div `
   display: flex;
   align-items: center;
   gap: 5px;
@@ -230,7 +225,7 @@ const PillContainer = styled_components_1.default.div `
     display: none;
   }
 `;
-const StyledInnerContainer = styled_components_1.default.div `
+const StyledInnerContainer = styled.div `
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -239,10 +234,10 @@ const StyledInnerContainer = styled_components_1.default.div `
     padding-right: 30px;
   }
 `;
-const ExtendedStyledContent = (0, styled_components_1.default)(core_1.StyledContent) `
+const ExtendedStyledContent = styled(StyledContent) `
   overflow-y: auto;
 `;
-const StyledItem = styled_components_1.default.div `
+const StyledItem = styled.div `
   line-height: 1;
   color: ${(props) => props.theme.palette.text.primary};
   border-radius: 3px;
@@ -289,16 +284,16 @@ const StyledItem = styled_components_1.default.div `
     color: ${(props) => props.theme.palette.text.primary};
   }
 `;
-const TagBox = (0, styled_components_1.default)(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, renderOption, TooltipContent, }) => {
+const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, renderOption, TooltipContent, }) => {
     var _a, _b, _c, _d, _e, _f;
     const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
-    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
-    const [selectedItems, setSelectedItems] = (0, react_2.useState)(defaultValue);
-    const [preSelected, setPreSelected] = (0, react_2.useState)(null);
-    const [customItems, setCustomItems] = (0, react_2.useState)([]);
-    const [searchValue, setSearchValue] = (0, react_2.useState)("");
-    const inputRef = (0, react_2.useRef)(null);
-    const scrollContainerRef = (0, react_2.useRef)(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItems, setSelectedItems] = useState(defaultValue);
+    const [preSelected, setPreSelected] = useState(null);
+    const [customItems, setCustomItems] = useState([]);
+    const [searchValue, setSearchValue] = useState("");
+    const inputRef = useRef(null);
+    const scrollContainerRef = useRef(null);
     const filteredItems = data
         .concat(customItems) // Add custom items to the list
         .filter((item) => {
@@ -342,13 +337,13 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
         }))
             .sort((a, b) => a.label.localeCompare(b.label))
         : [];
-    const { refs, floatingStyles, update } = (0, react_1.useFloating)({
+    const { refs, floatingStyles, update } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
         placement: "bottom-start",
         strategy: "absolute",
         // Handle collisions with the viewport
-        middleware: [(0, react_1.flip)(), (0, react_1.offset)(5)],
+        middleware: [flip(), offset(5)],
     });
     const toggleOpen = () => {
         setIsOpen((prev) => {
@@ -373,7 +368,7 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
         searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
         setIsOpen(false);
     };
-    const handleChangeSelection = (0, react_2.useCallback)((option) => {
+    const handleChangeSelection = useCallback((option) => {
         setSelectedItems((prev) => {
             onChange === null || onChange === void 0 ? void 0 : onChange([...prev, option]);
             return [...prev, option];
@@ -407,7 +402,7 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
             return newItems;
         });
     };
-    const handleAddItem = (0, react_2.useCallback)((newItem) => {
+    const handleAddItem = useCallback((newItem) => {
         const existingItem = data.concat(customItems).find((item) => {
             return isObjectArray
                 ? item.label.toLowerCase() === newItem.toLowerCase()
@@ -515,7 +510,7 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
         }
     };
     // Close on outside click
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         const close = (e) => {
             var _a, _b;
             const target = e.target;
@@ -533,7 +528,7 @@ const TagBox = (0, styled_components_1.default)(({ className, data = [], placeho
         return () => document.removeEventListener("click", close);
     }, [refs.floating, refs.reference]);
     // update when selection changes
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         update();
     }, [selectedItems]);
     const referenceEl = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
@@ -542,12 +537,12 @@ 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, onMouseDown: () => {
+    return (_jsxs("div", { className: className + " mfTagBox", children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _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 ||
+                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [selectedItems.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
                                     allowCustomValue ||
-                                    selectedItems.length === 0) && ((0, jsx_runtime_1.jsx)(StyledInput, { inputRef: inputRef, onChange: (e) => {
+                                    selectedItems.length === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
                                         if (searchFn !== undefined) {
                                             searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
                                         }
@@ -556,35 +551,35 @@ 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, { onClick: (e) => {
+                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(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) => {
+                        } })) : null] }), isOpen && (_jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: _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) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
+                                    return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _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));
+                                                : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_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) => {
+                            return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _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));
+                                        : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
                         }) }) }))] }));
 }) `
   position: relative;
   cursor: pointer;
 `;
-exports.default = TagBox;
+export default TagBox;