@dbcdk/react-components 0.0.206 → 0.0.207

package/dist/client.d.ts

@@ -177,3 +177,4 @@ export { FileUpload } from './components/forms/file-upload/FileUpload';
 export type { FileUploadProps, FileUploadHandle } from './components/forms/file-upload/FileUpload';
 export { HighlightedText } from './components/highlighted-text/HighlightedText';
 export type { HighlightedTextProps } from './components/highlighted-text/HighlightedText';
+export type { MenuActionItem, MenuButtonItem, MenuLinkItem } from './components/menu/Menu.types';

package/dist/components/lightbox/Lightbox.cjs

@@ -9,6 +9,7 @@ var Popover = require('../../components/popover/Popover');
 var styles = require('./Lightbox.module.css');
 var Button = require('../button/Button');
 var Menu = require('../menu/Menu');
+var MenuAction = require('../menu/MenuAction');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -262,28 +263,7 @@ function ThumbnailContextMenu({
           }
         );
       },
-      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-        Menu.Menu.Item,
-        {
-          active: menuItem.active,
-          selected: menuItem.selected,
-          disabled: menuItem.disabled,
-          variant: menuItem.variant,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                e.stopPropagation();
-                menuItem.onClick();
-                close();
-              },
-              children: menuItem.label
-            }
-          )
-        },
-        menuItemIndex
-      )) })
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsxRuntime.jsx(MenuAction.MenuAction, { item: menuItem, onActivate: close }, menuItemIndex)) })
     }
   );
 }

package/dist/components/lightbox/Lightbox.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import { type MetaItem } from '../../components/meta-bar/MetaBar';
+import type { MenuActionItem } from '../menu/Menu.types';
 export type LightboxItem = {
     thumbnail: ReactNode;
     preview?: ReactNode;
@@ -10,14 +11,7 @@ export type LightboxItem = {
     height?: number;
     metaAddition?: MetaItem[];
 };
-export type LightboxContextMenuItem = {
-    label: ReactNode;
-    onClick: () => void;
-    active?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-    variant?: 'default' | 'danger';
-};
+export type LightboxContextMenuItem = MenuActionItem;
 export interface LightboxProps {
     items: LightboxItem[];
     title?: string;

package/dist/components/lightbox/Lightbox.js

@@ -7,6 +7,7 @@ import { Popover } from '../../components/popover/Popover';
 import styles from './Lightbox.module.css';
 import { Button } from '../button/Button';
 import { Menu } from '../menu/Menu';
+import { MenuAction } from '../menu/MenuAction';
 
 function extFromMime(mime) {
   var _a;
@@ -256,28 +257,7 @@ function ThumbnailContextMenu({
           }
         );
       },
-      children: (close) => /* @__PURE__ */ jsx(Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsx(
-        Menu.Item,
-        {
-          active: menuItem.active,
-          selected: menuItem.selected,
-          disabled: menuItem.disabled,
-          variant: menuItem.variant,
-          children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                e.stopPropagation();
-                menuItem.onClick();
-                close();
-              },
-              children: menuItem.label
-            }
-          )
-        },
-        menuItemIndex
-      )) })
+      children: (close) => /* @__PURE__ */ jsx(Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsx(MenuAction, { item: menuItem, onActivate: close }, menuItemIndex)) })
     }
   );
 }

package/dist/components/menu/Menu.cjs

@@ -31,7 +31,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
+const INTERACTIVE_SELECTOR = 'a[href]:not([aria-disabled="true"]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
 function getMenuItems(el) {
   return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
 }

package/dist/components/menu/Menu.js

@@ -6,7 +6,7 @@ import { Checkbox } from '../forms/checkbox/Checkbox';
 import { RadioButton } from '../forms/radio-buttons/RadioButton';
 import { Switch } from '../forms/switch/Switch';
 
-const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
+const INTERACTIVE_SELECTOR = 'a[href]:not([aria-disabled="true"]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
 function getMenuItems(el) {
   return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
 }

package/dist/components/menu/Menu.types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/components/menu/Menu.types.d.ts

