@boostdev/design-system-components 2.2.0 → 2.2.1

package/src/components/layout/Grid/Grid.tsx

@@ -1,4 +1,5 @@
 import {
+  Context,
   ElementType,
   ComponentPropsWithoutRef,
   CSSProperties,
@@ -23,9 +24,14 @@ export type GridContextValue = {
   autoSpanMedia: boolean;
 };
 
-export const GridContext = createContext<GridContextValue>({
-  autoSpanMedia: false,
-});
+// Lazy-initialised so the module can be evaluated in Next.js Server Components
+// without calling `createContext` at import time (which crashes RSC — `react-server`
+// export conditions don't expose `createContext`).
+let _GridContext: Context<GridContextValue>;
+export function getGridContext(): Context<GridContextValue> {
+  _GridContext ??= createContext<GridContextValue>({ autoSpanMedia: false });
+  return _GridContext;
+}
 
 type GridOwnProps = WithClassName & {
   variant?: GridVariant;
@@ -75,6 +81,7 @@ export function Grid<C extends ElementType = 'div'>({
 
   const Component = as ?? 'div';
 
+  const GridContext = getGridContext();
   const ctx = useMemo<GridContextValue>(() => ({ autoSpanMedia }), [autoSpanMedia]);
 
   return (

package/src/components/layout/Grid/GridItem.tsx

@@ -10,7 +10,7 @@ import {
 import css from './Grid.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
-import { GridContext } from './Grid';
+import { getGridContext } from './Grid';
 import {
   aspectToColumnSpan,
   findMediaChild,
@@ -75,7 +75,7 @@ export function GridItem<C extends ElementType = 'div'>({
   style,
   ...rest
 }: GridItemProps<C>) {
-  const { autoSpanMedia } = useContext(GridContext);
+  const { autoSpanMedia } = useContext(getGridContext());
   const effectiveSpan: GridItemSpanValue =
     columnSpan ?? (autoSpanMedia ? 'auto' : 'full');
 

package/src/components/layout/Grid/masonry.ts

@@ -53,10 +53,14 @@ export function applyMasonryLayout(container: HTMLElement, rawChildren: HTMLElem
   );
 
   // Pass 1 — clear prior row-span overrides so items measure at their natural height.
+  // Also force `align-self: start`: the default `stretch` would grow each item to fill
+  // the 1px track, making `offsetHeight` return 1 for every child. Keeping `start` after
+  // the span is assigned also prevents items from stretching into the gap region.
   for (const child of children) {
     child.style.gridRow = '';
     child.style.gridRowStart = '';
     child.style.gridRowEnd = '';
+    child.style.alignSelf = 'start';
   }
 
   // Pass 2 — read all heights in a tight loop. The first offsetHeight read forces one
@@ -81,6 +85,7 @@ export function clearMasonryLayout(container: HTMLElement, rawChildren: HTMLElem
     child.style.gridRow = '';
     child.style.gridRowStart = '';
     child.style.gridRowEnd = '';
+    child.style.alignSelf = '';
   }
 }