@ehfuse/mui-virtual-data-table 1.0.6 → 1.0.8

package/dist/index.js

@@ -427,7 +427,7 @@ const OverlayScrollbar = react.forwardRef(({ className = "", style = {}, contain
 // 그룹화된 설정 객체들
 thumb = DEFAULT_THUMB_CONFIG, track = DEFAULT_TRACK_CONFIG, arrows = DEFAULT_ARROWS_CONFIG, dragScroll = DEFAULT_DRAG_SCROLL_CONFIG, autoHide = DEFAULT_AUTO_HIDE_CONFIG, 
 // 기타 설정들
-showScrollbar = true, }, ref) => {
+showScrollbar = true, detectInnerScroll = false, }, ref) => {
     // props 변경 추적용 ref
     const prevPropsRef = react.useRef({});
     // 렌더링 시 어떤 prop이 변경되었는지 체크
@@ -444,6 +444,7 @@ showScrollbar = true, }, ref) => {
             autoHide,
         };
     });
+    const wrapperRef = react.useRef(null);
     const containerRef = react.useRef(null);
     const contentRef = react.useRef(null);
     const scrollbarRef = react.useRef(null);
@@ -593,6 +594,11 @@ showScrollbar = true, }, ref) => {
             cachedScrollContainerRef.current = containerRef.current;
             return containerRef.current;
         }
+        // detectInnerScroll 옵션이 활성화된 경우에만 children 내부의 스크롤 요소 찾기
+        // (가상 테이블 등 내부에서 스크롤을 처리하는 경우에 사용)
+        if (!detectInnerScroll) {
+            return null;
+        }
         // children 요소에서 스크롤 가능한 요소 찾기
         // 중첩된 OverlayScrollbar의 영역은 제외 (다른 OverlayScrollbar의 container는 스킵)
         const childScrollableElements = containerRef.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');
@@ -673,12 +679,20 @@ showScrollbar = true, }, ref) => {
         const containerHeight = scrollableElement.clientHeight;
         const contentHeight = scrollableElement.scrollHeight;
         const scrollTop = scrollableElement.scrollTop;
+        // wrapper의 패딩 계산 (상하 패딩만 필요)
+        let wrapperPaddingTopBottom = 0;
+        if (wrapperRef.current) {
+            const computedStyle = window.getComputedStyle(wrapperRef.current);
+            const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+            const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+            wrapperPaddingTopBottom = paddingTop + paddingBottom;
+        }
         // 화살표와 간격 공간 계산 (화살표 + 위아래 마진, 화살표 없어도 위아래 마진)
         const arrowSpace = showArrows
             ? finalThumbWidth * 2 + finalTrackConfig.margin * 4
             : finalTrackConfig.margin * 2;
-        // 썸 높이 계산 (사용자 설정 최소 높이 사용, 화살표 공간 제외)
-        const availableHeight = containerHeight - arrowSpace;
+        // 썸 높이 계산 (사용자 설정 최소 높이 사용, 화살표 공간 제외, wrapper 패딩 추가)
+        const availableHeight = containerHeight - arrowSpace + wrapperPaddingTopBottom;
         const scrollRatio = containerHeight / contentHeight;
         const calculatedThumbHeight = Math.max(availableHeight * scrollRatio, thumbMinHeight);
         // 썸 위치 계산 (화살표와 간격 공간 제외)
@@ -1171,7 +1185,7 @@ 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: Object.assign({ display: "flex", width: "100%", flex: "1 1 auto", minHeight: 0, overflow: "auto", 
+    return (jsxRuntime.jsxs("div", { ref: wrapperRef, 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({ display: "flex", width: "100%", flex: "1 1 auto", minHeight: 0, overflow: "auto", 
                     // 브라우저 기본 스크롤바만 숨기기
                     scrollbarWidth: "none", msOverflowStyle: "none", 
                     // 키보드 포커스 스타일 (접근성)
@@ -1303,17 +1317,10 @@ const OVERLAY_SCROLLBAR_TRACK_CONFIG = {
  * 데이터 기반 무한 스크롤 및 가상화를 지원하는 테이블 컴포넌트
  */
 function VirtualDataTableComponent({ data, loading = false, columns, onRowClick, rowHeight = 50, columnHeight = 56, striped, rowDivider = true, onSort, onLoadMore, sortBy, sortDirection, showPaper = true, paddingX = "1rem", paddingTop = 0, paddingBottom = 0, rowHoverColor, rowHoverOpacity, scrollbars, emptyMessage = "NO DATA", LoadingComponent, }) {
-    // console.log("=== VirtualDataTable 렌더링 ===", {
-    //     dataLength: data.length,
-    //     loading,
-    //     onLoadMore: !!onLoadMore,
-    //     columnsLength: columns.length,
-    //     timestamp: new Date().toISOString(),
-    // });
     // 각 테이블 인스턴스별로 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, { detectInnerScroll: true, track: OVERLAY_SCROLLBAR_TRACK_CONFIG, ...scrollbars, children: jsxRuntime.jsx(material.TableContainer, { component: material.Box, ...props, ref: (node) => {
                     scrollContainerRef.current =
                         node;
                     if (typeof ref === "function") {