@inf-monkeys-tech/monkeys-design 2.0.271 → 2.0.272

package/dist/sources/{74648a5f915c0bb5c62302200082831805032ad77b34d4834ccf14f48cf1adf7.ts → 568395c3cde80014adcd7ad3b0ecb7b6546a3ff197fece0206ed1a81bff31007.ts}

@@ -27,9 +27,13 @@ export function normalizeCardGridRange(count: number, range?: CardGridWindowRang
   return { start, end };
 }
 
-export function calculateCardGridRange(count: number, offset: number, viewport: number, extent: number, gap: number, overscan: number): CardGridWindowRange {
+export function calculateCardGridRange(count: number, offset: number, viewport: number, extent: number, gap: number, overscan: number, columns = 1): CardGridWindowRange {
   const stride = extent + gap;
   const extra = Math.max(0, Math.trunc(overscan));
+  if (columns > 1) {
+    const rows = calculateCardGridRange(Math.ceil(count / columns), offset, viewport, extent, gap, overscan);
+    return { start: rows.start * columns, end: Math.min(count, rows.end * columns) };
+  }
   return normalizeCardGridRange(count, { start: Math.max(0, Math.floor(offset / stride) - extra), end: Math.ceil(Math.max(0, offset + viewport) / stride) + extra });
 }
 
@@ -56,7 +60,7 @@ export function useCardGridWindow(config: CardGridWindowing | undefined, count:
   const currentRange = normalizeCardGridRange(count, range);
   const committed = useRef(currentRange);
   committed.current = currentRange;
-  const [geometry, setGeometry] = useState({ extent: config?.itemExtent ?? 0, gap: config?.gap ?? 0, fallback: false, grid: false });
+  const [geometry, setGeometry] = useState({ extent: config?.itemExtent ?? 0, gap: config?.gap ?? 0, fallback: false, grid: false, columns: 1 });
   const [focused, setFocused] = useState(false);
   const focusedElement = useRef<Element | null>(null);
   const axis = config?.axis ?? 'vertical';
@@ -72,7 +76,7 @@ export function useCardGridWindow(config: CardGridWindowing | undefined, count:
     callback.current?.(next);
   }, [count]);
   useEffect(() => {
-    setGeometry({ extent: config?.itemExtent ?? 0, gap: config?.gap ?? 0, fallback: false, grid: false });
+    setGeometry({ extent: config?.itemExtent ?? 0, gap: config?.gap ?? 0, fallback: false, grid: false, columns: 1 });
     lastSent.current = undefined;
   }, [config?.itemExtent, config?.gap, config?.enabled, axis]);
   useEffect(() => {
@@ -97,7 +101,9 @@ export function useCardGridWindow(config: CardGridWindowing | undefined, count:
       const horizontal = axis === 'horizontal';
       // Retain the complete layout rather than estimate wrapping or mixed-size cards.
       const crossTracks = (horizontal ? css.gridTemplateRows : css.gridTemplateColumns).trim().split(/\s+/);
-      const grid = css.display === 'grid' && css.gridAutoFlow === (horizontal ? 'column' : 'row') && crossTracks.length === 1 && Number.parseFloat(horizontal ? css.gridAutoColumns : css.gridAutoRows) > 0;
+      const rowGrid = !horizontal && css.display === 'grid' && css.gridAutoFlow === 'row' && crossTracks.every(track => Number.parseFloat(track) > 0);
+      const grid = rowGrid || css.display === 'grid' && css.gridAutoFlow === (horizontal ? 'column' : 'row') && crossTracks.length === 1 && Number.parseFloat(horizontal ? css.gridAutoColumns : css.gridAutoRows) > 0;
+      const columns = rowGrid ? crossTracks.length : 1;
       const flex = css.display === 'flex' && css.flexWrap !== 'wrap' && css.flexWrap !== 'wrap-reverse' && (horizontal ? css.flexDirection !== 'column' : css.flexDirection === 'column');
       if (!grid && !flex) {
         setGeometry(previous => previous.fallback ? previous : ({ ...previous, fallback: true }));
@@ -116,8 +122,8 @@ export function useCardGridWindow(config: CardGridWindowing | undefined, count:
           }
         }
       }
-      const geometryChanged = Math.abs(extent - geometry.extent) > .25 || Math.abs(gap - geometry.gap) > .25 || grid !== geometry.grid || geometry.fallback;
-      if (geometryChanged) setGeometry(previous => ({ ...previous, extent, gap, grid, fallback: false }));
+      const geometryChanged = Math.abs(extent - geometry.extent) > .25 || Math.abs(gap - geometry.gap) > .25 || grid !== geometry.grid || columns !== geometry.columns || geometry.fallback;
+      if (geometryChanged) setGeometry(previous => ({ ...previous, extent, gap, grid, columns, fallback: false }));
       // Restore after measured spacer tracks exist; restoring earlier can clamp the offset.
       if (windowKey && restored.current !== windowKey) {
         const saved = retention.get(windowKey);
@@ -134,7 +140,7 @@ export function useCardGridWindow(config: CardGridWindowing | undefined, count:
       const selfOffset = owner === root ? (horizontal ? root.scrollLeft : root.scrollTop) : 0;
       const offset = Math.max(0, viewportStart - start + selfOffset - lead);
       const visibleEnd = Math.max(0, viewportEnd - start + selfOffset - lead);
-      const next = calculateCardGridRange(count, offset, Math.max(0, visibleEnd - offset), extent, gap, config?.overscan ?? 2);
+      const next = calculateCardGridRange(count, offset, Math.max(0, visibleEnd - offset), extent, gap, config?.overscan ?? 2, columns);
       if (focused && config?.preserveFocus !== false) {
         let item = focusedElement.current?.closest<HTMLElement>('[data-collection-window-item]') ?? null;
         while (item && item.closest('.monkeys-ui-card-grid') !== root) item = item.parentElement?.closest<HTMLElement>('[data-collection-window-item]') ?? null;
@@ -158,7 +164,7 @@ export function useCardGridWindow(config: CardGridWindowing | undefined, count:
     root.querySelectorAll<HTMLElement>('[data-collection-window-item]').forEach(item => observer?.observe(item));
     schedule();
     return () => { disposed = true; retain(); if (frame) cancelAnimationFrame(frame); observer?.disconnect(); owner.removeEventListener('scroll', onScroll); window.removeEventListener('resize', schedule); };
-  }, [requested, active, suspended, count, axis, geometry.extent, geometry.gap, geometry.grid, config?.itemExtent, config?.gap, config?.leadingExtent, config?.overscan, config?.scrollOwner, config?.measureItems, config?.sizeTolerance, currentRange.start, currentRange.end, focused, config?.preserveFocus, send, windowKey, retention, config?.retentionLimit]);
+  }, [requested, active, suspended, count, axis, geometry.extent, geometry.gap, geometry.grid, geometry.columns, config?.itemExtent, config?.gap, config?.leadingExtent, config?.overscan, config?.scrollOwner, config?.measureItems, config?.sizeTolerance, currentRange.start, currentRange.end, focused, config?.preserveFocus, send, windowKey, retention, config?.retentionLimit]);
   useEffect(() => {
     if (!focused) return;
     const release = () => {
@@ -174,7 +180,7 @@ export function useCardGridWindow(config: CardGridWindowing | undefined, count:
   }, [focused]);
   const stride = geometry.extent + geometry.gap;
   // Keep spacers until the author has applied the full-range fallback request.
-  const before = requested && currentRange.start > 0 ? Math.max(0, currentRange.start * stride - geometry.gap) : 0;
-  const after = requested && currentRange.end < count ? Math.max(0, (count - currentRange.end) * stride - geometry.gap) : 0;
-  return { ref, before, after, beforeCount: currentRange.start, afterCount: count - currentRange.end, grid: geometry.grid, axis, retention, onFocus: (target: EventTarget | null) => { if (requested && config?.preserveFocus !== false) { focusedElement.current = target instanceof Element ? target : null; setFocused(true); } } };
+  const before = requested && currentRange.start > 0 ? Math.max(0, Math.floor(currentRange.start / geometry.columns) * stride - geometry.gap) : 0;
+  const after = requested && currentRange.end < count ? Math.max(0, Math.ceil((count - currentRange.end) / geometry.columns) * stride - geometry.gap) : 0;
+  return { ref, before, after, beforeCount: currentRange.start, afterCount: count - currentRange.end, grid: geometry.grid, columns: geometry.columns, axis, retention, onFocus: (target: EventTarget | null) => { if (requested && config?.preserveFocus !== false) { focusedElement.current = target instanceof Element ? target : null; setFocused(true); } } };
 }

package/dist/sources/{7c8819fd9dea7d22ca7b31ade688ad068ff0a861b7797fa1dda486187d8a32e8.tsx → 9dd5e2cf837136a8ad4b5ad6de70a006120b7faa0f7d39e7c9f8e8e4c9aa27c4.tsx}

@@ -100,7 +100,7 @@ export const CardGrid = forwardRef<HTMLDivElement, CardGridProps>(function CardG
   const window = useCardGridWindow(windowing, windowItemCount, windowRange, onWindowRangeChange, sorting, windowKey);
   useCardGridRowCapacity(window.ref, rowPreview, onRowCapacityChange);
   const attach = useCallback((node: HTMLDivElement | null) => { window.ref.current = node; if (typeof forwardedRef === 'function') forwardedRef(node); else if (forwardedRef) forwardedRef.current = node; }, [forwardedRef, window.ref]);
-  const spacer = (size: number, key: string) => size > 0 ? <div key={key} aria-hidden="true" data-collection-window-spacer={key} style={{ flex: '0 0 auto', pointerEvents: 'none', ...(window.grid ? window.axis === 'horizontal' ? { gridColumn: 'span ' + (key === 'before' ? window.beforeCount : window.afterCount) } : { gridRow: 'span ' + (key === 'before' ? window.beforeCount : window.afterCount) } : {}), ...(window.axis === 'horizontal' ? { width: size, height: 1 } : { height: size, width: 1 }) }} /> : null;
+  const spacer = (size: number, key: string) => size > 0 ? <div key={key} aria-hidden="true" data-collection-window-spacer={key} style={{ flex: '0 0 auto', pointerEvents: 'none', ...(window.grid ? window.axis === 'horizontal' ? { gridColumn: 'span ' + (key === 'before' ? window.beforeCount : window.afterCount) } : window.columns > 1 ? { gridColumn: '1 / -1' } : { gridRow: 'span ' + (key === 'before' ? window.beforeCount : window.afterCount) } : {}), ...(window.axis === 'horizontal' ? { width: size, height: 1 } : { height: size, width: 1 }) }} /> : null;
   return <CardGridWindowRetention.Provider value={window.retention}><div {...props} ref={attach} role="list" data-view={view} className={cx('monkeys-ui-card-grid', className)} onFocusCapture={event => { onFocusCapture?.(event); window.onFocus(event.target); }} style={{ '--monkeys-ui-card-width': minCardWidth === undefined ? 'var(--monkeys-ui-layout-card-min-width,var(--monkeys-ui-default-layout-card-min-width))' : minCardWidth + 'px', ...(columnGap !== undefined ? { '--monkeys-ui-grid-column-gap': columnGap + 'px' } : {}), ...style } as CSSProperties}>
     <SortableCollection {...{reorderItems, reorderAxis, reorderGroupField, reorderDisabled, onReorder}} onSortingActiveChange={setSorting}>{leading}{spacer(window.before, 'before')}{children}{spacer(window.after, 'after')}{trailing}</SortableCollection>
   </div></CardGridWindowRetention.Provider>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inf-monkeys-tech/monkeys-design",
-  "version": "2.0.271",
+  "version": "2.0.272",
   "description": "Monkeys Design Components Library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",