@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/menu/Menu.js

@@ -0,0 +1,430 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+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 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();
+      }
+      onKeyDown == null ? void 0 : onKeyDown(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: (node) => {
+          internalRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        role: "menu",
+        "data-itemrole": itemRole,
+        className: [styles.container, gap ? styles.gap : "", className].filter(Boolean).join(" "),
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuBase.displayName = "Menu";
+const isInteractiveEl = (el) => React.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
+function applyMenuItemPropsToElement(child, opts) {
+  var _a, _b, _c, _d;
+  const {
+    active,
+    selected,
+    disabled,
+    role,
+    tabIndex = 0,
+    className,
+    endAdornment,
+    endAdornmentAriaHidden = true
+  } = opts;
+  const childClass = [styles.item, active ? styles.active : "", selected ? styles.selected : ""].filter(Boolean).join(" ");
+  const endAdornmentProps = endAdornment ? {
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      child.props.children,
+      /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+    ] })
+  } : {};
+  const nextImmediate = React.cloneElement(child, {
+    className: [child.props.className, styles.interactiveChild, className].filter(Boolean).join(" ")
+  });
+  if (typeof child.type === "string" && (child.type === "a" || child.type === "button")) {
+    return React.cloneElement(child, {
+      role: (_a = child.props.role) != null ? _a : role,
+      tabIndex: (_b = child.props.tabIndex) != null ? _b : tabIndex,
+      "aria-selected": selected || void 0,
+      "aria-disabled": disabled || void 0,
+      className: [child.props.className, styles.interactive, childClass, className].filter(Boolean).join(" "),
+      ...child.type === "button" ? { disabled } : {},
+      ...endAdornmentProps
+    });
+  }
+  return React.cloneElement(nextImmediate, {
+    role: (_c = nextImmediate.props.role) != null ? _c : role,
+    tabIndex: (_d = nextImmediate.props.tabIndex) != null ? _d : tabIndex,
+    "aria-selected": selected || void 0,
+    "aria-disabled": disabled || void 0,
+    className: [nextImmediate.props.className, styles.interactive, childClass].filter(Boolean).join(" "),
+    disabled,
+    ...endAdornmentProps
+  });
+}
+const MenuItem = React.forwardRef(
+  ({
+    children,
+    active,
+    selected,
+    disabled,
+    className,
+    itemRole,
+    variant,
+    endAdornment,
+    endAdornmentAriaHidden = true,
+    ...liProps
+  }, ref) => {
+    const resolvedRole = itemRole != null ? itemRole : "menuitem";
+    const isBordered = variant === "bordered";
+    const itemClassName = variant === "danger" ? styles.itemDanger : void 0;
+    const rowClass = [styles.row, isBordered ? styles.rowBordered : "", className].filter(Boolean).join(" ");
+    if (isInteractiveEl(children)) {
+      const child = children;
+      return /* @__PURE__ */ jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: applyMenuItemPropsToElement(child, {
+        active,
+        selected,
+        disabled,
+        role: resolvedRole,
+        className: itemClassName,
+        endAdornment,
+        endAdornmentAriaHidden
+      }) });
+    }
+    return /* @__PURE__ */ jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        role: resolvedRole,
+        tabIndex: 0,
+        "aria-selected": selected || void 0,
+        "aria-disabled": disabled || void 0,
+        className: [
+          styles.interactive,
+          styles.item,
+          itemClassName,
+          active ? styles.active : "",
+          selected ? styles.selected : ""
+        ].filter(Boolean).join(" "),
+        type: "button",
+        disabled,
+        children: [
+          children,
+          endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+        ]
+      }
+    ) });
+  }
+);
+MenuItem.displayName = "Menu.Item";
+const MenuCheckItem = React.forwardRef(
+  ({
+    label,
+    checked,
+    active,
+    disabled,
+    interactiveRef,
+    interactiveProps,
+    onCheckedChange,
+    endAdornment,
+    endAdornmentAriaHidden,
+    className,
+    ...liProps
+  }, ref) => {
+    const isSelected = checked;
+    const interactiveClass = [
+      styles.interactiveChild,
+      styles.item,
+      active ? styles.active : "",
+      isSelected ? styles.selected : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: interactiveRef,
+            role: interactiveProps == null ? void 0 : interactiveProps.role,
+            tabIndex: -1,
+            "aria-selected": isSelected || void 0,
+            "aria-disabled": disabled || void 0,
+            className: interactiveClass,
+            ...interactiveProps,
+            onClick: (event) => {
+              var _a;
+              (_a = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a.call(interactiveProps, event);
+              if (event.defaultPrevented || disabled) return;
+              const target = event.target;
+              if (target instanceof Element && target.closest("button") !== null) {
+                return;
+              }
+              onCheckedChange == null ? void 0 : onCheckedChange(!checked);
+            },
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                variant: "primary",
+                size: "sm",
+                noContainer: true,
+                checked,
+                disabled,
+                labelAs: "span",
+                label,
+                endAdornment,
+                endAdornmentAriaHidden,
+                onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+MenuCheckItem.displayName = "Menu.CheckItem";
+const MenuRadioItem = React.forwardRef(
+  ({
+    name,
+    value,
+    checked,
+    active,
+    disabled,
+    label,
+    interactiveRef,
+    interactiveProps,
+    onValueChange,
+    endAdornment,
+    endAdornmentAriaHidden,
+    className,
+    ...liProps
+  }, ref) => {
+    var _a, _b;
+    const interactiveClass = [
+      styles.interactiveChild,
+      styles.item,
+      active ? styles.active : "",
+      checked ? styles.selected : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: interactiveRef,
+            role: (_a = interactiveProps == null ? void 0 : interactiveProps.role) != null ? _a : "menuitemradio",
+            tabIndex: (_b = interactiveProps == null ? void 0 : interactiveProps.tabIndex) != null ? _b : 0,
+            "aria-checked": checked || void 0,
+            "aria-selected": checked || void 0,
+            "aria-disabled": disabled || void 0,
+            className: interactiveClass,
+            ...interactiveProps,
+            onClick: (event) => {
+              var _a2, _b2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented) return;
+              if (disabled) return;
+              const target = event.target;
+              if ((_b2 = target.closest("label")) != null ? _b2 : target.closest("input")) return;
+              onValueChange == null ? void 0 : onValueChange(value);
+            },
+            onKeyDown: (event) => {
+              var _a2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onKeyDown) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented || disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onValueChange == null ? void 0 : onValueChange(value);
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              RadioButton,
+              {
+                noContainer: true,
+                name,
+                size: "sm",
+                value,
+                checked,
+                disabled,
+                label,
+                endAdornment,
+                endAdornmentAriaHidden,
+                onChange: (v, _e) => onValueChange == null ? void 0 : onValueChange(v)
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+MenuRadioItem.displayName = "Menu.RadioItem";
+const MenuSwitchItem = React.forwardRef(
+  ({
+    label,
+    checked,
+    active,
+    disabled,
+    interactiveRef,
+    interactiveProps,
+    onCheckedChange,
+    endAdornment,
+    endAdornmentAriaHidden,
+    className,
+    ...liProps
+  }, ref) => {
+    const isSelected = checked;
+    const interactiveClass = [
+      styles.interactiveChild,
+      styles.item,
+      active ? styles.active : "",
+      isSelected ? styles.selected : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: interactiveRef,
+            role: interactiveProps == null ? void 0 : interactiveProps.role,
+            tabIndex: -1,
+            "aria-selected": isSelected || void 0,
+            "aria-disabled": disabled || void 0,
+            className: interactiveClass,
+            ...interactiveProps,
+            onClick: (event) => {
+              var _a;
+              (_a = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a.call(interactiveProps, event);
+              if (event.defaultPrevented || disabled) return;
+              const target = event.target;
+              if (target instanceof Element && target.closest("button") !== null) {
+                return;
+              }
+              onCheckedChange == null ? void 0 : onCheckedChange(!checked);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+              endAdornment && /* @__PURE__ */ jsx("span", { className: styles.endAdornment, "aria-hidden": endAdornmentAriaHidden != null ? endAdornmentAriaHidden : true, children: endAdornment }),
+              /* @__PURE__ */ jsx("span", { className: styles.switchControl, children: /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  size: "sm",
+                  noContainer: true,
+                  checked,
+                  disabled,
+                  onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MenuSwitchItem.displayName = "Menu.SwitchItem";
+const MenuLabel = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: [styles.label, className].filter(Boolean).join(" "), ...props })
+);
+MenuLabel.displayName = "Menu.Label";
+const MenuSeparator = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      role: "separator",
+      className: [styles.separator, className].filter(Boolean).join(" "),
+      ...props
+    }
+  )
+);
+MenuSeparator.displayName = "Menu.Separator";
+const MenuHeader = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: [styles.header, className].filter(Boolean).join(" "),
+      ...props,
+      children
+    }
+  )
+);
+MenuHeader.displayName = "Menu.Header";
+const MenuDescription = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      className: [styles.description, className].filter(Boolean).join(" "),
+      ...props,
+      children
+    }
+  )
+);
+MenuDescription.displayName = "Menu.Description";
+const Menu = Object.assign(MenuBase, {
+  Item: MenuItem,
+  CheckItem: MenuCheckItem,
+  RadioItem: MenuRadioItem,
+  SwitchItem: MenuSwitchItem,
+  Label: MenuLabel,
+  Separator: MenuSeparator,
+  Header: MenuHeader,
+  Description: MenuDescription
+});
+
+export { Menu };

package/dist/components/menu/Menu.module.css

@@ -0,0 +1,286 @@
+.container {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: block;
+}
+
+/* Applied to actual interactive elements (button/a/custom that forwards className) */
+.interactive {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--spacing-xs);
+  inline-size: 100%;
+  text-align: start;
+  text-decoration: none;
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-md);
+  margin-block: var(--spacing-2xs);
+  min-block-size: var(--component-size-sm);
+  background: transparent;
+  border: none;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-fg-default);
+  cursor: pointer;
+  border-radius: var(--border-radius-md);
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+}
+
+/* Default case: applies wrap-safety to whichever element ends up last,
+   e.g. a plain label with no `endAdornment` prop involved — covers most
+   Menu.Item usage as-is. Excluded once .endAdornment is present (it's then
+   always the true last child) — wrap the label in <Menu.Label> in that case,
+   since it's no longer last and needs the wrap styling explicitly. */
+.interactive > :last-child:not(.endAdornment) {
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* Explicit label slot (use <Menu.Label>) so wrap styling doesn't depend on
+   the label being the last child — needed once trailing content (the
+   `endAdornment` prop) is rendered after it. */
+.label {
+  min-width: 0;
+  flex: 1 1 auto;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* Trailing content rendered via the `endAdornment` prop (e.g. a status
+   dot/badge). Centered on its own regardless of the row's flex-start
+   alignment, since it isn't tied to the first text line the way a leading
+   icon is. */
+.endAdornment {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  flex: 0 0 auto;
+}
+
+/* Wraps a bare <Switch noContainer> in Menu.SwitchItem so it docks at the
+   end of the row (label/endAdornment are rendered by Menu, not Switch).
+   Shrink-proof: Switch's own `.container` still matches the generic
+   `.row :global(.container)` full-width rule below, but that now resolves
+   against this wrapper's own content width, not the whole row. */
+.switchControl {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+/*
+  Applied to the immediate child of <li> even if it's NOT an interactive element (e.g. a <div>)
+  so that menu row styling still works for components that render a wrapper.
+*/
+.interactiveChild {
+  display: block;
+  inline-size: 100%;
+  border-radius: var(--border-radius-md);
+}
+
+/* NEW: make wrapper-children (Checkbox/Radio) look/space like menu rows */
+.row > .interactiveChild {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-md);
+  margin-block: var(--spacing-2xs);
+  min-block-size: var(--component-size-sm);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+}
+
+/* NEW: add consistent gap between control and label inside Checkbox/Radio
+   Both components use a root element with className={styles.container}.
+   Because they're CSS modules, we must target it with :global(.container). */
+.row :global(.container) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  inline-size: 100%;
+  cursor: pointer;
+}
+
+.row :global(.label) {
+  flex: 1 1 auto;
+  cursor: pointer;
+}
+
+.row :global(.label) * {
+  cursor: pointer;
+}
+
+/* Hover: support both cases (interactive element, or wrapper child) */
+.interactive:hover:not(.selected),
+.row:hover > .interactiveChild:not(.selected) {
+  background-color: var(--color-bg-toolbar-hover);
+}
+
+/* The row already conveys hover via the background color above, covering
+   the whole item consistently. Suppress RadioButton's own icon hover
+   border here — otherwise it only lights up when the pointer happens to
+   be over the icon/label/endAdornment rather than anywhere in the row.
+   RadioButton's hashed class names can't be targeted directly from this
+   module, so this relies on a CSS custom property that RadioButton's own
+   hover rule reads — custom properties inherit through the DOM regardless
+   of CSS-module class hashing. */
+.row:hover > .interactiveChild {
+  --radio-hover-border-color: var(--color-border-default);
+}
+
+/* Focus ring: support both cases */
+.interactive:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+/* If wrapper contains a focusable element, show ring when any child is focused */
+.row:focus-within > .interactiveChild {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+/* Keyboard active/current item */
+.active,
+.interactive.active,
+.row > .interactiveChild.active {
+  background-color: var(--color-bg-toolbar-hover);
+}
+
+/* Selected item */
+.selected,
+.interactive[aria-selected='true'],
+.row > .interactiveChild.selected,
+.row > .interactiveChild[aria-selected='true'] {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+.selected:hover,
+.interactive.selected:hover,
+.interactive[aria-selected='true']:hover,
+.row:hover > .interactiveChild.selected,
+.row:hover > .interactiveChild[aria-selected='true'],
+.active.selected,
+.interactive.active.selected,
+.interactive.active[aria-selected='true'],
+.row > .interactiveChild.active.selected,
+.row > .interactiveChild.active[aria-selected='true'] {
+  background-color: var(--color-bg-selected-hover);
+}
+
+/* Checked (legacy support; kept in case any interactive element still uses aria-checked) */
+.interactive[aria-checked='true'],
+.row > .interactiveChild[aria-checked='true'] {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+.itemDanger {
+  color: var(--color-status-error);
+}
+
+.itemDanger svg {
+  color: inherit;
+}
+
+/* Disabled: support both cases */
+.interactive[aria-disabled='true'],
+.interactive:disabled,
+.row > .interactiveChild[aria-disabled='true'] {
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Icons inside either interactive element or wrapper */
+.interactive svg,
+.interactiveChild svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  /* Vertically center the icon against the first text line when parent is flex-start */
+  margin-block: calc((var(--line-height-normal) * var(--font-size-sm) - var(--icon-size-sm)) / 2);
+  flex-shrink: 0;
+}
+
+/* Visual separator row (used by <Menu.Separator />) */
+.separator {
+  block-size: 1px;
+  margin-block: var(--spacing-xxs);
+  background: var(--color-border-subtle);
+  opacity: 0.8;
+  border-radius: 999px;
+}
+
+.header {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  line-height: var(--line-height-normal);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: default;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.header svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: inherit;
+}
+
+.description {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-md);
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: var(--line-height-normal);
+  text-transform: none;
+  letter-spacing: normal;
+  cursor: default;
+  user-select: text;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* Gap between items */
+.gap {
+  gap: var(--spacing-xs);
+}
+
+/* Bordered item variant */
+.rowBordered {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
+}
+
+/* Inside a bordered row, remove inner border-radius so hover bg fills the full area */
+.rowBordered .interactive,
+.rowBordered .interactiveChild {
+  border-radius: 0;
+}