@dbcdk/react-components 0.0.206 → 0.0.208

package/dist/client.cjs

@@ -8,6 +8,7 @@ var NavBar = require('./components/nav-bar/NavBar');
 var Avatar = require('./components/avatar/Avatar');
 var Popover = require('./components/popover/Popover');
 var Menu = require('./components/menu/Menu');
+var Listbox = require('./components/listbox/Listbox');
 var Icon = require('./components/icon/Icon');
 var UserDisplay = require('./components/user-display/UserDisplay');
 var Tabs = require('./components/tabs/Tabs');
@@ -24,6 +25,7 @@ var useTheme = require('./hooks/useTheme');
 var usePersistentState = require('./hooks/usePersistentState');
 var useTreeViewSettings = require('./hooks/useTreeViewSettings');
 var Chip = require('./components/chip/Chip');
+var StatusText = require('./components/status-text/StatusText');
 var Panel = require('./components/panel/Panel');
 var Card = require('./components/card/Card');
 var PrintFriendlyCard = require('./components/print-friendly/PrintFriendlyCard');
@@ -136,6 +138,10 @@ Object.defineProperty(exports, "Menu", {
   enumerable: true,
   get: function () { return Menu.Menu; }
 });
+Object.defineProperty(exports, "Listbox", {
+  enumerable: true,
+  get: function () { return Listbox.Listbox; }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function () { return Icon.Icon; }
@@ -208,6 +214,10 @@ Object.defineProperty(exports, "Chip", {
   enumerable: true,
   get: function () { return Chip.Chip; }
 });
+Object.defineProperty(exports, "StatusText", {
+  enumerable: true,
+  get: function () { return StatusText.StatusText; }
+});
 Object.defineProperty(exports, "Panel", {
   enumerable: true,
   get: function () { return Panel.Panel; }

package/dist/client.d.ts

@@ -11,6 +11,8 @@ export { Popover } from './components/popover/Popover';
 export type { PopoverProps, PopoverHandle } from './components/popover/Popover';
 export { Menu } from './components/menu/Menu';
 export type { MenuProps, MenuLabelProps, MenuSeparatorProps, MenuHeaderProps, MenuDescriptionProps, MenuItemProps, MenuCheckItemProps, MenuRadioItemProps, MenuSwitchItemProps, } from './components/menu/Menu';
+export { Listbox } from './components/listbox/Listbox';
+export type { ListboxOption, ListboxProps } from './components/listbox/Listbox';
 export { Icon, SeverityIcon } from './components/icon/Icon';
 export { UserDisplay } from './components/user-display/UserDisplay';
 export { Tabs } from './components/tabs/Tabs';
@@ -40,6 +42,8 @@ export type { PersistentStateStorage, PersistentStateHydration, UsePersistentSta
 export { useTreeViewSettings, localStorageTreeViewSettingsStorage, } from './hooks/useTreeViewSettings';
 export type { TreeViewSettingsStorage, UseTreeViewSettingsOptions, UseTreeViewSettingsResult, } from './hooks/useTreeViewSettings';
 export { Chip } from './components/chip/Chip';
+export { StatusText } from './components/status-text/StatusText';
+export type { StatusTextProps } from './components/status-text/StatusText';
 export { Panel } from './components/panel/Panel';
 export { Card } from './components/card/Card';
 export type { CardProps } from './components/card/Card';
@@ -177,3 +181,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/client.js

@@ -6,6 +6,7 @@ export { NavBar } from './components/nav-bar/NavBar';
 export { Avatar } from './components/avatar/Avatar';
 export { Popover } from './components/popover/Popover';
 export { Menu } from './components/menu/Menu';
+export { Listbox } from './components/listbox/Listbox';
 export { Icon, SeverityIcon } from './components/icon/Icon';
 export { UserDisplay } from './components/user-display/UserDisplay';
 export { Tabs } from './components/tabs/Tabs';
@@ -22,6 +23,7 @@ export { useTheme } from './hooks/useTheme';
 export { usePersistentState } from './hooks/usePersistentState';
 export { localStorageTreeViewSettingsStorage, useTreeViewSettings } from './hooks/useTreeViewSettings';
 export { Chip } from './components/chip/Chip';
+export { StatusText } from './components/status-text/StatusText';
 export { Panel } from './components/panel/Panel';
 export { Card } from './components/card/Card';
 export { PrintFriendlyCard } from './components/print-friendly/PrintFriendlyCard';

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/listbox/Listbox.cjs

@@ -0,0 +1,153 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useRovingFocus = require('../../hooks/useRovingFocus');
+var styles = require('./Listbox.module.css');
+var menuStyles = require('../menu/Menu.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+var menuStyles__default = /*#__PURE__*/_interopDefault(menuStyles);
+
+function Listbox({
+  options,
+  selectedValues,
+  selectionMode = "single",
+  autoFocusValue,
+  onOptionSelect,
+  onActiveChange,
+  renderAction,
+  actionLabel,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rootProps
+}) {
+  const rootRef = react.useRef(null);
+  const optionRefs = react.useRef(/* @__PURE__ */ new Map());
+  const [activeValue, setActiveValue] = react.useState(() => {
+    var _a, _b;
+    const activeOption = (_b = (_a = options.find((option) => option.value === autoFocusValue && !option.disabled)) != null ? _a : options.find((option) => selectedValues.includes(option.value) && !option.disabled)) != null ? _b : options.find((option) => !option.disabled);
+    return activeOption == null ? void 0 : activeOption.value;
+  });
+  react.useEffect(() => {
+    var _a;
+    if (autoFocusValue !== void 0) (_a = optionRefs.current.get(autoFocusValue)) == null ? void 0 : _a.focus();
+  }, [autoFocusValue]);
+  const handleNavigate = react.useCallback(
+    (item) => {
+      var _a;
+      const value = (_a = options.find(
+        (option) => String(option.value) === item.dataset.listboxValue
+      )) == null ? void 0 : _a.value;
+      if (value === void 0) return;
+      setActiveValue(value);
+      onActiveChange == null ? void 0 : onActiveChange(value);
+    },
+    [onActiveChange, options]
+  );
+  const handleKeyDown = useRovingFocus.useRovingFocus({
+    containerRef: rootRef,
+    itemSelector: '[role="option"]:not([aria-disabled="true"])',
+    loop: true,
+    resolveCurrentItem: (focused, items) => {
+      var _a;
+      const value = (_a = focused.closest("[data-listbox-value]")) == null ? void 0 : _a.dataset.listboxValue;
+      return items.find((item) => item.dataset.listboxValue === value);
+    },
+    onNavigate: handleNavigate
+  });
+  const rowCount = options.length;
+  const rowStyle = rowCount ? `repeat(${rowCount}, auto)` : "none";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rootProps,
+      ref: rootRef,
+      className: [styles__default.default.root, className].filter(Boolean).join(" "),
+      style: { ...style, gridTemplateRows: rowStyle },
+      onKeyDown: (event) => {
+        var _a;
+        handleKeyDown(event);
+        (_a = rootProps.onKeyDown) == null ? void 0 : _a.call(rootProps, event);
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.options,
+            role: "listbox",
+            "aria-label": ariaLabel,
+            "aria-multiselectable": selectionMode === "multiple" || void 0,
+            children: options.map((option) => {
+              const isSelected = selectedValues.includes(option.value);
+              const isActive = activeValue === option.value;
+              const value = String(option.value);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  ref: (element) => {
+                    if (element) optionRefs.current.set(option.value, element);
+                    else optionRefs.current.delete(option.value);
+                  },
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": option.disabled || void 0,
+                  tabIndex: !option.disabled && isActive ? 0 : -1,
+                  "data-listbox-value": value,
+                  className: [
+                    menuStyles__default.default.interactive,
+                    menuStyles__default.default.item,
+                    isSelected ? menuStyles__default.default.selected : "",
+                    isActive ? menuStyles__default.default.active : "",
+                    styles__default.default.option,
+                    option.status === "success" ? styles__default.default.optionSuccess : "",
+                    option.status === "info" ? styles__default.default.optionInfo : "",
+                    option.className
+                  ].filter(Boolean).join(" "),
+                  disabled: option.disabled,
+                  onFocus: () => setActiveValue(option.value),
+                  onClick: () => {
+                    setActiveValue(option.value);
+                    onOptionSelect(option.value);
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.optionContent, children: [
+                    option.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "aria-hidden": "true", children: option.icon }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.text, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: option.label }),
+                      option.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.description, children: option.description }) : null
+                    ] })
+                  ] })
+                },
+                value
+              );
+            })
+          }
+        ),
+        renderAction ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.actions,
+            role: "group",
+            "aria-label": actionLabel != null ? actionLabel : `${ariaLabel} actions`,
+            children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: styles__default.default.actionRow,
+                "data-listbox-value": String(option.value),
+                children: renderAction(option, selectedValues.includes(option.value))
+              },
+              String(option.value)
+            ))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+exports.Listbox = Listbox;

