pixel-react 1.20.20 → 1.20.22

package/lib/components/TableTree/TableTree.js

@@ -1 +1,177 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useState as n,useRef as o,useCallback as l,useEffect as a,useLayoutEffect as c}from"react";import"./TableTree.scss.js";import d from"./Components/TableHead.js";import s from"./Components/TableBody.js";import{addLastChild as i}from"./Utils/addLastChild.js";const u=r(({treeData:r,columnsData:u,selected:b=[],select:h=null,onChange:f,onClick:m,onExpand:g,loadMore:p=()=>{},tableBorder:C,height:v="calc(100vh - 134px)",newNode:E,onAddConfirm:w=e=>{},onAddCancel:T=()=>{},handleEditFieldError:x,loading:N=!1,rootNode:B,getContentLength:I,pagination:y=!0,selectedNode:L,tableHeaderBgColor:D="var(--border-color)",hideOnDisable:A=!1,freezeColumns:M,scriptLengthTruncate:j=25,addModuleInputWidth:k=150,addModuleSelectWidth:H,onScroll:O,disableEditLabelConfirmIcon:R=!1,transparentHeader:S=!1},W)=>{const[z,F]=n(null),[q,U]=n(null),$=o(null),G=o(null),[J,K]=n(null),P=o([]),Q=o(!1),V=l(()=>{const e=G.current;if(!N&&e){const t=e.scrollTop,n=P.current;if(n.length>0&&"above"===q){const o=Array.from(e.querySelectorAll(".ff-table-tree-row"));let l=0;if(I)l=I;else for(let e=0;e<r.length&&n[0]!==r[e];e++)l++;const a=r.slice(0,l-(t>5?2:0)).reduce((e,t,r)=>e+(o[r]?.getBoundingClientRect().height||0),0);l&&(e.scrollTop=J+a)}P.current=r}},[N,q,r]);a(()=>{const e=document.getElementById("ff-table-tree-scroll-container"),t=document.getElementById("ff-table-tree-last-node"),n=document.getElementById("ff-table-tree-first-node");if(!(e&&t&&n&&r?.length&&y))return;const o=!!r[r.length-1]?.lastResource,l=!!r[0]?.lastResource;$.current?.disconnect();return $.current=new IntersectionObserver(e=>{e.forEach(e=>{const t="ff-table-tree-last-node"===e.target.id?"below":"above";e.isIntersecting&&("below"!==t||q||o?"above"!==t||q||l||N||"above"===q||(Q.current?(U("above"),K(G.current?.scrollTop??null),p("above")):Q.current=!0):N||"below"===q||(U("below"),p("below")))})},{root:e,rootMargin:"30px",threshold:1}),o||$.current.observe(t),l||$.current.observe(n),0===P.current.length&&(P.current=r),()=>{$.current?.disconnect()}},[r,p,q]),c(()=>{!N&&q&&("above"===q&&y?V():P.current=r,U(null))},[N]),a(()=>{!N&&z&&(F(null),P.current=r)},[N]);const X=l(e=>{z||(F(e.key),g?.(e))},[g,z]);a(()=>{const e=G.current;return e&&O&&e.addEventListener("scroll",O),()=>{e&&O&&e.removeEventListener("scroll",O)}});const Y=l((e,t)=>{z||f?.(e,t)},[f,z]),Z=l((e,t)=>{z||m?.(e,t)},[m,z]);let _;return M&&(_=((e,t)=>e.slice(0,t).reduce((e,t)=>e+parseInt(t.width||"400",10),0))(u,M)),e("div",{className:"tree-table-wrap",ref:W,children:e("div",{className:"table-scrollable "+(r.length?"":"table-empty"),ref:G,id:"ff-table-tree-scroll-container",style:{"--table-height":r.length?v:"auto","--frozen-column-width":M?`${_}px`:"0px",border:C},children:t("table",{className:"tree-table",children:[e(d,{columnsData:u,rootNode:B,onCheckBoxChange:Y,selected:b,selectedNode:L,tableHeaderBgColor:D,hideOnDisable:A,transparentHeader:S,scriptLengthTruncate:j}),e(s,{flattenedTreeData:i(r),rootNode:B?.node,columnsData:u,selected:b,select:h,onRowClick:Z,onToggleExpand:X,onCheckBoxChange:Y,newNode:E,onAddConfirm:w,onAddCancel:T,handleEditFieldError:x,expanding:z,selectedNode:L,hideOnDisable:A,scriptLengthTruncate:j,addModuleInputWidth:k,addModuleSelectWidth:H,disableEditLabelConfirmIcon:R})]})})})});export{u as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, forwardRef, } from 'react';
+import './TableTree.scss';
+import TableHead from './Components/TableHead';
+import TableBody from './Components/TableBody';
+import { addLastChild } from './Utils/addLastChild';
+const TreeTable = forwardRef(({ treeData, columnsData, selected = [], select = null, onChange, onClick, onExpand, loadMore = () => { }, tableBorder, height = 'calc(100vh - 134px)', newNode, onAddConfirm = (_name) => { }, onAddCancel = () => { }, handleEditFieldError, loading = false, rootNode, getContentLength, pagination = true, selectedNode, tableHeaderBgColor = 'var(--border-color)', hideOnDisable = false, freezeColumns, scriptLengthTruncate = 25, addModuleInputWidth = 150, addModuleSelectWidth, onScroll, disableEditLabelConfirmIcon = false, transparentHeader = false, }, ref) => {
+    const [expanding, setExpanding] = useState(null);
+    const [isLoading, setIsLoading] = useState(null);
+    const observerRef = useRef(null);
+    const containerRef = useRef(null); // Reference for scroll container
+    const [prevScrollTop, setPrevScrollTop] = useState(null);
+    const previousTreeDataRef = useRef([]);
+    const loadMoreAboveRef = useRef(false);
+    // Handle load more data for pagination
+    const loadMoreAbove = () => {
+        if (loading || isLoading === 'above')
+            return;
+        if (!loadMoreAboveRef.current) {
+            loadMoreAboveRef.current = true;
+            return;
+        }
+        setIsLoading('above');
+        setPrevScrollTop(containerRef.current?.scrollTop ?? null);
+        // Trigger the loadMore callback for data loading from above
+        loadMore('above');
+    };
+    const loadMoreBelow = () => {
+        if (loading || isLoading === 'below')
+            return;
+        setIsLoading('below');
+        // Trigger the loadMore callback for data loading from below
+        loadMore('below');
+    };
+    const handleScroll = useCallback(() => {
+        const container = containerRef.current;
+        if (!loading && container) {
+            const currentScrollTop = container.scrollTop;
+            const previousTreeData = previousTreeDataRef.current;
+            if (previousTreeData.length > 0 && isLoading === 'above') {
+                const allRows = Array.from(container.querySelectorAll('.ff-table-tree-row'));
+                let addedRowsCount = 0;
+                if (getContentLength) {
+                    addedRowsCount = getContentLength;
+                }
+                else {
+                    for (let i = 0; i < treeData.length; i++) {
+                        if (previousTreeData[0] === treeData[i])
+                            break;
+                        addedRowsCount++;
+                    }
+                }
+                // Calculate the total height of the newly added rows
+                const totalAddedHeight = treeData
+                    .slice(0, addedRowsCount - (currentScrollTop > 5 ? 2 : 0))
+                    .reduce((heightSum, _, index) => {
+                    const rowHeight = allRows[index]?.getBoundingClientRect().height || 0;
+                    return heightSum + rowHeight;
+                }, 0);
+                // Adjust scroll position when data is loaded above
+                if (addedRowsCount) {
+                    container.scrollTop = prevScrollTop + totalAddedHeight;
+                }
+            }
+            previousTreeDataRef.current = treeData;
+        }
+    }, [loading, isLoading, treeData]);
+    useEffect(() => {
+        const scrollContainer = document.getElementById('ff-table-tree-scroll-container');
+        const lastNode = document.getElementById('ff-table-tree-last-node');
+        const firstNode = document.getElementById('ff-table-tree-first-node');
+        if (!scrollContainer ||
+            !lastNode ||
+            !firstNode ||
+            !treeData?.length ||
+            !pagination)
+            return;
+        const isLastResourceBelow = !!treeData[treeData.length - 1]?.lastResource;
+        const isLastResourceAbove = !!treeData[0]?.lastResource;
+        // Clean up old observer before creating a new one
+        observerRef.current?.disconnect();
+        const observerCallback = (entries) => {
+            entries.forEach((entry) => {
+                const nodeId = entry.target.id;
+                const direction = nodeId === 'ff-table-tree-last-node' ? 'below' : 'above';
+                if (entry.isIntersecting) {
+                    if (direction === 'below' && !isLoading && !isLastResourceBelow) {
+                        loadMoreBelow();
+                    }
+                    else if (direction === 'above' &&
+                        !isLoading &&
+                        !isLastResourceAbove) {
+                        loadMoreAbove();
+                    }
+                }
+            });
+        };
+        observerRef.current = new IntersectionObserver(observerCallback, {
+            root: scrollContainer,
+            rootMargin: '30px',
+            threshold: 1,
+        });
+        if (!isLastResourceBelow)
+            observerRef.current.observe(lastNode);
+        if (!isLastResourceAbove)
+            observerRef.current.observe(firstNode);
+        if (previousTreeDataRef.current.length === 0) {
+            previousTreeDataRef.current = treeData;
+        }
+        return () => {
+            observerRef.current?.disconnect();
+        };
+    }, [treeData, loadMore, isLoading]);
+    useLayoutEffect(() => {
+        if (!loading && isLoading) {
+            if (isLoading === 'above' && pagination) {
+                handleScroll();
+            }
+            else {
+                previousTreeDataRef.current = treeData;
+            }
+            setIsLoading(null);
+        }
+    }, [loading]);
+    useEffect(() => {
+        if (!loading && expanding) {
+            setExpanding(null);
+            previousTreeDataRef.current = treeData;
+        }
+    }, [loading]);
+    const handleToggleExpand = useCallback((node) => {
+        if (expanding)
+            return;
+        setExpanding(node.key);
+        onExpand?.(node);
+    }, [onExpand, expanding]);
+    useEffect(() => {
+        const scrollDiv = containerRef.current;
+        if (scrollDiv && onScroll) {
+            scrollDiv.addEventListener('scroll', onScroll);
+        }
+        return () => {
+            if (scrollDiv && onScroll) {
+                scrollDiv.removeEventListener('scroll', onScroll);
+            }
+        };
+    });
+    const handleCheckBoxChange = useCallback((e, node) => {
+        if (expanding)
+            return;
+        onChange?.(e, node);
+    }, [onChange, expanding]);
+    const handleRowClick = useCallback((e, node) => {
+        if (expanding)
+            return;
+        onClick?.(e, node);
+    }, [onClick, expanding]);
+    const DEFAULT_COLUMN_WIDTH = 400;
+    const calculateFrozenWidth = (columnData, freezeColumns) => {
+        return columnData
+            .slice(0, freezeColumns)
+            .reduce((acc, col) => acc + parseInt(col.width || `${DEFAULT_COLUMN_WIDTH}`, 10), 0);
+    };
+    let frozenWidth;
+    if (freezeColumns) {
+        frozenWidth = calculateFrozenWidth(columnsData, freezeColumns);
+    }
+    return (_jsx("div", { className: "tree-table-wrap", ref: ref, children: _jsx("div", { className: `table-scrollable ${treeData.length ? '' : 'table-empty'}`, ref: containerRef, id: "ff-table-tree-scroll-container", style: {
+                '--table-height': treeData.length ? height : 'auto',
+                '--frozen-column-width': freezeColumns
+                    ? `${frozenWidth}px`
+                    : '0px',
+                border: tableBorder,
+            }, children: _jsxs("table", { className: "tree-table", children: [_jsx(TableHead, { columnsData: columnsData, rootNode: rootNode, onCheckBoxChange: handleCheckBoxChange, selected: selected, selectedNode: selectedNode, tableHeaderBgColor: tableHeaderBgColor, hideOnDisable: hideOnDisable, transparentHeader: transparentHeader, scriptLengthTruncate: scriptLengthTruncate }), _jsx(TableBody, { flattenedTreeData: addLastChild(treeData), rootNode: rootNode?.node, columnsData: columnsData, selected: selected, select: select, onRowClick: handleRowClick, onToggleExpand: handleToggleExpand, onCheckBoxChange: handleCheckBoxChange, newNode: newNode, onAddConfirm: onAddConfirm, onAddCancel: onAddCancel, handleEditFieldError: handleEditFieldError, expanding: expanding, selectedNode: selectedNode, hideOnDisable: hideOnDisable, scriptLengthTruncate: scriptLengthTruncate, addModuleInputWidth: addModuleInputWidth, addModuleSelectWidth: addModuleSelectWidth, disableEditLabelConfirmIcon: disableEditLabelConfirmIcon })] }) }) }));
+});
+export default TreeTable;
+//# sourceMappingURL=TableTree.js.map

