@propeller-commerce/propeller-v2-react-ui 0.26.0 → 0.27.0

package/CHANGELOG.md

@@ -8,6 +8,59 @@ 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.27.0] - 2026-09-28
+
+### Fixed
+
+- **A quantity field could not be cleared and retyped.** The typed-input handler
+  only committed a value once it was at or above the minimum, so with a minimum
+  of 2, backspacing to empty or typing "1" was ignored and the previous number
+  stayed stuck in the box. The field now accepts any keystroke while editing and
+  resolves to a valid quantity on blur. (PWP-970)
+
+- **Incrementing an off-grid quantity kept it off-grid.** `increment()` added the
+  step without first snapping to the `min + n*step` grid, so a quantity that was
+  already off it never returned. Both steppers now snap first. (PWP-970)
+
+- **Quick order ignored the order step.** Its quantity input was hardcoded to
+  `step={1}` and nothing snapped, while bulk paste and spreadsheet upload are the
+  primary ordering route for a wholesale account. `QuickOrderMatch` now carries
+  `step` alongside `minQuantity`, and typed quantities snap to it. (PWP-970)
+
+- **`OrderItemCard` accepted a misconfiguration in silence.** It ships from the
+  RSC-safe `/pure` entry and reads no context, so the host must supply `language`
+  and `configuration.urls` — but both are optional, nothing warned, and the
+  failure only showed as a wrong-language name or a link that dropped the locale
+  prefix two clicks later. A development-only warning now names each omission
+  once. `titleLinkable` defaults to true, so the link case applies unless a host
+  opts out. (PWP-972)
+
+## [0.26.1] - 2026-09-28
+
+### Fixed
+
+- **A quoted-price product could still be added to the cart from a grid.**
+  0.26.0 guarded the PRICE on `ProductCard` but not the ACTION beside it, so a
+  listing showed "Price on request" next to a working quantity stepper and
+  add-to-cart button — and the line went in at 0. The card now offers
+  "Request a price", linking to the product page that owns the quote flow;
+  `FavoriteListItem` suppresses add-to-cart for these products outright. The
+  check sits before the injected-component branch, so a host-supplied control
+  is gated too.
+
+- **Popovers inherited the host header’s text colour.** The search input, the
+  autosuggest dropdown, the cart sidebar and the cart popover each set their own
+  background but not their own text colour, so a shop with a dark header — which
+  has to colour that bar to style the triggers inside it — got white text on
+  their light surfaces. They are DOM children of those triggers, so the colour
+  cascaded straight in. Each now sets `text-foreground` explicitly, as
+  `AccountIconAndMenu` already did.
+
+### Changed
+
+- `RequestPriceButton` uses a price-tag icon rather than a quote bubble, which
+  read as a comment action.
+
 ## [0.26.0] - 2026-09-28
 
 ### Added
@@ -42,15 +95,15 @@ between minor versions; breaking changes are called out below and in
   `priceOnRequest` renders in its place, and a card for such a product may
   carry no price object at all. Existing callers are unaffected.
 
-- **The PDP gates add-to-cart in the WordPress plugin's order**: `orderable`
-  first, then the display mode. A non-orderable product gets neither control, a
-  quoted one gets the request button, and an anonymous visitor gets the log-in
-  action rather than a list they cannot be quoted from.
+- **The PDP gates add-to-cart on `orderable` before the display mode.** A
+  non-orderable product gets neither control, a quoted one gets the request
+  button, and an anonymous visitor gets the log-in action rather than a list they
+  cannot be quoted from.
 
 - **Quick order excludes quoted products.** A bulk upload reports the code as
   unresolved instead of adding a line priced at 0; picking one from the
-  typeahead clears the row with a notice. Matches the plugin, which drops them
-  from quick-order search results server-side.
+  typeahead clears the row with a notice. Bulk flows have nowhere to show a
+  price and would submit the line at 0.
 
 ## [0.25.0] - 2026-09-25
 

package/dist/index.cjs

