@designbasekorea/figma-ui 0.6.0 → 0.6.3

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, createContext, useContext, useCallback } from 'react';
+import React, { useRef, useState, useLayoutEffect, useEffect, createContext, useContext, useCallback } from 'react';
 import { HeartFilledIcon, CoffeeFilledIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronDownIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon, ChevronRightIcon } from '@designbasekorea/icons';
 import { Button, Dropdown, Badge, Toggle, Spinner, SegmentControl, Logo, ToastContainer, Toast, Input, Modal, Progressbar, RandomGradient } from '@designbasekorea/ui';
 export * from '@designbasekorea/ui';
@@ -105,7 +105,9 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
     const clipRef = useRef(null);
     const innerRef = useRef(null);
     const animatingRef = useRef(false);
+    const isInitialMountRef = useRef(true);
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const [contentHidden, setContentHidden] = useState(defaultCollapsed);
     const sectionStyle = marginBottom ? { marginBottom: `${marginBottom}px` } : undefined;
     const classes = [
         'designbase-figma-section',
@@ -118,38 +120,42 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
     const toggle = () => {
         if (!collapsible)
             return;
-        setCollapsed(v => {
-            const next = !v;
+        setCollapsed((prev) => {
+            const next = !prev;
             onCollapseChange?.(next, dataCategory);
-            animate(next);
             return next;
         });
     };
-    const animate = (toCollapsed) => {
+    const animate = (toCollapsed, onComplete) => {
         const clip = clipRef.current;
         const inner = innerRef.current;
         if (!clip || !inner)
             return;
         const transitionMs = 250;
-        const setH = (h) => { clip.style.height = h; };
+        const setH = (h) => {
+            clip.style.height = h;
+        };
         if (animatingRef.current) {
             const current = `${clip.getBoundingClientRect().height}px`;
             clip.style.transition = 'none';
             setH(current);
-            clip.offsetHeight;
+            void clip.offsetHeight;
             clip.style.transition = '';
         }
         animatingRef.current = true;
         if (toCollapsed) {
+            inner.classList.remove('is-collapsed');
             const start = `${inner.scrollHeight}px`;
             setH(start);
-            clip.offsetHeight;
+            void clip.offsetHeight;
             setH('0px');
         }
         else {
+            inner.classList.remove('is-collapsed');
+            const targetHeight = inner.scrollHeight;
             setH('0px');
-            clip.offsetHeight;
-            setH(`${inner.scrollHeight}px`);
+            void clip.offsetHeight;
+            setH(`${targetHeight}px`);
         }
         const onEnd = (e) => {
             if (e.propertyName !== 'height')
@@ -159,6 +165,7 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
                 setH('auto');
             }
             animatingRef.current = false;
+            onComplete?.();
         };
         clip.addEventListener('transitionend', onEnd);
         window.setTimeout(() => {
@@ -167,15 +174,29 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
             if (!toCollapsed)
                 setH('auto');
             animatingRef.current = false;
+            onComplete?.();
         }, transitionMs + 50);
     };
-    useEffect(() => {
-        const clip = clipRef.current;
-        const inner = innerRef.current;
-        if (!clip || !inner)
+    useLayoutEffect(() => {
+        if (!collapsible)
             return;
-        clip.style.height = collapsed ? '0px' : 'auto';
-    }, []);
+        if (isInitialMountRef.current) {
+            isInitialMountRef.current = false;
+            const clip = clipRef.current;
+            if (clip) {
+                clip.style.height = collapsed ? '0px' : 'auto';
+            }
+            setContentHidden(collapsed);
+            return;
+        }
+        if (collapsed) {
+            animate(true, () => setContentHidden(true));
+        }
+        else {
+            setContentHidden(false);
+            animate(false);
+        }
+    }, [collapsed, collapsible]);
     useEffect(() => {
         if (collapsed)
             return;
@@ -202,14 +223,14 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
                         ? resolveText(t, title)
                         : title,
                     badge && (React.createElement(Badge, { variant: "secondary", size: "s" }, badge)))),
-            React.createElement("div", { className: "designbase-figma-section__controls" },
+            React.createElement("div", { className: "designbase-figma-section__controls", onClick: (e) => e.stopPropagation() },
                 iconButton,
                 collapsible && (React.createElement("span", { className: `designbase-figma-section__collapse-icon ${collapsed ? 'designbase-figma-section__collapse-icon--collapsed' : ''}` },
                     React.createElement(ChevronDownIcon, { size: 16 }))),
                 onToggle && (React.createElement(Toggle, { checked: isEnabled, onChange: () => onToggle(dataCategory), size: "s" }))))),
         React.createElement("div", { className: `designbase-figma-section__content ${!isEnabled ? 'designbase-figma-section__content--hidden' : ''}` },
             React.createElement("div", { ref: clipRef, className: "designbase-figma-section__content-clip" },
-                React.createElement("div", { ref: innerRef, className: `designbase-figma-section__content-inner ${collapsible && collapsed ? 'is-collapsed' : ''}` }, children)))));
+                React.createElement("div", { ref: innerRef, className: `designbase-figma-section__content-inner ${collapsible && contentHidden ? 'is-collapsed' : ''}` }, children)))));
 };
 FigmaSection.displayName = 'FigmaSection';
 const scrollToSection = (category, headerHeight = 94) => {