@monolith-forensics/monolith-ui 1.8.0 → 1.8.1-dev.1

package/dist/SegmentedControl/SegmentedControl.utils.js

@@ -1,3 +1,4 @@
+import { getControlSizeTokens } from "../core";
 export const resolveActiveColor = (theme, activeColor) => {
     var _a;
     const fallback = {
@@ -21,38 +22,10 @@ export const resolveActiveColor = (theme, activeColor) => {
     };
 };
 export const getSegmentHeight = (size) => {
-    switch (size) {
-        case "xxs":
-            return 22;
-        case "xs":
-            return 26;
-        case "md":
-            return 38;
-        case "lg":
-            return 46;
-        case "xl":
-            return 56;
-        case "sm":
-        default:
-            return 32;
-    }
+    return getControlSizeTokens(size).segmentedHeight;
 };
 export const getSegmentFontSize = (size) => {
-    switch (size) {
-        case "xxs":
-            return "11px";
-        case "xs":
-            return "12px";
-        case "md":
-            return "16px";
-        case "lg":
-            return "18px";
-        case "xl":
-            return "20px";
-        case "sm":
-        default:
-            return "14px";
-    }
+    return `${getControlSizeTokens(size).segmentedFontSize}px`;
 };
 export const normalizeSegmentedData = (data) => data.map((item) => {
     var _a;

package/dist/SelectBox/SelectBox.js

@@ -10,7 +10,7 @@ import { StyledInputContainer, StyledInnerItemContainer, EmptyComponent, GroupTi
 // Re-export for backward compatibility
 export { StyledInputContainer };
 export const SelectBox = ({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
-DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, 
+DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, dynamicOptionHeight, 
 // Enhanced focus control props
 triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
     var _a, _b, _c, _d, _e, _f;
@@ -276,16 +276,16 @@ triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
     // ============================================================================
     // Render Helper Functions
     // ============================================================================
-    const renderOptionItem = (item, index) => (_jsx(Tooltip, { content: OptionTooltip ? _jsx(OptionTooltip, { data: item.data }) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
+    const renderOptionItem = (item, index) => (_jsx(Tooltip, { content: OptionTooltip ? _jsx(OptionTooltip, { data: item.data }) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, "$dynamicHeight": dynamicOptionHeight !== null && dynamicOptionHeight !== void 0 ? dynamicOptionHeight : Boolean(renderOption), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
     const renderActionButton = () => {
         if (clearable && (_value || !!inputValue)) {
-            return (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
+            return (_jsx(ClearButton, { size: size, className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                 } }));
         }
         if (arrow) {
-            return (_jsx(ArrowButton, { onClick: (e) => {
+            return (_jsx(ArrowButton, { size: size, onClick: (e) => {
                     e.preventDefault();
                 }, onMouseDown: (e) => {
                     e.preventDefault();
@@ -393,7 +393,7 @@ triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
                                 : "",
                         }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && actionComponent && (_jsx(ActionMenu, { onClick: () => {
                                     setIsOpen(false);
-                                }, children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: getEmptyMessage(allowCustomValue, searchValue) })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
+                                }, children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { size: size, children: getEmptyMessage(allowCustomValue, searchValue) })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
                                     ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => renderOptionItem(item, index))] }, group.label)))
                                     : filteredItems.map((item, index) => renderOptionItem(item, index)) }))] })) }) }))] }));
 };

package/dist/SelectBox/select-box.styled-components.d.ts

@@ -4,7 +4,9 @@ export declare const StyledInputContainer: import("styled-components/dist/types"
     width?: string | number | null;
 }>> & string;
 export declare const StyledInnerItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const EmptyComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size?: Size;
+}>> & string;
 interface GroupTitleProps {
     className?: string;
     children?: ReactNode;
@@ -14,6 +16,7 @@ export declare const GroupTitle: import("styled-components/dist/types").IStyledC
 export declare const ActionMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     size: Size;
+    $dynamicHeight?: boolean;
 }>> & string;
 export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/dist/SelectBox/select-box.styled-components.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
