@propeller-commerce/propeller-v2-react-ui 0.4.7 → 0.4.10

package/CHANGELOG.md

@@ -8,6 +8,57 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.4.10] - 2026-06-23
+
+### Fixed
+
+- **`GridFiltersPanel` rendered full-width on desktop, pushing the product
+  grid off-screen.** The panel root carries `w-full lg:w-64 lg:flex-shrink-0`
+  in the markup, but a consumer's Tailwind sheet re-emits `.w-full`
+  (`width: 100%`) and — loading after this package's CSS — won the cascade on
+  equal specificity, leaving the panel at full width and causing horizontal
+  overflow on category/search pages. The desktop sidebar width is now restated
+  on the `.propeller-grid-filters-panel` BEM hook inside the `@media
+  (min-width: 64rem)` block (`width: 16rem; flex-shrink: 0`), so the package
+  stays authoritative for its own width regardless of sheet order. Same
+  cross-Tailwind cascade hardening already applied to the card row layouts in
+  0.4.8 — the panel root was the one element it missed.
+
+## [0.4.9] - 2026-06-19
+
+### Added
+
+- **`GridFiltersPanel`** — a responsive wrapper around `GridFilters`. At `lg`
+  (1024px) and up it renders the filters as the inline sidebar; below `lg` it
+  collapses them behind a "Filters" button that opens a left slide-in drawer
+  (dimmed backdrop, close button, "Show results" to dismiss). A single
+  `GridFilters` instance backs both layouts — no duplicate fetch or state.
+  Replaces the host's `<aside><GridFilters/></aside>`. New label keys:
+  `filtersButton`, `applyFilters`, `closeFilters`. Optional `activeFilterCount`
+  shows a badge on the button.
+
+## [0.4.8] - 2026-06-19
+
+### Fixed
+
+- **Product card list view broke on desktop after the 0.4.7 mobile
+  redesign.** The mobile-first footer (`flex-col`, full-width `AddToCart`
+  controls) leaked into the desktop row layout because the `md:` overrides
+  lost the cross-Tailwind cascade. The desktop (≥768px) row intent is now
+  restated on the BEM hook classes in `styles.css` — footer back to a row,
+  `__footer-meta` to `display: contents`, and the `AddToCart` controls back to
+  a single nowrap row with a fixed-width quantity input.
+- **Price clipped in the mobile grid card.** The stock + price meta row could
+  overflow a narrow (~190px) grid card. The row now wraps and the price is
+  allowed to shrink (`min-w-0`, right-aligned) instead of being cut off.
+
+### Changed
+
+- **`ClusterCard` gets the same responsive footer as `ProductCard`.** Below
+  768px the list view uses a 2-row footer (stock/price, then full-width "View
+  cluster" button) and the grid view pairs stock/price in a wrapping meta row;
+  desktop (≥768px) is unchanged.
+
 ## [0.4.7] - 2026-06-19
 
 ### Changed

package/dist/index.cjs

@@ -7600,22 +7600,28 @@ function ClusterCard(rawProps) {
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardShortDescription, {}) : null
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__footer w-full md:w-auto flex items-center gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
-            props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) : null,
-            props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__cta flex-shrink-0 ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardViewClusterLink, {}) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__footer w-full md:w-auto flex flex-col gap-2 md:flex-row md:items-center md:gap-3 px-4 py-2 md:py-0 border-t md:border-t-0 border-border-subtle", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__footer-meta flex items-center justify-between gap-3 md:contents", children: [
+              props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) : null,
+              props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__cta w-full md:w-auto md:flex-shrink-0 md:ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardViewClusterLink, {}) })
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__body flex flex-1 flex-col gap-1.5 p-3 sm:gap-2 sm:p-4", children: [
             props.showSku !== false && clusterSku ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardSku, {}) : null,
             props.showName !== false ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardName, { linkable: true }) : null,
-            props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) : null,
+            props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) }) : null,
             textLabelValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardTextLabels, {}) : null,
             props.showManufacturer && manufacturer ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardManufacturer, {}) : null,
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardShortDescription, {}) : null,
-            props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) : null
+            props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__cta px-3 pb-3 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardViewClusterLink, {}) })
+          props.showStock && defaultProductInventory || props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cluster-card__footer-meta flex flex-wrap items-center justify-between gap-x-2 gap-y-1 px-3 pt-1 sm:px-4 md:hidden", children: [
+            props.showStock && defaultProductInventory ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardStock, {}) : null,
+            props.showPrice !== false && priceObj ? /* @__PURE__ */ jsxRuntime.jsx(ClusterCardPrice, {}) : null
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-cluster-card__cta px-3 pb-3 pt-2 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ClusterCardViewClusterLink, {}) })
         ] })
       ]
     }
