@propeller-commerce/propeller-v2-react-ui 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -8,6 +8,39 @@ 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.15.0] - 2026-08-06
+
+### Changed
+
+- **BREAKING — the stock filter is a toggle plus a quantity, not two
+  checkboxes.** `<GridFilters>` now takes `activeAvailability` as a single
+  `Availability` (`'all' | 'in-stock'`) rather than an array, gains
+  `activeMinStock`, and its `onAvailabilityChange` fires with both the
+  selection and the quantity. `<GridToolbar>` takes `availability` as a single
+  value plus `minStock`, and its `onAvailabilityFilterRemove` takes no
+  argument. `<ProductGrid>` takes `availability` plus `minStock`. The
+  out-of-stock bucket has no replacement. See [MIGRATION.md](./MIGRATION.md).
+
+  Two checkboxes could express "in stock or out of stock" — every product, and
+  so a state that looked active but sent no filter. They also could not answer
+  what a shopper asks next: not "is it stocked?" but "do you have enough?".
+
+  The section is now a two-state toggle and, once In stock is chosen, an
+  editable quantity with stepper buttons. The value can be typed directly or
+  stepped, commits on blur or Enter, and is floored and clamped to a minimum
+  of 1 — a lower threshold would match zero-stock products and contradict the
+  toggle. Switching back to All products clears it.
+
+  Requires `propeller-v2-core-ui` >= 0.6.0.
+
+- **The toolbar shows one stock chip** instead of one per bucket, carrying the
+  quantity when it is above the default.
+
+### Added
+
+- Label keys `allProducts`, `atLeast`, `pcs`, `quantityDecrease` and
+  `quantityIncrease`. The `outOfStock` key is no longer read.
+
 ## [0.14.0] - 2026-08-05
 
 ### Added

package/MIGRATION.md

@@ -6,6 +6,69 @@ minor versions — each one is documented here.
 
 ---
 
+## `GridFilters` / `GridToolbar`: stock filter is a toggle plus a quantity
+
+**When:** `0.15.0`.
+
+The two stock checkboxes (In stock / Out of stock) are now a two-state toggle
+plus an editable quantity — "in stock, at least N pcs". The out-of-stock
+bucket has no replacement.
+
+Two checkboxes could express "in stock or out of stock", which is every
+product and so had to collapse to no filter — a state that looked active and
+did nothing. They also could not express a quantity.
+
+**`GridFilters`**
+
+```tsx
+// before
+<GridFilters
+  activeAvailability={['in-stock']}                 // Availability[]
+  onAvailabilityChange={(sel) => setAvailability(sel)}
+/>
+
+// after
+<GridFilters
+  activeAvailability={'in-stock'}                   // Availability ('all' | 'in-stock')
+  activeMinStock={5}                                // new, optional; undefined = 1
+  onAvailabilityChange={(sel, minStock) => { setAvailability(sel); setMinStock(minStock); }}
+/>
+```
+
+**`GridToolbar`**
+
+```tsx
+// before
+<GridToolbar
+  availability={['in-stock']}                       // Availability[]
+  onAvailabilityFilterRemove={(value) => remove(value)}
+/>
+
+// after
+<GridToolbar
+  availability={'in-stock'}                         // Availability
+  minStock={5}                                      // new, optional
+  onAvailabilityFilterRemove={() => reset()}        // no argument — one chip
+/>
+```
+
+**`ProductGrid`** takes `availability?: Availability` and `minStock?: number`
+in place of `availability?: Availability[]`.
+
+**Steps**
+
+1. Upgrade `@propeller-commerce/propeller-v2-core-ui` to `^0.6.0`, where
+   `Availability` becomes `'all' | 'in-stock'` and `buildInventoryFilter`
+   takes `(selection, minQuantity?)`.
+2. Replace array state with a single value plus a quantity number.
+3. Drop any out-of-stock option from your own UI and URL handling.
+4. If you serialise the selection into a URL, decide how to carry the
+   quantity. The boilerplates use `?availability=in-stock` for the default
+   and `?availability=in-stock:5` for a raised quantity, omitting the
+   parameter entirely for "all products".
+5. Add labels for the new keys: `allProducts`, `atLeast`, `pcs`,
+   `quantityDecrease`, `quantityIncrease`. Remove `outOfStock`.
+
 ## `Menu`: optional pre-fetched `tree` prop (additive)
 
 **When:** during `0.1.0` stabilization (pre-publish).

package/dist/index.cjs

