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

package/CHANGELOG.md

@@ -8,6 +8,93 @@ 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.1] - 2026-07-30
+
+### Fixed
+
+- **`menuStyle="accordion"` rendered nothing above `md`.** The accordion is the
+  mobile drawer for every style, so its `<nav>` carried `md:hidden` and rendered
+  unconditionally — while the desktop branches were gated on `menuStyle`.
+  Selecting it therefore matched no desktop branch and hid the mobile one,
+  leaving an empty panel. It now renders at every breakpoint when chosen
+  explicitly, and stays `md:hidden` as the mobile presentation of the others.
+  This is what 0.11.0's depth warning already recommended for deep trees.
+- **`menuStyle` values with no renderer failed silently.** An unrecognised
+  style matched no branch and produced an empty panel with nothing to indicate
+  why. It now falls back to `accordion` — the style that can display any tree —
+  and warns in development, pointing at `renderMenu`.
+- **The accordion's expand control didn't look clickable.** Tailwind v4 resets
+  buttons to `cursor: default`, so the chevron — the only control that expands a
+  branch — gave no affordance. Added `cursor-pointer` plus a hover colour shift,
+  and the same to the jumbotron tabs, which had it too.
+- **A deep flyout could run off the viewport with no way to reach it.** The
+  columns row now has `max-w-[100vw] overflow-x-auto`, so a tree wider than the
+  screen degrades to a scroll instead of being unreachable.
+
+### Added
+
+- **`renderMenu` — render the menu yourself.** The built-in styles are three
+  arrangements of the same tree; this is the escape hatch for a fourth. It
+  receives a `MenuRenderContext` carrying the categories, the open-path state
+  and the same helpers the built-ins use (`getCategoryUrl` honouring
+  `getUrl`/`configuration`, `handleItemClick` firing `onMenuItemClick`,
+  `openAt`/`toggleAt`/`isOpenAt`), so a custom menu gets working open/close
+  behaviour and URL building without reimplementing them and drifting. Return
+  `null` to fall through to the `menuStyle` rendering. `MenuStyle` and
+  `MenuRenderContext` are exported.
+- **First tests for `Menu`** (9 cases), covering the failures above: they all
+  passed type-checking and rendered *something*, so only a DOM assertion catches
+  them.
+
+### Changed
+
+- **`dropdown-horizontal` removed.** It was referenced only in the depth-cap
+  logic and never had a renderer, so it advertised a style that drew nothing.
+  Callers using it now hit the unknown-style fallback (accordion + warning); use
+  `renderMenu` for a genuinely custom layout.
+- **`dropdown-vertical` caps at 5 levels, up from 4.** Each level is a 256px
+  column, so five total 1280px — within a 1440px desktop. Paired with the
+  overflow guard above for narrower screens.
+- **`menuStyle` is typed `MenuStyle | (string & {})`** rather than `string`: the
+  built-ins autocomplete while a custom value still type-checks for use with
+  `renderMenu`.
+
+## [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

package/dist/index.cjs

@@ -12845,12 +12845,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] = 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,21 +12885,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__ */ 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 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}`
+          );
+        })
+      }
+    );
   }
   React6.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `propeller-menu ${props.className || ""}`,
+        "data-variant": props.menuStyle || "custom",
+        "data-loading": isLoading ? "true" : "false",
+        children: customMenu
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -12919,125 +13074,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 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__ */ jsxRuntime.jsxs(
@@ -13048,22 +13085,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 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__ */ 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 +13127,13 @@ 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",
+        !isLoading && !hasError && menuCategories.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "nav",
           {
-            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
+            className: `propeller-menu__nav ${getMenuStyle() === "accordion" ? "block" : "md:hidden"} ${props.menuClass || ""}`,
+            children: renderAccordion(menuCategories, 0)
+          }
+        ) : null
       ]
     }
   );