@monolith-forensics/monolith-ui 1.5.1 → 1.6.0

package/dist/Table/TableHeader.js

@@ -16,23 +16,24 @@ const StyledCaption = styled.span `
 `;
 const TableHeader = ({ headerRowElm }) => {
     var _a;
-    const { columnState, sortState, setColumnState, onColumnResize, handleColumnReorder, enableColumnReorder, handleColumnHeaderClick, enableColumnResize, headerRowHeight, enableActionButton, enableSelection, selectionState, disableSelectAll, selectAllRows, clearSelections, compactState, } = useTable();
+    const { columnState, sortState, setColumnState: updateColumnState, onColumnResize, handleColumnReorder, enableColumnReorder, handleColumnHeaderClick, enableColumnResize, headerRowHeight, enableActionButton, enableSelection, selectionState, disableSelectAll, selectAllRows, clearSelections, compactState, } = useTable();
     const [dragColumn, setDragColumn] = useState(null);
     const [dropColumn, setDropColumn] = useState(null);
     const handleResize = (e) => {
         const columnId = e.column.columnId;
-        setColumnState((prevColumnState) => {
-            const newState = prevColumnState.map((col) => {
+        const newWidth = Number(e.newWidth);
+        updateColumnState((prevColumnState) => {
+            const nextColumnState = prevColumnState.map((col) => {
                 if (col.columnId === columnId) {
-                    return Object.assign(Object.assign({}, col), { width: Number(e.newWidth) });
+                    return Object.assign(Object.assign({}, col), { width: newWidth });
                 }
                 return col;
             });
             onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize({
-                column: Object.assign(Object.assign({}, e.column), { width: Number(e.newWidth) }),
-                columnState: newState,
+                column: Object.assign(Object.assign({}, e.column), { width: newWidth }),
+                columnState: nextColumnState,
             });
-            return newState;
+            return nextColumnState;
         });
     };
     const handleChangeSelection = (e) => {

package/dist/Table/TableProvider.js

@@ -19,9 +19,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useMemo, useState } from "react";
+import { createContext, useEffect, useMemo, useRef, useState } from "react";
 import StateStorage from "./StateStorage";
 import { resolveColumnResize, syncColumnState } from "./Utils";
+import { notifyAndPersistColumnState, resolveColumnStateUpdate, } from "./Utils/columnStateUpdate";
 import TableDefaults from "./TableDefaults";
 import shortUUID from "short-uuid";
 import { SelectionStatus } from "./enums";
@@ -72,7 +73,11 @@ const TableProvider = (_a) => {
     }, [stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.key]);
     const { columnState: savedColumnState, selectionState: savedSelectionState, sortState: savedSortState, searchState: savedSearchState, filterState: savedFilterState, } = savedTableState || {};
     const [compactState, setCompactState] = useState(compact || false);
-    const [columnState, setColumnState] = useState(syncColumnState(_columns, savedColumnState));
+    const [columnState, _setColumnState] = useState(syncColumnState(_columns, savedColumnState));
+    const columnStateRef = useRef(columnState);
+    useEffect(() => {
+        columnStateRef.current = columnState;
+    }, [columnState]);
     const [search, setSearch] = useState(savedSearchState || "");
     const [_filterState, _setFilterState] = useControlled(filterState, defaultFilterState ||
         savedFilterState || {
@@ -115,14 +120,20 @@ const TableProvider = (_a) => {
     const getColumnState = (dataField) => {
         return columnState.find((col) => col.dataField === dataField);
     };
-    const updateColumnState = (columnState) => {
-        setColumnState(columnState);
-        onColumnStateChange === null || onColumnStateChange === void 0 ? void 0 : onColumnStateChange(columnState);
-        if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
-            if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
-                StateStorage.setColumnState(stateStorage.key, columnState);
-            }
-        }
+    const updateColumnState = (columnStateUpdate) => {
+        const previousColumnState = columnStateRef.current;
+        const nextColumnState = resolveColumnStateUpdate(columnStateUpdate, previousColumnState);
+        columnStateRef.current = nextColumnState;
+        _setColumnState(nextColumnState);
+        notifyAndPersistColumnState({
+            nextColumnState,
+            onColumnStateChange,
+            persistColumnState: (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) && (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage"
+                ? (columnState) => {
+                    StateStorage.setColumnState(stateStorage.key, columnState);
+                }
+                : undefined,
+        });
     };
     const handleColumnReorder = (dragColumn, dropColumn) => {
         var _a, _b;
@@ -605,9 +616,7 @@ const TableProvider = (_a) => {
         }
         return processedData;
     }, [data, columnState, search, sortState, _filterState]);
-    return (_jsx(TableContext.Provider, { value: Object.assign({ columnState,
-            setColumnState,
-            sortState, searchState: search, totalRecords,
+    return (_jsx(TableContext.Provider, { value: Object.assign({ columnState, setColumnState: updateColumnState, sortState, searchState: search, totalRecords,
             keyField,
             handleColumnReorder,
             handleColumnHeaderClick, selectionState: _selectionState, selectRow,

package/dist/Table/TableRow.js

@@ -14,7 +14,7 @@ const TableRow = ({ rowData, loading, rowStyle }) => {
     const handleSelectionChange = (e) => {
         e === true ? selectRow(rowData) : deselectRow(rowData);
     };
-    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) => {
+    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 row-selection-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/Utils/columnStateUpdate.d.ts

@@ -0,0 +1,7 @@
+import type { ColumnState, ColumnStateUpdate } from "../types";
+export declare const resolveColumnStateUpdate: (columnStateUpdate: ColumnStateUpdate, previousColumnState: ColumnState[]) => ColumnState[];
+export declare const notifyAndPersistColumnState: ({ nextColumnState, onColumnStateChange, persistColumnState, }: {
+    nextColumnState: ColumnState[];
+    onColumnStateChange?: (columnState: ColumnState[]) => void;
+    persistColumnState?: (columnState: ColumnState[]) => void;
+}) => void;

package/dist/Table/Utils/columnStateUpdate.js

@@ -0,0 +1,9 @@
+export const resolveColumnStateUpdate = (columnStateUpdate, previousColumnState) => {
+    return typeof columnStateUpdate === "function"
+        ? columnStateUpdate(previousColumnState)
+        : columnStateUpdate;
+};
+export const notifyAndPersistColumnState = ({ nextColumnState, onColumnStateChange, persistColumnState, }) => {
+    onColumnStateChange === null || onColumnStateChange === void 0 ? void 0 : onColumnStateChange(nextColumnState);
+    persistColumnState === null || persistColumnState === void 0 ? void 0 : persistColumnState(nextColumnState);
+};

package/dist/Table/types.d.ts

@@ -68,6 +68,7 @@ export interface onResizeProps {
         width: number;
     }[];
 }
+export type ColumnStateUpdate = ColumnState[] | ((prevColumnState: ColumnState[]) => ColumnState[]);
 export interface ResizeHandlerProps {
     event: React.MouseEvent<HTMLDivElement>;
     columnId?: string;
@@ -95,7 +96,7 @@ export type TableDimensions = {
 };
 export type TableContextType = {
     columnState: ColumnState[];
-    setColumnState: React.Dispatch<React.SetStateAction<ColumnState[]>>;
+    setColumnState: (columnStateUpdate: ColumnStateUpdate) => void;
     sortState?: SortState | null;
     filterState?: Query | null;
     searchState?: string | null;
@@ -337,7 +338,7 @@ export interface TableProps {
 }
 export type TableInstance = {
     columnState: ColumnState[];
-    setColumnState: (e: ColumnState[]) => void;
+    setColumnState: (columnStateUpdate: ColumnStateUpdate) => void;
     getColumnState: (dataField: string) => ColumnState | undefined;
     onColumnResize?: (e: OnColumnChangeProps) => void;
     onColumnReorder?: (e: OnColumnChangeProps) => void;

package/package.json

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