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

package/CHANGELOG.md

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

package/dist/index.cjs

@@ -12845,6 +12845,7 @@ function ItemsOverview(props) {
   ] });
 }
 var ItemsOverview_default = ItemsOverview;
+var RENDERED_STYLES = ["dropdown-vertical", "jumbotron", "accordion"];
 function Menu(rawProps) {
   const props = useInfraProps(rawProps);
   const [openPath, setOpenPath] = React6.useState([]);
@@ -12900,11 +12901,20 @@ function Menu(rawProps) {
     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() === "dropdown-horizontal" ? 3 : getMenuStyle() === "accordion" ? Number.POSITIVE_INFINITY : 4;
+    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.`
@@ -13000,7 +13010,7 @@ function Menu(rawProps) {
                     "button",
                     {
                       type: "button",
-                      className: "propeller-menu__toggle px-4 py-3",
+                      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),
@@ -13022,6 +13032,31 @@ function Menu(rawProps) {
     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",
     {
@@ -13039,7 +13074,7 @@ function Menu(rawProps) {
           "nav",
           {
             className: `propeller-menu__nav hidden md:block ${props.menuClass || ""}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex bg-popover border border-border shadow-lg", children: renderColumns(menuCategories, 0) })
+            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(
@@ -13050,7 +13085,7 @@ 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 ${isOpenAt(0, 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": isOpenAt(0, l1.categoryId) ? "true" : "false",
                   onMouseEnter: (event) => openAt(0, l1.categoryId),
@@ -13092,7 +13127,13 @@ function Menu(rawProps) {
             ]
           }
         ) : null,
-        !isLoading && !hasError && menuCategories.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: `propeller-menu__nav md:hidden ${props.menuClass || ""}`, children: renderAccordion(menuCategories, 0) }) : null
+        !isLoading && !hasError && menuCategories.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "nav",
+          {
+            className: `propeller-menu__nav ${getMenuStyle() === "accordion" ? "block" : "md:hidden"} ${props.menuClass || ""}`,
+            children: renderAccordion(menuCategories, 0)
+          }
+        ) : null
       ]
     }
   );