@designbasekorea/figma-ui 0.1.76 → 0.1.78

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState, createContext, useContext, useCallback } from 'react';
-import { HeartFilledIcon, CoffeeFilledIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon } from '@designbasekorea/icons';
+import { HeartFilledIcon, CoffeeFilledIcon, ChevronDownIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon } from '@designbasekorea/icons';
 import { Button, SplitView, Toggle, Spinner, Badge, SegmentControl, Logo, ToastContainer, Toast, Input, Modal, Progressbar } from '@designbasekorea/ui';
 export * from '@designbasekorea/ui';
 
@@ -101,16 +101,39 @@ 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 }) => {
+const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, t, collapsible = false, defaultCollapsed = false, onCollapseChange }) => {
     const sectionRef = useRef(null);
+    const contentRef = useRef(null);
+    const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
     const sectionStyle = marginBottom ? { marginBottom: `${marginBottom}px` } : {};
     const classes = [
         'designbase-figma-section',
         !isEnabled && 'designbase-figma-section--disabled',
+        collapsible && 'designbase-figma-section--collapsible',
+        isCollapsed && collapsible && 'designbase-figma-section--collapsed',
         className,
     ]
         .filter(Boolean)
         .join(' ');
+    const handleHeaderClick = () => {
+        if (collapsible) {
+            const newCollapsed = !isCollapsed;
+            setIsCollapsed(newCollapsed);
+            if (onCollapseChange) {
+                onCollapseChange(newCollapsed, dataCategory);
+            }
+        }
+    };
+    React.useEffect(() => {
+        if (collapsible && contentRef.current) {
+            if (!isCollapsed) {
+                contentRef.current.style.maxHeight = `${contentRef.current.scrollHeight}px`;
+            }
+            else {
+                contentRef.current.style.maxHeight = '0px';
+            }
+        }
+    }, [isCollapsed, collapsible]);
     useEffect(() => {
         if (!enableScrollNavigation || !onActiveSectionChange || !sectionRef.current)
             return;
@@ -132,12 +155,14 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
         };
     }, [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" },
+        title && (React.createElement("div", { className: "designbase-figma-section__header", onClick: collapsible ? handleHeaderClick : 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' : ''}` },
+                    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' : ''}` }, children)));
+        React.createElement("div", { ref: contentRef, className: `designbase-figma-section__content ${!isEnabled ? 'designbase-figma-section__content--hidden' : ''} ${isCollapsed && collapsible ? 'designbase-figma-section__content--collapsed' : ''}` }, children)));
 };
 FigmaSection.displayName = 'FigmaSection';
 const scrollToSection = (category, headerHeight = 94) => {