@@ -8834,7 +8840,7 @@ var DEFAULT_LABELS = {
   of: "of"
 };
 function GridPagination(props) {
-  function getLabel52(key) {
+  function getLabel53(key) {
     const labels = props.labels || {};
     return labels[key] !== void 0 ? labels[key] : DEFAULT_LABELS[key] || key;
   }
@@ -8907,15 +8913,15 @@ function GridPagination(props) {
               className: "propeller-grid-pagination__btn propeller-grid-pagination__btn--prev inline-flex items-center rounded-control border border-input bg-card px-4 py-2 text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed",
               disabled: currentPage === 1,
               onClick: () => handlePageChange(currentPage - 1),
-              children: getLabel52("previous")
+              children: getLabel53("previous")
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "propeller-grid-pagination__info px-2 text-sm font-medium text-muted-foreground", children: [
-            getLabel52("page"),
+            getLabel53("page"),
             "\xA0",
             currentPage,
             "\xA0",
-            getLabel52("of"),
+            getLabel53("of"),
             "\xA0",
             totalPages
           ] }),
@@ -8926,7 +8932,7 @@ function GridPagination(props) {
               className: "propeller-grid-pagination__btn propeller-grid-pagination__btn--next inline-flex items-center rounded-control border border-input bg-card px-4 py-2 text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed",
               disabled: currentPage === totalPages,
               onClick: () => handlePageChange(currentPage + 1),
-              children: getLabel52("next")
+              children: getLabel53("next")
             }
           )
         ] }) : null,
@@ -8938,7 +8944,7 @@ function GridPagination(props) {
               className: "propeller-grid-pagination__btn propeller-grid-pagination__btn--prev inline-flex items-center rounded-control border border-input bg-card px-3 py-2 text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed",
               disabled: currentPage === 1,
               onClick: () => handlePageChange(currentPage - 1),
-              children: getLabel52("previous")
+              children: getLabel53("previous")
             }
           ),
           getFullPages().map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -8965,7 +8971,7 @@ function GridPagination(props) {
               className: "propeller-grid-pagination__btn propeller-grid-pagination__btn--next inline-flex items-center rounded-control border border-input bg-card px-3 py-2 text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover disabled:opacity-40 disabled:cursor-not-allowed",
               disabled: currentPage === totalPages,
               onClick: () => handlePageChange(currentPage + 1),
-              children: getLabel52("next")
+              children: getLabel53("next")
             }
           )
         ] }) : null
@@ -10526,6 +10532,94 @@ function GridFilters(rawProps) {
   );
 }
 var GridFilters_default = GridFilters;
+function GridFiltersPanel(props) {
+  const { activeFilterCount, wrapperClassName, labels, ...gridFiltersProps } = props;
+  const [open, setOpen] = React6.useState(false);
+  React6.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `propeller-grid-filters-panel w-full lg:w-64 lg:flex-shrink-0 ${wrapperClassName || ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "propeller-grid-filters-panel__trigger lg:hidden inline-flex items-center justify-center gap-2 h-10 px-4 rounded-control border border-border bg-card text-sm font-medium text-foreground shadow-sm hover:bg-surface-hover transition-colors",
+        onClick: () => setOpen(true),
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "propeller-grid-filters-panel__trigger-icon w-[1.1em] h-[1.1em] flex-shrink-0",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" })
+            }
+          ),
+          propellerV2CoreUi.getLabel(labels, "filtersButton", "Filters"),
+          activeFilterCount && activeFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-filters-panel__count inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded-full bg-secondary text-secondary-foreground text-xs font-semibold", children: activeFilterCount }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `propeller-grid-filters-panel__backdrop lg:hidden fixed inset-0 z-40 bg-foreground/40 transition-opacity ${open ? "opacity-100" : "pointer-events-none opacity-0"}`,
+        onClick: () => setOpen(false),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `propeller-grid-filters-panel__panel fixed inset-y-0 left-0 z-50 w-80 max-w-[85vw] bg-card shadow-xl flex flex-col transition-transform duration-300 lg:static lg:z-auto lg:w-auto lg:max-w-none lg:translate-x-0 lg:bg-transparent lg:shadow-none lg:block ${open ? "translate-x-0" : "-translate-x-full"}`,
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters-panel__header lg:hidden flex items-center justify-between gap-3 px-4 h-14 border-b border-border-subtle flex-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-filters-panel__title text-base font-semibold text-foreground", children: propellerV2CoreUi.getLabel(labels, "filtersButton", "Filters") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "propeller-grid-filters-panel__close inline-flex items-center justify-center h-8 w-8 rounded-control text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors",
+                onClick: () => setOpen(false),
+                "aria-label": propellerV2CoreUi.getLabel(labels, "closeFilters", "Close"),
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-grid-filters-panel__body flex-1 overflow-y-auto px-4 py-4 lg:flex-none lg:overflow-visible lg:p-0", children: /* @__PURE__ */ jsxRuntime.jsx(GridFilters_default, { ...gridFiltersProps, labels }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-grid-filters-panel__footer lg:hidden px-4 py-3 border-t border-border-subtle flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "propeller-grid-filters-panel__apply w-full inline-flex justify-center items-center h-10 px-6 rounded-control text-sm font-medium text-secondary-foreground bg-secondary hover:bg-secondary/90 transition-colors",
+              onClick: () => setOpen(false),
+              children: propellerV2CoreUi.getLabel(labels, "applyFilters", "Show results")
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
 function GridTitle(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `propeller-grid-title mb-8 ${props.className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-title__row flex items-baseline gap-3 mb-3", children: [
     props.headingLevel === "h2" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "propeller-grid-title__heading text-3xl sm:text-4xl font-bold tracking-tight", children: props.title }) : null,