@@ -2262,7 +2262,8 @@ function useProductSearch(options) {
       JSON.stringify(options.textFilters ?? []),
       options.priceFilterMin ?? "",
       options.priceFilterMax ?? "",
-      JSON.stringify(options.availability ?? [])
+      options.availability ?? "",
+      options.minStock ?? ""
     ].join("|");
     if (inflightFetches2.has(inflightKey)) {
       fetchIdRef.current--;
@@ -2304,7 +2305,7 @@ function useProductSearch(options) {
         }
       ] : [];
       const priceFilter = options.priceFilterMin !== void 0 || options.priceFilterMax !== void 0 ? { from: options.priceFilterMin ?? 0, to: options.priceFilterMax ?? 999999 } : void 0;
-      const inventoryFilter = propellerV2CoreUi.buildInventoryFilter(options.availability);
+      const inventoryFilter = propellerV2CoreUi.buildInventoryFilter(options.availability, options.minStock);
       const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
       const contactId = options.user && "contactId" in options.user ? options.user.contactId : void 0;
       const customerId = options.user && "customerId" in options.user ? options.user.customerId : void 0;
@@ -2405,6 +2406,7 @@ function useProductSearch(options) {
     options.priceFilterMin,
     options.priceFilterMax,
     options.availability,
+    options.minStock,
     options.sortField,
     options.sortOrder,
     options.companyId,
@@ -2444,7 +2446,7 @@ function useProductSearch(options) {
           const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
           const contactId = options.user && "contactId" in options.user ? options.user.contactId : void 0;
           const customerId = options.user && "customerId" in options.user ? options.user.customerId : void 0;
-          const inventoryFilter = propellerV2CoreUi.buildInventoryFilter(options.availability);
+          const inventoryFilter = propellerV2CoreUi.buildInventoryFilter(options.availability, options.minStock);
           const categoryProductSearchInput = {
             language,
             page: 1,
@@ -2537,6 +2539,7 @@ function useProductSearch(options) {
     options.priceFilterMin,
     options.priceFilterMax,
     options.availability,
+    options.minStock,
     options.sortField,
     options.sortOrder,
     pageSize,
@@ -9060,6 +9063,7 @@ function ProductGrid(rawProps) {
     priceFilterMin: props.priceFilterMin,
     priceFilterMax: props.priceFilterMax,
     availability: props.availability,
+    minStock: props.minStock,
     sortField: props.sortField,
     sortOrder: props.sortOrder,
     pageSize: props.pageSize,
@@ -9363,7 +9367,13 @@ function GridFilters(rawProps) {
   const [appliedMin, setAppliedMin] = React6.useState(() => void 0);
   const [appliedMax, setAppliedMax] = React6.useState(() => void 0);
   const [availability, setAvailability] = React6.useState(
-    () => [...props.activeAvailability || []]
+    () => props.activeAvailability || "all"
+  );
+  const [minStock, setMinStock] = React6.useState(
+    () => props.activeMinStock ?? propellerV2CoreUi.MIN_STOCK_THRESHOLD
+  );
+  const [minStockInput, setMinStockInput] = React6.useState(
+    () => String(props.activeMinStock ?? propellerV2CoreUi.MIN_STOCK_THRESHOLD)
   );
   function showPriceFilter() {
     const mode = props.portalMode || "open";
@@ -9418,13 +9428,28 @@ function GridFilters(rawProps) {
     props.onFilterChange(filter, value);
     if (props.getSelectedFilters) props.getSelectedFilters();
   }
-  function handleAvailabilityToggle(value, checked) {
-    const next = checked ? [...availability, value] : availability.filter((v) => v !== value);
-    setAvailability(next);
+  function handleAvailabilityChange(value) {
+    const nextMinStock = value === "all" ? propellerV2CoreUi.MIN_STOCK_THRESHOLD : minStock;
+    setAvailability(value);
+    setMinStock(nextMinStock);
+    setMinStockInput(String(nextMinStock));
+    setIsPending(true);
+    if (props.onAvailabilityChange) props.onAvailabilityChange(value, nextMinStock);
+    if (props.getSelectedFilters) props.getSelectedFilters();
+  }
+  function handleMinStockChange(value) {
+    const n = Math.max(Math.floor(value) || propellerV2CoreUi.MIN_STOCK_THRESHOLD, propellerV2CoreUi.MIN_STOCK_THRESHOLD);
+    setMinStock(n);
+    setMinStockInput(String(n));
+    if (n === minStock) return;
     setIsPending(true);
-    if (props.onAvailabilityChange) props.onAvailabilityChange(next);
+    if (props.onAvailabilityChange) props.onAvailabilityChange(availability, n);
     if (props.getSelectedFilters) props.getSelectedFilters();
   }
+  function commitMinStockInput() {
+    const parsed = parseInt(minStockInput, 10);
+    handleMinStockChange(isNaN(parsed) ? propellerV2CoreUi.MIN_STOCK_THRESHOLD : parsed);
+  }
   function handleMinChange(value) {
     const n = value > currentMax ? currentMax : value;
     setCurrentMin(n);
@@ -9498,7 +9523,9 @@ function GridFilters(rawProps) {
     setCurrentMin(props.priceMin || 0);
     setCurrentMax(props.priceMax || 9999);
     setExpandedFilters({});
-    setAvailability([]);
+    setAvailability("all");
+    setMinStock(propellerV2CoreUi.MIN_STOCK_THRESHOLD);
+    setMinStockInput(String(propellerV2CoreUi.MIN_STOCK_THRESHOLD));
   }, [props.clearSignal, props.priceMin, props.priceMax]);
   React6.useEffect(() => {
     if (!props.activeTextFilters) return;
@@ -9506,8 +9533,10 @@ function GridFilters(rawProps) {
   }, [props.activeTextFilters]);
   React6.useEffect(() => {
     if (!props.activeAvailability) return;
-    setAvailability([...props.activeAvailability]);
-  }, [props.activeAvailability]);
+    setAvailability(props.activeAvailability);
+    setMinStock(props.activeMinStock ?? propellerV2CoreUi.MIN_STOCK_THRESHOLD);
+    setMinStockInput(String(props.activeMinStock ?? propellerV2CoreUi.MIN_STOCK_THRESHOLD));
+  }, [props.activeAvailability, props.activeMinStock]);
   React6.useEffect(() => {
     if (props.activePriceMin === void 0 && props.activePriceMax === void 0) {
       setCurrentMin(props.priceMin || 0);
@@ -9610,34 +9639,76 @@ function GridFilters(rawProps) {
         showAvailability() ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters__availability space-y-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "propeller-grid-filters__availability-title text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: propellerV2CoreUi.getLabel(props.labels, "availability", "Availability") }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters__availability-options space-y-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "propeller-grid-filters__option flex items-center gap-2 cursor-pointer group", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters__availability-toggle inline-flex h-8 w-full rounded-control border border-input overflow-hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `propeller-grid-filters__availability-option flex-1 text-xs font-medium transition-colors ${availability === "all" ? "bg-secondary text-secondary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground"}`,
+                  "aria-pressed": availability === "all",
+                  disabled: !!props.isLoading,
+                  onClick: () => handleAvailabilityChange("all"),
+                  children: propellerV2CoreUi.getLabel(props.labels, "allProducts", "All products")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `propeller-grid-filters__availability-option flex-1 text-xs font-medium transition-colors ${availability === "in-stock" ? "bg-secondary text-secondary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground"}`,
+                  "aria-pressed": availability === "in-stock",
+                  disabled: !!props.isLoading,
+                  onClick: () => handleAvailabilityChange("in-stock"),
+                  children: propellerV2CoreUi.getLabel(props.labels, "inStock", "In stock")
+                }
+              )
+            ] }),
+            availability === "in-stock" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters__availability-quantity flex items-center gap-2 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: propellerV2CoreUi.getLabel(props.labels, "atLeast", "at least") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-filters__availability-stepper inline-flex items-center h-8 rounded-control border border-input bg-card overflow-hidden focus-within:ring-1 focus-within:ring-secondary", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+                  "button",
                   {
-                    type: "checkbox",
-                    className: "propeller-grid-filters__checkbox h-4 w-4 rounded border-input text-secondary focus:ring-secondary cursor-pointer flex-shrink-0",
-                    checked: availability.includes("in-stock"),
-                    disabled: !!props.isLoading,
-                    onChange: (e) => handleAvailabilityToggle("in-stock", e.target.checked)
+                    type: "button",
+                    className: "propeller-grid-filters__quantity-decrease h-full w-8 flex items-center justify-center text-muted-foreground disabled:opacity-40 disabled:cursor-not-allowed hover:bg-accent hover:text-foreground transition-colors",
+                    "aria-label": propellerV2CoreUi.getLabel(props.labels, "quantityDecrease", "Decrease quantity"),
+                    disabled: !!props.isLoading || minStock <= propellerV2CoreUi.MIN_STOCK_THRESHOLD,
+                    onClick: () => handleMinStockChange(minStock - 1),
+                    children: "\u2212"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-filters__option-label flex-1 text-sm text-muted-foreground leading-none select-none group-hover:text-foreground", children: propellerV2CoreUi.getLabel(props.labels, "inStock", "In stock") })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "propeller-grid-filters__option flex items-center gap-2 cursor-pointer group", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
-                    type: "checkbox",
-                    className: "propeller-grid-filters__checkbox h-4 w-4 rounded border-input text-secondary focus:ring-secondary cursor-pointer flex-shrink-0",
-                    checked: availability.includes("out-of-stock"),
+                    type: "number",
+                    inputMode: "numeric",
+                    className: "propeller-grid-filters__availability-quantity-input w-10 h-full px-0 text-center font-medium text-foreground bg-transparent border-0 focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                    "aria-label": propellerV2CoreUi.getLabel(props.labels, "atLeast", "at least"),
+                    min: propellerV2CoreUi.MIN_STOCK_THRESHOLD,
+                    step: 1,
+                    value: minStockInput,
                     disabled: !!props.isLoading,
-                    onChange: (e) => handleAvailabilityToggle("out-of-stock", e.target.checked)
+                    onChange: (e) => setMinStockInput(e.target.value),
+                    onBlur: () => commitMinStockInput(),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") e.target.blur();
+                    }
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-filters__option-label flex-1 text-sm text-muted-foreground leading-none select-none group-hover:text-foreground", children: propellerV2CoreUi.getLabel(props.labels, "outOfStock", "Out of stock") })
-              ] })
-            ] })
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "propeller-grid-filters__quantity-increase h-full w-8 flex items-center justify-center text-muted-foreground disabled:opacity-40 disabled:cursor-not-allowed hover:bg-accent hover:text-foreground transition-colors",
+                    "aria-label": propellerV2CoreUi.getLabel(props.labels, "quantityIncrease", "Increase quantity"),
+                    disabled: !!props.isLoading,
+                    onClick: () => handleMinStockChange(minStock + 1),
+                    children: "+"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: propellerV2CoreUi.getLabel(props.labels, "pcs", "pcs") })
+            ] }) : null
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-grid-filters__divider h-px bg-border-subtle" })
         ] }) : null,
