@propeller-commerce/propeller-v2-react-ui 0.10.1 → 0.11.1

package/dist/index.js

@@ -12825,12 +12825,10 @@ function ItemsOverview(props) {
   ] });
 }
 var ItemsOverview_default = ItemsOverview;
+var RENDERED_STYLES = ["dropdown-vertical", "jumbotron", "accordion"];
 function Menu(rawProps) {
   const props = useInfraProps(rawProps);
-  const [hoveredL1Id, setHoveredL1Id] = useState(null);
-  const [hoveredL2Id, setHoveredL2Id] = useState(null);
-  const [expandedL1, setExpandedL1] = useState(null);
-  const [expandedL2, setExpandedL2] = useState(null);
+  const [openPath, setOpenPath] = 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({
@@ -12867,21 +12865,178 @@ 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";
+    const requested = props.menuStyle || "dropdown-vertical";
+    if (!RENDERED_STYLES.includes(requested)) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[Menu] menuStyle="${requested}" has no built-in renderer (available: ${RENDERED_STYLES.join(", ")}); falling back to "accordion". Pass \`renderMenu\` to draw a custom style.`
+        );
+      }
+      return "accordion";
+    }
+    return requested;
+  }
+  function getRenderableDepth() {
+    const requested = Math.max(1, props.depth ?? 3);
+    const cap = getMenuStyle() === "accordion" ? Number.POSITIVE_INFINITY : 5;
+    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__ */ 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__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) : /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs(
+            "li",
+            {
+              className: "propeller-menu__item",
+              "data-level": level + 1,
+              "data-expanded": expanded ? "true" : "false",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ 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__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "propeller-menu__toggle cursor-pointer px-4 py-3 text-muted-foreground transition-colors hover:text-foreground",
+                      "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}`
+          );
+        })
+      }
+    );
   }
   useEffect(() => {
     if (hasPrefetchedTree) return;
     if (!props.graphqlClient) return;
     fetchMenu(props.categoryId, userKey);
   }, [hasPrefetchedTree, props.graphqlClient, props.categoryId, props.language, userKey, fetchMenu]);
