pixel-react 1.13.63 → 1.13.65

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 ? '10px' : '12px',
+        lineHeight: searchedText || showDropdownOptions && '12px',
         required: required,
         style: {
           maxWidth: `calc(${selectWidth} - 40px)`
@@ -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,
@@ -42832,6 +42838,7 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
   symbol = '$',
   type = 'text',
   clearIcon = true,
+  inputTitle = '',
   ...props
 }, ref) => {
   const [showDropdown, setShowDropdown] = React.useState(false);
@@ -42988,28 +42995,34 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
     children: [jsxRuntime.jsxs("div", {
       className: "ff-add-variable-input",
       ref: containerRef,
-      children: [jsxRuntime.jsx(Input$1, {
-        ...props,
-        name: "add_variable",
-        ref: inputRef,
-        type: type,
-        value: value,
-        onChange: onChange,
-        onPaste: () => {
-          setShowCreateVariableIcon(true);
+      children: [jsxRuntime.jsx(Tooltip, {
+        title: inputTitle,
+        style: {
+          width: '100%'
         },
-        variant: "primary",
-        label: label,
-        placeholder: placeholder,
-        onClick: handleClick,
-        onKeyUp: handleKeyUp,
-        onFocus: () => setIsFocused(true),
-        onBlur: e => handleBlur(e),
-        autoComplete: autoComplete,
-        helperText: helperText,
-        error: error,
-        required: required,
-        ...formProps
+        children: jsxRuntime.jsx(Input$1, {
+          ...props,
+          name: "add_variable",
+          ref: inputRef,
+          type: type,
+          value: value,
+          onChange: onChange,
+          onPaste: () => {
+            setShowCreateVariableIcon(true);
+          },
+          variant: "primary",
+          label: label,
+          placeholder: placeholder,
+          onClick: handleClick,
+          onKeyUp: handleKeyUp,
+          onFocus: () => setIsFocused(true),
+          onBlur: e => handleBlur(e),
+          autoComplete: autoComplete,
+          helperText: helperText,
+          error: error,
+          required: required,
+          ...formProps
+        })
       }), !checkEmpty(value) && !isOnlyHash && jsxRuntime.jsxs("div", {
         className: "ff-variable-icon-container",
         children: [clearIcon && jsxRuntime.jsx(Tooltip, {
@@ -43078,6 +43091,18 @@ const CreateVariableSlider = ({
   const [helperText, setHelperText] = React.useState('');
   const [hashInputValue, setHashInputValue] = React.useState();
   const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [initialValues, setInitialValues] = React.useState({
+    name: '',
+    value: ''
+  });
+  React.useEffect(() => {
+    if (isOpen && mode === 'edit') {
+      setInitialValues({
+        name: variableName,
+        value: variableValue
+      });
+    }
+  }, []);
   const getVariableNameError = value => {
     if (!value || value.length === 0) {
       return 'Variable Name is required';
@@ -43115,6 +43140,10 @@ const CreateVariableSlider = ({
     const isValid = isNonEmpty && matchesPattern && noWhitespaceEdges && lengthValid;
     return isValid;
   }
+  const hasChanges = React.useMemo(() => {
+    if (mode !== 'edit') return true;
+    return variableName !== initialValues.name || variableValue !== initialValues.value;
+  }, [mode, variableName, variableValue, initialValues]);
   const FooterContent = () => {
     return jsxRuntime.jsxs("div", {
       className: "ff-create-slider-footer",
@@ -43132,7 +43161,7 @@ const CreateVariableSlider = ({
             handleSubmit();
           }
         },
-        disabled: !isVariableNameValid(variableName) || isSubmitting
+        disabled: !isVariableNameValid(variableName) || isSubmitting || mode === 'edit' && !hasChanges
       })]
     });
   };
@@ -43559,6 +43588,7 @@ const MediaPreview = ({
   isDisabled = false
 }) => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const videoRef = React.useRef(null);
   const handleExpand = () => {
     setIsModalOpen(true);
     onExpandClick && onExpandClick(fileId);
@@ -43575,6 +43605,20 @@ const MediaPreview = ({
       setIsModalOpen(true);
     }
   }, [previewOnly]);
+  React.useEffect(() => {
+    if (isModalOpen) {
+      setTimeout(() => {
+        if (videoRef.current) {
+          const playPromise = videoRef.current.play();
+          if (playPromise !== undefined) {
+            playPromise.catch(error => {
+              console.error('Autoplay failed:', error);
+            });
+          }
+        }
+      }, 300);
+    }
+  }, [isModalOpen]);
   return jsxRuntime.jsxs("div", {
     children: [!previewOnly && (isMediaIcon ? jsxRuntime.jsx(Icon, {
       name: iconName,
@@ -43603,16 +43647,30 @@ const MediaPreview = ({
         className: "media-wrapper",
         children: [jsxRuntime.jsxs("div", {
           className: "ff-expand-icons",
-          children: [jsxRuntime.jsx(Icon, {
-            name: "download_file_icon",
-            onClick: handleDownload,
-            color: "var(--icons-default-color)",
-            className: "header-icons"
-          }), jsxRuntime.jsx(Icon, {
-            name: "close",
-            onClick: handleClose,
-            color: "var(--icons-default-color)",
-            className: "header-icons"
+          children: [jsxRuntime.jsx(Tooltip, {
+            title: "Download File",
+            children: jsxRuntime.jsx(Icon, {
+              name: "download_file_icon",
+              onClick: handleDownload,
+              color: "var(--icons-default-color)",
+              className: "header-icons"
+            })
+          }), jsxRuntime.jsx(Tooltip, {
+            title: "Expand",
+            children: jsxRuntime.jsx(Icon, {
+              name: "expand",
+              onClick: handleExpand,
+              color: "var(--icons-default-color)",
+              className: "header-icons"
+            })
+          }), jsxRuntime.jsx(Tooltip, {
+            title: "close",
+            children: jsxRuntime.jsx(Icon, {
+              name: "close",
+              onClick: handleClose,
+              color: "var(--icons-default-color)",
+              className: "header-icons"
+            })
           })]
         }), mediaType === 'image' && jsxRuntime.jsx("img", {
           src: MediaSrc,
@@ -43623,7 +43681,8 @@ const MediaPreview = ({
           src: MediaSrc,
           controls: true,
           controlsList: "nodownload",
-          className: "ff-video-preview"
+          className: "ff-video-preview",
+          ref: videoRef
         })]
       })
     })]
@@ -50713,7 +50772,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;
@@ -50864,9 +50923,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%]*)$/);
@@ -50925,17 +51001,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,
@@ -50955,16 +51032,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,
@@ -50982,17 +51060,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 => {
@@ -51000,11 +51078,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 = () => {
@@ -51012,7 +51089,8 @@ const MultiRadialChart = ({
       visible: false,
       x: 0,
       y: 0,
-      content: ''
+      content: '',
+      isArc: false
     });
   };
   const textData = (text, maxLength) => {
@@ -51023,25 +51101,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;
@@ -51075,8 +51160,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
@@ -51095,10 +51184,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: {
@@ -51140,7 +51233,7 @@ const MultiRadialChart = ({
                       children: firstWord
                     }), jsxRuntime.jsx("tspan", {
                       x: "0",
-                      dy: 18,
+                      dy: DEFAULT_LINE_HEIGHT,
                       style: {
                         fontSize: `${subLabelFontSize}px`
                       },
@@ -51151,7 +51244,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`
@@ -51161,16 +51254,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,
@@ -58947,12 +59043,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
                     })
@@ -59392,6 +59491,22 @@ const Comments = ({
   });
 };
 
+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,
   onClose,
@@ -72428,6 +72543,7 @@ const PhoneInputField = ({
   const [phone, setPhone] = React.useState(initialValue);
   const [isFocused, setIsFocused] = React.useState(false);
   const [isValid, setIsValid] = React.useState(initialIsValid);
+  const [selectedCountry, setSelectedCountry] = React.useState(country);
   React.useEffect(() => {
     if (initialValue) {
       let formattedPhone = initialValue;
@@ -72437,12 +72553,25 @@ const PhoneInputField = ({
       setPhone(formattedPhone);
     }
   }, [initialValue]);
-  const handlePhoneChange = phone => {
+  const handlePhoneChange = (phone, countryData) => {
+    const newCountryCode = countryData?.countryCode?.toLowerCase();
     const cleanedPhone = phone.replace(/[^0-9+]/g, '');
-    setPhone(cleanedPhone);
-    onChange(cleanedPhone);
-    const isPhoneValid = isValidPhoneNumber(cleanedPhone);
-    setIsValid(isPhoneValid);
+    if (selectedCountry?.toLowerCase() !== newCountryCode) {
+      setPhone(countryData?.dialCode);
+      onChange(countryData?.dialCode);
+      setSelectedCountry(newCountryCode);
+      setIsValid(true);
+      return;
+    }
+    let formattedPhone = cleanedPhone;
+    if (!formattedPhone.startsWith('+')) {
+      formattedPhone = `+${formattedPhone}`;
+    }
+    setPhone(formattedPhone);
+    onChange(formattedPhone);
+    const isPhoneValid = isValidPhoneNumber(formattedPhone);
+    const isOnlyCountryCode = phone && phone.replace(/[^\d]/g, '').length <= 3;
+    setIsValid(isPhoneValid || isOnlyCountryCode);
   };
   const handleFocus = event => {
     setIsFocused(true);
@@ -72451,8 +72580,9 @@ const PhoneInputField = ({
   const handleBlur = event => {
     setIsFocused(false);
     if (onBlur) onBlur(event);
+    const isOnlyCountryCode = phone && phone.replace(/[^\d]/g, '').length <= 3;
     const isPhoneValid = isValidPhoneNumber(phone);
-    setIsValid(isPhoneValid);
+    setIsValid(isPhoneValid || isOnlyCountryCode);
   };
   return jsxRuntime.jsxs("div", {
     id: id,
@@ -74034,19 +74164,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);
@@ -110038,6 +110170,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;
@@ -110263,4 +110396,5 @@ exports.useClickOutside = useClickOutside;
 exports.useFileDropzone = useFileDropzone;
 exports.useKeyboardActions = useKeyboardActions;
 exports.useTheme = useTheme;
+exports.useTriggerControl = useTriggerControl;
 //# sourceMappingURL=index.cjs.map