@@ -9817,7 +9888,6 @@ var DEFAULT_LABELS = {
   perPage: " per page",
   price: "Price",
   inStock: "In stock",
-  outOfStock: "Out of stock",
   switchToList: "Switch to list view",
   switchToGrid: "Switch to grid view"
 };
@@ -9846,7 +9916,7 @@ function GridToolbar(rawProps) {
     const text = props.activeTextFilters || {};
     const hasText = Object.keys(text).some((k) => (text[k] || []).length > 0);
     const hasPrice = props.priceFilterMin !== void 0 || props.priceFilterMax !== void 0;
-    const hasAvailability = (props.availability || []).length > 0;
+    const hasAvailability = props.availability === "in-stock";
     return hasText || hasPrice || hasAvailability;
   }
   function getActiveFilterBadges() {
@@ -9865,8 +9935,10 @@ function GridToolbar(rawProps) {
   function isPriceSortDisabled() {
     return propellerV2CoreUi.isContentHidden(props.portalMode, props.user);
   }
-  function getAvailabilityLabel(value) {
-    return value === "in-stock" ? getLabel56("inStock") : getLabel56("outOfStock");
+  function getAvailabilityLabel() {
+    const qty = props.minStock;
+    if (qty !== void 0 && qty > propellerV2CoreUi.MIN_STOCK_THRESHOLD) return `${getLabel56("inStock")}: ${qty}+`;
+    return getLabel56("inStock");
   }
   function handleSortFieldChange(field) {
     setCurrentSortField(field);
@@ -10041,20 +10113,19 @@ function GridToolbar(rawProps) {
               ]
             }
           ) : null,
-          (props.availability || []).map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
+          props.availability === "in-stock" ? /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
               className: "propeller-grid-toolbar__filter-badge propeller-grid-toolbar__filter-badge--availability inline-flex items-center gap-1 cursor-pointer px-2.5 py-0.5 rounded-full text-xs font-semibold border border-input bg-background hover:bg-primary hover:text-primary-foreground hover:border-primary transition-colors",
               onClick: (event) => {
-                if (props.onAvailabilityFilterRemove) props.onAvailabilityFilterRemove(value);
+                if (props.onAvailabilityFilterRemove) props.onAvailabilityFilterRemove();
               },
               children: [
-                getAvailabilityLabel(value),
+                getAvailabilityLabel(),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-grid-toolbar__filter-badge-remove", children: "\xD7" })
               ]
-            },
-            value
-          )),
+            }
+          ) : null,
           getActiveFilterBadges()?.map((badge) => /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {