@propeller-commerce/propeller-v2-react-ui 0.4.24 → 0.4.26

package/CHANGELOG.md

@@ -8,6 +8,64 @@ 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.4.26] - 2026-07-21
+
+### Added
+
+- **`SearchBar`: real anchor links for navigation.** New optional
+  `getResultHref(result)` and `getViewAllHref(term)` props. When provided, the
+  autosuggest result rows and the "View all results" CTA render as real
+  `<a href>` elements — middle-clickable, open-in-new-tab, hover-preview,
+  crawlable — while the existing `onResultClick`/`onViewAllClick` callbacks
+  still fire for SPA navigation (modified clicks fall through to the browser).
+  Omit the props to keep the previous behaviour.
+- **`OrderList`: URL-persistable filters.** New optional `initialSearchForm`
+  (seed the filter form on mount, e.g. rehydrated from the URL) and
+  `onSearchApply(form)` (fires when the user applies/clears filters) props, so
+  the consuming page can keep the filter state in the URL — bookmarkable,
+  shareable, back-button-friendly. `useOrders` gained the matching
+  `initialSearchForm` option.
+
+### Changed
+
+- **`AccountIconAndMenu`: account-menu items are now `<a href>` instead of
+  `<button>`** (both the sidebar and dropdown variants). They use each link's
+  existing `href`, so they are middle-clickable / new-tab-able / crawlable;
+  `onMenuItemClick` still handles plain-click SPA navigation.
+- **`SearchBar`: the "View all results" fallback is now a `<button>`** (was a
+  non-focusable `<div>`), so it is keyboard-accessible even without the new
+  `getViewAllHref` prop.
+
+### Fixed
+
+- **`OrderList`: clickable rows now show `cursor: pointer`.** When
+  `rowsClickable` is set, the row cursor matches its behaviour (was `auto`,
+  inconsistent with the favourites cards).
+
+## [0.4.25] - 2026-07-20
+
+### Fixed
+
+- **Raw enums no longer leak to the UI.** `OrderList` + `OrderSummary` gained a
+  `statusLabels` prop (raw status → localized, e.g. `NEW`→"Nieuw"), and
+  `OrderSummary` a `paymethodLabels` prop (raw method → localized, mapping both
+  the order-path `REKENING` and quote-path `ACCOUNT` variants to one label).
+  Unknown keys fall back to the raw value.
+- `AddressCard`: new `showTypeBadge` prop (@default true) — set `false` to hide
+  the invoice/delivery chip where a heading already names the type.
+- **Concatenated sentences → placeholder interpolation** (fixes broken Dutch
+  word order + missing spaces):
+  - `FavoriteLists` delete confirm: full-sentence `deleteConfirm` with a
+    `{name}` placeholder (the verb was stranded before the object, no space
+    before the quote).
+  - `CartOverview` / `QuoteActions` terms consent: `termsConsent` with a `{link}`
+    placeholder (was "de<a>…", no space, English order).
+  - `LoginForm` account-header prompt: `noAccount` with a `{link}` placeholder
+    (was "account?Create an Account", no space).
+- **Pluralization**: `FavoriteLists` item count uses `itemSingular`/`itemPlural`
+  by count ("1 artikel" not "1 artikelen"); `GridToolbar` product count uses
+  `productSingular`/`productPlural` (+ a space).
+
 ## [0.4.24] - 2026-07-20
 
 ### Fixed

package/dist/index.cjs