package/dist/components/listbox/Listbox.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ListboxOption<T extends string | number = string> = {
+    value: T;
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    status?: 'info' | 'success';
+    disabled?: boolean;
+};
+export type ListboxProps<T extends string | number = string> = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect' | 'aria-label'> & {
+    'aria-label': string;
+    actionLabel?: string;
+    options: readonly ListboxOption<T>[];
+    selectedValues: readonly T[];
+    selectionMode?: 'single' | 'multiple';
+    autoFocusValue?: T;
+    onOptionSelect: (value: T) => void;
+    onActiveChange?: (value: T) => void;
+    renderAction?: (option: ListboxOption<T>, selected: boolean) => ReactNode;
+};
+export declare function Listbox<T extends string | number = string>({ options, selectedValues, selectionMode, autoFocusValue, onOptionSelect, onActiveChange, renderAction, actionLabel, className, style, 'aria-label': ariaLabel, ...rootProps }: Readonly<ListboxProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/listbox/Listbox.js

@@ -0,0 +1,146 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRovingFocus } from '../../hooks/useRovingFocus';
+import styles from './Listbox.module.css';
+import menuStyles from '../menu/Menu.module.css';
+
+function Listbox({
+  options,
+  selectedValues,
+  selectionMode = "single",
+  autoFocusValue,
+  onOptionSelect,
+  onActiveChange,
+  renderAction,
+  actionLabel,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rootProps
+}) {
+  const rootRef = useRef(null);
+  const optionRefs = useRef(/* @__PURE__ */ new Map());
+  const [activeValue, setActiveValue] = useState(() => {
+    var _a, _b;
+    const activeOption = (_b = (_a = options.find((option) => option.value === autoFocusValue && !option.disabled)) != null ? _a : options.find((option) => selectedValues.includes(option.value) && !option.disabled)) != null ? _b : options.find((option) => !option.disabled);
+    return activeOption == null ? void 0 : activeOption.value;
+  });
+  useEffect(() => {
+    var _a;
+    if (autoFocusValue !== void 0) (_a = optionRefs.current.get(autoFocusValue)) == null ? void 0 : _a.focus();
+  }, [autoFocusValue]);
+  const handleNavigate = useCallback(
+    (item) => {
+      var _a;
+      const value = (_a = options.find(
+        (option) => String(option.value) === item.dataset.listboxValue
+      )) == null ? void 0 : _a.value;
+      if (value === void 0) return;
+      setActiveValue(value);
+      onActiveChange == null ? void 0 : onActiveChange(value);
+    },
+    [onActiveChange, options]
+  );
+  const handleKeyDown = useRovingFocus({
+    containerRef: rootRef,
+    itemSelector: '[role="option"]:not([aria-disabled="true"])',
+    loop: true,
+    resolveCurrentItem: (focused, items) => {
+      var _a;
+      const value = (_a = focused.closest("[data-listbox-value]")) == null ? void 0 : _a.dataset.listboxValue;
+      return items.find((item) => item.dataset.listboxValue === value);
+    },
+    onNavigate: handleNavigate
+  });
+  const rowCount = options.length;
+  const rowStyle = rowCount ? `repeat(${rowCount}, auto)` : "none";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rootProps,
+      ref: rootRef,
+      className: [styles.root, className].filter(Boolean).join(" "),
+      style: { ...style, gridTemplateRows: rowStyle },
+      onKeyDown: (event) => {
+        var _a;
+        handleKeyDown(event);
+        (_a = rootProps.onKeyDown) == null ? void 0 : _a.call(rootProps, event);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.options,
+            role: "listbox",
+            "aria-label": ariaLabel,
+            "aria-multiselectable": selectionMode === "multiple" || void 0,
+            children: options.map((option) => {
+              const isSelected = selectedValues.includes(option.value);
+              const isActive = activeValue === option.value;
+              const value = String(option.value);
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: (element) => {
+                    if (element) optionRefs.current.set(option.value, element);
+                    else optionRefs.current.delete(option.value);
+                  },
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": option.disabled || void 0,
+                  tabIndex: !option.disabled && isActive ? 0 : -1,
+                  "data-listbox-value": value,
+                  className: [
+                    menuStyles.interactive,
+                    menuStyles.item,
+                    isSelected ? menuStyles.selected : "",
+                    isActive ? menuStyles.active : "",
+                    styles.option,
+                    option.status === "success" ? styles.optionSuccess : "",
+                    option.status === "info" ? styles.optionInfo : "",
+                    option.className
+                  ].filter(Boolean).join(" "),
+                  disabled: option.disabled,
+                  onFocus: () => setActiveValue(option.value),
+                  onClick: () => {
+                    setActiveValue(option.value);
+                    onOptionSelect(option.value);
+                  },
+                  children: /* @__PURE__ */ jsxs("span", { className: styles.optionContent, children: [
+                    option.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: option.icon }) : null,
+                    /* @__PURE__ */ jsxs("span", { className: styles.text, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles.label, children: option.label }),
+                      option.description ? /* @__PURE__ */ jsx("span", { className: styles.description, children: option.description }) : null
+                    ] })
+                  ] })
+                },
+                value
+              );
+            })
+          }
+        ),
+        renderAction ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.actions,
+            role: "group",
+            "aria-label": actionLabel != null ? actionLabel : `${ariaLabel} actions`,
+            children: options.map((option) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.actionRow,
+                "data-listbox-value": String(option.value),
+                children: renderAction(option, selectedValues.includes(option.value))
+              },
+              String(option.value)
+            ))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { Listbox };

