@wistia/ui 0.13.8 → 0.13.9

package/dist/index.cjs

@@ -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.
  *
@@ -13047,49 +13047,52 @@ var import_styled_components74 = __toESM(require("styled-components"));
 var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime262 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT5 = "div";
+var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
+  if (minChildWidth === "auto" && maxColumns === "auto") {
+    return import_styled_components74.css`
+      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 import_styled_components74.css`
+      grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
+    `;
+  }
+  return import_styled_components74.css`
+    /* 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 = import_styled_components74.default.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 import_styled_components74.css`
-        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-      `;
-  }
-  if ($maxColumns !== "auto" && $minChildWidth === "auto") {
-    return import_styled_components74.css`
-        grid-template-columns: repeat(${$maxColumns}, minmax(0, 1fr));
-      `;
-  }
-  if ($maxColumns === "auto" && $minChildWidth !== "auto") {
-    return import_styled_components74.css`
-        grid-template-columns: repeat(auto-fit, minmax(${$minChildWidth}px, 1fr));
-      `;
-  }
-  return import_styled_components74.css`
-      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 = (0, import_react61.forwardRef)(
-  ({ 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 } = (0, import_type_guards40.isRecord)(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
     const responsiveColumns = useResponsiveProp(columns);
@@ -13099,6 +13102,7 @@ var GridComponent = (0, import_react61.forwardRef)(
       {
         ref,
         $columnGap: column,
+        $expandItems: expandItems,
         $maxColumns: responsiveColumns,
         $minChildWidth: responsiveMinChildWidth,
         $rowGap: row,