react-responsive-overflow-list - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/components/OverflowList.d.mts

@@ -5,3 +5,2 @@ import React from "react";
     as?: React.ElementType;
-    minVisibleItems?: number;
     maxRows?: number;
@@ -8,0 +7,0 @@ maxVisibleItems?: number;

dist/components/OverflowList.d.ts

@@ -5,3 +5,2 @@ import React from "react";
     as?: React.ElementType;
-    minVisibleItems?: number;
     maxRows?: number;
@@ -8,0 +7,0 @@ maxVisibleItems?: number;

dist/index.js

@@ -141,3 +141,3 @@ //#region rolldown:runtime
 const OverflowList = react.default.memo(react.default.forwardRef(function OverflowList$1(props, forwardedRef) {
-	const { as: Component = "div", children, items = react.default.Children.toArray(children), minVisibleItems = 0, renderOverflow, renderItem = (item) => item, renderOverflowItem, renderOverflowProps, maxRows = 1, maxVisibleItems = 100, flushImmediately = true,...flexProps } = props;
+	const { as: Component = "div", children, items = react.default.Children.toArray(children), renderOverflow, renderItem = (item) => item, renderOverflowItem, renderOverflowProps, maxRows = 1, maxVisibleItems = 100, flushImmediately = true,...flexProps } = props;
 	const [visibleCount, setVisibleCount] = (0, react.useState)(items.length);
@@ -190,3 +190,5 @@ const [subtractCount, setSubtractCount] = (0, react.useState)(0);
 			const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;
-			if (itemWidth > containerWidth) return;
+			if (itemWidth > containerWidth) setVisibleCount(0);
+			else setVisibleCount(1);
+			return;
 		}
@@ -197,3 +199,2 @@ const visibleRowPositions = rowPositions.slice(0, maxRows);
 		}, 0);
-		fittingCount = Math.max(fittingCount, minVisibleItems);
 		fittingCount = Math.min(fittingCount, maxVisibleItems);
@@ -200,0 +201,0 @@ setVisibleCount(fittingCount);

dist/index.mjs

@@ -118,3 +118,3 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 const OverflowList = React.memo(React.forwardRef(function OverflowList$1(props, forwardedRef) {
-	const { as: Component = "div", children, items = React.Children.toArray(children), minVisibleItems = 0, renderOverflow, renderItem = (item) => item, renderOverflowItem, renderOverflowProps, maxRows = 1, maxVisibleItems = 100, flushImmediately = true,...flexProps } = props;
+	const { as: Component = "div", children, items = React.Children.toArray(children), renderOverflow, renderItem = (item) => item, renderOverflowItem, renderOverflowProps, maxRows = 1, maxVisibleItems = 100, flushImmediately = true,...flexProps } = props;
 	const [visibleCount, setVisibleCount] = useState(items.length);
@@ -167,3 +167,5 @@ const [subtractCount, setSubtractCount] = useState(0);
 			const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;
-			if (itemWidth > containerWidth) return;
+			if (itemWidth > containerWidth) setVisibleCount(0);
+			else setVisibleCount(1);
+			return;
 		}
@@ -174,3 +176,2 @@ const visibleRowPositions = rowPositions.slice(0, maxRows);
 		}, 0);
-		fittingCount = Math.max(fittingCount, minVisibleItems);
 		fittingCount = Math.min(fittingCount, maxVisibleItems);
@@ -177,0 +178,0 @@ setVisibleCount(fittingCount);

package.json

 {
   "name": "react-responsive-overflow-list",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A responsive React component that shows as many items as can fit within constraints, hiding overflow items behind a configurable overflow renderer",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -122,3 +122,2 @@ # react-responsive-overflow-list
 | `maxVisibleItems`     | `number`                                | `100`        | Hard cap on visible items.                                            |
-| `minVisibleItems`     | `number`                                | `0`          | Keep at least N visible.                                              |
 | `renderOverflow`      | `(hidden: T[]) => ReactNode`            | default chip | Custom overflow UI.                                                   |
@@ -142,3 +141,3 @@ | `renderOverflowItem`  | `(item: T, i: number) => ReactNode`     | `renderItem` | For expanded lists/menus.                                             |
   - **Demo:** see [Radix UI + Virtualization](https://eliav2.github.io/react-responsive-overflow-list/#radix-ui-virtualization-example) in the live site
-  - [**Source**](demo/src/examples/RadixVirtualizedOverflowList.tsx)
+  - [**Source**](demo/src/components/RadixVirtualizedOverflowList.tsx)
   - Uses `@tanstack/react-virtual` and the helper `createLimitedRangeExtractor(...)`.
@@ -160,3 +159,3 @@
 - Single wide item exceeding container width
-- `minVisibleItems` / `maxVisibleItems` respected
+- `maxRows` / `maxVisibleItems` respected
 - Varying item widths, responsive content
@@ -163,0 +162,0 @@ - Multi-row overflow detection

src/components/OverflowList.tsx

@@ -12,4 +12,2 @@ import React, { useLayoutEffect, useRef, useState } from "react";
   as?: React.ElementType;
-  // would define the minimum number of items that should be visible (default is 0)
-  minVisibleItems?: number;
 
@@ -73,3 +71,2 @@ // would define the maximum number of rows that can be visible (default is 1)
       items = React.Children.toArray(children),
-      minVisibleItems = 0,
       renderOverflow,
@@ -154,3 +151,3 @@ // if renderItem is not provided, this component is used in the children pattern, means each item is simply a React.ReactNode
 
-      // // edge case: if only 1 item is given, check if its width is bigger than the container width, if so set the maxRows to 0 (there is not enough space for the item, so we showing overflow indicator)
+      // edge case: if only 1 item is given, check if its width is bigger than the container width, if so set the maxRows to 0 (there is not enough space for the item, so we showing overflow indicator)
       if (items.length === 1) {
@@ -161,3 +158,6 @@ const itemRef = itemsSizesMap[rowPositions[0]].elements.values().next().value;
 
-        if (itemWidth > containerWidth) return;
+        if (itemWidth > containerWidth) {
+          setVisibleCount(0);
+        } else setVisibleCount(1);
+        return;
       }
@@ -173,5 +173,2 @@
 
-      // Ensure we respect minVisibleItems
-      fittingCount = Math.max(fittingCount, minVisibleItems);
-
       // Ensure we respect maxVisibleItems
@@ -178,0 +175,0 @@ fittingCount = Math.min(fittingCount, maxVisibleItems);

No alert changes

Worsened metrics

Total package byte prevSize

48874

-0.91%

Lines of code

896

-0.11%

Number of lines in readme file

171

-0.58%

No dependency changes