@muraldevkit/ui-toolkit 4.67.0 → 4.68.0-dev-NFbt.1

package/dist/esm/components/menu/MrlMenu/utilities.js

@@ -0,0 +1,84 @@
+/**
+ * Find the closest menu parent of an element
+ *
+ * @param el - The element to start searching from
+ * @returns The closest menu parent or null if none is found
+ */
+var findClosestMenuParent = function findClosestMenuParent(el) {
+  return el === null || el === void 0 ? void 0 : el.closest('[role="menu"]');
+};
+
+/**
+ * Calculate the horizontal positioning of the submenu
+ *
+ * @param overlapsRight - Whether the menu overlaps the right side of the screen
+ * @param overlapsLeft - Whether the menu overlaps the left side of the screen
+ * @param menuRect - The bounding rectangle of the menu
+ * @param triggerRef - The ref of the trigger element
+ * @returns The left position of the menu
+ */
+var calculateLeftPosition = function calculateLeftPosition(overlapsRight, overlapsLeft, menuRect, triggerRef) {
+  if (overlapsRight && overlapsLeft) {
+    // if we overlap on the left and right, provide an offset value so the menu
+    // isn't flush left with the trigger element (per design specs)
+    return '55px';
+  } else if (overlapsRight) {
+    // if we overlap on the right, move the menu to the left side of the trigger
+    return "-".concat(menuRect.width - 5, "px");
+  } else if (triggerRef.current) {
+    var _triggerRef$current;
+    // otherwise display on the right
+    return "".concat(((_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.clientWidth) + 13, "px");
+  }
+  return '0';
+};
+
+/**
+ * Calculate vertical positioning of the submenu
+ *
+ * @param overlapsRight - Whether the menu overlaps the right side of the screen
+ * @param overlapsLeft - Whether the menu overlaps the left side of the screen
+ * @param triggerRef - The ref of the trigger element
+ * @param menuRect - The bounding rectangle of the menu
+ * @param parentMenu - The parent menu element
+ * @param triggerRect - The bounding rectangle of the trigger element
+ * @returns The top position of the menu
+ */
+var calculateTopPosition = function calculateTopPosition(overlapsRight, overlapsLeft, triggerRef, menuRect, parentMenu, triggerRect) {
+  if (triggerRef.current) {
+    var parentContainer = parentMenu.parentElement;
+    if (parentContainer) {
+      var menuBottom = triggerRect.top + menuRect.height;
+      var parentRect = parentContainer.getBoundingClientRect();
+
+      // if we overlap both left and right, we want to position the menu above or below the trigger
+      if (overlapsRight && overlapsLeft) {
+        // if the menu overlaps and is below the trigger, position it above, otherwise position it below
+        return menuBottom > window.innerHeight ? "".concat(triggerRef.current.offsetTop - menuRect.height - 21 - parentMenu.scrollTop, "px") : "".concat(triggerRef.current.offsetTop + triggerRect.height - parentMenu.scrollTop, "px");
+      } else if (menuBottom > parentRect.bottom) {
+        // if the menu's bottom edge is below the parent container's bottom, align bottom
+        var topPosition = parentRect.height - menuRect.height;
+        var offset = hasOverflowY(parentMenu) ? 20 : 0;
+        return "".concat(topPosition - offset, "px");
+      } else {
+        // otherwise align it with the top of the trigger
+        return "".concat(triggerRef.current.offsetTop - parentMenu.scrollTop - 12, "px");
+      }
+    }
+  }
+  return '0';
+};
+
+/*
+ * Check if an element has overflow-y set to auto
+ *
+ * @param element - The element to check
+ * @returns Whether the element has overflow-y set to auto
+ */
+var hasOverflowY = function hasOverflowY(element) {
+  var style = window.getComputedStyle(element);
+  return style.overflowY === 'auto';
+};
+
+export { calculateLeftPosition, calculateTopPosition, findClosestMenuParent };
+//# sourceMappingURL=utilities.js.map

package/dist/esm/components/menu/MrlMenu/utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.js","sources":["../../../../../src/components/menu/MrlMenu/utilities.ts"],"sourcesContent":["/**\n * Find the closest menu parent of an element\n *\n * @param el - The element to start searching from\n * @returns The closest menu parent or null if none is found\n */\nexport const findClosestMenuParent = (el: HTMLElement | null): HTMLElement | null | undefined =>\n\tel?.closest('[role=\"menu\"]');\n\n/**\n * Calculate the horizontal positioning of the submenu\n *\n * @param overlapsRight - Whether the menu overlaps the right side of the screen\n * @param overlapsLeft - Whether the menu overlaps the left side of the screen\n * @param menuRect - The bounding rectangle of the menu\n * @param triggerRef - The ref of the trigger element\n * @returns The left position of the menu\n */\nexport const calculateLeftPosition = (\n\toverlapsRight: boolean,\n\toverlapsLeft: boolean,\n\tmenuRect: DOMRect,\n\ttriggerRef: React.RefObject<HTMLElement>\n): string => {\n\tif (overlapsRight && overlapsLeft) {\n\t\t// if we overlap on the left and right, provide an offset value so the menu\n\t\t// isn't flush left with the trigger element (per design specs)\n\t\treturn '55px';\n\t} else if (overlapsRight) {\n\t\t// if we overlap on the right, move the menu to the left side of the trigger\n\t\treturn `-${menuRect.width - 5}px`;\n\t} else if (triggerRef.current) {\n\t\t// otherwise display on the right\n\t\treturn `${triggerRef.current?.clientWidth + 13}px`;\n\t}\n\n\treturn '0';\n};\n\n/**\n * Calculate vertical positioning of the submenu\n *\n * @param overlapsRight - Whether the menu overlaps the right side of the screen\n * @param overlapsLeft - Whether the menu overlaps the left side of the screen\n * @param triggerRef - The ref of the trigger element\n * @param menuRect - The bounding rectangle of the menu\n * @param parentMenu - The parent menu element\n * @param triggerRect - The bounding rectangle of the trigger element\n * @returns The top position of the menu\n */\nexport const calculateTopPosition = (\n\toverlapsRight: boolean,\n\toverlapsLeft: boolean,\n\ttriggerRef: React.RefObject<HTMLElement>,\n\tmenuRect: DOMRect,\n\tparentMenu: HTMLElement,\n\ttriggerRect: DOMRect\n): string => {\n\tif (triggerRef.current) {\n\t\tconst parentContainer = parentMenu.parentElement;\n\n\t\tif (parentContainer) {\n\t\t\tconst menuBottom = triggerRect.top + menuRect.height;\n\t\t\tconst parentRect = parentContainer.getBoundingClientRect();\n\n\t\t\t// if we overlap both left and right, we want to position the menu above or below the trigger\n\t\t\tif (overlapsRight && overlapsLeft) {\n\t\t\t\t// if the menu overlaps and is below the trigger, position it above, otherwise position it below\n\t\t\t\treturn menuBottom > window.innerHeight\n\t\t\t\t\t? `${triggerRef.current.offsetTop - menuRect.height - 21 - parentMenu.scrollTop}px`\n\t\t\t\t\t: `${triggerRef.current.offsetTop + triggerRect.height - parentMenu.scrollTop}px`;\n\t\t\t} else if (menuBottom > parentRect.bottom) {\n\t\t\t\t// if the menu's bottom edge is below the parent container's bottom, align bottom\n\t\t\t\tconst topPosition = parentRect.height - menuRect.height;\n\t\t\t\tconst offset = hasOverflowY(parentMenu) ? 20 : 0;\n\t\t\t\treturn `${topPosition - offset}px`;\n\t\t\t} else {\n\t\t\t\t// otherwise align it with the top of the trigger\n\t\t\t\treturn `${triggerRef.current.offsetTop - parentMenu.scrollTop - 12}px`;\n\t\t\t}\n\t\t}\n\t}\n\treturn '0';\n};\n\n/*\n * Check if an element has overflow-y set to auto\n *\n * @param element - The element to check\n * @returns Whether the element has overflow-y set to auto\n */\nconst hasOverflowY = (element: HTMLElement) => {\n\tconst style = window.getComputedStyle(element);\n\treturn style.overflowY === 'auto';\n};\n"],"names":["findClosestMenuParent","el","closest","calculateLeftPosition","overlapsRight","overlapsLeft","menuRect","triggerRef","concat","width","current","_triggerRef$current","clientWidth","calculateTopPosition","parentMenu","triggerRect","parentContainer","parentElement","menuBottom","top","height","parentRect","getBoundingClientRect","window","innerHeight","offsetTop","scrollTop","bottom","topPosition","offset","hasOverflowY","element","style","getComputedStyle","overflowY"],"mappings":"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"}

package/dist/esm/components/menu/MrlMenuGroup/MrlMenuGroup.js

@@ -0,0 +1,35 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import styles from './MrlMenuGroup.module.scss.js';
+import { MrlDivider } from '../../divider/MrlDivider/MrlDivider.js';
+import { MrlTextHeading } from '../../text/MrlTextHeading/MrlTextHeading.js';
+
+var _excluded = ["children", "divider", "groupLabel"];
+/**
+ * MrlMenuGroup
+ * @param props - component properties
+ * @returns JSX.Element
+ */
+var MrlMenuGroup = function MrlMenuGroup(_ref) {
+  var children = _ref.children,
+    _ref$divider = _ref.divider,
+    divider = _ref$divider === void 0 ? true : _ref$divider,
+    groupLabel = _ref.groupLabel,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("li", _extends({
+    role: "none"
+  }, rest), groupLabel && /*#__PURE__*/React.createElement(MrlTextHeading, {
+    attrs: {
+      className: styles['MrlMenuGroup--label']
+    },
+    hierarchy: "primary",
+    kind: "title",
+    level: "2",
+    size: "small"
+  }, groupLabel), /*#__PURE__*/React.createElement("ul", {
+    role: "none"
+  }, children), divider && /*#__PURE__*/React.createElement(MrlDivider, null));
+};
+
+export { MrlMenuGroup };
+//# sourceMappingURL=MrlMenuGroup.js.map

package/dist/esm/components/menu/MrlMenuGroup/MrlMenuGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlMenuGroup.js","sources":["../../../../../src/components/menu/MrlMenuGroup/MrlMenuGroup.tsx"],"sourcesContent":["import { MrlTextHeading } from '../../text';\nimport { MrlDivider } from '../../divider';\nimport * as React from 'react';\nimport styles from './MrlMenuGroup.module.scss';\n\nexport interface MrlMenuGroupPropTypes {\n\tchildren: React.ReactNode;\n\tdivider?: boolean;\n\tgroupLabel?: string;\n}\n\n/**\n * MrlMenuGroup\n * @param props - component properties\n * @returns JSX.Element\n */\nexport const MrlMenuGroup = ({\n\tchildren,\n\tdivider = true,\n\tgroupLabel,\n\t...rest\n}: MrlMenuGroupPropTypes): JSX.Element => {\n\treturn (\n\t\t<li role=\"none\" {...rest}>\n\t\t\t{groupLabel && (\n\t\t\t\t<MrlTextHeading\n\t\t\t\t\tattrs={{\n\t\t\t\t\t\tclassName: styles['MrlMenuGroup--label']\n\t\t\t\t\t}}\n\t\t\t\t\thierarchy=\"primary\"\n\t\t\t\t\tkind=\"title\"\n\t\t\t\t\tlevel=\"2\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t{groupLabel}\n\t\t\t\t</MrlTextHeading>\n\t\t\t)}\n\t\t\t<ul role=\"none\">{children}</ul>\n\t\t\t{divider && <MrlDivider />}\n\t\t</li>\n\t);\n};\n"],"names":["MrlMenuGroup","_ref","children","_ref$divider","divider","groupLabel","rest","_objectWithoutProperties","_excluded","React","createElement","_extends","role","MrlTextHeading","attrs","className","styles","hierarchy","kind","level","size","MrlDivider"],"mappings":";;;;;;;AAWA;AACA;AACA;AACA;AACA;IACaA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAKiB;AAAA,EAAA,IAJzCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CACRG,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,YAAA;IACdE,UAAU,GAAAJ,IAAA,CAAVI,UAAU;AACPC,IAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA;AAEP,EAAA,oBACCC,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AAAIC,IAAAA,IAAI,EAAC;GAAM,EAAKN,IAAI,GACtBD,UAAU,iBACVI,KAAA,CAAAC,aAAA,CAACG,cAAc,EAAA;AACdC,IAAAA,KAAK,EAAE;MACNC,SAAS,EAAEC,MAAM,CAAC,qBAAqB;KACtC;AACFC,IAAAA,SAAS,EAAC,SAAS;AACnBC,IAAAA,IAAI,EAAC,OAAO;AACZC,IAAAA,KAAK,EAAC,GAAG;AACTC,IAAAA,IAAI,EAAC;AAAO,GAAA,EAEXf,UACc,CAChB,eACDI,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;AAAIE,IAAAA,IAAI,EAAC;AAAM,GAAA,EAAEV,QAAa,CAAC,EAC9BE,OAAO,iBAAIK,KAAA,CAAAC,aAAA,CAACW,UAAU,EAAA,IAAE,CACtB,CAAC;AAEP;;;;"}

package/dist/esm/components/menu/MrlMenuGroup/MrlMenuGroup.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"MrlMenuGroup--label":"MrlMenuGroup--label--OfXgy"};
+
+export { styles as default };
+//# sourceMappingURL=MrlMenuGroup.module.scss.js.map

package/dist/esm/components/menu/MrlMenuGroup/MrlMenuGroup.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlMenuGroup.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/menu/MrlMenuItem/MrlMenuItem.js

@@ -0,0 +1,180 @@
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import { chevronRight, check } from '@muraldevkit/ds-icons';
+import classnames from 'classnames';
+import { MrlMenuContext } from '../context/MrlMenuContext.js';
+import styles from './MrlMenuItem.module.scss.js';
+import { getUniqueId } from '../../../utils/setAttributes/setAttributes.js';
+import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
+
+var _excluded = ["ariaDescribedBy", "ariaHasPopup", "children", "className", "dataQa", "disabled", "icon", "id", "onClick", "onMouseOut", "onMouseOver", "role", "selected"];
+var getSubMenuType = function getSubMenuType(child) {
+  if (/*#__PURE__*/React.isValidElement(child)) {
+    var type = child.type.componentType;
+    if (type === 'Menu' || type === 'Popover') {
+      return type;
+    }
+  }
+  return null;
+};
+
+/**
+ * MrlMenuItem component
+ *
+ * Renders a menu item to be used within the MrlMenu component
+ * @param {MrlMenuItemProps} props - The props for the MrlMenuItem component
+ * @returns {Element} - rendered MrlMenuItem component
+ */
+function MrlMenuItem(_ref) {
+  var ariaDescribedBy = _ref.ariaDescribedBy,
+    ariaHasPopup = _ref.ariaHasPopup,
+    children = _ref.children,
+    className = _ref.className,
+    dataQa = _ref.dataQa,
+    disabled = _ref.disabled,
+    icon = _ref.icon,
+    id = _ref.id,
+    onClick = _ref.onClick,
+    onMouseOut = _ref.onMouseOut,
+    onMouseOver = _ref.onMouseOver,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'menuitem' : _ref$role,
+    selected = _ref.selected,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var context = React.useContext(MrlMenuContext);
+  var menuItemRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isSubElement = _React$useState2[0],
+    setIsSubElement = _React$useState2[1];
+  var isSelectable = role === 'menuitemcheckbox' || role === 'menuitemradio';
+  var setFocusItem = function setFocusItem() {
+    var _context$triggerRef;
+    if (ariaHasPopup && ariaHasPopup !== 'menu' && context !== null && context !== void 0 && (_context$triggerRef = context.triggerRef) !== null && _context$triggerRef !== void 0 && _context$triggerRef.current) {
+      var triggerElement = context.triggerRef.current;
+      if (!triggerElement.id) {
+        triggerElement.id = getUniqueId('menu-trigger');
+      }
+      document.body.setAttribute('data-focus-item', triggerElement.id);
+    }
+  };
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    setFocusItem();
+    if (context && !!context.closeMenu && !isSubElement) {
+      context.closeMenu();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    // WCAG specifices that space key should toggle the selection of a checkbox or radio button
+    // but not close the menu. When a user presses the enter key on these items the menu should close.
+    if (e.key === ' ' && !disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+
+      // close the menu if we are not a selectable item (checkbox or radio button)
+      if (!isSelectable) {
+        var _context$closeMenu;
+        setFocusItem();
+        context === null || context === void 0 ? void 0 : (_context$closeMenu = context.closeMenu) === null || _context$closeMenu === void 0 ? void 0 : _context$closeMenu.call(context);
+      }
+    }
+  };
+  var handleDisabled = function handleDisabled(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  var handleFocusIn = function handleFocusIn() {
+    onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver();
+  };
+  var handleFocusOut = function handleFocusOut() {
+    onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut();
+  };
+  var renderMenu = function renderMenu() {
+    return React.Children.map(children, function (child) {
+      if (/*#__PURE__*/React.isValidElement(child)) {
+        var type = child.type.componentType;
+        if (type === 'Menu') {
+          return /*#__PURE__*/React.cloneElement(child, {
+            alignment: 'start',
+            closeParent: context === null || context === void 0 ? void 0 : context.closeParent,
+            isSubMenu: true,
+            position: 'right',
+            triggerRef: menuItemRef
+          });
+        } else if (type === 'Popover') {
+          return /*#__PURE__*/React.cloneElement(child, {
+            alignment: 'start',
+            isSubMenu: true,
+            point: false,
+            position: 'right',
+            triggerRef: menuItemRef
+          });
+        }
+        return null;
+      }
+    });
+  };
+  var renderChildren = function renderChildren() {
+    return React.Children.map(children, function (child) {
+      if (!getSubMenuType(child)) {
+        return child;
+      }
+      return null;
+    });
+  };
+  React.useEffect(function () {
+    var hasSubMenu = React.Children.toArray(children).some(function (child) {
+      return getSubMenuType(child);
+    });
+    setIsSubElement(hasSubMenu);
+  }, [children]);
+  var menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem');
+  var menuTriggerClasses = classnames(styles['MrlMenuItem--item'], 'MrlMenuItem--item', _defineProperty(_defineProperty({}, styles['MrlMenuItem--item--selected'], selected), styles['MrlMenuItem--item--withIcon'], !!icon), className);
+  var rightIcon = isSubElement ? chevronRight : selected ? check : null;
+  var hasPopup = isSubElement ? 'menu' : ariaHasPopup ? ariaHasPopup : undefined;
+  return /*#__PURE__*/React.createElement("li", _extends({}, rest, {
+    className: menuItemClasses,
+    "data-qa": dataQa
+  }), /*#__PURE__*/React.createElement("button", _extends({
+    "aria-describedby": ariaDescribedBy,
+    "aria-disabled": disabled,
+    "aria-haspopup": hasPopup
+  }, isSelectable ? {
+    'aria-checked': selected ? 'true' : 'false'
+  } : {}, {
+    "data-selected": selected,
+    "data-qa": dataQa && "".concat(dataQa, "-button"),
+    id: id,
+    ref: menuItemRef,
+    role: role,
+    type: "button",
+    onClick: disabled ? handleDisabled : handleClick,
+    onKeyDown: !disabled ? handleKeyDown : undefined,
+    onMouseOver: !disabled && onMouseOver ? onMouseOver : undefined,
+    onMouseOut: !disabled && onMouseOut ? onMouseOut : undefined,
+    onFocus: !disabled && onMouseOver ? handleFocusIn : undefined,
+    onBlur: !disabled && onMouseOut ? handleFocusOut : undefined,
+    className: menuTriggerClasses
+  }), isSubElement && /*#__PURE__*/React.createElement("div", {
+    className: styles['MrlMenuItem--item--hoverArea']
+  }), icon && /*#__PURE__*/React.createElement("span", {
+    className: styles['MrlMenuItem--item--icon-left']
+  }, /*#__PURE__*/React.createElement(MrlSvg, {
+    size: "small",
+    svg: icon
+  })), renderChildren(), rightIcon && /*#__PURE__*/React.createElement("span", {
+    className: styles['MrlMenuItem--item--icon-right']
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['MrlMenuItem--item--icon-right-container']
+  }, /*#__PURE__*/React.createElement(MrlSvg, {
+    svg: rightIcon,
+    size: "auto"
+  })))), renderMenu());
+}
+
+export { MrlMenuItem };
+//# sourceMappingURL=MrlMenuItem.js.map

package/dist/esm/components/menu/MrlMenuItem/MrlMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlMenuItem.js","sources":["../../../../../src/components/menu/MrlMenuItem/MrlMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, chevronRight } from '@muraldevkit/ds-icons';\nimport classnames from 'classnames';\nimport { DSIconType, getUniqueId, MrlMenuProps, MrlPopoverProps, MrlSvg } from '../../../';\nimport { SubMenuTypes, ComponentWithComponentType, AriaHasPopup, MenuItemRole } from '../constants';\nimport { MrlMenuContext } from '../context/MrlMenuContext';\n\nimport styles from './MrlMenuItem.module.scss';\n\nexport interface MrlMenuItemProps {\n\t/** ID for associated description */\n\tariaDescribedBy?: string;\n\n\t/** Indicates whether the menu item has a popup menu using aria-haspopup attribute */\n\tariaHasPopup?: AriaHasPopup;\n\n\t/**\n\t  Children to be rendered within the menu component\n\t */\n\tchildren: React.ReactNode | string;\n\n\t/** Classname for the menu item */\n\tclassName?: string;\n\n\t/** If the menu item is disabled */\n\tdisabled?: boolean;\n\n\t/** Icon for menu item */\n\ticon?: DSIconType;\n\n\t/** Unique ID for the menu item */\n\tid?: string;\n\n\t/** Callback to be called when the menu item is clicked */\n\tonClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n\n\t/** Callback to be called when the menu item is hovered */\n\tonMouseOver?: (e?: React.MouseEvent) => void;\n\n\t/** Callback to be called when the menu item is hovered out */\n\tonMouseOut?: (e?: React.MouseEvent) => void;\n\n\t/** Data-qa attribute for the menu item */\n\tdataQa?: string;\n\n\t/**\n\t * Role for the menu item\n\t *\n\t * When using `menuitemcheckbox` or `menuitemradio`, the menu item will be treated as a selectable item,\n\t * aria-checked will be set to 'true' or 'false' based on the selected state.\n\t *\n\t * @default 'menuitem' - for regular menu items\n\t * @example 'menuitemcheckbox' - for checkbox menu items\n\t * @example 'menuitemradio' - for radio menu items\n\t */\n\trole?: MenuItemRole;\n\n\t/** If the menu item is selected */\n\tselected?: boolean;\n}\n\nconst getSubMenuType = (child: React.ReactNode): SubMenuTypes | null => {\n\tif (React.isValidElement(child)) {\n\t\tconst type = (child.type as ComponentWithComponentType).componentType;\n\n\t\tif (type === 'Menu' || type === 'Popover') {\n\t\t\treturn type;\n\t\t}\n\t}\n\n\treturn null;\n};\n\n/**\n * MrlMenuItem component\n *\n * Renders a menu item to be used within the MrlMenu component\n * @param {MrlMenuItemProps} props - The props for the MrlMenuItem component\n * @returns {Element} - rendered MrlMenuItem component\n */\nexport function MrlMenuItem({\n\tariaDescribedBy,\n\tariaHasPopup,\n\tchildren,\n\tclassName,\n\tdataQa,\n\tdisabled,\n\ticon,\n\tid,\n\tonClick,\n\tonMouseOut,\n\tonMouseOver,\n\trole = 'menuitem',\n\tselected,\n\t...rest\n}: MrlMenuItemProps): JSX.Element {\n\tconst context = React.useContext(MrlMenuContext);\n\tconst menuItemRef = React.useRef<HTMLButtonElement>(null);\n\tconst [isSubElement, setIsSubElement] = React.useState(false);\n\tconst isSelectable = role === 'menuitemcheckbox' || role === 'menuitemradio';\n\n\tconst setFocusItem = (): void => {\n\t\tif (ariaHasPopup && ariaHasPopup !== 'menu' && context?.triggerRef?.current) {\n\t\t\tconst triggerElement = context.triggerRef.current;\n\t\t\tif (!triggerElement.id) {\n\t\t\t\ttriggerElement.id = getUniqueId('menu-trigger');\n\t\t\t}\n\n\t\t\tdocument.body.setAttribute('data-focus-item', triggerElement.id);\n\t\t}\n\t};\n\n\tconst handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tonClick?.(e);\n\n\t\tsetFocusItem();\n\n\t\tif (context && !!context.closeMenu && !isSubElement) {\n\t\t\tcontext.closeMenu();\n\t\t}\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n\t\t// WCAG specifices that space key should toggle the selection of a checkbox or radio button\n\t\t// but not close the menu. When a user presses the enter key on these items the menu should close.\n\t\tif (e.key === ' ' && !disabled) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\n\t\t\tonClick?.();\n\n\t\t\t// close the menu if we are not a selectable item (checkbox or radio button)\n\t\t\tif (!isSelectable) {\n\t\t\t\tsetFocusItem();\n\t\t\t\tcontext?.closeMenu?.();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleDisabled = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\tconst handleFocusIn = (): void => {\n\t\tonMouseOver?.();\n\t};\n\n\tconst handleFocusOut = (): void => {\n\t\tonMouseOut?.();\n\t};\n\n\tconst renderMenu = () => {\n\t\treturn React.Children.map(children, (child) => {\n\t\t\tif (React.isValidElement(child)) {\n\t\t\t\tconst type = (child.type as ComponentWithComponentType).componentType;\n\n\t\t\t\tif (type === 'Menu') {\n\t\t\t\t\treturn React.cloneElement(child as React.ReactElement<Partial<MrlMenuProps>>, {\n\t\t\t\t\t\talignment: 'start',\n\t\t\t\t\t\tcloseParent: context?.closeParent,\n\t\t\t\t\t\tisSubMenu: true,\n\t\t\t\t\t\tposition: 'right',\n\t\t\t\t\t\ttriggerRef: menuItemRef\n\t\t\t\t\t});\n\t\t\t\t} else if (type === 'Popover') {\n\t\t\t\t\treturn React.cloneElement(child as React.ReactElement<Partial<MrlPopoverProps>>, {\n\t\t\t\t\t\talignment: 'start',\n\t\t\t\t\t\tisSubMenu: true,\n\t\t\t\t\t\tpoint: false,\n\t\t\t\t\t\tposition: 'right',\n\t\t\t\t\t\ttriggerRef: menuItemRef\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t}\n\t\t});\n\t};\n\n\tconst renderChildren = () => {\n\t\treturn React.Children.map(children, (child) => {\n\t\t\tif (!getSubMenuType(child)) {\n\t\t\t\treturn child;\n\t\t\t}\n\t\t\treturn null;\n\t\t});\n\t};\n\n\tReact.useEffect(() => {\n\t\tconst hasSubMenu = React.Children.toArray(children).some((child) => getSubMenuType(child));\n\n\t\tsetIsSubElement(hasSubMenu);\n\t}, [children]);\n\n\tconst menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem');\n\tconst menuTriggerClasses = classnames(\n\t\tstyles['MrlMenuItem--item'],\n\t\t'MrlMenuItem--item',\n\t\t{\n\t\t\t[styles['MrlMenuItem--item--selected']]: selected,\n\t\t\t[styles['MrlMenuItem--item--withIcon']]: !!icon\n\t\t},\n\t\tclassName\n\t);\n\n\tconst rightIcon = isSubElement ? chevronRight : selected ? check : null;\n\tconst hasPopup = isSubElement ? 'menu' : ariaHasPopup ? ariaHasPopup : undefined;\n\n\treturn (\n\t\t<li {...rest} className={menuItemClasses} data-qa={dataQa}>\n\t\t\t<button\n\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\taria-disabled={disabled}\n\t\t\t\taria-haspopup={hasPopup}\n\t\t\t\t{...(isSelectable ? { 'aria-checked': selected ? 'true' : 'false' } : {})}\n\t\t\t\tdata-selected={selected}\n\t\t\t\tdata-qa={dataQa && `${dataQa}-button`}\n\t\t\t\tid={id}\n\t\t\t\tref={menuItemRef}\n\t\t\t\trole={role}\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={disabled ? handleDisabled : handleClick}\n\t\t\t\tonKeyDown={!disabled ? handleKeyDown : undefined}\n\t\t\t\tonMouseOver={!disabled && onMouseOver ? onMouseOver : undefined}\n\t\t\t\tonMouseOut={!disabled && onMouseOut ? onMouseOut : undefined}\n\t\t\t\tonFocus={!disabled && onMouseOver ? handleFocusIn : undefined}\n\t\t\t\tonBlur={!disabled && onMouseOut ? handleFocusOut : undefined}\n\t\t\t\tclassName={menuTriggerClasses}\n\t\t\t>\n\t\t\t\t{isSubElement && <div className={styles['MrlMenuItem--item--hoverArea']} />}\n\t\t\t\t{icon && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-left']}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={icon} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{renderChildren()}\n\t\t\t\t{rightIcon && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-right']}>\n\t\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-right-container']}>\n\t\t\t\t\t\t\t<MrlSvg svg={rightIcon} size=\"auto\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</button>\n\t\t\t{renderMenu()}\n\t\t</li>\n\t);\n}\n"],"names":["getSubMenuType","child","React","isValidElement","type","componentType","MrlMenuItem","_ref","ariaDescribedBy","ariaHasPopup","children","className","dataQa","disabled","icon","id","onClick","onMouseOut","onMouseOver","_ref$role","role","selected","rest","_objectWithoutProperties","_excluded","context","useContext","MrlMenuContext","menuItemRef","useRef","_React$useState","useState","_React$useState2","_slicedToArray","isSubElement","setIsSubElement","isSelectable","setFocusItem","_context$triggerRef","triggerRef","current","triggerElement","getUniqueId","document","body","setAttribute","handleClick","e","preventDefault","stopPropagation","closeMenu","handleKeyDown","key","_context$closeMenu","call","handleDisabled","handleFocusIn","handleFocusOut","renderMenu","Children","map","cloneElement","alignment","closeParent","isSubMenu","position","point","renderChildren","useEffect","hasSubMenu","toArray","some","menuItemClasses","classnames","styles","menuTriggerClasses","_defineProperty","rightIcon","chevronRight","check","hasPopup","undefined","createElement","_extends","concat","ref","onKeyDown","onFocus","onBlur","MrlSvg","size","svg"],"mappings":"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"}

package/dist/esm/components/menu/MrlMenuItem/MrlMenuItem.module.scss.js

@@ -0,0 +1,4 @@
+var styles = {"MrlMenuItem":"MrlMenuItem--omonY","MrlMenuItem--item":"MrlMenuItem--item--crRkZ","MrlMenuItem--item--selected":"MrlMenuItem--item--selected--ExGKp","MrlMenuItem--item--withIcon":"MrlMenuItem--item--withIcon--cgg2B","MrlMenuItem--item--hoverArea":"MrlMenuItem--item--hoverArea--mtgGX","MrlMenuItem--item--submenuOpen":"MrlMenuItem--item--submenuOpen--YGVyO","MrlMenuItem--item--icon-left":"MrlMenuItem--item--icon-left--H5NdN","MrlMenuItem--item--submenuIcon-left":"MrlMenuItem--item--submenuIcon-left--t7WKw","MrlMenuItem--item--icon-right":"MrlMenuItem--item--icon-right--vKWKp","MrlMenuItem--item--icon-right-container":"MrlMenuItem--item--icon-right-container--wiZqN","MrlMenuItem--item--linkOpenIcon":"MrlMenuItem--item--linkOpenIcon--rvm9r"};
+
+export { styles as default };
+//# sourceMappingURL=MrlMenuItem.module.scss.js.map

package/dist/esm/components/menu/MrlMenuItem/MrlMenuItem.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlMenuItem.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/menu/MrlMenuItemLink/MrlMenuItemLink.js

@@ -0,0 +1,72 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import { linkOpen } from '@muraldevkit/ds-icons';
+import classnames from 'classnames';
+import styles from '../MrlMenuItem/MrlMenuItem.module.scss.js';
+import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
+
+var _excluded = ["ariaDescribedBy", "children", "className", "dataQa", "disabled", "href", "icon", "id", "onClick", "selected", "target"];
+/**
+ * MrlMenuItem component
+ *
+ * Renders a menu item to be used within the MrlMenu component
+ * @param {MrlMenuItemLinkProps} props - The props for the MrlMenuItem component
+ * @returns {Element} - rendered MrlMenuItem component
+ */
+function MrlMenuItemLink(_ref) {
+  var ariaDescribedBy = _ref.ariaDescribedBy,
+    children = _ref.children,
+    className = _ref.className,
+    dataQa = _ref.dataQa,
+    disabled = _ref.disabled,
+    href = _ref.href,
+    icon = _ref.icon,
+    id = _ref.id,
+    onClick = _ref.onClick,
+    selected = _ref.selected,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_self' : _ref$target,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleClick = function handleClick(e) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  var handleDisabled = function handleDisabled(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  var menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem', className);
+  var menuTriggerClasses = classnames(styles['MrlMenuItem--item'], 'MrlMenuItem--item');
+  var isExternalLink = target === '_blank';
+  var linkRel = isExternalLink ? 'noopener noreferrer' : rest.rel;
+  return /*#__PURE__*/React.createElement("li", {
+    className: menuItemClasses,
+    "data-qa": dataQa
+  }, /*#__PURE__*/React.createElement("a", _extends({}, rest, {
+    "aria-describedby": ariaDescribedBy,
+    "aria-disabled": disabled,
+    "data-selected": selected,
+    "data-qa": dataQa && "".concat(dataQa, "-button"),
+    id: id,
+    role: "menuitem",
+    onClick: disabled ? handleDisabled : handleClick,
+    className: menuTriggerClasses,
+    rel: linkRel,
+    href: href,
+    target: target
+  }), icon && /*#__PURE__*/React.createElement("span", {
+    className: styles['MrlMenuItem--item--submenuIcon-left']
+  }, /*#__PURE__*/React.createElement(MrlSvg, {
+    size: "small",
+    svg: icon
+  })), children, isExternalLink && /*#__PURE__*/React.createElement("span", {
+    className: styles['MrlMenuItem--item--icon-right']
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['MrlMenuItem--item--linkOpenIcon']
+  }, /*#__PURE__*/React.createElement(MrlSvg, {
+    svg: linkOpen,
+    size: "auto"
+  })))));
+}
+
+export { MrlMenuItemLink };
+//# sourceMappingURL=MrlMenuItemLink.js.map

