pixel-react 1.13.96 → 1.13.98

package/lib/index.cjs

@@ -4879,7 +4879,7 @@ const OptionCard = ({
         onClick: onClick,
         alignOption: alignOption
       }, opt.value)
-    }))
+    }, opt.value))
   }), document.body);
 };
 const MenuOption = ({
@@ -9797,10 +9797,25 @@ var DNDSortable = /*#__PURE__*/Object.freeze({
 	verticalListSortingStrategy: verticalListSortingStrategy
 });
 
-const getColumnWidth = (index, column, columns) => {
-  if (index === 0) return `${index * (column?.width || 0)}px`;
-  if (index === 1) return `${columns?.[0]?.width || 0}px`;
-  return 'auto';
+const getColumnLeftPosition = (index, columns, freezeColumns) => {
+  if (index === 0) return '0px';
+  // Calculate cumulative width of all previous columns including padding
+  let leftPosition = 0;
+  const CELL_PADDING = 8; // Each cell has 8px padding
+  for (let i = 0; i < index; i++) {
+    const width = columns[i]?.width;
+    // Add column width plus left padding only
+    leftPosition += width ? parseInt(width.toString(), 10) : DEFAULT_COLUMN_WIDTH;
+    // Add padding between frozen columns
+    if (freezeColumns && i < freezeColumns - 1) {
+      leftPosition += CELL_PADDING;
+    }
+  }
+  return `${leftPosition}px`;
+};
+const DEFAULT_COLUMN_WIDTH = 400;
+const calculateFrozenWidth = (columnData, freezeColumns) => {
+  return columnData.slice(0, freezeColumns).reduce((acc, col) => acc + parseInt(col.width?.toString() || `${DEFAULT_COLUMN_WIDTH}`, 10), 1) + 8 * (freezeColumns - 0.17);
 };
 const SortableRow = ({
   row,
@@ -9815,9 +9830,9 @@ const SortableRow = ({
   editMode,
   isAccordionOpen,
   accordionContent,
-  columnSticky,
   isRowCheckBoxDisable,
-  isRowDisabled = true
+  isRowDisabled = true,
+  freezeColumns
 }) => {
   const {
     attributes,
@@ -9843,15 +9858,19 @@ const SortableRow = ({
       }),
       id: key,
       children: columns.map((column, index) => {
-        const isSticky = columnSticky && (index === 0 || index === 1);
+        const isFrozen = freezeColumns && index < freezeColumns;
         return jsxRuntime.jsx("td", {
           style: {
-            paddingLeft: index === 0 && draggable ? '0px' : '8px',
-            position: isSticky ? 'sticky' : 'static',
-            left: getColumnWidth(index, column, columns),
-            zIndex: isSticky ? 999 : 'auto',
-            backgroundColor: isSticky ? 'var(--input-label-bg-color)' : 'transparent'
+            position: isFrozen ? 'sticky' : 'static',
+            left: isFrozen ? getColumnLeftPosition(index, columns, freezeColumns) : 'auto',
+            zIndex: isFrozen ? 99 : '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'
           },
+          "data-frozen": isFrozen || undefined,
           onClick: () => handleOnclick(column, row),
           className: classNames(column.className, {
             'clickable-cell': column.onClick
@@ -9925,15 +9944,19 @@ const Table$1 = ({
   editComponent,
   getAccordionStatus = () => {},
   accordionContent,
-  columnSticky = false,
   tableRef = null,
   isRowCheckBoxDisable,
   isRowDisabled = true,
-  tableHeaderZindex = 99
+  tableHeaderZindex = 99,
+  freezeColumns
 }) => {
   const observerRef = React.useRef(null);
+  let frozenWidth = 0;
+  if (freezeColumns) {
+    frozenWidth = calculateFrozenWidth(columns, freezeColumns);
+  }
   React.useEffect(() => {
-    const scrollContainer = document.getElementById('ff-table-scroll-container');
+    const scrollContainer = document.getElementById('ff-sortable-table-scroll-container');
     const firstNode = document.getElementById('ff-table-first-node');
     const lastNode = document.getElementById('ff-table-last-node');
     // Exit early if data is empty or elements are missing
@@ -9994,12 +10017,10 @@ const Table$1 = ({
       children: jsxRuntime.jsxs("div", {
         style: {
           height: height,
-          position: 'relative',
-          overflowX: 'auto',
-          whiteSpace: 'nowrap',
-          scrollbarWidth: draggable ? 'none' : 'auto'
+          scrollbarWidth: draggable ? 'none' : 'auto',
+          '--frozen-column-width': freezeColumns ? `${frozenWidth}px` : '0px'
         },
-        id: "ff-table-scroll-container",
+        id: "ff-sortable-table-scroll-container",
         className: classNames(className, {
           'ff-fixed-header-table': withFixedHeader,
           'border-borderRadius': borderWithRadius
@@ -10016,44 +10037,51 @@ const Table$1 = ({
               zIndex: tableHeaderZindex
             },
             children: jsxRuntime.jsx("tr", {
-              children: columns.map((column, index) => jsxRuntime.jsxs("th", {
-                className: classNames(`${headerType !== 'default' ? `${headerType}-bg` : ''}`, `${headerTextColor && `${headerTextColor}-color`}`, {
-                  'sticky-column': columnSticky && (index === 0 || index === 1)
-                }),
-                style: {
-                  width: column?.width,
-                  left: getColumnWidth(index, column, columns)
-                },
-                children: [jsxRuntime.jsx("div", {
-                  className: "ff-table-icon",
-                  children: jsxRuntime.jsx(Icon, {
-                    height: 14,
-                    width: 14,
-                    name: headerIconName,
-                    onClick: headerIconOnClick
-                  })
-                }), jsxRuntime.jsxs(Typography, {
-                  style: column?.width && {
-                    width: column?.width
+              children: columns.map((column, index) => {
+                const isFrozen = freezeColumns && index < freezeColumns;
+                return jsxRuntime.jsxs("th", {
+                  className: classNames(`${headerType !== 'default' ? `${headerType}-bg` : ''}`, `${headerTextColor && `${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: '7px 8px',
+                    boxSizing: 'border-box',
+                    // Remove right padding from frozen columns to prevent overlap
+                    paddingRight: isFrozen ? 0 : '8px'
                   },
-                  as: "div",
-                  fontWeight: "semi-bold",
-                  className: "ff-label-checkbox-container",
-                  children: [index === 0 && withCheckbox && jsxRuntime.jsx("span", {
-                    className: "ff-table-checkbox",
-                    children: jsxRuntime.jsx(Checkbox, {
-                      onChange: e => {
-                        onSelectClick(e, {
-                          allSelected: e.target.checked
-                        });
-                      },
-                      checked: allSelected !== undefined ? allSelected : false,
-                      partial: !!partialSelected,
-                      disabled: headerCheckboxDisabled
+                  children: [jsxRuntime.jsx("div", {
+                    className: "ff-table-icon",
+                    children: jsxRuntime.jsx(Icon, {
+                      height: 14,
+                      width: 14,
+                      name: headerIconName,
+                      onClick: headerIconOnClick
                     })
-                  }), column.header]
-                })]
-              }, column.header))
+                  }), jsxRuntime.jsxs(Typography, {
+                    style: column?.width && {
+                      width: column?.width
+                    },
+                    as: "div",
+                    fontWeight: "semi-bold",
+                    className: "ff-label-checkbox-container",
+                    children: [index === 0 && withCheckbox && jsxRuntime.jsx("span", {
+                      className: "ff-table-checkbox",
+                      children: jsxRuntime.jsx(Checkbox, {
+                        onChange: e => {
+                          onSelectClick(e, {
+                            allSelected: e.target.checked
+                          });
+                        },
+                        checked: allSelected !== undefined ? allSelected : false,
+                        partial: !!partialSelected,
+                        disabled: headerCheckboxDisabled
+                      })
+                    }), column.header]
+                  })]
+                }, column.header);
+              })
             })
           }), jsxRuntime.jsxs("tbody", {
             className: "ff-fixed-header-table",
@@ -10086,11 +10114,12 @@ const Table$1 = ({
                   withCheckbox: withCheckbox,
                   onSelectClick: onSelectClick,
                   draggable: draggable,
-                  columnSticky: columnSticky,
                   isAccordionOpen: isOpen,
                   accordionContent: accordionContent,
                   isRowCheckBoxDisable: isRowCheckBoxDisable,
-                  isRowDisabled: isRowDisabled
+                  isRowDisabled: isRowDisabled,
+                  freezeColumns: freezeColumns,
+                  frozenWidth: frozenWidth
                 })
               });
             }), jsxRuntime.jsx("tr", {
@@ -15862,7 +15891,8 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
   leftDropDownPositionZindex,
   rightDropDownPositionZindex,
   pattern,
-  inputMode
+  inputMode,
+  disableSelectHover = false
 }, ref) => {
   const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
   const handleWheel = e => {
@@ -15900,7 +15930,8 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
           className: classNames('ff-floating-dropdown', {
             'ff-floating-dropdown--disabled': !!disabled,
             'ff-floating-dropdown--error': !!error,
-            'ff-floating-dropdown--left': dropdownPosition === 'left'
+            'ff-floating-dropdown--left': dropdownPosition === 'left',
+            'ff-floating-dropdown--no-hover': disableSelectHover
           }),
           width: 94,
           height: 30
@@ -15956,7 +15987,8 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
         optionsRequired: optionsRequired,
         className: classNames('ff-floating-dropdown', {
           'ff-floating-dropdown--disabled': !!disabled,
-          'ff-floating-dropdown--error': !!error
+          'ff-floating-dropdown--error': !!error,
+          'ff-floating-dropdown--no-hover': disableSelectHover
         }),
         width: 120,
         height: 30
@@ -30014,14 +30046,16 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   iconName = 'plus_user_icon',
   onClick,
   iconHide = false,
-  isDisable = false
+  isDisable = false,
+  variant
 }, ref) => {
   return jsxRuntime.jsxs("button", {
     disabled: isDisable,
     onClick: onClick,
     className: classNames('ff-plus-icon', {
       'ff-plus-no-icon': iconHide,
-      'ff-plus-disabled': isDisable
+      'ff-plus-disabled': isDisable,
+      'ff-plus-primary': variant === 'primary'
     }),
     ref: ref,
     children: [!iconHide && jsxRuntime.jsx("div", {
@@ -31899,6 +31933,7 @@ const DashboardDonutChart = ({
                   })]
                 })
               }), jsxRuntime.jsx("tbody", {
+                className: "ff-legend-table-tbody",
                 children: legendData?.map(item => jsxRuntime.jsxs("tr", {
                   className: "ff-legend-item",
                   onMouseEnter: () => {
@@ -33881,7 +33916,7 @@ const NlpDropdown = ({
     let dropdownContainerHeight;
     if (checkEmpty(options)) {
       dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
-    } else if (options.length > 5) {
+    } else if (options.length > 0) {
       dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
     } else {
       dropdownContainerHeight = options.length * optionHeight + 2 * dropDownWrapperPadding;
@@ -34199,11 +34234,20 @@ const NlpDropdown = ({
 const ChipsAccordion = /*#__PURE__*/React.forwardRef(({
   chipOptionList,
   selectedChips,
-  optionZIndex = 0
+  optionZIndex = 0,
+  inputRef
 }, ref) => {
   const [filterData, setFilterData] = React.useState([]);
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [IsArrowEnable, setIsArrowEnable] = React.useState(false);
+  const [positionChipContainer, setPositionChipContainer] = React.useState({
+    left: 0,
+    top: 0
+  });
+  const [expandDirection, setExpandDirection] = React.useState('down');
+  const localRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => localRef.current);
+  const portalPosition = usePortalPosition(localRef, isExpanded);
   React.useEffect(() => {
     if (checkEmpty(chipOptionList)) return;
     setFilterData(chipOptionList);
@@ -34218,6 +34262,33 @@ const ChipsAccordion = /*#__PURE__*/React.forwardRef(({
   React.useEffect(() => {
     checkOverflow();
   }, [filterData]);
+  React.useEffect(() => {
+    const handleUpdate = () => {
+      if (!inputRef?.current) return;
+      const {
+        positionX,
+        positionY,
+        width,
+        fromBottom
+      } = portalPosition(inputRef);
+      const estimatedHeight = 160;
+      const expandUp = fromBottom < estimatedHeight;
+      setExpandDirection(expandUp ? 'up' : 'down');
+      setPositionChipContainer({
+        left: positionX + width,
+        top: positionY
+      });
+    };
+    handleUpdate();
+    const observer = new ResizeObserver(() => handleUpdate());
+    if (inputRef?.current) observer.observe(inputRef.current);
+    window.addEventListener('scroll', handleUpdate, true);
+    return () => {
+      if (inputRef?.current) observer.unobserve(inputRef.current);
+      observer.disconnect();
+      window.removeEventListener('scroll', handleUpdate, true);
+    };
+  }, [portalPosition, inputRef]);
   const toggleExpand = () => {
     setIsExpanded(prev => !prev);
     if (isExpanded) {
@@ -34246,15 +34317,23 @@ const ChipsAccordion = /*#__PURE__*/React.forwardRef(({
       window.removeEventListener('resize', handleResize);
     };
   }, []);
-  return jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsxs("div", {
     className: "ff-chips-accordion",
     style: {
-      zIndex: optionZIndex + 100
+      left: positionChipContainer.left,
+      top: positionChipContainer.top,
+      zIndex: optionZIndex + 100,
+      transform: expandDirection === 'up' ? 'translateY(calc(-100% + 33px))' : 'none',
+      width: '27.8%',
+      position: 'absolute'
     },
-    ref: ref,
+    ref: localRef,
     children: [jsxRuntime.jsx("div", {
       ref: chipsRowRef,
       className: `ff-chips-row ${isExpanded ? 'expanded' : ''}`,
+      style: {
+        maxHeight: isExpanded ? '280px' : '20px'
+      },
       children: jsxRuntime.jsx("div", {
         className: "chips-container",
         children: filterData?.map(({
@@ -34279,7 +34358,7 @@ const ChipsAccordion = /*#__PURE__*/React.forwardRef(({
         role: "button",
         "aria-expanded": isExpanded,
         children: jsxRuntime.jsx(Icon, {
-          name: "arrows_down_icon",
+          name: expandDirection === 'down' ? 'arrows_down_icon' : 'arrows_top_icon',
           height: 8,
           width: 8,
           onClick: toggleExpand,
@@ -34287,7 +34366,7 @@ const ChipsAccordion = /*#__PURE__*/React.forwardRef(({
         })
       })
     })]
-  });
+  }), document.body);
 });
 
 const nlpInputReducer = (state, action) => {
@@ -34509,6 +34588,29 @@ const NlpInput = ({
     handleSelectAction('FOCUS_INPUT');
   }, []);
   const applyActiveOptionClasses = !isInputFocused && Boolean(option);
+  React.useEffect(() => {
+    const inputEl = InputRef.current;
+    if (!inputEl) return;
+    let scrollContainer = inputEl.parentElement;
+    while (scrollContainer && scrollContainer !== document.body) {
+      const style = getComputedStyle(scrollContainer);
+      if (['scroll', 'auto'].includes(style.overflowY)) {
+        break;
+      }
+      scrollContainer = scrollContainer.parentElement;
+    }
+    if (!scrollContainer) return;
+    const originalOverflow = scrollContainer.style.overflow;
+    const shouldFreeze = showOptions || chipOptionList;
+    if (shouldFreeze) {
+      scrollContainer.style.overflow = 'hidden';
+    } else {
+      scrollContainer.style.overflow = originalOverflow || 'auto';
+    }
+    return () => {
+      scrollContainer.style.overflow = originalOverflow || 'auto';
+    };
+  }, [showOptions, chipOptionList]);
   return jsxRuntime.jsxs("section", {
     className: "main-section",
     children: [jsxRuntime.jsxs("div", {
@@ -34631,7 +34733,8 @@ const NlpInput = ({
         chipOptionList: chipOptionList,
         selectedChips: selectedChips,
         optionZIndex: optionZIndex,
-        ref: ChipRef
+        ref: ChipRef,
+        inputRef: InputRef
       })
     })]
   });
@@ -41892,6 +41995,7 @@ const Spreadsheet = props => {
           setMaxWidth(Math.min(rootRef.current.clientWidth, clientWidth));
         }
       }
+      removeSelect();
     }
   });
   const scrollOption = props.scroller;
@@ -42831,9 +42935,9 @@ const ExcelFile = ({
           scroller: scroller,
           showHider: showHider
         })
-      }), sheetBar === 'show' && jsxRuntime.jsxs("div", {
+      }), sheetBar !== 'hide' && jsxRuntime.jsxs("div", {
         className: "ff-excel-sheet-bar",
-        children: [sheetBarContextEnable && jsxRuntime.jsx("div", {
+        children: [sheetBar === 'show' && jsxRuntime.jsx("div", {
           className: "ff-excel-add-sheet-set",
           children: jsxRuntime.jsx(Tooltip, {
             title: "Add Sheet",
@@ -42867,9 +42971,11 @@ const ExcelFile = ({
               },
               suppressContentEditableWarning: editingSheet === index,
               onDoubleClick: e => {
-                setEditingSheet(index);
-                if (editingSheet === null) {
-                  setTimeout(() => setCursorToEnd(e.target), 0);
+                if (sheetBar === 'show') {
+                  setEditingSheet(index);
+                  if (editingSheet === null) {
+                    setTimeout(() => setCursorToEnd(e.target), 0);
+                  }
                 }
               },
               contentEditable: editable && editingSheet === index,
@@ -46276,19 +46382,6 @@ const SessionDropdown = ({
   });
 };
 
-const formatCellData = (content, maxLength) => {
-  if (typeof content === 'string') {
-    return truncateText(content, maxLength);
-  }
-  if (/*#__PURE__*/React.isValidElement(content)) {
-    return /*#__PURE__*/React.cloneElement(content, {}, formatCellData(content.props.children, maxLength));
-  }
-  if (Array.isArray(content)) {
-    return content.map(child => formatCellData(child, maxLength));
-  }
-  return content;
-};
-
 const TableHead = /*#__PURE__*/React.memo(({
   columnsData,
   rootNode,
@@ -46297,8 +46390,7 @@ const TableHead = /*#__PURE__*/React.memo(({
   selectedNode,
   tableHeaderBgColor,
   hideOnDisable,
-  transparentHeader,
-  scriptLengthTruncate = 25
+  transparentHeader
 }) => {
   // const hasDefaultValues = useMemo(
   //   () => columnsData.some(({ defaultValue }) => !!defaultValue),
@@ -46342,11 +46434,16 @@ const TableHead = /*#__PURE__*/React.memo(({
             value: rootNode.node.key,
             onChange: e => onCheckBoxChange(e, rootNode.node),
             disabled: rootNode.node.isDisabled
-          }), jsxRuntime.jsx("span", {
+          }), jsxRuntime.jsxs("span", {
             className: "tree-table-td-content-text",
-            children: jsxRuntime.jsx("span", {
-              children: formatCellData(prepareData(rootNode.node, col), scriptLengthTruncate)
-            })
+            children: [jsxRuntime.jsx("span", {
+              children: rootNode.node[col.accessor]
+            }), rootNode.cell && index === 0 && jsxRuntime.jsx("span", {
+              className: "table-tree-root-cell",
+              children: (() => {
+                return rootNode.cell(rootNode.node);
+              })()
+            })]
           }), rootNode.actions && index === 0 && isMounted && rootNodeRowRef.current && jsxRuntime.jsx("div", {
             className: "table-tree-row-action",
             children: (() => {
@@ -46458,6 +46555,19 @@ const addNewRow = (treeData, newNode, rootNode) => {
   return addLastChild(updatedTreeData);
 };
 
+const formatCellData = (content, maxLength) => {
+  if (typeof content === 'string') {
+    return truncateText(content, maxLength);
+  }
+  if (/*#__PURE__*/React.isValidElement(content)) {
+    return /*#__PURE__*/React.cloneElement(content, {}, formatCellData(content.props.children, maxLength));
+  }
+  if (Array.isArray(content)) {
+    return content.map(child => formatCellData(child, maxLength));
+  }
+  return content;
+};
+
 const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
   let siblingsArray = parentSiblings;
   let isLastNode = isLast;
@@ -46731,7 +46841,8 @@ const TableTreeFn = /*#__PURE__*/React.forwardRef(({
   disableEditLabelConfirmIcon = false,
   transparentHeader = false,
   navigateTreeNode = null,
-  handleRemoveNavigateTreeNode = () => {}
+  handleRemoveNavigateTreeNode = () => {},
+  scrollThreshold = 128 // this is the  Distance from edge to trigger the scroll below and above
 }, ref) => {
   const [expanding, setExpanding] = React.useState(null);
   const [scrollDirection, setScrollDirection] = React.useState(null); // this state will help to idenetify the direction during the pagination api call
@@ -46746,8 +46857,6 @@ const TableTreeFn = /*#__PURE__*/React.forwardRef(({
     direction: null
   });
   const scrollDebounceRef = React.useRef(null);
-  // this is the  Distance from edge to trigger the scroll below and above
-  const scrollThreshold = 128;
   // this is  loadMore  functions which will the trigger the pagination apis in platform
   const loadMoreAbove = React.useCallback(() => {
     if (loading || scrollDirection === 'above') return;
@@ -105569,12 +105678,12 @@ const handleTreeExpandAllCollapseAll = (data, key, rootNode, isExpanded, treeAct
   };
 };
 
-function togglePrePostConditions(data, isHide, isScript) {
+function toggleShowHideEntity(data, isHide, isScript) {
   if (!Array.isArray(data)) {
     throw new Error('Input data must be an array of TreeNode objects.');
   }
-  const hideTypeArray = isScript ? ['Script'] : ['PRE', 'POST'];
-  return data.map(node => hideTypeArray.includes(node.entityType ?? '') ? {
+  const hideTypeArray = isScript ? ['script', 'element', 'sharedelement', 'program_element', 'stepgroup', 'file', 'webservice_collection', 'workbench_request'] : ['pre', 'post'];
+  return data.map(node => hideTypeArray.includes(node.entityType?.toLowerCase() ?? '') ? {
     ...node,
     hide: isHide
   } : node);
@@ -112317,7 +112426,7 @@ exports.setStoreValue = setStoreValue;
 exports.throttle = throttle;
 exports.toCamelCase = toCamelCase;
 exports.toast = toast;
-exports.togglePrePostConditions = togglePrePostConditions;
+exports.toggleShowHideEntity = toggleShowHideEntity;
 exports.truncateText = truncateText;
 exports.updateTreeState = updateTreeState;
 exports.useBeforeUnload = useBeforeUnload;