package/dist/components/listbox/Listbox.module.css

@@ -0,0 +1,97 @@
+.root {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: var(--spacing-xxs);
+}
+
+.options,
+.actions {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: 1 / -1;
+}
+
+.options {
+  grid-column: 1;
+  min-width: 0;
+}
+
+.actions {
+  grid-column: 2;
+}
+
+.option {
+  align-items: center;
+  min-width: 0;
+}
+
+.optionContent {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  min-width: 0;
+}
+
+.icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-fg-muted);
+}
+
+.icon svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  margin: 0;
+}
+
+.text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.label,
+.description {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.description {
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-sm);
+}
+
+.option.optionSuccess[aria-selected='true'],
+.option.optionSuccess.active {
+  background: var(--color-status-success-bg);
+  color: var(--color-status-success-fg);
+  box-shadow: inset 0 0 0 1px var(--color-status-success-border);
+}
+
+.option.optionSuccess .icon,
+.option.optionSuccess .description {
+  color: var(--color-status-success-fg);
+}
+
+.option.optionInfo[aria-selected='true'],
+.option.optionInfo.active {
+  background: var(--color-status-info-bg);
+  color: var(--color-status-info-fg);
+  box-shadow: inset 0 0 0 1px var(--color-status-info-border);
+}
+
+.option.optionInfo .icon,
+.option.optionInfo .description {
+  color: var(--color-status-info-fg);
+}
+
+.actionRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline-start: var(--spacing-xxs);
+}

