@propeller-commerce/propeller-v2-react-ui 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -8,6 +8,53 @@ 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.11.0] - 2026-07-30
+
+### Fixed
+
+- **`<Menu depth>` was inert past three levels.** `depth` was threaded into
+  `useMenu`, which correctly built a recursive query to any depth, but every
+  style rendered exactly three hand-coded levels. `depth={4}` and beyond fetched
+  data that was never displayed — extra payload for nothing, with no warning
+  that the prop was only half-honoured. All styles now render to `depth`.
+- **The expand chevron promised levels that never rendered.** It keyed off "has
+  children" alone, so a category at the deepest rendered level showed an
+  affordance that did nothing. It is now also gated on the child being within
+  `depth`.
+
+### Changed
+
+- **Per-level menu state replaced with a single open path.** The four
+  positional state slots (`hoveredL1Id` / `hoveredL2Id` / `expandedL1` /
+  `expandedL2`) are now one `openPath: number[]`. "Opening a shallower item
+  closes the deeper ones" is structural (`slice(0, level)`) rather than a
+  hand-written reset per level, which grew quadratically and was easy to get
+  wrong when adding a level.
+- **`data-level` is emitted to whatever depth renders** instead of a hardcoded
+  `1`/`2`/`3`, so consumer CSS can target arbitrary depth.
+- **Flyout styles cap the levels they can lay out** — 4 for
+  `dropdown-vertical`, 3 for `dropdown-horizontal`/`jumbotron`, since each level
+  is another horizontal column and beyond that they run off-screen. The
+  accordion nests vertically and is uncapped. Exceeding a cap logs a
+  `console.warn` in development (previously the prop silently did nothing).
+
+`depth` still defaults to 3, and all fifteen `propeller-menu__*` class hooks are
+unchanged, so a three-level menu keeps its existing structure and styling. Some
+Tailwind utility classes internal to the component differ where per-level
+values (`pl-8` / `pl-12` indentation) became a computed `padding-left`; styling
+that targets the `propeller-menu__*` hooks is unaffected.
+
+## [0.10.1] - 2026-07-30
+
+### Fixed
+
+- **`<SearchBar>` autosuggest ignored orderlist scoping.** The component
+  resolves `user` like every other infra prop but never passed it to
+  `useProductSearch`, and the backend drives orderlist scoping off the user id —
+  so `orderlistIds` alone had no effect on the autosuggest query. The dropdown
+  returned the whole catalogue while the grid below it, which does pass `user`,
+  showed only the contract's products. Forwarding `user` makes the two agree.
+
 ## [0.10.0] - 2026-07-29
 
 ### Added

package/dist/index.cjs