package/lib/components/TableTree/Utils/addLastChild.js

@@ -1 +1,24 @@
-const t=t=>{const n=new Map,a=t.map(t=>{const a={...t};if(t.parentId){const s=n.get(t.parentId)??[];s.push(a),n.set(t.parentId,s)}return a});return n.forEach(t=>{const n=t.at(-1);n&&(n.lastChild=!0);const a=t.at(-2);a&&(a.lastChild=!1)}),a};export{t as addLastChild};
+export const addLastChild = (treeData) => {
+    const childMap = new Map();
+    const updatedTreeData = treeData.map((node) => {
+        const newNode = { ...node };
+        if (node.parentId) {
+            const children = childMap.get(node.parentId) ?? [];
+            children.push(newNode);
+            childMap.set(node.parentId, children);
+        }
+        return newNode;
+    });
+    childMap.forEach((children) => {
+        const lastChildNode = children.at(-1);
+        if (lastChildNode) {
+            lastChildNode.lastChild = true;
+        }
+        const prevLastChild = children.at(-2);
+        if (prevLastChild) {
+            prevLastChild.lastChild = false;
+        }
+    });
+    return updatedTreeData;
+};
+//# sourceMappingURL=addLastChild.js.map

package/lib/components/TableTree/Utils/addNewRow.js

