@monolith-forensics/monolith-ui 1.3.25 → 1.3.27

package/dist/Table/TableComponents.js

@@ -29,6 +29,16 @@ export const TR = styled.div `
     visibility: visible;
   }
 
+  &[data-focused="true"] {
+    border-left: 1px solid ${({ theme }) => theme.palette.primary.main};
+    border-right: 1px solid ${({ theme }) => theme.palette.primary.main};
+
+    .mfui-td {
+      border-top: 1px solid ${({ theme }) => theme.palette.primary.main};
+      border-bottom: 1px solid ${({ theme }) => theme.palette.primary.main};
+    }
+  }
+
   &:hover > .mfui-td {
     background-color: ${({ theme }) => theme.palette.action.hover};
   }

package/dist/Table/TableProvider.js

@@ -19,7 +19,7 @@ import { SelectionStatus } from "./enums";
 import moment from "moment";
 export const TableContext = createContext(null);
 const TableProvider = (_a) => {
-    var { children, columns, tableInstanceRef, stateStorage, height, maxHeight, minHeight } = _a, props = __rest(_a, ["children", "columns", "tableInstanceRef", "stateStorage", "height", "maxHeight", "minHeight"]);
+    var { children, columns, tableInstanceRef, stateStorage, height, maxHeight, minHeight, focusedRowId } = _a, props = __rest(_a, ["children", "columns", "tableInstanceRef", "stateStorage", "height", "maxHeight", "minHeight", "focusedRowId"]);
     const _columns = columns
         .map((child, index) => {
         if (child.dataField === "__key") {
@@ -515,8 +515,11 @@ const TableProvider = (_a) => {
                 return false;
         }
     };
+    const isRowFocused = (row) => {
+        const key = !!props.keyField ? row[props.keyField] : row.__key;
+        return focusedRowId === key;
+    };
     if (tableInstanceRef) {
-        console.log("set table instance ref");
         tableInstanceRef.current = {
             columnState,
             setColumnState: updateColumnState,
@@ -558,6 +561,7 @@ const TableProvider = (_a) => {
             }, selectRow,
             deselectRow,
             isRowSelected,
+            isRowFocused,
             selectedRowKeys,
             getSelectedRowKeys,
             selectAllRows,

package/dist/Table/TableRow.js

@@ -8,12 +8,13 @@ import ActionButton from "./ActionButton";
 import CheckBox from "../CheckBox";
 import { LoadingCellIndicator } from "./LoadingCellIndicator";
 const TableRow = ({ rowData, loading, rowStyle }) => {
-    const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, onRowUpdated, } = useTable();
+    const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, isRowFocused, onRowUpdated, } = useTable();
     const selected = isRowSelected(rowData);
+    const focused = isRowFocused(rowData);
     const handleSelectionChange = (e) => {
         e === true ? selectRow(rowData) : deselectRow(rowData);
     };
-    return (_jsxs(TR, { className: "mfui-tr", style: rowStyle, "data-key": rowData.__key, "data-selected": selected, children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
+    return (_jsxs(TR, { className: "mfui-tr", style: rowStyle, "data-key": rowData.__key, "data-selected": selected, "data-focused": focused, children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
                 if (column.visible === false)
                     return null;
                 if (loading) {

package/dist/Table/types.d.ts

@@ -126,6 +126,7 @@ export type TableContextType = {
     manualSearch?: boolean;
     manualExport?: boolean;
     compactState: boolean;
+    focusedRowId?: string | number;
     toggleCompact: () => void;
     toggleColumnVisibility: (dataField: string) => void;
     runSearch: (query: string) => void;
@@ -134,6 +135,7 @@ export type TableContextType = {
     selectAllRows: () => void;
     clearSelections: () => void;
     isRowSelected: (row: any) => boolean;
+    isRowFocused: (row: any) => boolean;
     onSelectionChange?: onSelectionChangeFn;
     selectRow: (row: any) => void;
     deselectRow: (row: any) => void;
@@ -180,6 +182,7 @@ export interface TableProviderProps {
     manualExport?: boolean;
     enableSorting?: boolean;
     tableMenuOptions?: TableMenuOptions;
+    focusedRowId?: string | number;
     onSelectionChange?: onSelectionChangeFn;
     onActionButtonClick?: (rowData: any) => void;
     onColumnResize?: (e: OnColumnChangeProps) => void;
@@ -286,6 +289,7 @@ export interface TableProps {
     manualFiltering?: boolean;
     manualExport?: boolean;
     tableMenuOptions?: TableMenuOptions;
+    focusedRowId?: string | number;
     children?: React.ReactNode;
     onRowUpdated?: () => void;
     onSelectionChange?: onSelectionChangeFn;

package/dist/theme/variants.js

@@ -177,11 +177,11 @@ const lightVariant = {
             error: "#f44336",
         },
         text: {
-            default: "#FFF",
-            primary: "#FFF",
-            secondary: "#000",
+            default: "#000",
+            primary: customBlue[500],
+            error: "#f44336",
+            secondary: "#a1a1a1",
             alternate: "#000",
-            error: "#FFF",
         },
     },
 };
@@ -294,7 +294,8 @@ const darkVariant = merge(lightVariant, {
             error: "#f44336",
         },
         text: {
-            primary: "rgba(255, 255, 255, 0.95)",
+            primary: customBlue[500],
+            error: "#f44336",
             secondary: "rgba(255, 255, 255, 0.6)",
             alternate: "rgba(255, 255, 255, 0.6)",
         },

package/package.json

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