package/dist/components/menu/Menu.cjs

@@ -3,6 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var useRovingFocus = require('../../hooks/useRovingFocus');
 var styles = require('./Menu.module.css');
 var Checkbox = require('../forms/checkbox/Checkbox');
 var RadioButton = require('../forms/radio-buttons/RadioButton');
@@ -31,34 +32,16 @@ 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"])';
-function getMenuItems(el) {
-  return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
-}
 const MenuBase = React__namespace.forwardRef(
   ({ children, className, itemRole = "menuitem", gap, onKeyDown, ...props }, ref) => {
     const internalRef = React__namespace.useRef(null);
+    const handleRovingFocus = useRovingFocus.useRovingFocus({
+      containerRef: internalRef,
+      itemSelector: '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"])',
+      loop: true
+    });
     const handleKeyDown = (e) => {
-      const ul = internalRef.current;
-      if (!ul) return;
-      const items = getMenuItems(ul);
-      if (items.length === 0) return;
-      const focused = document.activeElement;
-      const currentIndex = items.indexOf(focused);
-      let nextIndex = null;
-      if (e.key === "ArrowDown") {
-        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-      } else if (e.key === "ArrowUp") {
-        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-      } else if (e.key === "Home") {
-        nextIndex = 0;
-      } else if (e.key === "End") {
-        nextIndex = items.length - 1;
-      }
-      if (nextIndex !== null) {
-        e.preventDefault();
-        items[nextIndex].focus();
-      }
+      handleRovingFocus(e);
       onKeyDown == null ? void 0 : onKeyDown(e);
     };
     return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/menu/Menu.js

@@ -1,39 +1,22 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
+import { useRovingFocus } from '../../hooks/useRovingFocus';
 import styles from './Menu.module.css';
 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"])';
-function getMenuItems(el) {
-  return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
-}
 const MenuBase = React.forwardRef(
   ({ children, className, itemRole = "menuitem", gap, onKeyDown, ...props }, ref) => {
     const internalRef = React.useRef(null);
+    const handleRovingFocus = useRovingFocus({
+      containerRef: internalRef,
+      itemSelector: '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"])',
+      loop: true
+    });
     const handleKeyDown = (e) => {
-      const ul = internalRef.current;
-      if (!ul) return;
-      const items = getMenuItems(ul);
-      if (items.length === 0) return;
-      const focused = document.activeElement;
-      const currentIndex = items.indexOf(focused);
-      let nextIndex = null;
-      if (e.key === "ArrowDown") {
-        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-      } else if (e.key === "ArrowUp") {
-        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-      } else if (e.key === "Home") {
-        nextIndex = 0;
-      } else if (e.key === "End") {
-        nextIndex = items.length - 1;
-      }
-      if (nextIndex !== null) {
-        e.preventDefault();
-        items[nextIndex].focus();
-      }
+      handleRovingFocus(e);
       onKeyDown == null ? void 0 : onKeyDown(e);
     };
     return /* @__PURE__ */ jsx(

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/status-text/StatusText.cjs

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./StatusText.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function StatusText({
+  children,
+  severity = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...props,
+      className: [styles__default.default.statusText, styles__default.default[severity], className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+
+exports.StatusText = StatusText;

package/dist/components/status-text/StatusText.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface StatusTextProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    severity?: Severity;
+}
+export declare function StatusText({ children, severity, className, ...props }: Readonly<StatusTextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/status-text/StatusText.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import styles from './StatusText.module.css';
+
+function StatusText({
+  children,
+  severity = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: [styles.statusText, styles[severity], className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+
+export { StatusText };

package/dist/components/status-text/StatusText.module.css

@@ -0,0 +1,41 @@
+.statusText {
+  background: var(--status-text-bg);
+  color: var(--status-text-fg);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.neutral {
+  --status-text-bg: var(--color-bg-surface-subtle);
+  --status-text-fg: var(--color-fg-default);
+}
+
+.brand {
+  --status-text-bg: color-mix(in srgb, var(--color-brand) 12%, var(--color-bg-surface));
+  --status-text-fg: var(--color-brand);
+}
+
+.accent {
+  --status-text-bg: var(--color-accent-bg-soft);
+  --status-text-fg: var(--color-accent-fg-soft);
+}
+
+.success {
+  --status-text-bg: var(--color-status-success-bg);
+  --status-text-fg: var(--color-status-success-fg);
+}
+
+.error {
+  --status-text-bg: var(--color-status-error-bg);
+  --status-text-fg: var(--color-status-error-fg);
+}
+
+.info {
+  --status-text-bg: var(--color-status-info-bg);
+  --status-text-fg: var(--color-status-info-fg);
+}
+
+.warning {
+  --status-text-bg: var(--color-status-warning-bg);
+  --status-text-fg: var(--color-status-warning-fg);
+}

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/hooks/useRovingFocus.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var react = require('react');
+
+function useRovingFocus({
+  containerRef,
+  itemSelector,
+  loop = false,
+  resolveCurrentItem,
+  onNavigate
+}) {
+  return react.useCallback(
+    (event) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const items = Array.from(container.querySelectorAll(itemSelector));
+      if (items.length === 0) return;
+      const focused = document.activeElement;
+      const currentItem = items.includes(focused) ? focused : resolveCurrentItem == null ? void 0 : resolveCurrentItem(focused, items);
+      const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+      let nextIndex = null;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex < 0 ? 0 : currentIndex + 1;
+        if (loop && nextIndex >= items.length) nextIndex = 0;
+        else if (nextIndex >= items.length) nextIndex = items.length - 1;
+      } else if (event.key === "ArrowUp") {
+        nextIndex = currentIndex < 0 ? items.length - 1 : currentIndex - 1;
+        if (loop && nextIndex < 0) nextIndex = items.length - 1;
+        else if (nextIndex < 0) nextIndex = 0;
+      } else if (event.key === "Home") {
+        nextIndex = 0;
+      } else if (event.key === "End") {
+        nextIndex = items.length - 1;
+      }
+      if (nextIndex === null) return;
+      event.preventDefault();
+      const nextItem = items[nextIndex];
+      nextItem.focus();
+      onNavigate == null ? void 0 : onNavigate(nextItem);
+    },
+    [containerRef, itemSelector, loop, onNavigate, resolveCurrentItem]
+  );
+}
+
+exports.useRovingFocus = useRovingFocus;

package/dist/hooks/useRovingFocus.d.ts

@@ -0,0 +1,10 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+type UseRovingFocusOptions<T extends HTMLElement> = {
+    containerRef: RefObject<T | null>;
+    itemSelector: string;
+    loop?: boolean;
+    resolveCurrentItem?: (focused: HTMLElement, items: HTMLElement[]) => HTMLElement | undefined;
+    onNavigate?: (item: HTMLElement) => void;
+};
+export declare function useRovingFocus<T extends HTMLElement>({ containerRef, itemSelector, loop, resolveCurrentItem, onNavigate, }: UseRovingFocusOptions<T>): (event: KeyboardEvent) => void;
+export {};

package/dist/hooks/useRovingFocus.js

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+
+function useRovingFocus({
+  containerRef,
+  itemSelector,
+  loop = false,
+  resolveCurrentItem,
+  onNavigate
+}) {
+  return useCallback(
+    (event) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const items = Array.from(container.querySelectorAll(itemSelector));
+      if (items.length === 0) return;
+      const focused = document.activeElement;
+      const currentItem = items.includes(focused) ? focused : resolveCurrentItem == null ? void 0 : resolveCurrentItem(focused, items);
+      const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+      let nextIndex = null;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex < 0 ? 0 : currentIndex + 1;
+        if (loop && nextIndex >= items.length) nextIndex = 0;
+        else if (nextIndex >= items.length) nextIndex = items.length - 1;
+      } else if (event.key === "ArrowUp") {
+        nextIndex = currentIndex < 0 ? items.length - 1 : currentIndex - 1;
+        if (loop && nextIndex < 0) nextIndex = items.length - 1;
+        else if (nextIndex < 0) nextIndex = 0;
+      } else if (event.key === "Home") {
+        nextIndex = 0;
+      } else if (event.key === "End") {
+        nextIndex = items.length - 1;
+      }
+      if (nextIndex === null) return;
+      event.preventDefault();
+      const nextItem = items[nextIndex];
+      nextItem.focus();
+      onNavigate == null ? void 0 : onNavigate(nextItem);
+    },
+    [containerRef, itemSelector, loop, onNavigate, resolveCurrentItem]
+  );
+}
+
+export { useRovingFocus };

package/dist/index.css

@@ -42,6 +42,7 @@
 @import './components/json-viewer/JsonViewer.module.css';
 @import './components/lightbox/Lightbox.module.css';
 @import './components/line-viewer/LineViewer.module.css';
+@import './components/listbox/Listbox.module.css';
 @import './components/media-card/MediaCard.module.css';
 @import './components/menu/Menu.module.css';
 @import './components/meta-bar/MetaBar.module.css';
@@ -71,6 +72,7 @@
 @import './components/split-pane/SplitPane.module.css';
 @import './components/stack/Stack.module.css';
 @import './components/state-page/StatePage.module.css';
+@import './components/status-text/StatusText.module.css';
 @import './components/table/Table.module.css';
 @import './components/table/components/column-resizer/ColumnResizer.module.css';
 @import './components/table/components/empty-state/EmptyState.module.css';

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.208",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",