@aurora-ds/components 0.17.10 → 0.17.11

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

@@ -8,7 +8,7 @@ import { GridProps } from '@components/layout/grid/Grid.props.ts';
  * **Usage:**
  * - Use `columns` to define the number of columns or a custom grid-template-columns value
  * - Use `rows` to define the number of rows or a custom grid-template-rows value
- * - Use `minChildWidth` for responsive auto-fill grids
+ * - Children with min-width will cause the grid to overflow if space is insufficient
  */
 declare const Grid: FC<GridProps>;
 export default Grid;

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

@@ -3,7 +3,7 @@ import { CSSProperties, ReactNode } from 'react';
 export type GridProps = {
     /** Grid children elements */
     children: ReactNode;
-    /** Number of columns (number or CSS grid-template-columns value). Acts as max columns when minChildWidth is set. */
+    /** Number of columns (number or CSS grid-template-columns value). */
     columns?: number | string;
     /** Number of rows (number or CSS grid-template-rows value). */
     rows?: number | string;
@@ -29,8 +29,6 @@ export type GridProps = {
     justifyContent?: CSSProperties['justifyContent'];
     /** Padding inside the grid */
     padding?: keyof Theme['spacing'];
-    /** Minimum width for auto-fill/auto-fit columns */
-    minChildWidth?: CSSProperties['width'];
     /** Accessibility label for screen readers */
     ariaLabel?: string;
     /** ID of element that labels this grid */
@@ -56,5 +54,4 @@ export type GridStyleParams = {
     alignContent?: CSSProperties['alignContent'];
     justifyContent?: CSSProperties['justifyContent'];
     padding?: keyof Theme['spacing'];
-    minChildWidth?: CSSProperties['width'];
 };

package/dist/cjs/index.js

@@ -1891,24 +1891,17 @@ const Card = ({ children, direction = 'column', padding = 'md', width, height, g
 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
+ * Generates the grid-template-columns value based on columns prop
+ * - If columns is a number: creates that exact number of columns with equal width
+ * - If columns is a string: uses it directly as grid-template-columns value
+ *
+ * Children with min-width will cause overflow rather than wrapping.
+ * For responsive behavior, the parent container should handle breakpoints
+ * or use CSS container queries.
  */
-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) {
-        // Responsive grid without column limit
-        return `repeat(auto-fill, minmax(${minWidthValue}, 1fr))`;
-    }
+const getGridTemplateColumns = (columns) => {
     if (typeof columns === 'number') {
-        // Fixed columns
+        // Fixed number of columns - each column takes equal space
         return `repeat(${columns}, 1fr)`;
     }
     return columns;
@@ -1926,12 +1919,11 @@ 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, }) => {
+    root: ({ columns, rows, gap, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, }) => {
         const gapValue = gap ? theme.spacing[gap] : undefined;
-        const columnGapValue = columnGap ? theme.spacing[columnGap] : gapValue;
         return {
             display: 'grid',
-            gridTemplateColumns: getGridTemplateColumns(columns, minChildWidth),
+            gridTemplateColumns: getGridTemplateColumns(columns),
             gridTemplateRows: getGridTemplateRows(rows),
             gap: gapValue,
             columnGap: columnGap ? theme.spacing[columnGap] : undefined,
@@ -1944,8 +1936,6 @@ const GRID_STYLES = theme.createStyles((theme) => ({
             alignContent,
             justifyContent,
             padding: padding ? theme.spacing[padding] : undefined,
-            // CSS variable for gap calculation in grid-template-columns
-            '--grid-gap': columnGapValue || gapValue || '0px',
         };
     },
 }));
@@ -1958,9 +1948,9 @@ const GRID_STYLES = theme.createStyles((theme) => ({
  * **Usage:**
  * - Use `columns` to define the number of columns or a custom grid-template-columns value
  * - Use `rows` to define the number of rows or a custom grid-template-rows value
- * - Use `minChildWidth` for responsive auto-fill grids
+ * - Children with min-width will cause the grid to overflow if space is insufficient
  */
-const Grid = ({ children, columns = 1, rows, gap = 'sm', columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Grid = ({ children, columns = 1, rows, gap = 'sm', columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsxRuntime.jsx("div", { className: GRID_STYLES.root({
             columns,
             rows,
@@ -1975,7 +1965,6 @@ const Grid = ({ children, columns = 1, rows, gap = 'sm', columnGap, rowGap, widt
             alignContent,
             justifyContent,
             padding,
-            minChildWidth,
         }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: children }));
 };
 Grid.displayName = 'Grid';