@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/menu/Menu.cjs

@@ -0,0 +1,287 @@
+'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');
+
+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="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 } = opts;
+  const childClass = [styles__default.default.item, active ? styles__default.default.active : "", selected ? styles__default.default.selected : ""].filter(Boolean).join(" ");
+  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 } : {}
+    });
+  }
+  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
+  });
+}
+const MenuItem = React__namespace.forwardRef(
+  ({ children, active, selected, disabled, className, itemRole, variant, ...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
+      }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "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
+      }
+    ) });
+  }
+);
+MenuItem.displayName = "Menu.Item";
+const MenuCheckItem = React__namespace.forwardRef(
+  ({
+    label,
+    checked,
+    active,
+    disabled,
+    interactiveRef,
+    interactiveProps,
+    onCheckedChange,
+    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,
+                onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+MenuCheckItem.displayName = "Menu.CheckItem";
+const MenuRadioItem = React__namespace.forwardRef(
+  ({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles__default.default.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.interactiveChild,
+            onClick: (event) => {
+              var _a;
+              if (disabled) return;
+              const target = event.target;
+              if ((_a = target.closest("label")) != null ? _a : target.closest("input")) return;
+              onValueChange == null ? void 0 : onValueChange(value);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RadioButton.RadioButton,
+              {
+                noContainer: true,
+                name,
+                size: "sm",
+                value,
+                checked,
+                disabled,
+                label,
+                onChange: (v, _e) => onValueChange == null ? void 0 : onValueChange(v)
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+MenuRadioItem.displayName = "Menu.RadioItem";
+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 Menu = Object.assign(MenuBase, {
+  Item: MenuItem,
+  CheckItem: MenuCheckItem,
+  RadioItem: MenuRadioItem,
+  Separator: MenuSeparator,
+  Header: MenuHeader
+});
+
+exports.Menu = Menu;

package/dist/components/menu/Menu.js

@@ -0,0 +1,262 @@
+'use client';
+import { jsx } 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';
+
+const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]: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 } = opts;
+  const childClass = [styles.item, active ? styles.active : "", selected ? styles.selected : ""].filter(Boolean).join(" ");
+  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 } : {}
+    });
+  }
+  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
+  });
+}
+const MenuItem = React.forwardRef(
+  ({ children, active, selected, disabled, className, itemRole, variant, ...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
+      }) });
+    }
+    return /* @__PURE__ */ jsx("li", { ref, role: "none", className: rowClass, ...liProps, children: /* @__PURE__ */ jsx(
+      "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
+      }
+    ) });
+  }
+);
+MenuItem.displayName = "Menu.Item";
+const MenuCheckItem = React.forwardRef(
+  ({
+    label,
+    checked,
+    active,
+    disabled,
+    interactiveRef,
+    interactiveProps,
+    onCheckedChange,
+    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,
+                onChange: (next, _e) => onCheckedChange == null ? void 0 : onCheckedChange(next)
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+MenuCheckItem.displayName = "Menu.CheckItem";
+const MenuRadioItem = React.forwardRef(
+  ({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "none",
+        className: [styles.row, className].filter(Boolean).join(" "),
+        ...liProps,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.interactiveChild,
+            onClick: (event) => {
+              var _a;
+              if (disabled) return;
+              const target = event.target;
+              if ((_a = target.closest("label")) != null ? _a : target.closest("input")) return;
+              onValueChange == null ? void 0 : onValueChange(value);
+            },
+            children: /* @__PURE__ */ jsx(
+              RadioButton,
+              {
+                noContainer: true,
+                name,
+                size: "sm",
+                value,
+                checked,
+                disabled,
+                label,
+                onChange: (v, _e) => onValueChange == null ? void 0 : onValueChange(v)
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+MenuRadioItem.displayName = "Menu.RadioItem";
+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 Menu = Object.assign(MenuBase, {
+  Item: MenuItem,
+  CheckItem: MenuCheckItem,
+  RadioItem: MenuRadioItem,
+  Separator: MenuSeparator,
+  Header: MenuHeader
+});
+
+export { Menu };