@slithy/react-grid-gallery 0.1.1 → 0.1.2

package/dist/index.js

@@ -1,10 +1,11 @@
 // src/computeGridLayout.ts
 function computeGridLayout(items, columns, cellWidth, cellHeight) {
-  if (items.length === 0 || columns <= 0 || cellWidth <= 0) return [];
+  if (items.length === 0 || !Number.isFinite(columns) || !Number.isFinite(cellWidth) || !Number.isFinite(cellHeight) || columns <= 0 || cellWidth <= 0 || cellHeight < 0) return [];
+  const columnCount = Math.max(1, Math.floor(columns));
   const rows = [];
-  for (let i = 0; i < items.length; i += columns) {
+  for (let i = 0; i < items.length; i += columnCount) {
     rows.push({
-      items: items.slice(i, i + columns),
+      items: items.slice(i, i + columnCount),
       width: cellWidth,
       height: cellHeight
     });
@@ -67,6 +68,12 @@ function useVirtualWindow(containerRef, enabled, scrollContainerRef) {
 }
 
 // src/useGridGallery.ts
+function finitePositive(value, fallback) {
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function finiteNonNegative(value, fallback = 0) {
+  return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
 function useGridGallery(items, options, scrollContainerRef) {
   const containerRef = useRef2(null);
   const [containerWidth, setContainerWidth] = useState2(0);
@@ -92,13 +99,16 @@ function useGridGallery(items, options, scrollContainerRef) {
   }, []);
   const onError = useCallback((_key) => {
   }, []);
+  const rawColumns = typeof options.columns === "function" ? options.columns(containerWidth) : options.columns;
   const resolvedColumns = Math.max(
     1,
-    Math.round(typeof options.columns === "function" ? options.columns(containerWidth) : options.columns)
+    Math.round(finitePositive(rawColumns, 1))
   );
-  const resolvedGap = typeof options.gap === "function" ? options.gap(containerWidth) : options.gap ?? 0;
-  const resolvedAspectRatio = typeof options.aspectRatio === "function" ? options.aspectRatio(containerWidth) : options.aspectRatio ?? 1;
-  const cellWidth = containerWidth > 0 ? Math.floor((containerWidth - resolvedGap * (resolvedColumns - 1)) / resolvedColumns) : 0;
+  const rawGap = typeof options.gap === "function" ? options.gap(containerWidth) : options.gap ?? 0;
+  const resolvedGap = finiteNonNegative(rawGap);
+  const rawAspectRatio = typeof options.aspectRatio === "function" ? options.aspectRatio(containerWidth) : options.aspectRatio ?? 1;
+  const resolvedAspectRatio = finitePositive(rawAspectRatio, 1);
+  const cellWidth = containerWidth > 0 ? Math.max(0, Math.floor((containerWidth - resolvedGap * (resolvedColumns - 1)) / resolvedColumns)) : 0;
   const cellHeight = cellWidth > 0 ? Math.round(cellWidth / resolvedAspectRatio) : 0;
   const rows = useMemo(() => {
     if (cellWidth === 0) return [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slithy/react-grid-gallery",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React grid gallery component.",
   "type": "module",
   "exports": {
@@ -28,13 +28,16 @@
     "tsup": "^8",
     "typescript": "^5",
     "vitest": "^4.1.2",
-    "@slithy/tsconfig": "0.0.0",
-    "@slithy/eslint-config": "0.0.0"
+    "@slithy/eslint-config": "0.0.0",
+    "@slithy/tsconfig": "0.0.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/mjcampagna/react-grid-gallery"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "author": "mjcampagna",
   "license": "MIT",
   "scripts": {