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

package/dist/index.js

@@ -2756,7 +2756,8 @@ function useSpareParts(options) {
   const [childMachines, setChildMachines] = useState([]);
   const [itemsFound, setItemsFound] = useState(0);
   const [internalLoading, setInternalLoading] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
+  const [internalPage, setInternalPage] = useState(1);
+  const currentPage = options.page ?? internalPage;
   const [totalPages, setTotalPages] = useState(1);
   const fetchIdRef = useRef(0);
   const displayParts = useMemo(
@@ -2905,7 +2906,7 @@ function useSpareParts(options) {
     userKey
   ]);
   const goToPage = useCallback((page) => {
-    setCurrentPage((prev) => {
+    setInternalPage((prev) => {
       if (page >= 1 && (totalPages <= 1 || page <= totalPages)) return page;
       return prev;
     });
@@ -2924,9 +2925,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 } }
@@ -8529,6 +8530,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 = getLocalizedValue(machine.name, language);
@@ -8540,10 +8542,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__ */ 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__ */ jsx("div", { className: "propeller-machine-card__image aspect-square w-full overflow-hidden bg-background-subtle", children: imageUrl ? /* @__PURE__ */ jsx(
@@ -10448,7 +10449,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,
@@ -10464,6 +10465,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) => {
@@ -10473,9 +10478,6 @@ function MachineGrid(rawProps) {
     onItemsFoundChange: setItemsFound,
     onMachineChange: setMachine
   });
-  useEffect(() => {
-    goToPage(listing.page);
-  }, [listing.page, goToPage]);
   const machineName = machine ? getLocalizedValue(machine.name, machineLanguage) : slugToLabel(currentSlug);
   const partProducts = useMemo(
     () => displayParts.map((p) => p.product).filter(Boolean),
@@ -10532,11 +10534,10 @@ function MachineGrid(rawProps) {
   );
   const childSlugHref = (child) => {
     const slug = 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__ */ jsxs("div", { className: rawProps.className, children: [
       /* @__PURE__ */ jsx("h1", { className: "propeller-grid-title mb-6 text-2xl font-semibold", children: rawProps.rootTitle ?? "Machines" }),
       rootLoading ? /* @__PURE__ */ jsx("p", { className: "py-12 text-center text-foreground-subtle", children: getLabel(rawProps.machineCardLabels, "loading", "Loading\u2026") }) : cards.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-12 text-center text-foreground-subtle", children: getLabel(rawProps.machineCardLabels, "noMachines", "No machines found.") }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: cards.map(({ machine: m, href }) => /* @__PURE__ */ jsx(
@@ -10568,7 +10569,6 @@ function MachineGrid(rawProps) {
     /* @__PURE__ */ jsx("h1", { className: "propeller-grid-title mb-6 text-2xl font-semibold", children: machineName }),
     childMachines.length > 0 && /* @__PURE__ */ 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__ */ jsx(
         MachineCard,
         {
@@ -10646,6 +10646,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;