🔧💡 Refactored height change logic for smoother expansion with trigger…

… mechanism

plugin/src/pages/AssetPage/_components/Footer/PdfExportOption.tsx

@@ -37,9 +37,13 @@ const assetsExportTypes = [
   { value: AssetsExportType.MULTI, text: 'Multiple PDF files' },
 ];
 
-const PdfExportOption = () => {
-  const { pdfFormatOption, setPdfFormatOption, pdfPassword, setPdfPassword } = useImageExportStore();
-  const { assetsExportType, setAssetsExportType } = useImageExportStore();
+interface PdfExportOptionProps {
+  onHeightChange: () => void; // Notify parent when height changes
+}
+
+const PdfExportOption = ({ onHeightChange }: PdfExportOptionProps) => {
+  const { pdfFormatOption, setPdfFormatOption, pdfPassword, setPdfPassword, assetsExportType, setAssetsExportType } =
+    useImageExportStore();
 
   const [vectorGradients, setVectorGradients] = useState<boolean>(false);
   const [outlineLinks, setOutlineLinks] = useState<boolean>(false);
@@ -68,6 +72,8 @@ const PdfExportOption = () => {
     if (!newValue) {
       setPdfPassword('');
     }
+    // Notify parent when password protection is toggled
+    onHeightChange();
   };
 
   const handleSetPassword = (event: JSX.TargetedEvent<HTMLInputElement>) => {

plugin/src/pages/AssetPage/_components/Footer/index.tsx

@@ -36,6 +36,8 @@ import { ExportAssetsHandler } from '@/types/events';
 const Footer = () => {
   const [isExpanded, setIsExpanded] = useState(false); // State to manage footer expansion
   const [contentHeight, setContentHeight] = useState('0px');
+  const [heightTrigger, setHeightTrigger] = useState(false);
+
   const contentRef = useRef<HTMLDivElement>(null);
 
   const { isLoading, setIsLoading } = useUtilsStore();
@@ -47,7 +49,7 @@ const Footer = () => {
     if (contentRef.current) {
       setContentHeight(isExpanded ? `${contentRef.current.scrollHeight}px` : '0px');
     }
-  }, [isExpanded, formatOption]);
+  }, [isExpanded, formatOption, heightTrigger]);
 
   const caseOptions = Object.values(CaseOption).map((value) => ({
     value,
@@ -59,6 +61,11 @@ const Footer = () => {
     text: value,
   }));
 
+  const handleHeightChange = () => {
+    // Update true or false to trigger height change
+    setHeightTrigger((prev) => !prev);
+  };
+
   function handleCaseChange(event: JSX.TargetedEvent<HTMLInputElement>) {
     const caseValue = event.currentTarget.value;
 
@@ -143,7 +150,11 @@ const Footer = () => {
               </div>
             </div>
             <VerticalSpace space="small" />
-            {formatOption === FormatOption.PDF ? <PdfExportOption /> : <ImageExportOption />}
+            {formatOption === FormatOption.PDF ? (
+              <PdfExportOption onHeightChange={handleHeightChange} />
+            ) : (
+              <ImageExportOption />
+            )}
           </Container>
           <VerticalSpace space="small" />
         </div>