@designbasekorea/figma-ui 0.1.80 → 0.1.82

package/dist/index.js

@@ -33,14 +33,15 @@ const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', te
 };
 DonationBadge.displayName = 'DonationBadge';
 
-const FigmaContainer = ({ header, children, interactionFeedback, footer, headerHeight = 52, interactionHeight = 40, footerHeight = 60, footerMinHeight = 40, footerMaxHeight = 200, footerResizable = false, size = 'm', fullHeight = true, className, }) => {
+const FigmaContainer = ({ header, children, interactionFeedback, actionButton, footer, headerHeight = 52, interactionHeight = 40, actionButtonHeight = 52, footerHeight = 60, footerMinHeight = 40, footerMaxHeight = 200, footerResizable = false, size = 'm', fullHeight = true, className, }) => {
     const classes = clsx('designbase-figma-container', `designbase-figma-container--${size}`, {
         'designbase-figma-container--full-height': fullHeight,
         'designbase-figma-container--with-header': !!header,
         'designbase-figma-container--with-interaction': !!interactionFeedback,
+        'designbase-figma-container--with-action': !!actionButton,
         'designbase-figma-container--with-footer': !!footer,
     }, className);
-    if (!header && !interactionFeedback && !footer) {
+    if (!header && !interactionFeedback && !actionButton && !footer) {
         return (React.createElement("div", { className: classes },
             React.createElement("div", { className: "designbase-figma-container__main" }, children)));
     }
@@ -71,6 +72,16 @@ const FigmaContainer = ({ header, children, interactionFeedback, footer, headerH
             resizable: false,
         });
     }
+    if (actionButton) {
+        panels.push({
+            content: React.createElement("div", { className: "designbase-figma-container__action" }, actionButton),
+            size: actionButtonHeight,
+            minSize: actionButtonHeight,
+            maxSize: actionButtonHeight,
+            flexible: false,
+            resizable: false,
+        });
+    }
     if (footer) {
         panels.push({
             content: React.createElement("div", { className: "designbase-figma-container__footer" }, footer),
@@ -102,69 +113,110 @@ const FigmaHeader = ({ children, actions = [], searchBar, sticky = true, classNa
 };
 FigmaHeader.displayName = 'FigmaHeader';
 
-const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, t, collapsible = false, defaultCollapsed = false, onCollapseChange }) => {
+const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, t, collapsible = false, defaultCollapsed = false, onCollapseChange, }) => {
     const sectionRef = React.useRef(null);
-    const contentInnerRef = React.useRef(null);
-    const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
-    const sectionStyle = marginBottom ? { marginBottom: `${marginBottom}px` } : {};
+    const clipRef = React.useRef(null);
+    const innerRef = React.useRef(null);
+    const animatingRef = React.useRef(false);
+    const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
+    const sectionStyle = marginBottom ? { marginBottom: `${marginBottom}px` } : undefined;
     const classes = [
         'designbase-figma-section',
         !isEnabled && 'designbase-figma-section--disabled',
         collapsible && 'designbase-figma-section--collapsible',
-        isCollapsed && collapsible && 'designbase-figma-section--collapsed',
+        collapsed && collapsible && 'designbase-figma-section--collapsed',
         className,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const handleHeaderClick = () => {
-        if (collapsible) {
-            const newCollapsed = !isCollapsed;
-            setIsCollapsed(newCollapsed);
-            if (onCollapseChange) {
-                onCollapseChange(newCollapsed, dataCategory);
-            }
+    ].filter(Boolean).join(' ');
+    const toggle = () => {
+        if (!collapsible)
+            return;
+        setCollapsed(v => {
+            const next = !v;
+            onCollapseChange?.(next, dataCategory);
+            animate(next);
+            return next;
+        });
+    };
+    const animate = (toCollapsed) => {
+        const clip = clipRef.current;
+        const inner = innerRef.current;
+        if (!clip || !inner)
+            return;
+        const transitionMs = 250;
+        const setH = (h) => { clip.style.height = h; };
+        if (animatingRef.current) {
+            const current = `${clip.getBoundingClientRect().height}px`;
+            clip.style.transition = 'none';
+            setH(current);
+            clip.offsetHeight;
+            clip.style.transition = '';
+        }
+        animatingRef.current = true;
+        if (toCollapsed) {
+            const start = `${inner.scrollHeight}px`;
+            setH(start);
+            clip.offsetHeight;
+            setH('0px');
+        }
+        else {
+            setH('0px');
+            clip.offsetHeight;
+            setH(`${inner.scrollHeight}px`);
         }
+        const onEnd = (e) => {
+            if (e.propertyName !== 'height')
+                return;
+            clip.removeEventListener('transitionend', onEnd);
+            if (!toCollapsed) {
+                setH('auto');
+            }
+            animatingRef.current = false;
+        };
+        clip.addEventListener('transitionend', onEnd);
+        window.setTimeout(() => {
+            if (!animatingRef.current)
+                return;
+            if (!toCollapsed)
+                setH('auto');
+            animatingRef.current = false;
+        }, transitionMs + 50);
     };
     React.useEffect(() => {
-        if (collapsible && contentInnerRef.current) {
-            if (!isCollapsed) {
-                contentInnerRef.current.style.maxHeight = `${contentInnerRef.current.scrollHeight}px`;
-            }
-            else {
-                contentInnerRef.current.style.maxHeight = '0px';
-            }
-        }
-    }, [isCollapsed, collapsible]);
+        const clip = clipRef.current;
+        const inner = innerRef.current;
+        if (!clip || !inner)
+            return;
+        clip.style.height = collapsed ? '0px' : 'auto';
+    }, []);
+    React.useEffect(() => {
+        if (collapsed)
+            return;
+        const clip = clipRef.current;
+        const inner = innerRef.current;
+        if (!clip || !inner)
+            return;
+        if (clip.style.height === 'auto')
+            return;
+        clip.style.height = `${inner.scrollHeight}px`;
+    }, [children, collapsed]);
     React.useEffect(() => {
         if (!enableScrollNavigation || !onActiveSectionChange || !sectionRef.current)
             return;
-        const observerOptions = {
-            root: null,
-            rootMargin: `-${headerHeight}px 0px -50% 0px`,
-            threshold: 0
-        };
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    onActiveSectionChange(dataCategory);
-                }
-            });
-        }, observerOptions);
+        const observer = new IntersectionObserver(entries => entries.forEach(entry => entry.isIntersecting && onActiveSectionChange(dataCategory)), { root: null, rootMargin: `-${headerHeight}px 0px -50% 0px`, threshold: 0 });
         observer.observe(sectionRef.current);
-        return () => {
-            observer.disconnect();
-        };
+        return () => observer.disconnect();
     }, [enableScrollNavigation, dataCategory, headerHeight, onActiveSectionChange]);
     return (React.createElement("section", { ref: sectionRef, className: classes, ...(dataCategory ? { 'data-category': dataCategory } : {}), style: sectionStyle },
-        title && (React.createElement("div", { className: "designbase-figma-section__header", onClick: collapsible ? handleHeaderClick : undefined, style: collapsible ? { cursor: 'pointer' } : undefined },
+        title && (React.createElement("div", { className: "designbase-figma-section__header", onClick: collapsible ? toggle : undefined, style: collapsible ? { cursor: 'pointer' } : undefined },
             React.createElement("h2", { className: "designbase-figma-section__title" }, resolveText(t, title)),
             React.createElement("div", { className: "designbase-figma-section__controls" },
                 iconButton,
-                collapsible && (React.createElement("span", { className: `designbase-figma-section__collapse-icon ${isCollapsed ? 'designbase-figma-section__collapse-icon--collapsed' : ''}` },
+                collapsible && (React.createElement("span", { className: `designbase-figma-section__collapse-icon ${collapsed ? 'designbase-figma-section__collapse-icon--collapsed' : ''}` },
                     React.createElement(icons.ChevronDownIcon, { size: 16 }))),
                 onToggle && (React.createElement(ui.Toggle, { checked: isEnabled, onChange: () => onToggle(dataCategory), size: "s" }))))),
-        React.createElement("div", { className: `designbase-figma-section__content ${!isEnabled ? 'designbase-figma-section__content--hidden' : ''} ${isCollapsed && collapsible ? 'designbase-figma-section__content--collapsed' : ''}` },
-            React.createElement("div", { ref: contentInnerRef, className: "designbase-figma-section__content-inner" }, children))));
+        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)))));
 };
 FigmaSection.displayName = 'FigmaSection';
 const scrollToSection = (category, headerHeight = 94) => {