@propeller-commerce/propeller-v2-react-ui 0.20.1 → 0.21.0

package/CHANGELOG.md

@@ -8,6 +8,66 @@ 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.21.0] - 2026-09-23
+
+`MachineGrid` stops losing rows, and becomes usable in a translated or
+customised storefront. One project had given up on it and rebuilt the surface
+by hand (~450 lines), losing the breadcrumb, module grid and filter wiring.
+
+### Fixed
+
+- **A machine with no slug in the tree language is no longer dropped from the
+  list.** `childSlugHref` returned `null` and the card was filtered out, so a
+  customer saw three of four machines with nothing saying so — and the same
+  helper guards the child-module grid, so a module could vanish from a machine
+  the same way. Two changes: `ROOT_MACHINE_FIELDS` no longer passes
+  `(language: $language)` to `name` / `description` / `slug`, so the
+  cross-language fallback in `getLocalizedValue` has entries to fall back to;
+  and a machine with no slug in *any* language now renders as an unlinked card
+  rather than vanishing. Needs SDK ≥ 0.17.0 for the child-machine half, which
+  comes through `getMachine`. (PWP-993)
+
+  The asymmetry that made this hard to spot: the **name** falls back across
+  languages, the **slug** did not — so a half-translated tree rendered names in
+  the wrong language rather than failing, but lost whole rows when the slug was
+  the missing half.
+
+### Added
+
+- **`MachineGrid` forwards label overrides to the parts list.** It rendered its
+  parts through `ProductGrid` but forwarded none of `productCardLabels`,
+  `addToCartLabels`, `stockLabels`, `priceLabels` or `labels`, and there was no
+  way to reach them from outside — so "In stock", "Add" and "Search parts…"
+  appeared in English in the middle of translated copy. A monolingual shop
+  never noticed. (PWP-995a)
+- **`MachineGrid.productCardComponent`** — the `ProductGrid` prop of the same
+  name, forwarded. Without it a quote-only product rendered with the host's
+  custom card on a normal listing and with the stock card inside a machine, so
+  the same product looked different depending on the page it was reached from.
+  (PWP-995c)
+- **`useSpareParts({ page })`** — a controlled page, mirroring the existing
+  controlled `parts`. Every other listing input (`term`, `textFilters`,
+  `sortField`, `pageSize`) was already an option, so the absence of `page` read
+  as "paging is internal" — and it was not: driving the hook from URL state and
+  rendering `<GridPagination>` changed the URL and re-rendered the same first
+  twelve parts. The only way in was a `useEffect(() => goToPage(page))` that
+  `MachineGrid` did internally and nothing documented. `goToPage` still works
+  for uncontrolled hosts; omit `page` for the previous behaviour. (PWP-995b)
+
+### Changed
+
+- `MachineCard.href` is now optional — a machine with no URL renders as a
+  `<div>` instead of an `<a>`.
+- **`MachineGrid` drives `useSpareParts` with `page` directly** instead of the
+  internal `goToPage` effect.
+
+### Documentation
+
+- **`MachineCardProps.labels` documented one key while `MachineGrid` read
+  three.** The doc named only `viewMachine`; `MachineGrid` also reads `loading`
+  and `noMachines` off the same object, so anyone following the doc left those
+  two in English. Both sides now say so. (PWP-995d)
+
 ## [0.20.1] - 2026-09-23
 
 ### Fixed

package/dist/index.cjs