+  const customMenu = props.renderMenu ? props.renderMenu({
+    categories: menuCategories,
+    isLoading,
+    hasError,
+    maxDepth,
+    getSubCategories,
+    getCategoryName,
+    getCategoryUrl,
+    handleItemClick,
+    openPath,
+    isOpenAt,
+    openAt,
+    toggleAt
+  }) : null;
+  if (customMenu !== null && customMenu !== void 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `propeller-menu ${props.className || ""}`,
+        "data-variant": props.menuStyle || "custom",
+        "data-loading": isLoading ? "true" : "false",
+        children: customMenu
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -12899,125 +13054,7 @@ function Menu(rawProps) {
           "nav",
           {
             className: `propeller-menu__nav hidden md:block ${props.menuClass || ""}`,
-            children: /* @__PURE__ */ jsxs("div", { className: "flex bg-popover border border-border shadow-lg", children: [
-              /* @__PURE__ */ 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__ */ jsx(
-                "li",
-                {
-                  className: "propeller-menu__item",
-                  "data-level": "1",
-                  "data-active": hoveredL1Id === l1.categoryId ? "true" : "false",
-                  onMouseEnter: (event) => setHoveredL1(l1.categoryId),
-                  children: /* @__PURE__ */ 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__ */ jsx("span", { className: "propeller-menu__label font-medium truncate", children: getCategoryName(l1) }),
-                        getSubCategories(l1).length > 0 ? /* @__PURE__ */ jsx(
-                          "svg",
-                          {
-                            fill: "none",
-                            stroke: "currentColor",
-                            viewBox: "0 0 24 24",
-                            className: "propeller-menu__chevron w-4 h-4 text-muted-foreground",
-                            children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                      "li",
-                      {
-                        className: "propeller-menu__item",
-                        "data-level": "2",
-                        "data-active": hoveredL2Id === l2.categoryId ? "true" : "false",
-                        onMouseEnter: (event) => setHoveredL2(l2.categoryId),
-                        children: /* @__PURE__ */ 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__ */ jsx("span", { className: "propeller-menu__label truncate", children: getCategoryName(l2) }),
-                              getSubCategories(l2).length > 0 ? /* @__PURE__ */ jsx(
-                                "svg",
-                                {
-                                  fill: "none",
-                                  stroke: "currentColor",
-                                  viewBox: "0 0 24 24",
-                                  className: "propeller-menu__chevron w-4 h-4 text-muted-foreground",
-                                  children: /* @__PURE__ */ 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__ */ jsx(React6.Fragment, { children: getSubCategories(l1)?.map(
-                  (l2, idx2) => hoveredL2Id === l2.categoryId && getSubCategories(l2).length > 0 ? /* @__PURE__ */ jsx(
-                    "ul",
-                    {
-                      className: "propeller-menu__list w-64 py-1 flex-shrink-0",
-                      "data-level": "3",
-                      children: getSubCategories(l2)?.map((l3, idx3) => /* @__PURE__ */ jsx(
-                        "li",
-                        {
-                          className: "propeller-menu__item",
-                          "data-level": "3",
-                          children: /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "flex max-w-[100vw] overflow-x-auto bg-popover border border-border shadow-lg", children: renderColumns(menuCategories, 0) })
           }
         ) : null,
         !isLoading && !hasError && menuCategories.length > 0 && getMenuStyle() === "jumbotron" ? /* @__PURE__ */ jsxs(
@@ -13028,22 +13065,22 @@ function Menu(rawProps) {
               /* @__PURE__ */ jsx("div", { className: "propeller-menu__tabs flex items-center border-b border-border", children: menuCategories?.map((l1, idx) => /* @__PURE__ */ 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 cursor-pointer 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__ */ 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__ */ jsx(
+                (l1, idx) => isOpenAt(0, l1.categoryId) && getSubCategories(l1).length > 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "propeller-menu__group", "data-level": "2", children: [
                       /* @__PURE__ */ jsx(
                         "a",
@@ -13070,123 +13107,13 @@ function Menu(rawProps) {
             ]
           }
         ) : null,
-        !isLoading && !hasError && menuCategories.length > 0 ? /* @__PURE__ */ jsx("nav", { className: `propeller-menu__nav md:hidden ${props.menuClass || ""}`, children: /* @__PURE__ */ jsx("ul", { className: "propeller-menu__list divide-y divide-border", "data-level": "1", children: menuCategories?.map((l1, idx) => /* @__PURE__ */ jsxs(
-          "li",
+        !isLoading && !hasError && menuCategories.length > 0 ? /* @__PURE__ */ jsx(
+          "nav",
           {
-            className: "propeller-menu__item",
-            "data-level": "1",
-            "data-expanded": expandedL1 === l1.categoryId ? "true" : "false",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ 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__ */ jsx("span", { className: "propeller-menu__label", children: getCategoryName(l1) })
-                  }
-                ),
-                getSubCategories(l1).length > 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            d: "m6 9 6 6 6-6",
-                            strokeWidth: 2
-                          }
-                        )
-                      }
-                    )
-                  }
-                ) : null
-              ] }),
-              expandedL1 === l1.categoryId && getSubCategories(l1).length > 0 ? /* @__PURE__ */ jsx("ul", { className: "propeller-menu__list bg-accent/30", "data-level": "2", children: getSubCategories(l1)?.map((l2, idx2) => /* @__PURE__ */ jsxs(
-                "li",
-                {
-                  className: "propeller-menu__item",
-                  "data-level": "2",
-                  "data-expanded": expandedL2 === l2.categoryId ? "true" : "false",
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                      /* @__PURE__ */ 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__ */ jsx("span", { className: "propeller-menu__label", children: getCategoryName(l2) })
-                        }
-                      ),
-                      getSubCategories(l2).length > 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                                "path",
-                                {
-                                  strokeLinecap: "round",
-                                  strokeLinejoin: "round",
-                                  d: "m6 9 6 6 6-6",
-                                  strokeWidth: 2
-                                }
-                              )
-                            }
-                          )
-                        }
-                      ) : null
-                    ] }),
-                    expandedL2 === l2.categoryId && getSubCategories(l2).length > 0 ? /* @__PURE__ */ jsx("ul", { className: "propeller-menu__list bg-accent/20", "data-level": "3", children: getSubCategories(l2)?.map((l3, idx3) => /* @__PURE__ */ jsx(
-                      "li",
-                      {
-                        className: "propeller-menu__item",
-                        "data-level": "3",
-                        children: /* @__PURE__ */ 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__ */ 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
+            className: `propeller-menu__nav ${getMenuStyle() === "accordion" ? "block" : "md:hidden"} ${props.menuClass || ""}`,
+            children: renderAccordion(menuCategories, 0)
+          }
+        ) : null
       ]
     }
   );