@@ -10578,7 +10672,7 @@ function GridToolbar(rawProps) {
   const [currentSortOrder, setCurrentSortOrder] = React6.useState(propellerSdkV2.SortOrder.DESC);
   const [currentOffset, setCurrentOffset] = React6.useState(12);
   const [currentViewMode, setCurrentViewMode] = React6.useState("grid");
-  function getLabel52(key) {
+  function getLabel53(key) {
     const labels = props.labels || {};
     return labels[key] !== void 0 ? labels[key] : DEFAULT_LABELS2[key] || key;
   }
@@ -10655,7 +10749,7 @@ function GridToolbar(rawProps) {
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-toolbar__bar flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-grid-toolbar__count text-sm text-muted-foreground font-medium", children: props.itemsFound > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
             props.itemsFound,
-            getLabel52("products")
+            getLabel53("products")
           ] }) : null }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-toolbar__controls flex flex-wrap items-center gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -10666,7 +10760,7 @@ function GridToolbar(rawProps) {
                 onChange: (e) => handleOffsetChange(parseInt(e.target.value)),
                 children: getOffsetOptions()?.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: n, children: [
                   n,
-                  getLabel52("perPage")
+                  getLabel53("perPage")
                 ] }, n))
               }
             ),
@@ -10682,7 +10776,7 @@ function GridToolbar(rawProps) {
                   {
                     value: field,
                     disabled: field === "PRICE" && isPriceSortDisabled(),
-                    children: getLabel52(field)
+                    children: getLabel53(field)
                   },
                   field
                 ))
@@ -10695,8 +10789,8 @@ function GridToolbar(rawProps) {
                 value: currentSortOrder,
                 onChange: (e) => handleSortOrderChange(e.target.value),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.ASC, children: getLabel52("ASC") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.DESC, children: getLabel52("DESC") })
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.ASC, children: getLabel53("ASC") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.DESC, children: getLabel53("DESC") })
                 ]
               }
             ),
@@ -10706,7 +10800,7 @@ function GridToolbar(rawProps) {
                 type: "button",
                 className: "propeller-grid-toolbar__view-toggle h-9 w-9 flex items-center justify-center rounded-control border border-input bg-transparent hover:bg-accent hover:text-accent-foreground transition-colors",
                 onClick: (event) => handleViewChange(),
-                title: currentViewMode === "grid" ? getLabel52("switchToList") : getLabel52("switchToGrid"),
+                title: currentViewMode === "grid" ? getLabel53("switchToList") : getLabel53("switchToGrid"),
                 children: [
                   currentViewMode === "grid" ? /* @__PURE__ */ jsxRuntime.jsxs(
                     "svg",
@@ -10764,7 +10858,7 @@ function GridToolbar(rawProps) {
               onClick: (event) => {
                 if (props.onClearFilters) props.onClearFilters();
               },
-              children: getLabel52("clearAll")
+              children: getLabel53("clearAll")
             }
           ),
           props.priceFilterMin !== void 0 || props.priceFilterMax !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10775,7 +10869,7 @@ function GridToolbar(rawProps) {
                 if (props.onPriceFilterRemove) props.onPriceFilterRemove();
               },
               children: [
-                getLabel52("price"),
+                getLabel53("price"),
                 ": \u20AC",
                 props.priceFilterMin ?? 0,
                 " \u2013 \u20AC",
@@ -13297,9 +13391,9 @@ function ProductCardRoot(rawProps) {
             props.showShortDescription && shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardShortDescription, {}) : null,
             props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__price mt-auto pt-1 hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-base sm:text-lg" }) }) : null
           ] }),
-          props.showStock && !!product.inventory || props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer-meta flex items-center justify-between gap-2 px-3 pt-1 sm:px-4 md:hidden", children: [
+          props.showStock && !!product.inventory || props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-product-card__footer-meta flex flex-wrap items-center justify-between gap-x-2 gap-y-1 px-3 pt-1 sm:px-4 md:hidden", children: [
             props.showStock && !!product.inventory ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardStock, {}) : null,
-            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-base" }) : null
+            props.showPrice !== false && !!product?.price ? /* @__PURE__ */ jsxRuntime.jsx(ProductCardPrice, { priceSize: "text-base", className: "propeller-product-card__price min-w-0 text-right" }) : null
           ] }) : null,
           props.allowAddToCart !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-product-card__cta px-3 pb-3 pt-2 sm:px-4 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardAddToCart, {}) }) : null
         ] })
@@ -17293,6 +17387,7 @@ exports.FavoriteListItem = FavoriteListItem_default;
 exports.FavoriteLists = FavoriteLists_default;
 exports.ForgotPassword = ForgotPassword_default;
 exports.GridFilters = GridFilters_default;
+exports.GridFiltersPanel = GridFiltersPanel;
 exports.GridPagination = GridPagination_default;
 exports.GridTitle = GridTitleWithProvider_default;
 exports.GridToolbar = GridToolbar_default;