@propeller-commerce/propeller-v2-react-ui 0.15.4 → 0.15.6

package/CHANGELOG.md

@@ -8,6 +8,62 @@ 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.6] - 2026-08-10
+
+### Fixed
+
+- **Eight user-visible strings could not be translated at all** — they had no
+  label key and no prop, so a consumer supplying a full `labels` dictionary
+  still shipped English on a Dutch page. Every one now resolves through
+  `getLabel` with the previous text as the fallback, so this is additive: a
+  consumer that supplies none of the new keys renders exactly as before.
+
+  | Component | Was | New key |
+  |---|---|---|
+  | `CategoryDescription` | Read more / Read less | `readMore`, `readLess` |
+  | `ProductDescription` | Read more / Read less | `readMore`, `readLess` |
+  | `MachineGrid` | Loading…, No machines found. | `loading`, `noMachines` |
+  | `RegisterForm` | Please select an account type. | `selectUserType` |
+  | `AccountIconAndMenu` | Hi, {name} | `greeting` |
+
+  `ProductTabs` now forwards its `labels` to `ProductDescription`, without
+  which the two new keys could not be reached on a product page.
+
+  The greeting takes a `{name}` placeholder rather than a bare prefix, so a
+  translation can put the name first — matching the existing `{link}`
+  convention in `LoginForm.noAccount`.
+
+- **Raw server errors are overridable.** `RegisterForm` rendered
+  `result.error` and `PurchaseAuthorizationConfigurator` rendered the
+  add-contact failure verbatim — unlocalised upstream text, often cryptic.
+  Supplying `registrationFailed` / `addContactFailed` now replaces them
+  outright, the same masking `LoginForm` already does with
+  `invalidCredentials`. Omit the key to keep the current pass-through.
+
+- **Both authorization modal close buttons had no accessible name.** The
+  `✕` glyph and the SVG icon were the only content, so screen readers
+  announced punctuation or nothing. Both take an `aria-label` from the
+  existing `closeLabel` key, with the glyph/icon marked `aria-hidden`.
+
+## [0.15.5] - 2026-08-10
+
+### Fixed
+
+- `useMenu` no longer drops categories that lack a translation in the active
+  language. The query filtered server-side — `names(language: $language)` — so a
+  category with no entry for that language came back with `names: []` and
+  `slugs: []`. `mapCategory`'s `?? raw.names?.[0]` fallback then had nothing to
+  fall back to, and the row rendered with a blank label and an empty slug:
+  invisible and unclickable. Switching a bilingual storefront to a language with
+  partial translations collapsed the menu to whichever categories happened to be
+  translated (PWP-927).
+
+  `names` and `slugs` are now fetched unfiltered — every translation — and
+  `mapCategory` picks the active language, falling back to whichever translation
+  exists. `slugs` gained a `language` field so the slug follows the same rule as
+  the name. `$language` is gone from the query signature (an unused variable is
+  a GraphQL validation error); it still keys the cache and drives the pick.
+
 ## [0.15.4] - 2026-08-10
 
 ### Fixed

package/dist/index.cjs