+import { getControlSizeTokens } from "../core";
 export const StyledInputContainer = styled.div `
   font-family: ${({ theme }) => theme.typography.fontFamily};
 
@@ -58,7 +59,7 @@ export const EmptyComponent = styled.div `
   align-items: center;
   justify-content: center;
   padding: 5px;
-  font-size: 12px;
+  font-size: ${({ size = "sm" }) => `${getControlSizeTokens(size).supportingFontSize}px`};
   font-weight: 500;
   color: ${(props) => props.theme.palette.text.secondary};
 `;
@@ -74,17 +75,8 @@ export const GroupTitle = styled((_a) => {
 
   color: ${(props) => props.theme.palette.text.secondary};
 
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
+  min-height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+  padding: ${({ size = "sm" }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
   .group-label {
     white-space: nowrap;
@@ -95,17 +87,7 @@ export const GroupTitle = styled((_a) => {
 
     font-weight: 500;
 
-    font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
+    font-size: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuGroupFontSize}px`};
   }
 
   .group-line {
@@ -117,10 +99,11 @@ export const ActionMenu = styled.div ``;
 export const StyledItem = styled.div `
   color: ${(props) => props.theme.palette.text.primary};
   border-radius: 3px;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  min-height: 25px;
-  padding: 7px 10px;
+  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+  height: ${({ size, $dynamicHeight }) => $dynamicHeight ? "auto" : `${getControlSizeTokens(size).menuRowHeight}px`};
   position: relative;
   user-select: none;
   outline: none;
@@ -129,29 +112,9 @@ export const StyledItem = styled.div `
 
   font-family: ${({ theme }) => theme.typography.fontFamily};
 
-  font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
-
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+
+  padding: ${({ size, $dynamicHeight }) => `${$dynamicHeight ? 6 : 0}px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
   &:hover {
     background-color: ${(props) => props.theme.palette.action.hover};

package/dist/SelectBox/types.d.ts

@@ -34,6 +34,7 @@ export type SelectBoxProps = {
     debounceTime?: number;
     sort?: boolean;
     disabled?: boolean;
+    dynamicOptionHeight?: boolean;
     renderOption?: (item: Option | string) => React.ReactNode;
     OptionTooltip?: (props: {
         data: any;

package/dist/Switch/Switch.d.ts

@@ -2,8 +2,8 @@ import { CSSProperties, ReactNode } from "react";
 import { Size } from "../core";
 export type SwitchProps = {
     className?: string;
-    onChange: (e: any) => void;
-    size?: Exclude<Size, "xxs">;
+    onChange: (checked: boolean) => void;
+    size?: Size;
     label?: string;
     labelPosition?: "left" | "right";
     description?: ReactNode;

package/dist/Switch/Switch.js

@@ -13,46 +13,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import * as RadixSwitch from "@radix-ui/react-switch";
 import { FieldLabel } from "..";
+import { DEFAULT_CONTROL_SIZE, getControlSizeTokens } from "../core";
 import { Themes } from "../theme";
+const getThumbTranslation = (size = DEFAULT_CONTROL_SIZE) => {
+    const { switchTrackWidth, switchThumbSize, switchPadding } = getControlSizeTokens(size);
+    return `${switchTrackWidth - switchThumbSize - switchPadding * 2}px`;
+};
 const StyledRoot = styled(RadixSwitch.Root) `
   all: unset;
   cursor: pointer;
-
-  height: ${({ size }) => size === "xs"
-    ? "10px"
-    : size === "sm"
-        ? "16px"
-        : size === "md"
-            ? "22px"
-            : size === "lg"
-                ? "28px"
-                : size === "xl"
-                    ? "32px"
-                    : "16px"};
-
-  min-width: ${({ size }) => size === "xs"
-    ? "26px"
-    : size === "sm"
-        ? "35px"
-        : size === "md"
-            ? "41px"
-            : size === "lg"
-                ? "53px"
-                : size === "xl"
-                    ? "70px"
-                    : "26px"};
-
-  width: ${({ size }) => size === "xs"
-    ? "26px"
-    : size === "sm"
-        ? "35px"
-        : size === "md"
-            ? "41px"
-            : size === "lg"
-                ? "53px"
-                : size === "xl"
-                    ? "70px"
-                    : "26px"};
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).switchTrackHeight}px`};
+  min-width: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).switchTrackWidth}px`};
+  width: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).switchTrackWidth}px`};
 
   background-color: ${({ theme }) => theme.name === Themes.DARK ? "#383838" : "#e3e3e3"};
   transition: background-color 100ms;
@@ -60,17 +36,7 @@ const StyledRoot = styled(RadixSwitch.Root) `
   border: 1px solid
     ${({ theme }) => theme.name === Themes.DARK ? theme.palette.input.border : "#e3e3e3"};
   position: relative;
