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

package/dist/index.d.cts

@@ -1103,6 +1103,12 @@ interface UseOrdersOptions {
     orderStatuses?: string[];
     /** Fields the free-text `term` is matched against. */
     termFields?: OrderSearchFields[];
+    /**
+     * Seed the search/filter form on mount — e.g. rehydrated from the URL query
+     * so a bookmarked/shared filtered view restores. The consumer is responsible
+     * for the fetch: pass this and the first fetch uses the seeded criteria.
+     */
+    initialSearchForm?: OrderSearchForm;
     /** Portal configuration: image search/variant filters. */
     configuration?: {
         imageSearchFiltersGrid?: MediaImageProductSearchInput;
@@ -2574,6 +2580,12 @@ interface AddressCardProps {
     enableSetDefault?: boolean;
     /** Display the "Default ... Address" badge @default false */
     showDefaultBadge?: boolean;
+    /**
+     * Display the address-type badge (invoice/delivery chip) @default true.
+     * Set to `false` where the surrounding heading already names the address
+     * type, to avoid a redundant raw-looking chip.
+     */
+    showTypeBadge?: boolean;
     /** Called when address is edited; receives the updated address object */
     onEdit?: (address: Address) => void | Promise<void>;
     /** Called after address edit completes */
@@ -4721,6 +4733,19 @@ interface OrderListProps {
     enableSearch?: boolean;
     /** Fields enabled for searching (UI inputs) */
     searchFields?: string[];
+    /**
+     * Seed the filter form on mount — typically rehydrated from the URL query so
+     * a bookmarked/shared filtered view restores on reload. Pair with
+     * `onSearchApply` so the page can keep the URL in sync when filters change.
+     */
+    initialSearchForm?: OrderSearchForm;
+    /**
+     * Fires when the user applies or clears filters (the "Search"/"Clear"
+     * buttons). Receives the active filter form. Use it to persist the filters
+     * to the URL — the component owns no router, so the page decides how (and
+     * whether) to reflect them in `location`.
+     */
+    onSearchApply?: (form: OrderSearchForm) => void;
     /** Term fields configuration (backend) */
     termFields?: any[];
     /** Override company ID for order filtering (respects company switcher) */
@@ -4745,6 +4770,13 @@ interface OrderListProps {
     formatDate?: (dateString: string) => string;
     /** Get status color */
     getStatusColor?: (status: string) => string;
+    /**
+     * Localized display labels for order/quote statuses, keyed by the raw backend
+     * status value (e.g. `{ NEW: 'Nieuw', CONFIRMED: 'Bevestigd', REQUEST:
+     * 'Aangevraagd' }`). Unknown statuses fall back to the raw value. Without
+     * this the list printed the raw enum (NEW/CONFIRMED/REQUEST) to the customer.
+     */
+    statusLabels?: Record<string, string>;
     /** Localization label overrides for UI strings. */
     labels?: {
         /** Text for the per-row "View" action button. */
@@ -4838,6 +4870,19 @@ interface OrderSummaryProps {
     formatDate?: (dateString: string) => string;
     /** Labels for the component */
     labels?: Record<string, string>;
+    /**
+     * Localized order/quote status labels, keyed by the raw backend status
+     * (e.g. `{ NEW: 'Nieuw', REQUEST: 'Aangevraagd' }`). Unknown → raw value.
+     */
+    statusLabels?: Record<string, string>;
+    /**
+     * Localized payment-method names, keyed by the raw method value LOWER-CASED
+     * (e.g. `{ rekening: 'Op rekening', account: 'Op rekening' }`). The backend
+     * sends different raw values on the order vs quote path (REKENING / ACCOUNT),
+     * so mapping both here makes the same method render identically. Unknown →
+     * raw value.
+     */
+    paymethodLabels?: Record<string, string>;
     /** List of countries for resolving codes to names [{code: 'NL', name: 'Netherlands'}, ...] */
     countries?: {
         code: string;
@@ -6565,6 +6610,20 @@ interface SearchBarProps {
     onResultClick?: (result: SearchBarResult) => void;
     /** Fires when "View all results" is clicked. Receives the search term. */
     onViewAllClick?: (term: string) => void;
+    /**
+     * Build the destination URL for a result item. When provided, each result
+     * renders as a real `<a href>` (middle-clickable, new-tab, crawlable) while
+     * `onResultClick` still fires for SPA navigation. Omit to keep the
+     * div-based fallback.
+     */
+    getResultHref?: (result: SearchBarResult) => string;
+    /**
+     * Build the destination URL for the "View all results" CTA. When provided,
+     * the CTA renders as a real `<a href>` (middle-clickable, new-tab, crawlable,
+     * keyboard-focusable) while `onViewAllClick` still fires for SPA navigation.
+     * Omit to keep the div-based fallback.
+     */
+    getViewAllHref?: (term: string) => string;
     /** Custom price formatting function */
     formatPrice?: (price: number) => string;
     /** Currency symbol for prices. Resolved from PropellerProvider when omitted; defaults to '€'. */

package/dist/index.d.ts

@@ -1103,6 +1103,12 @@ interface UseOrdersOptions {
     orderStatuses?: string[];
     /** Fields the free-text `term` is matched against. */
     termFields?: OrderSearchFields[];
+    /**
+     * Seed the search/filter form on mount — e.g. rehydrated from the URL query
+     * so a bookmarked/shared filtered view restores. The consumer is responsible
+     * for the fetch: pass this and the first fetch uses the seeded criteria.
+     */
+    initialSearchForm?: OrderSearchForm;
     /** Portal configuration: image search/variant filters. */
     configuration?: {
         imageSearchFiltersGrid?: MediaImageProductSearchInput;
@@ -2574,6 +2580,12 @@ interface AddressCardProps {
     enableSetDefault?: boolean;
     /** Display the "Default ... Address" badge @default false */
     showDefaultBadge?: boolean;
+    /**
+     * Display the address-type badge (invoice/delivery chip) @default true.
+     * Set to `false` where the surrounding heading already names the address
+     * type, to avoid a redundant raw-looking chip.
+     */
+    showTypeBadge?: boolean;
     /** Called when address is edited; receives the updated address object */
     onEdit?: (address: Address) => void | Promise<void>;
     /** Called after address edit completes */
@@ -4721,6 +4733,19 @@ interface OrderListProps {
     enableSearch?: boolean;
     /** Fields enabled for searching (UI inputs) */
     searchFields?: string[];
+    /**
+     * Seed the filter form on mount — typically rehydrated from the URL query so
+     * a bookmarked/shared filtered view restores on reload. Pair with
+     * `onSearchApply` so the page can keep the URL in sync when filters change.
+     */
+    initialSearchForm?: OrderSearchForm;
+    /**
+     * Fires when the user applies or clears filters (the "Search"/"Clear"
+     * buttons). Receives the active filter form. Use it to persist the filters
+     * to the URL — the component owns no router, so the page decides how (and
+     * whether) to reflect them in `location`.
+     */
+    onSearchApply?: (form: OrderSearchForm) => void;
     /** Term fields configuration (backend) */
     termFields?: any[];
     /** Override company ID for order filtering (respects company switcher) */
@@ -4745,6 +4770,13 @@ interface OrderListProps {
     formatDate?: (dateString: string) => string;
     /** Get status color */
     getStatusColor?: (status: string) => string;
+    /**
+     * Localized display labels for order/quote statuses, keyed by the raw backend
+     * status value (e.g. `{ NEW: 'Nieuw', CONFIRMED: 'Bevestigd', REQUEST:
+     * 'Aangevraagd' }`). Unknown statuses fall back to the raw value. Without
+     * this the list printed the raw enum (NEW/CONFIRMED/REQUEST) to the customer.
+     */
+    statusLabels?: Record<string, string>;
     /** Localization label overrides for UI strings. */
     labels?: {
         /** Text for the per-row "View" action button. */
@@ -4838,6 +4870,19 @@ interface OrderSummaryProps {
     formatDate?: (dateString: string) => string;
     /** Labels for the component */
     labels?: Record<string, string>;
+    /**
+     * Localized order/quote status labels, keyed by the raw backend status
+     * (e.g. `{ NEW: 'Nieuw', REQUEST: 'Aangevraagd' }`). Unknown → raw value.
+     */
+    statusLabels?: Record<string, string>;
+    /**
+     * Localized payment-method names, keyed by the raw method value LOWER-CASED
+     * (e.g. `{ rekening: 'Op rekening', account: 'Op rekening' }`). The backend
+     * sends different raw values on the order vs quote path (REKENING / ACCOUNT),
+     * so mapping both here makes the same method render identically. Unknown →
+     * raw value.
+     */
+    paymethodLabels?: Record<string, string>;
     /** List of countries for resolving codes to names [{code: 'NL', name: 'Netherlands'}, ...] */
     countries?: {
         code: string;
@@ -6565,6 +6610,20 @@ interface SearchBarProps {
     onResultClick?: (result: SearchBarResult) => void;
     /** Fires when "View all results" is clicked. Receives the search term. */
     onViewAllClick?: (term: string) => void;
+    /**
+     * Build the destination URL for a result item. When provided, each result
+     * renders as a real `<a href>` (middle-clickable, new-tab, crawlable) while
+     * `onResultClick` still fires for SPA navigation. Omit to keep the
+     * div-based fallback.
+     */
+    getResultHref?: (result: SearchBarResult) => string;
+    /**
+     * Build the destination URL for the "View all results" CTA. When provided,
+     * the CTA renders as a real `<a href>` (middle-clickable, new-tab, crawlable,
+     * keyboard-focusable) while `onViewAllClick` still fires for SPA navigation.
+     * Omit to keep the div-based fallback.
+     */
+    getViewAllHref?: (term: string) => string;
     /** Custom price formatting function */
     formatPrice?: (price: number) => string;
     /** Currency symbol for prices. Resolved from PropellerProvider when omitted; defaults to '€'. */

package/dist/index.js

@@ -1698,7 +1698,9 @@ function useOrders(options) {
   const [orders, setOrders] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [searchForm, setSearchForm] = useState({});
+  const [searchForm, setSearchForm] = useState(
+    options.initialSearchForm ?? {}
+  );
   const pagination = usePagination(options.itemsPerPage ?? 10);
   const fetchOrders = useCallback(
     async (page = 1) => {
@@ -3258,10 +3260,15 @@ function LoginForm(rawProps) {
         ] }) : null,
         props.accountHeaderLoginForm ? /* @__PURE__ */ jsxs("div", { className: "propeller-login-form__footer flex flex-col gap-2 text-sm pt-3 text-center", children: [
           /* @__PURE__ */ jsx(LoginFormForgotPasswordLink, {}),
-          /* @__PURE__ */ jsxs("div", { className: "propeller-login-form__register text-xs text-muted-foreground", children: [
-            getLabel(props.labels, "noAccount", "Don't have an account?"),
-            /* @__PURE__ */ jsx(LoginFormRegisterLink, {})
-          ] })
+          /* @__PURE__ */ jsx("div", { className: "propeller-login-form__register text-xs text-muted-foreground", children: (() => {
+            const tpl = getLabel(props.labels, "noAccount", "Don't have an account? {link}");
+            const [before, after = ""] = tpl.split("{link}");
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              before,
+              /* @__PURE__ */ jsx(LoginFormRegisterLink, {}),
+              after
+            ] });
+          })() })
         ] }) : null
       ]
     }
@@ -3550,6 +3557,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();
@@ -3598,10 +3612,10 @@ function AccountIconAndMenu(rawProps) {
             /* @__PURE__ */ jsx("p", { className: "propeller-account-menu__user-name font-medium text-foreground truncate", children: getUserName() })
           ] }),
           /* @__PURE__ */ jsx("nav", { className: "propeller-account-menu__nav py-2", children: /* @__PURE__ */ jsx("ul", { className: "propeller-account-menu__list space-y-0.5", children: getMenuLinks()?.map((link) => /* @__PURE__ */ jsx("li", { className: "propeller-account-menu__item", children: /* @__PURE__ */ 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
@@ -3664,11 +3678,11 @@ function AccountIconAndMenu(rawProps) {
                     /* @__PURE__ */ jsx("p", { className: "propeller-account-menu__user-name font-medium text-foreground truncate", children: getUserName() })
                   ] }),
                   /* @__PURE__ */ jsx("nav", { className: "propeller-account-menu__nav", children: /* @__PURE__ */ jsx("ul", { className: "propeller-account-menu__list space-y-0.5", children: getMenuLinks()?.map((link) => /* @__PURE__ */ jsx("li", { className: "propeller-account-menu__item", children: /* @__PURE__ */ 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)) }) }),
@@ -5430,7 +5444,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__ */ jsx(
     "span",
@@ -7129,18 +7144,23 @@ function CartOverview(props) {
             onChange: (event) => setTermsAccepted(event.target.checked)
           }
         ),
-        /* @__PURE__ */ jsxs("label", { htmlFor: "cart-overview-terms", className: "text-sm leading-none", children: [
-          getLabel(props.labels, "termsPrefix", "I agree to the"),
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: "#",
-              className: "text-primary hover:underline font-medium",
-              onClick: handleTermsLinkClick,
-              children: getLabel(props.labels, "termsLink", "Terms and Conditions")
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx("label", { htmlFor: "cart-overview-terms", className: "text-sm leading-none", children: (() => {
+          const tpl = getLabel(props.labels, "termsConsent", "I agree to the {link}");
+          const [before, after = ""] = tpl.split("{link}");
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            before,
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "#",
+                className: "text-primary hover:underline font-medium",
+                onClick: handleTermsLinkClick,
+                children: getLabel(props.labels, "termsLink", "Terms and Conditions")
+              }
+            ),
+            after
+          ] });
+        })() })
       ] }) : null,
       showPurchaseButton ? /* @__PURE__ */ jsxs(
         "button",
@@ -9905,7 +9925,7 @@ function FavoriteLists(rawProps) {
                     ),
                     getTotalCount(list),
                     "\xA0",
-                    getLabel(props.labels, "items", "items")
+                    getTotalCount(list) === 1 ? getLabel(props.labels, "itemSingular", "item") : getLabel(props.labels, "itemPlural", "items")
                   ] }) : null
                 ] })
               ] }) : null
@@ -10089,15 +10109,15 @@ function FavoriteLists(rawProps) {
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("p", { className: "propeller-favorite-lists__delete-prompt", children: [
-          getLabel(props.labels, "deleteConfirm", "Are you sure you want to delete"),
-          /* @__PURE__ */ jsxs("strong", { children: [
-            '"',
-            listToDelete?.name,
-            '"'
-          ] }),
-          "?"
-        ] }),
+        /* @__PURE__ */ jsx("p", { className: "propeller-favorite-lists__delete-prompt", children: (() => {
+          const tpl = getLabel(props.labels, "deleteConfirm", 'Are you sure you want to delete "{name}"?');
+          const [before, after = ""] = tpl.split("{name}");
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            before,
+            /* @__PURE__ */ jsx("strong", { children: listToDelete?.name }),
+            after
+          ] });
+        })() }),
         /* @__PURE__ */ jsx("p", { className: "propeller-favorite-lists__delete-warning text-sm text-destructive", children: getLabel(props.labels, "deleteWarning", "This action cannot be undone.") })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 pt-6", children: [
@@ -10681,6 +10701,8 @@ var DEFAULT_LABELS2 = {
   [SortOrder.DESC]: "High to Low",
   clearAll: "Clear All",
   products: " Products",
+  productSingular: "Product",
+  productPlural: "Products",
   from: "from",
   results: "results",
   perPage: " per page",
@@ -10774,7 +10796,8 @@ function GridToolbar(rawProps) {
         /* @__PURE__ */ 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__ */ jsx("div", { className: "propeller-grid-toolbar__count text-sm text-muted-foreground font-medium", children: props.itemsFound > 0 ? /* @__PURE__ */ jsxs("span", { children: [
             props.itemsFound,
-            getLabel53("products")
+            "\xA0",
+            props.itemsFound === 1 ? getLabel53("productSingular") : getLabel53("productPlural")
           ] }) : null }),
           /* @__PURE__ */ jsxs("div", { className: "propeller-grid-toolbar__controls flex flex-wrap items-center gap-3", children: [
             /* @__PURE__ */ jsx(
@@ -11816,7 +11839,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) {
@@ -11850,6 +11874,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];
@@ -12126,6 +12153,7 @@ function OrderList(rawProps) {
             onClick: (event) => {
               setSearchForm({});
               fetchOrders(1);
+              props.onSearchApply?.({});
             },
             children: getLabel(props.labels, "clearButton", "Clear")
           }
@@ -12134,7 +12162,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: getLabel(props.labels, "searchButton", "Search")
           }
         )
@@ -12154,7 +12185,7 @@ function OrderList(rawProps) {
         /* @__PURE__ */ jsx("tbody", { className: "propeller-order-list__tbody bg-card divide-y divide-border", children: orders?.map((order) => /* @__PURE__ */ 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__ */ jsxs(
@@ -12170,7 +12201,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__ */ jsx(Fragment, { children: formatPrice17(order.total?.net) }) : null,
@@ -12472,11 +12503,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;
@@ -16164,18 +16197,23 @@ function QuoteActions(rawProps) {
           onChange: (event) => handleTermsChange(event.target.checked)
         }
       ),
-      /* @__PURE__ */ jsxs("label", { htmlFor: "quote-actions-terms", className: "text-sm leading-none", children: [
-        getLabel(props.labels, "termsPrefix", "I agree to the"),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: "#",
-            className: "text-primary hover:underline font-medium",
-            onClick: (event) => handleTermsLinkClick(event),
-            children: getLabel(props.labels, "termsLink", "Terms and Conditions")
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx("label", { htmlFor: "quote-actions-terms", className: "text-sm leading-none", children: (() => {
+        const tpl = getLabel(props.labels, "termsConsent", "I agree to the {link}");
+        const [before, after = ""] = tpl.split("{link}");
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          before,
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "#",
+              className: "text-primary hover:underline font-medium",
+              onClick: (event) => handleTermsLinkClick(event),
+              children: getLabel(props.labels, "termsLink", "Terms and Conditions")
+            }
+          ),
+          after
+        ] });
+      })() })
     ] }) : null,
     /* @__PURE__ */ jsxs(
       "button",
@@ -17237,6 +17275,9 @@ function SearchBar(rawProps) {
     }
     setShowDropdown(false);
   }
+  function isModifiedClick(event) {
+    return event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+  }
   useEffect(() => {
     const listener = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -17290,39 +17331,68 @@ function SearchBar(rawProps) {
         ] }) }),
         showDropdown ? /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "propeller-search-bar__results flex-1 overflow-y-auto", children: results?.map((result, index) => /* @__PURE__ */ jsxs(
-              "div",
+            /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "propeller-search-bar__result-media relative w-16 h-16 flex-shrink-0", children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        className: "propeller-search-bar__result-image w-full h-full object-contain",
+                        src: result.imageUrl || noImageUrl(),
+                        alt: result.name
+                      }
+                    ) }) : null,
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsx("div", { className: "propeller-search-bar__result-name font-semibold truncate", children: result.name }),
+                      result.sku ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "propeller-search-bar__result-price text-sm font-semibold text-foreground flex-shrink-0 text-right", children: [
+                      /* @__PURE__ */ jsx("span", { className: "propeller-search-bar__result-price-value", children: formatItemPrice(leadingPrice(result)) }),
+                      /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "propeller-search-bar__result-media relative w-16 h-16 flex-shrink-0", children: /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      className: "propeller-search-bar__result-image w-full h-full object-contain",
-                      src: result.imageUrl || noImageUrl(),
-                      alt: result.name
-                    }
-                  ) }) : null,
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                    /* @__PURE__ */ jsx("div", { className: "propeller-search-bar__result-name font-semibold truncate", children: result.name }),
-                    result.sku ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "propeller-search-bar__result-price text-sm font-semibold text-foreground flex-shrink-0 text-right", children: [
-                    /* @__PURE__ */ jsx("span", { className: "propeller-search-bar__result-price-value", children: formatItemPrice(leadingPrice(result)) }),
-                    /* @__PURE__ */ jsx("span", { className: "propeller-search-bar__result-price-label block text-xs font-normal text-muted-foreground", children: priceTaxLabel() })
-                  ] }) : null
+                  getLabel(props.labels, "viewAll", "View all results"),
+                  " (",
+                  itemsFound,
+                  ")"
                 ]
-              },
-              result.id + "-" + index
-            )) }),
-            itemsFound > results.length ? /* @__PURE__ */ jsxs(
-              "div",
+              }
+            ) : /* @__PURE__ */ 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: [
                   getLabel(props.labels, "viewAll", "View all results"),