@monolith-forensics/monolith-ui 1.7.1 → 1.8.1-dev.0

package/dist/Table/TableProvider.js

@@ -29,6 +29,27 @@ import { SelectionStatus } from "./enums";
 import moment from "moment";
 import { useControlled } from "../Utilities";
 import { exportTableToExcel } from "./Utils";
+const RESERVED_FIELDS = [
+    "__key",
+    "__index",
+    "__level",
+    "__parentKey",
+    "__hasChildren",
+    "__childKeys",
+];
+const EMPTY_TREE_META = {
+    parentKeyMap: new Map(),
+    childrenKeyMap: new Map(),
+    expandableKeys: [],
+};
+const DEFAULT_TREE_OPTIONS = {
+    enabled: false,
+    mode: "nested",
+    childrenField: "children",
+    parentIdField: "parentId",
+    indentPx: 16,
+    autoExpandOnMatch: true,
+};
 const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) => {
     if (!selectionState) {
         return 0;
@@ -48,11 +69,21 @@ const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) =
 };
 export const TableContext = createContext(null);
 const TableProvider = (_a) => {
-    var { children, columns, data, keyField, tableInstanceRef, stateStorage, tableMenuOptions, manualSorting, manualFiltering, manualSearch, manualExport, height, maxHeight, minHeight, focusedRowId, enableColumnResize, enableSorting, compact, totalRecords, onColumnStateChange, onColumnReorder, onColumnHeaderClick, onSort, onRowUpdated, tableElement, headerRowElm, tableDimensions, targetElm, listElm, defaultSelectionState, selectionState, onSelectionChange, defaultFilterState, filterState, onFilterChange } = _a, props = __rest(_a, ["children", "columns", "data", "keyField", "tableInstanceRef", "stateStorage", "tableMenuOptions", "manualSorting", "manualFiltering", "manualSearch", "manualExport", "height", "maxHeight", "minHeight", "focusedRowId", "enableColumnResize", "enableSorting", "compact", "totalRecords", "onColumnStateChange", "onColumnReorder", "onColumnHeaderClick", "onSort", "onRowUpdated", "tableElement", "headerRowElm", "tableDimensions", "targetElm", "listElm", "defaultSelectionState", "selectionState", "onSelectionChange", "defaultFilterState", "filterState", "onFilterChange"]);
+    var { children, columns, data, keyField, tableInstanceRef, stateStorage, tableMenuOptions, manualSorting, manualFiltering, manualSearch, manualExport, height, maxHeight, minHeight, focusedRowId, enableColumnResize, enableSorting, compact, totalRecords, onColumnStateChange, onColumnReorder, onColumnHeaderClick, onSort, onRowUpdated, tableElement, headerRowElm, tableDimensions, targetElm, listElm, defaultSelectionState, selectionState, onSelectionChange, defaultFilterState, filterState, onFilterChange, treeOptions, treeMeta, defaultExpandedKeys, expandedKeys, onExpandedChange } = _a, props = __rest(_a, ["children", "columns", "data", "keyField", "tableInstanceRef", "stateStorage", "tableMenuOptions", "manualSorting", "manualFiltering", "manualSearch", "manualExport", "height", "maxHeight", "minHeight", "focusedRowId", "enableColumnResize", "enableSorting", "compact", "totalRecords", "onColumnStateChange", "onColumnReorder", "onColumnHeaderClick", "onSort", "onRowUpdated", "tableElement", "headerRowElm", "tableDimensions", "targetElm", "listElm", "defaultSelectionState", "selectionState", "onSelectionChange", "defaultFilterState", "filterState", "onFilterChange", "treeOptions", "treeMeta", "defaultExpandedKeys", "expandedKeys", "onExpandedChange"]);
+    const _treeOptions = treeOptions || DEFAULT_TREE_OPTIONS;
+    const _treeMeta = treeMeta || EMPTY_TREE_META;
+    if (_treeOptions.enabled) {
+        if (RESERVED_FIELDS.includes(_treeOptions.childrenField)) {
+            throw new Error(`treeOptions.childrenField cannot be a reserved internal field: "${_treeOptions.childrenField}".`);
+        }
+        if (RESERVED_FIELDS.includes(_treeOptions.parentIdField)) {
+            throw new Error(`treeOptions.parentIdField cannot be a reserved internal field: "${_treeOptions.parentIdField}".`);
+        }
+    }
     const _columns = useMemo(() => columns
         .map((child, index) => {
-        if (child.dataField === "__key") {
-            throw new Error("dataField cannot be __key");
+        if (RESERVED_FIELDS.includes(child.dataField)) {
+            throw new Error(`dataField cannot be a reserved internal field: "${child.dataField}". Reserved: ${RESERVED_FIELDS.join(", ")}`);
         }
         // check for duplicate dataFields
         const dataFieldCount = columns.filter((col) => col.dataField === child.dataField).length;
@@ -71,7 +102,7 @@ const TableProvider = (_a) => {
             ? StateStorage.getTableState(stateStorage.key)
             : undefined;
     }, [stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.key]);
-    const { columnState: savedColumnState, selectionState: savedSelectionState, sortState: savedSortState, searchState: savedSearchState, filterState: savedFilterState, } = savedTableState || {};
+    const { columnState: savedColumnState, selectionState: savedSelectionState, sortState: savedSortState, searchState: savedSearchState, filterState: savedFilterState, expandedKeys: savedExpandedKeys, } = savedTableState || {};
     const [compactState, setCompactState] = useState(compact || false);
     const [columnState, _setColumnState] = useState(syncColumnState(_columns, savedColumnState));
     const columnStateRef = useRef(columnState);
@@ -85,6 +116,8 @@ const TableProvider = (_a) => {
         rules: [],
     });
     const [sortState, setSortState] = useState(savedSortState);
+    const [_expandedKeys, _setExpandedKeys] = useControlled(expandedKeys, defaultExpandedKeys || savedExpandedKeys || []);
+    const expandedKeysSet = useMemo(() => new Set(_expandedKeys), [_expandedKeys]);
     const [_selectionState, _setSelectionState] = useControlled(selectionState, defaultSelectionState || {
         selectedRowKeys: (savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.selectedRowKeys) || [],
         excludedRowKeys: (savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.excludedRowKeys) || [],
@@ -238,58 +271,99 @@ const TableProvider = (_a) => {
             }
         }
     };
-    const sortData = (sortState) => {
-        // sort data
-        return data.sort((a, b) => {
-            if (sortState) {
-                const aValue = a[sortState.dataField];
-                const bValue = b[sortState.dataField];
-                const aIsEmpty = aValue === null || aValue === undefined;
-                const bIsEmpty = bValue === null || bValue === undefined;
-                // Treat empty values as the smallest values.
-                if (aIsEmpty && bIsEmpty) {
-                    return 0;
-                }
-                if (aIsEmpty || bIsEmpty) {
-                    if (sortState.dir === "asc") {
-                        return aIsEmpty ? -1 : 1;
-                    }
-                    if (sortState.dir === "desc") {
-                        return aIsEmpty ? 1 : -1;
-                    }
-                }
+    const compareRows = (a, b, sortState) => {
+        if (sortState) {
+            const aValue = a[sortState.dataField];
+            const bValue = b[sortState.dataField];
+            const aIsEmpty = aValue === null || aValue === undefined;
+            const bIsEmpty = bValue === null || bValue === undefined;
+            // Treat empty values as the smallest values.
+            if (aIsEmpty && bIsEmpty) {
+                return 0;
+            }
+            if (aIsEmpty || bIsEmpty) {
                 if (sortState.dir === "asc") {
-                    if (aValue < bValue) {
-                        return -1;
-                    }
-                    if (aValue > bValue) {
-                        return 1;
-                    }
-                    return 0;
+                    return aIsEmpty ? -1 : 1;
                 }
-                else if (sortState.dir === "desc") {
-                    if (aValue > bValue) {
-                        return -1;
-                    }
-                    if (aValue < bValue) {
-                        return 1;
-                    }
-                    return 0;
+                if (sortState.dir === "desc") {
+                    return aIsEmpty ? 1 : -1;
                 }
             }
-            // sort by __index
-            if (a.__index < b.__index) {
-                return -1;
+            if (sortState.dir === "asc") {
+                if (aValue < bValue)
+                    return -1;
+                if (aValue > bValue)
+                    return 1;
+                return 0;
             }
-            if (a.__index > b.__index) {
-                return 1;
+            else if (sortState.dir === "desc") {
+                if (aValue > bValue)
+                    return -1;
+                if (aValue < bValue)
+                    return 1;
+                return 0;
             }
-            return 0;
-        });
+        }
+        // sort by __index
+        if (a.__index < b.__index)
+            return -1;
+        if (a.__index > b.__index)
+            return 1;
+        return 0;
+    };
+    const sortData = (sortState) => {
+        if (!_treeOptions.enabled) {
+            // Flat data — sort in-place (preserves existing behavior).
+            return data.sort((a, b) => compareRows(a, b, sortState));
+        }
+        // Tree-aware sort: sort siblings only, then re-DFS to rebuild the
+        // flat order. Cross-parent sorting is never allowed in tree mode.
+        const byKey = new Map();
+        const childrenByParent = new Map();
+        for (const row of data) {
+            byKey.set(row.__key, row);
+            const pk = row.__parentKey;
+            if (!childrenByParent.has(pk))
+                childrenByParent.set(pk, []);
+            childrenByParent.get(pk).push(row);
+        }
+        for (const [, siblings] of childrenByParent) {
+            siblings.sort((a, b) => compareRows(a, b, sortState));
+        }
+        const result = [];
+        const walk = (parentKey) => {
+            const siblings = childrenByParent.get(parentKey);
+            if (!siblings)
+                return;
+            for (const row of siblings) {
+                result.push(row);
+                if (row.__hasChildren)
+                    walk(row.__key);
+            }
+        };
+        walk(undefined);
+        return result;
+    };
+    const collectAncestors = (rows) => {
+        const ancestorSet = new Set();
+        const byKey = new Map();
+        for (const r of data)
+            byKey.set(r.__key, r);
+        for (const row of rows) {
+            let parentKey = row.__parentKey;
+            while (parentKey) {
+                if (ancestorSet.has(parentKey))
+                    break;
+                ancestorSet.add(parentKey);
+                const parent = byKey.get(parentKey);
+                parentKey = parent === null || parent === void 0 ? void 0 : parent.__parentKey;
+            }
+        }
+        return ancestorSet;
     };
-    const searchData = (searchText) => {
+    const searchData = (rows, searchText) => {
         const columnKeys = columnState.map((col) => col.dataField);
-        return data.filter((row) => {
+        const matched = rows.filter((row) => {
             return columnKeys.some((key) => {
                 if (typeof row[key] === "string") {
                     return row[key].toLowerCase().includes(searchText.toLowerCase());
@@ -297,6 +371,16 @@ const TableProvider = (_a) => {
                 return false;
             });
         });
+        if (!_treeOptions.enabled) {
+            return { rows: matched, ancestorKeys: new Set() };
+        }
+        const ancestorKeys = collectAncestors(matched);
+        const visibleSet = new Set(matched.map((r) => r.__key));
+        ancestorKeys.forEach((k) => visibleSet.add(k));
+        return {
+            rows: rows.filter((r) => visibleSet.has(r.__key)),
+            ancestorKeys,
+        };
     };
     const rowMatchesRule = (row, rule) => {
         var _a, _b, _c, _d;
@@ -396,16 +480,26 @@ const TableProvider = (_a) => {
                 return true;
         }
     };
-    const filterData = (filter) => {
-        if (!data)
-            return [];
+    const filterData = (rows, filter) => {
+        if (!rows)
+            return { rows: [], ancestorKeys: new Set() };
         const { combinator, rules } = filter;
-        if (!combinator || !rules)
-            return data;
-        if (combinator === "or") {
-            return data.filter((row) => rules.some((rule) => rowMatchesRule(row, rule)));
+        if (!combinator || !rules || rules.length === 0) {
+            return { rows, ancestorKeys: new Set() };
         }
-        return data.filter((row) => rules.every((rule) => rowMatchesRule(row, rule)));
+        const matched = combinator === "or"
+            ? rows.filter((row) => rules.some((rule) => rowMatchesRule(row, rule)))
+            : rows.filter((row) => rules.every((rule) => rowMatchesRule(row, rule)));
+        if (!_treeOptions.enabled) {
+            return { rows: matched, ancestorKeys: new Set() };
+        }
+        const ancestorKeys = collectAncestors(matched);
+        const visibleSet = new Set(matched.map((r) => r.__key));
+        ancestorKeys.forEach((k) => visibleSet.add(k));
+        return {
+            rows: rows.filter((r) => visibleSet.has(r.__key)),
+            ancestorKeys,
+        };
     };
     const toggleColumnVisibility = (dataField) => {
         const newColumnState = columnState.map((col) => {
@@ -434,6 +528,47 @@ const TableProvider = (_a) => {
         const key = !!keyField ? row[keyField] : row.__key;
         return String(key);
     };
+    const firstVisibleDataField = useMemo(() => { var _a; return (_a = columnState.find((c) => c.visible !== false)) === null || _a === void 0 ? void 0 : _a.dataField; }, [columnState]);
+    const persistExpandedKeys = (next) => {
+        if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) && (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
+            StateStorage.setExpandedKeys(stateStorage.key, next);
+        }
+    };
+    const updateExpandedKeys = (next) => {
+        _setExpandedKeys(next);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+        persistExpandedKeys(next);
+    };
+    const expandRow = (row) => {
+        var _a;
+        const key = (_a = row === null || row === void 0 ? void 0 : row.__key) !== null && _a !== void 0 ? _a : getRowKey(row);
+        if (expandedKeysSet.has(key))
+            return;
+        updateExpandedKeys([..._expandedKeys, key]);
+    };
+    const collapseRow = (row) => {
+        var _a;
+        const key = (_a = row === null || row === void 0 ? void 0 : row.__key) !== null && _a !== void 0 ? _a : getRowKey(row);
+        if (!expandedKeysSet.has(key))
+            return;
+        updateExpandedKeys(_expandedKeys.filter((k) => k !== key));
+    };
+    const toggleRowExpanded = (row) => {
+        var _a;
+        const key = (_a = row === null || row === void 0 ? void 0 : row.__key) !== null && _a !== void 0 ? _a : getRowKey(row);
+        if (expandedKeysSet.has(key)) {
+            updateExpandedKeys(_expandedKeys.filter((k) => k !== key));
+        }
+        else {
+            updateExpandedKeys([..._expandedKeys, key]);
+        }
+    };
+    const expandAllRows = () => {
+        updateExpandedKeys([..._treeMeta.expandableKeys]);
+    };
+    const collapseAllRows = () => {
+        updateExpandedKeys([]);
+    };
     const selectRow = (row) => {
         const key = getRowKey(row);
         const newSelectionState = {
@@ -571,6 +706,61 @@ const TableProvider = (_a) => {
         const key = getRowKey(row);
         return focusedRowId === key;
     };
+    const { _data, effectiveExpandedKeys } = useMemo(() => {
+        let processedData = data || [];
+        if (manualSorting !== true) {
+            processedData = sortData(sortState);
+        }
+        const autoExpandedSet = new Set();
+        if (manualFiltering !== true && _filterState) {
+            const result = filterData(processedData, _filterState);
+            processedData = result.rows;
+            if (_treeOptions.enabled && _treeOptions.autoExpandOnMatch) {
+                result.ancestorKeys.forEach((k) => autoExpandedSet.add(k));
+            }
+        }
+        if (manualSearch !== true && search) {
+            const result = searchData(processedData, search);
+            processedData = result.rows;
+            if (_treeOptions.enabled && _treeOptions.autoExpandOnMatch) {
+                result.ancestorKeys.forEach((k) => autoExpandedSet.add(k));
+            }
+        }
+        // Compute the effective expanded set: user expansion ∪ auto-expanded ancestors.
+        // Never mutates user's _expandedKeys.
+        const effective = new Set(expandedKeysSet);
+        autoExpandedSet.forEach((k) => effective.add(k));
+        // Final pass: drop rows whose ancestors are not in the effective set.
+        if (_treeOptions.enabled) {
+            const byKey = new Map();
+            for (const r of processedData)
+                byKey.set(r.__key, r);
+            processedData = processedData.filter((row) => {
+                let pk = row.__parentKey;
+                while (pk) {
+                    if (!effective.has(pk))
+                        return false;
+                    const parent = byKey.get(pk);
+                    pk = parent === null || parent === void 0 ? void 0 : parent.__parentKey;
+                }
+                return true;
+            });
+        }
+        return { _data: processedData, effectiveExpandedKeys: effective };
+    }, [
+        data,
+        columnState,
+        search,
+        sortState,
+        _filterState,
+        expandedKeysSet,
+        _treeOptions,
+    ]);
+    const isRowExpanded = (row) => {
+        var _a;
+        const key = (_a = row === null || row === void 0 ? void 0 : row.__key) !== null && _a !== void 0 ? _a : getRowKey(row);
+        return effectiveExpandedKeys.has(key);
+    };
     if (tableInstanceRef) {
         tableInstanceRef.current = {
             columnState,
@@ -587,6 +777,13 @@ const TableProvider = (_a) => {
             clearSelections,
             runSearch,
             clearSearch,
+            expandRow,
+            collapseRow,
+            toggleRowExpanded,
+            isRowExpanded,
+            expandAllRows,
+            collapseAllRows,
+            getExpandedRowKeys: () => [..._expandedKeys],
             getTableState: () => {
                 return {
                     columnState,
@@ -598,24 +795,12 @@ const TableProvider = (_a) => {
                     },
                     sortState,
                     searchState: search,
-                    _filterState,
+                    filterState: _filterState,
+                    expandedKeys: [..._expandedKeys],
                 };
             },
         };
     }
-    const _data = useMemo(() => {
-        let processedData = data; // create a new array to avoid mutating the original data
-        if (manualSorting !== true) {
-            processedData = sortData(sortState);
-        }
-        if (manualFiltering !== true && _filterState) {
-            processedData = filterData(_filterState);
-        }
-        if (manualSearch !== true && search) {
-            processedData = searchData(search);
-        }
-        return processedData;
-    }, [data, columnState, search, sortState, _filterState]);
     return (_jsx(TableContext.Provider, { value: Object.assign({ columnState, setColumnState: updateColumnState, sortState, searchState: search, totalRecords,
             keyField,
             handleColumnReorder,
@@ -640,6 +825,13 @@ const TableProvider = (_a) => {
             stateStorage, tableHeight: height, tableMaxHeight: maxHeight, tableMinHeight: minHeight, compact, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, enableColumnResize,
             onSelectionChange,
             onColumnStateChange,
-            onColumnReorder, onRowUpdated: onRowUpdated || (() => { }), tableMenuOptions, data: _data }, props), children: children }));
+            onColumnReorder, onRowUpdated: onRowUpdated || (() => { }), tableMenuOptions, data: _data, treeOptions: _treeOptions, firstVisibleDataField, expandedKeys: _expandedKeys, effectiveExpandedKeys,
+            isRowExpanded,
+            toggleRowExpanded,
+            expandRow,
+            collapseRow,
+            expandAllRows,
+            collapseAllRows,
+            onExpandedChange }, props), children: children }));
 };
 export default TableProvider;

package/dist/Table/TableRow.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Maximize2Icon } from "lucide-react";
+import { ChevronRightIcon, Maximize2Icon } from "lucide-react";
 import ColumnResizer from "./ColumnResizer";
-import { InnerCellContent, TD, TR } from "./TableComponents";
+import { InnerCellContent, TD, TR, TreeCellContent, TreeCellWrapper, TreeChevronButton, TreeChevronPlaceholder, TreeIndentSpacer, } from "./TableComponents";
 import useTable from "./useTable";
 import ActionCell from "./ActionCell";
 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, isRowFocused, onRowUpdated, } = useTable();
+    const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, isRowFocused, onRowUpdated, treeOptions, firstVisibleDataField, isRowExpanded, toggleRowExpanded, } = 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, "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) => {
+                var _a;
                 if (column.visible === false)
                     return null;
                 if (loading) {
@@ -24,16 +25,20 @@ const TableRow = ({ rowData, loading, rowStyle }) => {
                             flex: column.width ? "0 0 auto" : "1",
                         }, children: _jsx(LoadingCellIndicator, {}) }, index));
                 }
-                return (_jsxs(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, style: {
+                const cellBody = column.render
+                    ? column.render({ rowData, onRowUpdated })
+                    : rowData[column.dataField];
+                const isTreeColumn = (treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.enabled) === true &&
+                    column.dataField === firstVisibleDataField;
+                const expanded = isTreeColumn ? isRowExpanded(rowData) : false;
+                return (_jsxs(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, "data-tree-cell": isTreeColumn ? "true" : undefined, style: {
                         width: column.width,
                         minWidth: column.minWidth,
                         flex: column.width ? "0 0 auto" : "1",
-                    }, children: [(column === null || column === void 0 ? void 0 : column.enableResize) === true && _jsx(ColumnResizer, { column: column }), _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: column.render
-                                ? column.render({
-                                    rowData,
-                                    onRowUpdated,
-                                })
-                                : rowData[column.dataField] })] }, index));
+                    }, children: [(column === null || column === void 0 ? void 0 : column.enableResize) === true && _jsx(ColumnResizer, { column: column }), _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: isTreeColumn ? (_jsxs(TreeCellWrapper, { children: [_jsx(TreeIndentSpacer, { "$level": (_a = rowData.__level) !== null && _a !== void 0 ? _a : 0, "$indentPx": treeOptions.indentPx }), rowData.__hasChildren ? (_jsx(TreeChevronButton, { type: "button", "$expanded": expanded, onClick: (e) => {
+                                            e.stopPropagation();
+                                            toggleRowExpanded(rowData);
+                                        }, "aria-label": expanded ? "Collapse row" : "Expand row", "aria-expanded": expanded, children: _jsx(ChevronRightIcon, { size: 14 }) })) : (_jsx(TreeChevronPlaceholder, {})), _jsx(TreeCellContent, { children: cellBody })] })) : (cellBody) })] }, index));
             })] }));
 };
 export default TableRow;