-  padding: ${({ size }) => size === "xs"
-    ? "2px"
-    : size === "sm"
-        ? "2px"
-        : size === "md"
-            ? "2px 9px 2px 3px"
-            : size === "lg"
-                ? "2px 9px 2px 3px"
-                : size === "xl"
-                    ? "2px 4px"
-                    : "2px"};
+  padding: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).switchPadding}px`};
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &[data-state="checked"] {
@@ -85,29 +51,8 @@ const StyledRoot = styled(RadixSwitch.Root) `
 `;
 const StyledThumb = styled(RadixSwitch.Thumb) `
   display: block;
-  width: ${({ size }) => size === "xs"
-    ? "9px"
-    : size === "sm"
-        ? "14px"
-        : size === "md"
-            ? "22px"
-            : size === "lg"
-                ? "28px"
-                : size === "xl"
-                    ? "28px"
-                    : "14px"};
-
-  height: ${({ size }) => size === "xs"
-    ? "9px"
-    : size === "sm"
-        ? "14px"
-        : size === "md"
-            ? "22px"
-            : size === "lg"
-                ? "28px"
-                : size === "xl"
-                    ? "28px"
-                    : "14px"};
+  width: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).switchThumbSize}px`};
+  height: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).switchThumbSize}px`};
 
   background-color: white;
   border: none;
@@ -117,25 +62,15 @@ const StyledThumb = styled(RadixSwitch.Thumb) `
   will-change: transform;
 
   &[data-state="checked"] {
-    transform: ${({ size }) => size === "xs"
-    ? "translateX(17px)"
-    : size === "sm"
-        ? "translateX(20px)"
-        : size === "md"
-            ? "translateX(26px)"
-            : size === "lg"
-                ? "translateX(32px)"
-                : size === "xl"
-                    ? "translateX(42px)"
-                    : "translateX(17px)"};
+    transform: ${({ size = DEFAULT_CONTROL_SIZE }) => `translateX(${getThumbTranslation(size)})`};
   }
 `;
 export const Switch = styled((_a) => {
-    var { className, onChange, size = "xs", label, labelPosition = "right", description, error, required, disabled = false, defaultValue, value, style = {} } = _a, other = __rest(_a, ["className", "onChange", "size", "label", "labelPosition", "description", "error", "required", "disabled", "defaultValue", "value", "style"]);
+    var { className, onChange, size = DEFAULT_CONTROL_SIZE, label, labelPosition = "right", description, error, required, disabled = false, defaultValue, value, style = {} } = _a, other = __rest(_a, ["className", "onChange", "size", "label", "labelPosition", "description", "error", "required", "disabled", "defaultValue", "value", "style"]);
     return (_jsxs("div", { className: className, children: [label && labelPosition === "left" && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, style: { margin: 0 }, children: label })), _jsx(StyledRoot, Object.assign({ size: size, className: "SwitchRoot", onCheckedChange: onChange, defaultChecked: defaultValue, checked: value, disabled: disabled, style: style }, other, { children: _jsx(StyledThumb, { size: size, className: "SwitchThumb" }) })), label && labelPosition === "right" && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, style: { margin: 0 }, children: label }))] }));
 }) `
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 10px;
+  gap: ${({ size = DEFAULT_CONTROL_SIZE }) => `${getControlSizeTokens(size).switchGap}px`};
 `;

