small bug fix

- scrollHeightの変更が検知できていなかった問題を修正

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goemoncode/react-explorer-listview",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "description": "Windows Explorer like ListView component for React",
   "publishConfig": {

src/ListView.tsx

@@ -85,8 +85,10 @@ function ListView<R, K extends Key = Key>(
     []
   );
   const ref = useRef<HTMLDivElement>(null);
-  const [refs, viewportRows, rowsPerPage] = useViewportRows(
+  const refContainer = useRef<HTMLDivElement>(null);
+  const [refs1, refs2, viewportRows, rowsPerPage] = useViewportRows(
     ref,
+    refContainer,
     rows,
     headerHeight,
     focusedRowIndex
@@ -96,7 +98,7 @@ function ListView<R, K extends Key = Key>(
     refHandle,
     () => ({
       element: ref.current,
-      containerElement: null,
+      containerElement: refContainer.current,
       scrollToRow: (rowIndex: number) => {
         if (rowIndex >= 0 && rowIndex <= rows.length - 1) {
           setFocusedRow(getByRow(rows[rowIndex]));
@@ -244,11 +246,10 @@ function ListView<R, K extends Key = Key>(
   };
 
   const selectedSet = new Set(selectedRows);
-  const refContainer = useRef<HTMLDivElement>(null);
 
   return (
     <div
-      ref={refs}
+      ref={refs1}
       role="table"
       aria-rowcount={rows.length + 1}
       aria-multiselectable={true}
@@ -269,7 +270,7 @@ function ListView<R, K extends Key = Key>(
         </HeaderHeightProvider>
       </RowSortProvider>
       <div
-        ref={refContainer}
+        ref={refs2}
         role="rowgroup"
         className={cssClassnames.listViewBody}
         onKeyDown={handleKeyDown}

src/hooks/useViewportRows.ts

@@ -3,24 +3,32 @@ import { useMeasure, usePrevious, useScroll } from 'react-use';
 import { useMergeRefs } from './useMergeRefs';
 import { range } from '../utils';
 
-export function useViewportRows<R, E extends HTMLElement>(
-  ref: RefObject<E>,
+export function useViewportRows<R, E1 extends HTMLElement, E2 extends HTMLElement>(
+  ref1: RefObject<E1>,
+  ref2: RefObject<E2>,
   rows: readonly R[],
   headerHeight: number,
   focusedRowIndex: number
-): [refs: ReturnType<typeof useMergeRefs<E>>, viewportRows: number[], rowsPerPage: number] {
-  const { y: scrollTop } = useScroll(ref);
-  const [measureRef, { height: clientHeight }] = useMeasure<E>();
-  const refs = useMergeRefs(ref, measureRef);
+): [
+  refs1: ReturnType<typeof useMergeRefs<E1>>,
+  refs2: ReturnType<typeof useMergeRefs<E2>>,
+  viewportRows: number[],
+  rowsPerPage: number
+] {
+  const { y: scrollTop } = useScroll(ref1);
+  const [measureRef1, { height: clientHeight }] = useMeasure<E1>();
+  const [measureRef2, { height: scrollHeight }] = useMeasure<E2>();
+  const refs1 = useMergeRefs(ref1, measureRef1);
+  const refs2 = useMergeRefs(ref2, measureRef2);
   const viewportHeight = clientHeight - headerHeight;
   const prevFocusedRowIndex = usePrevious(focusedRowIndex) ?? -1;
 
   const [viewportRows, rowsPerPage] = useMemo(() => {
-    if (ref.current === null || rows.length === 0) return [[], 0];
+    if (scrollHeight === 0 || rows.length === 0) return [[], 0];
     function clamp(index: number) {
       return Math.max(0, Math.min(index, rows.length - 1));
     }
-    const rowHeight = ref.current.scrollHeight / rows.length;
+    const rowHeight = scrollHeight / rows.length;
     const rowsPerPage = Math.floor(viewportHeight / rowHeight);
     const viewportTopIndex = Math.floor(scrollTop / rowHeight);
     const overscanThreshold = 4;
@@ -35,7 +43,7 @@ export function useViewportRows<R, E extends HTMLElement>(
       ).values()
     ).sort();
     return [viewportRows, rowsPerPage];
-  }, [ref, rows.length, scrollTop, viewportHeight, prevFocusedRowIndex, focusedRowIndex]);
+  }, [focusedRowIndex, prevFocusedRowIndex, rows.length, scrollHeight, scrollTop, viewportHeight]);
 
-  return [refs, viewportRows, rowsPerPage];
+  return [refs1, refs2, viewportRows, rowsPerPage];
 }