blue-react 10.2.0 → 11.0.0

package/dist/components/LegacyMenuItem.js

@@ -0,0 +1,170 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import clsx from "clsx";
+import React, { createElement, useEffect, useRef, useState } from "react";
+import Outside from "./Outside.js";
+import Chevron from "./Chevron.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function findParentWithClass(element, className) {
+  while (element && !element.classList.contains(className)) {
+    element = element.parentElement;
+  }
+  return element;
+}
+/**
+ * @deprecated
+ * Link, button or custom component for Sidebar, Actions or ActionMenu
+ */
+export default function LegacyMenuItem(props) {
+  var id = "blue-menu-item-wrapper-".concat(Math.random().toString(36).substring(7));
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showDropdown = _useState2[0],
+    setShowDropdown = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    active = _useState4[0],
+    setActive = _useState4[1];
+  var menuRef = useRef(null);
+  var checkActive = function checkActive() {
+    setActive(props.href && window.location.hash.indexOf(props.href) > -1 || props.isHome && (window.location.hash === "" || window.location.hash === "#/") ? true : false);
+  };
+  var onClick = function onClick(event) {
+    if (props.href === "#") {
+      event.preventDefault();
+    }
+    if (props.onClick) {
+      props.onClick(event);
+    }
+    if (props.children) {
+      setShowDropdown(!showDropdown);
+    }
+    if (props.onClickAttached !== undefined) {
+      props.onClickAttached(event);
+    }
+  };
+  var onClickOutside = function onClickOutside(_ref) {
+    var target = _ref.target;
+    var ignoreClasses = props.outsideIgnoreClasses || [id];
+    if (ignoreClasses && target) {
+      for (var i = 0; i < ignoreClasses.length; i++) {
+        if (target !== null && target !== void 0 && target.classList.contains(ignoreClasses[i]) || findParentWithClass(target, ignoreClasses[i])) {
+          return;
+        }
+      }
+    }
+    setShowDropdown(false);
+  };
+  useEffect(function () {
+    checkActive();
+    window.addEventListener("hashchange", function () {
+      checkActive();
+    });
+  }, []);
+  useEffect(function () {
+    if (props.showDropdown !== undefined) setShowDropdown(props.showDropdown);
+  }, [props.showDropdown]);
+  useEffect(function () {
+    if (props.onShowDropdown) {
+      props.onShowDropdown(showDropdown);
+    }
+  }, [props.onShowDropdown, showDropdown]);
+  useEffect(function () {
+    if (menuRef && menuRef.current) {
+      var el = menuRef.current;
+      var rect = el.getBoundingClientRect();
+      el.style.setProperty("--offset-top", Math.round(rect.top) + "px");
+    }
+  }, [menuRef, showDropdown]);
+  var className = "blue-menu-item btn" + (props.isActive ? " active" : "") + (props.className ? " " + props.className : "") + (props.children ? " blue-menu-item-dropdown-toggle w-100" : "") + (props.highlighted ? " highlighted" : "");
+  var icon, iconForActive;
+  if (typeof props.icon === "string") {
+    // is className
+    icon = /*#__PURE__*/_jsx("span", {
+      className: props.icon + (props.children ? " blue-menu-item-dropdown-icon" : "")
+    });
+  } else {
+    // is element / component
+    icon = props.icon;
+  }
+  if (typeof props.iconForActive === "string") {
+    // is className
+    iconForActive = /*#__PURE__*/_jsx("span", {
+      className: props.iconForActive + (props.children ? " blue-menu-item-dropdown-icon" : "")
+    });
+  } else {
+    // is element / component
+    iconForActive = props.iconForActive;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: "blue-menu-item-wrapper ".concat(id),
+    children: [/*#__PURE__*/createElement(props.elementType || (props.href ? "a" : "button"), {
+      to: props.to,
+      href: props.href,
+      exact: props.exact,
+      className: className + (props.isActive || active ? " active" : "") + (props.label ? " has-label" : ""),
+      onClick: onClick,
+      target: props.target,
+      rel: props.rel,
+      title: props.title,
+      onDragStart: props.onDragStart,
+      onDrag: props.onDrag,
+      onDragEnd: props.onDragEnd,
+      onDragEnter: props.onDragEnter,
+      onDragOver: props.onDragOver,
+      onDragLeave: props.onDragLeave,
+      onDrop: props.onDrop,
+      draggable: props.draggable,
+      "data-tooltip": props["data-tooltip"],
+      disabled: props.disabled,
+      style: props.style,
+      type: props.type,
+      id: props.id
+    }, /*#__PURE__*/_jsxs(_Fragment, {
+      children: [props.draggable && props.hideDraggableIcon !== true && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: ".5em",
+          height: "1em",
+          fill: "currentColor",
+          className: "bi bi-grip-vertical opacity-50",
+          viewBox: "0 0 8 16",
+          children: /*#__PURE__*/_jsx("path", {
+            d: "M3.376 1.876c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m-3 3c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m-3 3c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m-3 3c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m-3 3c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1"
+          })
+        }), " "]
+      }), props.icon !== undefined && /*#__PURE__*/_jsx("span", {
+        className: clsx("blue-menu-item-icon", props.iconClassName, {
+          hasIconForActive: iconForActive
+        }),
+        children: icon
+      }), iconForActive && /*#__PURE__*/_jsx("span", {
+        className: clsx("blue-menu-item-icon iconForActive", props.iconClassName),
+        children: iconForActive
+      }), props.label && /*#__PURE__*/_jsx("span", {
+        className: clsx("blue-menu-item-label text-truncate", props.labelClassName),
+        children: props.label
+      }), props.children && /*#__PURE__*/_jsx(Chevron, {
+        open: showDropdown,
+        mirrored: true,
+        className: clsx("blue-menu-item-dropdown-caret ms-auto", props.caretClassName),
+        style: props.caretStyle
+      })]
+    })), showDropdown && (props.supportOutside ? /*#__PURE__*/_jsx(Outside, {
+      wrapperRef: menuRef,
+      className: clsx("blue-menu-item-dropdown", props.dropdownClassName),
+      onClickOutside: onClickOutside,
+      style: props.dropdownStyle,
+      children: props.children
+    }) : /*#__PURE__*/_jsx("div", {
+      ref: menuRef,
+      className: clsx("blue-menu-item-dropdown", props.dropdownClassName),
+      style: props.dropdownStyle,
+      children: props.children
+    }))]
+  });
+}

