@muraldevkit/ui-toolkit 4.66.0-dev-7K0j.1 → 4.66.0-dev-T3Jw.1

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

@@ -1,139 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { check, chevronRight } from '@muraldevkit/ds-icons';
-import classnames from 'classnames';
-import { getUniqueId, MrlSvg } from '../../../';
-import { MrlMenuContext } from '../context/MrlMenuContext';
-import styles from './MrlMenuItem.module.scss.js';
-const getSubMenuType = (child) => {
-    if (React.isValidElement(child)) {
-        const 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
- */
-export function MrlMenuItem(_a) {
-    var { ariaDescribedBy, ariaHasPopup, children, className, dataQa, disabled, icon, id, onClick, onMouseOut, onMouseOver, role = 'menuitem', selected } = _a, rest = __rest(_a, ["ariaDescribedBy", "ariaHasPopup", "children", "className", "dataQa", "disabled", "icon", "id", "onClick", "onMouseOut", "onMouseOver", "role", "selected"]);
-    const context = React.useContext(MrlMenuContext);
-    const menuItemRef = React.useRef(null);
-    const [isSubElement, setIsSubElement] = React.useState(false);
-    const isSelectable = role === 'menuitemcheckbox' || role === 'menuitemradio';
-    const setFocusItem = () => {
-        var _a;
-        if (ariaHasPopup && ariaHasPopup !== 'menu' && ((_a = context === null || context === void 0 ? void 0 : context.triggerRef) === null || _a === void 0 ? void 0 : _a.current)) {
-            const triggerElement = context.triggerRef.current;
-            if (!triggerElement.id) {
-                triggerElement.id = getUniqueId('menu-trigger');
-            }
-            document.body.setAttribute('data-focus-item', triggerElement.id);
-        }
-    };
-    const handleClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        setFocusItem();
-        if (context && !!context.closeMenu && !isSubElement) {
-            context.closeMenu();
-        }
-    };
-    const handleKeyDown = (e) => {
-        var _a;
-        // 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) {
-                setFocusItem();
-                (_a = context === null || context === void 0 ? void 0 : context.closeMenu) === null || _a === void 0 ? void 0 : _a.call(context);
-            }
-        }
-    };
-    const handleDisabled = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    const handleFocusIn = () => {
-        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver();
-    };
-    const handleFocusOut = () => {
-        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut();
-    };
-    const renderMenu = () => {
-        return React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                const type = child.type.componentType;
-                if (type === 'Menu') {
-                    return 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 React.cloneElement(child, {
-                        alignment: 'start',
-                        isSubMenu: true,
-                        point: false,
-                        position: 'right',
-                        triggerRef: menuItemRef
-                    });
-                }
-                return null;
-            }
-        });
-    };
-    const renderChildren = () => {
-        return React.Children.map(children, (child) => {
-            if (!getSubMenuType(child)) {
-                return child;
-            }
-            return null;
-        });
-    };
-    React.useEffect(() => {
-        const hasSubMenu = React.Children.toArray(children).some((child) => getSubMenuType(child));
-        setIsSubElement(hasSubMenu);
-    }, [children]);
-    const menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem');
-    const menuTriggerClasses = classnames(styles['MrlMenuItem--item'], 'MrlMenuItem--item', {
-        [styles['MrlMenuItem--item--selected']]: selected,
-        [styles['MrlMenuItem--item--withIcon']]: !!icon
-    }, className);
-    const rightIcon = isSubElement ? chevronRight : selected ? check : null;
-    const hasPopup = isSubElement ? 'menu' : ariaHasPopup ? ariaHasPopup : undefined;
-    return (React.createElement("li", Object.assign({}, rest, { className: menuItemClasses, "data-qa": dataQa }),
-        React.createElement("button", Object.assign({ "aria-describedby": ariaDescribedBy, "aria-disabled": disabled, "aria-haspopup": hasPopup }, (isSelectable ? { 'aria-checked': selected ? 'true' : 'false' } : {}), { "data-selected": selected, "data-qa": dataQa && `${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 && React.createElement("div", { className: styles['MrlMenuItem--item--hoverArea'] }),
-            icon && (React.createElement("span", { className: styles['MrlMenuItem--item--icon-left'] },
-                React.createElement(MrlSvg, { size: "small", svg: icon }))),
-            renderChildren(),
-            rightIcon && (React.createElement("span", { className: styles['MrlMenuItem--item--icon-right'] },
-                React.createElement("span", { className: styles['MrlMenuItem--item--icon-right-container'] },
-                    React.createElement(MrlSvg, { svg: rightIcon, size: "auto" }))))),
-        renderMenu()));
-}

package/dist/esm/components/menu/MrlMenuItem/MrlMenuItem.module.css

@@ -1,156 +0,0 @@
-/* stylelint-disable scss/operator-no-newline-after */
-.mrl-u-focus-wrapper--4ZhFe {
-  position: relative;
-}
-
-:root,
-.MrlDivider--OMEfB {
-  --mrl-divider-size: var(--mrl-spacing-01);
-  --mrl-divider-spacing: var(--mrl-space-stack-section-divider);
-  --mrl-divider-color: var(--mrl-black-opacity-01);
-}
-
-.MrlDivider--none--MCvVx {
-  --mrl-divider-spacing: 0;
-}
-
-.MrlDivider--small--s33sD {
-  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-small);
-}
-
-.MrlDivider--large--sGMdQ {
-  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-large);
-}
-
-.MrlDivider--xlarge--Ig6s8 {
-  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-xlarge);
-}
-
-.MrlDivider--inverse---zHhY {
-  --mrl-divider-color: var(--mrl-white-opacity-02);
-}
-
-.MrlDivider--vertical--mLkmE {
-  --mrl-divider-spacing: var(--mrl-spacing-02);
-}
-.MrlDivider--vertical--mLkmE.MrlDivider--none--MCvVx {
-  --mrl-divider-spacing: 0;
-}
-
-.MrlDivider--thin--19wM7 {
-  --mrl-divider-size: var(--mrl-line-width-border-fine);
-}
-
-.MrlMenuItem--7BKSq {
-  border-radius: var(--mrl-border-radius-content-large);
-  list-style-type: none;
-  margin: 0;
-  margin-bottom: var(--mrl-space-stack-related-small);
-  text-align: left;
-  text-indent: 0;
-  white-space: nowrap;
-}
-.MrlMenuItem--7BKSq > .subMenu--5rXaO {
-  bottom: calc(var(--mrl-space-stack-controls) / 2);
-  display: none;
-  left: calc(100% + var(--mrl-space-stack-controls) / 2);
-  position: absolute;
-  top: calc(var(--mrl-space-stack-controls) / -2);
-}
-.MrlMenuItem--7BKSq > .subMenu--5rXaO::before {
-  bottom: calc(var(--mrl-space-stack-controls) / 2);
-  content: "";
-  cursor: pointer;
-  height: 100%;
-  left: calc(var(--mrl-space-stack-controls) * -1);
-  position: absolute;
-  top: calc(var(--mrl-space-stack-controls) / 2);
-  width: calc(var(--mrl-space-stack-controls) + 0.125rem);
-}
-.MrlMenuItem--7BKSq [aria-expanded=true] + .subMenu--5rXaO {
-  display: flex;
-}
-.MrlMenuItem--7BKSq a {
-  text-decoration: none;
-}
-.MrlMenuItem--7BKSq:last-child {
-  margin-bottom: 0;
-}
-
-.MrlMenuItem--item--d9WXo {
-  font-family: var(--mrl-body-font);
-  font-size: var(--mrl-type-size-text-xsmall);
-  font-weight: var(--mrl-type-weight-interactive);
-  letter-spacing: var(--mrl-type-spacing-interactive-xsmall);
-  line-height: var(--mrl-type-line-height-interactive-xsmall);
-  align-items: center;
-  background: none;
-  border: none;
-  border-radius: var(--mrl-border-radius-content-large);
-  color: var(--mrl-color-text);
-  cursor: pointer;
-  display: flex;
-  height: var(--mrl-spacing-08);
-  justify-content: flex-start;
-  padding: var(--mrl-space-inset);
-  padding-left: var(--mrl-spacing-04);
-  position: relative;
-  white-space: nowrap;
-  width: 100%;
-}
-.MrlMenuItem--item--selected--DD4Vp {
-  background: var(--mrl-color-background-inverse-hover);
-  color: var(--mrl-color-text-inverse);
-}
-.MrlMenuItem--item--withIcon--gH7VT {
-  padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-space-inset) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-space-inset-control-small);
-}
-.MrlMenuItem--item--content--VzprM {
-  position: relative;
-  z-index: 1;
-}
-.MrlMenuItem--item--hoverArea--2L0-9 {
-  height: 100%;
-  left: -30px;
-  position: absolute;
-  width: 215px;
-}
-.MrlMenuItem--item--d9WXo .mrl-svg--DMW-- {
-  min-width: var(--mrl-spacing-06);
-}
-.MrlMenuItem--item--d9WXo.isLink--TPROU {
-  justify-content: flex-start;
-}
-.MrlMenuItem--item--d9WXo:focus-visible {
-  outline: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
-  outline-offset: var(--mrl-spacing-01);
-}
-.MrlMenuItem--item--d9WXo:hover:not(.MrlMenuItem--item--selected--DD4Vp, [aria-disabled=true]), .MrlMenuItem--item--submenuOpen--nJuiK {
-  background: var(--mrl-black-opacity-00);
-  color: var(--mrl-color-text-hover);
-}
-.MrlMenuItem--item--d9WXo:active:not(.MrlMenuItem--item--selected--DD4Vp, [aria-disabled=true]) {
-  background: var(--mrl-black-opacity-01);
-  color: var(--mrl-color-text-active);
-}
-.MrlMenuItem--item--icon-left--ad7JL {
-  display: flex;
-  margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
-}
-.MrlMenuItem--item--icon-right--HRheK {
-  margin-left: auto;
-}
-.MrlMenuItem--item--icon-right-container--9sJEO {
-  display: flex;
-  margin-left: var(--mrl-space-inset-control-small);
-  width: var(--mrl-spacing-05);
-}
-.MrlMenuItem--item--d9WXo[aria-disabled=true] {
-  background: transparent;
-  color: var(--mrl-color-text-disabled);
-  pointer-events: none;
-}
-.MrlMenuItem--item--d9WXo span,
-.MrlMenuItem--item--d9WXo svg {
-  pointer-events: none;
-}

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

@@ -1,25 +0,0 @@
-import "./MrlMenuItem.module.css";
-export default {
-	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--4ZhFe",
-	"MrlDivider": "MrlDivider--OMEfB",
-	"MrlDivider--none": "MrlDivider--none--MCvVx",
-	"MrlDivider--small": "MrlDivider--small--s33sD",
-	"MrlDivider--large": "MrlDivider--large--sGMdQ",
-	"MrlDivider--xlarge": "MrlDivider--xlarge--Ig6s8",
-	"MrlDivider--inverse": "MrlDivider--inverse---zHhY",
-	"MrlDivider--vertical": "MrlDivider--vertical--mLkmE",
-	"MrlDivider--thin": "MrlDivider--thin--19wM7",
-	"MrlMenuItem": "MrlMenuItem--7BKSq",
-	"subMenu": "subMenu--5rXaO",
-	"MrlMenuItem--item": "MrlMenuItem--item--d9WXo",
-	"MrlMenuItem--item--selected": "MrlMenuItem--item--selected--DD4Vp",
-	"MrlMenuItem--item--withIcon": "MrlMenuItem--item--withIcon--gH7VT",
-	"MrlMenuItem--item--content": "MrlMenuItem--item--content--VzprM",
-	"MrlMenuItem--item--hoverArea": "MrlMenuItem--item--hoverArea--2L0-9",
-	"mrl-svg": "mrl-svg--DMW--",
-	"isLink": "isLink--TPROU",
-	"MrlMenuItem--item--submenuOpen": "MrlMenuItem--item--submenuOpen--nJuiK",
-	"MrlMenuItem--item--icon-left": "MrlMenuItem--item--icon-left--ad7JL",
-	"MrlMenuItem--item--icon-right": "MrlMenuItem--item--icon-right--HRheK",
-	"MrlMenuItem--item--icon-right-container": "MrlMenuItem--item--icon-right-container--9sJEO"
-};

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

@@ -1 +0,0 @@
-export * from './MrlMenuItem';

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

@@ -1,39 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-import { MrlSvg } from '../../../';
-import styles from '../MrlMenuItem/MrlMenuItem.module.scss.js';
-/**
- * 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
- */
-export function MrlMenuItemLink(_a) {
-    var { ariaDescribedBy, children, className, dataQa, disabled, href, icon, id, onClick, selected, target = '_self' } = _a, rest = __rest(_a, ["ariaDescribedBy", "children", "className", "dataQa", "disabled", "href", "icon", "id", "onClick", "selected", "target"]);
-    const handleClick = (e) => {
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    };
-    const handleDisabled = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    const menuItemClasses = classnames(styles['MrlMenuItem'], 'MrlMenuItem', className);
-    const menuTriggerClasses = classnames(styles['MrlMenuItem--item'], 'MrlMenuItem--item');
-    return (React.createElement("li", { className: menuItemClasses, "data-qa": dataQa },
-        React.createElement("a", Object.assign({}, rest, { "aria-describedby": ariaDescribedBy, "aria-disabled": disabled, "data-selected": selected, "data-qa": dataQa && `${dataQa}-button`, id: id, role: "menuitem", onClick: disabled ? handleDisabled : handleClick, className: menuTriggerClasses, rel: "noopener noreferrer", href: href, target: target }),
-            icon && (React.createElement("span", { className: styles['MrlMenuItem--item--submenuIcon-left'] },
-                React.createElement(MrlSvg, { size: "small", svg: icon }))),
-            children)));
-}

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

@@ -1 +0,0 @@
-export * from './MrlMenuItemLink';

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,5 +0,0 @@
-import * as React from 'react';
-/**
- * Adds context for the MrlMenu component
- */
-export const MrlMenuContext = React.createContext(undefined);

package/dist/esm/components/menu/demo/MenuByConfig.js

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { MrlMenu, MrlMenuItem } from '../';
-import { MrlButton } from '../../button';
-/**
- * Demo of a menu with a trigger for stories and testing
- *
- * @returns {Element} The menu with trigger demo
- */
-export const MenuByConfig = () => {
-    const triggerRef = React.useRef(null);
-    const items = [
-        {
-            children: 'Configured menu item 1',
-            dataQa: `menu-item-1`,
-            id: 'menu-item-1',
-            onClick: () => {
-                console.log('Clicked menu item 1');
-            }
-        },
-        {
-            children: 'Configured menu item 2',
-            dataQa: `menu-item-2`,
-            id: 'menu-item-2',
-            onClick: () => {
-                console.log('Clicked menu item 2');
-            }
-        }
-    ];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MrlButton, { kind: "primary", ref: triggerRef, text: "Menu Trigger" }),
-        React.createElement(MrlMenu, { position: "top", triggerRef: triggerRef }, items.map((item) => (React.createElement(MrlMenuItem, { dataQa: item.dataQa, id: item.id, key: item.id, onClick: item.onClick }, item.children))))));
-};

package/dist/esm/components/menu/demo/MenuWithPopover.js

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { MrlMenu, MrlMenuItem } from '..';
-import { MrlButton } from '../../button';
-import { MrlPopover } from '../../popover/MrlPopover';
-import { MrlText, MrlTextHeading } from '../../text';
-import { noop } from '../../../utils';
-import styles from './MenuWithTrigger.module.scss.js';
-/**
- * Demo of a menu with a trigger for stories and testing
- *
- * @param {MenuWithPopoverProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export const MenuWithPopover = ({ alignment = 'center', position = 'bottom', spacing = 'default', actionState = { actionType: null, isOpen: false }, onClose, triggerAlignment = 'left' }) => {
-    const triggerRef = React.useRef(null);
-    return (React.createElement("div", { className: styles[`trigger-${triggerAlignment}`] },
-        React.createElement(MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger" }),
-        React.createElement(MrlMenu, { spacing: spacing, position: position, actionState: actionState || { actionType: null, isOpen: false }, alignment: alignment, triggerRef: triggerRef, onClose: onClose },
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 0"),
-            React.createElement(MrlMenuItem, { onClick: noop },
-                "Example Popover",
-                React.createElement(MrlPopover, { "data-testid": "popover" },
-                    React.createElement(MrlTextHeading, { level: "3" }, "Popover Example"),
-                    React.createElement(MrlText, null, "Lorem ipsum dolor sit amet"))),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 5"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 6"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 7"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 8"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 9"))));
-};

package/dist/esm/components/menu/demo/MenuWithSubmenu.js

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { MrlMenu, MrlMenuItem } from '../';
-import { MrlButton } from '../../button';
-import { noop } from '../../../utils';
-import { frameworks } from '@muraldevkit/ds-icons';
-import styles from './MenuWithTrigger.module.scss.js';
-/**
- * Demo of a menu with a trigger for stories and testing
- *
- * @param {MenuWithSubmenuProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export const MenuWithSubmenu = ({ alignment = 'center', position = 'bottom', spacing = 'default', actionState = { actionType: null, isOpen: false }, onClose, triggerAlignment = 'left' }) => {
-    const triggerRef = React.useRef(null);
-    const triggerRefSmall = React.useRef(null);
-    return (React.createElement("div", { className: styles[`trigger-${triggerAlignment}`] },
-        React.createElement(MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger - Large Menu" }),
-        React.createElement(MrlMenu, { spacing: spacing, position: position, actionState: actionState || { actionType: null, isOpen: false }, alignment: alignment, triggerRef: triggerRef, onClose: onClose },
-            React.createElement(MrlMenuItem, { onClick: noop },
-                "Example Submenu Item 0",
-                React.createElement(MrlMenu, { spacing: spacing },
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 1"),
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 2"),
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 3"))),
-            React.createElement(MrlMenuItem, { icon: frameworks, onClick: () => console.log('Testing') }, "Example Menu Item 2"),
-            React.createElement(MrlMenuItem, { onClick: () => console.log('Testing 2') }, "Example Menu Item 3"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 4"),
-            React.createElement(MrlMenuItem, { icon: frameworks, onClick: noop },
-                "Example Submenu Item 1",
-                React.createElement(MrlMenu, { spacing: spacing },
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 1"),
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 2"),
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 3"))),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 5"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 6"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 7"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 8"),
-            React.createElement(MrlMenuItem, { onClick: noop },
-                "Example Submenu Item 1",
-                React.createElement(MrlMenu, { spacing: spacing },
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 1"),
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 2"),
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 3"))),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 9")),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(MrlButton, { id: "menu-demo-trigger-small", ref: triggerRefSmall, text: "Menu Trigger - Small Menu" }),
-        React.createElement(MrlMenu, { spacing: spacing, position: position, actionState: actionState || { actionType: null, isOpen: false }, alignment: alignment, triggerRef: triggerRefSmall, onClose: onClose },
-            React.createElement(MrlMenuItem, { icon: frameworks, onClick: () => console.log('Testing') }, "Example Menu Item 1"),
-            React.createElement(MrlMenuItem, { onClick: noop },
-                "Example Submenu Item 0",
-                React.createElement(MrlMenu, { spacing: spacing },
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 1"),
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 2"),
-                    React.createElement(MrlMenuItem, { onClick: noop }, "Example Submenu Item 3"))))));
-};

package/dist/esm/components/menu/demo/MenuWithTrigger.js

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { MrlMenu, MrlMenuItem } from '../';
-import { MrlButton } from '../../button';
-import { noop } from '../../../utils';
-import styles from './MenuWithTrigger.module.scss.js';
-/**
- * Demo of a menu with a trigger for stories and testing
- *
- * @param {MenuWithTriggerProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export const MenuWithTrigger = ({ alignment = 'center', position = 'bottom', spacing = 'default', actionState = { actionType: null, isOpen: false }, customPosition, onClose, triggerAlignment = 'left' }) => {
-    const triggerRef = React.useRef(null);
-    return (React.createElement("div", { className: styles[`trigger-${triggerAlignment}`] },
-        React.createElement(MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger" }),
-        React.createElement(MrlMenu, { spacing: spacing, position: position, actionState: actionState || { actionType: null, isOpen: false }, alignment: alignment, triggerRef: triggerRef, onClose: onClose, customPosition: customPosition, "data-qa": "menu-demo" },
-            React.createElement(MrlMenuItem, { onClick: noop, onMouseOver: noop, onMouseOut: noop }, "Example Menu Item 1"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 2"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 3"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 4"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item But Longer"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 5"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 6"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 7"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 8"),
-            React.createElement(MrlMenuItem, { onClick: noop }, "Example Menu Item 9"))));
-};

package/dist/esm/components/menu/demo/MenuWithTrigger.module.css

@@ -1,9 +0,0 @@
-.trigger-left--Fnodd {
-  text-align: left;
-}
-.trigger-right--zjA-A {
-  text-align: right;
-}
-.trigger-center--n6isM {
-  text-align: center;
-}

package/dist/esm/components/menu/demo/MenuWithTrigger.module.scss.js

@@ -1,6 +0,0 @@
-import "./MenuWithTrigger.module.css";
-export default {
-	"trigger-left": "trigger-left--Fnodd",
-	"trigger-right": "trigger-right--zjA-A",
-	"trigger-center": "trigger-center--n6isM"
-};