pixel-react 1.20.21 → 1.20.22

package/lib/components/Table/Table.js

@@ -1 +1,207 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import"./Table.scss.js";import{isFunction as o}from"../../assets/utils/functionUtils.js";import n from"../../_virtual/index.js";import{forwardRef as i,useRef as r,useState as l,useEffect as a,useCallback as d,useMemo as s,useImperativeHandle as c}from"react";import{binarySearch as h,calculateFrozenWidth as m}from"./utils/virtualization.js";import{DEFAULT_ROW_HEIGHT as u,BUFFER_SIZE as p}from"./utils/constants.js";import f from"./components/TableHeader.js";import b from"./components/VirtualizedRows.js";import{debounce as g}from"../../utils/debounce/debounce.js";import{DndContext as x,closestCorners as C}from"../../node_modules/@dnd-kit/core/dist/core.esm.js";import{SortableContext as w,verticalListSortingStrategy as T}from"../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";import{checkEmpty as v}from"../../utils/checkEmpty/checkEmpty.js";const R=i(({data:i=[],columns:R=[],headerType:k,withCheckbox:I=!1,onSelect:H,allSelected:j,partialSelected:y=!1,withFixedHeader:D=!0,borderWithRadius:S=!1,headerCheckboxDisabled:M=!1,noDataContent:z,height:B="100%",className:N="",tableHeadClass:_="",tableBodyRowClass:A="",headerTextColor:E,tableDataTextColor:F,headerIconName:O="",headerIconOnClick:W=()=>{},draggable:q=!1,tableRef:Z=null,isRowCheckBoxDisable:$,isRowDisabled:L=!0,tableHeaderZindex:U=99,freezeColumns:V,headerIconTooltipTitle:G,onDragEnd:J,editMode:K="",editComponent:P,accordionContent:Q,getAccordionStatus:X=()=>{},selectedNode:Y={key:"",selected:""},uniqueRowIdForAccordion:ee},te)=>{const oe=r(null),ne=i.length,[ie,re]=l(0),[le,ae]=l(0),de=r({}),[se,ce]=l(0);a(()=>{ce(e=>e+1)},[i]),a(()=>{const e=oe.current;if(!e)return;ae(e.clientHeight);const t=new ResizeObserver(e=>{for(let t of e){const e=t.contentRect.height;Math.abs(e-le)>1&&ae(e)}});return t.observe(e),()=>{t.unobserve(e),t.disconnect()}},[le]);const he=d(e=>{re(e.currentTarget.scrollTop)},[]),me=s(()=>g(()=>{ce(e=>e+1)},20),[]),ue=d((e,t)=>{const o=de.current[e];(void 0===o||Math.abs(o-t)>1)&&(de.current[e]=t,me())},[me]),{cumulativeHeights:pe,totalContentHeight:fe}=s(()=>{let e=0;const t=[0];for(let o=0;o<ne;o++){e+=de.current[o]??u,t.push(e)}return{cumulativeHeights:t,totalContentHeight:e}},[ne,se]),be=s(()=>{if(0===le||0===ne)return{startIndex:0,endIndex:-1,paddingTop:0,paddingBottom:0,visibleRows:[]};const e=h(pe,ie+1);let t=e>0?e-1:0;let o=h(pe,ie+le)-1,n=Math.max(0,t-p),r=Math.min(ne-1,o+p);const l=pe[n],a=pe[r+1];return{startIndex:n,endIndex:r,paddingTop:l,paddingBottom:fe-(void 0!==a?a:fe),visibleRows:i.slice(n,r+1)}},[ie,le,ne,pe,i]),{startIndex:ge,paddingTop:xe,paddingBottom:Ce,visibleRows:we}=be;let Te=0;V&&(Te=m(R,V));const ve=d((e,t)=>{let{onClick:n,accessor:i}=e;n&&o(n)&&n(i,t)},[]),Re=d((e,t)=>{H&&H(e,t)},[H]),ke=d(e=>{const t=i.findIndex(t=>t.id===e||t._id===e);if(-1===t||!oe.current||0===pe.length)return;const o=oe.current,n=pe[t],r=pe[t+1];let l=Math.max(0,n-50);const a=o.scrollTop,d=o.scrollTop+o.clientHeight;if(n>=a+50&&r<=d)return;const s=Math.max(0,fe-o.clientHeight);l=Math.min(l,s),o.scrollTop=l,re(l)},[i,pe,fe]);c(te,()=>({scrollToRow:ke}));return e(x,{collisionDetection:C,onDragEnd:e=>{const{active:t,over:o}=e;if(!o||t.id===o.id)return;const n=i.findIndex(e=>e._id===t.id||e.id===t.id),r=i.findIndex(e=>e._id===o.id||e.id===o.id);-1!==n&&-1!==r&&J&&J(n,r)},children:e(w,{disabled:!q,items:i?.map(e=>e._id||e.id),strategy:T,children:t("div",{ref:e=>{oe.current=e,Z&&("function"==typeof Z?Z(e):"object"==typeof Z&&"current"in Z&&(Z.current=e))},style:{height:B,overflow:"auto",position:"relative",scrollbarWidth:q?"none":"auto","--frozen-column-width":V?`${Te}px`:"0px"},id:"ff-table-scroll-container",className:n("ff-table-scroll-container",{"ff-table-fixed-header":D,"ff-table-container--border-radius":S},N),onScroll:he,children:[t("table",{className:"ff-table-container",cellSpacing:0,style:{height:fe},children:[e(f,{columns:R,freezeColumns:V,headerType:k,tableHeadClass:_,headerTextColor:E,headerCheckboxDisabled:M,withCheckbox:I,allSelected:j,partialSelected:y,headerIconName:O,headerIconOnClick:W,headerIconTooltipTitle:G,tableHeaderZindex:U,onSelectClick:Re,withFixedHeader:D}),e(b,{paddingTop:xe??0,paddingBottom:Ce,columnsLength:R.length,visibleRows:we,startIndex:ge,columns:R,tableBodyRowClass:A,handleOnclick:ve,tableDataTextColor:F,withCheckbox:I,onSelectClick:Re,isRowCheckBoxDisable:$,isRowDisabled:L,freezeColumns:V,frozenWidth:Te,updateRowHeight:ue,draggable:q,editMode:K,editComponent:P,getAccordionStatus:X,accordionContent:Q,selectedNode:Y,uniqueRowIdForAccordion:ee})]}),v(i)&&e("div",{className:"ff-no-data-content",style:{height:`calc(${B} - 50px)`},children:z})]})})})});export{R as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Table.scss';
+import { isFunction } from '../../assets/utils/functionUtils';
+import classNames from 'classnames';
+import { useEffect, useRef, useState, useCallback, useMemo, useImperativeHandle, forwardRef, } from 'react';
+import { binarySearch, calculateFrozenWidth } from './utils/virtualization';
+import { BUFFER_SIZE, DEFAULT_ROW_HEIGHT } from './utils/constants';
+import TableHeader from './components/TableHeader';
+import VirtualizedRows from './components/VirtualizedRows';
+import { debounce } from '../../utils/debounce/debounce';
+import { closestCorners, DndContext } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+const Table = forwardRef(({ data = [], columns = [], headerType, withCheckbox = false, onSelect, allSelected, partialSelected = false, withFixedHeader = true, borderWithRadius = false, headerCheckboxDisabled = false, noDataContent, height = '100%', className = '', tableHeadClass = '', tableBodyRowClass = '', headerTextColor, tableDataTextColor, headerIconName = '', headerIconOnClick = () => { }, draggable = false, tableRef = null, isRowCheckBoxDisable, isRowDisabled = true, tableHeaderZindex = 99, freezeColumns, headerIconTooltipTitle, onDragEnd, editMode = '', editComponent, accordionContent, getAccordionStatus = () => { }, selectedNode = { key: '', selected: '' }, uniqueRowIdForAccordion, }, ref) => {
+    const containerRef = useRef(null);
+    const totalRows = data.length;
+    const setContainerRef = (node) => {
+        containerRef.current = node;
+        if (tableRef) {
+            if (typeof tableRef === 'function') {
+                tableRef(node);
+            }
+            else if (typeof tableRef === 'object' && 'current' in tableRef) {
+                tableRef.current = node;
+            }
+        }
+    };
+    const [scrollTop, setScrollTop] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(0);
+    // --- PERFORMANCE FIX 1: Use useRef for heights (No Re-renders) ---
+    const rowHeightsMap = useRef({});
+    // This version number triggers the re-calculation of the virtual list
+    const [heightVersion, setHeightVersion] = useState(0);
+    // Reset heights when data array reference changes
+    useEffect(() => {
+        setHeightVersion((version) => version + 1);
+    }, [data]);
+    // Container Resize Observer
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        setContainerHeight(container.clientHeight);
+        const observer = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+                // Use contentRect for the container
+                const newHeight = entry.contentRect.height;
+                if (Math.abs(newHeight - containerHeight) > 1) {
+                    setContainerHeight(newHeight);
+                }
+            }
+        });
+        observer.observe(container);
+        return () => {
+            observer.unobserve(container);
+            observer.disconnect();
+        };
+    }, [containerHeight]);
+    const handleScroll = useCallback((e) => {
+        // Use requestAnimationFrame for scroll updates if scrolling feels jittery,
+        // generally direct state update is fine for React 18+ automatic batching.
+        setScrollTop(e.currentTarget.scrollTop);
+    }, []);
+    // --- PERFORMANCE FIX 2: Batched Updates (Debounce) ---
+    // If 100 rows mount, this ensures we only re-calculate layout ONCE after 20ms.
+    const commitHeightUpdates = useMemo(() => debounce(() => {
+        setHeightVersion((prev) => prev + 1);
+    }, 20), []);
+    const updateRowHeight = useCallback((index, height) => {
+        const currentHeight = rowHeightsMap.current[index];
+        // Only schedule update if height changed by > 1px
+        if (currentHeight === undefined ||
+            Math.abs(currentHeight - height) > 1) {
+            // 1. Update the Ref (Synchronous, cheap)
+            rowHeightsMap.current[index] = height;
+            // 2. Trigger the Debounced Re-render (Asynchronous)
+            commitHeightUpdates();
+        }
+    }, [commitHeightUpdates]);
+    // --- PERFORMANCE FIX 3: Calculate Cumulative Heights from Ref ---
+    const { cumulativeHeights, totalContentHeight } = useMemo(() => {
+        let cumulative = 0;
+        const heights = [0];
+        for (let i = 0; i < totalRows; i++) {
+            // FAST: Reading directly from the Ref object
+            const height = rowHeightsMap.current[i] ?? DEFAULT_ROW_HEIGHT;
+            cumulative += height;
+            heights.push(cumulative);
+        }
+        return { cumulativeHeights: heights, totalContentHeight: cumulative };
+    }, [totalRows, heightVersion]); // Only runs when 'heightVersion' updates
+    // Virtualization Logic
+    const visibleState = useMemo(() => {
+        if (containerHeight === 0 || totalRows === 0) {
+            return {
+                startIndex: 0,
+                endIndex: -1,
+                paddingTop: 0,
+                paddingBottom: 0,
+                visibleRows: [],
+            };
+        }
+        const startIdxPlusOne = binarySearch(cumulativeHeights, scrollTop + 1);
+        let startIndex = startIdxPlusOne > 0 ? startIdxPlusOne - 1 : 0;
+        const endIdxPlusOne = binarySearch(cumulativeHeights, scrollTop + containerHeight);
+        let endIndex = endIdxPlusOne - 1;
+        let bufferedStart = Math.max(0, startIndex - BUFFER_SIZE);
+        let bufferedEnd = Math.min(totalRows - 1, endIndex + BUFFER_SIZE);
+        const paddingTop = cumulativeHeights[bufferedStart];
+        // Ensure we don't access out of bounds
+        const nextHeight = cumulativeHeights[bufferedEnd + 1];
+        const paddingBottom = totalContentHeight -
+            (nextHeight !== undefined ? nextHeight : totalContentHeight);
+        // Slicing data is cheap
+        return {
+            startIndex: bufferedStart,
+            endIndex: bufferedEnd,
+            paddingTop: paddingTop,
+            paddingBottom: paddingBottom,
+            visibleRows: data.slice(bufferedStart, bufferedEnd + 1),
+        };
+    }, [scrollTop, containerHeight, totalRows, cumulativeHeights, data]);
+    const { startIndex, paddingTop, paddingBottom, visibleRows } = visibleState;
+    let frozenWidth = 0;
+    if (freezeColumns) {
+        frozenWidth = calculateFrozenWidth(columns, freezeColumns);
+    }
+    const handleOnclick = useCallback((column, row) => {
+        let { onClick, accessor } = column;
+        if (onClick && isFunction(onClick)) {
+            onClick(accessor, row);
+        }
+    }, []);
+    const onSelectClick = useCallback((e, item) => {
+        if (onSelect) {
+            onSelect(e, item);
+        }
+    }, [onSelect]);
+    // --- START OF NEW AUTOSCROLL LOGIC ---
+    /**
+     * Calculates the scroll position and imperatively scrolls the table to the row with the given ID.
+     * @param rowId The ID or _id of the row to scroll to.
+     */
+    const scrollToRow = useCallback((rowId) => {
+        // Assuming a safe, estimated fixed header height.
+        // You MUST verify this value matches your actual TableHeader height.
+        const FIXED_HEADER_HEIGHT = 50;
+        const targetIndex = data.findIndex((row) => row.id === rowId || row._id === rowId);
+        if (targetIndex === -1 ||
+            !containerRef.current ||
+            cumulativeHeights.length === 0) {
+            return;
+        }
+        const container = containerRef.current;
+        const targetRowTop = cumulativeHeights[targetIndex];
+        const targetRowBottom = cumulativeHeights[targetIndex + 1];
+        // --- 1. Calculate Initial Adjusted Position (Handling Fixed Header) ---
+        // Scrolls the row down by the header height to bring it into full view.
+        let adjustedScrollPosition = Math.max(0, targetRowTop - FIXED_HEADER_HEIGHT);
+        const currentScrollTop = container.scrollTop;
+        const currentScrollBottom = container.scrollTop + container.clientHeight;
+        if (targetRowTop >= currentScrollTop + FIXED_HEADER_HEIGHT &&
+            targetRowBottom <= currentScrollBottom) {
+            return;
+        }
+        // --- 3. Edge Case: Preventing Overscrolling to the Bottom ---
+        // Find the maximum possible scrollTop value (total height minus viewport height).
+        const maxScrollTop = Math.max(0, totalContentHeight - container.clientHeight);
+        // Clamp the adjusted position to ensure we don't scroll past the content end.
+        adjustedScrollPosition = Math.min(adjustedScrollPosition, maxScrollTop);
+        // --- 4. Perform the Scroll ---
+        container.scrollTop = adjustedScrollPosition;
+        setScrollTop(adjustedScrollPosition);
+    }, [data, cumulativeHeights, totalContentHeight]);
+    // 5. Expose the scroll function to the parent component via the ref
+    useImperativeHandle(ref, () => ({
+        // Expose the custom scroll function
+        scrollToRow: scrollToRow,
+        // You can expose other methods or the containerRef here if needed
+    }));
+    // --- END OF NEW AUTOSCROLL LOGIC ---
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const oldIndex = data.findIndex((item) => item._id === active.id || item.id === active.id);
+        const newIndex = data.findIndex((item) => item._id === over.id || item.id === over.id);
+        if (oldIndex === -1 || newIndex === -1)
+            return;
+        if (onDragEnd)
+            onDragEnd(oldIndex, newIndex);
+    };
+    return (_jsx(DndContext, { collisionDetection: closestCorners, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { disabled: !draggable, items: data?.map((row) => row._id || row.id), strategy: verticalListSortingStrategy, children: _jsxs("div", { ref: setContainerRef, style: {
+                    height,
+                    overflow: 'auto',
+                    position: 'relative',
+                    scrollbarWidth: draggable ? 'none' : 'auto',
+                    '--frozen-column-width': freezeColumns
+                        ? `${frozenWidth}px`
+                        : '0px',
+                }, id: "ff-table-scroll-container", className: classNames('ff-table-scroll-container', {
+                    'ff-table-fixed-header': withFixedHeader,
+                    'ff-table-container--border-radius': borderWithRadius,
+                }, className), onScroll: handleScroll, children: [_jsxs("table", { className: "ff-table-container", cellSpacing: 0, style: { height: totalContentHeight }, children: [_jsx(TableHeader, { columns: columns, freezeColumns: freezeColumns, headerType: headerType, tableHeadClass: tableHeadClass, headerTextColor: headerTextColor, headerCheckboxDisabled: headerCheckboxDisabled, withCheckbox: withCheckbox, allSelected: allSelected, partialSelected: partialSelected, headerIconName: headerIconName, headerIconOnClick: headerIconOnClick, headerIconTooltipTitle: headerIconTooltipTitle, tableHeaderZindex: tableHeaderZindex, onSelectClick: onSelectClick, withFixedHeader: withFixedHeader }), _jsx(VirtualizedRows, { paddingTop: paddingTop ?? 0, paddingBottom: paddingBottom, columnsLength: columns.length, visibleRows: visibleRows, startIndex: startIndex, columns: columns, tableBodyRowClass: tableBodyRowClass, handleOnclick: handleOnclick, tableDataTextColor: tableDataTextColor, withCheckbox: withCheckbox, onSelectClick: onSelectClick, isRowCheckBoxDisable: isRowCheckBoxDisable, isRowDisabled: isRowDisabled, freezeColumns: freezeColumns, frozenWidth: frozenWidth, updateRowHeight: updateRowHeight, draggable: draggable, editMode: editMode, editComponent: editComponent, getAccordionStatus: getAccordionStatus, accordionContent: accordionContent, selectedNode: selectedNode, uniqueRowIdForAccordion: uniqueRowIdForAccordion })] }), checkEmpty(data) && (_jsx("div", { className: "ff-no-data-content", style: { height: `calc(${height} - 50px)` }, children: noDataContent }))] }) }) }));
+});
+export default Table;
+//# sourceMappingURL=Table.js.map

