pixel-react 1.13.64 → 1.13.66

package/lib/index.cjs

@@ -2419,9 +2419,11 @@ const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-
 // HTML Tags Validation
 const HTML_TAG_REGEX = /<\/?[\w\s=\"'\/\.:;#-]*>/g;
 // Whitespace Validation (Leading or Trailing)
-const WHITESPACE_REGEX = /^\s+|\s+$/g;
+const WHITESPACE_REGEX = /^\s|\s$/;
 // US ZIP Code Validation (5 or 9 digits)
 const US_ZIP_CODE_REGEX = /^\d{5}(-\d{4})?$/;
+// start and end whitespace is valid one.
+const BIG_END_WHITESPACE = /^\s|\s$/;
 // Username Validation (Alphanumeric, underscores, 3-16 characters)
 const USERNAME_REGEX = /^[a-zA-Z0-9_]{3,16}$/;
 // Indian Specific Validations
@@ -4298,13 +4300,13 @@ const Select$1 = ({
       fromBottom: 0,
       width: 0
     });
-    setSearchedOption({
-      searchedText: getValue$1(selectedOption, valueAccessor) || '',
-      searchedIcon: selectedOption.iconName || ''
-    });
+    setSelectOptionList(optionsList);
     if (inputRef?.current === document.activeElement) {
       inputRef?.current?.blur();
-      setSelectOptionList(optionsList);
+      setSearchedOption({
+        searchedText: getValue$1(selectedOption, valueAccessor) || '',
+        searchedIcon: selectedOption.iconName || ''
+      });
       setCustomRecurrence(false);
       onBlur();
     }
@@ -4441,7 +4443,7 @@ const Select$1 = ({
           'ff-select-labels__active': searchedText
         }),
         fontSize: searchedText || showDropdownOptions ? 10 : 12,
-        lineHeight: searchedText || showDropdownOptions && '12px',
+        lineHeight: searchedText || showDropdownOptions ? '10px' : '12px',
         required: required,
         style: {
           maxWidth: `calc(${selectWidth} - 40px)`
@@ -4933,7 +4935,7 @@ const MenuOption = ({
           children: labelName
         })]
       })
