pixel-react 1.13.62 → 1.13.64

package/lib/index.cjs

@@ -2484,6 +2484,7 @@ const FILE_NAME_REGEX = /\.([^.@]+)$/;
 const ELEMENTS_TRAILING_SPACE_REGEX = /^\S.*\S$/;
 const ELEMENTS_WHITE_SPACE_REGEX = /.*\S.*/;
 const PARAMETER_ALPHANUMERIC_REGEX = /^[-_A-Za-z0-9 ]*$|^[-_A-Za-z0-9 ][A-Za-z0-9 ]*[-_A-Za-z-_]$/;
+const ALPHANUMERIC_PARENTHESIS_REGEX = /^[-_A-Za-z0-9 ()]*$|^[-_A-Za-z0-9 ()][A-Za-z0-9 ()]*[-_A-Za-z-()]$/;
 const STRIP_NEW_LINES_REGEX = /\n/g;
 //Regular expression to convert lower camel case by excluding spaces
 const CAMEL_CASE_REGEX = /(?:^\w|[A-Z]|\b\w|\s+)/g;
@@ -2530,6 +2531,8 @@ const LINK_VALIDATION_REGEX = /^(https?:\/\/)?((?!.*\.\.)[\da-z.-]+)\.([\da-z.-]
 // Alphanumeric Validation with specific Order including special characters (- , _ , ( , ) )
 const ALPHA_NUM_EXTENDED_REGEX = /^[a-zA-Z0-9 _\-()]+$/;
 // Alphanumeric string allowing only dot(.) as special character
+const ALPHANUMERIC_WITH_DOT_REGEX = /^[A-Za-z0-9.]+$/;
+// Alphanumeric string allowing only dot(.) as special character
 const EXCEL_SPACING_REGEX = /[\n\t"]/;
 
 const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
@@ -4438,7 +4441,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)`
@@ -9839,7 +9842,8 @@ const Table$1 = ({
   columnSticky = false,
   tableRef = null,
   isRowCheckBoxDisable,
-  isRowDisabled = true
+  isRowDisabled = true,
+  tableHeaderZindex = 99
 }) => {
   const observerRef = React.useRef(null);
   React.useEffect(() => {
@@ -9922,6 +9926,9 @@ const Table$1 = ({
             className: classNames({
               'ff-fixed-header': withFixedHeader
             }, tableHeadClass),
+            style: {
+              zIndex: tableHeaderZindex
+            },
             children: jsxRuntime.jsx("tr", {
               children: columns.map((column, index) => jsxRuntime.jsxs("th", {
                 className: classNames(`${headerType !== 'default' ? `${headerType}-bg` : ''}`, `${headerTextColor && `${headerTextColor}-color`}`, {
@@ -16604,6 +16611,31 @@ const EditLabel = ({
       return '';
     }
   };
+  const getScrollableParent = element => {
+    if (!element) return window;
+    let parent = element.parentElement;
+    while (parent) {
+      const overflowY = window.getComputedStyle(parent).overflowY;
+      if (overflowY === 'auto' || overflowY === 'scroll') {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+    return window;
+  };
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    const scrollableParent = getScrollableParent(containerRef.current);
+    const handleScroll = () => {
+      handleCancel();
+    };
+    scrollableParent.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => {
+      scrollableParent.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
   React.useEffect(() => {
     if (value) {
       setText(value);
@@ -17522,7 +17554,7 @@ const Search = ({
   onClose,
   onExpand,
   showClose = true,
-  helperText = 'Minimum 3 characters are required',
+  helperText = 'Minimum 3 characters required',
   showToaster = true,
   minLength = 3,
   isAISearch = false,
@@ -36171,8 +36203,9 @@ const fontFamilyList = [{
   value: 'monospace'
 }];
 const fontSizeList = [5, 6, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 40, 48, 56, 72];
-const allowTextType = inputType => {
-  return inputType !== 'dropDown' && inputType !== 'file';
+const isPasteAllowed = currentCell => {
+  const inputType = currentCell?.inputType?.type ?? 'text';
+  return !['dropDown', 'file'].includes(inputType) && !currentCell?.readOnly;
 };
 
 const FORMULA_VALUE_PREFIX = '=';
@@ -37828,7 +37861,7 @@ function reducer(state, action) {
           let newData = state.cut && state.copied ? unset(state.copied.start, state.model.data) : state.model.data;
           const commit = [];
           for (const point of selectedRange || []) {
-            const currentCell = get(point, state.model.data);
+            const currentCell = get(point, state.model.data) || null;
             const updateWithStyle = {
               ...currentCell,
               value: cell?.value
@@ -37837,8 +37870,7 @@ function reducer(state, action) {
               prevCell: currentCell || EmptyCell,
               nextCell: EmptyCell
             });
-            const inputType = currentCell?.inputType?.type ?? 'text';
-            if (allowTextType(inputType)) {
+            if (isPasteAllowed(currentCell)) {
               newData = set(point, updateWithStyle, newData);
             }
           }
@@ -37892,8 +37924,7 @@ function reducer(state, action) {
             prevCell: currentCell,
             nextCell: cell || null
           }];
-          const inputType = currentCell?.inputType?.type ?? 'text';
-          if (allowTextType(inputType)) {
+          if (isPasteAllowed(currentCell)) {
             acc.data = set(nextPoint, {
               ...currentCell,
               value: cell?.value ?? ''
@@ -42801,6 +42832,7 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
   symbol = '$',
   type = 'text',
   clearIcon = true,
+  inputTitle = '',
   ...props
 }, ref) => {
   const [showDropdown, setShowDropdown] = React.useState(false);
@@ -42957,28 +42989,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, {
@@ -43047,6 +43085,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';
@@ -43084,6 +43134,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",
@@ -43101,7 +43155,7 @@ const CreateVariableSlider = ({
             handleSubmit();
           }
         },
-        disabled: !isVariableNameValid(variableName) || isSubmitting
+        disabled: !isVariableNameValid(variableName) || isSubmitting || mode === 'edit' && !hasChanges
       })]
     });
   };
@@ -43528,6 +43582,7 @@ const MediaPreview = ({
   isDisabled = false
 }) => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const videoRef = React.useRef(null);
   const handleExpand = () => {
     setIsModalOpen(true);
     onExpandClick && onExpandClick(fileId);
@@ -43544,6 +43599,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,
@@ -43572,16 +43641,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,
@@ -43592,7 +43675,8 @@ const MediaPreview = ({
           src: MediaSrc,
           controls: true,
           controlsList: "nodownload",
-          className: "ff-video-preview"
+          className: "ff-video-preview",
+          ref: videoRef
         })]
       })
     })]
@@ -59361,6 +59445,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 PopUpModal = ({
   isOpen,
   onClose,
@@ -72397,6 +72496,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;
@@ -72406,12 +72506,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);
@@ -72420,8 +72533,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,
@@ -109990,7 +110104,9 @@ const ScriptGenerationLoader = ({
 
 exports.AADHAAR_REGEX = AADHAAR_REGEX;
 exports.ALPHABET_ONLY_REGEX = ALPHABET_ONLY_REGEX;
+exports.ALPHANUMERIC_PARENTHESIS_REGEX = ALPHANUMERIC_PARENTHESIS_REGEX;
 exports.ALPHANUMERIC_REGEX = ALPHANUMERIC_REGEX;
+exports.ALPHANUMERIC_WITH_DOT_REGEX = ALPHANUMERIC_WITH_DOT_REGEX;
 exports.ALPHANUMERIC_WITH_ROUND_BRACES_REGEX = ALPHANUMERIC_WITH_ROUND_BRACES_REGEX;
 exports.ALPHA_NUM_EXTENDED_REGEX = ALPHA_NUM_EXTENDED_REGEX;
 exports.ALPHA_NUM_REGEX = ALPHA_NUM_REGEX;
@@ -110227,6 +110343,7 @@ exports.truncateText = truncateText;
 exports.updateTreeState = updateTreeState;
 exports.useBeforeUnload = useBeforeUnload;
 exports.useClickOutside = useClickOutside;
+exports.useConditionalLock = useConditionalLock;
 exports.useFileDropzone = useFileDropzone;
 exports.useKeyboardActions = useKeyboardActions;
 exports.useTheme = useTheme;