@propeller-commerce/propeller-v2-react-ui 0.4.25 → 0.4.27

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;
@@ -4727,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) */
@@ -6591,6 +6610,35 @@ 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;
+    /**
+     * Show the price column on each autosuggest result. Defaults to `true`.
+     * Set `false` to hide prices entirely in the dropdown — e.g. a B2B
+     * contract-catalogue context where prices are quote-only and shouldn't
+     * appear in the live preview. Ignored when {@link renderPrice} is provided.
+     */
+    showPrice?: boolean;
+    /**
+     * Replace the price cell of each result with custom content. When provided,
+     * this fully overrides the default price rendering (and `showPrice`) — return
+     * any node (e.g. a "Price by quotation" label for a contract catalogue), or
+     * `null` to render nothing for that result. Keeps price/quotation wording
+     * app-specific rather than baked into the package.
+     */
+    renderPrice?: (result: SearchBarResult) => React$1.ReactNode;
     /** 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;
@@ -4727,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) */
@@ -6591,6 +6610,35 @@ 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;
+    /**
+     * Show the price column on each autosuggest result. Defaults to `true`.
+     * Set `false` to hide prices entirely in the dropdown — e.g. a B2B
+     * contract-catalogue context where prices are quote-only and shouldn't
+     * appear in the live preview. Ignored when {@link renderPrice} is provided.
+     */
+    showPrice?: boolean;
+    /**
+     * Replace the price cell of each result with custom content. When provided,
+     * this fully overrides the default price rendering (and `showPrice`) — return
+     * any node (e.g. a "Price by quotation" label for a contract catalogue), or
+     * `null` to render nothing for that result. Keeps price/quotation wording
+     * app-specific rather than baked into the package.
+     */
+    renderPrice?: (result: SearchBarResult) => React$1.ReactNode;
     /** 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) => {
@@ -2343,6 +2345,10 @@ function useProductSearch(options) {
         setSearchLoading(true);
         try {
           const service = createServices(graphqlClient).product;
+          const orderlistScope = options.orderlistIds && options.orderlistIds.length > 0 ? {
+            applyOrderlists: options.applyOrderlists !== false,
+            orderlistIds: options.orderlistIds
+          } : { applyOrderlists: false };
           const input = {
             term,
             language,
@@ -2354,6 +2360,7 @@ function useProductSearch(options) {
               ProductStatus.T,
               ProductStatus.S
             ],
+            ...orderlistScope,
             sortInputs: [{ field: ProductSortField.RELEVANCE, order: SortOrder.DESC }],
             searchFields: [
               {
@@ -2400,7 +2407,8 @@ function useProductSearch(options) {
         }
       }, 300);
     },
-    [graphqlClient, language, configuration, userKey]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [graphqlClient, language, configuration, userKey, JSON.stringify(options.orderlistIds ?? []), options.applyOrderlists]
   );
   useEffect(() => {
     if (!isControlled) fetchProducts();
@@ -3555,6 +3563,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();
@@ -3603,10 +3618,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
@@ -3669,11 +3684,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)) }) }),
@@ -11830,7 +11845,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) {
@@ -12143,6 +12159,7 @@ function OrderList(rawProps) {
             onClick: (event) => {
               setSearchForm({});
               fetchOrders(1);
+              props.onSearchApply?.({});
             },
             children: getLabel(props.labels, "clearButton", "Clear")
           }
@@ -12151,7 +12168,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")
           }
         )
@@ -12171,7 +12191,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(
@@ -17261,6 +17281,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)) {
@@ -17314,39 +17337,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
+                    ] }),
+                    props.renderPrice ? props.renderPrice(result) : props.showPrice !== false && 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"),