@wistia/ui 0.13.8 → 0.13.9

package/dist/index.d.mts

@@ -1972,6 +1972,11 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
      * Controls the spacing between grid items.
      */
     gap?: Gap | ResponsiveGap | Spacings;
+    /**
+     * Controls whether grid items expand to fill available space when there are fewer items than columns.
+     * When true, items grow to fill space. When false, the grid will auto fill the additional space with empty tracks.
+     */
+    expandItems?: boolean;
     renderAs?: ElementType;
 };
 declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;

package/dist/index.d.ts

@@ -1972,6 +1972,11 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
      * Controls the spacing between grid items.
      */
     gap?: Gap | ResponsiveGap | Spacings;
+    /**
+     * Controls whether grid items expand to fill available space when there are fewer items than columns.
+     * When true, items grow to fill space. When false, the grid will auto fill the additional space with empty tracks.
+     */
+    expandItems?: boolean;
     renderAs?: ElementType;
 };
 declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.8
+ * @license @wistia/ui v0.13.9
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -12906,49 +12906,52 @@ import styled57, { css as css32 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
 import { jsx as jsx262 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
+var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
+  if (minChildWidth === "auto" && maxColumns === "auto") {
+    return css32`
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    `;
+  }
+  const gridMode = expandItems ? "auto-fit" : "auto-fill";
+  const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
+  if (maxColumns === "auto") {
+    return css32`
+      grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
+    `;
+  }
+  return css32`
+    /* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
+    --wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
+    --wui-grid-max-column-width: calc(
+      (100% - var(--wui-grid-total-column-gap-width)) / ${maxColumns}
+    );
+
+    grid-template-columns: repeat(
+      ${gridMode},
+      minmax(max(${minChildWidthValue}px, var(--wui-grid-max-column-width)), 1fr)
+    );
+  `;
+};
 var StyledGrid = styled57.div`
   --wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
   --wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
-  --wui-grid-min-column-size: ${({ $minChildWidth }) => $minChildWidth === "auto" ? "0" : `${$minChildWidth}px`};
-  --wui-grid-max-columns: ${({ $maxColumns }) => $maxColumns === "auto" ? "infinity" : $maxColumns};
-  --wui-grid-column-gap-count: calc(var(--wui-grid-max-columns) - 1);
-  --wui-grid-total-column-gap-width: calc(
-    var(--wui-grid-column-gap-count) * var(--wui-grid-column-gap)
-  );
-  --wui-grid-max-column-width: calc(
-    (100% - var(--wui-grid-total-column-gap-width)) / var(--wui-grid-max-columns)
-  );
 
   display: grid;
   gap: var(--wui-grid-column-gap) var(--wui-grid-row-gap);
   width: 100%;
 
-  ${({ $maxColumns, $minChildWidth }) => {
-  if ($maxColumns === "auto" && $minChildWidth === "auto") {
-    return css32`
-        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-      `;
-  }
-  if ($maxColumns !== "auto" && $minChildWidth === "auto") {
-    return css32`
-        grid-template-columns: repeat(${$maxColumns}, minmax(0, 1fr));
-      `;
-  }
-  if ($maxColumns === "auto" && $minChildWidth !== "auto") {
-    return css32`
-        grid-template-columns: repeat(auto-fit, minmax(${$minChildWidth}px, 1fr));
-      `;
-  }
-  return css32`
-      grid-template-columns: repeat(
-        auto-fit,
-        minmax(max(var(--wui-grid-min-column-size), var(--wui-grid-max-column-width)), 1fr)
-      );
-    `;
-}}
+  ${({ $maxColumns, $minChildWidth, $expandItems }) => getGridTemplateColumns($maxColumns, $minChildWidth, $expandItems)}
 `;
 var GridComponent = forwardRef17(
-  ({ children, columns = "auto", minChildWidth = "auto", gap = "space-02", renderAs, ...props }, ref) => {
+  ({
+    children,
+    columns = "auto",
+    minChildWidth = "auto",
+    gap = "space-02",
+    expandItems = false,
+    renderAs,
+    ...props
+  }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const { column, row } = isRecord5(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
     const responsiveColumns = useResponsiveProp(columns);
@@ -12958,6 +12961,7 @@ var GridComponent = forwardRef17(
       {
         ref,
         $columnGap: column,
+        $expandItems: expandItems,
         $maxColumns: responsiveColumns,
         $minChildWidth: responsiveMinChildWidth,
         $rowGap: row,