package/lib/components/Table/components/SortableRow.js

@@ -1 +1,96 @@
-import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{memo as i,useRef as o,useCallback as a,useEffect as l}from"react";import n from"../../../_virtual/index.js";import s from"../../Typography/Typography.js";import d from"../../Icon/Icon.js";import c from"../../Checkbox/Checkbox.js";import{prepareData as b}from"../../../utils/TableCell/TableCell.js";import{getColumnLeftPosition as f}from"../utils/virtualization.js";import{useSortable as m}from"../../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";import{CSS as u}from"../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js";const h=i(({row:i,index:h,serialNumber:p,columns:g,tableBodyRowClass:x,handleOnclick:k,tableDataTextColor:C,withCheckbox:w,onSelectClick:v,draggable:N,isRowCheckBoxDisable:y,isRowDisabled:R,freezeColumns:j,updateRowHeight:T,editMode:z,isAccordionOpen:_,accordionContent:B,selectedNode:H})=>{const{attributes:S,listeners:D,setNodeRef:I,transform:O,transition:$}=m({id:i?._id||i?.id,disabled:i.disabled||!!z}),A=o(null),M=o(null),q=a(()=>{if(!T)return;const e=(A.current?.getBoundingClientRect().height||0)+(M.current?.getBoundingClientRect().height||0);e>0&&T(h,e)},[h,T]);l(()=>{const e=A.current,t=M.current;if(!T)return;const r=new ResizeObserver(()=>{q()});return e&&r.observe(e),t&&r.observe(t),()=>{r.disconnect()}},[q,_]);const E=i?.[H?.key]||i._id||i.id,F=E===H.selected,G={transform:u.Transform.toString(O),transition:$};return e(t,{children:[r("tr",{ref:e=>{A.current!==e&&(A.current=e),I(e)},className:n("ff-table-data-row ",x,{"ff-table-disabled":i.disabled&&R,"ff-table-selected-node":F}),id:E,style:G,children:g.map((o,a)=>{const l=j&&a<j;return r("td",{onClick:()=>k(o,i),style:{position:l?"sticky":"static",left:l?f(a,g,j):"auto",zIndex:l?100:"auto",backgroundColor:l?"var(--input-label-bg-color)":"transparent",width:o.width?`${o.width}px`:"auto",padding:"7px 8px",boxSizing:"border-box",paddingRight:l?0:"8px"},className:n("ff-table-data-cell ff-table-icon-container",o.className,{"ff-table-clickable-cell":o.onClick,"ff-table-sticky-column":l}),children:e(s,{as:"div",color:C,className:"ff-table-data-container",children:[0===a&&w&&r("span",{className:"ff-table-checkbox-table",children:r(c,{onChange:e=>v(e,i),checked:i.checked,disabled:void 0===y?!!i.disabled:y})}),0===a&&N&&e(t,{children:[r("span",{className:i.disabled?"ff-table-drag":"ff-table-drag-icon",...D,...S,children:r(d,{name:"drag",className:"ff-table-drag-active"})}),r(s,{color:"var(--brand-color)",children:p&&`${p}.`})]}),b(i,o)]})},o.accessor+a)})},E),_&&r("tr",{ref:M,children:r("td",{className:"ff-table-data-cell",colSpan:g.length,children:r("div",{style:{maxHeight:"none",overflow:"visible"},children:B})})})]})},(e,t)=>e.row===t.row&&e.index===t.index&&e.serialNumber===t.serialNumber&&e.updateRowHeight===t.updateRowHeight&&e.columns===t.columns);export{h as default};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, memo, useCallback } from 'react';
+import classNames from 'classnames';
+import Typography from '../../Typography';
+import Icon from '../../Icon';
+import Checkbox from '../../Checkbox';
+import { prepareData } from '../../../utils/TableCell/TableCell';
+import { getColumnLeftPosition } from '../utils/virtualization';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+// OPTIMIZATION: Memoize to prevent re-rendering when parent Table updates
+const SortableRow = memo(({ row, index, serialNumber, columns, tableBodyRowClass, handleOnclick, tableDataTextColor, withCheckbox, onSelectClick, draggable, isRowCheckBoxDisable, isRowDisabled, freezeColumns, updateRowHeight, editMode, isAccordionOpen, accordionContent, selectedNode, }) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: row?._id || row?.id,
+        disabled: row.disabled || !!editMode,
+    });
+    const rowRef = useRef(null);
+    const accordionRef = useRef(null);
+    const updateHeight = useCallback(() => {
+        if (!updateRowHeight)
+            return;
+        const mainRowHeight = rowRef.current?.getBoundingClientRect().height || 0;
+        const accordionHeight = accordionRef.current?.getBoundingClientRect().height || 0;
+        const totalHeight = mainRowHeight + accordionHeight;
+        if (totalHeight > 0) {
+            updateRowHeight(index, totalHeight);
+        }
+    }, [index, updateRowHeight]);
+    useEffect(() => {
+        const mainElement = rowRef.current;
+        const accordionElement = accordionRef.current;
+        if (!updateRowHeight)
+            return;
+        // OPTIMIZATION: ResizeObserver
+        // We do NOT call getBoundingClientRect() here anymore.
+        // Calling it manually forces the browser to calculate layout immediately (Reflow).
+        // The observer will deliver the height asynchronously without freezing the thread.
+        const observer = new ResizeObserver(() => {
+            updateHeight();
+        });
+        if (mainElement)
+            observer.observe(mainElement);
+        if (accordionElement)
+            observer.observe(accordionElement);
+        return () => {
+            observer.disconnect();
+        };
+    }, [updateHeight, isAccordionOpen]);
+    const key = row?.[selectedNode?.key] || row._id || row.id;
+    const selectedRow = key === selectedNode.selected;
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { ref: (node) => {
+                    if (rowRef.current !== node) {
+                        rowRef.current = node;
+                    }
+                    setNodeRef(node);
+                }, className: classNames('ff-table-data-row ', tableBodyRowClass, {
+                    'ff-table-disabled': row.disabled && isRowDisabled,
+                    'ff-table-selected-node': selectedRow,
+                }), id: key, style: style, children: columns.map((column, columnIndex) => {
+                    const isFrozen = freezeColumns && columnIndex < freezeColumns;
+                    return (_jsx("td", { onClick: () => handleOnclick(column, row), style: {
+                            position: isFrozen ? 'sticky' : 'static',
+                            left: isFrozen
+                                ? getColumnLeftPosition(columnIndex, columns, freezeColumns)
+                                : 'auto',
+                            zIndex: isFrozen ? 100 : 'auto',
+                            backgroundColor: isFrozen
+                                ? 'var(--input-label-bg-color)'
+                                : 'transparent',
+                            width: column.width ? `${column.width}px` : 'auto',
+                            padding: '7px 8px',
+                            boxSizing: 'border-box',
+                            paddingRight: isFrozen ? 0 : '8px',
+                        }, className: classNames('ff-table-data-cell ff-table-icon-container', column.className, {
+                            'ff-table-clickable-cell': column.onClick,
+                            'ff-table-sticky-column': isFrozen,
+                        }), children: _jsxs(Typography, { as: "div", color: tableDataTextColor, className: "ff-table-data-container", children: [columnIndex === 0 && withCheckbox && (_jsx("span", { className: "ff-table-checkbox-table", children: _jsx(Checkbox, { onChange: (e) => onSelectClick(e, row), checked: row.checked, disabled: isRowCheckBoxDisable === undefined
+                                            ? !!row.disabled
+                                            : isRowCheckBoxDisable }) })), columnIndex === 0 && draggable && (_jsxs(_Fragment, { children: [_jsx("span", { className: row.disabled ? 'ff-table-drag' : 'ff-table-drag-icon', ...listeners, ...attributes, children: _jsx(Icon, { name: "drag", className: "ff-table-drag-active" }) }), _jsx(Typography, { color: "var(--brand-color)", children: serialNumber && `${serialNumber}.` })] })), prepareData(row, column)] }) }, column.accessor + columnIndex));
+                }) }, key), isAccordionOpen && (_jsx("tr", { ref: accordionRef, children: _jsx("td", { className: "ff-table-data-cell", colSpan: columns.length, children: _jsx("div", { style: { maxHeight: 'none', overflow: 'visible' }, children: accordionContent }) }) }))] }));
+}, 
+// OPTIMIZATION: Custom Memo Comparison
+// Returns true if props are equal (prevents re-render)
+(prev, next) => {
+    return (prev.row === next.row &&
+        prev.index === next.index &&
+        prev.serialNumber === next.serialNumber &&
+        prev.updateRowHeight === next.updateRowHeight &&
+        prev.columns === next.columns);
+});
+export default SortableRow;
+//# sourceMappingURL=SortableRow.js.map