package/dist/components/MenuItem.d.ts

@@ -1,149 +1,13 @@
-import React, { CSSProperties } from "react";
-export interface MenuItemProps {
-    /**
-     * Sets `to` prop, e.g. when you use the `NavLink` component from React Router.
-     */
-    to?: string;
-    /**
-     * Prop for components by React Router.
-     */
-    exact?: boolean;
-    href?: string;
-    onClick?: (event: React.MouseEvent) => void;
-    /**
-     * Will be fired after `onClick`
-     */
-    onClickAttached?: (event: React.MouseEvent) => void;
-    /**
-     * Icon component or a class name.
-     */
-    icon?: any;
-    /**
-     * Addition to class name of icon wrapper element
-     */
-    iconClassName?: string;
-    /**
-     * Icon component or a class name when the MenuItem is active.
-     */
-    iconForActive?: any;
-    /**
-     * Label of the link.
-     */
-    label?: any;
-    /**
-     * Addition to class name of label wrapper element
-     */
-    labelClassName?: string;
-    /**
-     * Addition to class name of caret
-     */
-    caretClassName?: string;
-    /**
-     * Addition to style of caret
-     */
-    caretStyle?: CSSProperties;
-    /**
-     * Should be set as active.
-     */
-    isActive?: boolean;
-    /**
-     * Set true to highlight the current menu item.
-     */
-    highlighted?: boolean;
-    /**
-     * When using Blue React's routing system: define this link as home page link.
-     */
-    isHome?: boolean;
-    /**
-     * Extends class name of the dropdown menu.
-     */
-    dropdownClassName?: string;
-    /**
-     * Extends style of the dropdown menu.
-     */
-    dropdownStyle?: CSSProperties;
-    /**
-     * Set children to create a nested `MenuItem` as a dropdown.
-     */
-    children?: any;
-    /**
-     * Defines class name.
-     */
-    className?: any;
-    /**
-     * Defines dropdown status from outside.
-     */
-    showDropdown?: boolean;
-    /**
-     * Callback when `showDropdown` changes.
-     */
-    onShowDropdown?: (showDropdown: boolean) => void;
-    /**
-     * Close on click outside.
-     */
-    supportOutside?: boolean;
-    /**
-     * Overrides default class list to be ignored on click outside.
-     * Hint: If you want this menu item to stay open when others will open, set:
-     * `outsideIgnoreClasses={["blue-menu-item-wrapper"]}`.
-     */
-    outsideIgnoreClasses?: string[];
-    /**
-     * By default, MenuItem is a `"button"`. If you set a `href`, it's a `"a"`.
-     * If you want to have it another type, you can pass a component reference with this prop (e.g. `Link`).
-     */
-    elementType?: any;
-    target?: string;
-    rel?: string;
-    title?: string;
-    type?: string;
-    /**
-     * Fired on the draggable target (the source element): occurs when the user starts to drag an element
-     */
-    onDragStart?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the draggable target (the source element): occurs when an element is being dragged
-     */
-    onDrag?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the draggable target (the source element): occurs when the user has finished dragging the element
-     */
-    onDragEnd?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the drop target: occurs when the dragged element enters the drop target
-     */
-    onDragEnter?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the drop target: occurs when the dragged element is over the drop target
-     */
-    onDragOver?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the drop target: occurs when the dragged element leaves the drop target
-     */
-    onDragLeave?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Fired on the drop target: occurs when the dragged element is dropped on the drop target
-     */
-    onDrop?: (event: React.DragEvent) => void | React.DragEventHandler;
-    /**
-     * Specifies whether an element is draggable or not.
-     *
-     * **Important:** To make draggable menu items work in Firefox, the elementType must not be `"button"`. Set it to something else, like `"div"`.
-     */
-    draggable?: boolean;
-    hideDraggableIcon?: boolean;
-    "data-tooltip"?: string;
-    /**
-     * Specifies whether an element is disabled or not.
-     */
-    disabled?: boolean;
-    /**
-     * Specifies style of an element.
-     */
-    style?: React.CSSProperties;
-    id?: string;
-}
-/**
- * Link, button or custom component for Sidebar, Actions or ActionMenu
- */
-export default function MenuItem(props: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from "react";
+import { ButtonProps } from "./Button";
+export type MenuItemProps = ButtonProps & {
+    current?: boolean;
+    defaultDisplay?: boolean;
+    buttonContent?: ReactNode;
+    /** Uses `iconBefore` slot. If `iconForCurrent` and menu item is current, this will be hidden. */
+    icon?: ReactNode;
+    /** Uses `iconBefore` slot. If menu item is current, this will be visible. */
+    iconForCurrent?: ReactNode;
+    as?: "collapse" | "collapse-group" | "popover-group";
+};
+export default function MenuItem({ as, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MenuItem.js

@@ -1,157 +1,172 @@
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "children"],
+  _excluded2 = ["current", "className", "defaultDisplay", "children", "buttonContent", "icon", "iconForCurrent"],
+  _excluded3 = ["className", "children"],
+  _excluded4 = ["children", "iconAfter"],
+  _excluded5 = ["as"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useId } from "react";
+import Button from "./Button.js";
 import clsx from "clsx";
-import React, { createElement, useEffect, useRef, useState } from "react";
-import Outside from "./Outside.js";
-import Chevron from "./Chevron.js";
-function findParentWithClass(element, className) {
-  while (element && !element.classList.contains(className)) {
-    element = element.parentElement;
-  }
-  return element;
+import { getPhrase } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// & {
+//     popoverClassName?: string
+//     popoverStyle?: CSSProperties
+// } & {
+//     collapseGroupClassName?: string
+//     collapseGroupStyle?: CSSProperties
+// } & {
+//     collapseClassName?: string
+//     collapseStyle?: CSSProperties
+// }
+
+function ChevronSummary(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs("summary", _objectSpread(_objectSpread({
+    className: clsx("btn blue-collapse-header blue-menu-item icon-link", {
+      "blue-btn-square": children === undefined
+    }, className)
+  }, props), {}, {
+    children: [children, children === undefined && /*#__PURE__*/_jsx("span", {
+      className: "visually-hidden",
+      children: getPhrase("Toggle details")
+    }), /*#__PURE__*/_jsx("div", {
+      className: "blue-btn-icon-wrapper",
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: clsx("blue-collapse-chevron", {
+          "ms-auto": children !== undefined
+        }),
+        viewBox: "0 0 16 16",
+        children: /*#__PURE__*/_jsx("path", {
+          fillRule: "evenodd",
+          d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"
+        })
+      })
+    })]
+  }));
 }
-/**
- * Link, button or custom component for Sidebar, Actions or ActionMenu
- */
-export default function MenuItem(props) {
-  var id = "blue-menu-item-wrapper-".concat(Math.random().toString(36).substring(7));
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showDropdown = _useState2[0],
-    setShowDropdown = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    active = _useState4[0],
-    setActive = _useState4[1];
-  var menuRef = useRef(null);
-  var checkActive = function checkActive() {
-    setActive(props.href && window.location.hash.indexOf(props.href) > -1 || props.isHome && (window.location.hash === "" || window.location.hash === "#/") ? true : false);
-  };
-  var onClick = function onClick(event) {
-    if (props.href === "#") {
-      event.preventDefault();
-    }
-    if (props.onClick) {
-      props.onClick(event);
-    }
-    if (props.children) {
-      setShowDropdown(!showDropdown);
-    }
-    if (props.onClickAttached !== undefined) {
-      props.onClickAttached(event);
-    }
-  };
-  var onClickOutside = function onClickOutside(_ref) {
-    var target = _ref.target;
-    var ignoreClasses = props.outsideIgnoreClasses || [id];
-    if (ignoreClasses && target) {
-      for (var i = 0; i < ignoreClasses.length; i++) {
-        if (target !== null && target !== void 0 && target.classList.contains(ignoreClasses[i]) || findParentWithClass(target, ignoreClasses[i])) {
-          return;
-        }
-      }
-    }
-    setShowDropdown(false);
-  };
-  useEffect(function () {
-    checkActive();
-    window.addEventListener("hashchange", function () {
-      checkActive();
-    });
-  }, []);
-  useEffect(function () {
-    if (props.showDropdown !== undefined) setShowDropdown(props.showDropdown);
-  }, [props.showDropdown]);
-  useEffect(function () {
-    if (props.onShowDropdown) {
-      props.onShowDropdown(showDropdown);
-    }
-  }, [props.onShowDropdown, showDropdown]);
-  useEffect(function () {
-    if (menuRef && menuRef.current) {
-      var el = menuRef.current;
-      var rect = el.getBoundingClientRect();
-      el.style.setProperty("--offset-top", Math.round(rect.top) + "px");
-    }
-  }, [menuRef, showDropdown]);
-  var className = "blue-menu-item btn" + (props.isActive ? " active" : "") + (props.className ? " " + props.className : "") + (props.children ? " blue-menu-item-dropdown-toggle w-100" : "") + (props.highlighted ? " highlighted" : "");
-  var icon, iconForActive;
-  if (typeof props.icon === "string") {
-    // is className
-    icon = /*#__PURE__*/React.createElement("span", {
-      className: props.icon + (props.children ? " blue-menu-item-dropdown-icon" : "")
-    });
-  } else {
-    // is element / component
-    icon = props.icon;
-  }
-  if (typeof props.iconForActive === "string") {
-    // is className
-    iconForActive = /*#__PURE__*/React.createElement("span", {
-      className: props.iconForActive + (props.children ? " blue-menu-item-dropdown-icon" : "")
-    });
-  } else {
-    // is element / component
-    iconForActive = props.iconForActive;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "blue-menu-item-wrapper ".concat(id)
-  }, /*#__PURE__*/createElement(props.elementType || (props.href ? "a" : "button"), {
-    to: props.to,
-    href: props.href,
-    exact: props.exact,
-    className: className + (props.isActive || active ? " active" : "") + (props.label ? " has-label" : ""),
-    onClick: onClick,
-    target: props.target,
-    rel: props.rel,
-    title: props.title,
-    onDragStart: props.onDragStart,
-    onDrag: props.onDrag,
-    onDragEnd: props.onDragEnd,
-    onDragEnter: props.onDragEnter,
-    onDragOver: props.onDragOver,
-    onDragLeave: props.onDragLeave,
-    onDrop: props.onDrop,
-    draggable: props.draggable,
-    "data-tooltip": props["data-tooltip"],
-    disabled: props.disabled,
-    style: props.style,
-    type: props.type,
-    id: props.id
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, props.draggable && props.hideDraggableIcon !== true && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: ".5em",
-    height: "1em",
-    fill: "currentColor",
-    className: "bi bi-grip-vertical opacity-50",
-    viewBox: "0 0 8 16"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M3.376 1.876c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m-3 3c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m-3 3c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m-3 3c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m-3 3c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1m3 0c0 .55-.45 1-1 1-.549 0-1-.45-1-1 0-.549.451-1 1-1 .55 0 1 .451 1 1"
-  })), " "), props.icon !== undefined && /*#__PURE__*/React.createElement("span", {
-    className: clsx("blue-menu-item-icon", props.iconClassName, {
-      hasIconForActive: iconForActive
+function Base(_ref2) {
+  var current = _ref2.current,
+    className = _ref2.className,
+    _ref2$defaultDisplay = _ref2.defaultDisplay,
+    defaultDisplay = _ref2$defaultDisplay === void 0 ? false : _ref2$defaultDisplay,
+    children = _ref2.children,
+    buttonContent = _ref2.buttonContent,
+    icon = _ref2.icon,
+    iconForCurrent = _ref2.iconForCurrent,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+    variant: "menu-item",
+    className: clsx({
+      current: current,
+      "d-flex": !defaultDisplay
+    }, className),
+    iconBefore: props.iconBefore || (icon || iconForCurrent) && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [icon !== null && /*#__PURE__*/_jsx("span", {
+        className: clsx({
+          "blue-menu-item-current-hidden": iconForCurrent !== undefined
+        }),
+        style: {
+          display: "contents"
+        },
+        children: icon
+      }), iconForCurrent !== undefined && /*#__PURE__*/_jsx("span", {
+        className: "blue-menu-item-default-hidden",
+        style: {
+          display: "contents"
+        },
+        children: iconForCurrent
+      }), buttonContent]
     })
-  }, icon), iconForActive && /*#__PURE__*/React.createElement("span", {
-    className: clsx("blue-menu-item-icon iconForActive", props.iconClassName)
-  }, iconForActive), props.label && /*#__PURE__*/React.createElement("span", {
-    className: clsx("blue-menu-item-label text-truncate", props.labelClassName)
-  }, props.label), props.children && /*#__PURE__*/React.createElement(Chevron, {
-    open: showDropdown,
-    mirrored: true,
-    className: clsx("blue-menu-item-dropdown-caret ms-auto", props.caretClassName),
-    style: props.caretStyle
-  }))), showDropdown && (props.supportOutside ? /*#__PURE__*/React.createElement(Outside, {
-    wrapperRef: menuRef,
-    className: clsx("blue-menu-item-dropdown", props.dropdownClassName),
-    onClickOutside: onClickOutside,
-    style: props.dropdownStyle
-  }, props.children) : /*#__PURE__*/React.createElement("div", {
-    ref: menuRef,
-    className: clsx("blue-menu-item-dropdown", props.dropdownClassName),
-    style: props.dropdownStyle
-  }, props.children)));
+  }, props), {}, {
+    children: buttonContent
+  }));
+}
+function Collapse(_ref3) {
+  var children = _ref3.children,
+    iconBefore = _ref3.iconBefore,
+    label = _ref3.label,
+    labelHidden = _ref3.labelHidden,
+    iconAfter = _ref3.iconAfter,
+    buttonContent = _ref3.buttonContent;
+  return /*#__PURE__*/_jsxs("details", {
+    className: "blue-collapse",
+    children: [/*#__PURE__*/_jsxs(ChevronSummary, {
+      className: "d-flex",
+      children: [iconBefore !== null && /*#__PURE__*/_jsx("span", {
+        className: "blue-btn-icon-wrapper",
+        "aria-hidden": true,
+        children: iconBefore
+      }), labelHidden ? /*#__PURE__*/_jsx("span", {
+        className: "visually-hidden",
+        children: label
+      }) : label, buttonContent, iconAfter != null && /*#__PURE__*/_jsx("span", {
+        className: "blue-btn-icon-wrapper",
+        "aria-hidden": true,
+        children: iconAfter
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "blue-collapse-indent vstack border-start",
+      children: children
+    })]
+  });
+}
+function CollapseGroup(_ref4) {
+  var className = _ref4.className,
+    children = _ref4.children,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  return /*#__PURE__*/_jsxs("div", {
+    className: clsx("blue-collapse-group"),
+    children: [/*#__PURE__*/_jsx(Base, _objectSpread({}, props)), /*#__PURE__*/_jsxs("details", {
+      className: "blue-collapse",
+      children: [/*#__PURE__*/_jsx(ChevronSummary, {}), /*#__PURE__*/_jsx("div", {
+        className: "blue-collapse-indent vstack border-start",
+        children: children
+      })]
+    })]
+  });
+}
+function PopoverGroup(_ref5) {
+  var children = _ref5.children,
+    iconAfter = _ref5.iconAfter,
+    props = _objectWithoutProperties(_ref5, _excluded4);
+  var id = useId();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Base, _objectSpread({
+      popoverTarget: id,
+      iconAfter: iconAfter || /*#__PURE__*/_jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 16 16",
+        children: /*#__PURE__*/_jsx("path", {
+          fillRule: "evenodd",
+          d: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"
+        })
+      })
+    }, props)), /*#__PURE__*/_jsx("div", {
+      id: id,
+      popover: "",
+      className: clsx("blue-anchored blue-anchored-fallback border rounded-4 shadow"),
+      children: /*#__PURE__*/_jsx("div", {
+        className: "vstack",
+        children: children
+      })
+    })]
+  });
+}
+export default function MenuItem(_ref6) {
+  var as = _ref6.as,
+    props = _objectWithoutProperties(_ref6, _excluded5);
+  var Comp = as === "collapse" ? Collapse : as === "collapse-group" ? CollapseGroup : as === "popover-group" ? PopoverGroup : Base;
+  return /*#__PURE__*/_jsx(Comp, _objectSpread({}, props));
 }