@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

package/dist/cjs/components/popover/MrlPopover/hooks/use-mrl-popover-event-handlers.js

@@ -0,0 +1,197 @@
+"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.useMrlPopoverEventHandlers = void 0;
+const React = __importStar(require("react"));
+const utils_1 = require("../../../../utils");
+/**
+ * Creates all of the required event handlers for the MrlPopover component
+ *
+ * @param options configuration options
+ * @returns all of the required event handlers
+ */
+const useMrlPopoverEventHandlers = ({ closeMenu, isSubMenu, disableFocusTrap, disableClickToOpen, hasCloseButton, interactiveElements, menuRef, state, setState, triggerRef, isTriggerDisabled }) => {
+    /**
+     * Sets up trigger event listeners to open and close the menu with a keyboard
+     */
+    const toggleMenuKey = React.useCallback((e) => {
+        if (!state.isOpen) {
+            switch (e.key) {
+                case 'ArrowRight':
+                    if (isSubMenu) {
+                        (0, utils_1.preventDefault)(e);
+                        setState({ actionType: 'click', isOpen: true });
+                    }
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (!disableClickToOpen && !isTriggerDisabled()) {
+                        (0, utils_1.preventDefault)(e);
+                        setState({ actionType: e.key, isOpen: true });
+                    }
+                    break;
+                case 'ArrowDown':
+                    if (!isSubMenu && !disableClickToOpen && !isTriggerDisabled()) {
+                        (0, utils_1.preventDefault)(e);
+                        setState({ actionType: e.key, isOpen: true });
+                    }
+            }
+        }
+        else if (state.isOpen) {
+            // When focus is on the trigger and the popover is open, if a user presses "tab"
+            // we want to move focus to the first interactive element of the popover
+            // so that the tab order of the DOM follows the visual order of the page
+            switch (e.key) {
+                case 'Tab':
+                    if (!e.shiftKey && disableFocusTrap) {
+                        if (document.activeElement === (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+                            (0, utils_1.preventDefault)(e);
+                            interactiveElements[0].focus();
+                        }
+                    }
+                    break;
+            }
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disableFocusTrap, state.isOpen, interactiveElements]);
+    /**
+     * Sets up trigger event listeners to open and close the menu
+     *
+     */
+    const toggleMenuTrigger = React.useCallback(() => {
+        if (disableClickToOpen || isTriggerDisabled())
+            return;
+        setState((prevState) => ({ actionType: 'click', isOpen: !prevState.isOpen }));
+    }, [disableClickToOpen, isTriggerDisabled, setState]);
+    /**
+     * Used to display the menu when hovering over a menu item that has a submenu
+     */
+    const showMenuHover = React.useCallback(() => {
+        setState({ actionType: 'click', isOpen: true });
+    }, [setState]);
+    const hideMenuHover = React.useCallback((event) => {
+        // event.relatedTarget is a property utilized in mouse-related events such as `mouseover` and `mouseout`
+        // It signifies the element that was previously targeted before the current event occurred.
+        //
+        // For instance, in a `mouseover` event, `event.relatedTarget` refers to the
+        // element the cursor was over before moving to the current element.
+        const relatedTarget = event.relatedTarget;
+        // If the related target is not a child of the menu, close the menu
+        // This prevents the menu from closing when hovering over a submenu item or trigger
+        if (menuRef.current &&
+            !menuRef.current.contains(relatedTarget) &&
+            (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) &&
+            !(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.contains(relatedTarget))) {
+            setState({ actionType: null, isOpen: false });
+        }
+    }, [triggerRef, menuRef, setState]);
+    /**
+     * Focus management when someone is using a keyboard to navigate the menu
+     *
+     * @param e - keyboard event
+     */
+    const handleMenuKey = (e) => {
+        var _a, _b, _c;
+        if (state.isOpen) {
+            switch (e.key) {
+                case 'Escape':
+                    (0, utils_1.preventDefault)(e);
+                    (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    closeMenu();
+                    break;
+                case 'Tab':
+                    e.stopPropagation();
+                    if (disableFocusTrap) {
+                        const first = interactiveElements[0];
+                        const last = interactiveElements[interactiveElements.length - 1];
+                        const isShiftKey = e.shiftKey;
+                        // If the first or last interactive element is focused, we want to move focus to the trigger
+                        // and close the menu. If the last iteractive element is focused, we are checking that the shift
+                        // key is not held down. Otherwise the popover will close when you press shift+tab on an element
+                        // that is not the first one.
+                        if (isShiftKey && document.activeElement === first) {
+                            (0, utils_1.preventDefault)(e);
+                            (_b = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                            if (!hasCloseButton)
+                                setState({ actionType: null, isOpen: false });
+                        }
+                        if (!isShiftKey && document.activeElement === last) {
+                            (0, utils_1.preventDefault)(e);
+                            (_c = (0, utils_1.findAdjacentInteractiveElement)(triggerRef, 'next')) === null || _c === void 0 ? void 0 : _c.focus();
+                            if (!hasCloseButton)
+                                setState({ actionType: null, isOpen: false });
+                        }
+                    }
+                    break;
+                case 'ArrowUp':
+                case 'ArrowDown':
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    (0, utils_1.preventDefault)(e);
+                    break;
+            }
+        }
+    };
+    /**
+     * When focus trap is disabled, we need to handle moving focus back to the popover when you
+     * shift+tab from the interactive element immediately after the trigger. This will allow us
+     * to maintain a tab order that matches the visual order on the page.
+     *
+     * @param e - keyboard event
+     */
+    const handleTriggerSiblingKey = (e) => {
+        if (state.isOpen && disableFocusTrap) {
+            switch (e.key) {
+                case 'Tab':
+                    if (e.shiftKey) {
+                        (0, utils_1.preventDefault)(e);
+                        interactiveElements[interactiveElements.length - 1].focus();
+                        break;
+                    }
+            }
+        }
+    };
+    const handleClose = React.useCallback((e) => {
+        var _a;
+        if (e.key === 'Enter' || e.key === ' ') {
+            closeMenu();
+            if (disableFocusTrap)
+                (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [closeMenu, disableFocusTrap]);
+    return {
+        handleClose,
+        handleMenuKey,
+        handleTriggerSiblingKey,
+        hideMenuHover,
+        showMenuHover,
+        toggleMenuKey,
+        toggleMenuTrigger
+    };
+};
+exports.useMrlPopoverEventHandlers = useMrlPopoverEventHandlers;

package/dist/cjs/components/popover/MrlPopover/index.js

@@ -0,0 +1,18 @@
+"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("./MrlPopover"), exports);
+__exportStar(require("./utilities"), exports);

package/dist/cjs/components/popover/MrlPopover/utilities/get-data-point.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDataPoint = void 0;
+/**
+ * Returns the data-point attribute for the popover pointer
+ *
+ * @param position - position of the menu
+ * @param alignment - alignment of the menu
+ * @returns - data-point attribute value
+ */
+const getDataPoint = (position, alignment) => {
+    return `${position}-${alignment}`;
+};
+exports.getDataPoint = getDataPoint;

package/dist/cjs/components/popover/MrlPopover/utilities/get-offset.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOffset = void 0;
+/**
+ * Returns a value in PX for the offset of the popover from the menu at different positions
+ *
+ * @param position - position of the menu
+ * @param point - if the menu has a pointer
+ * @returns - offset in PX
+ */
+const getOffset = (position, point) => {
+    if (point) {
+        if (position === 'top' || position === 'bottom') {
+            return 7;
+        }
+        else if (position === 'left' || position === 'right') {
+            return 7;
+        }
+    }
+    return 10;
+};
+exports.getOffset = getOffset;

package/dist/cjs/components/popover/MrlPopover/utilities/index.js

@@ -0,0 +1,18 @@
+"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("./get-data-point"), exports);
+__exportStar(require("./get-offset"), exports);

package/dist/cjs/components/popover/demo/PopoverWithIconButton.js

@@ -0,0 +1,51 @@
+"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.PopoverWithIconButton = void 0;
+const React = __importStar(require("react"));
+const __1 = require("../../..");
+const PopoverWithTrigger_module_scss_1 = __importDefault(require("./PopoverWithTrigger.module.scss.js"));
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @param {PopoverWithIconButtonProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+const PopoverWithIconButton = ({ menuAlign = 'bottom', alignment = 'center', actionState, onClose, triggerAlignment = 'left', spacing = 'default', kind = 'primary', point = false, hasCloseButton = false }) => {
+    const triggerRef = React.useRef(null);
+    return (React.createElement("div", { className: PopoverWithTrigger_module_scss_1.default[`trigger-${triggerAlignment}`] },
+        React.createElement(__1.MrlIconButton, { state: "default", text: "Menu Trigger", icon: React.createElement(__1.MrlSvg, { svg: ds_icons_1.chevronDown }), ref: triggerRef }),
+        React.createElement(__1.MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: triggerRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover" },
+            React.createElement("div", { className: "popover-demo-content" },
+                React.createElement(__1.MrlTextHeading, { kind: "title", size: "small", level: "2" }, "Popover Example"),
+                React.createElement(__1.MrlText, { size: "small", attrs: { className: PopoverWithTrigger_module_scss_1.default['popover-text'] } }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
+                React.createElement(__1.MrlButton, { className: "popover-demo-button", text: "Action 1", size: "small" }),
+                React.createElement(__1.MrlButton, { className: "popover-demo-button", text: "Action 2", size: "small" })))));
+};
+exports.PopoverWithIconButton = PopoverWithIconButton;

package/dist/cjs/components/popover/demo/PopoverWithSelect.js

@@ -0,0 +1,55 @@
+"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.PopoverWithSelect = void 0;
+const React = __importStar(require("react"));
+const __1 = require("../../..");
+const PopoverWithTrigger_module_scss_1 = __importDefault(require("./PopoverWithTrigger.module.scss.js"));
+/**
+ * Demo of a popover with a select inside
+ *
+ * @param {PopoverWithSelectProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+const PopoverWithSelect = ({ menuAlign = 'bottom', alignment = 'center', actionState, onClose, triggerAlignment = 'left', spacing = 'default', kind = 'primary', point = false, hasCloseButton = false, disableFocusTrap = false }) => {
+    const triggerRef = React.useRef(null);
+    return (React.createElement("div", { className: PopoverWithTrigger_module_scss_1.default[`trigger-${triggerAlignment}`] },
+        React.createElement(__1.MrlButton, { text: "Button" }),
+        React.createElement(__1.MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger" }),
+        React.createElement(__1.MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: triggerRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover", disableFocusTrap: disableFocusTrap },
+            React.createElement("div", { className: "popover-demo-content" },
+                React.createElement(__1.MrlLegacySelect, { id: "super-custom-id", labelId: "select-one", defaultValue: "b", "data-qa": "qa-select-one" },
+                    React.createElement(__1.MrlLegacySelectMenu, { id: "select-menu-custom-id", "data-qa": "qa-select-one-menu", labelId: 'select-one', position: "bottom" },
+                        React.createElement(__1.MrlLegacySelectItem, { id: "select-item-custom-id", "data-qa": "qa-select-the-one-we-care-about", value: 'a', index: 0 }, "a is for apple"),
+                        React.createElement(__1.MrlLegacySelectItem, { value: 'b' }, "b is for bat"),
+                        React.createElement(__1.MrlLegacySelectItem, { value: 'c' }, "c is for cat"),
+                        React.createElement(__1.MrlLegacySelectItem, { value: 'd', isDisabled: true }, "d is for door"))))),
+        React.createElement(__1.MrlButton, { text: "Button" }),
+        React.createElement(__1.MrlButton, { text: "Button" })));
+};
+exports.PopoverWithSelect = PopoverWithSelect;

package/dist/cjs/components/popover/demo/PopoverWithTrigger.js

@@ -0,0 +1,67 @@
+"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.PopoverWithTrigger = void 0;
+const React = __importStar(require("react"));
+const __1 = require("../../../");
+const PopoverWithTrigger_module_scss_1 = __importDefault(require("./PopoverWithTrigger.module.scss.js"));
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @param {PopoverWithTriggerProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+const PopoverWithTrigger = ({ menuAlign = 'bottom', alignment = 'center', actionState, onClose, triggerAlignment = 'left', spacing = 'default', kind = 'primary', point = false, hasCloseButton = false, disableFocusTrap = false, disableTrigger = false, scrolling = false, ariaDisabled = false }) => {
+    const triggerRef = React.useRef(null);
+    const switchRef = React.useRef(null);
+    const selected = false;
+    const [switchChecked, setSwitchChecked] = React.useState(() => selected);
+    const handleChange = (e) => {
+        setSwitchChecked(e.target.checked);
+    };
+    React.useEffect(() => {
+        setSwitchChecked(selected);
+    }, [selected]);
+    return (React.createElement("div", { className: PopoverWithTrigger_module_scss_1.default[`trigger-${triggerAlignment}`] },
+        React.createElement(__1.MrlButton, { text: "Switch Demo Button", ref: switchRef, state: disableTrigger ? 'disabled' : 'default' }),
+        React.createElement(__1.MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: switchRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover", disableFocusTrap: disableFocusTrap },
+            React.createElement("div", { className: "popover-switch-demo-content" },
+                React.createElement(__1.MrlSwitch, { id: "switch", label: "Switch label", onChange: handleChange, selected: switchChecked }))),
+        React.createElement(__1.MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger", state: ariaDisabled || disableTrigger ? 'disabled' : 'default' }),
+        React.createElement(__1.MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: triggerRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover", disableFocusTrap: disableFocusTrap },
+            React.createElement("div", { className: "popover-demo-content" },
+                React.createElement(__1.MrlTextHeading, { kind: "title", size: "small", level: "2" }, "Popover Example"),
+                React.createElement(__1.MrlText, { size: "small", attrs: { className: PopoverWithTrigger_module_scss_1.default['popover-text'] } }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
+                React.createElement(__1.MrlButton, { className: "popover-demo-button", text: "Action 1", size: "small" }),
+                React.createElement(__1.MrlButton, { className: "popover-demo-button", text: "Action 2", size: "small" }),
+                scrolling && (React.createElement("div", null,
+                    React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Dolor sed viverra ipsum nunc aliquet bibendum enim. Donec ac odio tempor orci dapibus. Pulvinar mattis nunc sed blandit libero. Ac tortor vitae purus faucibus ornare. Ornare arcu dui vivamus arcu felis bibendum ut. Velit aliquet sagittis id consectetur. Dignissim diam quis enim lobortis. Urna nunc id cursus metus aliquam eleifend mi in. Nunc lobortis mattis aliquam faucibus."))))),
+        React.createElement(__1.MrlButton, { text: "Button" }),
+        React.createElement(__1.MrlButton, { text: "Button" })));
+};
+exports.PopoverWithTrigger = PopoverWithTrigger;

package/dist/cjs/components/popover/demo/PopoverWithTrigger.module.css

@@ -0,0 +1,13 @@
+.trigger-left--kTVir {
+  text-align: left;
+}
+.trigger-right--TsfY- {
+  text-align: right;
+}
+.trigger-center--AXRJD {
+  text-align: center;
+}
+
+.popover-text--8dnN8 {
+  margin-bottom: var(--mrl-spacing-05);
+}

package/dist/cjs/components/popover/demo/PopoverWithTrigger.module.scss.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./PopoverWithTrigger.module.css");
+exports.default = {
+	"trigger-left": "trigger-left--kTVir",
+	"trigger-right": "trigger-right--TsfY-",
+	"trigger-center": "trigger-center--AXRJD",
+	"popover-text": "popover-text--8dnN8"
+};

package/dist/cjs/components/popover/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("./MrlPopover"), exports);

package/dist/cjs/components/portal/MrlPortal.js

@@ -0,0 +1,95 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlPortal = exports.MRL_PORTAL_ID = void 0;
+const React = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const layers_1 = require("../../utils/layers");
+exports.MRL_PORTAL_ID = layers_1.PORTAL_LAYERS.ROOT.name;
+/**
+ * Dynamically creates a single portal and send your children to the portal.
+ * Where they will live outside of the normal document flow
+ *
+ * @param PortalProps Portal only takes children. Contact the platform team if you need to extend this.
+ * @returns MrlPortal component
+ */
+const MrlPortal = (_a) => {
+    var { children, className, id, layer } = _a, remainingProps = __rest(_a, ["children", "className", "id", "layer"]);
+    const [portalElement, setPortalElement] = React.useState(null);
+    const element = 'div';
+    const portalId = (layer === null || layer === void 0 ? void 0 : layer.name) || id || exports.MRL_PORTAL_ID;
+    const portalLayer = layer || layers_1.PORTAL_LAYERS.ROOT;
+    React.useLayoutEffect(() => {
+        let portal = document.getElementById(portalId);
+        const dataQa = remainingProps['data-qa'] || id || layers_1.PORTAL_LAYERS.ROOT.name;
+        // create the portal on the fly and reuse the same one each time.
+        if (!portal) {
+            portal = document.createElement(element);
+            portal.setAttribute('id', portalId);
+            portal.setAttribute('data-qa', dataQa);
+            portal.setAttribute('data-testid', dataQa);
+            if (className)
+                portal.setAttribute('class', className);
+            document.body.appendChild(portal);
+        }
+        setPortalElement(portal);
+    }, [
+        portalId,
+        remainingProps,
+        id,
+        className
+    ]);
+    /**
+     * Sets z-index of the first child element of the portal to the layer's z-index
+     *
+     * TODO: update to also accept a 'layerId' that will override the default layer
+     * with the provided layerId
+     */
+    if (!portalElement)
+        return null;
+    const childrenArray = React.Children.toArray(children);
+    if (childrenArray.length > 0 && portalElement) {
+        const firstChildElement = portalElement.firstElementChild;
+        if (firstChildElement) {
+            firstChildElement.style.zIndex = `${portalLayer.zIndex}`;
+        }
+    }
+    // state will be null on the very first render.
+    if (!portalElement)
+        return null;
+    return (0, react_dom_1.createPortal)(children, portalElement);
+};
+exports.MrlPortal = MrlPortal;

package/dist/cjs/components/portal/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("./MrlPortal"), exports);