@monolith-forensics/monolith-ui 1.1.26 → 1.1.27

package/dist/Table/Table.js

@@ -1,27 +1,4 @@
 "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)
@@ -43,7 +20,7 @@ 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 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");
@@ -165,6 +142,16 @@ const StyledTh = styled_components_1.default.th `
   border-top: 1px solid ${({ theme }) => theme.palette.divider};
   border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 
+  .action-header {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: ${({ theme }) => theme.palette.text.secondary};
+    margin-right: 5;
+    margin-left: 3;
+  }
+
   &:first-child {
     border-left: 1px solid ${({ theme }) => theme.palette.divider};
     border-top-left-radius: 4px;
@@ -299,7 +286,6 @@ 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, }) => {
-    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;
@@ -342,15 +328,7 @@ const HeaderRowComponent = ({ columns, _compact, resizeState, headerHeight, onHe
                                 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) => {
+                            }, 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) => {
                                 resizeState.current = e;
                             }, onResizeFinished: (e) => {
                                 onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize(e);
@@ -438,7 +416,6 @@ const useTable = () => {
 };
 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: {
@@ -614,20 +591,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", { 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"
+            (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"
                                     ? true
                                     : selectionState === "someIncluded"
                                         ? !!selectedRows.find((row) => keyValue
@@ -637,14 +601,7 @@ 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", style: {
-                                display: "flex",
-                                alignContent: "center",
-                                alignItems: "center",
-                                cursor: "pointer",
-                                color: theme.palette.primary.main,
-                                marginRight: 5,
-                            }, onClick: (e) => {
+                                            : false, onChange: (newValue) => handleSelectRow({ rowData, checked: newValue }) }) })), (0, jsx_runtime_1.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()),
             ...columns,
@@ -736,5 +693,22 @@ const Table = (0, styled_components_1.default)(({ className, children, data, row
   .action-column {
     max-width: 55px;
   }
+
+  .action-column-container {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    padding: 4px;
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
+
+  .action-button {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: ${({ theme }) => theme.palette.primary.main};
+    margin-right: 5px;
+  }
 `;
 exports.default = Table;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.26",
+  "version": "1.1.27",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",