pixel-react 1.16.4 → 1.17.1

package/README.md

@@ -1,75 +1,75 @@
----
-title: PixelReact UI
----
-
-import { Button, Input } from 'pixel-react';
-
-<h1 align="center">PixelReact UI</h1>
-
-<p align="center">
-  <strong>PixelReact UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
-</p>
-
----
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Usage](#usage)
-- [Documentation](#documentation)
-- [Contributing](#contributing)
-- [License](#license)
-
----
-
-## Installation
-
-Install PixelReact UI in your project directory with:
-
-```bash
-npm install pixel-react
-```
-
-or with Yarn:
-
-```bash
-yarn add pixel-react
-```
-
-## Usage
-
-Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
-
-```jsx
-import { Button } from 'pixel-react';
-
-function App() {
-  return (
-    <div>
-      <Button label="Button Label" variant="primary" />
-    </div>
-  );
-}
-
-export default App;
-```
-
-## Documentation
-
-For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
-
-## Example
-
-```jsx
-import { Button } from 'pixel-react';
-
-function ExampleComponent() {
-  return <Button label="Click Me!" variant="primary" />;
-}
-```
-
-## License
-
-PixelReact UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
-
----
+---
+title: PixelReact UI
+---
+
+import { Button, Input } from 'pixel-react';
+
+<h1 align="center">PixelReact UI</h1>
+
+<p align="center">
+  <strong>PixelReact UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
+</p>
+
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## Installation
+
+Install PixelReact UI in your project directory with:
+
+```bash
+npm install pixel-react
+```
+
+or with Yarn:
+
+```bash
+yarn add pixel-react
+```
+
+## Usage
+
+Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
+
+```jsx
+import { Button } from 'pixel-react';
+
+function App() {
+  return (
+    <div>
+      <Button label="Button Label" variant="primary" />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Documentation
+
+For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
+
+## Example
+
+```jsx
+import { Button } from 'pixel-react';
+
+function ExampleComponent() {
+  return <Button label="Click Me!" variant="primary" />;
+}
+```
+
+## License
+
+PixelReact UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
+
+---

package/lib/components/AddResourceButton/AddResourceButton.js

@@ -22,36 +22,41 @@ const AddResourceButton = ({ id = 'AddModule', variant = 'primary', directionalA
     },
 ], zIndex = 1400, menuOptionZIndex = 1400, treeRowRef, onMenuOptionClick, isFromTree = false, }) => {
     const [isHovered, setIsHovered] = useState(false);
-    const [positionArrowContainer, setPositionArrowContainer] = useState({ left: 0, top: 0 });
+    const [positionArrowContainer, setPositionArrowContainer] = useState({
+        left: 0,
+        top: 0,
+    });
     const [activeArrow, setActiveArrow] = useState('');
     const arrowContainerRef = useRef(null);
+    const portalRef = useRef(null);
     const validArrows = validateArrows(directionalArrow);
     const portalPosition = usePortalPosition(arrowContainerRef, isHovered);
     const handleHover = () => {
-        if (!activeArrow) {
-            setIsHovered(true);
-        }
+        setIsHovered(true);
         const { positionX, positionY } = portalPosition(arrowContainerRef);
         setPositionArrowContainer({ left: positionX, top: positionY });
-        const parentNode = arrowContainerRef.current?.parentNode;
-        if (treeRowRef !== null && parentNode) {
-            const actionContainer = treeRowRef?.current?.querySelector('.table-tree-row-action');
+        if (treeRowRef?.current) {
+            const actionContainer = treeRowRef.current.querySelector('.table-tree-fn-row-action, .table-tree-row-action');
             actionContainer?.classList.add('table-row-add-button');
         }
     };
-    const handleLeave = () => {
+    const handleLeave = (e) => {
+        const nextTarget = e.relatedTarget;
+        const isInsideButton = arrowContainerRef.current?.contains(nextTarget);
+        const isInsidePortal = portalRef.current?.contains(nextTarget);
+        if (isInsideButton || isInsidePortal)
+            return;
         setIsHovered(false);
         setActiveArrow('');
-        const parentNode = arrowContainerRef.current?.parentNode;
-        if (treeRowRef !== null && parentNode) {
-            const actionContainer = treeRowRef?.current?.querySelector('.table-tree-row-action');
+        if (treeRowRef?.current) {
+            const actionContainer = treeRowRef.current.querySelector('.table-tree-fn-row-action, .table-tree-row-action');
             actionContainer?.classList.remove('table-row-add-button');
         }
     };
     const handleArrowClick = (direction) => {
         if (activeArrow === direction) {
             setActiveArrow('');
-            setIsHovered(false);
+            setIsHovered(true);
         }
         else {
             setActiveArrow(direction);
@@ -66,13 +71,13 @@ const AddResourceButton = ({ id = 'AddModule', variant = 'primary', directionalA
         const arrowCountClass = validArrows.length === 2 ? 'ff-two-arrows' : '';
         return `ff-${directions} ${arrowCountClass}`;
     };
-    return (_jsxs("div", { className: `${isFromTree ? 'ff-add-button-tree' : 'ff-add-button-container'} ${isHovered && !activeArrow ? `ff-hovered-add-button--${variant}` : ''}`, id: id, onMouseEnter: handleHover, onMouseLeave: handleLeave, ref: arrowContainerRef, children: [_jsx("span", { className: "ff-add-button", children: _jsx(Icon, { name: "plus_icon", width: 16, height: 16, className: isHovered
+    return (_jsxs("div", { id: id, ref: arrowContainerRef, className: `${isFromTree ? 'ff-add-button-tree' : 'ff-add-button-container'} ${isHovered ? `ff-hovered-add-button--${variant}` : ''}`, onMouseEnter: handleHover, onMouseLeave: handleLeave, children: [_jsx("span", { className: "ff-add-button", children: _jsx(Icon, { name: "plus_icon", width: 16, height: 16, className: isHovered
                         ? `ff-hovered-add-icon--${variant}`
                         : `ff-add-icon--${variant}` }) }), isHovered &&
-                createPortal(_jsx("div", { id: `portal-123`, className: `ff-arrow-buttons-container ${getArrowButtonClass()}`, onMouseEnter: handleHover, onMouseLeave: handleLeave, style: {
+                createPortal(_jsx("div", { ref: portalRef, id: "portal-123", className: `ff-arrow-buttons-container ${getArrowButtonClass()}`, onMouseEnter: handleHover, onMouseLeave: handleLeave, style: {
                         left: positionArrowContainer.left + (isFromTree ? 4 : 0),
                         top: positionArrowContainer.top + (isFromTree ? 2 : 0),
-                        zIndex: zIndex,
+                        zIndex,
                     }, children: directionalArrow.map(({ direction, menuOptions }, index) => (_jsx(ArrowsButton, { direction: direction, onArrowClick: () => handleArrowClick(direction), menuOptions: menuOptions, isActive: activeArrow === direction, variant: variant, treeRowRef: treeRowRef, onMenuOptionClick: onMenuOptionClick, menuOptionZIndex: menuOptionZIndex }, index))) }), document.body)] }));
 };
 export default AddResourceButton;

package/lib/components/AddResourceButton/AddResourceButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddResourceButton.js","sourceRoot":"","sources":["../../../src/components/AddResourceButton/AddResourceButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AddResourceButton.js","sourceRoot":"","sources":["../../../src/components/AddResourceButton/AddResourceButton.tsx"],"names":[],"mappings":"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"}

package/lib/components/Charts/BarChart/BarChart.js

@@ -118,20 +118,20 @@ const BarChart = ({ data, isYaxisSticky = false, barWidth, height, barGap = 20,
         if (tooltip) {
             tooltip.style.display = 'block';
             if (customToolTip) {
-                tooltip.innerHTML = `<div>
-          <div><Typography fontWeight='semi-bold'>${label}</Typography></div>
-          <div><Typography>${id ? id : ''}</Typography></div>
-          <div><Typography>${totalLabel} : ${value} ${percent ? '(' + percent + '%)' : ''}</Typography></div>
+                tooltip.innerHTML = `<div>
+          <div><Typography fontWeight='semi-bold'>${label}</Typography></div>
+          <div><Typography>${id ? id : ''}</Typography></div>
+          <div><Typography>${totalLabel} : ${value} ${percent ? '(' + percent + '%)' : ''}</Typography></div>
         </div>`;
             }
             else if (isDashboardVersions) {
                 const versionsList = versions ? versions.join(', ') : '';
-                tooltip.innerHTML = `
-        <div>
-          <div><Typography>${totalLabel} : ${value}</Typography></div>
+                tooltip.innerHTML = `
+        <div>
+          <div><Typography>${totalLabel} : ${value}</Typography></div>
           ${versionsList
                     ? `<div><Typography>Versions : ${versionsList}</Typography></div>`
-                    : ''}
+                    : ''}
         </div>`;
             }
             else {

package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.js

@@ -47,12 +47,12 @@ const calculateDonutSegmentBorderPath = (innerR, outerR, startAngle, endAngle) =
     const startInnerX = outerR * Math.cos(startAngle);
     const startInnerY = outerR * Math.sin(startAngle);
     const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-    return `
-    M ${startOuterX} ${startOuterY}
-    A ${innerR} ${innerR} 0 ${largeArcFlag} 1 ${endOuterX} ${endOuterY}
-    L ${endInnerX} ${endInnerY}
-    A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${startInnerX} ${startInnerY}
-    Z
+    return `
+    M ${startOuterX} ${startOuterY}
+    A ${innerR} ${innerR} 0 ${largeArcFlag} 1 ${endOuterX} ${endOuterY}
+    L ${endInnerX} ${endInnerY}
+    A ${outerR} ${outerR} 0 ${largeArcFlag} 0 ${startInnerX} ${startInnerY}
+    Z
   `;
 };
 const colorMapping = [

package/lib/components/Charts/IconRadialChart/IconRadialChart.js

@@ -12,10 +12,10 @@ const calculateArc = ({ x, y, radius, startAngle, endAngle, }) => {
     const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
     if (endAngle - startAngle >= 2 * Math.PI) {
         // Special case for a full circle
-        return `
-      M ${x + radius} ${y}
-      A ${radius} ${radius} 0 1 1 ${x - radius} ${y}  
-      A ${radius} ${radius} 0 1 1 ${x + radius} ${y}
+        return `
+      M ${x + radius} ${y}
+      A ${radius} ${radius} 0 1 1 ${x - radius} ${y}  
+      A ${radius} ${radius} 0 1 1 ${x + radius} ${y}
     `;
     }
     return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;

package/lib/components/Charts/PieChart/PieChart.js

@@ -24,11 +24,11 @@ const calculateArcAngles = (value, total, currentAngle, radius) => {
     const startAngle = currentAngle;
     const endAngle = startAngle + angleIncrement;
     if (percentage === 1) {
-        const path = `
-      M ${radius} 0 
-      A ${radius} ${radius} 0 1 1 ${-radius} 0 
-      A ${radius} ${radius} 0 1 1 ${radius} 0 
-      Z
+        const path = `
+      M ${radius} 0 
+      A ${radius} ${radius} 0 1 1 ${-radius} 0 
+      A ${radius} ${radius} 0 1 1 ${radius} 0 
+      Z
     `;
         return {
             endAngle,

package/lib/components/Comments/Comments.js

@@ -136,20 +136,20 @@ const Comments = ({ commentsData, handleAddComment, handleEditComment, handleDel
     const getCaretCoordinates = (element, position) => {
         const div = document.createElement('div');
         const copyStyle = getComputedStyle(element);
-        div.style.cssText = `
-      position: absolute;
-      visibility: hidden;
-      white-space: pre-wrap;
-      word-wrap: break-word;
-      overflow: auto;
-      width: ${element.offsetWidth}px;
-      height: ${element.offsetHeight}px;
-      font-family: ${copyStyle.fontFamily};
-      font-size: ${copyStyle.fontSize};
-      padding: ${copyStyle.padding};
-      border: ${copyStyle.border};
-      box-sizing: ${copyStyle.boxSizing};
-      line-height: ${copyStyle.lineHeight};
+        div.style.cssText = `
+      position: absolute;
+      visibility: hidden;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      overflow: auto;
+      width: ${element.offsetWidth}px;
+      height: ${element.offsetHeight}px;
+      font-family: ${copyStyle.fontFamily};
+      font-size: ${copyStyle.fontSize};
+      padding: ${copyStyle.padding};
+      border: ${copyStyle.border};
+      box-sizing: ${copyStyle.boxSizing};
+      line-height: ${copyStyle.lineHeight};
     `;
         div.scrollTop = element.scrollTop;
         div.scrollLeft = element.scrollLeft;

package/lib/components/Comments/childComment/ChildComment.js

@@ -93,20 +93,20 @@ const ChildComment = ({ handleInsertNode, handleEditNode, handleDeleteNode, comm
     const getCaretCoordinates = (element, position) => {
         const div = document.createElement('div');
         const copyStyle = getComputedStyle(element);
-        div.style.cssText = `
-        position: absolute;
-        visibility: hidden;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        overflow: auto;
-        width: ${element.offsetWidth}px;
-        height: ${element.offsetHeight}px;
-        font-family: ${copyStyle.fontFamily};
-        font-size: ${copyStyle.fontSize};
-        padding: ${copyStyle.padding};
-        border: ${copyStyle.border};
-        box-sizing: ${copyStyle.boxSizing};
-        line-height: ${copyStyle.lineHeight};
+        div.style.cssText = `
+        position: absolute;
+        visibility: hidden;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        overflow: auto;
+        width: ${element.offsetWidth}px;
+        height: ${element.offsetHeight}px;
+        font-family: ${copyStyle.fontFamily};
+        font-size: ${copyStyle.fontSize};
+        padding: ${copyStyle.padding};
+        border: ${copyStyle.border};
+        box-sizing: ${copyStyle.boxSizing};
+        line-height: ${copyStyle.lineHeight};
       `;
         div.scrollTop = element.scrollTop;
         div.scrollLeft = element.scrollLeft;

package/lib/components/EditTextField/EditTextField.js

@@ -77,8 +77,8 @@ isOpen = false, confirmAction, onClick, nameTooltipTitle, }) => {
         { key: 'Enter', action: () => handleKeyBoard('Enter') },
         { key: 'Escape', action: () => handleKeyBoard('Escape') },
     ], containerRef);
-    return (_jsxs("div", { className: "ff-label-edit-text-field", ref: containerRef, children: [isEditing ? (_jsxs("div", { className: "ff-label-text-field", children: [_jsx("div", { className: "ff-label-text-field-without-dropdown", children: _jsx(Input, { name: "input", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: "Enter your name", value: inputValue, onChange: handleTextFieldChange, className: `
-                
+    return (_jsxs("div", { className: "ff-label-edit-text-field", ref: containerRef, children: [isEditing ? (_jsxs("div", { className: "ff-label-text-field", children: [_jsx("div", { className: "ff-label-text-field-without-dropdown", children: _jsx(Input, { name: "input", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: "Enter your name", value: inputValue, onChange: handleTextFieldChange, className: `
+                
                ${isTextFieldModified ? 'modified' : ''}`, type: "text" }) }), _jsxs("div", { className: "ff-icon-container", children: [confirmIcon && (_jsx(Tooltip, { title: "confirm", placement: 'bottom', children: _jsx(Icon, { color: confirmIcon?.color ?? 'var(--default-confirm-icon-color)', height: confirmIcon?.height ?? 20, disabled: disabled, width: confirmIcon?.width ?? 20, name: confirmIcon?.name ?? 'default-confirm-icon', className: `${confirmIcon?.className ?? 'default-confirm-class'} ${disabled ? 'disabled-confirm-icon' : 'confirm-icon'}`, onClick: handleConfirm }) })), cancelIcon && (_jsx(Tooltip, { title: "cancel", placement: 'bottom', children: _jsx(Icon, { color: cancelIcon?.color ?? 'var(--label-edit-cancel-icon)', height: cancelIcon?.height ?? 12, width: cancelIcon?.width ?? 20, name: cancelIcon?.name ?? 'default-cancel-icon', className: cancelIcon?.className ?? 'cancel-icon', onClick: handleCancel, ref: cancelRef }) }))] })] })) : (_jsxs("div", { className: "display-text-container", children: [nameTooltipTitle ? (_jsx(Tooltip, { title: nameTooltipTitle, children: _jsx("span", { className: "display-text", onClick: onClick, children: _jsx(HighlightText, { text: inputValue, highlight: highlightText }) }) })) : (_jsx("span", { className: "display-text", onClick: onClick, children: _jsx(HighlightText, { text: inputValue, highlight: highlightText }) })), _jsx(Tooltip, { title: capitalize(editIcon?.name ?? 'Edit'), children: _jsx(Icon, { color: editIcon?.color ?? 'var(--label-edit-cancel-icon)', height: editIcon?.height ?? 20, width: editIcon?.width ?? 20, name: editIcon?.name ?? 'edit', className: editIcon?.className ?? 'edit-icon', onClick: handleEditButtonClick }) })] })), showError && isEditing && (_jsx(Typography, { as: "p", fontSize: 8, className: "error-text", children: showError }))] }));
 };
 export default EditTextField;

package/lib/components/LabelEditTextField/LabelEditTextField.js

@@ -158,10 +158,10 @@ className, height, isOpen = false, confirmAction, onClick, tooltip, onDoubleClic
         }
     }
     useKeyboardActions([{ key: 'Enter', action: () => handleKeyBoard('Enter') }], containerRef);
-    return (_jsxs("div", { className: "ff-label-edit-text-field", ref: containerRef, children: [isEditing ? (_jsxs("div", { className: "ff-label-text-field", children: [variant === 'textFieldWithDropdown' ? (_jsxs("div", { className: `ff-label-text-field-with-dropdown ${isEditing ? 'open' : ''}`, style: { height }, children: [_jsx(Input, { name: "input", type: "text", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: placeholder ? placeholder : '', value: inputValue, onChange: handleTextFieldChange, className: `${className} 
-                
-               ${isTextFieldModified ? 'modified' : ''}` }), _jsx(Select, { label: '', optionsList: dropdownData, selectedOption: { value: dropdownValue, label: dropdownValue }, onChange: (option) => setDropdownValue(option.value) })] })) : (_jsx("div", { className: "ff-label-text-field-without-dropdown", children: _jsx(Input, { name: "input", type: "text", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: placeholder ? placeholder : '', value: inputValue, onChange: handleTextFieldChange, className: `${className} 
-               
+    return (_jsxs("div", { className: "ff-label-edit-text-field", ref: containerRef, children: [isEditing ? (_jsxs("div", { className: "ff-label-text-field", children: [variant === 'textFieldWithDropdown' ? (_jsxs("div", { className: `ff-label-text-field-with-dropdown ${isEditing ? 'open' : ''}`, style: { height }, children: [_jsx(Input, { name: "input", type: "text", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: placeholder ? placeholder : '', value: inputValue, onChange: handleTextFieldChange, className: `${className} 
+                
+               ${isTextFieldModified ? 'modified' : ''}` }), _jsx(Select, { label: '', optionsList: dropdownData, selectedOption: { value: dropdownValue, label: dropdownValue }, onChange: (option) => setDropdownValue(option.value) })] })) : (_jsx("div", { className: "ff-label-text-field-without-dropdown", children: _jsx(Input, { name: "input", type: "text", label: label ? label : '', disabled: false, error: isThrowingError, placeholder: placeholder ? placeholder : '', value: inputValue, onChange: handleTextFieldChange, className: `${className} 
+               
                ${isTextFieldModified ? 'modified' : ''}` }) })), _jsxs("div", { className: "ff-icon-container", children: [confirmIcon && (_jsx(Tooltip, { title: "Confirm", placement: 'bottom', children: _jsx(Icon, { color: "var(--label-edit-confirm-icon)", height: 20, width: 20, name: confirmIcon.name, disabled: disabled, className: `${disabled ? 'disabled-confirm-icon' : 'confirm-icon'}`, onClick: handleConfirm }) })), cancelIcon && (_jsx(Tooltip, { title: "Cancel", placement: 'bottom', children: _jsx(Icon, { color: "var(--label-edit-cancel-icon)", height: 12, width: 20, name: cancelIcon.name, className: "cancel-icon", onClick: handleCancel, ref: cancelRef }) }))] })] })) : (_jsx(Tooltip, { title: tooltip?.tooltipTitle ? tooltip?.tooltipTitle : '', placement: 'bottom', children: showText && (_jsx("span", { className: "display-text", onDoubleClick: handleDoubleClick, role: "button", onClick: handleClick, children: _jsx(HighlightText, { text: inputValue, highlight: highlightText }) })) })), showError && isEditing && (_jsx(Typography, { as: "p", fontSize: 8, className: "error-text", children: showError }))] }));
 };
 export default LabelEditTextField;

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -11,15 +11,15 @@ const StatusIndicator = forwardRef(({ label = 'Status', iconName = 'update_icon'
         danger: 'var(--ff-delete-button-attachment)',
     };
     const iconColor = variantColorMap[variant] || variantColorMap.default;
-    return (_jsx("button", { disabled: isDisable, onClick: onClick, className: `
-         ff-status-indicator
-          ff-status-indicator--${variant}
+    return (_jsx("button", { disabled: isDisable, onClick: onClick, className: `
+         ff-status-indicator
+          ff-status-indicator--${variant}
           ${backgroundColor
             ? `ff-status-indicator--with-bg ff-status-indicator--${variant}-bg`
-            : ''}
+            : ''}
           ${border
             ? `ff-status-indicator--with-border ff-status-indicator--${variant}-border`
-            : ''}
+            : ''}
         `, ref: ref, children: _jsxs("div", { className: "ff-status-indicator__content", children: [_jsx(Icon, { name: resolvedIconName, color: iconColor, className: `ff-status-indicator__icon ff-status-indicator__icon--${variant}` }), _jsx(Typography, { as: "div", fontSize: 12, className: `ff-status-indicator__label ff-status-indicator__label--${variant}`, fontWeight: "medium", lineHeight: "20px", children: label })] }) }));
 });
 export default StatusIndicator;

package/lib/components/TableTreeFn/Components/TableBody.d.ts

@@ -1,3 +1,3 @@
 import type { TableBodyProps } from '../types';
-declare const TableBody: ({ flattenedTreeData, columnsData, selected, select, onRowClick, onToggleExpand, onCheckBoxChange, newNode, onAddConfirm, onAddCancel, handleEditFieldError, expanding, rootNode, selectedNode, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableBody: ({ flattenedTreeData, columnsData, columnMeta, rowHeight, startIndex, totalHeight, selected, select, onRowClick, onToggleExpand, onCheckBoxChange, onAddConfirm, onAddCancel, handleEditFieldError, expanding, selectedNode, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, isEditable, setIsEditable, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

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

@@ -1,12 +1,17 @@
 import { jsx as _jsx } 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 (_jsx("tbody", { className: "ff-table-tree-body", children: 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) }));
+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/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../../src/components/TableTreeFn/Components/TableBody.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,EACjB,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,WAAW,EACX,oBAAoB,EACpB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,2BAA2B,GACZ,EAAE,EAAE;IACnB,iFAAiF;IACjF,uCAAuC;IACvC,iBAAiB;IACjB,IAAI;IAEJ,OAAO,CACL,gBAAO,SAAS,EAAC,oBAAoB,YAMlC,SAAS,CAAC,iBAAiB,EAAE,OAAO,IAAI,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,CACzD,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACd,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,oBAAoB,EAAE,oBAAoB,EAC1C,WAAW,EAAE,IAAI,CAAC,GAAG,KAAK,SAAS,EACnC,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,oBAAoB,EAAE,oBAAoB,EAC1C,mBAAmB,EAAE,mBAAmB,EACxC,oBAAoB,EAAE,oBAAoB,EAC1C,2BAA2B,EAAE,2BAA2B,IAlBnD,IAAI,CAAC,GAAG,CAmBb,CACH,CAAC,CAAC,CAAC,IAAI,CACX,GAKK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../../src/components/TableTreeFn/Components/TableBody.tsx"],"names":[],"mappings":";AACA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,SAAS,GAAG,CAAC,EACjB,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,SAAS,GAAG,EAAE,EACd,UAAU,GAAG,CAAC,EACd,WAAW,GAAG,CAAC,EACf,QAAQ,EACR,MAAM,EACN,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,oBAAoB,EACpB,SAAS,EACT,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,2BAA2B,EAC3B,UAAU,EACV,aAAa,GACE,EAAE,EAAE;IACnB,OAAO,CACL,cACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE;YACL,MAAM,EAAE,GAAG,WAAW,IAAI;YAC1B,QAAQ,EAAE,UAAU;SACrB,YAEA,iBAAiB,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,oBAAoB,EAAE,oBAAoB,EAC1C,WAAW,EAAE,IAAI,CAAC,GAAG,KAAK,SAAS,EACnC,KAAK,EAAE,UAAU,GAAG,KAAK,EACzB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,oBAAoB,EAAE,oBAAoB,EAC1C,mBAAmB,EAAE,mBAAmB,EACxC,oBAAoB,EAAE,oBAAoB,EAC1C,2BAA2B,EAAE,2BAA2B,EACxD,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE;gBACL,SAAS,EAAE,cAAc,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,SAAS,KAAK;gBAC9D,MAAM,EAAE,GAAG,SAAS,IAAI;gBACxB,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC;aACT,IA7BI,IAAI,CAAC,GAAG,CA8Bb,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/TableTreeFn/Components/TableCell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableCellProps } from '../types';
-declare const TableCell: React.MemoExoticComponent<({ treeRowRef, col, node, selected, select, onCheckBoxChange, onToggleExpand, onAddConfirm, onAddCancel, handleEditFieldError, isExpanding, columnTextColor, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, }: TableCellProps) => import("react/jsx-runtime").JSX.Element>;
+declare const TableCell: React.MemoExoticComponent<({ treeRowRef, col, colIndex, columnMeta, node, selected, select, onCheckBoxChange, onToggleExpand, onAddConfirm, onAddCancel, handleEditFieldError, isExpanding, columnTextColor, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, isEditable, setIsEditable, }: TableCellProps) => import("react/jsx-runtime").JSX.Element>;
 export default TableCell;

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

@@ -1,38 +1,38 @@
 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 { 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 { 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, nextSibling, isContainer) => {
     let siblingsArray = parentSiblings;
-    let isLastNode = nextSibling !== undefined ? !nextSibling : isLast;
+    const isLastNode = nextSibling !== undefined ? !nextSibling : 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))) }));
+    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, node, selected, select, onCheckBoxChange, onToggleExpand, onAddConfirm, onAddCancel, handleEditFieldError, isExpanding, columnTextColor, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, }) => {
+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-space-block-')
+    //       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-space-block-${level}`
+    //           `.tree-table-fn-space-block-${level}`
     //         ) as NodeListOf<HTMLElement>;
     //         sameLevelBlocks.forEach((block) => {
     //           if (isHovering) {
@@ -45,7 +45,7 @@ const TableCell = React.memo(({ treeRowRef, col, node, selected, select, onCheck
     //     }
     //   };
     //   const spaceBlocks = document.querySelectorAll(
-    //     '.tree-table-space-block'
+    //     '.tree-table-fn-space-block'
     //   ) as NodeListOf<HTMLElement>;
     //   spaceBlocks.forEach((block) => {
     //     block.addEventListener('mouseenter', (e) => handleHover(e, true));
@@ -58,12 +58,19 @@ const TableCell = React.memo(({ treeRowRef, col, node, selected, select, onCheck
     //     });
     //   };
     // }, []);
-    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.nextSibling, 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 &&
+    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-td-content-select", children: node.selectedStatus === 'none' ? (_jsx(Tooltip, { title: node?.currentEnvId &&
+                                        !(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.'
@@ -73,11 +80,12 @@ const TableCell = React.memo(({ treeRowRef, col, node, selected, select, onCheck
                                                 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 ||
+                                        !(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, 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: (() => {
+                                                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 } })) : (_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