@aurora-ds/components 0.17.8 → 0.17.10

package/dist/cjs/components/layout/grid/Grid.props.d.ts

@@ -3,9 +3,9 @@ import { CSSProperties, ReactNode } from 'react';
 export type GridProps = {
     /** Grid children elements */
     children: ReactNode;
-    /** Number of columns (number or CSS grid-template-columns value) */
+    /** Number of columns (number or CSS grid-template-columns value). Acts as max columns when minChildWidth is set. */
     columns?: number | string;
-    /** Number of rows (number or CSS grid-template-rows value) */
+    /** Number of rows (number or CSS grid-template-rows value). */
     rows?: number | string;
     /** Gap between items (theme spacing key) */
     gap?: keyof Theme['spacing'];

package/dist/cjs/index.js

@@ -1892,12 +1892,23 @@ Card.displayName = 'Card';
 
 /**
  * Generates the grid-template-columns value based on columns and minChildWidth props
+ * - If only columns is defined: creates a fixed number of columns
+ * - If only minChildWidth is defined: creates responsive auto-fill columns
+ * - If both are defined: creates responsive columns with a maximum limit
  */
 const getGridTemplateColumns = (columns, minChildWidth) => {
+    const minWidthValue = typeof minChildWidth === 'number' ? `${minChildWidth}px` : minChildWidth;
+    if (minChildWidth && typeof columns === 'number') {
+        // Responsive grid with max columns limit
+        // Uses auto-fit with max() to ensure we don't exceed the column limit
+        return `repeat(auto-fit, minmax(max(${minWidthValue}, calc((100% - ${(columns - 1)} * var(--grid-gap, 0px)) / ${columns})), 1fr))`;
+    }
     if (minChildWidth) {
-        return `repeat(auto-fill, minmax(${typeof minChildWidth === 'number' ? `${minChildWidth}px` : minChildWidth}, 1fr))`;
+        // Responsive grid without column limit
+        return `repeat(auto-fill, minmax(${minWidthValue}, 1fr))`;
     }
     if (typeof columns === 'number') {
+        // Fixed columns
         return `repeat(${columns}, 1fr)`;
     }
     return columns;
@@ -1915,22 +1926,28 @@ const getGridTemplateRows = (rows) => {
  * Grid styles using createStyles from @aurora-ds/theme
  */
 const GRID_STYLES = theme.createStyles((theme) => ({
-    root: ({ columns, rows, gap, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => ({
-        display: 'grid',
-        gridTemplateColumns: getGridTemplateColumns(columns, minChildWidth),
-        gridTemplateRows: getGridTemplateRows(rows),
-        gap: gap ? theme.spacing[gap] : undefined,
-        columnGap: columnGap ? theme.spacing[columnGap] : undefined,
-        rowGap: rowGap ? theme.spacing[rowGap] : undefined,
-        width,
-        height,
-        minHeight,
-        alignItems,
-        justifyItems,
-        alignContent,
-        justifyContent,
-        padding: padding ? theme.spacing[padding] : undefined,
-    }),
+    root: ({ columns, rows, gap, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
+        const gapValue = gap ? theme.spacing[gap] : undefined;
+        const columnGapValue = columnGap ? theme.spacing[columnGap] : gapValue;
+        return {
+            display: 'grid',
+            gridTemplateColumns: getGridTemplateColumns(columns, minChildWidth),
+            gridTemplateRows: getGridTemplateRows(rows),
+            gap: gapValue,
+            columnGap: columnGap ? theme.spacing[columnGap] : undefined,
+            rowGap: rowGap ? theme.spacing[rowGap] : undefined,
+            width,
+            height,
+            minHeight,
+            alignItems,
+            justifyItems,
+            alignContent,
+            justifyContent,
+            padding: padding ? theme.spacing[padding] : undefined,
+            // CSS variable for gap calculation in grid-template-columns
+            '--grid-gap': columnGapValue || gapValue || '0px',
+        };
+    },
 }));
 
 /**