@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/menu/Menu.cjs

@@ -0,0 +1,455 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles = require('./Menu.module.css');
+var Checkbox = require('../forms/checkbox/Checkbox');
+var RadioButton = require('../forms/radio-buttons/RadioButton');
+var Switch = require('../forms/switch/Switch');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+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 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__ */ jsxRuntime.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__default.default.container, gap ? styles__default.default.gap : "", className].filter(Boolean).join(" "),
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuBase.displayName = "Menu";
+const isInteractiveEl = (el) => React__namespace.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__default.default.item, active ? styles__default.default.active : "", selected ? styles__default.default.selected : ""].filter(Boolean).join(" ");
+  const endAdornmentProps = endAdornment ? {
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      child.props.children,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+    ] })
+  } : {};
+  const nextImmediate = React__namespace.cloneElement(child, {
+    className: [child.props.className, styles__default.default.interactiveChild, className].filter(Boolean).join(" ")
+  });
+  if (typeof child.type === "string" && (child.type === "a" || child.type === "button")) {
+    return React__namespace.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__default.default.interactive, childClass, className].filter(Boolean).join(" "),
+      ...child.type === "button" ? { disabled } : {},
+      ...endAdornmentProps
+    });
+  }
+  return React__namespace.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__default.default.interactive, childClass].filter(Boolean).join(" "),
+    disabled,
+    ...endAdornmentProps
+  });
+}
+const MenuItem = React__namespace.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__default.default.itemDanger : void 0;
+    const rowClass = [styles__default.default.row, isBordered ? styles__default.default.rowBordered : "", className].filter(Boolean).join(" ");
+    if (isInteractiveEl(children)) {
+      const child = children;
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: applyMenuItemPropsToElement(child, {
+        active,
+        selected,
+        disabled,
+        role: resolvedRole,
+        className: itemClassName,
+        endAdornment,
+        endAdornmentAriaHidden
+      }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        role: resolvedRole,
+        tabIndex: 0,
+        "aria-selected": selected || void 0,
+        "aria-disabled": disabled || void 0,
+        className: [
+          styles__default.default.interactive,
+          styles__default.default.item,
+          itemClassName,
+          active ? styles__default.default.active : "",
+          selected ? styles__default.default.selected : ""
+        ].filter(Boolean).join(" "),
+        type: "button",
+        disabled,
+        children: [
+          children,
+          endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden, children: endAdornment })
+        ]
+      }
+    ) });
+  }
+);
+MenuItem.displayName = "Menu.Item";
+const MenuCheckItem = React__namespace.forwardRef(
+  ({
+    label,
+    checked,
+    active,
+    disabled,
+    interactiveRef,
+    interactiveProps,
+    onCheckedChange,
+    endAdornment,
+    endAdornmentAriaHidden,
+    className,
+    ...liProps
+  }, ref) => {
+    const isSelected = checked;
+    const interactiveClass = [
+      styles__default.default.interactiveChild,
+      styles__default.default.item,
+      active ? styles__default.default.active : "",
+      isSelected ? styles__default.default.selected : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles__default.default.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              Checkbox.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__namespace.forwardRef(
+  ({
+    name,
+    value,
+    checked,
+    active,
+    disabled,
+    label,
+    interactiveRef,
+    interactiveProps,
+    onValueChange,
+    endAdornment,
+    endAdornmentAriaHidden,
+    className,
+    ...liProps
+  }, ref) => {
+    var _a, _b;
+    const interactiveClass = [
+      styles__default.default.interactiveChild,
+      styles__default.default.item,
+      active ? styles__default.default.active : "",
+      checked ? styles__default.default.selected : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles__default.default.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              RadioButton.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__namespace.forwardRef(
+  ({
+    label,
+    checked,
+    active,
+    disabled,
+    interactiveRef,
+    interactiveProps,
+    onCheckedChange,
+    endAdornment,
+    endAdornmentAriaHidden,
+    className,
+    ...liProps
+  }, ref) => {
+    const isSelected = checked;
+    const interactiveClass = [
+      styles__default.default.interactiveChild,
+      styles__default.default.item,
+      active ? styles__default.default.active : "",
+      isSelected ? styles__default.default.selected : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles__default.default.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
+              endAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.endAdornment, "aria-hidden": endAdornmentAriaHidden != null ? endAdornmentAriaHidden : true, children: endAdornment }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.switchControl, children: /* @__PURE__ */ jsxRuntime.jsx(
+                Switch.Switch,
+                {
+                  size: "sm",
+                  noContainer: true,
+                  checked,
+                  disabled,
+                  onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MenuSwitchItem.displayName = "Menu.SwitchItem";
+const MenuLabel = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: [styles__default.default.label, className].filter(Boolean).join(" "), ...props })
+);
+MenuLabel.displayName = "Menu.Label";
+const MenuSeparator = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref,
+      role: "separator",
+      className: [styles__default.default.separator, className].filter(Boolean).join(" "),
+      ...props
+    }
+  )
+);
+MenuSeparator.displayName = "Menu.Separator";
+const MenuHeader = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: [styles__default.default.header, className].filter(Boolean).join(" "),
+      ...props,
+      children
+    }
+  )
+);
+MenuHeader.displayName = "Menu.Header";
+const MenuDescription = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      className: [styles__default.default.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
+});
+
+exports.Menu = Menu;

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    children: React.ReactNode;
+    /**
+     * Default role for items rendered by Menu.Item when it clones/wraps content.
+     * - default: "menuitem" (for role="menu")
+     * - for Select/listbox usage, pass itemRole="option" and role="listbox" on Menu.
+     */
+    itemRole?: 'menuitem' | 'option';
+    /** Adds a gap of --spacing-xs between items */
+    gap?: boolean;
+}
+export type MenuLabelProps = React.HTMLAttributes<HTMLSpanElement>;
+export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
+export interface MenuHeaderProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    children: React.ReactNode;
+}
+export interface MenuDescriptionProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    children: React.ReactNode;
+}
+export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    children: React.ReactNode;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    /**
+     * Override the role applied to the interactive element for this item only.
+     * If not set, Menu's `itemRole` is used.
+     */
+    itemRole?: 'menuitem' | 'option';
+    /** Adds a rounded border around the item */
+    variant?: 'default' | 'bordered' | 'danger';
+    /**
+     * Extra content rendered after `children` (e.g. a status dot or badge).
+     * Appended as a trailing, vertically-centered slot inside the interactive
+     * element, so `children` stays exactly the icon + label content it was
+     * before — no need to know about `Menu.Label`.
+     */
+    endAdornment?: React.ReactNode;
+    /** Forwarded to the endAdornment wrapper. Defaults to true. */
+    endAdornmentAriaHidden?: boolean;
+}
+export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    label: React.ReactNode;
+    checked: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    interactiveRef?: React.Ref<HTMLDivElement>;
+    interactiveProps?: React.HTMLAttributes<HTMLDivElement>;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * Forwarded to the underlying Checkbox, which owns the layout/spacing.
+     */
+    endAdornment?: React.ReactNode;
+    /** Forwarded to the underlying Checkbox. Defaults to true. */
+    endAdornmentAriaHidden?: boolean;
+}
+export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    name: string;
+    value: string;
+    checked: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    label: string;
+    interactiveRef?: React.Ref<HTMLDivElement>;
+    interactiveProps?: React.HTMLAttributes<HTMLDivElement>;
+    onValueChange?: (value: string) => void;
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * Forwarded to the underlying RadioButton, which owns the layout/spacing.
+     */
+    endAdornment?: React.ReactNode;
+    /** Forwarded to the underlying RadioButton. Defaults to true. */
+    endAdornmentAriaHidden?: boolean;
+}
+export interface MenuSwitchItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    label: React.ReactNode;
+    checked: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    interactiveRef?: React.Ref<HTMLDivElement>;
+    interactiveProps?: React.HTMLAttributes<HTMLDivElement>;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Extra content rendered after the label (e.g. a status dot or badge).
+     * Forwarded to the underlying Switch, which owns the layout/spacing.
+     */
+    endAdornment?: React.ReactNode;
+    /** Forwarded to the underlying Switch. Defaults to true. */
+    endAdornmentAriaHidden?: boolean;
+}
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>> & {
+    Item: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
+    CheckItem: React.ForwardRefExoticComponent<MenuCheckItemProps & React.RefAttributes<HTMLLIElement>>;
+    RadioItem: React.ForwardRefExoticComponent<MenuRadioItemProps & React.RefAttributes<HTMLLIElement>>;
+    SwitchItem: React.ForwardRefExoticComponent<MenuSwitchItemProps & React.RefAttributes<HTMLLIElement>>;
+    Separator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLLIElement>>;
+    Header: React.ForwardRefExoticComponent<MenuHeaderProps & React.RefAttributes<HTMLLIElement>>;
+    Description: React.ForwardRefExoticComponent<MenuDescriptionProps & React.RefAttributes<HTMLLIElement>>;
+    Label: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLSpanElement>>;
+};