@@ -12847,10 +12847,7 @@ function ItemsOverview(props) {
 var ItemsOverview_default = ItemsOverview;
 function Menu(rawProps) {
   const props = useInfraProps(rawProps);
-  const [hoveredL1Id, setHoveredL1Id] = React6.useState(null);
-  const [hoveredL2Id, setHoveredL2Id] = React6.useState(null);
-  const [expandedL1, setExpandedL1] = React6.useState(null);
-  const [expandedL2, setExpandedL2] = React6.useState(null);
+  const [openPath, setOpenPath] = React6.useState([]);
   const userKey = props.user ? "contactId" in props.user ? `c${props.user.contactId}` : `u${props.user.customerId}` : "";
   const hasPrefetchedTree = Array.isArray(props.tree);
   const { categories: fetchedCategories, loading: fetchedLoading, error: menuError, fetchMenu } = useMenu({
@@ -12887,16 +12884,139 @@ function Menu(rawProps) {
       });
     }
   }
-  function setHoveredL1(id) {
-    setHoveredL1Id(id);
-    setHoveredL2Id(null);
+  function openAt(level, categoryId) {
+    setOpenPath((prev) => {
+      const next = prev.slice(0, level);
+      if (categoryId !== null) next.push(categoryId);
+      return next;
+    });
   }
-  function setHoveredL2(id) {
-    setHoveredL2Id(id);
+  function toggleAt(level, categoryId) {
+    setOpenPath(
+      (prev) => prev[level] === categoryId ? prev.slice(0, level) : [...prev.slice(0, level), categoryId]
+    );
+  }
+  function isOpenAt(level, categoryId) {
+    return openPath[level] === categoryId;
   }
   function getMenuStyle() {
     return props.menuStyle || "dropdown-vertical";
   }
+  function getRenderableDepth() {
+    const requested = Math.max(1, props.depth ?? 3);
+    const cap = getMenuStyle() === "dropdown-horizontal" ? 3 : getMenuStyle() === "accordion" ? Number.POSITIVE_INFINITY : 4;
+    if (process.env.NODE_ENV !== "production" && requested > cap) {
+      console.warn(
+        `[Menu] depth={${requested}} exceeds what menuStyle="${getMenuStyle()}" can lay out (${cap}); rendering ${cap} levels. Use menuStyle="accordion" for deeper trees.`
+      );
+    }
+    return Math.min(requested, cap);
+  }
+  const maxDepth = getRenderableDepth();
+  function renderChevron(cat, level, rotated = false) {
+    if (getSubCategories(cat).length === 0 || level + 1 >= maxDepth) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: `propeller-menu__chevron w-3.5 h-3.5 flex-shrink-0 transition-transform ${rotated ? "rotate-180" : ""}`,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: rotated ? /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) : /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
+      }
+    );
+  }
+  function renderColumns(items, level) {
+    if (!items.length || level >= maxDepth) return [];
+    const openId = openPath[level];
+    const openCat = items.find((c) => c.categoryId === openId);
+    const column = /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        className: `propeller-menu__list w-64 py-1 flex-shrink-0 ${level + 1 < maxDepth ? "border-r border-border" : ""}`,
+        "data-level": level + 1,
+        children: items.map((cat, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+          "li",
+          {
+            className: "propeller-menu__item",
+            "data-level": level + 1,
+            "data-active": isOpenAt(level, cat.categoryId) ? "true" : "false",
+            onMouseEnter: () => openAt(level, cat.categoryId),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "a",
+              {
+                href: getCategoryUrl(cat),
+                onClick: (e) => handleItemClick(cat, e),
+                className: `propeller-menu__link flex items-center justify-between px-4 py-2.5 text-sm transition-colors ${isOpenAt(level, cat.categoryId) ? "bg-accent text-accent-foreground" : "text-foreground hover:bg-accent/50"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-menu__label", children: getCategoryName(cat) }),
+                  renderChevron(cat, level)
+                ]
+              }
+            )
+          },
+          `l${level}-${cat.categoryId}-${idx}`
+        ))
+      },
+      `col-${level}`
+    );
+    const deeper = openCat ? renderColumns(getSubCategories(openCat), level + 1) : [];
+    return [column, ...deeper];
+  }
+  function renderAccordion(items, level) {
+    if (!items.length || level >= maxDepth) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        className: `propeller-menu__list ${level === 0 ? "divide-y divide-border" : level === 1 ? "bg-accent/30" : "bg-accent/20"}`,
+        "data-level": level + 1,
+        children: items.map((cat, idx) => {
+          const children = getSubCategories(cat);
+          const expanded = isOpenAt(level, cat.categoryId);
+          const canExpand = children.length > 0 && level + 1 < maxDepth;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "li",
+            {
+              className: "propeller-menu__item",
+              "data-level": level + 1,
+              "data-expanded": expanded ? "true" : "false",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: getCategoryUrl(cat),
+                      onClick: (e) => handleItemClick(cat, e),
+                      className: "propeller-menu__link flex-1 px-4 py-3 text-sm text-foreground",
+                      style: { paddingLeft: `${1 + level}rem` },
+                      children: getCategoryName(cat)
+                    }
+                  ),
+                  canExpand ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "propeller-menu__toggle px-4 py-3",
+                      "aria-expanded": expanded,
+                      "aria-label": getCategoryName(cat),
+                      onClick: () => toggleAt(level, cat.categoryId),
+                      children: renderChevron(cat, level, expanded)
+                    }
+                  ) : null
+                ] }),
+                expanded && canExpand ? renderAccordion(children, level + 1) : null
+              ]
+            },
+            `l${level}-${cat.categoryId}-${idx}`
+          );
+        })
+      }
+    );
+  }
   React6.useEffect(() => {
     if (hasPrefetchedTree) return;
     if (!props.graphqlClient) return;
@@ -12919,125 +13039,7 @@ function Menu(rawProps) {
           "nav",
           {
             className: `propeller-menu__nav hidden md:block ${props.menuClass || ""}`,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex bg-popover border border-border shadow-lg", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "propeller-menu__list w-64 py-1 border-r border-border flex-shrink-0", "data-level": "1", children: menuCategories?.map((l1, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-                "li",
-                {
-                  className: "propeller-menu__item",
-                  "data-level": "1",
-                  "data-active": hoveredL1Id === l1.categoryId ? "true" : "false",
-                  onMouseEnter: (event) => setHoveredL1(l1.categoryId),
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "a",
-                    {
-                      href: getCategoryUrl(l1),
-                      onClick: (e) => handleItemClick(l1, e),
-                      className: `propeller-menu__link flex items-center justify-between px-4 py-2.5 text-sm transition-colors ${hoveredL1Id === l1.categoryId ? "bg-accent text-accent-foreground" : "text-foreground hover:bg-accent/50"}`,
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-menu__label font-medium truncate", children: getCategoryName(l1) }),
-                        getSubCategories(l1).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                          "svg",
-                          {
-                            fill: "none",
-                            stroke: "currentColor",
-                            viewBox: "0 0 24 24",
-                            className: "propeller-menu__chevron w-4 h-4 text-muted-foreground",
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              "path",
-                              {
-                                strokeLinecap: "round",
-                                strokeLinejoin: "round",
-                                d: "M9 5l7 7-7 7",
-                                strokeWidth: 2
-                              }
-                            )
-                          }
-                        ) : null
-                      ]
-                    }
-                  )
-                },
-                `l1-${l1.categoryId}-${idx}`
-              )) }),
-              menuCategories?.map(
-                (l1, idx) => hoveredL1Id === l1.categoryId && getSubCategories(l1).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "ul",
-                  {
-                    className: "propeller-menu__list w-64 py-1 border-r border-border flex-shrink-0",
-                    "data-level": "2",
-                    children: getSubCategories(l1)?.map((l2, idx2) => /* @__PURE__ */ jsxRuntime.jsx(
-                      "li",
-                      {
-                        className: "propeller-menu__item",
-                        "data-level": "2",
-                        "data-active": hoveredL2Id === l2.categoryId ? "true" : "false",
-                        onMouseEnter: (event) => setHoveredL2(l2.categoryId),
-                        children: /* @__PURE__ */ jsxRuntime.jsxs(
-                          "a",
-                          {
-                            href: getCategoryUrl(l2),
-                            onClick: (e) => handleItemClick(l2, e),
-                            className: `propeller-menu__link flex items-center justify-between px-4 py-2.5 text-sm transition-colors ${hoveredL2Id === l2.categoryId ? "bg-accent text-accent-foreground" : "text-foreground hover:bg-accent/50"}`,
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-menu__label truncate", children: getCategoryName(l2) }),
-                              getSubCategories(l2).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                                "svg",
-                                {
-                                  fill: "none",
-                                  stroke: "currentColor",
-                                  viewBox: "0 0 24 24",
-                                  className: "propeller-menu__chevron w-4 h-4 text-muted-foreground",
-                                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                                    "path",
-                                    {
-                                      strokeLinecap: "round",
-                                      strokeLinejoin: "round",
-                                      d: "M9 5l7 7-7 7",
-                                      strokeWidth: 2
-                                    }
-                                  )
-                                }
-                              ) : null
-                            ]
-                          }
-                        )
-                      },
-                      `l2-${l2.categoryId}-${idx2}`
-                    ))
-                  },
-                  `l1-sub-${l1.categoryId}-${idx}`
-                ) : null
-              ),
-              menuCategories?.map(
-                (l1, idx) => hoveredL1Id === l1.categoryId ? /* @__PURE__ */ jsxRuntime.jsx(React6__namespace.Fragment, { children: getSubCategories(l1)?.map(
-                  (l2, idx2) => hoveredL2Id === l2.categoryId && getSubCategories(l2).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "ul",
-                    {
-                      className: "propeller-menu__list w-64 py-1 flex-shrink-0",
-                      "data-level": "3",
-                      children: getSubCategories(l2)?.map((l3, idx3) => /* @__PURE__ */ jsxRuntime.jsx(
-                        "li",
-                        {
-                          className: "propeller-menu__item",
-                          "data-level": "3",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "a",
-                            {
-                              className: "propeller-menu__link block px-4 py-2.5 text-sm text-foreground hover:bg-accent/50 transition-colors",
-                              href: getCategoryUrl(l3),
-                              onClick: (e) => handleItemClick(l3, e),
-                              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-menu__label", children: getCategoryName(l3) })
-                            }
-                          )
-                        },
-                        `l3-${l3.categoryId}-${idx3}`
-                      ))
-                    },
-                    `l3-col-${l2.categoryId}-${idx2}`
-                  ) : null
-                ) }, `l1-l3col-${l1.categoryId}-${idx}`) : null
-              )
-            ] })
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex bg-popover border border-border shadow-lg", children: renderColumns(menuCategories, 0) })
           }
         ) : null,
         !isLoading && !hasError && menuCategories.length > 0 && getMenuStyle() === "jumbotron" ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13048,22 +13050,22 @@ function Menu(rawProps) {
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-menu__tabs flex items-center border-b border-border", children: menuCategories?.map((l1, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
-                  className: `propeller-menu__tab px-5 py-3 text-sm font-medium transition-colors border-b-2 ${hoveredL1Id === l1.categoryId ? "border-primary text-primary" : "border-transparent text-foreground hover:text-primary hover:border-primary/50"}`,
+                  className: `propeller-menu__tab px-5 py-3 text-sm font-medium transition-colors border-b-2 ${isOpenAt(0, l1.categoryId) ? "border-primary text-primary" : "border-transparent text-foreground hover:text-primary hover:border-primary/50"}`,
                   "data-level": "1",
-                  "data-active": hoveredL1Id === l1.categoryId ? "true" : "false",
-                  onMouseEnter: (event) => setHoveredL1(l1.categoryId),
+                  "data-active": isOpenAt(0, l1.categoryId) ? "true" : "false",
+                  onMouseEnter: (event) => openAt(0, l1.categoryId),
                   onClick: (e) => handleItemClick(l1, e),
                   children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-menu__label", children: getCategoryName(l1) })
                 },
                 `l1-${l1.categoryId}-${idx}`
               )) }),
               menuCategories?.map(
-                (l1, idx) => hoveredL1Id === l1.categoryId && getSubCategories(l1).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                (l1, idx) => isOpenAt(0, l1.categoryId) && getSubCategories(l1).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     className: "propeller-menu__panel bg-popover border border-border border-t-0 shadow-lg p-6",
-                    onMouseEnter: (event) => setHoveredL1(l1.categoryId),
-                    onMouseLeave: (event) => setHoveredL1(null),
+                    onMouseEnter: (event) => openAt(0, l1.categoryId),
+                    onMouseLeave: (event) => openAt(0, null),
                     children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "propeller-menu__panel-grid grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", children: getSubCategories(l1)?.map((l2, idx2) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "propeller-menu__group", "data-level": "2", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "a",
@@ -13090,123 +13092,7 @@ function Menu(rawProps) {
             ]
           }
         ) : null,
-        !isLoading && !hasError && menuCategories.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: `propeller-menu__nav md:hidden ${props.menuClass || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "propeller-menu__list divide-y divide-border", "data-level": "1", children: menuCategories?.map((l1, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "li",
-          {
-            className: "propeller-menu__item",
-            "data-level": "1",
-            "data-expanded": expandedL1 === l1.categoryId ? "true" : "false",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "a",
-                  {
-                    className: "propeller-menu__link flex-1 px-4 py-3 text-sm font-medium text-foreground",
-                    href: getCategoryUrl(l1),
-                    onClick: (e) => handleItemClick(l1, e),
-                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-menu__label", children: getCategoryName(l1) })
-                  }
-                ),
-                getSubCategories(l1).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "propeller-menu__toggle px-4 py-3 text-muted-foreground",
-                    onClick: (event) => {
-                      setExpandedL1(expandedL1 === l1.categoryId ? null : l1.categoryId);
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "svg",
-                      {
-                        fill: "none",
-                        stroke: "currentColor",
-                        viewBox: "0 0 24 24",
-                        className: `propeller-menu__chevron w-4 h-4 transition-transform ${expandedL1 === l1.categoryId ? "rotate-180" : ""}`,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            d: "m6 9 6 6 6-6",
-                            strokeWidth: 2
-                          }
-                        )
-                      }
-                    )
-                  }
-                ) : null
-              ] }),
-              expandedL1 === l1.categoryId && getSubCategories(l1).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "propeller-menu__list bg-accent/30", "data-level": "2", children: getSubCategories(l1)?.map((l2, idx2) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "li",
-                {
-                  className: "propeller-menu__item",
-                  "data-level": "2",
-                  "data-expanded": expandedL2 === l2.categoryId ? "true" : "false",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "a",
-                        {
-                          className: "propeller-menu__link flex-1 pl-8 pr-4 py-2.5 text-sm text-foreground",
-                          href: getCategoryUrl(l2),
-                          onClick: (e) => handleItemClick(l2, e),
-                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-menu__label", children: getCategoryName(l2) })
-                        }
-                      ),
-                      getSubCategories(l2).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          className: "propeller-menu__toggle px-4 py-2.5 text-muted-foreground",
-                          onClick: (event) => {
-                            setExpandedL2(expandedL2 === l2.categoryId ? null : l2.categoryId);
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "svg",
-                            {
-                              fill: "none",
-                              stroke: "currentColor",
-                              viewBox: "0 0 24 24",
-                              className: `propeller-menu__chevron w-3.5 h-3.5 transition-transform ${expandedL2 === l2.categoryId ? "rotate-180" : ""}`,
-                              children: /* @__PURE__ */ jsxRuntime.jsx(
-                                "path",
-                                {
-                                  strokeLinecap: "round",
-                                  strokeLinejoin: "round",
-                                  d: "m6 9 6 6 6-6",
-                                  strokeWidth: 2
-                                }
-                              )
-                            }
-                          )
-                        }
-                      ) : null
-                    ] }),
-                    expandedL2 === l2.categoryId && getSubCategories(l2).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "propeller-menu__list bg-accent/20", "data-level": "3", children: getSubCategories(l2)?.map((l3, idx3) => /* @__PURE__ */ jsxRuntime.jsx(
-                      "li",
-                      {
-                        className: "propeller-menu__item",
-                        "data-level": "3",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "a",
-                          {
-                            className: "propeller-menu__link block pl-12 pr-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
-                            href: getCategoryUrl(l3),
-                            onClick: (e) => handleItemClick(l3, e),
-                            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-menu__label", children: getCategoryName(l3) })
-                          }
-                        )
-                      },
-                      `l3-mobile-${l3.categoryId}-${idx3}`
-                    )) }) : null
-                  ]
-                },
-                `l2-mobile-${l2.categoryId}-${idx2}`
-              )) }) : null
-            ]
-          },
-          `l1-mobile-${l1.categoryId}-${idx}`
-        )) }) }) : null
+        !isLoading && !hasError && menuCategories.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: `propeller-menu__nav md:hidden ${props.menuClass || ""}`, children: renderAccordion(menuCategories, 0) }) : null
       ]
     }
   );
@@ -18460,6 +18346,12 @@ function SearchBar(rawProps) {
     graphqlClient: props.graphqlClient,
     language: props.language,
     configuration: props.configuration || {},
+    // `user` supplies userId/contactId/customerId to the autosuggest query.
+    // Without it the dropdown's results diverge from the grid's: orderlist
+    // scoping is driven by userId, so `orderlistIds` alone is ignored by the
+    // backend and the dropdown shows the whole catalogue while the grid below
+    // shows only the contract's products.
+    user: props.user,
     companyId: props.companyId,
     orderlistIds: props.orderlistIds,
     applyOrderlists: props.applyOrderlists