@ehfuse/mui-virtual-data-table 1.0.3 → 1.0.4

package/dist/index.js

@@ -457,6 +457,7 @@ showScrollbar = true, }, ref) => {
     const [dragStart, setDragStart] = react.useState({ y: 0, scrollTop: 0 });
     const [thumbHeight, setThumbHeight] = react.useState(0);
     const [thumbTop, setThumbTop] = react.useState(0);
+    const [hasScrollableContent, setHasScrollableContent] = react.useState(false);
     // 드래그 스크롤 상태
     const [isDragScrolling, setIsDragScrolling] = react.useState(false);
     const [dragScrollStart, setDragScrollStart] = react.useState({
@@ -593,9 +594,33 @@ showScrollbar = true, }, ref) => {
             return containerRef.current;
         }
         // children 요소에서 스크롤 가능한 요소 찾기
+        // 중첩된 OverlayScrollbar의 영역은 제외 (다른 OverlayScrollbar의 container는 스킵)
         const childScrollableElements = containerRef.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');
         for (const child of childScrollableElements) {
             const element = child;
+            // 이 요소가 다른 OverlayScrollbar의 container인지 확인
+            // (자신의 containerRef는 아니어야 하고, overlay-scrollbar-container 클래스를 가진 경우)
+            if (element !== containerRef.current &&
+                element.classList.contains("overlay-scrollbar-container")) {
+                // 중첩된 OverlayScrollbar의 container이므로 스킵
+                continue;
+            }
+            // 이 요소의 부모 중에 다른 OverlayScrollbar container가 있는지 확인
+            let parent = element.parentElement;
+            let isNestedInAnotherScrollbar = false;
+            while (parent && parent !== containerRef.current) {
+                if (parent.classList.contains("overlay-scrollbar-container") &&
+                    parent !== containerRef.current) {
+                    // 다른 OverlayScrollbar 내부의 요소이므로 스킵
+                    isNestedInAnotherScrollbar = true;
+                    break;
+                }
+                parent = parent.parentElement;
+            }
+            if (isNestedInAnotherScrollbar) {
+                continue;
+            }
+            // 스크롤 가능한 요소인지 확인
             if (element.scrollHeight > element.clientHeight + 2) {
                 cachedScrollContainerRef.current = element;
                 return element;
@@ -628,15 +653,18 @@ showScrollbar = true, }, ref) => {
     }, [clearHideTimer, finalAutoHideConfig.enabled]);
     // 스크롤바 위치 및 크기 업데이트
     const updateScrollbar = react.useCallback(() => {
-        if (!scrollbarRef.current)
-            return;
         const scrollableElement = findScrollableElement();
         if (!scrollableElement) {
             // 스크롤 불가능하면 숨김
             setScrollbarVisible(false);
+            setHasScrollableContent(false);
             clearHideTimer();
             return;
         }
+        // 스크롤 가능한 콘텐츠가 있음을 표시
+        setHasScrollableContent(true);
+        if (!scrollbarRef.current)
+            return;
         // 자동 숨김이 비활성화되어 있으면 스크롤바를 항상 표시
         if (!finalAutoHideConfig.enabled) {
             setScrollbarVisible(true);
@@ -894,10 +922,25 @@ showScrollbar = true, }, ref) => {
         const container = containerRef.current;
         if (container && !scrollableElement) {
             elementsToWatch.push(container);
-            // children 요소들의 스크롤도 감지
+            // children 요소들의 스크롤도 감지 (중첩된 OverlayScrollbar 제외)
             const childScrollableElements = container.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');
             childScrollableElements.forEach((child) => {
-                elementsToWatch.push(child);
+                const element = child;
+                // 다른 OverlayScrollbar의 container는 제외
+                if (element !== container &&
+                    element.classList.contains("overlay-scrollbar-container")) {
+                    return;
+                }
+                // 부모 중에 다른 OverlayScrollbar container가 있으면 제외
+                let parent = element.parentElement;
+                while (parent && parent !== container) {
+                    if (parent.classList.contains("overlay-scrollbar-container") &&
+                        parent !== container) {
+                        return; // 중첩된 OverlayScrollbar 내부이므로 제외
+                    }
+                    parent = parent.parentElement;
+                }
+                elementsToWatch.push(element);
             });
         }
         // 모든 요소에 이벤트 리스너 등록
@@ -1037,16 +1080,13 @@ showScrollbar = true, }, ref) => {
     }, [updateScrollbar]);
     // 컴포넌트 초기화 완료 표시 (hover 이벤트 활성화용)
     react.useLayoutEffect(() => {
-        const timer = setTimeout(() => {
-            setIsInitialized(true);
-            // 초기화 후 스크롤바 업데이트 (썸 높이 정확하게 계산)
-            updateScrollbar();
-            // 자동 숨김이 비활성화되어 있으면 스크롤바를 항상 표시
-            if (!finalAutoHideConfig.enabled && isScrollable()) {
-                setScrollbarVisible(true);
-            }
-        }, 0);
-        return () => clearTimeout(timer);
+        setIsInitialized(true);
+        // 초기화 직후 스크롤바 업데이트 (썸 높이 정확하게 계산)
+        updateScrollbar();
+        // 자동 숨김이 비활성화되어 있으면 스크롤바를 항상 표시
+        if (!finalAutoHideConfig.enabled && isScrollable()) {
+            setScrollbarVisible(true);
+        }
     }, [isScrollable, updateScrollbar, finalAutoHideConfig.enabled]);
     // Resize observer로 크기 변경 감지
     react.useEffect(() => {
@@ -1148,7 +1188,7 @@ showScrollbar = true, }, ref) => {
                         minHeight: 0, // flex shrink 허용
                         display: "flex", // flex 컨테이너로 설정
                         flexDirection: "column", // 세로 방향 정렬
-                    }, children: children }) }), showScrollbar && (jsxRuntime.jsxs("div", { ref: scrollbarRef, className: "overlay-scrollbar-track", onMouseEnter: () => {
+                    }, children: children }) }), showScrollbar && hasScrollableContent && (jsxRuntime.jsxs("div", { ref: scrollbarRef, className: "overlay-scrollbar-track", onMouseEnter: () => {
                     clearHideTimer();
                     setScrollbarVisible(true);
                 }, onMouseLeave: () => {
@@ -1211,7 +1251,7 @@ showScrollbar = true, }, ref) => {
                             borderRadius: `${finalThumbConfig.radius}px`,
                             cursor: "pointer",
                             transition: "background-color 0.2s ease-in-out, opacity 0.2s ease-in-out",
-                        } })] })), showScrollbar && showArrows && (jsxRuntime.jsx("div", { className: "overlay-scrollbar-up-arrow", onClick: handleUpArrowClick, onMouseEnter: () => setHoveredArrow("up"), onMouseLeave: () => setHoveredArrow(null), style: {
+                        } })] })), showScrollbar && hasScrollableContent && showArrows && (jsxRuntime.jsx("div", { className: "overlay-scrollbar-up-arrow", onClick: handleUpArrowClick, onMouseEnter: () => setHoveredArrow("up"), onMouseLeave: () => setHoveredArrow(null), style: {
                     position: "absolute",
                     top: `${finalTrackConfig.margin}px`,
                     right: finalTrackConfig.alignment === "right"
@@ -1237,7 +1277,7 @@ showScrollbar = true, }, ref) => {
                             : finalArrowsConfig.opacity
                         : 0,
                     transition: "opacity 0.2s ease-in-out, color 0.15s ease-in-out",
-                }, children: "\u25B2" })), showScrollbar && showArrows && (jsxRuntime.jsx("div", { className: "overlay-scrollbar-down-arrow", onClick: handleDownArrowClick, onMouseEnter: () => setHoveredArrow("down"), onMouseLeave: () => setHoveredArrow(null), style: {
+                }, children: "\u25B2" })), showScrollbar && hasScrollableContent && showArrows && (jsxRuntime.jsx("div", { className: "overlay-scrollbar-down-arrow", onClick: handleDownArrowClick, onMouseEnter: () => setHoveredArrow("down"), onMouseLeave: () => setHoveredArrow(null), style: {
                     position: "absolute",
                     bottom: `${finalTrackConfig.margin}px`,
                     right: finalTrackConfig.alignment === "right"