package/lib/components/Table/components/TableHeader.js

@@ -1 +1,29 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{memo as a}from"react";import o from"../../../_virtual/index.js";import{getColumnLeftPosition as i}from"../utils/virtualization.js";import l from"../../Tooltip/Tooltip.js";import r from"../../Icon/Icon.js";import d from"../../Typography/Typography.js";import c from"../../Checkbox/Checkbox.js";const h=a(a=>{const{columns:h,freezeColumns:n,headerType:s,tableHeadClass:p,headerTextColor:f,headerCheckboxDisabled:m,withCheckbox:b,allSelected:x,partialSelected:u,headerIconName:k="",headerIconOnClick:g,headerIconTooltipTitle:C,tableHeaderZindex:y,onSelectClick:w,withFixedHeader:T}=a;return e("thead",{className:o("ff-table-header",{"ff-table-fixed-header":T},p),style:{zIndex:y},children:e("tr",{children:h.map((a,p)=>{const y=n&&p<n;return t("th",{className:o("ff-table-header-cell","default"!==s?`ff-table-${s}-bg`:"",f&&`ff-table-${f}-color`),style:{position:y?"sticky":"static",left:y?i(p,h,n):"auto",zIndex:y?999:"auto",width:a.width?`${a.width}px`:"auto",padding:"8px 8px",boxSizing:"border-box",paddingRight:y?0:"8px"},children:[e("div",{className:"ff-table-icon",children:e(l,{title:C||"",placement:"bottom",children:e(r,{height:14,width:14,name:k,onClick:g,cursorType:"pointer"})})}),t(d,{style:a.width?{width:a.width}:void 0,as:"div",fontWeight:"semi-bold",className:"ff-table-label-checkbox-container",children:[0===p&&b&&e("span",{className:"ff-table-checkbox-table",children:e(c,{onChange:e=>w(e,{allSelected:e.target.checked}),checked:x||!1,partial:!!u,disabled:m})}),a.header]})]},a.header)})})})});export{h as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import classNames from 'classnames';
+import { getColumnLeftPosition } from '../utils/virtualization';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+import Typography from '../../Typography';
+import Checkbox from '../../Checkbox';
+const TableHeader = memo((props) => {
+    const { columns, freezeColumns, headerType, tableHeadClass, headerTextColor, headerCheckboxDisabled, withCheckbox, allSelected, partialSelected, headerIconName = '', headerIconOnClick, headerIconTooltipTitle, tableHeaderZindex, onSelectClick, withFixedHeader, } = props;
+    return (_jsx("thead", { className: classNames('ff-table-header', { 'ff-table-fixed-header': withFixedHeader }, tableHeadClass), style: { zIndex: tableHeaderZindex }, children: _jsx("tr", { children: columns.map((column, index) => {
+                const isFrozen = freezeColumns && index < freezeColumns;
+                return (_jsxs("th", { className: classNames('ff-table-header-cell', headerType !== 'default' ? `ff-table-${headerType}-bg` : '', headerTextColor && `ff-table-${headerTextColor}-color`), style: {
+                        position: isFrozen ? 'sticky' : 'static',
+                        left: isFrozen
+                            ? getColumnLeftPosition(index, columns, freezeColumns)
+                            : 'auto',
+                        zIndex: isFrozen ? 999 : 'auto',
+                        width: column.width ? `${column.width}px` : 'auto',
+                        padding: '8px 8px',
+                        boxSizing: 'border-box',
+                        paddingRight: isFrozen ? 0 : '8px',
+                    }, children: [_jsx("div", { className: "ff-table-icon", children: _jsx(Tooltip, { title: headerIconTooltipTitle || '', placement: "bottom", children: _jsx(Icon, { height: 14, width: 14, name: headerIconName, onClick: headerIconOnClick, cursorType: "pointer" }) }) }), _jsxs(Typography, { style: column.width ? { width: column.width } : undefined, as: "div", fontWeight: "semi-bold", className: "ff-table-label-checkbox-container", children: [index === 0 && withCheckbox && (_jsx("span", { className: "ff-table-checkbox-table", children: _jsx(Checkbox, { onChange: (e) => onSelectClick(e, {
+                                            allSelected: e.target.checked,
+                                        }), checked: allSelected || false, partial: !!partialSelected, disabled: headerCheckboxDisabled }) })), column.header] })] }, column.header));
+            }) }) }));
+});
+export default TableHeader;
+//# sourceMappingURL=TableHeader.js.map

package/lib/components/Table/components/VirtualizedRows.js

@@ -1 +1,24 @@
-import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{memo as d,isValidElement as i,cloneElement as n,Fragment as a}from"react";import l from"./SortableRow.js";const r=d(({paddingTop:d,paddingBottom:r,columnsLength:c,visibleRows:s,startIndex:h,columns:p,freezeColumns:m,frozenWidth:g,handleOnclick:w,isRowCheckBoxDisable:b,isRowDisabled:u,onSelectClick:C,tableBodyRowClass:x,tableDataTextColor:R,updateRowHeight:f,withCheckbox:k,draggable:D,editMode:S,editComponent:y,accordionContent:B,getAccordionStatus:z=()=>{},selectedNode:N,uniqueRowIdForAccordion:A})=>e(o,{children:[d>0&&t("tr",{children:t("td",{style:{height:d,padding:0},colSpan:c})}),s.map((e,o)=>{const d=h+o,r=e._id??e.id;if(S===r)return t("tr",{className:"edit-row",children:t("td",{colSpan:p.length,style:{padding:"0px"},children:i(y)&&n(y,{rowData:e,rowIndex:d+1})})},`edit-${r}`);const c=z(e?.id||e?._id||(A?e?.[A]:void 0));return t(a,{children:t(l,{row:e,index:d,serialNumber:d+1,columns:p,tableBodyRowClass:x,handleOnclick:w,tableDataTextColor:R,withCheckbox:k,onSelectClick:C,isRowCheckBoxDisable:b,isRowDisabled:u,freezeColumns:m,frozenWidth:g,updateRowHeight:f,draggable:D,editMode:S,isAccordionOpen:c,accordionContent:B,selectedNode:N},r)},e._id||d)}),r>0&&t("tr",{children:t("td",{style:{height:r,padding:0},colSpan:c})})]}));export{r as default};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, Fragment, isValidElement, memo, } from 'react';
+import SortableRow from './SortableRow';
+const VirtualizedRows = memo(({ paddingTop, paddingBottom, columnsLength, visibleRows, startIndex, columns, freezeColumns, frozenWidth, handleOnclick, isRowCheckBoxDisable, isRowDisabled, onSelectClick, tableBodyRowClass, tableDataTextColor, updateRowHeight, withCheckbox, draggable, editMode, editComponent, accordionContent, getAccordionStatus = () => { }, selectedNode, uniqueRowIdForAccordion, }) => {
+    return (_jsxs(_Fragment, { children: [paddingTop > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: paddingTop, padding: 0 }, colSpan: columnsLength }) })), visibleRows.map((row, i) => {
+                const absoluteIndex = startIndex + i;
+                const rowId = row._id ?? row.id;
+                if (editMode === rowId) {
+                    return (_jsx("tr", { className: "edit-row", children: _jsx("td", { colSpan: columns.length, style: { padding: '0px' }, children: isValidElement(editComponent) &&
+                                cloneElement(editComponent, {
+                                    rowData: row,
+                                    rowIndex: absoluteIndex + 1,
+                                }) }) }, `edit-${rowId}`));
+                }
+                const isOpen = getAccordionStatus(row?.id ||
+                    row?._id ||
+                    (uniqueRowIdForAccordion
+                        ? row?.[uniqueRowIdForAccordion]
+                        : undefined));
+                return (_jsx(Fragment, { children: _jsx(SortableRow, { row: row, index: absoluteIndex, serialNumber: absoluteIndex + 1, columns: columns, tableBodyRowClass: tableBodyRowClass, handleOnclick: handleOnclick, tableDataTextColor: tableDataTextColor, withCheckbox: withCheckbox, onSelectClick: onSelectClick, isRowCheckBoxDisable: isRowCheckBoxDisable, isRowDisabled: isRowDisabled, freezeColumns: freezeColumns, frozenWidth: frozenWidth, updateRowHeight: updateRowHeight, draggable: draggable, editMode: editMode, isAccordionOpen: isOpen, accordionContent: accordionContent, selectedNode: selectedNode }, rowId) }, row._id || absoluteIndex));
+            }), paddingBottom > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: paddingBottom, padding: 0 }, colSpan: columnsLength }) }))] }));
+});
+export default VirtualizedRows;
+//# sourceMappingURL=VirtualizedRows.js.map