@@ -1 +1,62 @@
-import{addLastChild as e}from"./addLastChild.js";const o=(o,r,a)=>{const{sourceId:c,action:t,value:n="",error:i="",label:l,type:d,options:s,selectedOption:p,confirmIconTooltip:y,cancelIconTooltip:h,payloadSourceId:I}=r;if(!c||!t)return o;const u=s?.map(e=>({label:e,value:e})),k=p?{label:p,value:p}:void 0,b=new Map(o.map(e=>[e.key,e]));a&&b.set(a.key,a);const f=b.get(c);if(!f)return o;let m;I&&(m=b.get(I));const v=[...o],w=o.findIndex(e=>e.key===c),T={hierarchy:m?.hierarchy??f.hierarchy,sourceId:f.key,isNewNode:!0,key:"new-node",value:n,error:i,label:l,type:d,options:u,selectedOption:k,confirmIconTooltip:y,cancelIconTooltip:h};let g;switch(t){case"addAbove":v.splice(w,0,T);break;case"addBelow":g=m?.parentId,v.splice(w+1,0,{...T,parentId:g});break;case"addInside":g=m?.key,v.splice(w+1,0,{...T,hierarchy:T.hierarchy+1,parentId:g})}return e(v)};export{o as addNewRow};
+import { addLastChild } from './addLastChild';
+export const addNewRow = (treeData, newNode, rootNode) => {
+    const { sourceId, action, value = '', error = '', label, type, options, selectedOption, confirmIconTooltip, cancelIconTooltip, payloadSourceId, } = newNode;
+    if (!sourceId || !action)
+        return treeData;
+    const convertedOptions = options?.map((option) => ({
+        label: option,
+        value: option,
+    }));
+    const convertedSelectedOption = selectedOption
+        ? { label: selectedOption, value: selectedOption }
+        : undefined;
+    const nodeMap = new Map(treeData.map((node) => [node.key, node]));
+    if (rootNode) {
+        nodeMap.set(rootNode.key, rootNode);
+    }
+    const sourceNode = nodeMap.get(sourceId);
+    if (!sourceNode)
+        return treeData;
+    let payloadSourceNode;
+    if (payloadSourceId) {
+        payloadSourceNode = nodeMap.get(payloadSourceId);
+    }
+    const updatedTreeData = [...treeData];
+    const sourceIndex = treeData.findIndex((node) => node.key === sourceId);
+    const newNodeBase = {
+        hierarchy: payloadSourceNode?.hierarchy ?? sourceNode.hierarchy,
+        sourceId: sourceNode.key,
+        isNewNode: true,
+        key: 'new-node',
+        value,
+        error,
+        label,
+        type,
+        options: convertedOptions,
+        selectedOption: convertedSelectedOption,
+        confirmIconTooltip,
+        cancelIconTooltip,
+    };
+    let parentId;
+    switch (action) {
+        case 'addAbove':
+            updatedTreeData.splice(sourceIndex, 0, newNodeBase);
+            break;
+        case 'addBelow':
+            parentId = payloadSourceNode?.parentId;
+            updatedTreeData.splice(sourceIndex + 1, 0, { ...newNodeBase, parentId });
+            break;
+        case 'addInside':
+            parentId = payloadSourceNode?.key;
+            updatedTreeData.splice(sourceIndex + 1, 0, {
+                ...newNodeBase,
+                hierarchy: newNodeBase.hierarchy + 1,
+                parentId,
+            });
+            break;
+        default:
+            break;
+    }
+    return addLastChild(updatedTreeData);
+};
+//# sourceMappingURL=addNewRow.js.map