@@ -1592,15 +1592,15 @@ function buildCategoriesQuery(depth) {
     categories {
       categoryId
       hidden
-      names(language: $language) { value language }
-      slugs(language: $language) { value }
+      names { value language }
+      slugs { value language }
       ${buildCategoriesQuery(depth - 1)}
     }
   `;
 }
 function mapCategory(raw, language) {
   const nameEntry = raw.names?.find((n) => n.language === language) ?? raw.names?.[0];
-  const slugEntry = raw.slugs?.[0];
+  const slugEntry = raw.slugs?.find((s) => s.language === language) ?? raw.slugs?.[0];
   return {
     categoryId: raw.categoryId,
     name: nameEntry?.value ?? "",
@@ -1676,17 +1676,17 @@ function useMenu(options) {
     inflightFetches.set(key, promise);
     try {
       const gql = `
-        query Menu($categoryId: Float, $language: String) {
+        query Menu($categoryId: Float) {
           category(categoryId: $categoryId) {
             categoryId
             hidden
-            names(language: $language) { value language }
-            slugs(language: $language) { value }
+            names { value language }
+            slugs { value language }
             ${buildCategoriesQuery(depth)}
           }
         }
       `;
-      const variables = { categoryId: rootCategoryId, language };
+      const variables = { categoryId: rootCategoryId };
       const data = await graphqlClient.query(gql, variables);
       const root = data?.category ?? null;
       const items = root ? (root.categories ?? []).filter((cat) => !isHidden(cat)).map((cat) => mapCategory(cat, language)) : [];
@@ -4181,10 +4181,7 @@ function AccountIconAndMenu(rawProps) {
                     )
                   }
                 ),
-                props.user ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "propeller-account-menu__greeting hidden md:block font-normal", children: [
-                  "Hi, ",
-                  getUserName()
-                ] }) : null,
+                props.user ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-account-menu__greeting hidden md:block font-normal", children: propellerV2CoreUi.getLabel(props.labels, "greeting", "Hi, {name}").replace("{name}", getUserName()) }) : null,
                 !props.user ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-account-menu__greeting hidden md:block font-normal", children: propellerV2CoreUi.getLabel(props.labels, "accountLabel", "Account") }) : null
               ]
             }
@@ -7995,7 +7992,7 @@ function CategoryDescription(props) {
             type: "button",
             className: "propeller-category-description__toggle mt-2 text-sm font-medium text-primary hover:underline",
             onClick: () => setExpanded((v) => !v),
-            children: expanded ? "Read less" : "Read more"
+            children: expanded ? propellerV2CoreUi.getLabel(props.labels, "readLess", "Read less") : propellerV2CoreUi.getLabel(props.labels, "readMore", "Read more")
           }
         ) : null
       ]
@@ -9912,7 +9909,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 getLabel56(key) {
+  function getLabel59(key) {
     const labels = props.labels || {};
     return labels[key] !== void 0 ? labels[key] : DEFAULT_LABELS[key] || key;
   }
@@ -9950,8 +9947,8 @@ function GridToolbar(rawProps) {
   }
   function getAvailabilityLabel() {
     const qty = props.minStock;
-    if (qty !== void 0 && qty > propellerV2CoreUi.MIN_STOCK_THRESHOLD) return `${getLabel56("inStock")}: ${qty}+`;
-    return getLabel56("inStock");
+    if (qty !== void 0 && qty > propellerV2CoreUi.MIN_STOCK_THRESHOLD) return `${getLabel59("inStock")}: ${qty}+`;
+    return getLabel59("inStock");
   }
   function handleSortFieldChange(field) {
     setCurrentSortField(field);
@@ -9997,7 +9994,7 @@ function GridToolbar(rawProps) {
           /* @__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,
             "\xA0",
-            props.itemsFound === 1 ? getLabel56("productSingular") : getLabel56("productPlural")
+            props.itemsFound === 1 ? getLabel59("productSingular") : getLabel59("productPlural")
           ] }) : null }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-toolbar__controls flex flex-wrap items-center gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -10008,7 +10005,7 @@ function GridToolbar(rawProps) {
                 onChange: (e) => handleOffsetChange(parseInt(e.target.value)),
                 children: getOffsetOptions()?.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: n, children: [
                   n,
-                  getLabel56("perPage")
+                  getLabel59("perPage")
                 ] }, n))
               }
             ),
@@ -10024,7 +10021,7 @@ function GridToolbar(rawProps) {
                   {
                     value: field,
                     disabled: field === "PRICE" && isPriceSortDisabled(),
-                    children: getLabel56(field)
+                    children: getLabel59(field)
                   },
                   field
                 ))
@@ -10037,8 +10034,8 @@ function GridToolbar(rawProps) {
                 value: currentSortOrder,
                 onChange: (e) => handleSortOrderChange(e.target.value),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.ASC, children: getLabel56("ASC") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.DESC, children: getLabel56("DESC") })
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.ASC, children: getLabel59("ASC") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: propellerSdkV2.SortOrder.DESC, children: getLabel59("DESC") })
                 ]
               }
             ),
@@ -10048,7 +10045,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" ? getLabel56("switchToList") : getLabel56("switchToGrid"),
+                title: currentViewMode === "grid" ? getLabel59("switchToList") : getLabel59("switchToGrid"),
                 children: [
                   currentViewMode === "grid" ? /* @__PURE__ */ jsxRuntime.jsxs(
                     "svg",
@@ -10106,7 +10103,7 @@ function GridToolbar(rawProps) {
               onClick: (event) => {
                 if (props.onClearFilters) props.onClearFilters();
               },
-              children: getLabel56("clearAll")
+              children: getLabel59("clearAll")
             }
           ),
           props.priceFilterMin !== void 0 || props.priceFilterMax !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10117,7 +10114,7 @@ function GridToolbar(rawProps) {
                 if (props.onPriceFilterRemove) props.onPriceFilterRemove();
               },
               children: [
-                getLabel56("price"),
+                getLabel59("price"),
                 ": \u20AC",
                 props.priceFilterMin ?? 0,
                 " \u2013 \u20AC",
@@ -10167,7 +10164,7 @@ var DEFAULT_LABELS2 = {
   of: "of"
 };
 function GridPagination(props) {
-  function getLabel56(key) {
+  function getLabel59(key) {
     const labels = props.labels || {};
     return labels[key] !== void 0 ? labels[key] : DEFAULT_LABELS2[key] || key;
   }
@@ -10240,15 +10237,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: getLabel56("previous")
+              children: getLabel59("previous")
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "propeller-grid-pagination__info px-2 text-sm font-medium text-muted-foreground", children: [
-            getLabel56("page"),
+            getLabel59("page"),
             "\xA0",
             currentPage,
             "\xA0",
-            getLabel56("of"),
+            getLabel59("of"),
             "\xA0",
             totalPages
           ] }),
@@ -10259,7 +10256,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: getLabel56("next")
+              children: getLabel59("next")
             }
           )
         ] }) : null,
@@ -10271,7 +10268,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: getLabel56("previous")
+              children: getLabel59("previous")
             }
           ),
           getFullPages().map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -10298,7 +10295,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: getLabel56("next")
+              children: getLabel59("next")
             }
           )
         ] }) : null
@@ -10437,7 +10434,7 @@ function MachineGrid(rawProps) {
     const cards = rootMachines.map((m) => ({ machine: m, href: childSlugHref(m) })).filter((c) => c.href !== null);
     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: "Loading\u2026" }) : cards.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-12 text-center text-foreground-subtle", children: "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(
+      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(
         MachineCard,
         {
           machine: m,
@@ -15436,7 +15433,7 @@ function ProductDescription(props) {
             type: "button",
             className: "propeller-product-description__toggle mt-2 text-sm font-medium text-primary hover:underline",
             onClick: () => setExpanded((v) => !v),
-            children: expanded ? "Read less" : "Read more"
+            children: expanded ? propellerV2CoreUi.getLabel(props.labels, "readLess", "Read less") : propellerV2CoreUi.getLabel(props.labels, "readMore", "Read more")
           }
         ) : null
       ]
@@ -16751,7 +16748,8 @@ function ProductTabs(rawProps) {
                 product: props.product,
                 language: props.language,
                 collapsed: props.descriptionCollapsed,
-                maxLength: props.descriptionMaxLength
+                maxLength: props.descriptionMaxLength,
+                labels: props.labels
               }
             ) : null,
             specsVisited && isTabVisible("specifications") ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: isActive("specifications") ? "" : "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -16821,7 +16819,8 @@ function ProductTabs(rawProps) {
                 product: props.product,
                 language: props.language,
                 collapsed: props.descriptionCollapsed,
-                maxLength: props.descriptionMaxLength
+                maxLength: props.descriptionMaxLength,
+                labels: props.labels
               }
             ) }) : null
           ] }) : null,
@@ -17149,8 +17148,9 @@ function PurchaseAuthorizationConfigurator(rawProps) {
                   {
                     type: "button",
                     className: "text-muted-foreground hover:text-foreground transition",
+                    "aria-label": propellerV2CoreUi.getLabel(props.labels, "closeLabel", "Close"),
                     onClick: () => closeAddContactModal(),
-                    children: "\u2715"
+                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2715" })
                   }
                 )
               ] }),
@@ -17248,7 +17248,7 @@ function PurchaseAuthorizationConfigurator(rawProps) {
                   }
                 )
               ] }),
-              addContactError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: addContactError }) : null,
+              addContactError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: props.labels?.addContactFailed || addContactError }) : null,
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3 pt-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -17401,8 +17401,9 @@ function PurchaseAuthorizationRequests(rawProps) {
             {
               type: "button",
               className: "propeller-purchase-authorization-requests__modal-close text-foreground-subtle hover:text-foreground focus:outline-none",
+              "aria-label": propellerV2CoreUi.getLabel(props.labels, "closeLabel", "Close"),
               onClick: () => closeModal(),
-              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "h-5 w-5", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "h-5 w-5", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
             }
           )
         ] }),
@@ -17685,6 +17686,8 @@ function RegisterForm(rawProps) {
   const emailPlaceholder = props.labels?.emailPlaceholder || "name@example.com";
   const passwordPlaceholder = props.labels?.passwordPlaceholder || "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
   const passwordMismatchText = props.labels?.passwordMismatch || "Passwords do not match";
+  const selectUserTypeText = props.labels?.selectUserType || "Please select an account type.";
+  const registrationFailedText = props.labels?.registrationFailed;
   const loginText = props.labels?.loginText || "Already have an account?";
   const loginLinkText = props.labels?.loginLink || "Log in";
   function isFieldRequired(fieldName) {
@@ -17695,7 +17698,7 @@ function RegisterForm(rawProps) {
   async function handleSubmit(e) {
     e.preventDefault();
     if (!effectiveUserType) {
-      setError("Please select an account type.");
+      setError(selectUserTypeText);
       return;
     }
     if (password !== confirmPassword) {
@@ -17771,7 +17774,7 @@ function RegisterForm(rawProps) {
         );
       }
     } else if (result.error) {
-      setError(result.error);
+      setError(registrationFailedText || result.error);
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-register-form", "data-loading": loading ? "true" : "false", "data-user-type": selectedUserType, children: [