@@ -1718,7 +1718,9 @@ function useOrders(options) {
   const [orders, setOrders] = React6.useState([]);
   const [loading, setLoading] = React6.useState(false);
   const [error, setError] = React6.useState(null);
-  const [searchForm, setSearchForm] = React6.useState({});
+  const [searchForm, setSearchForm] = React6.useState(
+    options.initialSearchForm ?? {}
+  );
   const pagination = usePagination(options.itemsPerPage ?? 10);
   const fetchOrders = React6.useCallback(
     async (page = 1) => {
@@ -3278,10 +3280,15 @@ function LoginForm(rawProps) {
         ] }) : null,
         props.accountHeaderLoginForm ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-login-form__footer flex flex-col gap-2 text-sm pt-3 text-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(LoginFormForgotPasswordLink, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-login-form__register text-xs text-muted-foreground", children: [
-            propellerV2CoreUi.getLabel(props.labels, "noAccount", "Don't have an account?"),
-            /* @__PURE__ */ jsxRuntime.jsx(LoginFormRegisterLink, {})
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-login-form__register text-xs text-muted-foreground", children: (() => {
+            const tpl = propellerV2CoreUi.getLabel(props.labels, "noAccount", "Don't have an account? {link}");
+            const [before, after = ""] = tpl.split("{link}");
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              before,
+              /* @__PURE__ */ jsxRuntime.jsx(LoginFormRegisterLink, {}),
+              after
+            ] });
+          })() })
         ] }) : null
       ]
     }
@@ -3570,6 +3577,13 @@ function AccountIconAndMenu(rawProps) {
     setMenuOpen(false);
     if (props.onMenuItemClick) props.onMenuItemClick(href);
   }
+  function handleMenuLinkClick(event, href) {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+    event.preventDefault();
+    handleMenuItemClick(href);
+  }
   function handleLogoutClick() {
     setMenuOpen(false);
     if (props.onLogoutClick) props.onLogoutClick();
@@ -3618,10 +3632,10 @@ function AccountIconAndMenu(rawProps) {
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-account-menu__user-name font-medium text-foreground truncate", children: getUserName() })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "propeller-account-menu__nav py-2", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "propeller-account-menu__list space-y-0.5", children: getMenuLinks()?.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "propeller-account-menu__item", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            "a",
             {
-              type: "button",
-              onClick: (event) => handleMenuItemClick(link.href),
+              href: link.href,
+              onClick: (event) => handleMenuLinkClick(event, link.href),
               "data-active": isActiveLink(link.href) ? "true" : "false",
               className: `propeller-account-menu__link flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors ${isActiveLink(link.href) ? "bg-secondary/5 text-secondary border-l-2 border-secondary" : "text-muted-foreground hover:bg-surface-hover hover:text-foreground"}`,
               children: link.label
@@ -3684,11 +3698,11 @@ function AccountIconAndMenu(rawProps) {
                     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-account-menu__user-name font-medium text-foreground truncate", children: getUserName() })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "propeller-account-menu__nav", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "propeller-account-menu__list space-y-0.5", children: getMenuLinks()?.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "propeller-account-menu__item", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
+                    "a",
                     {
-                      type: "button",
+                      href: link.href,
                       className: "propeller-account-menu__link flex w-full items-center gap-3 px-3 py-2 text-sm font-medium rounded-control text-muted-foreground hover:bg-surface-hover hover:text-foreground transition-colors",
-                      onClick: (event) => handleMenuItemClick(link.href),
+                      onClick: (event) => handleMenuLinkClick(event, link.href),
                       children: link.label
                     }
                   ) }, link.href)) }) }),
@@ -5450,7 +5464,8 @@ function AddressCard(rawProps) {
   ] });
 }
 function AddressCardTypeBadge(props) {
-  const { derived } = useAddressCardContext();
+  const { derived, resolved } = useAddressCardContext();
+  if (resolved.showTypeBadge === false) return null;
   if (!derived.addressType) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -7149,18 +7164,23 @@ function CartOverview(props) {
             onChange: (event) => setTermsAccepted(event.target.checked)
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "cart-overview-terms", className: "text-sm leading-none", children: [
-          propellerV2CoreUi.getLabel(props.labels, "termsPrefix", "I agree to the"),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: "#",
-              className: "text-primary hover:underline font-medium",
-              onClick: handleTermsLinkClick,
-              children: propellerV2CoreUi.getLabel(props.labels, "termsLink", "Terms and Conditions")
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "cart-overview-terms", className: "text-sm leading-none", children: (() => {
+          const tpl = propellerV2CoreUi.getLabel(props.labels, "termsConsent", "I agree to the {link}");
+          const [before, after = ""] = tpl.split("{link}");
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            before,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "#",
+                className: "text-primary hover:underline font-medium",
+                onClick: handleTermsLinkClick,
+                children: propellerV2CoreUi.getLabel(props.labels, "termsLink", "Terms and Conditions")
+              }
+            ),
+            after
+          ] });
+        })() })
       ] }) : null,
       showPurchaseButton ? /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -9925,7 +9945,7 @@ function FavoriteLists(rawProps) {
                     ),
                     getTotalCount(list),
                     "\xA0",