package/lib/components/TableTree/Utils/formatDataCell.js

@@ -1 +1,15 @@
-import t from"react";import{truncateText as r}from"../../../utils/truncateText/truncateText.js";const e=(o,i)=>"string"==typeof o?r(o,i):t.isValidElement(o)?t.cloneElement(o,{},e(o.props.children,i)):Array.isArray(o)?o.map(t=>e(t,i)):o;export{e as formatCellData};
+import React from 'react';
+import { truncateText } from '../../../utils/truncateText/truncateText';
+export const formatCellData = (content, maxLength) => {
+    if (typeof content === 'string') {
+        return truncateText(content, maxLength);
+    }
+    if (React.isValidElement(content)) {
+        return React.cloneElement(content, {}, formatCellData(content.props.children, maxLength));
+    }
+    if (Array.isArray(content)) {
+        return content.map((child) => formatCellData(child, maxLength));
+    }
+    return content;
+};
+//# sourceMappingURL=formatDataCell.js.map

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

@@ -1 +1,17 @@
-import{jsx as e}from"react/jsx-runtime";import t from"./TableRow.js";const d=({flattenedTreeData:d,columnsData:n,columnMeta:o,rowHeight:a=32,startIndex:i=0,totalHeight:l=0,selected:s,select:r,onRowClick:c,onToggleExpand:h,onCheckBoxChange:p,onAddConfirm:m,onAddCancel:g,handleEditFieldError:u,expanding:b,selectedNode:f,hideOnDisable:x,scriptLengthTruncate:E,addModuleInputWidth:C,addModuleSelectWidth:I,disableEditLabelConfirmIcon:k,isEditable:M,setIsEditable:T})=>e("div",{className:"ff-table-tree-fn-body",style:{height:`${l}px`,position:"relative"},children:d?.map((d,l)=>e(t,{node:d,columnsData:n,columnMeta:o,selected:s,select:r,onRowClick:c,onToggleExpand:h,onCheckBoxChange:p,onAddConfirm:m,onAddCancel:g,handleEditFieldError:u,isExpanding:d.key===b,index:i+l,selectedNode:f,hideOnDisable:x,scriptLengthTruncate:E,addModuleInputWidth:C,addModuleSelectWidth:I,disableEditLabelConfirmIcon:k,isEditable:M,setIsEditable:T,style:{transform:`translateY(${(i+l)*a}px)`,height:`${a}px`,position:"absolute",top:0,left:0,right:0}},d.key))});export{d as default};
+import { jsx as _jsx } from "react/jsx-runtime";
+import TableRow from './TableRow';
+const TableBody = ({ flattenedTreeData, columnsData, columnMeta, rowHeight = 32, startIndex = 0, totalHeight = 0, selected, select, onRowClick, onToggleExpand, onCheckBoxChange, onAddConfirm, onAddCancel, handleEditFieldError, expanding, selectedNode, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, isEditable, setIsEditable, }) => {
+    return (_jsx("div", { className: "ff-table-tree-fn-body", style: {
+            height: `${totalHeight}px`,
+            position: 'relative',
+        }, children: flattenedTreeData?.map((node, index) => (_jsx(TableRow, { node: node, columnsData: columnsData, columnMeta: columnMeta, selected: selected, select: select, onRowClick: onRowClick, onToggleExpand: onToggleExpand, onCheckBoxChange: onCheckBoxChange, onAddConfirm: onAddConfirm, onAddCancel: onAddCancel, handleEditFieldError: handleEditFieldError, isExpanding: node.key === expanding, index: startIndex + index, selectedNode: selectedNode, hideOnDisable: hideOnDisable, scriptLengthTruncate: scriptLengthTruncate, addModuleInputWidth: addModuleInputWidth, addModuleSelectWidth: addModuleSelectWidth, disableEditLabelConfirmIcon: disableEditLabelConfirmIcon, isEditable: isEditable, setIsEditable: setIsEditable, style: {
+                transform: `translateY(${(startIndex + index) * rowHeight}px)`,
+                height: `${rowHeight}px`,
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+            } }, node.key))) }));
+};
+export default TableBody;
+//# sourceMappingURL=TableBody.js.map

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

