@dbcdk/react-components 0.0.168 → 0.0.169

package/dist/components/menu/Menu.js

@@ -1,430 +0,0 @@
-'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

@@ -1,286 +0,0 @@
-.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;
-}