-                    propellerV2CoreUi.getLabel(props.labels, "items", "items")
+                    getTotalCount(list) === 1 ? propellerV2CoreUi.getLabel(props.labels, "itemSingular", "item") : propellerV2CoreUi.getLabel(props.labels, "itemPlural", "items")
                   ] }) : null
                 ] })
               ] }) : null
@@ -10109,15 +10129,15 @@ function FavoriteLists(rawProps) {
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "propeller-favorite-lists__delete-prompt", children: [
-          propellerV2CoreUi.getLabel(props.labels, "deleteConfirm", "Are you sure you want to delete"),
-          /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
-            '"',
-            listToDelete?.name,
-            '"'
-          ] }),
-          "?"
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-favorite-lists__delete-prompt", children: (() => {
+          const tpl = propellerV2CoreUi.getLabel(props.labels, "deleteConfirm", 'Are you sure you want to delete "{name}"?');
+          const [before, after = ""] = tpl.split("{name}");
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            before,
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: listToDelete?.name }),
+            after
+          ] });
+        })() }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "propeller-favorite-lists__delete-warning text-sm text-destructive", children: propellerV2CoreUi.getLabel(props.labels, "deleteWarning", "This action cannot be undone.") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3 pt-6", children: [
@@ -10701,6 +10721,8 @@ var DEFAULT_LABELS2 = {
   [propellerSdkV2.SortOrder.DESC]: "High to Low",
   clearAll: "Clear All",
   products: " Products",
+  productSingular: "Product",
+  productPlural: "Products",
   from: "from",
   results: "results",
   perPage: " per page",
@@ -10794,7 +10816,8 @@ function GridToolbar(rawProps) {
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-toolbar__bar flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4", children: [
           /* @__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,
-            getLabel53("products")
+            "\xA0",
+            props.itemsFound === 1 ? getLabel53("productSingular") : getLabel53("productPlural")
           ] }) : null }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-grid-toolbar__controls flex flex-wrap items-center gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -11836,7 +11859,8 @@ function OrderList(rawProps) {
     orderStatuses: props.orderStatus,
     termFields: props.termFields,
     itemsPerPage: props.initialItemsPerPage || 10,
-    channelIds: props.channelIds
+    channelIds: props.channelIds,
+    initialSearchForm: props.initialSearchForm
   });
   function handlePageChange(newPage) {
     if (newPage >= 1 && newPage <= totalPages) {
@@ -11870,6 +11894,9 @@ function OrderList(rawProps) {
         return "bg-warning/10 text-warning";
     }
   }
+  function statusLabel(status) {
+    return props.statusLabels?.[status] || status;
+  }
   function getColumnLabel(col) {
     if (props.columnConfig && props.columnConfig[col]) {
       return props.columnConfig[col];
@@ -12146,6 +12173,7 @@ function OrderList(rawProps) {
             onClick: (event) => {
               setSearchForm({});
               fetchOrders(1);
+              props.onSearchApply?.({});
             },
             children: propellerV2CoreUi.getLabel(props.labels, "clearButton", "Clear")
           }
@@ -12154,7 +12182,10 @@ function OrderList(rawProps) {
           "button",
           {
             className: "propeller-order-list__search-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-control shadow-sm text-primary-foreground bg-primary hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary",
-            onClick: (event) => fetchOrders(1),
+            onClick: (event) => {
+              fetchOrders(1);
+              props.onSearchApply?.(searchForm);
+            },
             children: propellerV2CoreUi.getLabel(props.labels, "searchButton", "Search")
           }
         )
@@ -12174,7 +12205,7 @@ function OrderList(rawProps) {
         /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "propeller-order-list__tbody bg-card divide-y divide-border", children: orders?.map((order) => /* @__PURE__ */ jsxRuntime.jsx(
           "tr",
           {
-            className: "propeller-order-list__row hover:bg-surface-hover",
+            className: `propeller-order-list__row hover:bg-surface-hover ${rowsClickable ? "cursor-pointer" : ""}`,
             "data-clickable": rowsClickable ? "true" : "false",
             onClick: (event) => rowsClickable && props.onOrderClick(order.id),
             children: columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12190,7 +12221,7 @@ function OrderList(rawProps) {
                     {
                       className: `propeller-order-list__status px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(order.status)}`,
                       "data-status": order.status,
-                      children: order.status
+                      children: statusLabel(order.status)
                     }
                   ) : null,
                   col === "total" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formatPrice17(order.total?.net) }) : null,
@@ -12492,11 +12523,13 @@ function OrderSummary(props) {
   const showRemarks = props.showRemarks !== void 0 ? props.showRemarks : true;
   const orderNumber = order?.id || "";
   const orderDate = order?.createdAt || "";
-  const orderStatus = order?.status || "";
+  const rawStatus = order?.status || "";
+  const orderStatus = rawStatus ? props.statusLabels?.[rawStatus] || rawStatus : "";
   const orderTotal = Number(order?.total?.net || 0);
   const orderReference = order?.reference || "";
   const orderRemarks = order?.remarks || "";
-  const paymentMethod = order?.paymentData?.method || "";
+  const rawPaymentMethod = order?.paymentData?.method || "";
+  const paymentMethod = rawPaymentMethod ? props.paymethodLabels?.[rawPaymentMethod.toLowerCase()] || rawPaymentMethod : "";
   const carrierName = order?.postageData?.carrier || "";
   const addresses = order?.addresses || [];
   const invoiceAddress = addresses.find((a) => a.type === "invoice") || null;
@@ -16184,18 +16217,23 @@ function QuoteActions(rawProps) {
           onChange: (event) => handleTermsChange(event.target.checked)
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "quote-actions-terms", className: "text-sm leading-none", children: [
-        propellerV2CoreUi.getLabel(props.labels, "termsPrefix", "I agree to the"),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: "#",
-            className: "text-primary hover:underline font-medium",
-            onClick: (event) => handleTermsLinkClick(event),
-            children: propellerV2CoreUi.getLabel(props.labels, "termsLink", "Terms and Conditions")
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "quote-actions-terms", className: "text-sm leading-none", children: (() => {
+        const tpl = propellerV2CoreUi.getLabel(props.labels, "termsConsent", "I agree to the {link}");
+        const [before, after = ""] = tpl.split("{link}");
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          before,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: "#",
+              className: "text-primary hover:underline font-medium",
+              onClick: (event) => handleTermsLinkClick(event),
+              children: propellerV2CoreUi.getLabel(props.labels, "termsLink", "Terms and Conditions")
+            }
+          ),
+          after
+        ] });
+      })() })
     ] }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -17257,6 +17295,9 @@ function SearchBar(rawProps) {
     }
     setShowDropdown(false);
   }
