pixel-react 1.13.52 → 1.13.54

package/lib/index.cjs

@@ -1938,6 +1938,18 @@ const Drawer = ({
       setDelayedOpen(false);
     }
   }, [isOpen]);
+  React.useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.key === 'Enter' && isOpen && primaryButtonProps?.onClick) {
+        console.log('Enter key pressed — triggering primary button action');
+        primaryButtonProps.onClick();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, primaryButtonProps]);
   const drawerSize = isExpanded ? 'x-large' : size;
   const themeContext = React.useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -2651,7 +2663,11 @@ const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
         as: "p",
         className: "no-options",
         onClick: handleIconClick,
-        children: [searchedKeyword, " add label"]
+        children: [searchedKeyword, ' ', jsxRuntime.jsx(Typography, {
+          as: "span",
+          color: 'var(--brand-color)',
+          children: "add label"
+        })]
       }) : jsxRuntime.jsx(Typography, {
         textAlign: "center",
         as: "p",
@@ -2939,7 +2955,7 @@ const MultiSelect = ({
         overflowY,
         overflowX
       } = window.getComputedStyle(parent);
-      if (/(auto|scroll|overlay)/.test(overflowY) && parent.scrollHeight > parent.clientHeight || /(auto|scroll|overlay)/.test(overflowX) && parent.scrollWidth > parent.clientWidth) {
+      if (/(auto|scroll|overlay)/.test(overflowY) || /(auto|scroll|overlay)/.test(overflowX) && parent.scrollWidth > parent.clientWidth) {
         return parent;
       }
       parent = parent.parentElement;
@@ -3501,6 +3517,8 @@ const Input$1 = /*#__PURE__*/React.forwardRef(({
   handleSearchIconClick,
   readOnly = false,
   adjustToValidRange = true,
+  pattern,
+  background,
   ...props
 }, ref) => {
   const isValueFilled = !checkEmpty(value);
@@ -3630,6 +3648,9 @@ const Input$1 = /*#__PURE__*/React.forwardRef(({
           children: label
         })]
       }), jsxRuntime.jsx("input", {
+        style: {
+          background: background || 'transparent'
+        },
         readOnly: readOnly,
         ref: ref,
         name: name,
@@ -4016,7 +4037,12 @@ const Dropdown$1 = /*#__PURE__*/React.forwardRef(({
       marginLeft: showIcon ? '-29px' : '-2px'
     };
   };
-  const getOptionLabel = (label, icon) => {
+  const dropdownWidth = updateDropdownPosition().width;
+  const basePadding = 16;
+  const iconPadding = showIcon ? 32 : 0;
+  // If custom recurrence modal is shown, the dropdown is likely split into two columns.
+  const effectiveContentWidth = customReccurenece ? (typeof dropdownWidth === 'number' ? dropdownWidth / 2 : 0) - basePadding - iconPadding : dropdownWidth - basePadding - iconPadding;
+  const getOptionLabel = (label, icon, tooltipWidth) => {
     if (/*#__PURE__*/React.isValidElement(label)) {
       return label;
     }
@@ -4034,7 +4060,7 @@ const Dropdown$1 = /*#__PURE__*/React.forwardRef(({
         }),
         children: jsxRuntime.jsx(TruncatedTooltip, {
           title: label,
-          width: updateDropdownPosition()?.width
+          width: tooltipWidth
         })
       })]
     });
@@ -4067,7 +4093,7 @@ const Dropdown$1 = /*#__PURE__*/React.forwardRef(({
           if ('disable' in option && option['disable']) return;
           onSelectOptionSelector(option);
         },
-        children: getOptionLabel(getLabel(option, labelAccessor), 'iconName' in option && option['iconName'])
+        children: getOptionLabel(getLabel(option, labelAccessor), 'iconName' in option && option['iconName'], effectiveContentWidth)
       }, index)) : jsxRuntime.jsx(Typography, {
         textAlign: "center",
         as: "div",
@@ -4406,6 +4432,9 @@ const Select$1 = ({
         fontSize: searchedText || showDropdownOptions ? 10 : 12,
         lineHeight: searchedText || showDropdownOptions ? '10px' : '12px',
         required: required,
+        style: {
+          maxWidth: `calc(${selectWidth} - 40px)`
+        },
         children: label
       })]
     }), errorMsg && jsxRuntime.jsx(Typography, {
@@ -4746,7 +4775,7 @@ const OptionCard = ({
     },
     ref: optionCardRef,
     children: options.map(opt => !opt.hide && jsxRuntime.jsx(Tooltip, {
-      title: opt?.tooltipForOption ? opt?.tooltipForOption : opt?.label,
+      title: opt?.tooltipForOption ? opt?.tooltipForOption : '',
       placement: opt?.tooltipPlacementForOption,
       children: jsxRuntime.jsx(Option$1, {
         option: opt,
@@ -4775,7 +4804,8 @@ const MenuOption = ({
   treeRowRef,
   isAddResourceButton,
   disabled,
-  alignOption = 'left'
+  alignOption = 'left',
+  displayCard = true
 }) => {
   const [isClicked, setIsClicked] = React.useState(false);
   const menuRef = React.useRef(null);
@@ -4869,7 +4899,7 @@ const MenuOption = ({
         className: "ff-icon-label",
         children: [jsxRuntime.jsx("div", {
           className: classNames('ff-menuicon-container', {
-            'ff-menuicon-container-clicked': isClicked,
+            'ff-menuicon-container-clicked': isClicked && displayCard,
             dark: variant === 'dark',
             'ff-menuicon-container-add-resource': isAddResourceButton
           }),
@@ -4885,14 +4915,14 @@ const MenuOption = ({
             width: iconSize,
             name: iconName,
             disabled: disabled,
-            color: isClicked === (variant === 'dark') ? 'var(--menu-option-icon-clicked)' : 'var(--menu-option-icon-color)'
+            color: displayCard ? isClicked === (variant === 'dark') ? 'var(--menu-option-icon-clicked)' : 'var(--menu-option-icon-color)' : 'var(--menu-option-icon-clicked)'
           })
         }), labelName && jsxRuntime.jsx(Typography, {
           as: "label",
           children: labelName
         })]
       })
-    }), isClicked && jsxRuntime.jsx(OptionCard, {
+    }), isClicked && displayCard && jsxRuntime.jsx(OptionCard, {
       options: options,
       onClick: handleOptionClick,
       menuPosition: menuPosition,
@@ -10442,7 +10472,11 @@ const useFileDropzone = options => {
     }
     const accepted = [];
     const rejected = [];
-    droppedOrSelectedFiles.forEach(file => {
+    for (const file of droppedOrSelectedFiles) {
+      if (maxFiles && files.accepted.length + accepted.length >= maxFiles) {
+        if (onMaxFilesError) onMaxFilesError();
+        break;
+      }
       const errors = validateFile(file);
       if (!checkEmpty(errors)) {
         rejected.push({
@@ -10452,7 +10486,7 @@ const useFileDropzone = options => {
       } else {
         accepted.push(file);
       }
-    });
+    }
     setFiles(prevFiles => ({
       accepted: [...prevFiles.accepted, ...accepted.filter(newFile => !prevFiles.accepted.some(file => file.name === newFile.name && getExtensionWithPeriod(file) === getExtensionWithPeriod(newFile)))],
       rejected: [...prevFiles.rejected, ...rejected.filter(newFile => !prevFiles.rejected.some(file => file.file.name === newFile.file.name && getExtensionWithPeriod(file.file) === getExtensionWithPeriod(newFile.file)))]
@@ -10463,7 +10497,7 @@ const useFileDropzone = options => {
       event.target.value = '';
     }
     if (onDrop) onDrop(accepted, rejected, event);
-  }, [maxFiles, validateFile, onMaxFilesError, onDrop]);
+  }, [maxFiles, validateFile, onMaxFilesError, onDrop, files.accepted]);
   const handleDragOver = React.useCallback(event => {
     event.preventDefault();
     setIsDragActive(true);
@@ -10475,7 +10509,7 @@ const useFileDropzone = options => {
     onDragOver: handleDragOver,
     onDragLeave: handleDragLeave,
     onDrop: handleDrop
-  }), [handleDragOver, handleDragLeave, handleDrop, isDragActive]);
+  }), [handleDragOver, handleDragLeave, handleDrop]);
   const getInputProps = React.useCallback(() => ({
     type: 'file',
     onChange: handleDrop,
@@ -15621,6 +15655,7 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
   onInputBlurHandler,
   onClick,
   onKeyUp,
+  onKeyDown = () => {},
   onFocus,
   optionsRequired = true,
   dropdownPosition = 'right',
@@ -15687,6 +15722,7 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
           disabled: disabled,
           onClick: onClick,
           onKeyUp: onKeyUp,
+          onKeyDown: onKeyDown,
           onFocus: onFocus,
           className: classNames('ff-floating-input', {
             'ff-floating-input--filled': isValueFilled,
@@ -16080,7 +16116,9 @@ const OverviewModal = ({
 }) => {
   const [videos, setVideos] = React.useState(multiData);
   React.useEffect(() => {
-    setVideos(multiData);
+    if (!checkEmpty(multiData)) {
+      setVideos(multiData);
+    }
   }, [multiData]);
   React.useEffect(() => {
     const handleKeyDown = event => {
@@ -16193,7 +16231,8 @@ const TableHead = /*#__PURE__*/React.memo(({
   onCheckBoxChange,
   selectedNode,
   tableHeaderBgColor,
-  hideOnDisable
+  hideOnDisable,
+  transparentHeader
 }) => {
   // const hasDefaultValues = useMemo(
   //   () => columnsData.some(({ defaultValue }) => !!defaultValue),
@@ -16215,7 +16254,7 @@ const TableHead = /*#__PURE__*/React.memo(({
         className: "ff-table-tree-th",
         style: {
           width: width,
-          backgroundColor: tableHeaderBgColor
+          backgroundColor: transparentHeader ? 'transparent' : tableHeaderBgColor
         },
         children: name
       }, name))
@@ -16409,6 +16448,7 @@ const EditLabel = ({
   const confirmRef = React.useRef(null);
   const isThrowingError = showError && isEditing ? true : false;
   const inputRef = React.useRef(null);
+  const dropdownRef = React.useRef(null);
   const isValueFilled = !checkEmpty(text);
   const handleTextFieldChange = e => {
     const newValue = e.target.value;
@@ -16478,6 +16518,11 @@ const EditLabel = ({
     if (onCancel) onCancel();
     setIsEditable && setIsEditable(null);
   };
+  const handleOutsideClick = () => {
+    if (!isEditing || !containerRef.current) return;
+    handleCancel();
+  };
+  useClickOutside(containerRef, handleOutsideClick, [confirmRef, cancelRef, dropdownRef]);
   const handleCancel = () => {
     if (isDisable.cancel) return;
     if (required && !value) {
@@ -16564,6 +16609,8 @@ const EditLabel = ({
               children: label
             })]
           }), jsxRuntime.jsx("input", {
+            ref: inputRef,
+            id: "add-module-input",
             name: "add-module-input",
             type: "text",
             className: classNames('ff-add-module-input', {
@@ -16576,10 +16623,10 @@ const EditLabel = ({
             disabled: isDisable.textField,
             onKeyDown: handleKeyDown,
             autoFocus: true,
-            autoComplete: "off",
-            ref: inputRef
+            autoComplete: "off"
           })]
         }), withDropdown && jsxRuntime.jsx(Select$1, {
+          dropDownRef: dropdownRef,
           optionsList: optionsList,
           selectedOption: currentSelectedOption,
           showLabel: false,
@@ -16955,7 +17002,8 @@ const TreeTable = /*#__PURE__*/React.forwardRef(({
   addModuleInputWidth = 150,
   addModuleSelectWidth,
   onScroll,
-  disableEditLabelConfirmIcon = false
+  disableEditLabelConfirmIcon = false,
+  transparentHeader = false
 }, ref) => {
   const [expanding, setExpanding] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(null);
@@ -17111,7 +17159,8 @@ const TreeTable = /*#__PURE__*/React.forwardRef(({
           selected: selected,
           selectedNode: selectedNode,
           tableHeaderBgColor: tableHeaderBgColor,
-          hideOnDisable: hideOnDisable
+          hideOnDisable: hideOnDisable,
+          transparentHeader: transparentHeader
         }), jsxRuntime.jsx(TableBody, {
           flattenedTreeData: addLastChild(treeData),
           rootNode: rootNode?.node,
@@ -17524,7 +17573,8 @@ const Search = ({
           children: jsxRuntime.jsx(Icon, {
             name: "search",
             height: isExpand ? 14 : 16,
-            width: isExpand ? 14 : 16
+            width: isExpand ? 14 : 16,
+            disabled: disabled
           })
         })
       }), jsxRuntime.jsx("div", {
@@ -29597,8 +29647,8 @@ const AllProjectsDropdown = ({
             lineHeight: '30px',
             className: "ff-projects-label",
             children: jsxRuntime.jsx(Tooltip, {
-              title: option.label.length > 25 ? option.label : '',
-              children: option.label.length < 25 ? option.label : truncateText(option.label, 25)
+              title: isTextTruncated(option.label, 165, 'pixel') ? option.label : '',
+              children: truncateText(option.label, 165, 'pixel')
             })
           }, index)]
         }, index))
@@ -29934,119 +29984,6 @@ const clearStore = () => {
   }
 };
 
-/**
- * @internal
- */
-const SkeletonThemeContext = /*#__PURE__*/React.createContext({});
-
-/* eslint-disable react/no-array-index-key */
-const defaultEnableAnimation = true;
-// For performance & cleanliness, don't add any inline styles unless we have to
-function styleOptionsToCssProperties({
-  baseColor,
-  highlightColor,
-  width,
-  height,
-  borderRadius,
-  circle,
-  direction,
-  duration,
-  enableAnimation = defaultEnableAnimation,
-  customHighlightBackground
-}) {
-  const style = {};
-  if (direction === 'rtl') style['--animation-direction'] = 'reverse';
-  if (typeof duration === 'number') style['--animation-duration'] = `${duration}s`;
-  if (!enableAnimation) style['--pseudo-element-display'] = 'none';
-  if (typeof width === 'string' || typeof width === 'number') style.width = width;
-  if (typeof height === 'string' || typeof height === 'number') style.height = height;
-  if (typeof borderRadius === 'string' || typeof borderRadius === 'number') style.borderRadius = borderRadius;
-  if (circle) style.borderRadius = '50%';
-  if (typeof baseColor !== 'undefined') style['--base-color'] = baseColor;
-  if (typeof highlightColor !== 'undefined') style['--highlight-color'] = highlightColor;
-  if (typeof customHighlightBackground === 'string') style['--custom-highlight-background'] = customHighlightBackground;
-  return style;
-}
-function Skeleton({
-  count = 1,
-  wrapper: Wrapper,
-  className: customClassName,
-  containerClassName,
-  containerTestId,
-  circle = false,
-  style: styleProp,
-  ...originalPropsStyleOptions
-}) {
-  var _a, _b, _c;
-  const contextStyleOptions = React.useContext(SkeletonThemeContext);
-  const propsStyleOptions = {
-    ...originalPropsStyleOptions
-  };
-  // DO NOT overwrite style options from the context if `propsStyleOptions`
-  // has properties explicity set to undefined
-  for (const [key, value] of Object.entries(originalPropsStyleOptions)) {
-    if (typeof value === 'undefined') {
-      delete propsStyleOptions[key];
-    }
-  }
-  // Props take priority over context
-  const styleOptions = {
-    ...contextStyleOptions,
-    ...propsStyleOptions,
-    circle
-  };
-  // `styleProp` has the least priority out of everything
-  const style = {
-    ...styleProp,
-    ...styleOptionsToCssProperties(styleOptions)
-  };
-  let className = 'react-loading-skeleton';
-  if (customClassName) className += ` ${customClassName}`;
-  const inline = (_a = styleOptions.inline) !== null && _a !== void 0 ? _a : false;
-  const elements = [];
-  const countCeil = Math.ceil(count);
-  for (let i = 0; i < countCeil; i++) {
-    let thisStyle = style;
-    if (countCeil > count && i === countCeil - 1) {
-      // count is not an integer and we've reached the last iteration of
-      // the loop, so add a "fractional" skeleton.
-      //
-      // For example, if count is 3.5, we've already added 3 full
-      // skeletons, so now we add one more skeleton that is 0.5 times the
-      // original width.
-      const width = (_b = thisStyle.width) !== null && _b !== void 0 ? _b : '100%'; // 100% is the default since that's what's in the CSS
-      const fractionalPart = count % 1;
-      const fractionalWidth = typeof width === 'number' ? width * fractionalPart : `calc(${width} * ${fractionalPart})`;
-      thisStyle = {
-        ...thisStyle,
-        width: fractionalWidth
-      };
-    }
-    const skeletonSpan = /*#__PURE__*/React.createElement("span", {
-      className: className,
-      style: thisStyle,
-      key: i
-    }, "\u200C");
-    if (inline) {
-      elements.push(skeletonSpan);
-    } else {
-      // Without the <br />, the skeleton lines will all run together if
-      // `width` is specified
-      elements.push(/*#__PURE__*/React.createElement(React.Fragment, {
-        key: i
-      }, skeletonSpan, /*#__PURE__*/React.createElement("br", null)));
-    }
-  }
-  return /*#__PURE__*/React.createElement("span", {
-    className: containerClassName,
-    "data-testid": containerTestId,
-    "aria-live": "polite",
-    "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation
-  }, Wrapper ? elements.map((el, i) => /*#__PURE__*/React.createElement(Wrapper, {
-    key: i
-  }, el)) : elements);
-}
-
 const AppHeader = ({
   logoIconName = 'fireflink_icon',
   width,
@@ -30076,7 +30013,6 @@ const AppHeader = ({
 }) => {
   const hiddenMenuRef = React.useRef(null);
   const hiddenQuickMenuRef = React.useRef(null);
-  const [isHidden, setIsHidden] = React.useState(true);
   const [projectArrayList, setProjectArrayList] = React.useState(projectsList);
   const [quickMenuItems, setQuickMenuItems] = React.useState([]);
   const [appHeaderHiddenMenuItems, setAppHeaderHiddenMenuItems] = React.useState([]);
@@ -30095,14 +30031,12 @@ const AppHeader = ({
     }
   }, [selectedMenu, selectedMenuItem]);
   const handleMenuClick = menuItem => {
-    setIsHidden(true);
     if (!disabled) {
       onMenuClick(menuItem);
       calculateVisibleItems();
     }
   };
   const handleSubMenuClick = subMenuItem => {
-    setIsHidden(true);
     if (!disabled) {
       onSubMenuClick(subMenuItem);
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
@@ -30120,21 +30054,18 @@ const AppHeader = ({
     if (projectItem?.value === projectDetails?.id && projectItem?.value !== 'All Projects') {
       return;
     }
-    setIsHidden(true);
     if (!disabled) {
       onProjectMenuClick(projectItem);
       calculateVisibleItems();
     }
   };
   const handleProjectDropdownLabelClick = () => {
-    setIsHidden(true);
     if (!disabled) {
       onProjectDropdownLabelClick();
       calculateVisibleItems();
     }
   };
   const handleMoreMenuOptionClick = option => {
-    setIsHidden(true);
     if (!disabled) {
       onMoreMenuOptionClick(option, calculateVisibleItems);
     }
@@ -30147,10 +30078,9 @@ const AppHeader = ({
   const calculateVisibleItems = React.useCallback(() => {
     if (!isClient && projectDetails?.id === 'All Projects' || !menuContainerRef.current) {
       setAppHeaderHiddenMenuItems([]);
-      if (isHidden) setIsHidden(false);
       return;
     }
-    const containerWidth = isClient ? 700 : 900;
+    const containerWidth = isClient ? 700 : 950;
     let totalWidth = 0;
     const hiddenItems = [];
     const sortedMenuItems = [...appHeaderMenuItems];
@@ -30178,14 +30108,13 @@ const AppHeader = ({
       value: item.path,
       icon: item?.iconName
     })));
-    if (isHidden) setIsHidden(false);
-  }, [appHeaderMenuItems, selectedMenuItem, selectedMenu, selectedSubMenu, selectedQuickMenu, isHidden]);
+  }, [appHeaderMenuItems, selectedMenuItem, selectedMenu, selectedSubMenu, selectedQuickMenu]);
   React.useEffect(() => {
     const timer = setTimeout(() => {
       calculateVisibleItems();
     }, 800);
     return () => clearTimeout(timer);
-  }, [projectDetails?.id, selectedMenuItem, scriptId, quickMenuItems, isHidden]);
+  }, [projectDetails?.id, selectedMenuItem, scriptId, quickMenuItems]);
   const checkIsHavingEntityPendingCounts = data => {
     if (data.label === 'Approval Request' && data.entityPendingCounts) {
       return Object.values(data.entityPendingCounts).some(count => count > 0);
@@ -30239,26 +30168,11 @@ const AppHeader = ({
           className: "ff-app-header-left-content",
           children: leftContent
         })]
-      }), isHidden && jsxRuntime.jsx("div", {
-        className: "ff-app-header-nav-bar-skeleton",
-        style: {
-          width: width,
-          display: isHidden ? 'flex' : 'none'
-        },
-        children: [...Array(projectDetails?.id === 'All Projects' ? 5 : 8)].map((_, idx) => jsxRuntime.jsx(Skeleton, {
-          width: 80,
-          height: 22,
-          style: {
-            marginRight: 16,
-            borderRadius: 20,
-            opacity: 0.5
-          }
-        }, idx))
       }), jsxRuntime.jsxs("div", {
         className: "ff-app-header-nav-bar",
         style: {
           width: width,
-          visibility: checkEmpty(appHeaderMenuItems) && projectDetails?.id === 'All Projects' || isHidden || hideNavbar ? 'hidden' : 'visible',
+          visibility: checkEmpty(appHeaderMenuItems) && projectDetails?.id === 'All Projects' || hideNavbar ? 'hidden' : 'visible',
           position: 'relative',
           zIndex: 1
         },
@@ -31065,9 +30979,7 @@ const DashboardDonutChart = ({
                 children: legendData?.map(item => jsxRuntime.jsxs("tr", {
                   className: "ff-legend-item",
                   onMouseEnter: () => {
-                    if (toNumber(item.value) > 0) {
-                      setHoveredItemIndex(item.originalIndex);
-                    }
+                    setHoveredItemIndex(item.originalIndex);
                   },
                   onMouseLeave: () => setHoveredItemIndex(null),
                   children: [jsxRuntime.jsxs("td", {
@@ -31087,7 +30999,7 @@ const DashboardDonutChart = ({
                     })]
                   }), jsxRuntime.jsx("td", {
                     className: "ff-legend-percentage",
-                    children: item.percentage ? item.percentage : typeof item.value === 'string' ? (parseFloat(item.value) / total * 100).toFixed(1) : total === 0 ? 0 : (item.value / total * 100).toFixed(1)
+                    children: item.percentage ? item.percentage : typeof item.value === 'string' ? Math.round(parseFloat(item.value) / total * 100) : total === 0 ? 0 : Math.round(item.value / total * 100)
                   }), jsxRuntime.jsx("td", {
                     className: "ff-legend-count",
                     children: item.value
@@ -31198,7 +31110,7 @@ const DashboardDonutChart = ({
               style: {
                 fontSize: `${labelFontSize}px`
               },
-              children: wrapText(legendType === 'tableLegend' && hoveredItemIndex !== null && chartValues.find(item => item.originalIndex === hoveredItemIndex) ? `${((chartValues.find(item => item.originalIndex === hoveredItemIndex)?.value || 0) / total * 100).toFixed(1)}%` : legendType === 'memoryLegend' ? `${totalMemory}` : isOnClick && hoveredItemIndex !== null && chartValues.find(item => item.originalIndex === hoveredItemIndex)?.value ? `${chartValues.find(item => item.originalIndex === hoveredItemIndex)?.value}` : `${Number.isInteger(total) ? total : total?.toFixed(2)} ${showUnit && unit ? unit.toUpperCase() : ''}`, LABEL_MAX_WIDTH, labelFontSize).map((line, index) => jsxRuntime.jsx("tspan", {
+              children: wrapText(legendType === 'tableLegend' && hoveredItemIndex !== null && chartValues.find(item => item.originalIndex === hoveredItemIndex) ? `${Math.round((chartValues.find(item => item.originalIndex === hoveredItemIndex)?.value || 0) / total * 100)}%` : legendType === 'memoryLegend' ? `${totalMemory}` : isOnClick && hoveredItemIndex !== null && chartValues.find(item => item.originalIndex === hoveredItemIndex)?.value ? `${chartValues.find(item => item.originalIndex === hoveredItemIndex)?.value}` : `${Number.isInteger(total) ? total : total?.toFixed(2)} ${showUnit && unit ? unit.toUpperCase() : ''}`, LABEL_MAX_WIDTH, labelFontSize).map((line, index) => jsxRuntime.jsx("tspan", {
                 x: "0",
                 dy: index === 0 ? 0 : labelFontSize,
                 children: selectedItemIndex !== null && chartValues.find(item => item.originalIndex === selectedItemIndex) ? index === 0 ? chartValues.find(item => item.originalIndex === selectedItemIndex)?.value : null : apiDataLabel ? apiDataLabel : line
@@ -33843,7 +33755,10 @@ const MachineInputField = ({
     safari: 'safari_icon',
     opera: 'opera',
     windows: 'windows',
-    edge: 'edge'
+    edge: 'edge',
+    firefox: 'fire_fox',
+    chrome: 'chrome_icon',
+    explorer: 'internet_explorer'
   };
   const isManualScript = scriptType.toLowerCase() === 'manual';
   return jsxRuntime.jsxs("div", {
@@ -34577,7 +34492,10 @@ const AttachmentButton = ({
       onClick: onFileListClick,
       children: [jsxRuntime.jsx(Typography, {
         color: "var(--brand-color)",
-        children: truncateText(file.name, truncateMaxLimit, 'pixel')
+        children: jsxRuntime.jsx(TruncatedTooltip, {
+          title: file.name,
+          width: truncateMaxLimit
+        })
       }), deleteButton && jsxRuntime.jsx(Tooltip, {
         title: "Delete",
         children: jsxRuntime.jsx(Icon, {
@@ -35561,10 +35479,9 @@ function mutableSet(point, value, matrix) {
 //   nextMatrix[point.row] = nextRow;
 //   return nextMatrix;
 // }
-const convertPxToPt$1 = px => {
-  const numericPx = parseFloat(px.replace('px', ''));
-  const pt = numericPx / 1.33;
-  return pt;
+const convertPtToPx$1 = pt => {
+  const px = pt * 1.33;
+  return `${px}px`;
 };
 const EmptyCell$1 = {
   value: '',
@@ -35584,7 +35501,7 @@ const EmptyCell$1 = {
     borderLeft: `1px solid var(--excel-header-border)`,
     borderTop: `1px solid var(--excel-header-border)`,
     borderBottom: `1px solid var(--excel-header-border)`,
-    fontSize: `${convertPxToPt$1('9')}`,
+    fontSize: `${convertPtToPx$1(9)}`,
     fontWeight: 'normal',
     fontStyle: 'normal',
     fontFamily: 'Poppins',
@@ -35717,11 +35634,11 @@ function pad(matrix, size) {
   let padded = [...matrix];
   if (resultSize.columns > columns) {
     const padColumns = resultSize.columns - columns;
-    padded = padded.map(row => [...row, ...Array(padColumns).fill(undefined)]);
+    padded = padded.map(row => [...row, ...Array(padColumns).fill(EmptyCell$1)]);
   }
   if (resultSize.rows > rows) {
     const padRows = resultSize.rows - rows;
-    const emptyRow = Array(resultSize.columns).fill(undefined);
+    const emptyRow = Array(resultSize.columns).fill(EmptyCell$1);
     padded = [...padded, ...Array(padRows).fill(emptyRow)];
   }
   return padded;
@@ -40175,7 +40092,8 @@ const ActiveCell = props => {
       buttonVariant: "tertiary",
       deleteButton: true,
       addAttachmentButton: true,
-      isInfoIconRequired: false
+      isInfoIconRequired: false,
+      truncateMaxLimit: dimensions.width - 60
     }) : mode === 'edit' && active ? jsxRuntime.jsx(DataEditor, {
       row: active.row,
       column: active.column,
@@ -42844,6 +42762,22 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
   const [showCreateVariableIcon, setShowCreateVariableIcon] = React.useState(false);
   const [filteredOptions, setFilteredOptions] = React.useState([]);
   const inputRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const [dropdownWidthPx, setDropdownWidthPx] = React.useState('auto');
+  React.useEffect(() => {
+    const inputContainer = containerRef.current?.querySelector('.ff-input-container');
+    if (!inputContainer) return;
+    const resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const width = `${entry.contentRect.width}px`;
+        setDropdownWidthPx(width);
+      }
+    });
+    resizeObserver.observe(inputContainer);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
   React.useImperativeHandle(ref, () => inputRef.current);
   React.useEffect(() => {
     if (cursorPosition !== null && inputRef.current) {
@@ -42973,6 +42907,7 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
     className: "ff-add-variable-container",
     children: [jsxRuntime.jsxs("div", {
       className: "ff-add-variable-input",
+      ref: containerRef,
       children: [jsxRuntime.jsx(Input$1, {
         ...props,
         name: "add_variable",
@@ -43027,7 +42962,7 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
       position: "absolute",
       zIndex: zIndex,
       truncateTextValue: truncateTextValue,
-      width: dropdownWidth,
+      width: dropdownWidthPx,
       height: dropdownHeight,
       optionsList: variableList.filter(file => file.name.toLowerCase().includes(result?.searchString)),
       onSelectVariable: handleDropdownClick
@@ -43035,7 +42970,7 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
       position: "relative",
       zIndex: zIndex,
       truncateTextValue: truncateTextValue,
-      width: dropdownWidth,
+      width: dropdownWidthPx,
       filteredOptions: filteredOptions,
       onSelectVariable: handleDropdownClick
     })]
@@ -56511,6 +56446,8 @@ const Editor = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const editorRef = React.useRef(null);
   const decorationsRef = React.useRef([]);
+  const varRef = React.useRef(null);
+  const filterVarRef = React.useRef(null);
   const [currentLine, setCurrentLine] = React.useState(0);
   const [showDropdown, setShowDropdown] = React.useState(false);
   const [dropdownPosition, setDropdownPosition] = React.useState({
@@ -56531,19 +56468,21 @@ const Editor = /*#__PURE__*/React.forwardRef(({
       if (!position || !model) return;
       const currentLineContent = model.getLineContent(position.lineNumber);
       const columnIndex = position.column - 2;
-      if (currentLineContent[columnIndex] === '$') {
-        const match = currentLineContent.match(/ff\.(GLOBAL|PROJECT_ENVIRONMENT)\.(get|set)\(\$/);
-        if (isRequisiteType) {
-          editor.executeEdits('', [{
-            range: new monaco.Range(position.lineNumber, position.column - 1, position.lineNumber, position.column),
-            text: ''
-          }]);
-        }
-        if (match) {
-          const variableScope = match[1];
-          setFilteredVariableOptions(variableOptionsList.filter(v => v.type === variableScope));
+      if (currentLineContent[varRef.current ?? columnIndex] === '$') {
+        if (varRef.current === null) {
+          varRef.current = columnIndex;
+        }
+        filterVarRef.current = currentLineContent.slice(varRef.current + 1, columnIndex);
+        const filteredVariable = variableOptionsList.filter(e => e?.name.toLowerCase().includes(filterVarRef.current?.toLowerCase()));
+        if (filteredVariable.length) {
+          setFilteredVariableOptions(filteredVariable);
         } else {
-          setFilteredVariableOptions(variableOptionsList);
+          setFilteredVariableOptions([]);
+          if (varRef?.current !== columnIndex && currentLineContent[columnIndex] === ' ') {
+            varRef.current = null;
+            filterVarRef.current = null;
+            setShowDropdown(false);
+          }
         }
         const visiblePosition = editor.getScrolledVisiblePosition(position);
         const editorDomNode = editor.getDomNode();
@@ -56557,15 +56496,15 @@ const Editor = /*#__PURE__*/React.forwardRef(({
         const dropdownHeight = 150;
         let dropdownTop = top;
         let dropdownLeft = left;
-        if (dropdownTop + dropdownHeight > editorHeight) {
-          dropdownTop -= dropdownHeight;
+        if (dropdownTop + dropdownHeight > editorHeight - dropdownHeight + 100) {
+          dropdownTop -= Math.floor(dropdownHeight / 2) + dropdownHeight + 25;
         } else {
-          dropdownTop += 20;
+          dropdownTop -= 5;
         }
         if (left > editorRect.width * 0.75) {
-          dropdownLeft -= 150;
-        } else if (left < editorRect.width * 0.25) {
-          dropdownLeft += 20;
+          dropdownLeft -= dropdownHeight;
+        } else if (left < editorRect.width * 0.5 + dropdownHeight) {
+          dropdownLeft = dropdownLeft + 35;
         }
         setDropdownPosition({
           top: dropdownTop,
@@ -56574,6 +56513,8 @@ const Editor = /*#__PURE__*/React.forwardRef(({
         setShowDropdown(true);
       } else {
         setShowDropdown(false);
+        varRef.current = null;
+        filterVarRef.current = null;
       }
     });
     // Detect paste events
@@ -56665,15 +56606,20 @@ const Editor = /*#__PURE__*/React.forwardRef(({
       const editor = editorRef.current;
       const position = editor.getPosition();
       if (position) {
+        const val = `{${type}${type === 'FLV_for:' ? '' : '_'}${suggestion}}`;
+        const currentPostion = varRef?.current ?? 0;
         editor.executeEdits('', [{
           range: {
             startLineNumber: position.lineNumber,
-            startColumn: position.column,
+            startColumn: currentPostion + 2,
             endLineNumber: position.lineNumber,
-            endColumn: position.column
+            endColumn: currentPostion + (position.column - currentPostion)
           },
-          text: `{${type}${type === 'FLV_for:' ? '' : '_'}${suggestion}}`
+          text: val,
+          forceMoveMarkers: true
         }]);
+        filterVarRef.current = null;
+        varRef.current = null;
         setShowDropdown(false);
       }
     }
@@ -56684,15 +56630,19 @@ const Editor = /*#__PURE__*/React.forwardRef(({
       const position = editor.getPosition();
       if (position) {
         const textToInsert = `'${option.name}'`;
+        const currentPostion = varRef?.current ?? 0;
         editor.executeEdits('', [{
           range: {
             startLineNumber: position.lineNumber,
-            startColumn: position.column,
+            startColumn: currentPostion + 1,
             endLineNumber: position.lineNumber,
-            endColumn: position.column
+            endColumn: currentPostion + (position.column - currentPostion)
           },
-          text: textToInsert
+          text: textToInsert,
+          forceMoveMarkers: true
         }]);
+        filterVarRef.current = null;
+        varRef.current = null;
         setShowDropdown(false);
       }
     } else {
@@ -56801,7 +56751,7 @@ const Editor = /*#__PURE__*/React.forwardRef(({
     }), showDropdown && dropdownPosition && showVariableDropdown && jsxRuntime.jsx(VariableDropdown, {
       position: "absolute",
       width: "300px",
-      height: "300px",
+      height: "210px",
       optionsList: filteredVariableOptions,
       onSelectVariable: handleSelectVariable,
       dropdownPosition: dropdownPosition
@@ -109817,6 +109767,46 @@ const adapter$1 = adapterFactory({
   window: typeof window === 'undefined' ? undefined : window
 });
 
+const ScriptGenerationLoader = ({
+  actions = ['Analyzing', 'Gathering', 'Generating'],
+  width,
+  height,
+  path
+}) => {
+  const numberOfDivs = [1, 2, 3];
+  return jsxRuntime.jsxs("div", {
+    className: "loader-container",
+    style: {
+      width: `${width}%`,
+      height: `${height}%`
+    },
+    children: [jsxRuntime.jsx("div", {
+      className: "ff-moving-sections-container",
+      children: numberOfDivs?.map(order => {
+        return jsxRuntime.jsx("div", {
+          className: `ff-moving-section${order}`
+        });
+      })
+    }), jsxRuntime.jsxs("div", {
+      className: "ff-gif-container",
+      children: [jsxRuntime.jsx("div", {
+        className: "ff-typing-wrapper",
+        children: actions?.map((action, index) => jsxRuntime.jsxs(Typography, {
+          className: `ff-typing-text t${index + 1}`,
+          fontSize: 16,
+          fontWeight: "medium",
+          children: [action, "..."]
+        }, index))
+      }), jsxRuntime.jsx("img", {
+        height: 124,
+        width: 124,
+        alt: "generation",
+        src: path
+      })]
+    })]
+  });
+};
+
 exports.AADHAAR_REGEX = AADHAAR_REGEX;
 exports.ALPHABET_ONLY_REGEX = ALPHABET_ONLY_REGEX;
 exports.ALPHANUMERIC_REGEX = ALPHANUMERIC_REGEX;
@@ -109965,7 +109955,7 @@ exports.SCRIPT_REGEX = SCRIPT_REGEX;
 exports.SSN_REGEX = SSN_REGEX;
 exports.START_END_WHITESPACE_REGEX = START_END_WHITESPACE_REGEX;
 exports.STEP_GROUP_NAME_REGEX = STEP_GROUP_NAME_REGEX;
-exports.ScriptGenerationLoader = StepResultStats;
+exports.ScriptGenerationLoader = ScriptGenerationLoader;
 exports.ScriptSwitchButton = ScriptSwitchButton;
 exports.Search = Search;
 exports.Select = Select$1;