@designbasekorea/figma-ui 0.1.49 → 0.1.50

package/dist/index.esm.js

@@ -110,31 +110,23 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
         .filter(Boolean)
         .join(' ');
     useEffect(() => {
-        if (!enableScrollNavigation || !onActiveSectionChange)
+        if (!enableScrollNavigation || !onActiveSectionChange || !sectionRef.current)
             return;
-        let scrollTimeout;
-        const handleScroll = () => {
-            if (scrollTimeout) {
-                clearTimeout(scrollTimeout);
-            }
-            scrollTimeout = setTimeout(() => {
-                if (!sectionRef.current)
-                    return;
-                const scrollPosition = window.scrollY + headerHeight;
-                const sectionTop = sectionRef.current.getBoundingClientRect().top + window.scrollY - headerHeight;
-                const sectionBottom = sectionRef.current.getBoundingClientRect().bottom + window.scrollY - headerHeight;
-                if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
+        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);
                 }
-            }, 50);
-        };
-        window.addEventListener('scroll', handleScroll);
-        handleScroll();
+            });
+        }, observerOptions);
+        observer.observe(sectionRef.current);
         return () => {
-            window.removeEventListener('scroll', handleScroll);
-            if (scrollTimeout) {
-                clearTimeout(scrollTimeout);
-            }
+            observer.disconnect();
         };
     }, [enableScrollNavigation, dataCategory, headerHeight, onActiveSectionChange]);
     return (React.createElement("section", { ref: sectionRef, className: classes, ...(dataCategory ? { 'data-category': dataCategory } : {}), style: sectionStyle },
@@ -226,56 +218,37 @@ const FigmaSidebar = ({ categories, categoryGroups = {}, categoryLabels = {}, ac
         }
     }, [currentActiveCategory, scrollPadding]);
     useEffect(() => {
-        let scrollTimeout;
-        const scrollContainer = scrollContainerId
-            ? document.getElementById(scrollContainerId)
-            : window;
-        const handleScroll = () => {
-            if (scrollTimeout) {
-                clearTimeout(scrollTimeout);
-            }
-            scrollTimeout = setTimeout(() => {
-                const sections = document.querySelectorAll('section[data-category]');
-                let activeSection = null;
-                if (scrollContainer && scrollContainer !== window) {
-                    const containerElement = scrollContainer;
-                    const containerRect = containerElement.getBoundingClientRect();
-                    const scrollPosition = containerElement.scrollTop + headerHeight;
-                    for (const section of Array.from(sections)) {
-                        const category = section.getAttribute('data-category');
-                        if (!category)
-                            continue;
-                        const sectionRect = section.getBoundingClientRect();
-                        const sectionTop = sectionRect.top - containerRect.top + containerElement.scrollTop - headerHeight;
-                        const sectionBottom = sectionTop + section.clientHeight;
-                        if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
-                            activeSection = category;
-                            break;
-                        }
+        const sections = document.querySelectorAll('section[data-category]');
+        if (sections.length === 0)
+            return;
+        const observerOptions = {
+            root: scrollContainerId ? document.getElementById(scrollContainerId) : null,
+            rootMargin: `-${headerHeight}px 0px -50% 0px`,
+            threshold: 0
+        };
+        const observer = new IntersectionObserver((entries) => {
+            let maxRatio = 0;
+            let activeSection = null;
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
+                    maxRatio = entry.intersectionRatio;
+                    const category = entry.target.getAttribute('data-category');
+                    if (category) {
+                        activeSection = category;
                     }
                 }
-                else {
-                    activeSection = getActiveSection(headerHeight);
-                }
-                if (activeSection && activeSection !== currentActiveCategory) {
-                    setInternalActiveCategory(activeSection);
-                    onCategoryClick?.(activeSection);
-                }
-            }, 50);
-        };
-        if (scrollContainer) {
-            scrollContainer.addEventListener('scroll', handleScroll);
-            handleScroll();
-        }
-        return () => {
-            if (scrollContainer) {
-                scrollContainer.removeEventListener('scroll', handleScroll);
-            }
-            if (scrollTimeout) {
-                clearTimeout(scrollTimeout);
+            });
+            if (activeSection && activeSection !== currentActiveCategory) {
+                setInternalActiveCategory(activeSection);
             }
+        }, observerOptions);
+        sections.forEach((section) => {
+            observer.observe(section);
+        });
+        return () => {
+            observer.disconnect();
         };
-    }, [currentActiveCategory, headerHeight, onCategoryClick, scrollContainerId]);
+    }, [currentActiveCategory, headerHeight, scrollContainerId]);
     const classes = [
         'designbase-figma-sidebar',
         className,