@monolith-forensics/monolith-ui 1.3.24 → 1.3.26

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") {
@@ -51,6 +51,28 @@ const TableProvider = (_a) => {
     const [selectionStatus, setSelectionStatus] = useState((savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.selectionStatus) || SelectionStatus.None);
     const [excludedRowKeys, setExcludedRowKeys] = useState((savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.excludedRowKeys) || []);
     const [selectedRowKeys, setSelectedRowKeys] = useState((savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.selectedRowKeys) || []);
+    const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) => {
+        switch (selectionState.selectionStatus) {
+            case SelectionStatus.All:
+                return totalRecords || dataLength;
+            case SelectionStatus.SomeIncluded:
+                return selectionState.selectedRowKeys.length;
+            case SelectionStatus.SomeExcluded:
+                return totalRecords
+                    ? totalRecords - selectionState.excludedRowKeys.length
+                    : dataLength - selectionState.excludedRowKeys.length;
+            default:
+                return 0;
+        }
+    };
+    const getCalculatedSelectionTotal = () => {
+        return calculateSelectionTotal({
+            selectedRowKeys,
+            excludedRowKeys,
+            selectionStatus,
+            totalSelected: 0,
+        }, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
+    };
     const getColumnState = (dataField) => {
         return columnState.find((col) => col.dataField === dataField);
     };
@@ -382,6 +404,7 @@ const TableProvider = (_a) => {
             selectedRowKeys,
             excludedRowKeys,
             selectionStatus,
+            totalSelected: 0,
         };
         if (props.data.length === selectedRowKeys.length + 1) {
             newSelectionState.selectionStatus = SelectionStatus.All;
@@ -395,11 +418,12 @@ const TableProvider = (_a) => {
         ];
         newSelectionState.excludedRowKeys =
             newSelectionState.excludedRowKeys.filter((k) => k !== key);
+        newSelectionState.totalSelected = calculateSelectionTotal(newSelectionState, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
         setSelectionStatus(newSelectionState.selectionStatus);
         setSelectedRowKeys(newSelectionState.selectedRowKeys);
         setExcludedRowKeys(newSelectionState.excludedRowKeys);
-        (_a = props.onSelectionChange) === null || _a === void 0 ? void 0 : _a.call(props, newSelectionState);
         saveSelectionState(newSelectionState);
+        (_a = props.onSelectionChange) === null || _a === void 0 ? void 0 : _a.call(props, newSelectionState);
     };
     const deselectRow = (row) => {
         var _a;
@@ -408,6 +432,7 @@ const TableProvider = (_a) => {
             selectedRowKeys,
             excludedRowKeys,
             selectionStatus,
+            totalSelected: 0,
         };
         if (selectionStatus === SelectionStatus.All ||
             selectionStatus === SelectionStatus.SomeExcluded) {
@@ -422,11 +447,12 @@ const TableProvider = (_a) => {
         }
         newSelectionState.selectedRowKeys =
             newSelectionState.selectedRowKeys.filter((k) => k !== row[key]);
+        newSelectionState.totalSelected = calculateSelectionTotal(newSelectionState, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
         setSelectionStatus(newSelectionState.selectionStatus);
         setSelectedRowKeys(newSelectionState.selectedRowKeys);
         setExcludedRowKeys(newSelectionState.excludedRowKeys);
-        (_a = props.onSelectionChange) === null || _a === void 0 ? void 0 : _a.call(props, newSelectionState);
         saveSelectionState(newSelectionState);
+        (_a = props.onSelectionChange) === null || _a === void 0 ? void 0 : _a.call(props, newSelectionState);
     };
     const selectAllRows = () => {
         var _a, _b;
@@ -435,15 +461,17 @@ const TableProvider = (_a) => {
             selectedRowKeys,
             excludedRowKeys,
             selectionStatus,
+            totalSelected: 0,
         };
         newSelectionState.selectedRowKeys = keys;
         newSelectionState.excludedRowKeys = [];
         newSelectionState.selectionStatus = SelectionStatus.All;
+        newSelectionState.totalSelected = calculateSelectionTotal(newSelectionState, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
         setSelectionStatus(newSelectionState.selectionStatus);
         setSelectedRowKeys(newSelectionState.selectedRowKeys);
         setExcludedRowKeys(newSelectionState.excludedRowKeys);
-        (_b = props.onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(props, newSelectionState);
         saveSelectionState(newSelectionState);
+        (_b = props.onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(props, newSelectionState);
     };
     const clearSelections = () => {
         var _a;
@@ -451,10 +479,12 @@ const TableProvider = (_a) => {
             selectedRowKeys,
             excludedRowKeys,
             selectionStatus,
+            totalSelected: 0,
         };
         newSelectionState.selectedRowKeys = [];
         newSelectionState.excludedRowKeys = [];
         newSelectionState.selectionStatus = SelectionStatus.None;
+        newSelectionState.totalSelected = calculateSelectionTotal(newSelectionState, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
         setSelectionStatus(newSelectionState.selectionStatus);
         setSelectedRowKeys(newSelectionState.selectedRowKeys);
         setExcludedRowKeys(newSelectionState.excludedRowKeys);
@@ -485,19 +515,9 @@ const TableProvider = (_a) => {
                 return false;
         }
     };
-    const getCalculatedSelectionTotal = () => {
-        switch (selectionStatus) {
-            case SelectionStatus.All:
-                return (props === null || props === void 0 ? void 0 : props.totalRecords) || props.data.length;
-            case SelectionStatus.SomeIncluded:
-                return selectedRowKeys.length;
-            case SelectionStatus.SomeExcluded:
-                return (props === null || props === void 0 ? void 0 : props.totalRecords)
-                    ? props.totalRecords - excludedRowKeys.length
-                    : props.data.length - excludedRowKeys.length;
-            default:
-                return 0;
-        }
+    const isRowFocused = (row) => {
+        const key = !!props.keyField ? row[props.keyField] : row.__key;
+        return focusedRowId === key;
     };
     if (tableInstanceRef) {
         tableInstanceRef.current = {
@@ -537,9 +557,11 @@ const TableProvider = (_a) => {
                 selectedRowKeys,
                 excludedRowKeys,
                 selectionStatus,
+                totalSelected: getCalculatedSelectionTotal(),
             }, 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

@@ -40,6 +40,7 @@ export type SelectionState = {
     selectedRowKeys: string[];
     excludedRowKeys: string[];
     selectionStatus: SelectionStatus;
+    totalSelected: number;
 };
 export type SortState = {
     dataField: string;
@@ -125,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;
@@ -133,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;
@@ -179,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;
@@ -285,6 +289,7 @@ export interface TableProps {
     manualFiltering?: boolean;
     manualExport?: boolean;
     tableMenuOptions?: TableMenuOptions;
+    focusedRowId?: string | number;
     children?: React.ReactNode;
     onRowUpdated?: () => void;
     onSelectionChange?: onSelectionChangeFn;

package/package.json

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