@dmsi/wedgekit-react 0.0.1016 → 0.0.1018

package/dist/components/NestedMenu.cjs

@@ -914,11 +914,256 @@ var Button = (_a) => {
 };
 Button.displayName = "Button";
 
-// src/components/NestedMenu.tsx
+// src/components/Stack.tsx
+var import_clsx8 = __toESM(require("clsx"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx8.default)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
+var useGapClassNames = (sizing) => {
+  return (0, import_clsx8.default)(
+    sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+    sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+    sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+    sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+  );
+};
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
+    margin,
+    marginX,
+    marginY,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    minHeight,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    borderTopColor,
+    borderRightColor,
+    borderBottomColor,
+    borderLeftColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id,
+    noGap,
+    marginTop,
+    marginBottom,
+    testid,
+    bottom,
+    zIndex,
+    flexWrap,
+    className,
+    unclipEdges
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight",
+    "margin",
+    "marginX",
+    "marginY",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "minHeight",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id",
+    "noGap",
+    "marginTop",
+    "marginBottom",
+    "testid",
+    "bottom",
+    "zIndex",
+    "flexWrap",
+    "className",
+    "unclipEdges"
+  ]);
+  var _a2, _b2, _c, _d, _e, _f, _g;
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
+  const gapClassNames = useGapClassNames(sizing);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid
+    }, props), {
+      style: __spreadValues({
+        height: height === "full" ? "100%" : height === void 0 ? void 0 : height === "fit" ? "fit-content" : `${height}px`,
+        maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
+        maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        borderTop: borderTopColor ? `1px solid var(--color-${borderTopColor})` : void 0,
+        borderRight: borderRightColor ? `1px solid var(--color-${borderRightColor})` : void 0,
+        borderBottom: borderBottomColor ? `1px solid var(--color-${borderBottomColor})` : void 0,
+        borderLeft: borderLeftColor ? `1px solid var(--color-${borderLeftColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0,
+        flexWrap,
+        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
+        gap: (_g = props.style) == null ? void 0 : _g.gap
+      }, props.style),
+      className: (0, import_clsx8.default)(
+        "scrollbar-thin",
+        "max-w-screen",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        width === "max" && "w-max",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        paddingBottom && sizing === "container" && "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
+        paddingBottom && sizing === "layout" && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+        paddingBottom && sizing === "layout-group" && "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
+        paddingBottom && sizing === "component" && "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
+        paddingTop && sizing === "container" && "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
+        paddingTop && sizing === "layout" && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+        paddingTop && sizing === "layout-group" && "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
+        paddingTop && sizing === "component" && "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
+        paddingLeft && sizing === "container" && "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
+        paddingLeft && sizing === "layout" && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+        paddingLeft && sizing === "layout-group" && "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
+        paddingLeft && sizing === "component" && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
+        paddingRight && sizing === "container" && "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
+        paddingRight && sizing === "layout" && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
+        paddingRight && sizing === "layout-group" && "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
+        paddingRight && sizing === "component" && "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-desktop-compact-component-padding",
+        margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
+        marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
+        marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
+        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
+        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        !noGap && gapClassNames,
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded",
+        unclipEdges && "-m-0.75 p-1",
+        className
+      ),
+      children
+    })
+  );
+};
+
+// src/components/NestedMenu.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function NestedMenu(props) {
-  const { onMenuClick, currentMenu, testid } = props;
+  const {
+    onMenuClick,
+    currentMenu,
+    testid,
+    shopAllUrl,
+    shopAllLinkLabel,
+    isQuoteMode = false
+  } = props;
   const [selectedIndex, setSelectedIndex] = (0, import_react7.useState)(0);
+  const normalizedShopAllUrl = shopAllUrl == null ? void 0 : shopAllUrl.trim();
+  const hasTopLevelShopAllOption = Boolean(normalizedShopAllUrl) && currentMenu.previousMenu == null && !isQuoteMode;
+  const menuItems = [
+    ...hasTopLevelShopAllOption ? [
+      {
+        id: "shop-all-top",
+        label: (shopAllLinkLabel == null ? void 0 : shopAllLinkLabel.trim()) || "Shop All",
+        url: normalizedShopAllUrl
+      }
+    ] : [],
+    ...currentMenu.subEntries || []
+  ];
   useKeydown(
     {
       Escape: () => {
@@ -930,19 +1175,19 @@ function NestedMenu(props) {
       },
       ArrowDown: () => {
         setSelectedIndex((prev) => {
-          var _a;
-          const entriesLength = ((_a = currentMenu.subEntries) == null ? void 0 : _a.length) || 0;
+          const entriesLength = menuItems.length;
           if (prev === entriesLength - 1) return 0;
-          return Math.min(prev + 1, (currentMenu.subEntries || []).length - 1);
+          return Math.min(prev + 1, menuItems.length - 1);
         });
       },
       // "Space" is replaced with " " to handle spacebar.
       "Enter/Space": () => {
         var _a;
-        const item = (currentMenu.subEntries || [])[selectedIndex];
+        const item = menuItems[selectedIndex];
         handleMenuClick(
           item || currentMenu.previousMenu,
-          !item && currentMenu.previousMenu !== null
+          !item && currentMenu.previousMenu !== null,
+          (item == null ? void 0 : item.url) ? "url" : void 0
         );
         if (!item && !((_a = currentMenu.previousMenu) == null ? void 0 : _a.previousMenu))
           setSelectedIndex(0);
@@ -955,18 +1200,19 @@ function NestedMenu(props) {
     },
     true
   );
-  function handleMenuClick(item, isPrevious = false) {
+  function handleMenuClick(item, isPrevious = false, action) {
     onMenuClick(
-      item && __spreadValues(__spreadValues({}, item), !isPrevious && { previousMenu: currentMenu })
+      item && __spreadValues(__spreadValues({}, item), !isPrevious && { previousMenu: currentMenu }),
+      action
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col w-full", children: [
-    !currentMenu.removeBackOption && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col w-full", children: [
+    !currentMenu.removeBackOption && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       MenuOption,
       {
         testid: testid ? `${testid}-back` : void 0,
         variant: "normal",
-        before: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        before: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Icon,
           {
             name: "chevron_left",
@@ -979,10 +1225,10 @@ function NestedMenu(props) {
           return handleMenuClick((_a = currentMenu.previousMenu) != null ? _a : null, true);
         },
         selected: selectedIndex === -1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label, { color: "text-action-normal", children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { color: "text-action-normal", children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu" })
       }
     ),
-    currentMenu.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    currentMenu.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       MenuOption,
       {
         variant: "action",
@@ -990,16 +1236,16 @@ function NestedMenu(props) {
         children: currentMenu.title
       }
     ),
-    (currentMenu.subEntries || []).map((item, idx) => {
+    menuItems.map((item, idx) => {
       var _a;
       if (item.children == null) {
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           MenuOption,
           {
             testid: testid ? `${testid}-${item.label}` : void 0,
             variant: "normal",
-            onClick: () => handleMenuClick(item),
-            after: ((_a = item.subEntries) == null ? void 0 : _a.length) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            onClick: () => handleMenuClick(item, false, item.url ? "url" : void 0),
+            after: ((_a = item.subEntries) == null ? void 0 : _a.length) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Button,
               {
                 iconOnly: true,
@@ -1010,16 +1256,16 @@ function NestedMenu(props) {
                   onMenuClick(item, "subEntry");
                 },
                 className: "!p-0 w-full justify-end",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "chevron_right", className: "icon", size: 24 })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "chevron_right", className: "icon", size: 24 })
               }
             ),
             selected: selectedIndex === idx,
-            children: item.label
+            children: item.id === "shop-all-top" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Stack, { minHeight: 24, justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { color: "text-action-normal", padded: true, children: item.label }) }) : item.label
           },
           item.id
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react7.default.Fragment, { children: item.children }, item.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.default.Fragment, { children: item.children }, item.id);
     })
   ] });
 }

package/dist/components/NestedMenu.js

@@ -17,6 +17,9 @@ import {
   Button
 } from "../chunk-ZMTHWJ7F.js";
 import "../chunk-SBRRNFOP.js";
+import {
+  Stack
+} from "../chunk-BGBIXG5Y.js";
 import "../chunk-WMPWWFUJ.js";
 import {
   Icon
@@ -30,8 +33,27 @@ import {
 import React, { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function NestedMenu(props) {
-  const { onMenuClick, currentMenu, testid } = props;
+  const {
+    onMenuClick,
+    currentMenu,
+    testid,
+    shopAllUrl,
+    shopAllLinkLabel,
+    isQuoteMode = false
+  } = props;
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const normalizedShopAllUrl = shopAllUrl == null ? void 0 : shopAllUrl.trim();
+  const hasTopLevelShopAllOption = Boolean(normalizedShopAllUrl) && currentMenu.previousMenu == null && !isQuoteMode;
+  const menuItems = [
+    ...hasTopLevelShopAllOption ? [
+      {
+        id: "shop-all-top",
+        label: (shopAllLinkLabel == null ? void 0 : shopAllLinkLabel.trim()) || "Shop All",
+        url: normalizedShopAllUrl
+      }
+    ] : [],
+    ...currentMenu.subEntries || []
+  ];
   useKeydown(
     {
       Escape: () => {
@@ -43,19 +65,19 @@ function NestedMenu(props) {
       },
       ArrowDown: () => {
         setSelectedIndex((prev) => {
-          var _a;
-          const entriesLength = ((_a = currentMenu.subEntries) == null ? void 0 : _a.length) || 0;
+          const entriesLength = menuItems.length;
           if (prev === entriesLength - 1) return 0;
-          return Math.min(prev + 1, (currentMenu.subEntries || []).length - 1);
+          return Math.min(prev + 1, menuItems.length - 1);
         });
       },
       // "Space" is replaced with " " to handle spacebar.
       "Enter/Space": () => {
         var _a;
-        const item = (currentMenu.subEntries || [])[selectedIndex];
+        const item = menuItems[selectedIndex];
         handleMenuClick(
           item || currentMenu.previousMenu,
-          !item && currentMenu.previousMenu !== null
+          !item && currentMenu.previousMenu !== null,
+          (item == null ? void 0 : item.url) ? "url" : void 0
         );
         if (!item && !((_a = currentMenu.previousMenu) == null ? void 0 : _a.previousMenu))
           setSelectedIndex(0);
@@ -68,9 +90,10 @@ function NestedMenu(props) {
     },
     true
   );
-  function handleMenuClick(item, isPrevious = false) {
+  function handleMenuClick(item, isPrevious = false, action) {
     onMenuClick(
-      item && __spreadValues(__spreadValues({}, item), !isPrevious && { previousMenu: currentMenu })
+      item && __spreadValues(__spreadValues({}, item), !isPrevious && { previousMenu: currentMenu }),
+      action
     );
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
@@ -103,7 +126,7 @@ function NestedMenu(props) {
         children: currentMenu.title
       }
     ),
-    (currentMenu.subEntries || []).map((item, idx) => {
+    menuItems.map((item, idx) => {
       var _a;
       if (item.children == null) {
         return /* @__PURE__ */ jsx(
@@ -111,7 +134,7 @@ function NestedMenu(props) {
           {
             testid: testid ? `${testid}-${item.label}` : void 0,
             variant: "normal",
-            onClick: () => handleMenuClick(item),
+            onClick: () => handleMenuClick(item, false, item.url ? "url" : void 0),
             after: ((_a = item.subEntries) == null ? void 0 : _a.length) && /* @__PURE__ */ jsx(
               Button,
               {
@@ -127,7 +150,7 @@ function NestedMenu(props) {
               }
             ),
             selected: selectedIndex === idx,
-            children: item.label
+            children: item.id === "shop-all-top" ? /* @__PURE__ */ jsx(Stack, { minHeight: 24, justify: "center", children: /* @__PURE__ */ jsx(Label, { color: "text-action-normal", padded: true, children: item.label }) }) : item.label
           },
           item.id
         );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.1016",
+  "version": "0.0.1018",
   "type": "module",
   "scripts": {
     "build": "tsup",