@@ -1 +1,91 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import l from"react";import{formatCellData as i}from"../Utils/formatDataCell.js";import{prepareData as a}from"../Utils/TableCell.js";import{checkEmpty as o}from"../../../utils/checkEmpty/checkEmpty.js";import s from"../../Tooltip/Tooltip.js";import r from"../../Checkbox/Checkbox.js";import c from"../../RadioButton/RadioButton.js";import d from"../../EditLabel/EditLabel.js";import p from"../../../assets/icons/arrows_down_icon.svg.js";import m from"../../../assets/icons/spinner.svg.js";const b=(e,n=[],l,i,a)=>{let s=n;const r=void 0!==i?!i:l;return o(n)&&(isNaN(e)||(s=Array(e).fill(!0))),t("div",{className:"tree-table-fn-space-container",children:s?.map((n,l)=>t("span",{className:`tree-table-fn-space-block tree-table-fn-space-block-${l} ${n?"":"no-lines"} ${r&&l===e-1?"last-node":""} ${a?"folder":""}`},l))})},f=l.memo(({treeRowRef:l,col:o,colIndex:f,columnMeta:h,node:u,selected:k,select:v,onCheckBoxChange:y,onToggleExpand:E,onAddConfirm:T,onAddCancel:x,handleEditFieldError:C,isExpanding:N,columnTextColor:I,hideOnDisable:w,scriptLengthTruncate:g,addModuleInputWidth:j,addModuleSelectWidth:S,disableEditLabelConfirmIcon:$,isEditable:D,setIsEditable:W})=>{const R={color:`${I||"var(--ff-primary-text-color)"}`,width:h?.width??o?.width,position:h?.sticky?"sticky":void 0,left:h?.sticky?h.left:void 0,zIndex:h?.sticky?h.zIndex:void 0};return e("div",{className:`ff-table-tree-fn-td ${o.isTree&&u.container?"folder":""} ${h?.sticky?"sticky-tree-column":""}`,"data-col-index":f,style:R,children:[o.isTree&&b(u.hierarchy,u.parentSiblings,u.lastChild,u.nextSibling,u.container),e("div",{className:"tree-fn-title-container",children:[o.isTree&&t("span",{className:`tree-table-fn-space-block  last-tree-fn-block last-tree-fn-block tree-table-fn-space-block-${u.hierarchy} ${u?.expanded?"tree-fn-row-expanded":"tree-fn-row-collapsed"} ${u.container&&u.expandable?"":"no-tree-folder"}`,children:u.container&&u.expandable&&e("span",{onClick:()=>E(u),children:[" ",t(N?m:p,{})]})}),e("span",{className:"tree-table-fn-td-content "+(o.isTree&&u.container?"folder":""),children:[!u?.isNewNode&&e(n,{children:[o.isTree&&"checkbox"===v&&!(w&&u.unselectable)&&t("span",{className:"tree-table-fn-td-content-select",children:"none"===u.selectedStatus?t(s,{title:u?.currentEnvId&&u?.envId&&u?.currentEnvId!==u?.envId?"This script is assigned to another environment. Selecting it will reassign it to the current environment.":void 0,children:t(r,{checked:"completely"===u.selectedStatus,partial:"partially"===u.selectedStatus,onChange:e=>y(e,u),disabled:u.unselectable||"REVIEW"===u.state||!0===u?.isDisable,isDefaultHover:"none"===u.selectedStatus&&!!u.machine})}):t(r,{checked:"completely"===u.selectedStatus,partial:"partially"===u.selectedStatus,onChange:e=>y(e,u),disabled:u.unselectable||"REVIEW"===u.state||!0===u?.isDisable})}),o.isTree&&"radio"===v&&!(w&&u.unselectable)&&t("span",{className:"tree-table-fn-td-content-select",children:t(c,{name:u.key,checked:k.includes(u.key),value:u.key,onChange:e=>y(e,u),disabled:u.unselectable||"REVIEW"===u.state||!0===u?.isDisable})})]}),u.isNewNode&&o.isTree?t(d,{onCancel:x,onConfirm:T,value:u.value,label:u?.label,optionsList:u.options,selectedOption:u.selectedOption,withDropdown:"inputWithDropdown"===u.type,handleCustomError:C,inputFieldWidth:j,selectFieldWidth:S,confirmIconTooltip:u.confirmIconTooltip,cancelIconTooltip:u.cancelIconTooltip,isEditable:D,setIsEditable:W,isOnBlurTrue:!1,isDisable:{confirm:$},isTableTree:!0}):t("span",{className:"tree-table-fn-td-content-text",children:i(a(u,o),g)})]})]}),o.actions&&!u?.isNewNode&&t("div",{className:"table-tree-fn-row-action",children:o.actions(u,l)})]})});f.displayName="TableCell";export{f as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { formatCellData } from '../Utils/formatDataCell';
+import { prepareData } from '../Utils/TableCell';
+import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
+import Tooltip from '../../Tooltip';
+import Checkbox from '../../Checkbox';
+import RadioButton from '../../RadioButton';
+import AddModule from '../../EditLabel';
+import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
+import Spinner from '../../../assets/icons/spinner.svg?react';
+const renderSpaces = (level, parentSiblings = [], isLast, nextSibling, isContainer) => {
+    let siblingsArray = parentSiblings;
+    const isLastNode = nextSibling !== undefined ? !nextSibling : isLast;
+    if (checkEmpty(parentSiblings)) {
+        if (!isNaN(level)) {
+            siblingsArray = Array(level).fill(true);
+        }
+    }
+    return (_jsx("div", { className: "tree-table-fn-space-container", children: siblingsArray?.map((line, i) => (_jsx("span", { className: `tree-table-fn-space-block tree-table-fn-space-block-${i} ${!line ? 'no-lines' : ''} ${isLastNode && i === level - 1 ? 'last-node' : ''} ${isContainer ? 'folder' : ''}` }, i))) }));
+};
+const TableCell = React.memo(({ treeRowRef, col, colIndex, columnMeta, node, selected, select, onCheckBoxChange, onToggleExpand, onAddConfirm, onAddCancel, handleEditFieldError, isExpanding, columnTextColor, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, isEditable, setIsEditable, }) => {
+    //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-fn-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-fn-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-fn-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));
+    //     });
+    //   };
+    // }, []);
+    const cellStyle = {
+        color: `${columnTextColor || 'var(--ff-primary-text-color)'}`,
+        width: columnMeta?.width ?? col?.width,
+        position: columnMeta?.sticky ? 'sticky' : undefined,
+        left: columnMeta?.sticky ? columnMeta.left : undefined,
+        zIndex: columnMeta?.sticky ? columnMeta.zIndex : undefined,
+    };
+    return (_jsxs("div", { className: `ff-table-tree-fn-td ${col.isTree && node.container ? 'folder' : ''} ${columnMeta?.sticky ? 'sticky-tree-column' : ''}`, "data-col-index": colIndex, style: cellStyle, children: [col.isTree &&
+                renderSpaces(node.hierarchy, node.parentSiblings, node.lastChild, node.nextSibling, node.container), _jsxs("div", { className: "tree-fn-title-container", children: [col.isTree && (_jsx("span", { className: `tree-table-fn-space-block  last-tree-fn-block last-tree-fn-block tree-table-fn-space-block-${node.hierarchy} ${node?.expanded
+                            ? 'tree-fn-row-expanded'
+                            : 'tree-fn-row-collapsed'} ${node.container && node.expandable ? '' : 'no-tree-folder'}`, children: node.container && node.expandable && (_jsxs("span", { onClick: () => onToggleExpand(node), children: [' ', isExpanding ? _jsx(Spinner, {}) : _jsx(Arrow, {})] })) })), _jsxs("span", { className: `tree-table-fn-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-fn-td-content-select", children: node.selectedStatus === 'none' ? (_jsx(Tooltip, { title: node?.currentEnvId &&
+                                                node?.envId &&
+                                                node?.currentEnvId !== node?.envId
+                                                ? '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-fn-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, isEditable: isEditable, setIsEditable: setIsEditable, isOnBlurTrue: false, isDisable: { confirm: disableEditLabelConfirmIcon }, isTableTree: true })) : (_jsx("span", { className: "tree-table-fn-td-content-text", children: formatCellData(prepareData(node, col), scriptLengthTruncate) }))] })] }), col.actions && !node?.isNewNode && (_jsx("div", { className: `table-tree-fn-row-action`, children: (() => {
+                    return col.actions(node, treeRowRef);
+                })() }))] }));
+});
+TableCell.displayName = 'TableCell';
+export default TableCell;
+//# sourceMappingURL=TableCell.js.map

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

@@ -1 +1,53 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import a,{useRef as o,useState as n,useEffect as s}from"react";import{formatCellData as l}from"../Utils/formatDataCell.js";import{prepareData as d}from"../Utils/TableCell.js";import r from"../../Checkbox/Checkbox.js";import i from"../../RadioButton/RadioButton.js";const c=a.memo(({columnsData:a,columnMeta:c,totalWidth:m,rootNode:h,selected:f,onCheckBoxChange:p,selectedNode:b,tableHeaderBgColor:u,hideOnDisable:k,transparentHeader:y,scriptLengthTruncate:v=25,showHeader:N=!0})=>{const x=o(null),[C,w]=n(!1),[g,D]=n(!1);s(()=>{w(!0)},[]);const j=(e,t)=>{const a=c?.[e];return{width:a?.width??t,position:a?.sticky?"sticky":void 0,left:a?.sticky?a.left:void 0,zIndex:a?.sticky?a.zIndex:void 0}};return e("div",{className:"ff-table-tree-fn-head",children:[N&&t("div",{className:"ff-table-tree-fn-row no-hover",style:{minWidth:m},children:a.map(({name:e,width:a},o)=>t("div",{className:"ff-table-tree-fn-th "+(c?.[o]?.sticky?"sticky-tree-column":""),"data-col-index":o,style:{...j(o,a),backgroundColor:y?"transparent":u,pointerEvents:y?"none":"auto"},children:e},e))}),h&&t("div",{className:"ff-table-tree-fn-row show-tree "+(b&&b===h?.node?.key?"hover":""),ref:x,onMouseEnter:e=>{e.stopPropagation(),D(!0)},onMouseLeave:e=>{e.stopPropagation(),D(!1)},children:a.map((a,o)=>t("div",{className:"ff-table-tree-fn-td "+(c?.[o]?.sticky?"sticky-tree-column":""),"data-col-index":o,style:j(o,a.width),children:e("span",{className:"tree-table-fn-default-content",children:[0===o&&"checkbox"===h.select&&!(k&&h.node.isDisabled)&&t(r,{checked:"partially"!==h?.node?.selectedStatus&&("completely"===h?.node?.selectedStatus||!1),partial:"partially"===h.node.selectedStatus,onChange:e=>p(e,h.node),disabled:h.node.isDisabled}),0===o&&"radio"===h.select&&!(k&&h.node.isDisabled)&&t(i,{name:h.node.key,checked:f.includes(h.node.key),value:h.node.key,onChange:e=>p(e,h.node),disabled:h.node.isDisabled}),e("span",{className:"tree-table-fn-td-content-text",children:["name"===a.accessor?t("span",{children:h.node[a.accessor]}):t("span",{children:l(d(h.node,a),v)}),h.cell&&0===o&&t("span",{className:"table-tree--fn-root-cell",children:h.cell(h.node)})]}),g&&h.actions&&0===o&&C&&x.current&&t("div",{className:"table-tree-fn-row-action",children:h.actions(h.node,x)})]})},o))})]})});c.displayName="TableHead";export{c as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from 'react';
+import { formatCellData } from '../Utils/formatDataCell';
+import { prepareData } from '../Utils/TableCell';
+import Checkbox from '../../Checkbox';
+import RadioButton from '../../RadioButton';
+const TableHead = React.memo(({ columnsData, columnMeta, totalWidth, rootNode, selected, onCheckBoxChange, selectedNode, tableHeaderBgColor, hideOnDisable, transparentHeader, scriptLengthTruncate = 25, showHeader = true, }) => {
+    const rootNodeRowRef = useRef(null);
+    const [isMounted, setIsMounted] = useState(false);
+    const [didMouseEntered, setDidMouseEntered] = useState(false);
+    const handleMouseEnter = (e) => {
+        e.stopPropagation();
+        setDidMouseEntered(true);
+    };
+    const handleMouseLeave = (e) => {
+        e.stopPropagation();
+        setDidMouseEntered(false);
+    };
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    const getCellStyle = (index, width) => {
+        const meta = columnMeta?.[index];
+        return {
+            width: meta?.width ?? width,
+            position: meta?.sticky ? 'sticky' : undefined,
+            left: meta?.sticky ? meta.left : undefined,
+            zIndex: meta?.sticky ? meta.zIndex : undefined,
+        };
+    };
+    return (_jsxs("div", { className: "ff-table-tree-fn-head", children: [showHeader && (_jsx("div", { className: "ff-table-tree-fn-row no-hover", style: { minWidth: totalWidth }, children: columnsData.map(({ name, width }, index) => (_jsx("div", { className: `ff-table-tree-fn-th ${columnMeta?.[index]?.sticky ? 'sticky-tree-column' : ''}`, "data-col-index": index, style: {
+                        ...getCellStyle(index, width),
+                        backgroundColor: transparentHeader
+                            ? 'transparent'
+                            : tableHeaderBgColor,
+                        pointerEvents: transparentHeader ? 'none' : 'auto',
+                    }, children: name }, name))) })), rootNode && (_jsx("div", { className: `ff-table-tree-fn-row show-tree ${selectedNode && selectedNode === rootNode?.node?.key
+                    ? 'hover'
+                    : ''}`, ref: rootNodeRowRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: columnsData.map((col, index) => (_jsx("div", { className: `ff-table-tree-fn-td ${columnMeta?.[index]?.sticky ? 'sticky-tree-column' : ''}`, "data-col-index": index, style: getCellStyle(index, col.width), children: _jsxs("span", { className: "tree-table-fn-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-fn-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--fn-root-cell", children: rootNode.cell(rootNode.node) }))] }), didMouseEntered &&
+                                rootNode.actions &&
+                                index === 0 &&
+                                isMounted &&
+                                rootNodeRowRef.current && (_jsx("div", { className: "table-tree-fn-row-action", children: rootNode.actions(rootNode.node, rootNodeRowRef) }))] }) }, index))) }))] }));
+});
+TableHead.displayName = 'TableHead';
+export default TableHead;
+//# sourceMappingURL=TableHead.js.map

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

@@ -1 +1,14 @@
-import{jsx as e}from"react/jsx-runtime";import d,{useRef as n}from"react";import t from"./TableCell.js";const o=d.memo(({node:d,columnsData:o,columnMeta:l,selected:a,select:i,onRowClick:r,onToggleExpand:s,onCheckBoxChange:c,onAddConfirm:m,onAddCancel:h,handleEditFieldError:b,isExpanding:f,index:u,selectedNode:E,hideOnDisable:p,scriptLengthTruncate:C,addModuleInputWidth:x,addModuleSelectWidth:g,disableEditLabelConfirmIcon:y,isEditable:k,setIsEditable:I,style:w})=>{const M=n(null);return e("div",{"data-level":d.hierarchy,ref:M,className:"ff-table-tree-fn-row show-tree "+(E&&E===d.key?"fn-selected-node":""),onClick:e=>r(e,d),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||r(e,d)},role:"button",tabIndex:0,id:0===u?"table-fn-first-row":d.key,style:w,children:o.map((n,o)=>e(t,{treeRowRef:M,col:n,colIndex:o,node:d,selected:a,select:i,onCheckBoxChange:c,onToggleExpand:s,onAddConfirm:m,onAddCancel:h,handleEditFieldError:b,isExpanding:f,hideOnDisable:p,scriptLengthTruncate:C,addModuleInputWidth:x,addModuleSelectWidth:g,disableEditLabelConfirmIcon:y,isEditable:k,setIsEditable:I,columnMeta:l?.[o]},n.name))})});o.displayName="TableRow";export{o 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, columnMeta, selected, select, onRowClick, onToggleExpand, onCheckBoxChange, onAddConfirm, onAddCancel, handleEditFieldError, isExpanding, index, selectedNode, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, isEditable, setIsEditable, style, }) => {
+    const treeRowRef = useRef(null);
+    return (_jsx("div", { "data-level": node.hierarchy, ref: treeRowRef, className: `ff-table-tree-fn-row show-tree ${selectedNode && selectedNode === node.key ? 'fn-selected-node' : ''}`, onClick: (e) => onRowClick(e, node), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                onRowClick(e, node);
+            }
+        }, role: "button", tabIndex: 0, id: index === 0 ? 'table-fn-first-row' : node.key, style: style, children: columnsData.map((col, colIndex) => (_jsx(TableCell, { treeRowRef: treeRowRef, col: col, colIndex: colIndex, 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, isEditable: isEditable, setIsEditable: setIsEditable, columnMeta: columnMeta?.[colIndex] }, col.name))) }));
+});
+TableRow.displayName = 'TableRow';
+export default TableRow;
+//# sourceMappingURL=TableRow.js.map