pixel-react 1.14.51 → 1.14.52

package/lib/index.cjs

@@ -6874,7 +6874,7 @@ const Option$1 = ({
     children: option.label
   })]
 });
-const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight, optionCardWidth) => {
+const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight, optionCardWidth, isAddResourceButton) => {
   const {
     top,
     left,
@@ -6896,6 +6896,11 @@ const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight, op
       break;
     case 'down':
       newTop = availableSpace.bottom > optionCardHeight + gap ? top + height + gap : top - optionCardHeight - gap;
+      if (isAddResourceButton) {
+        if (!(availableSpace?.bottom > optionCardHeight + gap)) {
+          newLeft = left + 50;
+        }
+      }
       break;
     case 'left':
       newLeft = availableSpace.left > width + gap ? left - width - gap : left + width + gap;
@@ -6946,7 +6951,7 @@ const OptionCard = ({
       setOptionCardWidth(optionCardRef.current.offsetWidth);
     }
   }, [options]);
-  const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight, optionCardWidth);
+  const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight, optionCardWidth, isAddResourceButton);
   return /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsx("div", {
     className: classNames('ff-option-card', {
       'ff-option-card--primary': variant === 'primary'
@@ -34929,7 +34934,7 @@ const ChipsAccordion = /*#__PURE__*/React.forwardRef(({
   React.useEffect(() => {
     checkOverflow();
   }, [filterData]);
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const handleUpdate = () => {
       if (!inputRef?.current) return;
       const {
@@ -35231,7 +35236,7 @@ const NlpInput = ({
     document.body.style.paddingRight = isEnabled ? '' : `${bodyScrollWidth}px`;
     document.body.style.overflow = isEnabled ? '' : 'hidden';
   };
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (disabled) return;
     if (showOptions) {
       onSelectToggleScroll(!showOptions);
@@ -48700,15 +48705,18 @@ const CreateVariableSlider = ({
   const [helperText, setHelperText] = React.useState('');
   const [hashInputValue, setHashInputValue] = React.useState();
   const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [hasChanges, setHasChanges] = React.useState(false);
   const [initialValues, setInitialValues] = React.useState({
     name: '',
-    value: ''
+    value: '',
+    isChecked: false
   });
   React.useEffect(() => {
     if (isOpen && mode === 'edit') {
       setInitialValues({
         name: variableName,
-        value: variableValue
+        value: variableValue,
+        isChecked: hideValue
       });
     }
   }, []);
@@ -48749,10 +48757,15 @@ 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]);
+  React.useEffect(() => {
+    if (mode !== 'edit') return;
+    const {
+      name,
+      value,
+      isChecked
+    } = initialValues;
+    setHasChanges(variableName !== name || variableValue !== value || hideValue !== isChecked);
+  }, [mode, variableName, variableValue, hideValue, initialValues]);
   const FooterContent = () => {
     return jsxRuntime.jsxs("div", {
       className: "ff-create-slider-footer",
@@ -115001,15 +115014,44 @@ const TextEditor = ({
   return jsxRuntime.jsxs("div", {
     className: "ff-textEditor-container",
     children: [jsxRuntime.jsxs("div", {
-      className: "ff-textEditor-label-asterisk-container",
-      children: [required && jsxRuntime.jsx(Typography, {
-        className: "required-asterisk",
-        children: "* "
-      }), label && jsxRuntime.jsx(Typography, {
-        lineHeight: "10px",
-        fontWeight: "medium",
-        fontSize: "12px",
-        children: label
+      className: "ff-title-button",
+      children: [jsxRuntime.jsxs("div", {
+        className: "ff-textEditor-label-asterisk-container",
+        children: [required && jsxRuntime.jsx(Typography, {
+          className: "required-asterisk",
+          children: "* "
+        }), label && jsxRuntime.jsx(Typography, {
+          lineHeight: "10px",
+          fontWeight: "medium",
+          fontSize: "12px",
+          children: label
+        })]
+      }), editableTextEditor && isEditing && jsxRuntime.jsxs("div", {
+        ref: buttonsRef,
+        className: "ff-textEditor-buttons",
+        children: [jsxRuntime.jsx(Tooltip, {
+          title: "Update",
+          placement: "bottom",
+          children: jsxRuntime.jsx(Icon, {
+            name: "update_icon",
+            color: "var(--label-edit-confirm-icon)",
+            height: 20,
+            width: 20,
+            hoverEffect: true,
+            onClick: handleSubmit
+          })
+        }), jsxRuntime.jsx(Tooltip, {
+          title: "Cancel",
+          placement: "bottom",
+          children: jsxRuntime.jsx(Icon, {
+            name: "close",
+            color: "var(--label-edit-cancel-icon)",
+            height: 20,
+            width: 20,
+            onClick: handleCancel,
+            hoverEffect: true
+          })
+        })]
       })]
     }), jsxRuntime.jsx("div", {
       ref: editorRef,
@@ -115043,32 +115085,6 @@ const TextEditor = ({
           }
         }
       })
-    }), editableTextEditor && isEditing && jsxRuntime.jsxs("div", {
-      ref: buttonsRef,
-      className: "ff-textEditor-buttons",
-      children: [jsxRuntime.jsx(Tooltip, {
-        title: "Update",
-        placement: "bottom",
-        children: jsxRuntime.jsx(Icon, {
-          name: "update_icon",
-          color: "var(--label-edit-confirm-icon)",
-          height: 20,
-          width: 20,
-          hoverEffect: true,
-          onClick: handleSubmit
-        })
-      }), jsxRuntime.jsx(Tooltip, {
-        title: "Cancel",
-        placement: "bottom",
-        children: jsxRuntime.jsx(Icon, {
-          name: "close",
-          color: "var(--label-edit-cancel-icon)",
-          height: 20,
-          width: 20,
-          onClick: handleCancel,
-          hoverEffect: true
-        })
-      })]
     }), required && errorMsg || helperText && error ? jsxRuntime.jsx(Typography, {
       fontSize: 10,
       className: 'ff-textEditor-error-msg',