@dmsi/wedgekit-react 0.0.16 → 0.0.18

package/dist/components/NestedMenu.cjs

@@ -0,0 +1,603 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/NestedMenu.tsx
+var NestedMenu_exports = {};
+__export(NestedMenu_exports, {
+  NestedMenu: () => NestedMenu
+});
+module.exports = __toCommonJS(NestedMenu_exports);
+var import_react4 = require("react");
+
+// src/components/Icon.tsx
+var import_clsx = __toESM(require("clsx"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Icon(_a) {
+  var _b = _a, {
+    name,
+    size = 24,
+    variant = "outline"
+  } = _b, props = __objRest(_b, [
+    "name",
+    "size",
+    "variant"
+  ]);
+  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
+  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx.default)(
+        "icon",
+        `icon-${size}`,
+        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
+        props.className
+      ),
+      style: __spreadValues({
+        fontVariationSettings: variantStyle + `, ${weightStyle}`
+      }, props.style),
+      children: name
+    })
+  );
+}
+
+// src/components/MenuOption.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_react2 = require("react");
+
+// src/classNames.ts
+var import_clsx2 = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx2.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx2.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx2.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx2.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx2.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx2.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx2.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx2.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx2.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx2.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx2.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx2.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx2.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx2.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingXUsingLayoutGroupGap = (0, import_clsx2.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx2.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx2.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx2.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingX = (0, import_clsx2.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx2.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx2.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx2.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx2.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx2.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddding = (0, import_clsx2.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
+var layoutPaddingBottom = (0, import_clsx2.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx2.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx2.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx2.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx2.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx2.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx2.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx2.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Label.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Label = (_a) => {
+  var _b = _a, {
+    as = "span",
+    padded,
+    className,
+    color,
+    align
+  } = _b, props = __objRest(_b, [
+    "as",
+    "padded",
+    "className",
+    "color",
+    "align"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      className: (0, import_clsx3.default)(
+        typography.label,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        className,
+        padded && componentPaddingXUsingComponentGap
+      )
+    }, props), {
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    })
+  );
+};
+Label.displayName = "Label";
+
+// src/components/Paragraph.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Element,
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx4.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/useMatchesMedia.tsx
+var import_react = require("react");
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = (0, import_react.useState)(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  (0, import_react.useLayoutEffect)(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQueryList.addEventListener("change", listener);
+    setMatches(mediaQueryList.matches);
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => {
+  const isMobile = useMatchesMedia("(width < 48rem)");
+  return isMobile;
+};
+
+// src/components/MenuOption.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MenuOption = ({
+  children,
+  disabled = false,
+  variant = "normal",
+  value,
+  before,
+  after,
+  subMenu,
+  onClick,
+  selected,
+  ref,
+  onSubMenuHover,
+  onSubMenuLeave,
+  onSubMenuEnter,
+  toggleMenu,
+  subMenuLevel = 1,
+  currentSubMenuLevel,
+  closeSubMenuLevel,
+  activeMenu,
+  mobilePositionTo,
+  highlightMatchingText = false,
+  menuValue
+}) => {
+  const uniqueId = (0, import_react2.useId)();
+  const internalRef = (0, import_react2.useRef)(null);
+  const actualRef = ref || internalRef;
+  const menuId = (0, import_react2.useRef)(`menu-${uniqueId}`);
+  const isMobile = useMatchesMobile();
+  const handleMouseEnter = () => {
+    if (subMenu && onSubMenuHover && !disabled) {
+      onSubMenuHover(menuId.current, subMenuLevel);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (subMenu && onSubMenuLeave && !disabled) {
+      onSubMenuLeave(subMenuLevel);
+    }
+  };
+  const handleSubMenuEnter = () => {
+    if (onSubMenuEnter) {
+      onSubMenuEnter();
+    }
+  };
+  const additionalAttributes = {
+    "data-selected": selected || null
+  };
+  const svgStyles = (0, import_clsx5.default)(
+    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
+  );
+  const textLabelStyles = (0, import_clsx5.default)("w-full whitespace-nowrap !leading-6");
+  const normalStyles = variant === "normal" && !disabled && (0, import_clsx5.default)(
+    "bg-transparent text-text-primary-normal",
+    "hover:bg-background-action-secondary-hover",
+    "focus:bg-background-action-secondary-hover",
+    "data-selected:bg-background-action-secondary-hover",
+    "active:bg-background-action-secondary-active"
+  );
+  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx5.default)("text-text-primary-disabled");
+  const actionStyles = variant === "action" && !disabled && (0, import_clsx5.default)(
+    "text-action-400 bg-transparent",
+    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
+    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
+    "active:bg-background-action-secondary-active active:text-text-action-active"
+  );
+  const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx5.default)("text-text-action-disabled");
+  const disabledStyles = disabled && (0, import_clsx5.default)("bg-transparent cursor-default pointer-events-none");
+  const renderChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: actualRef,
+        className: (0, import_clsx5.default)(
+          "flex items-center cursor-pointer w-full text-left relative outline-none",
+          svgStyles,
+          componentGap,
+          componentPadding,
+          baseTransition,
+          normalStyles,
+          normalDisabledStyles,
+          actionStyles,
+          actionDisabledStyles,
+          disabledStyles
+        ),
+        "data-value": value || children,
+        onClick: () => {
+          onClick == null ? void 0 : onClick(menuId.current, value || children);
+          if (subMenu) {
+            toggleMenu(menuId.current, subMenuLevel);
+          }
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      }, additionalAttributes), {
+        tabIndex: -1,
+        role: "menuitem",
+        "aria-haspopup": subMenu ? "menu" : void 0,
+        children: [
+          before && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
+          variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, className: textLabelStyles, children: renderChildren }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: renderChildren }),
+          renderAfterProp()
+        ]
+      })
+    ),
+    subMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        onMouseEnter: handleSubMenuEnter,
+        onMouseLeave: handleMouseLeave,
+        "data-submenu-parent": menuId.current,
+        "data-menu-level": subMenuLevel + 1,
+        children: subMenu({ menuId: menuId.current, positionTo: actualRef, mobilePositionTo, position: "right", subMenuLevel, mobileBackMenuOption, mobileHide: isMobile && activeMenu !== menuId.current })
+      }
+    )
+  ] });
+  function renderAfterProp() {
+    if (after) {
+      return after;
+    }
+    if (subMenu && after !== null) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_right" });
+    }
+  }
+  function mobileBackMenuOption() {
+    if (!isMobile) {
+      return;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      MenuOption,
+      {
+        onClick: () => {
+          closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
+        },
+        variant: "action",
+        before: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_left" }),
+        children: "Back"
+      }
+    );
+  }
+};
+MenuOption.displayName = "MenuOption";
+function highlightMatch(text, searchValue) {
+  if (!searchValue || !searchValue.trim()) {
+    return text;
+  }
+  const regex = new RegExp(`(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+  const parts = text.split(regex);
+  return parts.map(
+    (part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-bold", children: part }, index) : part
+  );
+}
+
+// src/hooks/useKeydown.ts
+var import_react3 = require("react");
+function useKeydown(keys, isActive) {
+  function handleKeyDown(event) {
+    if (!Object.keys(keys).includes(event.key) && !Object.keys(keys).join("").includes("/"))
+      return;
+    Object.entries(keys).forEach(([key, handler]) => {
+      if (event.key !== key && !key.includes("/")) return;
+      if (key.includes("/") && key.replace("Space", " ").split("/").includes(event.key)) {
+        event.preventDefault();
+        handler(event);
+        return;
+      }
+      if (event.key === key) {
+        event.preventDefault();
+        handler(event);
+      }
+    });
+  }
+  (0, import_react3.useEffect)(() => {
+    if (!isActive)
+      return document.removeEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [keys, isActive]);
+}
+
+// src/components/NestedMenu.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function NestedMenu(props) {
+  var _a;
+  const { onMenuClick, currentMenu } = props;
+  const [selectedIndex, setSelectedIndex] = (0, import_react4.useState)(0);
+  useKeydown(
+    {
+      Escape: () => {
+        setSelectedIndex(0);
+        handleMenuClick(null, true);
+      },
+      ArrowUp: () => {
+        setSelectedIndex((prev) => prev === 0 ? -1 : Math.max(prev - 1, 0));
+      },
+      ArrowDown: () => {
+        setSelectedIndex((prev) => {
+          var _a2;
+          const entriesLength = ((_a2 = currentMenu.subEntries) == null ? void 0 : _a2.length) || 0;
+          if (prev === entriesLength - 1) return 0;
+          return Math.min(prev + 1, (currentMenu.subEntries || []).length - 1);
+        });
+      },
+      // "Space" is replaced with " " to handle spacebar.
+      "Enter/Space": () => {
+        var _a2;
+        const item = (currentMenu.subEntries || [])[selectedIndex];
+        handleMenuClick(
+          item || currentMenu.previousMenu,
+          !item && currentMenu.previousMenu !== null
+        );
+        if (!item && !((_a2 = currentMenu.previousMenu) == null ? void 0 : _a2.previousMenu))
+          setSelectedIndex(0);
+      },
+      Backspace: () => {
+        var _a2, _b;
+        handleMenuClick((_a2 = currentMenu.previousMenu) != null ? _a2 : null, true);
+        if (!((_b = currentMenu.previousMenu) == null ? void 0 : _b.previousMenu)) setSelectedIndex(0);
+      }
+    },
+    true
+  );
+  function handleMenuClick(item, isPrevious = false) {
+    onMenuClick(
+      item && __spreadValues(__spreadValues({}, item), !isPrevious && { previousMenu: currentMenu })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      MenuOption,
+      {
+        variant: "action",
+        before: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "chevron_left", className: "icon", size: 24 }),
+        onClick: () => {
+          var _a2;
+          return handleMenuClick((_a2 = currentMenu.previousMenu) != null ? _a2 : null, true);
+        },
+        selected: selectedIndex === -1,
+        children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuOption, { variant: "action", children: (_a = currentMenu.title) != null ? _a : currentMenu.label }),
+    (currentMenu.subEntries || []).map((item, idx) => {
+      var _a2;
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        MenuOption,
+        {
+          variant: "normal",
+          onClick: () => handleMenuClick(item),
+          after: ((_a2 = item.subEntries) == null ? void 0 : _a2.length) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "chevron_right", className: "icon", size: 24 }),
+          selected: selectedIndex === idx,
+          children: item.label
+        },
+        item.id
+      );
+    })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NestedMenu
+});

package/dist/components/NestedMenu.js

@@ -0,0 +1,128 @@
+"use client";
+import {
+  MenuOption
+} from "../chunk-YDREJNAS.js";
+import "../chunk-SEKKGFM6.js";
+import "../chunk-S7R37IUP.js";
+import "../chunk-UIQ733QP.js";
+import {
+  Icon
+} from "../chunk-IGQVA7SC.js";
+import "../chunk-RDLEIAQU.js";
+import {
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/NestedMenu.tsx
+import { useState } from "react";
+
+// src/hooks/useKeydown.ts
+import { useEffect } from "react";
+function useKeydown(keys, isActive) {
+  function handleKeyDown(event) {
+    if (!Object.keys(keys).includes(event.key) && !Object.keys(keys).join("").includes("/"))
+      return;
+    Object.entries(keys).forEach(([key, handler]) => {
+      if (event.key !== key && !key.includes("/")) return;
+      if (key.includes("/") && key.replace("Space", " ").split("/").includes(event.key)) {
+        event.preventDefault();
+        handler(event);
+        return;
+      }
+      if (event.key === key) {
+        event.preventDefault();
+        handler(event);
+      }
+    });
+  }
+  useEffect(() => {
+    if (!isActive)
+      return document.removeEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [keys, isActive]);
+}
+
+// src/components/NestedMenu.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function NestedMenu(props) {
+  var _a;
+  const { onMenuClick, currentMenu } = props;
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  useKeydown(
+    {
+      Escape: () => {
+        setSelectedIndex(0);
+        handleMenuClick(null, true);
+      },
+      ArrowUp: () => {
+        setSelectedIndex((prev) => prev === 0 ? -1 : Math.max(prev - 1, 0));
+      },
+      ArrowDown: () => {
+        setSelectedIndex((prev) => {
+          var _a2;
+          const entriesLength = ((_a2 = currentMenu.subEntries) == null ? void 0 : _a2.length) || 0;
+          if (prev === entriesLength - 1) return 0;
+          return Math.min(prev + 1, (currentMenu.subEntries || []).length - 1);
+        });
+      },
+      // "Space" is replaced with " " to handle spacebar.
+      "Enter/Space": () => {
+        var _a2;
+        const item = (currentMenu.subEntries || [])[selectedIndex];
+        handleMenuClick(
+          item || currentMenu.previousMenu,
+          !item && currentMenu.previousMenu !== null
+        );
+        if (!item && !((_a2 = currentMenu.previousMenu) == null ? void 0 : _a2.previousMenu))
+          setSelectedIndex(0);
+      },
+      Backspace: () => {
+        var _a2, _b;
+        handleMenuClick((_a2 = currentMenu.previousMenu) != null ? _a2 : null, true);
+        if (!((_b = currentMenu.previousMenu) == null ? void 0 : _b.previousMenu)) setSelectedIndex(0);
+      }
+    },
+    true
+  );
+  function handleMenuClick(item, isPrevious = false) {
+    onMenuClick(
+      item && __spreadValues(__spreadValues({}, item), !isPrevious && { previousMenu: currentMenu })
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
+    /* @__PURE__ */ jsx(
+      MenuOption,
+      {
+        variant: "action",
+        before: /* @__PURE__ */ jsx(Icon, { name: "chevron_left", className: "icon", size: 24 }),
+        onClick: () => {
+          var _a2;
+          return handleMenuClick((_a2 = currentMenu.previousMenu) != null ? _a2 : null, true);
+        },
+        selected: selectedIndex === -1,
+        children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu"
+      }
+    ),
+    /* @__PURE__ */ jsx(MenuOption, { variant: "action", children: (_a = currentMenu.title) != null ? _a : currentMenu.label }),
+    (currentMenu.subEntries || []).map((item, idx) => {
+      var _a2;
+      return /* @__PURE__ */ jsx(
+        MenuOption,
+        {
+          variant: "normal",
+          onClick: () => handleMenuClick(item),
+          after: ((_a2 = item.subEntries) == null ? void 0 : _a2.length) && /* @__PURE__ */ jsx(Icon, { name: "chevron_right", className: "icon", size: 24 }),
+          selected: selectedIndex === idx,
+          children: item.label
+        },
+        item.id
+      );
+    })
+  ] });
+}
+export {
+  NestedMenu
+};

package/package.json

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

package/src/components/NestedMenu.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+import { Icon } from "./Icon";
+import { MenuOption } from "./MenuOption";
+import { useKeydown } from "../hooks";
+
+export type NestedMenuEntry = {
+  id: string; // Unique identifier for the nested menu entry
+  label: string;
+  title?: string;
+  icon?: string;
+  subEntries?: NestedMenuEntry[];
+  url?: string;
+  onClick?: () => void; // Optional click handler
+  previousMenu?: NestedMenuEntry | null; // Reference to the previous menu entry
+};
+
+export type NestedMenuProps = {
+  currentMenu: NestedMenuEntry; // Current menu entry, if any
+  onMenuClick: (entry: NestedMenuEntry | null) => void; // Callback when a menu item is clicked. tailing
+};
+
+export function NestedMenu(props: NestedMenuProps) {
+  const { onMenuClick, currentMenu } = props;
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+
+  useKeydown(
+    {
+      Escape: () => {
+        setSelectedIndex(0);
+        handleMenuClick(null, true);
+      },
+      ArrowUp: () => {
+        setSelectedIndex((prev) => (prev === 0 ? -1 : Math.max(prev - 1, 0)));
+      },
+      ArrowDown: () => {
+        setSelectedIndex((prev) => {
+          const entriesLength = currentMenu.subEntries?.length || 0;
+          if (prev === entriesLength - 1) return 0;
+          return Math.min(prev + 1, (currentMenu.subEntries || []).length - 1);
+        });
+      },
+      // "Space" is replaced with " " to handle spacebar.
+      "Enter/Space": () => {
+        const item = (currentMenu.subEntries || [])[selectedIndex];
+        handleMenuClick(
+          item || currentMenu.previousMenu,
+          !item && currentMenu.previousMenu !== null,
+        );
+        if (!item && !currentMenu.previousMenu?.previousMenu)
+          setSelectedIndex(0);
+      },
+      Backspace: () => {
+        handleMenuClick(currentMenu.previousMenu ?? null, true);
+        if (!currentMenu.previousMenu?.previousMenu) setSelectedIndex(0);
+      },
+    },
+    true,
+  ); // Static active state as it unmounts if !currentMenu
+
+  function handleMenuClick(item: NestedMenuEntry | null, isPrevious = false) {
+    onMenuClick(
+      item && { ...item, ...(!isPrevious && { previousMenu: currentMenu }) },
+    );
+  }
+
+  return (
+    <div className="flex flex-col w-full">
+      <MenuOption
+        variant="action"
+        before={<Icon name="chevron_left" className="icon" size={24} />}
+        onClick={() => handleMenuClick(currentMenu.previousMenu ?? null, true)}
+        selected={selectedIndex === -1}
+      >
+        {currentMenu.previousMenu
+          ? currentMenu.previousMenu.label
+          : "Main Menu"}
+      </MenuOption>
+      <MenuOption variant="action">
+        {currentMenu.title ?? currentMenu.label}
+      </MenuOption>
+      {(currentMenu.subEntries || []).map((item, idx) => (
+        <MenuOption
+          key={item.id}
+          variant="normal"
+          onClick={() => handleMenuClick(item)}
+          after={
+            item.subEntries?.length && (
+              <Icon name="chevron_right" className="icon" size={24} />
+            )
+          }
+          selected={selectedIndex === idx}
+        >
+          {item.label}
+        </MenuOption>
+      ))}
+    </div>
+  );
+}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useKeydown } from "./useKeydown";

package/src/hooks/useKeydown.ts

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+
+type KeyHandler = (event: KeyboardEvent) => void;
+
+export function useKeydown(
+  keys: Record<string, KeyHandler>,
+  isActive?: boolean,
+): void {
+  function handleKeyDown(event: KeyboardEvent): void {
+    if (
+      !Object.keys(keys).includes(event.key) &&
+      !Object.keys(keys).join("").includes("/")
+    )
+      return;
+    Object.entries(keys).forEach(([key, handler]) => {
+      if (event.key !== key && !key.includes("/")) return;
+      // Match single keys or combinations like "Enter/Space"
+      if (
+        key.includes("/") &&
+        key.replace("Space", " ").split("/").includes(event.key)
+      ) {
+        event.preventDefault();
+        handler(event);
+        return;
+      }
+      if (event.key === key) {
+        event.preventDefault();
+        handler(event);
+      }
+    });
+  }
+
+  useEffect(() => {
+    if (!isActive)
+      return document.removeEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [keys, isActive]);
+}