@@ -2776,7 +2776,8 @@ function useSpareParts(options) {
   const [childMachines, setChildMachines] = React6.useState([]);
   const [itemsFound, setItemsFound] = React6.useState(0);
   const [internalLoading, setInternalLoading] = React6.useState(false);
-  const [currentPage, setCurrentPage] = React6.useState(1);
+  const [internalPage, setInternalPage] = React6.useState(1);
+  const currentPage = options.page ?? internalPage;
   const [totalPages, setTotalPages] = React6.useState(1);
   const fetchIdRef = React6.useRef(0);
   const displayParts = React6.useMemo(
@@ -2925,7 +2926,7 @@ function useSpareParts(options) {
     userKey
   ]);
   const goToPage = React6.useCallback((page) => {
-    setCurrentPage((prev) => {
+    setInternalPage((prev) => {
       if (page >= 1 && (totalPages <= 1 || page <= totalPages)) return page;
       return prev;
     });
@@ -2944,9 +2945,9 @@ function useSpareParts(options) {
 var inflightFetches4 = /* @__PURE__ */ new Set();
 var ROOT_MACHINE_FIELDS = `
   id
-  name(language: $language) { language value }
-  description(language: $language) { language value }
-  slug(language: $language) { language value }
+  name { language value }
+  description { language value }
+  slug { language value }
   media {
     images {
       items { imageVariants(input: $imageVariantFilters) { url } }
@@ -8549,6 +8550,7 @@ function getMachineImageUrl(machine) {
 }
 function MachineCard(props) {
   const { machine, href, language } = props;
+  const Wrapper = href ? "a" : "div";
   const showImage = props.showImage ?? true;
   const showDescription = props.showDescription ?? false;
   const name = propellerV2CoreUi.getLocalizedValue(machine.name, language);
@@ -8560,10 +8562,9 @@ function MachineCard(props) {
     {
       className: cn(`propeller-machine-card group relative flex h-full flex-col overflow-hidden rounded-lg border border-border bg-background ${props.className ?? ""}`),
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "a",
+        Wrapper,
         {
-          href,
-          onClick: handleClick,
+          ...href ? { href, onClick: handleClick } : {},
           className: "flex h-full flex-col focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
           children: [
             showImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-machine-card__image aspect-square w-full overflow-hidden bg-background-subtle", children: imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -10468,7 +10469,7 @@ function MachineGrid(rawProps) {
     // node query threads through useSpareParts.
     imageVariantFilters: configuration?.imageVariantFiltersMedium
   });
-  const { displayParts, childMachines, isLoading: partsLoading, currentPage, totalPages, goToPage } = useSpareParts({
+  const { displayParts, childMachines, isLoading: partsLoading, currentPage, totalPages } = useSpareParts({
     graphqlClient: props.graphqlClient,
     // Idle at the root (no slug).
     slug: isRoot ? void 0 : currentSlug,
@@ -10484,6 +10485,10 @@ function MachineGrid(rawProps) {
     sortField,
     sortOrder,
     pageSize: offset,
+    // The hook takes the controlled page directly now. It used to own its own
+    // counter, so the only way to drive it from URL state was the effect
+    // below — undiscoverable unless you read this file (PWP-995b).
+    page: listing.page,
     configuration: rawProps.configuration ?? props.configuration,
     onFiltersChange: setGridFilters,
     onPriceBoundsChange: (min, max) => {
@@ -10493,9 +10498,6 @@ function MachineGrid(rawProps) {
     onItemsFoundChange: setItemsFound,
     onMachineChange: setMachine
   });
-  React6.useEffect(() => {
-    goToPage(listing.page);
-  }, [listing.page, goToPage]);
   const machineName = machine ? propellerV2CoreUi.getLocalizedValue(machine.name, machineLanguage) : slugToLabel(currentSlug);
   const partProducts = React6.useMemo(
     () => displayParts.map((p) => p.product).filter(Boolean),
@@ -10552,11 +10554,10 @@ function MachineGrid(rawProps) {
   );
   const childSlugHref = (child) => {
     const slug = propellerV2CoreUi.getLocalizedValue(child.slug, machineLanguage);
-    if (!slug) return null;
-    return `${currentPath}/${slug}`;
+    return slug ? `${currentPath}/${slug}` : void 0;
   };
   if (isRoot) {
-    const cards = rootMachines.map((m) => ({ machine: m, href: childSlugHref(m) })).filter((c) => c.href !== null);
+    const cards = rootMachines.map((m) => ({ machine: m, href: childSlugHref(m) }));
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rawProps.className, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "propeller-grid-title mb-6 text-2xl font-semibold", children: rawProps.rootTitle ?? "Machines" }),
       rootLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-12 text-center text-foreground-subtle", children: propellerV2CoreUi.getLabel(rawProps.machineCardLabels, "loading", "Loading\u2026") }) : cards.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-12 text-center text-foreground-subtle", children: propellerV2CoreUi.getLabel(rawProps.machineCardLabels, "noMachines", "No machines found.") }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: cards.map(({ machine: m, href }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -10588,7 +10589,6 @@ function MachineGrid(rawProps) {
     /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "propeller-grid-title mb-6 text-2xl font-semibold", children: machineName }),
     childMachines.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-machine-children mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: childMachines.map((child) => {
       const href = childSlugHref(child);
-      if (!href) return null;
       return /* @__PURE__ */ jsxRuntime.jsx(
         MachineCard,
         {
@@ -10666,6 +10666,12 @@ function MachineGrid(rawProps) {
             columns: viewMode === "list" ? 1 : 3,
             showAvailability: rawProps.showAvailability ?? false,
             showStock: rawProps.showStock ?? true,
+            productCardComponent: rawProps.productCardComponent,
+            productCardLabels: rawProps.productCardLabels,
+            addToCartLabels: rawProps.addToCartLabels,
+            stockLabels: rawProps.stockLabels,
+            priceLabels: rawProps.priceLabels,
+            labels: rawProps.labels,
             belowName: (product) => {
               const qty = quantityBySku.get(product.sku);
               if (!qty) return null;