@@ -0,0 +1,19 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+type MenuItemBase = {
+    label: ReactNode;
+    icon?: ReactNode;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
+export type MenuButtonItem = MenuItemBase & {
+    href?: undefined;
+    onClick: () => void;
+};
+export type MenuLinkItem = MenuItemBase & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'download' | 'target' | 'rel'> & {
+    href: string;
+    onClick?: () => void;
+};
+export type MenuActionItem = MenuButtonItem | MenuLinkItem;
+export {};

package/dist/components/menu/Menu.types.js

@@ -0,0 +1 @@
+

package/dist/components/menu/MenuAction.cjs

@@ -0,0 +1,61 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Menu = require('./Menu');
+
+function MenuAction({
+  item,
+  onActivate,
+  children
+}) {
+  var _a;
+  function handleClick(event) {
+    var _a2;
+    event.stopPropagation();
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    (_a2 = item.onClick) == null ? void 0 : _a2.call(item);
+    onActivate();
+  }
+  function handleKeyDown(event) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.stopPropagation();
+    if (item.href !== void 0) {
+      if (event.key === "Enter" && (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey))
+        return;
+      event.preventDefault();
+      if (!item.disabled && !event.repeat) event.currentTarget.click();
+    }
+  }
+  const content = children != null ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    item.icon,
+    item.label
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Menu.Menu.Item,
+    {
+      active: item.active,
+      selected: item.selected,
+      disabled: item.disabled,
+      variant: item.variant,
+      children: item.href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: item.disabled ? void 0 : item.href,
+          download: item.download,
+          target: item.target,
+          rel: (_a = item.rel) != null ? _a : item.target === "_blank" ? "noopener noreferrer" : void 0,
+          tabIndex: item.disabled ? -1 : 0,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          children: content
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleClick, onKeyDown: handleKeyDown, children: content })
+    }
+  );
+}
+
+exports.MenuAction = MenuAction;

package/dist/components/menu/MenuAction.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { MenuActionItem } from './Menu.types';
+export declare function MenuAction({ item, onActivate, children, }: {
+    item: MenuActionItem;
+    onActivate: () => void;
+    children?: ReactNode;
+}): ReactElement;

package/dist/components/menu/MenuAction.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Menu } from './Menu';
+
+function MenuAction({
+  item,
+  onActivate,
+  children
+}) {
+  var _a;
+  function handleClick(event) {
+    var _a2;
+    event.stopPropagation();
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    (_a2 = item.onClick) == null ? void 0 : _a2.call(item);
+    onActivate();
+  }
+  function handleKeyDown(event) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.stopPropagation();
+    if (item.href !== void 0) {
+      if (event.key === "Enter" && (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey))
+        return;
+      event.preventDefault();
+      if (!item.disabled && !event.repeat) event.currentTarget.click();
+    }
+  }
+  const content = children != null ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon,
+    item.label
+  ] });
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      active: item.active,
+      selected: item.selected,
+      disabled: item.disabled,
+      variant: item.variant,
+      children: item.href !== void 0 ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.disabled ? void 0 : item.href,
+          download: item.download,
+          target: item.target,
+          rel: (_a = item.rel) != null ? _a : item.target === "_blank" ? "noopener noreferrer" : void 0,
+          tabIndex: item.disabled ? -1 : 0,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, onKeyDown: handleKeyDown, children: content })
+    }
+  );
+}
+
+export { MenuAction };

package/dist/components/table/Table.types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { MenuButtonItem, MenuLinkItem } from '../../components/menu/Menu.types';
 import type { PageChangeEvent } from '../../components/pagination/Pagination';
 import type { Severity } from '../../constants/severity.types';
 export type ViewMode = 'compact' | 'wrapped';