@@ -2634,6 +2634,7 @@ function toMatch(item, language) {
   const netPrice = displayItem?.price?.net ?? 0;
   const grossPrice = displayItem?.price?.gross ?? 0;
   const minQuantity = Math.max(1, displayItem?.minimumQuantity ?? 1);
+  const step = Math.max(1, displayItem?.unit ?? 1);
   const imageUrl = isCluster ? propellerV2CoreUi.getClusterImageUrl(item) : propellerV2CoreUi.getProductImageUrl(item);
   return {
     productId,
@@ -2643,6 +2644,7 @@ function toMatch(item, language) {
     netPrice,
     grossPrice,
     minQuantity,
+    step,
     imageUrl,
     priceOnRequest: isPriceOnRequest(item)
   };
@@ -4779,6 +4781,7 @@ function AddToCart(rawProps) {
     onCartCreated: props.onCartCreated
   });
   const [quantity, setQuantity] = React6.useState(() => getMinQuantity(props.product));
+  const [quantityDraft, setQuantityDraft] = React6.useState(null);
   const [toastMessage, setToastMessage] = React6.useState(() => "");
   const [toastType, setToastType] = React6.useState(() => "");
   const [toastVisible, setToastVisible] = React6.useState(() => false);
@@ -4801,16 +4804,42 @@ function AddToCart(rawProps) {
   function dismissToast() {
     setToastVisible(false);
   }
+  function snapQuantity(value) {
+    const min = getMinQuantity(props.product);
+    const step = getStep(props.product);
+    if (value <= min) return min;
+    return Math.round((value - min) / step) * step + min;
+  }
   function increment() {
-    setQuantity(quantity + getStep(props.product));
+    setQuantityDraft(null);
+    const snapped = snapQuantity(quantity);
+    setQuantity(snapped === quantity ? quantity + getStep(props.product) : snapped);
   }
   function decrement() {
     const min = getMinQuantity(props.product);
     const step = getStep(props.product);
+    setQuantityDraft(null);
+    const snapped = snapQuantity(quantity);
+    if (snapped !== quantity) {
+      setQuantity(snapped);
+      return;
+    }
     if (quantity - step >= min) {
       setQuantity(quantity - step);
     }
   }
+  function handleQuantityInput(raw) {
+    setQuantityDraft(raw);
+    const val = parseInt(raw, 10);
+    if (!isNaN(val) && val >= getMinQuantity(props.product)) {
+      setQuantity(snapQuantity(val));
+    }
+  }
+  function handleQuantityBlur() {
+    const val = parseInt(quantityDraft ?? "", 10);
+    setQuantity(isNaN(val) ? getMinQuantity(props.product) : snapQuantity(val));
+    setQuantityDraft(null);
+  }
   function getModalImageUrl() {
     if (addedCartItem) {
       const img = addedCartItem.product?.media?.images?.items?.[0]?.imageVariants?.[0]?.url;
@@ -4940,15 +4969,9 @@ function AddToCart(rawProps) {
                 className: "propeller-add-to-cart__quantity flex-1 md:flex-none md:w-12 text-center text-sm bg-transparent border-none focus:ring-0 focus:outline-none h-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                 min: getMinQuantity(props.product),
                 step: getStep(props.product),
-                value: quantity,
-                onChange: (e) => {
-                  const val = parseInt(e.target.value, 10);
-                  const min = getMinQuantity(props.product);
-                  const step = getStep(props.product);
-                  if (!isNaN(val) && val >= min) {
-                    setQuantity(Math.round((val - min) / step) * step + min);
-                  }
-                }
+                value: quantityDraft ?? quantity,
+                onChange: (e) => handleQuantityInput(e.target.value),
+                onBlur: handleQuantityBlur
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4973,15 +4996,9 @@ function AddToCart(rawProps) {
               className: "propeller-add-to-cart__quantity w-full md:w-16 h-10 text-center text-sm border border-input rounded-control focus:ring-2 focus:ring-secondary focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
               min: getMinQuantity(props.product),
               step: getStep(props.product),
-              value: quantity,
-              onChange: (e) => {
-                const val = parseInt(e.target.value, 10);
-                const min = getMinQuantity(props.product);
-                const step = getStep(props.product);
-                if (!isNaN(val) && val >= min) {
-                  setQuantity(Math.round((val - min) / step) * step + min);
-                }
-              }
+              value: quantityDraft ?? quantity,
+              onChange: (e) => handleQuantityInput(e.target.value),
+              onBlur: handleQuantityBlur
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7658,7 +7675,7 @@ function CartIconAndSidebar(rawProps) {
               ]
             }
           ),
-          props.showTotals && isHovered && totalItems > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cart-icon__popover absolute top-full right-0 mt-1 z-40 bg-popover border border-border rounded-container shadow-lg px-3 py-2 min-w-[140px] text-sm whitespace-nowrap", children: [
+          props.showTotals && isHovered && totalItems > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cart-icon__popover absolute top-full right-0 mt-1 z-40 bg-popover text-foreground border border-border rounded-container shadow-lg px-3 py-2 min-w-[140px] text-sm whitespace-nowrap", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-icon__popover-label text-muted-foreground", children: totalLabel("totalLabel") }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cart-icon__popover-total font-semibold text-foreground", children: totalPrice })
@@ -7686,7 +7703,7 @@ function CartIconAndSidebar(rawProps) {
         "aria-modal": "true",
         "aria-label": sidebarTitle,
         "data-open": sidebarOpen ? "true" : "false",
-        className: cn(`propeller-cart-icon__sidebar fixed inset-y-0 right-0 z-[70] w-full max-w-md bg-card shadow-2xl transform transition-transform duration-300 ease-in-out border-l border-border${sidebarOpen ? " translate-x-0" : " translate-x-full"}${props.sidebarClassName ? " " + props.sidebarClassName : ""}`),
+        className: cn(`propeller-cart-icon__sidebar fixed inset-y-0 right-0 z-[70] w-full max-w-md bg-card text-foreground shadow-2xl transform transition-transform duration-300 ease-in-out border-l border-border${sidebarOpen ? " translate-x-0" : " translate-x-full"}${props.sidebarClassName ? " " + props.sidebarClassName : ""}`),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-full", children: isMounted ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-cart-icon__sidebar-header flex items-center justify-between px-5 py-4 border-b border-border", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -9347,7 +9364,7 @@ function ProductCardPrice(props) {
   ) });
 }
 function ProductCardAddToCart(props) {
-  const { product, resolved } = useProductCard();
+  const { product, derived, resolved, handleProductClick } = useProductCard();
   if (propellerV2CoreUi.isContentHidden(resolved.portalMode, resolved.user, resolved.isAuthenticated)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       LoginToOrderButton_default,
@@ -9358,6 +9375,19 @@ function ProductCardAddToCart(props) {
       }
     );
   }
+  if (isPriceOnRequest(product)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: derived.productUrl,
+        onClick: handleProductClick,
+        className: cn(
+          `propeller-product-card__view-product inline-flex h-10 w-full items-center justify-center rounded-control bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 ${props.className || ""}`
+        ),
+        children: propellerV2CoreUi.getLabel(resolved.priceLabels, "requestPrice", "Request a price")
+      }
+    );
+  }
   const InjectedAddToCart = resolved.addToCartComponent;
   if (InjectedAddToCart) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11913,7 +11943,7 @@ function FavoriteListItemActions(props) {
       className: props.className ?? "propeller-favorite-list-item__actions flex items-center gap-2 flex-shrink-0",
       onClick: (e) => e.stopPropagation(),
       children: [
-        resolved.allowAddToCart !== false && isProduct && !!resolved.graphqlClient ? /* @__PURE__ */ jsxRuntime.jsx(
+        resolved.allowAddToCart !== false && isProduct && !!resolved.graphqlClient && !isPriceOnRequest(product) ? /* @__PURE__ */ jsxRuntime.jsx(
           AddToCart_default,
           {
             className: "flex items-center gap-2",
@@ -13890,6 +13920,28 @@ function OrderActions(rawProps) {
   );
 }
 var OrderActions_default = OrderActions;
+var warnedOnce = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (warnedOnce.has(key)) return;
+  warnedOnce.add(key);
+  console.warn(message);
+}
+function warnMissingProps(props) {
+  if (process.env.NODE_ENV === "production") return;
+  if (!props.language) {
+    warnOnce(
+      "language",
+      "[OrderItemCard] No `language` prop: product names resolve in the default catalogue language, whatever page they are on. This component reads no context (it ships from the RSC-safe /pure entry), so the host must pass it."
+    );
+  }
+  const linkable = props.titleLinkable !== void 0 ? props.titleLinkable : true;
+  if (linkable && !props.configuration?.urls) {
+    warnOnce(
+      "urls",
+      "[OrderItemCard] Title is linkable but no `configuration.urls` was passed: links fall back to a literal /product/:id/:slug and lose the locale prefix. Pass the url builders from the host, or set titleLinkable={false}."
+    );
+  }
+}
 function getProductName3(orderItem, language) {
   return propellerV2CoreUi.getLocalizedValue(orderItem?.product?.names, language, "") || orderItem?.name || "Unknown Product";
 }
@@ -13913,6 +13965,7 @@ function getProductUrl(orderItem, language, urls) {
 function OrderItemCard(props) {
   const item = props.orderItem;
   const isChildItem = props.isChildItem || false;
+  warnMissingProps(props);
   const titleLinkable = props.titleLinkable !== void 0 ? props.titleLinkable : true;
   const showImage = isChildItem ? false : props.showImage !== void 0 ? props.showImage : true;
   const showSku = isChildItem ? false : props.showSku !== void 0 ? props.showSku : true;
@@ -14676,7 +14729,7 @@ function RequestPriceButton(props) {
         if (props.onRequestPrice) props.onRequestPrice();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareQuote, { className: "propeller-request-price__icon w-4 h-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Tag, { className: "propeller-request-price__icon w-4 h-4", "aria-hidden": "true" }),
         label
       ]
     }
@@ -14684,6 +14737,10 @@ function RequestPriceButton(props) {
 }
 var RequestPriceButton_default = RequestPriceButton;
 var ROW_SEQ = 0;
+function snapToStep(value, min, step) {
+  if (!Number.isFinite(value) || value <= min) return min;
+  return Math.round((value - min) / (step || 1)) * (step || 1) + min;
+}
 function blankRow() {
   ROW_SEQ += 1;
   return {
@@ -14695,6 +14752,7 @@ function blankRow() {
     grossPrice: 0,
     quantity: 1,
     minQuantity: 1,
+    step: 1,
     matches: [],
     searching: false,
     searched: false
@@ -14788,6 +14846,7 @@ function QuickOrderInner(props) {
         grossPrice: match.grossPrice,
         quantity: match.minQuantity,
         minQuantity: match.minQuantity,
+        step: match.step,
         matches: [],
         searching: false,
         searched: false
@@ -14800,7 +14859,7 @@ function QuickOrderInner(props) {
       const n = parseInt(raw, 10);
       setRows(
         (prev) => prev.map(
-          (r) => r.key === key ? { ...r, quantity: Number.isFinite(n) && n > 0 ? Math.max(r.minQuantity, n) : r.minQuantity } : r
+          (r) => r.key === key ? { ...r, quantity: snapToStep(n, r.minQuantity, r.step) } : r
         )
       );
     },
@@ -14853,7 +14912,8 @@ function QuickOrderInner(props) {
             netPrice: exact.netPrice,
             grossPrice: exact.grossPrice,
             quantity: Math.max(exact.minQuantity, line.quantity),
-            minQuantity: exact.minQuantity
+            minQuantity: exact.minQuantity,
+            step: exact.step
           });
         }
         if (resolved.length) {
@@ -14984,7 +15044,7 @@ function QuickOrderInner(props) {
           {
             type: "number",
             min: r.minQuantity,
-            step: 1,
+            step: r.step || 1,
             value: r.productId ? r.quantity : "",
             disabled: !r.productId,
             onChange: (e) => setQuantity(r.key, e.target.value),
@@ -19352,7 +19412,7 @@ function SearchBar(rawProps) {
                 // boilerplate's dark header band happened to make work: on a
                 // light header `bg-white/95 border-white/20` rendered as an
                 // invisible input.
-                "propeller-search-bar__input w-full pl-10 pr-10 py-2 bg-card border border-input rounded-container focus:outline-none focus:ring-2 focus:ring-secondary placeholder:text-muted-foreground",
+                "propeller-search-bar__input w-full pl-10 pr-10 py-2 bg-card text-foreground border border-input rounded-container focus:outline-none focus:ring-2 focus:ring-secondary placeholder:text-muted-foreground",
                 props.inputClassName
               ),
               placeholder: props.placeholder || "Search products...",
@@ -19362,7 +19422,7 @@ function SearchBar(rawProps) {
           ),
           searchLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-search-bar__spinner-wrapper absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-search-bar__spinner animate-spin rounded-full h-5 w-5 border-b-2 border-primary" }) }) : null
         ] }) }),
-        showDropdown ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-search-bar__dropdown absolute top-full left-0 right-0 mt-2 bg-card rounded-container shadow-xl border border-border z-50 flex flex-col max-h-96", children: [
+        showDropdown ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-search-bar__dropdown absolute top-full left-0 right-0 mt-2 bg-card text-foreground rounded-container shadow-xl border border-border z-50 flex flex-col max-h-96", children: [
           results.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-search-bar__results flex-1 overflow-y-auto", children: results?.map((result, index) => {
               const ResultTag = props.getResultHref ? "a" : "div";