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

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

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlMenuItemLink = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const __1 = require("../../../");
+const MrlMenuItem_module_scss_1 = __importDefault(require("../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
+ */
+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 = (0, classnames_1.default)(MrlMenuItem_module_scss_1.default['MrlMenuItem'], 'MrlMenuItem', className);
+    const menuTriggerClasses = (0, classnames_1.default)(MrlMenuItem_module_scss_1.default['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: MrlMenuItem_module_scss_1.default['MrlMenuItem--item--submenuIcon-left'] },
+                React.createElement(__1.MrlSvg, { size: "small", svg: icon }))),
+            children)));
+}
+exports.MrlMenuItemLink = MrlMenuItemLink;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlMenuItemLink"), exports);

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlMenuContext = void 0;
+const React = __importStar(require("react"));
+/**
+ * Adds context for the MrlMenu component
+ */
+exports.MrlMenuContext = React.createContext(undefined);

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

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuByConfig = void 0;
+const React = __importStar(require("react"));
+const __1 = require("../");
+const button_1 = require("../../button");
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @returns {Element} The menu with trigger demo
+ */
+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(button_1.MrlButton, { kind: "primary", ref: triggerRef, text: "Menu Trigger" }),
+        React.createElement(__1.MrlMenu, { position: "top", triggerRef: triggerRef }, items.map((item) => (React.createElement(__1.MrlMenuItem, { dataQa: item.dataQa, id: item.id, key: item.id, onClick: item.onClick }, item.children))))));
+};
+exports.MenuByConfig = MenuByConfig;

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

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuWithPopover = void 0;
+const React = __importStar(require("react"));
+const __1 = require("..");
+const button_1 = require("../../button");
+const MrlPopover_1 = require("../../popover/MrlPopover");
+const text_1 = require("../../text");
+const utils_1 = require("../../../utils");
+const MenuWithTrigger_module_scss_1 = __importDefault(require("./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
+ */
+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: MenuWithTrigger_module_scss_1.default[`trigger-${triggerAlignment}`] },
+        React.createElement(button_1.MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger" }),
+        React.createElement(__1.MrlMenu, { spacing: spacing, position: position, actionState: actionState || { actionType: null, isOpen: false }, alignment: alignment, triggerRef: triggerRef, onClose: onClose },
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 0"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop },
+                "Example Popover",
+                React.createElement(MrlPopover_1.MrlPopover, { "data-testid": "popover" },
+                    React.createElement(text_1.MrlTextHeading, { level: "3" }, "Popover Example"),
+                    React.createElement(text_1.MrlText, null, "Lorem ipsum dolor sit amet"))),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 5"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 6"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 7"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 8"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 9"))));
+};
+exports.MenuWithPopover = MenuWithPopover;

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

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuWithSubmenu = void 0;
+const React = __importStar(require("react"));
+const __1 = require("../");
+const button_1 = require("../../button");
+const utils_1 = require("../../../utils");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const MenuWithTrigger_module_scss_1 = __importDefault(require("./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
+ */
+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: MenuWithTrigger_module_scss_1.default[`trigger-${triggerAlignment}`] },
+        React.createElement(button_1.MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger - Large Menu" }),
+        React.createElement(__1.MrlMenu, { spacing: spacing, position: position, actionState: actionState || { actionType: null, isOpen: false }, alignment: alignment, triggerRef: triggerRef, onClose: onClose },
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop },
+                "Example Submenu Item 0",
+                React.createElement(__1.MrlMenu, { spacing: spacing },
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 1"),
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 2"),
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 3"))),
+            React.createElement(__1.MrlMenuItem, { icon: ds_icons_1.frameworks, onClick: () => console.log('Testing') }, "Example Menu Item 2"),
+            React.createElement(__1.MrlMenuItem, { onClick: () => console.log('Testing 2') }, "Example Menu Item 3"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 4"),
+            React.createElement(__1.MrlMenuItem, { icon: ds_icons_1.frameworks, onClick: utils_1.noop },
+                "Example Submenu Item 1",
+                React.createElement(__1.MrlMenu, { spacing: spacing },
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 1"),
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 2"),
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 3"))),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 5"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 6"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 7"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 8"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop },
+                "Example Submenu Item 1",
+                React.createElement(__1.MrlMenu, { spacing: spacing },
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 1"),
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 2"),
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 3"))),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 9")),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(button_1.MrlButton, { id: "menu-demo-trigger-small", ref: triggerRefSmall, text: "Menu Trigger - Small Menu" }),
+        React.createElement(__1.MrlMenu, { spacing: spacing, position: position, actionState: actionState || { actionType: null, isOpen: false }, alignment: alignment, triggerRef: triggerRefSmall, onClose: onClose },
+            React.createElement(__1.MrlMenuItem, { icon: ds_icons_1.frameworks, onClick: () => console.log('Testing') }, "Example Menu Item 1"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop },
+                "Example Submenu Item 0",
+                React.createElement(__1.MrlMenu, { spacing: spacing },
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 1"),
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 2"),
+                    React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Submenu Item 3"))))));
+};
+exports.MenuWithSubmenu = MenuWithSubmenu;

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

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuWithTrigger = void 0;
+const React = __importStar(require("react"));
+const __1 = require("../");
+const button_1 = require("../../button");
+const utils_1 = require("../../../utils");
+const MenuWithTrigger_module_scss_1 = __importDefault(require("./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
+ */
+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: MenuWithTrigger_module_scss_1.default[`trigger-${triggerAlignment}`] },
+        React.createElement(button_1.MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger" }),
+        React.createElement(__1.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(__1.MrlMenuItem, { onClick: utils_1.noop, onMouseOver: utils_1.noop, onMouseOut: utils_1.noop }, "Example Menu Item 1"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 2"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 3"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 4"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item But Longer"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 5"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 6"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 7"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 8"),
+            React.createElement(__1.MrlMenuItem, { onClick: utils_1.noop }, "Example Menu Item 9"))));
+};
+exports.MenuWithTrigger = MenuWithTrigger;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MenuWithTrigger.module.css");
+exports.default = {
+	"trigger-left": "trigger-left--Fnodd",
+	"trigger-right": "trigger-right--zjA-A",
+	"trigger-center": "trigger-center--n6isM"
+};

package/dist/cjs/components/menu/hooks/useBrowserEdgeScroll.js

@@ -0,0 +1,170 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBrowserEdgeScroll = void 0;
+const react_1 = require("react");
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+/**
+ * useBrowserEdgeScroll hook
+ *
+ * This hook will calculate if an element's top or bottom edge bleed over the viewport edge
+ * and will provide a max height value for the element to allow it to scroll instead of bleed over
+ *
+ * @param elementRef - reference to the DOM element that is the menu
+ * @param elementPosition - the position of the menu
+ * @param elementAlign - the alignment of the menu
+ * @param disable - disable the hook from running
+ * @returns AdjustedElementStyle - returns the new updated style for scrolling the menu
+ */
+const useBrowserEdgeScroll = (elementRef, elementPosition = 'bottom', elementAlign, disable) => {
+    const [heightStyle, setHeightStyle] = (0, react_1.useState)({});
+    const [isScrolling, setIsScrolling] = (0, react_1.useState)(false);
+    // Use a ref to store the initial dimensions of the menu
+    const menuRectSizeRef = (0, react_1.useRef)(null);
+    const updateMenuStyle = (0, react_1.useCallback)(() => {
+        if (disable || !elementRef.current || elementPosition === 'static')
+            return;
+        if (elementRef.current) {
+            if (!menuRectSizeRef.current) {
+                menuRectSizeRef.current = elementRef.current.getBoundingClientRect();
+            }
+            const newMaxHeight = calculateNewMaxHeight(elementPosition, elementAlign, elementRef, menuRectSizeRef.current, window.innerHeight);
+            if (newMaxHeight !== null) {
+                setIsScrolling(true);
+                setHeightStyle({ maxHeight: newMaxHeight });
+            }
+            else {
+                setIsScrolling(false);
+                setHeightStyle({});
+            }
+        }
+    }, [
+        disable,
+        elementRef,
+        elementAlign,
+        elementPosition
+    ]);
+    const updateMenuStyleDebounced = (0, lodash_debounce_1.default)(updateMenuStyle, 10);
+    (0, react_1.useLayoutEffect)(() => {
+        if (disable || !elementRef.current || elementPosition === 'static')
+            return;
+        /**
+         * Resize observer is setup to watch for changes in the element's size or position
+         *
+         * If a resize is detected, the element's style will be updated to allow for scrolling if necessary
+         */
+        const observer = new ResizeObserver(updateMenuStyleDebounced);
+        observer.observe(elementRef.current);
+        window.addEventListener('resize', updateMenuStyleDebounced);
+        if (elementRef.current) {
+            updateMenuStyle();
+        }
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', updateMenuStyleDebounced);
+            menuRectSizeRef.current = null;
+        };
+        // Passing a ref in shouldn't make things work, but in this scenario
+        // it's the only way to get the menu to update when it's ref becomes available
+        // this is used for when the menu initializes, the ref may not be available so this
+        // is allowing the menu to wait before initializing the menu style without a setTimeout
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [elementRef.current, elementPosition, updateMenuStyle]);
+    const updateOnImageLoad = () => {
+        var _a;
+        const elementRect = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (elementRect) {
+            menuRectSizeRef.current = elementRect;
+            updateMenuStyleDebounced();
+        }
+    };
+    /**
+     * Listen for image additions to the element and update the menu style when they load
+     */
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const images = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('img');
+        if (images) {
+            images.forEach((img) => {
+                img.addEventListener('load', updateOnImageLoad);
+            });
+        }
+        return () => {
+            if (images) {
+                images.forEach((img) => {
+                    img.removeEventListener('load', updateOnImageLoad);
+                });
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [elementRef.current, updateMenuStyleDebounced]);
+    return { isScrolling, styles: heightStyle };
+};
+exports.useBrowserEdgeScroll = useBrowserEdgeScroll;
+/**
+ * Calculates the new max height of the menu based on the menu alignment and the viewport height
+ *
+ * @param elementPosition - the alignment of the menu
+ * @param elementAlign - the alignment of the menu
+ * @param elementRef - reference to the DOM element that is the menu
+ * @param menuRect - the bounding client rect of the menu
+ * @param viewportHeight - the height of the viewport
+ * @returns {string} - the new max height of the menu
+ */
+const calculateNewMaxHeight = (elementPosition, elementAlign, elementRef, menuRect, viewportHeight) => {
+    const scrollBuffer = 35;
+    const scrollThreshold = 20;
+    switch (elementPosition) {
+        case 'bottom':
+            return calculateBottomAlignment(menuRect, viewportHeight, scrollBuffer, scrollThreshold);
+        case 'top':
+            return calculateTopAlignment(menuRect, elementRef, scrollBuffer, scrollThreshold);
+        case 'left':
+        case 'right':
+            return calculateSideAlignment(elementAlign, menuRect, viewportHeight, scrollThreshold, scrollBuffer);
+        case 'ignore':
+            return checkElementIsScrolling(elementRef);
+        default:
+            return null;
+    }
+};
+const calculateBottomAlignment = (menuRect, viewportHeight, scrollBuffer, scrollThreshold) => {
+    // Evaluate from the bottom of the viewport to the top of the menu
+    if (menuRect.bottom > viewportHeight - scrollThreshold) {
+        const calculatedHeight = Math.max(0, viewportHeight - menuRect.top - scrollBuffer);
+        return `${Math.floor(calculatedHeight)}px`;
+    }
+    return null;
+};
+const calculateTopAlignment = (menuRect, elementRef, scrollBuffer, scrollThreshold) => {
+    var _a;
+    const currentRect = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    // Evaluate distance from the top of the viewport to the bottom of the menu
+    if (currentRect && currentRect.top <= scrollThreshold) {
+        const calculatedHeight = Math.max(0, currentRect.bottom - scrollThreshold);
+        return `${Math.floor(calculatedHeight)}px`;
+    }
+    return null;
+};
+const calculateSideAlignment = (elementAlign, menuRect, viewportHeight, scrollThreshold, scrollBuffer) => {
+    // Evaluate distance from the top of the viewport to the bottom of the menu
+    if (elementAlign === 'end' && menuRect.top < scrollThreshold) {
+        const calculatedHeight = Math.max(0, menuRect.bottom - scrollBuffer);
+        return `${Math.floor(calculatedHeight)}px`;
+    }
+    // Evaluate from the bottom of the viewport to the top of the menu
+    if (elementAlign === 'start' && menuRect.bottom > viewportHeight - scrollThreshold) {
+        const calculatedHeight = Math.max(0, viewportHeight - menuRect.top - scrollBuffer);
+        return `${Math.floor(calculatedHeight)}px`;
+    }
+    return null;
+};
+const checkElementIsScrolling = (elementRef) => {
+    const el = elementRef.current;
+    if (el && el.scrollTop > 0) {
+        return 'scrolling';
+    }
+    return null;
+};