package/dist/Table/StateStorage.d.ts

@@ -11,6 +11,8 @@ type GetSearchStateFn = (key: string) => string;
 type SetSearchStateFn = (key: string, value: string) => void;
 type GetFilterStateFn = (key: string) => Query | undefined;
 type SetFilterStateFn = (key: string, value?: Query | null) => void;
+type GetExpandedKeysFn = (key: string) => string[] | undefined;
+type SetExpandedKeysFn = (key: string, value: string[]) => void;
 declare const StateStorage: {
     getTableState: GetTableStateFn;
     getColumnState: GetColumnStateFn;
@@ -23,5 +25,7 @@ declare const StateStorage: {
     setSearchState: SetSearchStateFn;
     getFilterState: GetFilterStateFn;
     setFilterState: SetFilterStateFn;
+    getExpandedKeys: GetExpandedKeysFn;
+    setExpandedKeys: SetExpandedKeysFn;
 };
 export default StateStorage;

package/dist/Table/StateStorage.js

@@ -82,6 +82,17 @@ const setFilterState = (key, value) => {
     const newState = Object.assign(Object.assign({}, previousState), { filterState: value });
     set(key, newState);
 };
+const getExpandedKeys = (key) => {
+    const data = getTableState(key);
+    return data.expandedKeys;
+};
+const setExpandedKeys = (key, value) => {
+    // get previous state
+    const previousState = getTableState(key);
+    // merge previous state with new state
+    const newState = Object.assign(Object.assign({}, previousState), { expandedKeys: value });
+    set(key, newState);
+};
 const StateStorage = {
     getTableState,
     getColumnState,
@@ -94,5 +105,7 @@ const StateStorage = {
     setSearchState,
     getFilterState,
     setFilterState,
+    getExpandedKeys,
+    setExpandedKeys,
 };
 export default StateStorage;

package/dist/Table/Table.js

@@ -22,6 +22,7 @@ import TableMenu from "./TableMenu";
 import useTable from "./useTable";
 import LoadingIndicator from "./LoadingIndicator";
 import styled from "styled-components";
+import TableDefaults from "./TableDefaults";
 const StyledTableContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -40,8 +41,20 @@ const TableContent = ({ children, }) => {
                 }, ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx("div", { children: "No columns visible" }), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
 };
 export const Table = (_a) => {
-    var { data, columnProps, children } = _a, props = __rest(_a, ["data", "columnProps", "children"]) // pass through props straight to table context
+    var { data, columnProps, children, treeOptions } = _a, props = __rest(_a, ["data", "columnProps", "children", "treeOptions"]) // pass through props straight to table context
     ;
+    const resolvedTreeOptions = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        return ({
+            enabled: (_a = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.enabled) !== null && _a !== void 0 ? _a : false,
+            mode: (_b = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.mode) !== null && _b !== void 0 ? _b : TableDefaults.tree.defaultMode,
+            childrenField: (_c = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.childrenField) !== null && _c !== void 0 ? _c : TableDefaults.tree.defaultChildrenField,
+            parentIdField: (_d = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.parentIdField) !== null && _d !== void 0 ? _d : TableDefaults.tree.defaultParentIdField,
+            idField: treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.idField,
+            indentPx: (_e = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.indentPx) !== null && _e !== void 0 ? _e : TableDefaults.tree.indentPx,
+            autoExpandOnMatch: (_f = treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.autoExpandOnMatch) !== null && _f !== void 0 ? _f : true,
+        });
+    }, [treeOptions]);
     const tableElement = useRef(null);
     const targetElm = useRef(null);
     const listElm = useRef(null);