package/dist/esm/components/menu/MrlMenuItemLink/MrlMenuItemLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlMenuItemLink.js","sources":["../../../../../src/components/menu/MrlMenuItemLink/MrlMenuItemLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { linkOpen } from '@muraldevkit/ds-icons';\nimport classnames from 'classnames';\nimport { DSIconType, MrlSvg } from '../../../';\nimport styles from '../MrlMenuItem/MrlMenuItem.module.scss';\n\nexport interface MrlMenuItemLinkProps {\n\t/** ID for associated description */\n\tariaDescribedBy?: string;\n\n\t/**\n\t  Children to be rendered within the menu component\n\t */\n\tchildren: React.ReactNode | string;\n\n\t/** Class names for the menu item */\n\tclassName?: string;\n\n\t/** If the menu item is disabled */\n\tdisabled?: boolean;\n\n\t/** Href for the menu item */\n\thref: string;\n\n\t/** Icon for menu item */\n\ticon?: DSIconType;\n\n\t/** Target for links */\n\ttarget?: string;\n\n\t/** Unique ID for the menu item */\n\tid?: string;\n\n\t/** Callback to be called when the menu item is clicked */\n\tonClick?: (e: React.MouseEvent<HTMLElement>) => void;\n\n\t/** Data-qa attribute for the menu item */\n\tdataQa?: string;\n\n\t/** If the menu item is selected */\n\tselected?: boolean;\n\n\t/** Rel attr for the menu item */\n\trel?: string;\n}\n\n/**\n * MrlMenuItem component\n *\n * Renders a menu item to be used within the MrlMenu component\n * @param {MrlMenuItemLinkProps} props - The props for the MrlMenuItem component\n * @returns {Element} - rendered MrlMenuItem component\n */\nexport function MrlMenuItemLink({\n\tariaDescribedBy,\n\tchildren,\n\tclassName,\n\tdataQa,\n\tdisabled,\n\thref,\n\ticon,\n\tid,\n\tonClick,\n\tselected,\n\ttarget = '_self',\n\t...rest\n}: MrlMenuItemLinkProps): JSX.Element {\n\tconst handleClick = (e: React.MouseEvent<HTMLElement>): void => {\n\t\tonClick?.(e);\n\t};\n\n\tconst handleDisabled = (e: React.MouseEvent<HTMLElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t};\n\n\tconst menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem', className);\n\tconst menuTriggerClasses = classnames(styles['MrlMenuItem--item'], 'MrlMenuItem--item');\n\n\tconst isExternalLink = target === '_blank';\n\tconst linkRel = isExternalLink ? 'noopener noreferrer' : rest.rel;\n\n\treturn (\n\t\t<li className={menuItemClasses} data-qa={dataQa}>\n\t\t\t<a\n\t\t\t\t{...rest}\n\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\taria-disabled={disabled}\n\t\t\t\tdata-selected={selected}\n\t\t\t\tdata-qa={dataQa && `${dataQa}-button`}\n\t\t\t\tid={id}\n\t\t\t\trole=\"menuitem\"\n\t\t\t\tonClick={disabled ? handleDisabled : handleClick}\n\t\t\t\tclassName={menuTriggerClasses}\n\t\t\t\trel={linkRel}\n\t\t\t\thref={href}\n\t\t\t\ttarget={target}\n\t\t\t>\n\t\t\t\t{icon && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--submenuIcon-left']}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={icon} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t\t{isExternalLink && (\n\t\t\t\t\t<span className={styles['MrlMenuItem--item--icon-right']}>\n\t\t\t\t\t\t<span className={styles['MrlMenuItem--item--linkOpenIcon']}>\n\t\t\t\t\t\t\t<MrlSvg svg={linkOpen} size=\"auto\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</a>\n\t\t</li>\n\t);\n}\n"],"names":["MrlMenuItemLink","_ref","ariaDescribedBy","children","className","dataQa","disabled","href","icon","id","onClick","selected","_ref$target","target","rest","_objectWithoutProperties","_excluded","handleClick","e","handleDisabled","preventDefault","stopPropagation","menuItemClasses","classnames","styles","menuTriggerClasses","isExternalLink","linkRel","rel","React","createElement","_extends","concat","role","MrlSvg","size","svg","linkOpen"],"mappings":"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"}