+  function isModifiedClick(event) {
+    return event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+  }
   React6.useEffect(() => {
     const listener = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -17310,39 +17351,68 @@ function SearchBar(rawProps) {
         ] }) }),
         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: [
           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) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+            /* @__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";
+              const resultProps = props.getResultHref ? {
+                href: props.getResultHref(result),
+                onClick: (event) => {
+                  if (isModifiedClick(event)) return;
+                  event.preventDefault();
+                  handleResultClick(result);
+                }
+              } : { onClick: (_event) => handleResultClick(result) };
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                ResultTag,
+                {
+                  className: "propeller-search-bar__result flex items-center gap-4 p-3 hover:bg-surface-hover cursor-pointer border-b border-border-subtle last:border-b-0",
+                  ...resultProps,
+                  children: [
+                    result.imageUrl || noImageUrl() ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-search-bar__result-media relative w-16 h-16 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        className: "propeller-search-bar__result-image w-full h-full object-contain",
+                        src: result.imageUrl || noImageUrl(),
+                        alt: result.name
+                      }
+                    ) }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-search-bar__result-name font-semibold truncate", children: result.name }),
+                      result.sku ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-search-bar__result-sku text-sm text-muted-foreground", children: [
+                        "SKU: ",
+                        result.sku
+                      ] }) : null
+                    ] }),
+                    result.price !== void 0 && result.price !== null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-search-bar__result-price text-sm font-semibold text-foreground flex-shrink-0 text-right", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-search-bar__result-price-value", children: formatItemPrice(leadingPrice(result)) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-search-bar__result-price-label block text-xs font-normal text-muted-foreground", children: priceTaxLabel() })
+                    ] }) : null
+                  ]
+                },
+                result.id + "-" + index
+              );
+            }) }),
+            itemsFound > results.length ? props.getViewAllHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "a",
               {
-                className: "propeller-search-bar__result flex items-center gap-4 p-3 hover:bg-surface-hover cursor-pointer border-b border-border-subtle last:border-b-0",
-                onClick: (event) => handleResultClick(result),
+                href: props.getViewAllHref(localTerm),
+                className: "propeller-search-bar__view-all block flex-shrink-0 p-3 text-center text-primary hover:bg-primary/5 cursor-pointer font-semibold border-t border-border bg-card rounded-b-container",
+                onClick: (event) => {
+                  if (isModifiedClick(event)) return;
+                  event.preventDefault();
+                  handleViewAllClick();
+                },
                 children: [
-                  result.imageUrl || noImageUrl() ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-search-bar__result-media relative w-16 h-16 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
-                    {
-                      className: "propeller-search-bar__result-image w-full h-full object-contain",
-                      src: result.imageUrl || noImageUrl(),
-                      alt: result.name
-                    }
-                  ) }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-search-bar__result-name font-semibold truncate", children: result.name }),
-                    result.sku ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-search-bar__result-sku text-sm text-muted-foreground", children: [
-                      "SKU: ",
-                      result.sku
-                    ] }) : null
-                  ] }),
-                  result.price !== void 0 && result.price !== null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-search-bar__result-price text-sm font-semibold text-foreground flex-shrink-0 text-right", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-search-bar__result-price-value", children: formatItemPrice(leadingPrice(result)) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-search-bar__result-price-label block text-xs font-normal text-muted-foreground", children: priceTaxLabel() })
-                  ] }) : null
+                  propellerV2CoreUi.getLabel(props.labels, "viewAll", "View all results"),
+                  " (",
+                  itemsFound,
+                  ")"
                 ]
-              },
-              result.id + "-" + index
-            )) }),
-            itemsFound > results.length ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
               {
-                className: "propeller-search-bar__view-all flex-shrink-0 p-3 text-center text-primary hover:bg-primary/5 cursor-pointer font-semibold border-t border-border bg-card rounded-b-container",
+                type: "button",
+                className: "propeller-search-bar__view-all block w-full flex-shrink-0 p-3 text-center text-primary hover:bg-primary/5 cursor-pointer font-semibold border-t border-border bg-card rounded-b-container",
                 onClick: (event) => handleViewAllClick(),
                 children: [
                   propellerV2CoreUi.getLabel(props.labels, "viewAll", "View all results"),