package/lib/components/Table/utils/constants.js

@@ -1 +1,9 @@
-const o=50,t=5,c=400,e=8;export{t as BUFFER_SIZE,e as CELL_PADDING,c as DEFAULT_COLUMN_WIDTH,o as DEFAULT_ROW_HEIGHT};
+// ---- STATIC VALUES ----
+export const DEFAULT_ROW_HEIGHT = 50;
+export const BUFFER_SIZE = 5;
+export const DEFAULT_COLUMN_WIDTH = 400;
+export const CELL_PADDING = 8;
+// ---- DOM IDs ----
+export const FF_TABLE_FIRST_NODE_ID = 'ff-table-first-node';
+export const FF_TABLE_LAST_NODE_ID = 'ff-table-last-node';
+//# sourceMappingURL=constants.js.map

package/lib/components/Table/utils/virtualization.js

@@ -1 +1,41 @@
-import{DEFAULT_COLUMN_WIDTH as t,CELL_PADDING as r}from"./constants.js";const e=(e,n,o)=>{if(0===e)return"0px";let s=0;for(let i=0;i<e;i++){const e=n[i]?.width;s+=e?parseInt(e.toString(),10):t,o&&i<o-1&&(s+=r)}return`${s}px`},n=(e,n)=>e.slice(0,n).reduce((r,e)=>r+parseInt(e.width?.toString()||`${t}`,10),1)+r*(n-.17),o=(t,r)=>{let e=0,n=t.length-1,o=t.length;for(;e<=n;){const s=Math.floor((e+n)/2);t[s]>=r?(o=s,n=s-1):e=s+1}return o};export{o as binarySearch,n as calculateFrozenWidth,e as getColumnLeftPosition};
+import { CELL_PADDING, DEFAULT_COLUMN_WIDTH } from "./constants";
+export const getColumnLeftPosition = (index, columns, freezeColumns) => {
+    if (index === 0)
+        return '0px';
+    let leftPosition = 0;
+    for (let i = 0; i < index; i++) {
+        const width = columns[i]?.width;
+        leftPosition += width ? parseInt(width.toString(), 10) : DEFAULT_COLUMN_WIDTH;
+        if (freezeColumns && i < freezeColumns - 1) {
+            leftPosition += CELL_PADDING;
+        }
+    }
+    return `${leftPosition}px`;
+};
+export const calculateFrozenWidth = (columnData, freezeColumns) => {
+    return (columnData
+        .slice(0, freezeColumns)
+        .reduce((acc, col) => acc +
+        parseInt(col.width?.toString() || `${DEFAULT_COLUMN_WIDTH}`, 10), 1) +
+        CELL_PADDING * (freezeColumns - 0.17));
+};
+// Utility: Simple binary search to find the index where cumulativeHeights[i] > target
+// Returns the index of the first element greater than or equal to the target.
+export const binarySearch = (arr, target) => {
+    let low = 0;
+    let high = arr.length - 1;
+    let result = arr.length; // Default to size if target is greater than all elements
+    while (low <= high) {
+        const mid = Math.floor((low + high) / 2);
+        // FIX: Use the non-null assertion operator '!'
+        if (arr[mid] >= target) {
+            result = mid;
+            high = mid - 1;
+        }
+        else {
+            low = mid + 1;
+        }
+    }
+    return result;
+};
+//# sourceMappingURL=virtualization.js.map