package/dist/esm/components/menu/context/MrlMenuContext.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+/**
+ * Adds context for the MrlMenu component
+ */
+var MrlMenuContext = /*#__PURE__*/React.createContext(undefined);
+
+export { MrlMenuContext };
+//# sourceMappingURL=MrlMenuContext.js.map

package/dist/esm/components/menu/context/MrlMenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlMenuContext.js","sources":["../../../../../src/components/menu/context/MrlMenuContext.ts"],"sourcesContent":["import * as React from 'react';\n\ntype MrlMenuContext = {\n\t/**\n\t * Close menu is shared in context to allow for closing the menu from a child component\n\t *\n\t * @returns {void}\n\t */\n\tcloseMenu: (shouldCloseParent?: boolean) => void;\n\n\t/**\n\t * Close parent is shared in context to allow for closing the parent menu from a submenu\n\t *\n\t * @returns {void}\n\t */\n\tcloseParent?: () => void;\n\n\t/**\n\t * Reference to the menu trigger button for focus restoration\n\t */\n\ttriggerRef?: React.RefObject<HTMLElement>;\n};\n\n/**\n * Adds context for the MrlMenu component\n */\nexport const MrlMenuContext = React.createContext<MrlMenuContext | undefined>(undefined);\n"],"names":["MrlMenuContext","React","createContext","undefined"],"mappings":";;AAuBA;AACA;AACA;AACO,IAAMA,cAAc,gBAAGC,KAAK,CAACC,aAAa,CAA6BC,SAAS;;;;"}