pixel-react 1.13.63 → 1.13.64

package/lib/index.cjs

@@ -4441,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)`
@@ -42832,6 +42832,7 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
   symbol = '$',
   type = 'text',
   clearIcon = true,
+  inputTitle = '',
   ...props
 }, ref) => {
   const [showDropdown, setShowDropdown] = React.useState(false);
@@ -42988,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, {
@@ -43078,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';
@@ -43115,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",
@@ -43132,7 +43155,7 @@ const CreateVariableSlider = ({
             handleSubmit();
           }
         },
-        disabled: !isVariableNameValid(variableName) || isSubmitting
+        disabled: !isVariableNameValid(variableName) || isSubmitting || mode === 'edit' && !hasChanges
       })]
     });
   };
@@ -43559,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);
@@ -43575,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,
@@ -43603,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,
@@ -43623,7 +43675,8 @@ const MediaPreview = ({
           src: MediaSrc,
           controls: true,
           controlsList: "nodownload",
-          className: "ff-video-preview"
+          className: "ff-video-preview",
+          ref: videoRef
         })]
       })
     })]
@@ -59392,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,
@@ -72428,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;
@@ -72437,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);
@@ -72451,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,
@@ -110260,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;