-    }), isClicked && displayCard && jsxRuntime.jsx(OptionCard, {
+    }), isClicked && displayCard && !checkEmpty(options) && jsxRuntime.jsx(OptionCard, {
       options: options,
       onClick: handleOptionClick,
       menuPosition: menuPosition,
@@ -15708,11 +15710,6 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
   rightDropDownPositionZindex
 }, ref) => {
   const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
-  const handleWheel = e => {
-    if (type === 'number') {
-      e.currentTarget.blur();
-    }
-  };
   return jsxRuntime.jsxs("div", {
     className: classNames('ff-input-with-dropdown-container', {
       'ff-input-with-dropdown-container--filled': isValueFilled
@@ -15772,7 +15769,6 @@ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
           onClick: onClick,
           onKeyUp: onKeyUp,
           onKeyDown: onKeyDown,
-          onWheel: handleWheel,
           onFocus: onFocus,
           className: classNames('ff-floating-input', {
             'ff-floating-input--filled': isValueFilled,
@@ -16296,7 +16292,7 @@ const TableHead = /*#__PURE__*/React.memo(({
   return jsxRuntime.jsxs("thead", {
     className: "ff-table-tree-head",
     children: [jsxRuntime.jsx("tr", {
-      className: "ff-table-tree-row",
+      className: "ff-table-tree-row no-hover",
       children: columnsData.map(({
         name,
         width
@@ -16493,6 +16489,7 @@ const EditLabel = ({
     error: false
   });
   const [currentSelectedOption, setCurrentSelectedOption] = React.useState(selectedOption);
+  const [shouldShowToast, setShouldShowToast] = React.useState(false);
   const containerRef = React.useRef(null);
   const cancelRef = React.useRef(null);
   const confirmRef = React.useRef(null);
@@ -16549,6 +16546,7 @@ const EditLabel = ({
     if (isDisable.confirm) return;
     const errorMessage = handleCustomError ? handleCustomError(text) : '';
     if (errorMessage) {
+      setShouldShowToast(true);
       handleToastToggle('error');
       setShowError(errorMessage);
     } else {
@@ -16575,6 +16573,7 @@ const EditLabel = ({
   useClickOutside(containerRef, handleOutsideClick, [confirmRef, cancelRef, dropdownRef]);
   const handleCancel = () => {
     if (isDisable.cancel) return;
+    setShouldShowToast(false);
     if (required && !value) {
       handleToastToggle('error');
       setShowError('Text is required.');
@@ -16768,7 +16767,7 @@ const EditLabel = ({
       fontSize: 8,
       className: "error-text",
       children: showError
-    }), !inlineValidationError && jsxRuntime.jsx(Toaster, {
+    }), !inlineValidationError && shouldShowToast && jsxRuntime.jsx(Toaster, {
       isOpen: toasts.error,
       variant: "info",
       toastTitle: "Info!",
@@ -33985,7 +33984,8 @@ const Branches = ({
       machineInfo: {
         osVersion,
         iconName,
-        osName
+        osName,
+        hostName
       },
       deviceInfo
     } = machineInstance;
@@ -34000,6 +34000,12 @@ const Branches = ({
       label: executionEnv,
       type: getEnvironment(executionEnv)
     }];
+    if (scriptType.toLowerCase() === 'manual') {
+      baseOptions.push({
+        label: hostName || '',
+        type: 'local'
+      });
+    }
     // Web-specific options
     const webOptions = [{
       label: osVersion,
@@ -40181,7 +40187,7 @@ const ActiveCell = props => {
       },
       value: cell?.value,
       disabled: false
-    }), jsxRuntime.jsx("div", {
+    }), !['file', 'dropDown'].includes(cell?.inputType?.type ?? '') && jsxRuntime.jsx("div", {
       onMouseDown: handleMouseDown,
       className: "select_dot"
     })]
@@ -41256,6 +41262,7 @@ const ExcelFile = ({
   scroller = false,
   columnContextEnable = true,
   rowContextEnable = true,
+  sheetBarContextEnable = true,
   minimumColumnWidth = 100,
   disableDeleteOption = false
 }) => {
@@ -41688,7 +41695,7 @@ const ExcelFile = ({
         })
       }), sheetBar === 'show' && jsxRuntime.jsxs("div", {
         className: "ff-excel-sheet-bar",
-        children: [jsxRuntime.jsx("div", {
+        children: [sheetBarContextEnable && jsxRuntime.jsx("div", {
           className: "ff-excel-add-sheet-set",
           children: jsxRuntime.jsx(Tooltip, {
             title: "Add Sheet",
@@ -41710,7 +41717,9 @@ const ExcelFile = ({
             children: jsxRuntime.jsx("div", {
               onContextMenu: event => {
                 handleSheetChange(name, index);
-                contextClick(event, name, index);
+                if (sheetBarContextEnable) {
+                  contextClick(event, name, index);
+                }
               },
               className: classNames('ff-excel-tab-list', {
                 active: name === selectedSheet.name
@@ -50766,7 +50775,7 @@ const BarChart = ({
         }), normalizedData.map((item, index) => {
           const computedBarHeight = item.normalizedValue / maxValue * height;
           const minBarHeight = 2;
-          const barHeight = item.normalizedValue === 0 ? minBarHeight : computedBarHeight;
+          const barHeight = item.normalizedValue < 1 ? minBarHeight : computedBarHeight;
           const barX = index * (barWidth + barGap) + leftPadding + padding;
           const barY = height - barHeight + topPadding;
           const iconWidth = iconSize || 20;
@@ -50917,9 +50926,26 @@ const MultiRadialChart = ({
     visible: false,
     x: 0,
     y: 0,
-    content: ''
+    content: '',
+    isArc: false
   });
   const [hoveredLegend, setHoveredLegend] = React.useState(null);
+  const renderGradients = () => jsxRuntime.jsx("defs", {
+    children: barValues.map((bar, i) => Array.isArray(bar.arcColor) ? jsxRuntime.jsx("linearGradient", {
+      id: `gradient-${i}`,
+      x1: "0%",
+      y1: "0%",
+      x2: "100%",
+      y2: "0%",
+      gradientTransform: "rotate(90)",
+      children: bar.arcColor.map((color, idx) => jsxRuntime.jsx("stop", {
+        offset: `${idx / (bar.arcColor.length - 1) * 100}%`,
+        stopColor: color
+      }, idx))
+    }, `gradient-${i}`) : null)
+  });
+  const getArcColor = (bar, index) => Array.isArray(bar.arcColor) ? `url(#gradient-${index})` : bar.arcColor;
+  const getLegendColor = bar => Array.isArray(bar.arcColor) ? bar.arcColor[0] : bar.arcColor;
   const parseValueToMB = value => {
     if (typeof value === 'string') {
       const match = value.trim().match(/^([\d.]+)\s*([a-zA-Z%]*)$/);
@@ -50978,17 +51004,18 @@ const MultiRadialChart = ({
             className: "ff-legend-item",
             onMouseEnter: e => {
               setHoveredLegend(item.barLabel || item.label);
-              handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`);
+              handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`, false);
             },
+            onMouseMove: handleMouseMove,
             onMouseLeave: () => {
               setHoveredLegend(null);
-              handleMouseLeave?.();
+              handleMouseLeave();
             },
             children: [jsxRuntime.jsx(Typography, {
               fontSize: 20,
               fontWeight: "semi-bold",
               className: "ff-legend-value",
-              color: item.arcColor,
+              color: getLegendColor(item),
               children: item.key.padStart(2, '0')
             }), jsxRuntime.jsx(Typography, {
               fontSize: 10,
@@ -51008,16 +51035,17 @@ const MultiRadialChart = ({
             className: "ff-legend-item",
             onMouseEnter: e => {
               setHoveredLegend(item.barLabel || item.label);
-              handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`);
+              handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`, false);
             },
+            onMouseMove: handleMouseMove,
             onMouseLeave: () => {
               setHoveredLegend(null);
-              handleMouseLeave?.();
+              handleMouseLeave();
             },
             children: [jsxRuntime.jsx("span", {
               className: "ff-legend-capsule",
               style: {
-                backgroundColor: item.arcColor
+                backgroundColor: getLegendColor(item)
               },
               children: jsxRuntime.jsx(Typography, {
                 fontSize: 10,
@@ -51035,17 +51063,17 @@ const MultiRadialChart = ({
         return null;
     }
   };
-  const handleMouseEnter = (e, content) => {
+  const handleMouseEnter = (e, content, isArc) => {
     const {
       clientX,
       clientY
     } = e;
-    const container = e.currentTarget.getBoundingClientRect();
     setTooltip({
       visible: true,
-      x: clientX - container.left,
-      y: clientY - container.top,
-      content: content
+      x: clientX,
+      y: clientY,
+      content: content,
+      isArc
     });
   };
   const handleMouseMove = e => {
@@ -51053,11 +51081,10 @@ const MultiRadialChart = ({
       clientX,
       clientY
     } = e;
-    const container = e.currentTarget.getBoundingClientRect();
     setTooltip(prev => ({
       ...prev,
-      x: clientX - container.left,
-      y: clientY - container.top
+      x: clientX,
+      y: clientY
     }));
   };
   const handleMouseLeave = () => {
@@ -51065,7 +51092,8 @@ const MultiRadialChart = ({
       visible: false,
       x: 0,
       y: 0,
-      content: ''
+      content: '',
+      isArc: false
     });
   };
   const textData = (text, maxLength) => {
@@ -51076,25 +51104,32 @@ const MultiRadialChart = ({
     const valueString = tooltip.content.split(':')[0]?.trim();
     if (valueString === undefined) return '';
     const matchingBar = normalizedBarValues.find(val => val.barLabel === valueString);
-    return matchingBar?.arcColor || '';
+    if (!matchingBar) return '';
+    const chartItem = {
+      ...matchingBar,
+      label: matchingBar.barLabel,
+      key: matchingBar.labelValue?.toString() ?? ''
+    };
+    return getLegendColor(chartItem);
   };
+  const DEFAULT_LINE_HEIGHT = 18;
   return jsxRuntime.jsxs("div", {
     className: `ff-multi-radial-chart-container ${legendType === 'numberLegend' ? 'ff-multi-radial-chart-number' : 'ff-multi-radial-chart-pill'}`,
     style: {
       gap: chartToLegendGap
     },
-    children: [jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsx("div", {
       className: "relative",
       style: {
         width: svgSize,
         height: svgSize
       },
-      children: [jsxRuntime.jsx("svg", {
+      children: jsxRuntime.jsxs("svg", {
         width: svgSize,
         height: svgSize,
         viewBox: `0 0 ${svgSize} ${svgSize}`,
         className: "absolute top-0 left-0",
-        children: jsxRuntime.jsxs("g", {
+        children: [renderGradients(), jsxRuntime.jsxs("g", {
           transform: `translate(${svgSize / 2 + 1}, ${svgSize / 2 + 1})`,
           children: [reversedBarValues.map((values, i) => {
             const originalIndex = normalizedBarValues.length - 1 - i;
@@ -51128,8 +51163,12 @@ const MultiRadialChart = ({
                   cx: dotX,
                   cy: dotY,
                   r: lineWidth + 1,
-                  fill: values.arcColor,
-                  onMouseEnter: e => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`),
+                  fill: getArcColor({
+                    ...values,
+                    label: values.barLabel || '',
+                    key: values.labelValue?.toString() || ''
+                  }, originalIndex),
+                  onMouseEnter: e => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`, true),
                   onMouseMove: handleMouseMove,
                   onMouseLeave: handleMouseLeave,
                   style: arcStyle
@@ -51148,10 +51187,14 @@ const MultiRadialChart = ({
               }), jsxRuntime.jsx("path", {
                 d: foregroundArcPath,
                 fill: "none",
-                stroke: values.arcColor,
+                stroke: getArcColor({
+                  ...values,
+                  label: values.barLabel || '',
+                  key: values.labelValue?.toString() || ''
+                }, originalIndex),
                 strokeWidth: lineWidth,
                 strokeLinecap: lineCap === 'square' ? 'butt' : 'round',
-                onMouseEnter: e => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`),
+                onMouseEnter: e => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`, true),
                 onMouseMove: handleMouseMove,
                 onMouseLeave: handleMouseLeave,
                 style: {
@@ -51193,7 +51236,7 @@ const MultiRadialChart = ({
                       children: firstWord
                     }), jsxRuntime.jsx("tspan", {
                       x: "0",
-                      dy: 18,
+                      dy: DEFAULT_LINE_HEIGHT,
                       style: {
                         fontSize: `${subLabelFontSize}px`
                       },
@@ -51204,7 +51247,7 @@ const MultiRadialChart = ({
                 }
                 return jsxRuntime.jsx("tspan", {
                   x: "0",
-                  dy: index === 0 ? 0 : 18,
+                  dy: index === 0 ? 0 : DEFAULT_LINE_HEIGHT,
                   className: "ff-center-text",
                   style: {
                     fontSize: `${subLabelFontSize}px`
@@ -51214,16 +51257,19 @@ const MultiRadialChart = ({
               })
             })
           })]
-        })
-      }), tooltip.visible && jsxRuntime.jsx("div", {
-        className: "ff-multi-radial-tooltip",
-        style: {
-          top: tooltip.y + 10,
-          left: tooltip.x + 100,
-          zIndex: 1000
-        },
-        children: tooltip.content
-      })]
+        })]
+      })
+    }), tooltip.visible && jsxRuntime.jsx("div", {
+      className: "ff-multi-radial-tooltip",
+      style: {
+        position: 'fixed',
+        top: `${tooltip.y - (tooltip.isArc ? 5 : -10)}px`,
+        left: `${tooltip.x + (tooltip.isArc ? 60 : 15)}px`,
+        zIndex: 1000,
+        transform: tooltip.isArc ? 'translateX(-50%)' : 'none',
+        pointerEvents: 'none'
+      },
+      children: tooltip.content
     }), isLegendDetails && renderLegend(normalizedBarValues.map(value => ({
       ...value,
       label: value?.barLabel,
@@ -59000,12 +59046,15 @@ const ChildComment = ({
                   })
                 }), isEditDeleteActionAllowed && deleteEnable && jsxRuntime.jsx("div", {
                   className: "action-icon",
-                  onClick: () => handleDeleteNode(comment.id),
                   children: jsxRuntime.jsx(Tooltip, {
                     title: "Delete",
                     children: jsxRuntime.jsx(Icon, {
                       name: "delete",
                       color: "var(--ff-delete-button-attachment)",
+                      onClick: () => {
+                        if (showInput) return;
+                        handleDeleteNode(comment.id);
+                      },
                       disabled: editMode || showInput || isDisable,
                       hoverEffect: true
                     })
@@ -59445,20 +59494,21 @@ const Comments = ({
   });
 };
 
-function useConditionalLock(fn, unlockCondition) {
-  const isLocked = React.useRef(false);
-  React.useEffect(() => {
-    if (unlockCondition) {
-      isLocked.current = false;
-    }
-  }, [unlockCondition]);
-  return React.useCallback((...args) => {
-    if (!isLocked.current) {
-      fn(...args);
-      isLocked.current = true;
-    }
-  }, [fn]);
-}
+const useTriggerControl = () => {
+  const canTriggerRef = React.useRef(true);
+  const canTrigger = () => canTriggerRef.current;
+  const setTriggered = () => {
+    canTriggerRef.current = false;
+  };
+  const resetTrigger = () => {
+    canTriggerRef.current = true;
+  };
+  return {
+    canTrigger,
+    setTriggered,
+    resetTrigger
+  };
+};
 
 const PopUpModal = ({
   isOpen,
@@ -74117,19 +74167,21 @@ function getUpdatedPartialSelect(tableData, prevPartialSelect) {
   return new Set([...prevPartialSelect].filter(id => allCurrentIds.has(id)));
 }
 function getUpdatedExpandedRows(tableData, prevExpandedRows, defaultExpanded) {
-  const needToExpand = {
+  const sectionTitlesToExpand = {
     Steps: 'Steps',
-    Depends: 'Depends on Script',
-    PRE: "Pre conditions",
-    POST: "Post conditions"
+    Depends: 'Depends on Scripts',
+    PRE: 'Pre Conditions',
+    POST: 'Post Conditions'
   };
   const newExpandedRows = {};
   tableData.forEach(section => {
-    newExpandedRows[section.title] = section.title in prevExpandedRows ? prevExpandedRows[section.title] ?? false : section.title === needToExpand[defaultExpanded];
+    const title = section.title;
+    const wasPreviouslyExpanded = title in prevExpandedRows;
+    const shouldExpandByDefault = defaultExpanded === 'All' ? Object.values(sectionTitlesToExpand).includes(title) : title === sectionTitlesToExpand[defaultExpanded];
+    newExpandedRows[title] = wasPreviouslyExpanded ? prevExpandedRows[title] ?? false : shouldExpandByDefault;
   });
   return newExpandedRows;
 }
-//?
 const gettingBlockMap = (tableData, selectedRows, stepPartialSelect) => {
   let dynamicUpdate = getBlockMap(tableData);
   const updatedSelectedRows = new Set(selectedRows.Steps);
@@ -110121,6 +110173,7 @@ exports.AttachMedia = AttachMedia;
 exports.AttachmentButton = AttachmentButton;
 exports.Avatar = Avatar;
 exports.BASE64_REGEX = BASE64_REGEX;
+exports.BIG_END_WHITESPACE = BIG_END_WHITESPACE;
 exports.BINARY_NUMBER_REGEX = BINARY_NUMBER_REGEX;
 exports.BODY_TAG_TYPE_VALIDATION = BODY_TAG_TYPE_VALIDATION;
 exports.BarChart = BarChart;
@@ -110343,8 +110396,8 @@ exports.truncateText = truncateText;
 exports.updateTreeState = updateTreeState;
 exports.useBeforeUnload = useBeforeUnload;
 exports.useClickOutside = useClickOutside;
-exports.useConditionalLock = useConditionalLock;
 exports.useFileDropzone = useFileDropzone;
 exports.useKeyboardActions = useKeyboardActions;
 exports.useTheme = useTheme;
+exports.useTriggerControl = useTriggerControl;
 //# sourceMappingURL=index.cjs.map