u

src/FillSpace.jsx

@@ -55,10 +55,12 @@ function renderProbeElement(renderItem) {
 class FillSpace extends Component {
   constructor(props) {
     super(props);
+    const minSize = Math.max(1, Number(props.minPageSize) || 10);
+    const maxSize = Number(props.maxPageSize) > 0 ? Number(props.maxPageSize) : Infinity;
     this.state = {
       unitHeight: 0,
       viewportHeight: null,
-      pageSize: Number(props.minPageSize) || 10,
+      pageSize: Math.min(maxSize, minSize),
       currentPage: 1,
     };
     this.ref = null;
@@ -79,8 +81,13 @@ class FillSpace extends Component {
     if (prevProps.renderItem !== this.props.renderItem) {
       this._probeMeasure();
     }
-    if (prevProps.minPageSize !== this.props.minPageSize) {
+    if (
-      this.setState({ pageSize: Number(this.props.minPageSize) || 10 });
+      prevProps.minPageSize !== this.props.minPageSize ||
+      prevProps.maxPageSize !== this.props.maxPageSize
+    ) {
+      const minSize = Math.max(1, Number(this.props.minPageSize) || 10);
+      const maxSize = Number(this.props.maxPageSize) > 0 ? Number(this.props.maxPageSize) : Infinity;
+      this.setState({ pageSize: Math.min(maxSize, minSize) });
     }
     if (
       prevProps.aboveRef !== this.props.aboveRef ||
@@ -165,7 +172,8 @@ class FillSpace extends Component {
 
   /** Only measures the height of the `renderItem` probe. Nothing else. */
   _probeMeasure() {
-    const h = this.probeRef?.offsetHeight;
+    const firstRow = this.ref?.querySelector('[data-fill-row]');
+    const h = this.probeRef?.offsetHeight || firstRow?.offsetHeight;
     if (h > 0 && h !== this.state.unitHeight) {
       this.setState({ unitHeight: h }, () => this._viewportMeasure());
     }
@@ -197,14 +205,20 @@ class FillSpace extends Component {
       available = Math.max(0, window.innerHeight - rect.top - belowPx);
     }
     const minSize = Math.max(1, Number(minPageSize) || 10);
+    const maxSize = Number(this.props.maxPageSize) > 0 ? Number(this.props.maxPageSize) : Infinity;
     const { unitHeight } = this.state;
-    const nextPageSize =
+    const calculated =
       unitHeight > 0 ? Math.max(minSize, Math.floor(available / unitHeight)) : minSize;
+    const nextPageSize = Math.min(maxSize, calculated);
+    const nextViewportHeight =
+      Number.isFinite(maxSize) && unitHeight > 0
+        ? Math.min(available, nextPageSize * unitHeight)
+        : available;
     if (
-      available !== this.state.viewportHeight ||
+      nextViewportHeight !== this.state.viewportHeight ||
       nextPageSize !== this.state.pageSize
     ) {
-      this.setState({ viewportHeight: available, pageSize: nextPageSize });
+      this.setState({ viewportHeight: nextViewportHeight, pageSize: nextPageSize });
     }
   }
 
@@ -250,6 +264,8 @@ class FillSpace extends Component {
       minHeight,
       maxHeight,
       minPageSize,
+      maxPageSize,
+      listRef,
       onPageChange,
       onWheel,
       debug = false,
@@ -275,16 +291,11 @@ class FillSpace extends Component {
 
     return (
       <>
+        {showPagination ? (
           <Box
-          // Fixed single-line bar: the header height must not depend on the
-          // page count. Otherwise the first fit (e.g. "1-17") pushes the
-          // spacer down, the available height shrinks, and a second pass
-          // flips to "1-15". One pass: constant 44px, real values always
-          // rendered (only visibility is gated), no placeholder numbers.
             sx={{ mb: 1, height: 44, overflow: 'hidden' }}
           >
             <Box
-            aria-hidden={!showPagination || undefined}
               sx={{
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -293,8 +304,6 @@ class FillSpace extends Component {
                 gap: 1,
                 width: '100%',
                 height: 44,
-              visibility: showPagination ? 'visible' : 'hidden',
-              pointerEvents: showPagination ? 'auto' : 'none',
               }}
             >
               <Typography
@@ -329,6 +338,7 @@ class FillSpace extends Component {
               />
             </Box>
           </Box>
+        ) : null}
         <Box
           ref={(el) => {
             this.ref = el;
@@ -357,7 +367,7 @@ class FillSpace extends Component {
           ]}
         >
           <Box sx={{ width: '100%' }}>
-            <List dense disablePadding sx={{ width: '100%' }}>
+            <List ref={listRef} dense disablePadding sx={{ width: '100%' }}>
               {pageItems.map((item, i) => (
                 <Box key={item?.id ?? offset + i} data-fill-row sx={{ width: '100%' }}>
                   {renderRowElement(renderItem, item, offset + i)}