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

package/dist/index.js

@@ -423,7 +423,7 @@ const DEFAULT_TRACK_CONFIG = {};
 const DEFAULT_ARROWS_CONFIG = {};
 const DEFAULT_DRAG_SCROLL_CONFIG = {};
 const DEFAULT_AUTO_HIDE_CONFIG = {};
-const OverlayScrollbar = react.forwardRef(({ className = "", style = {}, children, onScroll, 
+const OverlayScrollbar = react.forwardRef(({ className = "", style = {}, containerStyle = {}, contentStyle = {}, children, onScroll, 
 // 그룹화된 설정 객체들
 thumb = DEFAULT_THUMB_CONFIG, track = DEFAULT_TRACK_CONFIG, arrows = DEFAULT_ARROWS_CONFIG, dragScroll = DEFAULT_DRAG_SCROLL_CONFIG, autoHide = DEFAULT_AUTO_HIDE_CONFIG, 
 // 기타 설정들
@@ -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(() => {
@@ -1131,24 +1171,11 @@ showScrollbar = true, }, ref) => {
             }
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { className: `overlay-scrollbar-wrapper ${className}`, style: Object.assign({ display: "flex", flexDirection: "column", position: "relative", minHeight: 0, height: "100%", flex: "1 1 0%" }, style), children: [jsxRuntime.jsx("div", { ref: containerRef, className: "overlay-scrollbar-container", tabIndex: -1, onMouseDown: handleDragScrollStart, style: {
-                    width: "100%", // 명시적 너비 설정
-                    height: "100%", // 부모의 전체 높이 사용
-                    flex: "1 1 auto", // flex item으로 설정하여 높이를 자동으로 계산
-                    minHeight: 0, // 최소 높이 보장
-                    overflow: "auto", // 네이티브 스크롤 기능 유지
+    return (jsxRuntime.jsxs("div", { className: `overlay-scrollbar-wrapper ${className}`, style: Object.assign({ display: "flex", flexDirection: "column", position: "relative", minHeight: 0, height: "100%", flex: "1 1 0%" }, style), children: [jsxRuntime.jsx("div", { ref: containerRef, className: "overlay-scrollbar-container", tabIndex: -1, onMouseDown: handleDragScrollStart, style: Object.assign({ width: "100%", height: "100%", flex: "1 1 auto", minHeight: 0, overflow: "auto", 
                     // 브라우저 기본 스크롤바만 숨기기
-                    scrollbarWidth: "none", // Firefox
-                    msOverflowStyle: "none", // IE/Edge
+                    scrollbarWidth: "none", msOverflowStyle: "none", 
                     // 키보드 포커스 스타일 (접근성)
-                    outline: "none", // 기본 아웃라인 제거
-                    userSelect: isDragScrolling ? "none" : "auto", // 드래그 중 텍스트 선택 방지
-                }, children: jsxRuntime.jsx("div", { ref: contentRef, className: "overlay-scrollbar-content", style: {
-                        height: "100%", // min-height 대신 height 사용
-                        minHeight: 0, // flex shrink 허용
-                        display: "flex", // flex 컨테이너로 설정
-                        flexDirection: "column", // 세로 방향 정렬
-                    }, children: children }) }), showScrollbar && (jsxRuntime.jsxs("div", { ref: scrollbarRef, className: "overlay-scrollbar-track", onMouseEnter: () => {
+                    outline: "none", userSelect: isDragScrolling ? "none" : "auto" }, containerStyle), children: jsxRuntime.jsx("div", { ref: contentRef, className: "overlay-scrollbar-content", style: Object.assign({ minHeight: 0, display: "flex", flexDirection: "column" }, contentStyle), children: children }) }), showScrollbar && hasScrollableContent && (jsxRuntime.jsxs("div", { ref: scrollbarRef, className: "overlay-scrollbar-track", onMouseEnter: () => {
                     clearHideTimer();
                     setScrollbarVisible(true);
                 }, onMouseLeave: () => {
@@ -1211,7 +1238,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 +1264,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"
@@ -1286,7 +1313,7 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
     // 각 테이블 인스턴스별로 Scroller 컴포넌트 생성 (scrollbars, paddingX를 초기값으로 고정)
     const VirtuosoScroller = react.useMemo(() => react.forwardRef((props, ref) => {
         const scrollContainerRef = react.useRef(null);
-        return (jsxRuntime.jsx(OverlayScrollbar, { track: OVERLAY_SCROLLBAR_TRACK_CONFIG, ...scrollbars, children: jsxRuntime.jsx(material.TableContainer, { component: material.Box, ...props, ref: (node) => {
+        return (jsxRuntime.jsx(OverlayScrollbar, { track: OVERLAY_SCROLLBAR_TRACK_CONFIG, contentStyle: { height: "100%" }, ...scrollbars, children: jsxRuntime.jsx(material.TableContainer, { component: material.Box, ...props, ref: (node) => {
                     scrollContainerRef.current =
                         node;
                     if (typeof ref === "function") {