@@ -113,18 +126,153 @@ export const Table = (_a) => {
     // Uses a WeakMap so entries are automatically garbage collected
     // when their corresponding row objects are no longer referenced.
     const uuidCache = useRef(new WeakMap());
-    // Augment each row with a stable __key (UUID) and __index.
-    // The WeakMap ensures that the same row object always receives
-    // the same UUID across re-renders, preventing unnecessary DOM
-    // reconciliation. useMemo preserves referential stability of
-    // the output array when the data reference hasn't changed.
-    const __data = useMemo(() => data === null || data === void 0 ? void 0 : data.map((d, i) => {
-        let key = uuidCache.current.get(d);
+    const getOrAssignKey = (row) => {
+        let key = uuidCache.current.get(row);
         if (!key) {
             key = shortUUID.uuid();
-            uuidCache.current.set(d, key);
+            uuidCache.current.set(row, key);
+        }
+        return key;
+    };
+    // Augment each row with stable metadata. When tree mode is disabled,
+    // produces a flat 1:1 mapping with __key and __index. When enabled,
+    // walks the input (nested or flat) into a flat depth-first array
+    // and adds tree metadata (__level, __parentKey, __hasChildren, __childKeys).
+    const { rows: __data, treeMeta } = useMemo(() => {
+        const parentKeyMap = new Map();
+        const childrenKeyMap = new Map();
+        const expandableKeys = [];
+        if (!data) {
+            return {
+                rows: [],
+                treeMeta: { parentKeyMap, childrenKeyMap, expandableKeys },
+            };
+        }
+        if (!resolvedTreeOptions.enabled) {
+            const rows = data.map((d, i) => (Object.assign(Object.assign({}, d), { __key: getOrAssignKey(d), __index: i })));
+            return {
+                rows,
+                treeMeta: { parentKeyMap, childrenKeyMap, expandableKeys },
+            };
         }
-        return Object.assign(Object.assign({}, d), { __key: key, __index: i });
-    }), [data]);
-    return (_jsx(TableProvider, Object.assign({ columns: columnProps, data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm }, props, { children: _jsx(TableContent, { children: children }) })));
+        const rows = [];
+        let counter = 0;
+        if (resolvedTreeOptions.mode === "nested") {
+            const childrenField = resolvedTreeOptions.childrenField;
+            const walk = (node, level, parentKey) => {
+                const key = getOrAssignKey(node);
+                const rawChildren = node === null || node === void 0 ? void 0 : node[childrenField];
+                const children = Array.isArray(rawChildren) ? rawChildren : [];
+                const childKeys = children.map((c) => getOrAssignKey(c));
+                // Strip the nested children field from the augmented copy to avoid
+                // memory bloat and prevent accidental iteration of the raw tree.
+                const _a = node, _b = childrenField, _stripped = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                const augmented = Object.assign(Object.assign({}, rest), { __key: key, __index: counter++, __level: level, __parentKey: parentKey, __hasChildren: children.length > 0, __childKeys: childKeys });
+                rows.push(augmented);
+                parentKeyMap.set(key, parentKey);
+                if (children.length > 0) {
+                    childrenKeyMap.set(key, childKeys);
+                    expandableKeys.push(key);
+                }
+                for (const child of children) {
+                    walk(child, level + 1, key);
+                }
+            };
+            const rootKeys = [];
+            for (const root of data) {
+                rootKeys.push(getOrAssignKey(root));
+                walk(root, 0, undefined);
+            }
+            childrenKeyMap.set(undefined, rootKeys);
+        }
+        else {
+            // flat mode
+            const idField = resolvedTreeOptions.idField || props.keyField;
+            if (!idField) {
+                throw new Error('Table treeOptions.mode="flat" requires either treeOptions.idField or keyField to be set so the table can resolve parent-child relationships against a stable id.');
+            }
+            const parentIdField = resolvedTreeOptions.parentIdField;
+            // Pass 1: assign __key, build idToKey
+            const idToKey = new Map();
+            const idToRow = new Map();
+            for (const d of data) {
+                const id = d === null || d === void 0 ? void 0 : d[idField];
+                if (id === undefined || id === null)
+                    continue;
+                idToKey.set(id, getOrAssignKey(d));
+                idToRow.set(id, d);
+            }
+            // Pass 2: build parent->children id map. Roots = parentId null/undefined
+            // OR parentId points at a non-existent row.
+            const parentToChildIds = new Map();
+            const rootIds = [];
+            let warnedOrphan = false;
+            for (const d of data) {
+                const id = d === null || d === void 0 ? void 0 : d[idField];
+                if (id === undefined || id === null)
+                    continue;
+                const parentId = d === null || d === void 0 ? void 0 : d[parentIdField];
+                if (parentId === undefined || parentId === null) {
+                    rootIds.push(id);
+                    continue;
+                }
+                if (!idToRow.has(parentId)) {
+                    if (!warnedOrphan) {
+                        // eslint-disable-next-line no-console
+                        console.warn(`Table tree (flat mode): row id "${id}" references missing parentId "${parentId}"; treating as root.`);
+                        warnedOrphan = true;
+                    }
+                    rootIds.push(id);
+                    continue;
+                }
+                if (!parentToChildIds.has(parentId))
+                    parentToChildIds.set(parentId, []);
+                parentToChildIds.get(parentId).push(id);
+            }
+            // Pass 3: DFS from roots with cycle detection
+            const visiting = new Set();
+            let warnedCycle = false;
+            const walkFlat = (id, level, parentKey) => {
+                if (visiting.has(id)) {
+                    if (!warnedCycle) {
+                        // eslint-disable-next-line no-console
+                        console.warn(`Table tree (flat mode): cycle detected at row id "${id}"; truncating subtree.`);
+                        warnedCycle = true;
+                    }
+                    return;
+                }
+                visiting.add(id);
+                const node = idToRow.get(id);
+                const key = idToKey.get(id);
+                const childIds = parentToChildIds.get(id) || [];
+                const childKeys = childIds
+                    .map((cid) => idToKey.get(cid))
+                    .filter((k) => !!k);
+                const augmented = Object.assign(Object.assign({}, node), { __key: key, __index: counter++, __level: level, __parentKey: parentKey, __hasChildren: childIds.length > 0, __childKeys: childKeys });
+                rows.push(augmented);
+                parentKeyMap.set(key, parentKey);
+                if (childIds.length > 0) {
+                    childrenKeyMap.set(key, childKeys);
+                    expandableKeys.push(key);
+                }
+                for (const cid of childIds) {
+                    walkFlat(cid, level + 1, key);
+                }
+                visiting.delete(id);
+            };
+            const rootKeys = [];
+            for (const id of rootIds) {
+                const k = idToKey.get(id);
+                if (k)
+                    rootKeys.push(k);
+                walkFlat(id, 0, undefined);
+            }
+            childrenKeyMap.set(undefined, rootKeys);
+        }
+        return {
+            rows,
+            treeMeta: { parentKeyMap, childrenKeyMap, expandableKeys },
+        };
+    }, [data, resolvedTreeOptions, props.keyField]);
+    return (_jsx(TableProvider, Object.assign({ columns: columnProps, data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, treeOptions: resolvedTreeOptions, treeMeta: treeMeta }, props, { children: _jsx(TableContent, { children: children }) })));
 };

package/dist/Table/TableComponents.d.ts

@@ -6,6 +6,16 @@ export declare const THR: import("styled-components/dist/types").IStyledComponen
 export declare const TD: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TDProps>> & string;
 export declare const TH: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TDProps> & TDProps, never>> & string;
 export declare const InnerCellContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TreeCellWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TreeIndentSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $level: number;
+    $indentPx: number;
+}>> & string;
+export declare const TreeChevronButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $expanded: boolean;
+}>> & string;
+export declare const TreeChevronPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TreeCellContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableViewPort: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableListElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;