pixel-react 1.13.99 → 1.14.0

package/lib/index.cjs

@@ -10536,9 +10536,9 @@ const useFileDropzone = options => {
     invalidFileMessage,
     fileExistMessage,
     validateMIMEType = false,
-    isApiResponseError,
     selectedFile,
-    setSelectedFile
+    setSelectedFile,
+    handleReplaceFile
   } = options;
   const file = !selectedFile ? [] : [selectedFile];
   const [files, setFiles] = React.useState({
@@ -10562,13 +10562,13 @@ const useFileDropzone = options => {
     }
     const extensionWithPeriod = getExtensionWithPeriod(file).toLowerCase();
     if (validateMIMEType) {
-      if (!validateFileMIMEType(file, extensionWithPeriod) || isApiResponseError) {
+      if (!validateFileMIMEType(file, extensionWithPeriod)) {
         errors.push({
           message: invalidFileMessage ? invalidFileMessage : 'Unsupported File Format',
           code: 'file-invalid-type'
         });
       }
-    } else if (accept && !accept.includes(extensionWithPeriod) || isApiResponseError) {
+    } else if (accept && !accept.includes(extensionWithPeriod)) {
       errors.push({
         message: invalidFileMessage ? invalidFileMessage : 'Unsupported File Format',
         code: 'file-invalid-type'
@@ -10582,27 +10582,30 @@ const useFileDropzone = options => {
       });
     }
     return errors;
-  }, [accept, maxSize, files, maxSizeErrorMessage, invalidFileMessage, fileExistMessage]);
+  }, [accept, maxSize, files, maxSizeErrorMessage, invalidFileMessage, fileExistMessage, validateMIMEType]);
   const replaceFile = React.useCallback((fileToReplace, newFile) => {
     if (fileToReplace.name === newFile.name && fileToReplace.size === newFile.size) {
       return;
     }
+    if (handleReplaceFile) handleReplaceFile();
     const errors = validateFile(newFile);
+    const isValid = checkEmpty(errors);
     setFiles(prevFiles => {
-      const updatedAccepted = prevFiles.accepted.filter(file => file.name !== fileToReplace.name);
-      const updatedRejected = prevFiles.rejected.filter(rejection => rejection.file.name !== fileToReplace.name);
-      if (!checkEmpty(errors) && newFile && setSelectedFile) {
+      const updatedAccepted = prevFiles.accepted.filter(file => file.name !== fileToReplace.name || file.size !== fileToReplace.size);
+      const updatedRejected = prevFiles.rejected.filter(rejection => rejection.file.name !== fileToReplace.name || rejection.file.size !== fileToReplace.size);
+      // If valid, update selectedFile too
+      if (isValid && setSelectedFile) {
         setSelectedFile([...updatedAccepted, newFile]);
       }
       return {
-        accepted: !checkEmpty(errors) ? updatedAccepted : [...updatedAccepted, newFile],
-        rejected: !checkEmpty(errors) ? [...updatedRejected, {
+        accepted: isValid ? [...updatedAccepted, newFile] : updatedAccepted,
+        rejected: isValid ? updatedRejected : [...updatedRejected, {
           file: newFile,
           errors
-        }] : updatedRejected
+        }]
       };
     });
-  }, [validateFile]);
+  }, [validateFile, setSelectedFile]);
   const handleReplaceClick = React.useCallback(fileToReplace => {
     const input = document.createElement('input');
     input.type = 'file';
@@ -11122,7 +11125,8 @@ const FileDropzone = ({
   onUploadFile,
   fileInputRef,
   showNoFilesUploadedMessage = false,
-  noFileUploadedText = 'No files are uploaded'
+  noFileUploadedText = 'No files are uploaded',
+  handleReplaceFile
 }) => {
   const {
     getRootProps,
@@ -11142,9 +11146,9 @@ const FileDropzone = ({
     invalidFileMessage,
     fileExistMessage,
     validateMIMEType,
-    isApiResponseError,
     selectedFile,
-    setSelectedFile
+    setSelectedFile,
+    handleReplaceFile
     // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
   });
   React.useEffect(() => {
@@ -34302,7 +34306,7 @@ const NlpDropdown = ({
     } else {
       dropdownContainerHeight = options.length * optionHeight + 2 * dropDownWrapperPadding;
     }
-    if (fromBottom > dropdownContainerHeight + margin) {
+    if (fromBottom > dropdownContainerHeight + margin + 80) {
       return {
         left: positionX,
         top: positionY,
@@ -34616,7 +34620,8 @@ const ChipsAccordion = /*#__PURE__*/React.forwardRef(({
   chipOptionList,
   selectedChips,
   optionZIndex = 0,
-  inputRef
+  inputRef,
+  ChipsAccordionWidth
 }, ref) => {
   const [filterData, setFilterData] = React.useState([]);
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -34705,7 +34710,7 @@ const ChipsAccordion = /*#__PURE__*/React.forwardRef(({
       top: positionChipContainer.top,
       zIndex: optionZIndex + 100,
       transform: expandDirection === 'up' ? 'translateY(calc(-100% + 33px))' : 'none',
-      width: '27.8%',
+      width: ChipsAccordionWidth,
       position: 'absolute'
     },
     ref: localRef,
@@ -34844,7 +34849,8 @@ const NlpInput = ({
   loadMoreOptions = () => {},
   isWebservice = true,
   closeInputOnOutsideClick = () => {},
-  tooltipText = 'Help'
+  tooltipText = 'Help',
+  ChipsAccordionWidth = '27.8%'
 }) => {
   const initialState = {
     isInputFocused: false,
@@ -35115,7 +35121,8 @@ const NlpInput = ({
         selectedChips: selectedChips,
         optionZIndex: optionZIndex,
         ref: ChipRef,
-        inputRef: InputRef
+        inputRef: InputRef,
+        ChipsAccordionWidth: ChipsAccordionWidth
       })
     })]
   });
@@ -35247,15 +35254,15 @@ const MachineInputField = ({
             color: "var(--ff-machine-input-field-text-color)",
             children: isTextTruncated(label, 10) ? truncateText(label, 10) : label
           })
-        }), isManualScript && !checkEmpty(version) && jsxRuntime.jsxs(Tooltip, {
+        }), isManualScript && !checkEmpty(version) && jsxRuntime.jsx(Tooltip, {
           title: version,
-          children: ["\u00A0 \u00A0", jsxRuntime.jsx(Typography, {
+          children: jsxRuntime.jsxs(Typography, {
             className: classNames('ff-machine-text', {
               'ff-machine-text-reverse': contentReverse
             }),
             color: "var(--ff-machine-input-field-text-color)",
-            children: isTextTruncated(version ?? '', 10) ? truncateText(version ?? '', 10) : version
-          })]
+            children: [' ', "-", ' ', isTextTruncated(version ?? '', 10) ? truncateText(version ?? '', 10) : version]
+          })
         })]
       }, type))
     })]
@@ -43762,15 +43769,70 @@ const StatusCard = ({
   });
 };
 
+const DynamicWidthTooltip = ({
+  option
+}) => {
+  const textRef = React.useRef(null);
+  const [isTruncated, setIsTruncated] = React.useState(false);
+  React.useEffect(() => {
+    const el = textRef.current;
+    if (!el) return;
+    const checkTruncation = () => {
+      setIsTruncated(el.scrollWidth > el.clientWidth);
+    };
+    const raf = requestAnimationFrame(checkTruncation);
+    window.addEventListener('resize', checkTruncation);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('resize', checkTruncation);
+    };
+  }, [option]);
+  const VARIABLE_ICON_MAP = {
+    LOCAL: 'local_variable_icon',
+    GLOBAL: 'global_variable_icon',
+    PROJECT_ENVIRONMENT: 'project_env_variable_icon'
+  };
+  const getVariableIcon = option => {
+    if (!option) return '';
+    const variableId = option._id || option.id;
+    if (variableId?.startsWith('PARAMETER')) return 'step_group_parameter';
+    if (option.type === 'LOCAL' && option?.parentVariableType === 'STEPGROUP') return 'step_group_variable';
+    if (option.type === '_startforloop') return 'for_loop_variable';
+    if (option.type === 'DATAPROVIDER') return 'data_provider_variable';
+    return VARIABLE_ICON_MAP[option.type || ''] || '';
+  };
+  return jsxRuntime.jsxs("div", {
+    style: {
+      width: '-webkit-fill-available'
+    },
+    className: "ff-variable-option ff-variable-data",
+    children: [jsxRuntime.jsx(Tooltip, {
+      title: isTruncated ? option.name : '',
+      style: {
+        width: 'calc(100% - 32px)'
+      },
+      children: jsxRuntime.jsx("span", {
+        ref: textRef,
+        className: "ff-truncated_text",
+        children: option.name
+      })
+    }), jsxRuntime.jsx(Icon, {
+      name: getVariableIcon(option),
+      height: 16,
+      width: 16,
+      hoverEffect: true
+    })]
+  });
+};
+
 const VariableDropdown = ({
   optionsList = [],
   onSelectVariable,
   dropdownPosition,
   position = 'relative',
-  width = '300px',
+  width,
   height = '100px',
-  zIndex = 9999,
-  truncateTextValue = 34
+  zIndex = 9999
 }) => {
   const VARIABLE_ICON_MAP = {
     LOCAL: 'local_variable_icon',
@@ -43786,6 +43848,18 @@ const VariableDropdown = ({
     if (option.type === 'DATAPROVIDER') return 'data_provider_variable';
     return VARIABLE_ICON_MAP[option.type || ''] || '';
   };
+  const getDisplayText = option => {
+    if (option?.type === '_startforloop') return `FLV_for:${option?.name}`;
+    if (option?.type === 'DATAPROVIDER') return `${option?.dpName}:${option?.varname}`;
+    return option?.name;
+  };
+  function getNumericValue(value) {
+    if (value.endsWith('px')) {
+      const num = parseInt(value.slice(0, -2), 10);
+      return isNaN(num) ? 212 : num - 66;
+    }
+    return 212;
+  }
   return jsxRuntime.jsx("div", {
     className: classNames('ff-variable-dropdown', position),
     style: dropdownPosition ? {
@@ -43800,19 +43874,30 @@ const VariableDropdown = ({
       zIndex
     },
     children: !checkEmpty(optionsList) ? optionsList?.map(option => {
-      return jsxRuntime.jsxs("div", {
-        className: "ff-variable-option",
+      return jsxRuntime.jsx("div", {
+        className: width.endsWith('px') ? 'ff-variable-option' : '  ff-variable-data',
         onMouseDown: () => onSelectVariable(option),
-        children: [jsxRuntime.jsx(Typography, {
-          as: "span",
-          fontSize: 14,
-          children: truncateText(option?.type === '_startforloop' ? `FLV_for:${option?.name}` : option?.type === 'DATAPROVIDER' ? option?.dpName + ':' + option?.varname : option?.name, truncateTextValue)
-        }), jsxRuntime.jsx(Icon, {
-          name: getVariableIcon(option),
-          height: 16,
-          width: 16,
-          hoverEffect: true
-        })]
+        children: width.endsWith('px') ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(Tooltip, {
+            title: isTextTruncated(getDisplayText(option), getNumericValue(width), 'pixel') ? getDisplayText(option) : '',
+            style: {
+              width: `${getNumericValue(width)}px`
+            },
+            children: jsxRuntime.jsx(Typography, {
+              as: "span",
+              fontSize: 14,
+              className: "ff-truncated_text",
+              children: getDisplayText(option)
+            })
+          }), jsxRuntime.jsx(Icon, {
+            name: getVariableIcon(option),
+            height: 16,
+            width: 16,
+            hoverEffect: true
+          })]
+        }) : jsxRuntime.jsx(DynamicWidthTooltip, {
+          option: option
+        })
       }, option?.id);
     }) : jsxRuntime.jsx("div", {
       className: "ff-variable-option",
@@ -46763,6 +46848,19 @@ const SessionDropdown = ({
   });
 };
 
+const formatCellData = (content, maxLength) => {
+  if (typeof content === 'string') {
+    return truncateText(content, maxLength);
+  }
+  if (/*#__PURE__*/React.isValidElement(content)) {
+    return /*#__PURE__*/React.cloneElement(content, {}, formatCellData(content.props.children, maxLength));
+  }
+  if (Array.isArray(content)) {
+    return content.map(child => formatCellData(child, maxLength));
+  }
+  return content;
+};
+
 const TableHead = /*#__PURE__*/React.memo(({
   columnsData,
   rootNode,
@@ -46771,7 +46869,8 @@ const TableHead = /*#__PURE__*/React.memo(({
   selectedNode,
   tableHeaderBgColor,
   hideOnDisable,
-  transparentHeader
+  transparentHeader,
+  scriptLengthTruncate = 25
 }) => {
   // const hasDefaultValues = useMemo(
   //   () => columnsData.some(({ defaultValue }) => !!defaultValue),
@@ -46815,16 +46914,11 @@ const TableHead = /*#__PURE__*/React.memo(({
             value: rootNode.node.key,
             onChange: e => onCheckBoxChange(e, rootNode.node),
             disabled: rootNode.node.isDisabled
-          }), jsxRuntime.jsxs("span", {
+          }), jsxRuntime.jsx("span", {
             className: "tree-table-td-content-text",
-            children: [jsxRuntime.jsx("span", {
-              children: rootNode.node[col.accessor]
-            }), rootNode.cell && index === 0 && jsxRuntime.jsx("span", {
-              className: "table-tree-root-cell",
-              children: (() => {
-                return rootNode.cell(rootNode.node);
-              })()
-            })]
+            children: jsxRuntime.jsx("span", {
+              children: formatCellData(prepareData(rootNode.node, col), scriptLengthTruncate)
+            })
           }), rootNode.actions && index === 0 && isMounted && rootNodeRowRef.current && jsxRuntime.jsx("div", {
             className: "table-tree-row-action",
             children: (() => {
@@ -46936,19 +47030,6 @@ const addNewRow = (treeData, newNode, rootNode) => {
   return addLastChild(updatedTreeData);
 };
 
-const formatCellData = (content, maxLength) => {
-  if (typeof content === 'string') {
-    return truncateText(content, maxLength);
-  }
-  if (/*#__PURE__*/React.isValidElement(content)) {
-    return /*#__PURE__*/React.cloneElement(content, {}, formatCellData(content.props.children, maxLength));
-  }
-  if (Array.isArray(content)) {
-    return content.map(child => formatCellData(child, maxLength));
-  }
-  return content;
-};
-
 const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
   let siblingsArray = parentSiblings;
   let isLastNode = isLast;
@@ -47455,7 +47536,8 @@ const TableTreeFn = /*#__PURE__*/React.forwardRef(({
           selectedNode: selectedNode,
           tableHeaderBgColor: tableHeaderBgColor,
           hideOnDisable: hideOnDisable,
-          transparentHeader: transparentHeader
+          transparentHeader: transparentHeader,
+          scriptLengthTruncate: scriptLengthTruncate
         }), jsxRuntime.jsx(TableBody, {
           flattenedTreeData: addLastChild(treeData),
           rootNode: rootNode?.node,
@@ -59215,7 +59297,7 @@ const Editor = /*#__PURE__*/React.forwardRef(({
           jslint_happy: true,
           end_with_newline: true,
           wrap_line_length: 0,
-          comma_first: true,
+          comma_first: false,
           e4x: true,
           indent_empty_lines: true
         });
@@ -59233,7 +59315,7 @@ const Editor = /*#__PURE__*/React.forwardRef(({
           jslint_happy: true,
           end_with_newline: true,
           wrap_line_length: 0,
-          comma_first: true,
+          comma_first: false,
           e4x: true,
           indent_empty_lines: true
         });
@@ -74906,7 +74988,8 @@ const PhoneInputField = ({
   isValid: initialIsValid = true,
   isVerified = false,
   isVerifyDisplay = false,
-  onVerifyClick = () => {}
+  onVerifyClick = () => {},
+  onValidationChange = () => {}
 }) => {
   const [phone, setPhone] = React.useState(initialValue);
   const [isFocused, setIsFocused] = React.useState(false);
@@ -74921,6 +75004,13 @@ const PhoneInputField = ({
       setPhone(formattedPhone);
     }
   }, [initialValue]);
+  const validatePhoneNumber = phoneNumber => {
+    const isPhoneValid = isValidPhoneNumber(phoneNumber);
+    const isOnlyCountryCode = !!phoneNumber && phoneNumber.replace(/[^\d]/g, '').length <= 3;
+    const isValidNumber = isPhoneValid || isOnlyCountryCode;
+    setIsValid(isValidNumber);
+    onValidationChange(isValidNumber);
+  };
   const handlePhoneChange = (phone, countryData) => {
     const newCountryCode = countryData?.countryCode?.toLowerCase();
     const cleanedPhone = phone.replace(/[^0-9+]/g, '');
@@ -74937,9 +75027,7 @@ const PhoneInputField = ({
     }
     setPhone(formattedPhone);
     onChange(formattedPhone);
-    const isPhoneValid = isValidPhoneNumber(formattedPhone);
-    const isOnlyCountryCode = phone && phone.replace(/[^\d]/g, '').length <= 3;
-    setIsValid(isPhoneValid || isOnlyCountryCode);
+    validatePhoneNumber(formattedPhone);
   };
   const handleFocus = event => {
     setIsFocused(true);
@@ -74948,9 +75036,7 @@ 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 || isOnlyCountryCode);
+    validatePhoneNumber(phone);
   };
   return jsxRuntime.jsxs("div", {
     id: id,