package/dist/Table/types.d.ts

@@ -10,6 +10,42 @@ export type StateStorage = {
     type: "localStorage";
     key: string;
 };
+export type TreeMode = "nested" | "flat";
+export type TreeOptions = {
+    /** Enable tree-row behavior. Default: false */
+    enabled?: boolean;
+    /** Input shape. Default: "nested" */
+    mode?: TreeMode;
+    /** For mode="nested": field name that holds child array. Default: "children" */
+    childrenField?: string;
+    /** For mode="flat": field name that holds parent id. Default: "parentId" */
+    parentIdField?: string;
+    /** For mode="flat": field name that holds the row's stable id. Falls back to keyField. */
+    idField?: string;
+    /** Pixel width of one indentation level. Default: 16 */
+    indentPx?: number;
+    /** If a descendant matches search/filter, auto-expand its ancestors for the effective view. Default: true */
+    autoExpandOnMatch?: boolean;
+};
+export type ResolvedTreeOptions = {
+    enabled: boolean;
+    mode: TreeMode;
+    childrenField: string;
+    parentIdField: string;
+    idField?: string;
+    indentPx: number;
+    autoExpandOnMatch: boolean;
+};
+export type ExpandedKeysState = string[];
+export type OnExpandedChangeFn = (keys: string[]) => void;
+export type TreeMeta = {
+    /** Map of row key -> parent row key (undefined for roots) */
+    parentKeyMap: Map<string, string | undefined>;
+    /** Map of parent key -> ordered list of direct child keys */
+    childrenKeyMap: Map<string | undefined, string[]>;
+    /** All row keys that have children (eligible for expansion) */
+    expandableKeys: string[];
+};
 export type RenderOptions = {
     rowData: any;
     onRowUpdated?: (context: {
@@ -55,6 +91,7 @@ export type TableState = {
     sortState?: SortState;
     filterState?: Query;
     searchState?: string;
+    expandedKeys?: ExpandedKeysState;
 };
 export interface onResizeFinishedProps {
     column: ColumnState;
@@ -103,6 +140,17 @@ export type TableContextType = {
     data: any[];
     totalRecords?: number;
     keyField?: string;
+    treeOptions: ResolvedTreeOptions;
+    firstVisibleDataField?: string;
+    expandedKeys: string[];
+    effectiveExpandedKeys: Set<string>;
+    isRowExpanded: (row: any) => boolean;
+    toggleRowExpanded: (row: any) => void;
+    expandRow: (row: any) => void;
+    collapseRow: (row: any) => void;
+    expandAllRows: () => void;
+    collapseAllRows: () => void;
+    onExpandedChange?: OnExpandedChangeFn;
     tableHeight?: number;
     tableMaxHeight?: number;
     tableMinHeight?: number;
@@ -214,6 +262,11 @@ export interface TableProviderProps {
     defaultFilterState?: Query;
     filterState?: Query;
     onFilterChange?: (e: Query) => void;
+    treeOptions?: ResolvedTreeOptions;
+    defaultExpandedKeys?: ExpandedKeysState;
+    expandedKeys?: ExpandedKeysState;
+    onExpandedChange?: OnExpandedChangeFn;
+    treeMeta?: TreeMeta;
 }
 export interface TableRowProps {
     rowData: {
@@ -335,6 +388,10 @@ export interface TableProps {
     defaultFilterState?: Query;
     filterState?: Query;
     onFilterChange?: (e: Query) => void;
+    treeOptions?: TreeOptions;
+    defaultExpandedKeys?: ExpandedKeysState;
+    expandedKeys?: ExpandedKeysState;
+    onExpandedChange?: OnExpandedChangeFn;
 }
 export type TableInstance = {
     columnState: ColumnState[];
@@ -355,4 +412,11 @@ export type TableInstance = {
     clearSearch: () => void;
     clearSelections: () => void;
     getTableState: () => TableState;
+    expandRow: (row: any) => void;
+    collapseRow: (row: any) => void;
+    toggleRowExpanded: (row: any) => void;
+    isRowExpanded: (row: any) => boolean;
+    expandAllRows: () => void;
+    collapseAllRows: () => void;
+    getExpandedRowKeys: () => string[];
 };

package/dist/Tabs/Tab.js

@@ -12,6 +12,14 @@ const StyledTabButton = styled(Button) `
   color: ${({ theme }) => theme.palette.text.secondary};
   font-weight: 500;
 
+  &:focus {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+
   ${({ orientation }) => orientation === "horizontal" &&
     css `
       border-bottom: 2px solid transparent;