@dmsi/wedgekit-react 0.0.488 → 0.0.489

package/dist/components/NestedMenu.cjs

@@ -572,8 +572,147 @@ function highlightMatch(text, searchValue) {
   );
 }
 
-// src/components/NestedMenu.tsx
+// src/components/Button.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var Button = (_a) => {
+  var _b = _a, {
+    variant = "primary",
+    as = "button",
+    block,
+    leftIcon,
+    rightIcon,
+    className,
+    classNameLabel,
+    disabled = false,
+    children,
+    iconOnly = false,
+    colorClassName,
+    href,
+    id,
+    testid
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "as",
+    "block",
+    "leftIcon",
+    "rightIcon",
+    "className",
+    "classNameLabel",
+    "disabled",
+    "children",
+    "iconOnly",
+    "colorClassName",
+    "href",
+    "id",
+    "testid"
+  ]);
+  const primaryVariantStyles = variant === "primary" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-primary-normal border-background-action-primary-normal",
+    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
+    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
+    "active:bg-background-action-primary-active active:border-background-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-background-action-secondary-normal border-border-action-normal",
+    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
+  );
+  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx6.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
+  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
+    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
+    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
+    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
+    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
+    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
+  );
+  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-transparent border-transparent text-text-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
+  );
+  const navigationVarianStyles = variant === "navigation" && (0, import_clsx6.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-transparent",
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
+    "flex-col",
+    paddingUsingComponentGap
+  );
+  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx6.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+  const buttonClasses = (0, import_clsx6.default)(
+    disabled ? "cursor-default" : "cursor-pointer",
+    block ? "w-full" : "w-fit",
+    baseTransition,
+    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
+    primaryVariantStyles,
+    secondaryVariantStyles,
+    tertiaryVariantStyles,
+    primaryCriticalVariantStyles,
+    secondaryCriticalVariantStyles,
+    tertiaryCriticalVariantStyles,
+    navigationVarianStyles,
+    notNavigationVariantStyles,
+    className
+  );
+  const labelClasses = (0, import_clsx6.default)(
+    "min-h-6 flex items-center justify-center",
+    classNameLabel,
+    componentPaddingXUsingComponentGap,
+    typography.buttonLabel
+  );
+  const Element = href && !as ? "a" : as;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid,
+      type: Element === "button" ? "button" : void 0,
+      className: buttonClasses
+    }, props), {
+      onClick: props.onClick,
+      disabled,
+      href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
+      children: [
+        leftIcon && leftIcon,
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
+        rightIcon && rightIcon
+      ]
+    })
+  );
+};
+Button.displayName = "Button";
+
+// src/components/NestedMenu.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function NestedMenu(props) {
   var _a;
   const { onMenuClick, currentMenu, testid } = props;
@@ -619,13 +758,13 @@ function NestedMenu(props) {
       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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       MenuOption,
       {
         testid: testid ? `${testid}-back` : void 0,
         variant: "normal",
-        before: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        before: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Icon,
           {
             name: "chevron_left",
@@ -638,10 +777,10 @@ function NestedMenu(props) {
           return handleMenuClick((_a2 = currentMenu.previousMenu) != null ? _a2 : null, true);
         },
         selected: selectedIndex === -1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { color: "text-action-normal", children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { color: "text-action-normal", children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       MenuOption,
       {
         variant: "action",
@@ -651,13 +790,26 @@ function NestedMenu(props) {
     ),
     (currentMenu.subEntries || []).map((item, idx) => {
       var _a2;
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         MenuOption,
         {
           testid: testid ? `${testid}-${item.label}` : void 0,
           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 }),
+          after: ((_a2 = item.subEntries) == null ? void 0 : _a2.length) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onMenuClick(item, "subEntry");
+              },
+              className: "!p-0 w-full justify-end",
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron_right", className: "icon", size: 24 })
+            }
+          ),
           selected: selectedIndex === idx,
           children: item.label
         },

package/dist/components/NestedMenu.js

@@ -15,6 +15,9 @@ import "../chunk-ZSETMD4A.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
+import {
+  Button
+} from "../chunk-LPY6PMAY.js";
 import "../chunk-IXR65MOU.js";
 import {
   __spreadValues
@@ -106,7 +109,20 @@ function NestedMenu(props) {
           testid: testid ? `${testid}-${item.label}` : void 0,
           variant: "normal",
           onClick: () => handleMenuClick(item),
-          after: ((_a2 = item.subEntries) == null ? void 0 : _a2.length) && /* @__PURE__ */ jsx(Icon, { name: "chevron_right", className: "icon", size: 24 }),
+          after: ((_a2 = item.subEntries) == null ? void 0 : _a2.length) && /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onMenuClick(item, "subEntry");
+              },
+              className: "!p-0 w-full justify-end",
+              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", className: "icon", size: 24 })
+            }
+          ),
           selected: selectedIndex === idx,
           children: item.label
         },

package/package.json

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

package/src/components/NestedMenu.tsx

@@ -5,6 +5,7 @@ import { Icon } from "./Icon";
 import { MenuOption } from "./MenuOption";
 import { useKeydown } from "../hooks";
 import { Label } from "./Label";
+import { Button } from "./Button";
 
 export type NestedMenuEntry = {
   id: string; // Unique identifier for the nested menu entry
@@ -19,7 +20,10 @@ export type NestedMenuEntry = {
 
 export type NestedMenuProps = {
   currentMenu: NestedMenuEntry; // Current menu entry, if any
-  onMenuClick: (entry: NestedMenuEntry | null) => void; // Callback when a menu item is clicked. tailing
+  onMenuClick: (
+    entry: NestedMenuEntry | null,
+    action?: "url" | "onClick" | "subEntry",
+  ) => void; // Callback when a menu item is clicked. tailing
   testid?: string;
 };
 
@@ -102,7 +106,19 @@ export function NestedMenu(props: NestedMenuProps) {
           onClick={() => handleMenuClick(item)}
           after={
             item.subEntries?.length && (
-              <Icon name="chevron_right" className="icon" size={24} />
+              <Button
+                iconOnly
+                variant="tertiary"
+                onClick={(e: React.MouseEvent) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onMenuClick(item, "subEntry");
+                }}
+                className="!p-0 w-full justify-end"
+                leftIcon={
+                  <Icon name="chevron_right" className="icon" size={24} />
+                }
+              />
             )
           }
           selected={selectedIndex === idx}