@ehfuse/mui-virtual-data-table 1.0.2 → 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"
@@ -1365,6 +1405,7 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
     const initialScrollTopRef = react.useRef(0);
     const totalDragDistanceRef = react.useRef(0);
     const isScrollDraggingRef = react.useRef(false); // OverlayScrollbar 드래그 스크롤 감지용
+    const mouseDownPositionRef = react.useRef({ x: 0, y: 0 }); // 마우스 다운 시작 위치
     react.useRef(null);
     /**
      * 마우스 버튼 누름 이벤트 핸들러
@@ -1475,8 +1516,8 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
             return;
         }
         window.lastRangeChangeTime = now;
-        // 더 보수적인 조건: 85% 지점에서 로드 (기존 VirtualDataTable 방식)
-        const bufferSize = Math.max(10, Math.floor(data.length * 0.15)); // 데이터의 15% 또는 최소 10개
+        // 더 보수적인 조건: 90% 지점에서 로드 (기존 VirtualDataTable 방식)
+        const bufferSize = Math.max(10, Math.floor(data.length * 0.1)); // 데이터의 10% 또는 최소 10개
         const shouldLoadMore = range.endIndex >= data.length - bufferSize;
         // 추가 조건: 최소 30개 이상의 데이터에서만 더 가져오기 실행
         const hasMinimumData = data.length >= 30;
@@ -1800,12 +1841,22 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
             // react-virtuoso는 'data-index' 속성으로 index를 전달합니다
             const rowIndex = rest["data-index"] ?? 0;
             const isOddRow = rowIndex % 2 === 1;
-            return (jsxRuntime.jsx(material.TableRow, { ...rest, onMouseDown: () => {
-                    // 마우스 다운 시 드래그 플래그 초기화
+            return (jsxRuntime.jsx(material.TableRow, { ...rest, onMouseDown: (e) => {
+                    // 마우스 다운 시 드래그 플래그 초기화 및 시작 위치 저장
                     isScrollDraggingRef.current = false;
-                }, onMouseMove: () => {
-                    // 마우스가 눌린 상태로 움직이면 드래그로 간주
-                    isScrollDraggingRef.current = true;
+                    mouseDownPositionRef.current = {
+                        x: e.clientX,
+                        y: e.clientY,
+                    };
+                }, onMouseMove: (e) => {
+                    // 마우스가 5px 이상 움직였을 때만 드래그로 간주
+                    const deltaX = Math.abs(e.clientX - mouseDownPositionRef.current.x);
+                    const deltaY = Math.abs(e.clientY - mouseDownPositionRef.current.y);
+                    const dragThreshold = 5; // 5px 임계값
+                    if (deltaX > dragThreshold ||
+                        deltaY > dragThreshold) {
+                        isScrollDraggingRef.current = true;
+                    }
                 }, onClick: () => {
                     // 드래그 스크롤이 아니고, 아이템이 있고, onRowClick이 있을 때만 실행
                     if (!isScrollDraggingRef.current &&