@@ -69,21 +70,17 @@ export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
-export type TableContextMenuActionItem = {
+export type TableContextMenuActionItem = MenuButtonItem & {
+    type?: 'item';
+};
+export type TableContextMenuLinkItem = MenuLinkItem & {
     type?: 'item';
-    label: ReactNode;
-    icon?: ReactNode;
-    onClick: () => void;
-    active?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-    variant?: 'default' | 'danger';
 };
 export type TableContextMenuHeaderItem = {
     type: 'header';
     label: ReactNode;
 };
-export type TableContextMenuItem = TableContextMenuActionItem | TableContextMenuHeaderItem;
+export type TableContextMenuItem = TableContextMenuActionItem | TableContextMenuLinkItem | TableContextMenuHeaderItem;
 export type StickyHeader = false | 'app-header' | number;
 export type TableVariant = 'primary' | 'embedded';
 export type SortDirection = 'asc' | 'desc' | null;

package/dist/components/table/components/TableRow.cjs

@@ -9,6 +9,7 @@ var Popover = require('../../../components/popover/Popover');
 var severity = require('../../../constants/severity');
 var Button = require('../../button/Button');
 var Menu = require('../../menu/Menu');
+var MenuAction = require('../../menu/MenuAction');
 var useTableRowInteractions = require('../hooks/useTableRowInteractions');
 var table_classes = require('../table.classes');
 var styles = require('../Table.module.css');
@@ -252,32 +253,10 @@ function RowActions({
             );
           },
           children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: menuItems.map(
-            (item, index) => item.type === "header" ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsxRuntime.jsx(
-              Menu.Menu.Item,
-              {
-                active: item.active,
-                selected: item.selected,
-                disabled: item.disabled,
-                variant: item.variant,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-row-context-menu": "true",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      item.onClick();
-                      close();
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.contextMenuItemLabel, children: [
-                      item.icon,
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.contextMenuItemText, children: item.label })
-                    ] })
-                  }
-                )
-              },
-              index
-            )
+            (item, index) => item.type === "header" ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsxRuntime.jsx(MenuAction.MenuAction, { item, onActivate: close, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.contextMenuItemLabel, children: [
+              item.icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.contextMenuItemText, children: item.label })
+            ] }) }, index)
           ) })
         }
       ) : null

package/dist/components/table/components/TableRow.js

@@ -7,6 +7,7 @@ import { Popover } from '../../../components/popover/Popover';
 import { SeverityBgColor } from '../../../constants/severity';
 import { Button } from '../../button/Button';
 import { Menu } from '../../menu/Menu';
+import { MenuAction } from '../../menu/MenuAction';
 import { useTableRowInteractions } from '../hooks/useTableRowInteractions';
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
@@ -246,32 +247,10 @@ function RowActions({
             );
           },
           children: (close) => /* @__PURE__ */ jsx(Menu, { children: menuItems.map(
-            (item, index) => item.type === "header" ? /* @__PURE__ */ jsx(Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsx(
-              Menu.Item,
-              {
-                active: item.active,
-                selected: item.selected,
-                disabled: item.disabled,
-                variant: item.variant,
-                children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-row-context-menu": "true",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      item.onClick();
-                      close();
-                    },
-                    children: /* @__PURE__ */ jsxs("span", { className: styles.contextMenuItemLabel, children: [
-                      item.icon,
-                      /* @__PURE__ */ jsx("span", { className: styles.contextMenuItemText, children: item.label })
-                    ] })
-                  }
-                )
-              },
-              index
-            )
+            (item, index) => item.type === "header" ? /* @__PURE__ */ jsx(Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsx(MenuAction, { item, onActivate: close, children: /* @__PURE__ */ jsxs("span", { className: styles.contextMenuItemLabel, children: [
+              item.icon,
+              /* @__PURE__ */ jsx("span", { className: styles.contextMenuItemText, children: item.label })
+            ] }) }, index)
           ) })
         }
       ) : null

package/dist/index.d.ts

@@ -51,3 +51,4 @@ export * from './components/tree-view/TreeView';
 export * from './components/split-button/SplitButton';
 export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';
+export type { MenuActionItem, MenuButtonItem, MenuLinkItem } from './components/menu/Menu.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.206",
+  "version": "0.0.207",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",