pixel-priya 1.1.21 → 1.1.22

package/lib/index.cjs

@@ -1723,7 +1723,8 @@ const Tooltip = ({
   children,
   placement = 'bottom',
   disabled = false,
-  style = {}
+  style = {},
+  as: Element = 'div'
 }) => {
   const [isVisible, setIsVisible] = React.useState(false);
   const titleRef = React.useRef(null);
@@ -1848,13 +1849,13 @@ const Tooltip = ({
       calculateDim();
     }
   }, [isVisible]);
-  return jsxRuntime.jsxs("div", {
+  return jsxRuntime.jsxs(Element, {
     ref: tooltipContainerRef,
     className: classNames('ff-tooltip-container', currentTheme),
     onMouseEnter: () => setIsVisible(true),
     onMouseLeave: () => setIsVisible(false),
     style: style,
-    children: [children, isVisible && !disabled && !isTitleEmpty(title) && /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsx("div", {
+    children: [children, isVisible && !disabled && !isTitleEmpty(title) && /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsx(Element, {
       ref: titleRef,
       style: {
         ...styles[finalPlacement]
@@ -2963,7 +2964,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;
@@ -3124,7 +3125,7 @@ const MultiSelect = ({
             children: label
           }), jsxRuntime.jsxs("div", {
             className: "ff-multiselect-chip-container",
-            children: [!withSelectButton && (displayAllSelectedAsText && selectedOptions.length === allOptions.length && labelAccessor !== 'name' ? jsxRuntime.jsx(ChipElement, {
+            children: [!withSelectButton && (displayAllSelectedAsText && selectedOptions.length === allOptions.length && !checkEmpty(allOptions) && labelAccessor !== 'name' ? jsxRuntime.jsx(ChipElement, {
               zIndex: zIndex,
               label: "All",
               onChipCloseClick: handleChipCloseAll,
@@ -4770,7 +4771,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,
@@ -16217,7 +16218,8 @@ const TableHead = /*#__PURE__*/React.memo(({
   onCheckBoxChange,
   selectedNode,
   tableHeaderBgColor,
-  hideOnDisable
+  hideOnDisable,
+  transparentHeader
 }) => {
   // const hasDefaultValues = useMemo(
   //   () => columnsData.some(({ defaultValue }) => !!defaultValue),
@@ -16239,7 +16241,7 @@ const TableHead = /*#__PURE__*/React.memo(({
         className: "ff-table-tree-th",
         style: {
           width: width,
-          backgroundColor: tableHeaderBgColor
+          backgroundColor: transparentHeader ? 'transparent' : tableHeaderBgColor
         },
         children: name
       }, name))
@@ -16433,6 +16435,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;
@@ -16502,6 +16505,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) {
@@ -16588,6 +16596,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', {
@@ -16600,10 +16610,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,
@@ -16979,7 +16989,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);
@@ -17135,7 +17146,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,
@@ -17228,6 +17240,7 @@ const BrowserTabs = ({
 }) => {
   const containerRef = React.useRef(null);
   const [tabWidth, setTabWidth] = React.useState();
+  const [failedIcons, setFailedIcons] = React.useState({});
   React.useEffect(() => {
     const updateTabWidth = () => {
       if (containerRef.current) {
@@ -17240,6 +17253,12 @@ const BrowserTabs = ({
     window.addEventListener('resize', updateTabWidth);
     return () => window.removeEventListener('resize', updateTabWidth);
   }, [tabsData.length, maxTabWidth]);
+  const handleIconError = tabId => {
+    setFailedIcons(prev => ({
+      ...prev,
+      [tabId]: true
+    }));
+  };
   return jsxRuntime.jsxs("div", {
     className: "ff-browser-tabs-container",
     ref: containerRef,
@@ -17268,12 +17287,13 @@ const BrowserTabs = ({
                 children: jsxRuntime.jsxs("div", {
                   className: "ff-tab-content",
                   children: [tabWidth && tabWidth >= 20 && (!isActive || tabWidth >= 80) && jsxRuntime.jsx(jsxRuntime.Fragment, {
-                    children: tab.tabIconSrc ? jsxRuntime.jsx("img", {
+                    children: tab.tabIconSrc && !failedIcons[tab.id] ? jsxRuntime.jsx("img", {
                       src: tab.tabIconSrc,
                       alt: tab.label,
-                      className: "ff-tab-icon"
-                    }) : tab.tabIcon && jsxRuntime.jsx(Icon, {
-                      name: tab.tabIcon,
+                      className: "ff-tab-icon",
+                      onError: () => handleIconError(tab.id)
+                    }) : jsxRuntime.jsx(Icon, {
+                      name: tab.tabIcon || "web_icon",
                       hoverEffect: false,
                       color: "inherit"
                     })
@@ -17540,7 +17560,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", {
@@ -29613,8 +29634,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))
@@ -29950,119 +29971,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,
@@ -30092,7 +30000,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([]);
@@ -30111,14 +30018,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);
@@ -30136,21 +30041,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);
     }
@@ -30163,10 +30065,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];
@@ -30194,14 +30095,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);
@@ -30255,26 +30155,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
         },
@@ -31081,9 +30966,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", {
@@ -31103,7 +30986,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
@@ -31214,7 +31097,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
@@ -34169,7 +34052,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", {
@@ -34903,7 +34789,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, {
@@ -35887,10 +35776,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: '',
@@ -35910,7 +35798,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',
@@ -36043,11 +35931,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;
@@ -40501,7 +40389,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,
@@ -56837,6 +56726,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({
@@ -56857,19 +56748,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();
@@ -56883,15 +56776,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,
@@ -56900,6 +56793,8 @@ const Editor = /*#__PURE__*/React.forwardRef(({
         setShowDropdown(true);
       } else {
         setShowDropdown(false);
+        varRef.current = null;
+        filterVarRef.current = null;
       }
     });
     // Detect paste events
@@ -56991,15 +56886,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);
       }
     }
@@ -57010,15 +56910,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 {
@@ -57127,7 +57031,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
@@ -115172,6 +115076,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.ScriptSwitchButton = ScriptSwitchButton;
 exports.Search = Search;
 exports.Select = Select$1;