package/lib/components/TableTree/Components/TableBody.js

@@ -1 +1,12 @@
-import{jsxs as e,jsx as d}from"react/jsx-runtime";import{addNewRow as t}from"../Utils/addNewRow.js";import o from"./TableRow.js";const n=({flattenedTreeData:n,columnsData:i,selected:l,select:a,onRowClick:s,onToggleExpand:r,onCheckBoxChange:c,newNode:f,onAddConfirm:h,onAddCancel:m,handleEditFieldError:p,expanding:u,rootNode:b,selectedNode:C,hideOnDisable:g,scriptLengthTruncate:x,addModuleInputWidth:E,addModuleSelectWidth:k,disableEditLabelConfirmIcon:y})=>e("tbody",{className:"ff-table-tree-body",children:[d("div",{style:{position:"sticky",left:0},id:"ff-table-tree-first-node"}),t(n,f??{},b)?.map((e,t)=>e?.hide?null:d(o,{node:e,columnsData:i,selected:l,select:a,onRowClick:s,onToggleExpand:r,onCheckBoxChange:c,onAddConfirm:h,onAddCancel:m,handleEditFieldError:p,isExpanding:e.key===u,index:t,selectedNode:C,hideOnDisable:g,scriptLengthTruncate:x,addModuleInputWidth:E,addModuleSelectWidth:k,disableEditLabelConfirmIcon:y},e.key)),d("div",{style:{position:"sticky",left:0},id:"ff-table-tree-last-node"})]});export{n as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { addNewRow } from '../Utils/addNewRow';
+import TableRow from './TableRow';
+const TableBody = ({ flattenedTreeData, columnsData, selected, select, onRowClick, onToggleExpand, onCheckBoxChange, newNode, onAddConfirm, onAddCancel, handleEditFieldError, expanding, rootNode, selectedNode, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, }) => {
+    // commenting this code to add editLabel component to rootnode when data is empty
+    // if (checkEmpty(flattenedTreeData)) {
+    //   return null;
+    // }
+    return (_jsxs("tbody", { className: "ff-table-tree-body", children: [_jsx("div", { style: { position: 'sticky', left: 0 }, id: "ff-table-tree-first-node" }), addNewRow(flattenedTreeData, newNode ?? {}, rootNode)?.map((node, index) => !node?.hide ? (_jsx(TableRow, { node: node, columnsData: columnsData, selected: selected, select: select, onRowClick: onRowClick, onToggleExpand: onToggleExpand, onCheckBoxChange: onCheckBoxChange, onAddConfirm: onAddConfirm, onAddCancel: onAddCancel, handleEditFieldError: handleEditFieldError, isExpanding: node.key === expanding, index: index, selectedNode: selectedNode, hideOnDisable: hideOnDisable, scriptLengthTruncate: scriptLengthTruncate, addModuleInputWidth: addModuleInputWidth, addModuleSelectWidth: addModuleSelectWidth, disableEditLabelConfirmIcon: disableEditLabelConfirmIcon }, node.key)) : null), _jsx("div", { style: { position: 'sticky', left: 0 }, id: "ff-table-tree-last-node" })] }));
+};
+export default TableBody;
+//# sourceMappingURL=TableBody.js.map

package/lib/components/TableTree/Components/TableCell.js

@@ -1 +1,81 @@
-import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"react";import{prepareData as o}from"../../../utils/TableCell/TableCell.js";import i from"../../Checkbox/Checkbox.js";import n from"../../RadioButton/RadioButton.js";import{checkEmpty as s}from"../../../utils/checkEmpty/checkEmpty.js";import r from"../../EditLabel/EditLabel.js";import c from"../../../assets/icons/arrows_down_icon.svg.js";import d from"../../../assets/icons/spinner.svg.js";import p from"../../Tooltip/Tooltip.js";import{formatCellData as m}from"../Utils/formatDataCell.js";const h=(e,l=[],a,o)=>{let i=l,n=a;return s(l)&&(isNaN(e)||(i=Array(e).fill(!0))),t("div",{className:"tree-table-space-container",children:i?.map((l,a)=>t("span",{className:`tree-table-space-block tree-table-space-block-${a} ${l?"":"no-lines"} ${n&&a===e-1?"last-node":""} ${o?"folder":""}`},a))})},b=a.memo(({treeRowRef:a,col:s,node:b,selected:u,select:f,onCheckBoxChange:T,onToggleExpand:k,onAddConfirm:C,onAddCancel:N,handleEditFieldError:E,isExpanding:x,columnTextColor:y,hideOnDisable:g,scriptLengthTruncate:v,addModuleInputWidth:w,addModuleSelectWidth:j,disableEditLabelConfirmIcon:D})=>e("td",{className:"ff-table-tree-td "+(s.isTree&&b.container?"folder":""),style:{color:`${y||"var(--ff-primary-text-color)"}`},children:[s.isTree&&h(b.hierarchy,b.parentSiblings,b.lastChild,b.container),e("div",{className:"tree-title-container",children:[s.isTree&&t("span",{className:`tree-table-space-block  last-block last-block tree-table-space-block-${b.hierarchy} ${b?.expanded?"tree-row-expanded":"tree-row-collapsed"} ${b.container&&b.expandable?"":"no-folder"}`,children:b.container&&b.expandable&&e("span",{onClick:()=>k(b),children:[" ",t(x?d:c,{})]})}),e("span",{className:"tree-table-td-content "+(s.isTree&&b.container?"folder":""),children:[!b?.isNewNode&&e(l,{children:[s.isTree&&"checkbox"===f&&!(g&&b.unselectable)&&t("span",{className:"tree-table-td-content-select",children:"none"===b.selectedStatus?t(p,{title:b.machine?"This script is assigned to another environment. Selecting it will reassign it to the current environment.":void 0,children:t(i,{checked:"completely"===b.selectedStatus,partial:"partially"===b.selectedStatus,onChange:e=>T(e,b),disabled:b.unselectable||"REVIEW"===b.state||!0===b?.isDisable,isDefaultHover:"none"===b.selectedStatus&&!!b.machine})}):t(i,{checked:"completely"===b.selectedStatus,partial:"partially"===b.selectedStatus,onChange:e=>T(e,b),disabled:b.unselectable||"REVIEW"===b.state||!0===b?.isDisable})}),s.isTree&&"radio"===f&&!(g&&b.unselectable)&&t("span",{className:"tree-table-td-content-select",children:t(n,{name:b.key,checked:u.includes(b.key),value:b.key,onChange:e=>T(e,b),disabled:b.unselectable||"REVIEW"===b.state||!0===b?.isDisable})})]}),b.isNewNode&&s.isTree?t(r,{onCancel:N,onConfirm:C,value:b.value,label:b?.label,optionsList:b.options,selectedOption:b.selectedOption,withDropdown:"inputWithDropdown"===b.type,handleCustomError:E,inputFieldWidth:w,selectFieldWidth:j,confirmIconTooltip:b.confirmIconTooltip,cancelIconTooltip:b.cancelIconTooltip,isOnBlurTrue:!0,isDisable:{confirm:D}}):t("span",{className:"tree-table-td-content-text",children:m(o(b,s),v)})]})]}),s.actions&&!b?.isNewNode&&t("div",{className:"table-tree-row-action",children:s.actions(b,a)})]}));export{b as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { prepareData } from '../../../utils/TableCell/TableCell';
+import Checkbox from '../../Checkbox';
+import RadioButton from '../../RadioButton';
+import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
+import AddModule from '../../EditLabel';
+import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
+import Spinner from '../../../assets/icons/spinner.svg?react';
+import Tooltip from '../../Tooltip';
+import { formatCellData } from '../Utils/formatDataCell';
+const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
+    let siblingsArray = parentSiblings;
+    let isLastNode = isLast;
+    if (checkEmpty(parentSiblings)) {
+        if (!isNaN(level)) {
+            siblingsArray = Array(level).fill(true);
+        }
+    }
+    return (_jsx("div", { className: "tree-table-space-container", children: siblingsArray?.map((line, i) => (_jsx("span", { className: `tree-table-space-block tree-table-space-block-${i} ${!line ? 'no-lines' : ''} ${isLastNode && i === level - 1 ? 'last-node' : ''} ${isContainer ? 'folder' : ''}` }, i))) }));
+};
+const TableCell = React.memo(({ treeRowRef, col, node, selected, select, onCheckBoxChange, onToggleExpand, onAddConfirm, onAddCancel, handleEditFieldError, isExpanding, columnTextColor, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, }) => {
+    //Todo uncomment the following code when we are highlighting the tree table nodes on hover
+    // useEffect(() => {
+    //   const handleHover = (event: MouseEvent, isHovering: boolean) => {
+    //     const target = event.target as HTMLElement;
+    //     const levelClass = Array.from(target.classList).find((cls) =>
+    //       cls.startsWith('tree-table-space-block-')
+    //     );
+    //     if (levelClass) {
+    //       const level = levelClass.split('-').pop();
+    //       // Check if level is valid before selecting elements
+    //       if (level) {
+    //         const sameLevelBlocks = document.querySelectorAll(
+    //           `.tree-table-space-block-${level}`
+    //         ) as NodeListOf<HTMLElement>;
+    //         sameLevelBlocks.forEach((block) => {
+    //           if (isHovering) {
+    //             block.classList.add('tree-table-hovered');
+    //           } else {
+    //             block.classList.remove('tree-table-hovered');
+    //           }
+    //         });
+    //       }
+    //     }
+    //   };
+    //   const spaceBlocks = document.querySelectorAll(
+    //     '.tree-table-space-block'
+    //   ) as NodeListOf<HTMLElement>;
+    //   spaceBlocks.forEach((block) => {
+    //     block.addEventListener('mouseenter', (e) => handleHover(e, true));
+    //     block.addEventListener('mouseleave', (e) => handleHover(e, false));
+    //   });
+    //   return () => {
+    //     spaceBlocks.forEach((block) => {
+    //       block.removeEventListener('mouseenter', (e) => handleHover(e, true));
+    //       block.removeEventListener('mouseleave', (e) => handleHover(e, false));
+    //     });
+    //   };
+    // }, []);
+    return (_jsxs("td", { className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`, style: {
+            color: `${columnTextColor || 'var(--ff-primary-text-color)'}`,
+        }, children: [col.isTree &&
+                renderSpaces(node.hierarchy, node.parentSiblings, node.lastChild, node.container), _jsxs("div", { className: "tree-title-container", children: [col.isTree && (_jsx("span", { className: `tree-table-space-block  last-block last-block tree-table-space-block-${node.hierarchy} ${node?.expanded ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container && node.expandable ? '' : 'no-folder'}`, children: node.container && node.expandable && (_jsxs("span", { onClick: () => onToggleExpand(node), children: [' ', isExpanding ? _jsx(Spinner, {}) : _jsx(Arrow, {})] })) })), _jsxs("span", { className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`, children: [!node?.isNewNode && (_jsxs(_Fragment, { children: [col.isTree &&
+                                        select === 'checkbox' &&
+                                        !(hideOnDisable && node.unselectable) && (_jsx("span", { className: "tree-table-td-content-select", children: node.selectedStatus === 'none' ? (_jsx(Tooltip, { title: !!node.machine
+                                                ? 'This script is assigned to another environment. Selecting it will reassign it to the current environment.'
+                                                : undefined, children: _jsx(Checkbox, { checked: node.selectedStatus === 'completely', partial: node.selectedStatus === 'partially', onChange: (e) => onCheckBoxChange(e, node), disabled: node.unselectable ||
+                                                    node.state === 'REVIEW' ||
+                                                    node?.isDisable === true, isDefaultHover: node.selectedStatus === 'none' && !!node.machine }) })) : (_jsx(Checkbox, { checked: node.selectedStatus === 'completely', partial: node.selectedStatus === 'partially', onChange: (e) => onCheckBoxChange(e, node), disabled: node.unselectable ||
+                                                node.state === 'REVIEW' ||
+                                                node?.isDisable === true })) })), col.isTree &&
+                                        select === 'radio' &&
+                                        !(hideOnDisable && node.unselectable) && (_jsx("span", { className: "tree-table-td-content-select", children: _jsx(RadioButton, { name: node.key, checked: selected.includes(node.key), value: node.key, onChange: (e) => onCheckBoxChange(e, node), disabled: node.unselectable ||
+                                                node.state === 'REVIEW' ||
+                                                node?.isDisable === true }) }))] })), node.isNewNode && col.isTree ? (_jsx(AddModule, { onCancel: onAddCancel, onConfirm: onAddConfirm, value: node.value, label: node?.label, optionsList: node.options, selectedOption: node.selectedOption, withDropdown: node.type === 'inputWithDropdown', handleCustomError: handleEditFieldError, inputFieldWidth: addModuleInputWidth, selectFieldWidth: addModuleSelectWidth, confirmIconTooltip: node.confirmIconTooltip, cancelIconTooltip: node.cancelIconTooltip, isOnBlurTrue: true, isDisable: { confirm: disableEditLabelConfirmIcon } })) : (_jsx("span", { className: "tree-table-td-content-text", children: formatCellData(prepareData(node, col), scriptLengthTruncate) }))] })] }), col.actions && !node?.isNewNode && (_jsx("div", { className: `table-tree-row-action`, children: (() => {
+                    return col.actions(node, treeRowRef);
+                })() }))] }));
+});
+export default TableCell;
+//# sourceMappingURL=TableCell.js.map

