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

package/CHANGELOG.md

@@ -8,6 +8,40 @@ 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

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) => {
@@ -3575,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();
@@ -3623,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
@@ -3689,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)) }) }),
@@ -11850,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) {
@@ -12163,6 +12173,7 @@ function OrderList(rawProps) {
             onClick: (event) => {
               setSearchForm({});
               fetchOrders(1);
+              props.onSearchApply?.({});
             },
             children: propellerV2CoreUi.getLabel(props.labels, "clearButton", "Clear")
           }
@@ -12171,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")
           }
         )
@@ -12191,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(
@@ -17281,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)) {
@@ -17334,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"),