package/lib/components/TableTree/Components/TableHead.js

@@ -1 +1,40 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import a,{useRef as l,useState as o,useEffect as n}from"react";import r from"../../Checkbox/Checkbox.js";import s from"../../RadioButton/RadioButton.js";import{prepareData as d}from"../../../utils/TableCell/TableCell.js";import{formatCellData as c}from"../Utils/formatDataCell.js";const i=a.memo(({columnsData:a,rootNode:i,selected:m,onCheckBoxChange:h,selectedNode:b,tableHeaderBgColor:p,hideOnDisable:f,transparentHeader:u,scriptLengthTruncate:k=25})=>{const C=l(null),[N,y]=o(!1);return n(()=>{y(!0)},[]),e("thead",{className:"ff-table-tree-head",children:[t("tr",{className:"ff-table-tree-row no-hover",children:a.map(({name:e,width:a})=>t("th",{className:"ff-table-tree-th",style:{width:a,backgroundColor:u?"transparent":p},children:e},e))}),i&&t("tr",{className:"ff-table-tree-row show "+(b&&b===i?.node?.key?"hover":""),ref:C,children:a.map((a,l)=>t("td",{className:"ff-table-tree-td",children:e("span",{className:"tree-table-default-content",children:[0===l&&"checkbox"===i.select&&!(f&&i.node.isDisabled)&&t(r,{checked:"partially"!==i?.node?.selectedStatus&&("completely"===i?.node?.selectedStatus||!1),partial:"partially"===i.node.selectedStatus,onChange:e=>h(e,i.node),disabled:i.node.isDisabled}),0===l&&"radio"===i.select&&!(f&&i.node.isDisabled)&&t(s,{name:i.node.key,checked:m.includes(i.node.key),value:i.node.key,onChange:e=>h(e,i.node),disabled:i.node.isDisabled}),e("span",{className:"tree-table-td-content-text",children:["name"===a.accessor?t("span",{children:i.node[a.accessor]}):t("span",{children:c(d(i.node,a),k)}),i.cell&&0===l&&t("span",{className:"table-tree-root-cell",children:i.cell(i.node)})]}),i.actions&&0===l&&N&&C.current&&t("div",{className:"table-tree-row-action",children:i.actions(i.node,C)})]})},l))})]})});export{i as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import Checkbox from '../../Checkbox';
+import RadioButton from '../../RadioButton';
+import { prepareData } from '../../../utils/TableCell/TableCell';
+import { formatCellData } from '../Utils/formatDataCell';
+const TableHead = React.memo(({ columnsData, rootNode, selected, onCheckBoxChange, selectedNode, tableHeaderBgColor, hideOnDisable, transparentHeader, scriptLengthTruncate = 25, }) => {
+    // const hasDefaultValues = useMemo(
+    //   () => columnsData.some(({ defaultValue }) => !!defaultValue),
+    //   [columnsData]
+    // );
+    const rootNodeRowRef = useRef(null);
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    return (_jsxs("thead", { className: "ff-table-tree-head", children: [_jsx("tr", { className: "ff-table-tree-row no-hover", children: columnsData.map(({ name, width }) => (_jsx("th", { className: "ff-table-tree-th", style: {
+                        width: width,
+                        backgroundColor: transparentHeader
+                            ? 'transparent'
+                            : tableHeaderBgColor,
+                    }, children: name }, name))) }), rootNode && (_jsx("tr", { className: `ff-table-tree-row show ${selectedNode && selectedNode === rootNode?.node?.key
+                    ? 'hover'
+                    : ''}`, ref: rootNodeRowRef, children: columnsData.map((col, index) => (_jsx("td", { className: "ff-table-tree-td", children: _jsxs("span", { className: "tree-table-default-content", children: [index === 0 &&
+                                rootNode.select === 'checkbox' &&
+                                !(hideOnDisable && rootNode.node.isDisabled) && (_jsx(Checkbox, { checked: rootNode?.node?.selectedStatus !== 'partially' &&
+                                    (rootNode?.node?.selectedStatus === 'completely' ||
+                                        false), partial: rootNode.node.selectedStatus === 'partially', onChange: (e) => onCheckBoxChange(e, rootNode.node), disabled: rootNode.node.isDisabled })), index === 0 &&
+                                rootNode.select === 'radio' &&
+                                !(hideOnDisable && rootNode.node.isDisabled) && (_jsx(RadioButton, { name: rootNode.node.key, checked: selected.includes(rootNode.node.key), value: rootNode.node.key, onChange: (e) => onCheckBoxChange(e, rootNode.node), disabled: rootNode.node.isDisabled })), _jsxs("span", { className: "tree-table-td-content-text", children: [col.accessor === 'name' ? (_jsx("span", { children: rootNode.node[col.accessor] })) : (_jsx("span", { children: formatCellData(prepareData(rootNode.node, col), scriptLengthTruncate) })), rootNode.cell && index === 0 && (_jsx("span", { className: "table-tree-root-cell", children: (() => {
+                                            return rootNode.cell(rootNode.node);
+                                        })() }))] }), rootNode.actions &&
+                                index === 0 &&
+                                isMounted &&
+                                rootNodeRowRef.current && (_jsx("div", { className: "table-tree-row-action", children: (() => {
+                                    return rootNode.actions(rootNode.node, rootNodeRowRef);
+                                })() }))] }) }, index))) }))] }));
+});
+export default TableHead;
+//# sourceMappingURL=TableHead.js.map

package/lib/components/TableTree/Components/TableRow.js

@@ -1 +1,9 @@
-import{jsx as e}from"react/jsx-runtime";import d,{useRef as n}from"react";import o from"./TableCell.js";const t=d.memo(({node:d,columnsData:t,selected:l,select:a,onRowClick:i,onToggleExpand:r,onCheckBoxChange:c,onAddConfirm:s,onAddCancel:h,handleEditFieldError:m,isExpanding:f,index:p,selectedNode:u,hideOnDisable:C,scriptLengthTruncate:g,addModuleInputWidth:E,addModuleSelectWidth:b,disableEditLabelConfirmIcon:x})=>{const k=n(null);return e("tr",{"data-level":d.hierarchy,ref:k,className:"ff-table-tree-row show "+(u&&u===d.key?"hover-selected":""),onClick:e=>i(e,d),id:0===p?"table-first-row":d.key,children:t.map(n=>e(o,{treeRowRef:k,col:n,node:d,selected:l,select:a,onCheckBoxChange:c,onToggleExpand:r,onAddConfirm:s,onAddCancel:h,handleEditFieldError:m,isExpanding:f,hideOnDisable:C,scriptLengthTruncate:g,addModuleInputWidth:E,addModuleSelectWidth:b,disableEditLabelConfirmIcon:x},n.name))})});export{t as default};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import TableCell from './TableCell';
+const TableRow = React.memo(({ node, columnsData, selected, select, onRowClick, onToggleExpand, onCheckBoxChange, onAddConfirm, onAddCancel, handleEditFieldError, isExpanding, index, selectedNode, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, }) => {
+    const treeRowRef = useRef(null);
+    return (_jsx("tr", { "data-level": node.hierarchy, ref: treeRowRef, className: `ff-table-tree-row show ${selectedNode && selectedNode === node.key ? 'hover-selected' : ''}`, onClick: (e) => onRowClick(e, node), id: index === 0 ? 'table-first-row' : node.key, children: columnsData.map((col) => (_jsx(TableCell, { treeRowRef: treeRowRef, col: col, node: node, selected: selected, select: select, onCheckBoxChange: onCheckBoxChange, onToggleExpand: onToggleExpand, onAddConfirm: onAddConfirm, onAddCancel: onAddCancel, handleEditFieldError: handleEditFieldError, isExpanding: isExpanding, hideOnDisable: hideOnDisable, scriptLengthTruncate: scriptLengthTruncate, addModuleInputWidth: addModuleInputWidth, addModuleSelectWidth: addModuleSelectWidth, disableEditLabelConfirmIcon: disableEditLabelConfirmIcon }, col.name))) }));
+});
+export default TableRow;
+//# sourceMappingURL=TableRow.js.map