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

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

@@ -0,0 +1,212 @@
+import * as React from 'react';
+import { preventDefault } from '../../../../utils/preventDefault/preventDefault.js';
+import { findAdjacentInteractiveElement } from '../../../../utils/findAdjacentInteractiveElement/findAdjacentInteractiveElement.js';
+
+/**
+ * Creates all of the required event handlers for the MrlPopover component
+ *
+ * @param options configuration options
+ * @returns all of the required event handlers
+ */
+var useMrlPopoverEventHandlers = function useMrlPopoverEventHandlers(_ref) {
+  var closeMenu = _ref.closeMenu,
+    isSubMenu = _ref.isSubMenu,
+    disableFocusTrap = _ref.disableFocusTrap,
+    disableClickToOpen = _ref.disableClickToOpen,
+    hasCloseButton = _ref.hasCloseButton,
+    interactiveElements = _ref.interactiveElements,
+    menuRef = _ref.menuRef,
+    state = _ref.state,
+    setState = _ref.setState,
+    triggerRef = _ref.triggerRef,
+    isTriggerDisabled = _ref.isTriggerDisabled;
+  /**
+   * Sets up trigger event listeners to open and close the menu with a keyboard
+   */
+  var toggleMenuKey = React.useCallback(function (e) {
+    if (!state.isOpen) {
+      switch (e.key) {
+        case 'ArrowRight':
+          if (isSubMenu) {
+            preventDefault(e);
+            setState({
+              actionType: 'click',
+              isOpen: true
+            });
+          }
+          break;
+        case 'Enter':
+        case ' ':
+          if (!disableClickToOpen && !isTriggerDisabled()) {
+            preventDefault(e);
+            setState({
+              actionType: e.key,
+              isOpen: true
+            });
+          }
+          break;
+        case 'ArrowDown':
+          if (!isSubMenu && !disableClickToOpen && !isTriggerDisabled()) {
+            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)) {
+              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
+   *
+   */
+  var toggleMenuTrigger = React.useCallback(function () {
+    if (disableClickToOpen || isTriggerDisabled()) return;
+    setState(function (prevState) {
+      return {
+        actionType: 'click',
+        isOpen: !prevState.isOpen
+      };
+    });
+  }, [disableClickToOpen, isTriggerDisabled, setState]);
+
+  /**
+   * Used to display the menu when hovering over a menu item that has a submenu
+   */
+  var showMenuHover = React.useCallback(function () {
+    setState({
+      actionType: 'click',
+      isOpen: true
+    });
+  }, [setState]);
+  var hideMenuHover = React.useCallback(function (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.
+    var 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 && triggerRef.current && !(triggerRef !== null && triggerRef !== 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
+   */
+  var handleMenuKey = function handleMenuKey(e) {
+    var _triggerRef$current;
+    if (state.isOpen) {
+      switch (e.key) {
+        case 'Escape':
+          preventDefault(e);
+          triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
+          closeMenu();
+          break;
+        case 'Tab':
+          e.stopPropagation();
+          if (disableFocusTrap) {
+            var first = interactiveElements[0];
+            var last = interactiveElements[interactiveElements.length - 1];
+            var 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) {
+              var _triggerRef$current2;
+              preventDefault(e);
+              triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.focus();
+              if (!hasCloseButton) setState({
+                actionType: null,
+                isOpen: false
+              });
+            }
+            if (!isShiftKey && document.activeElement === last) {
+              var _findAdjacentInteract;
+              preventDefault(e);
+              (_findAdjacentInteract = findAdjacentInteractiveElement(triggerRef, 'next')) === null || _findAdjacentInteract === void 0 ? void 0 : _findAdjacentInteract.focus();
+              if (!hasCloseButton) setState({
+                actionType: null,
+                isOpen: false
+              });
+            }
+          }
+          break;
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          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
+   */
+  var handleTriggerSiblingKey = function handleTriggerSiblingKey(e) {
+    if (state.isOpen && disableFocusTrap) {
+      switch (e.key) {
+        case 'Tab':
+          if (e.shiftKey) {
+            preventDefault(e);
+            interactiveElements[interactiveElements.length - 1].focus();
+            break;
+          }
+      }
+    }
+  };
+  var handleClose = React.useCallback(function (e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      var _triggerRef$current3;
+      closeMenu();
+      if (disableFocusTrap) triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.focus();
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [closeMenu, disableFocusTrap]);
+  return {
+    handleClose: handleClose,
+    handleMenuKey: handleMenuKey,
+    handleTriggerSiblingKey: handleTriggerSiblingKey,
+    hideMenuHover: hideMenuHover,
+    showMenuHover: showMenuHover,
+    toggleMenuKey: toggleMenuKey,
+    toggleMenuTrigger: toggleMenuTrigger
+  };
+};
+
+export { useMrlPopoverEventHandlers };
+//# sourceMappingURL=use-mrl-popover-event-handlers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-mrl-popover-event-handlers.js","sources":["../../../../../../src/components/popover/MrlPopover/hooks/use-mrl-popover-event-handlers.ts"],"sourcesContent":["import * as React from 'react';\nimport { ActionState, ActionType } from '../../../menu';\nimport { MrlPopoverProps } from '../MrlPopover';\nimport { findAdjacentInteractiveElement, preventDefault } from '../../../../utils';\n\ntype UseMrlPopoverEventHandlersOptions = {\n\tcloseMenu: () => void;\n\tisSubMenu: MrlPopoverProps['isSubMenu'];\n\tdisableFocusTrap: MrlPopoverProps['disableFocusTrap'];\n\tdisableClickToOpen: MrlPopoverProps['disableClickToOpen'];\n\thasCloseButton: MrlPopoverProps['hasCloseButton'];\n\tinteractiveElements: HTMLElement[];\n\tmenuRef: React.RefObject<HTMLDivElement>;\n\tstate: ActionState;\n\tsetState: React.Dispatch<React.SetStateAction<ActionState>>;\n\ttriggerRef: MrlPopoverProps['triggerRef'];\n\tisTriggerDisabled: () => boolean;\n};\n\ntype UseMrlPopoverEventHandlersReturn = {\n\thandleClose: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n\thandleMenuKey: (e: React.KeyboardEvent) => void;\n\thandleTriggerSiblingKey: (e: KeyboardEvent) => void;\n\thideMenuHover: (e: MouseEvent) => void;\n\tshowMenuHover: () => void;\n\ttoggleMenuKey: (e: KeyboardEvent) => void;\n\ttoggleMenuTrigger: () => void;\n};\n\n/**\n * Creates all of the required event handlers for the MrlPopover component\n *\n * @param options configuration options\n * @returns all of the required event handlers\n */\nexport const useMrlPopoverEventHandlers = ({\n\tcloseMenu,\n\tisSubMenu,\n\tdisableFocusTrap,\n\tdisableClickToOpen,\n\thasCloseButton,\n\tinteractiveElements,\n\tmenuRef,\n\tstate,\n\tsetState,\n\ttriggerRef,\n\tisTriggerDisabled\n}: UseMrlPopoverEventHandlersOptions): UseMrlPopoverEventHandlersReturn => {\n\t/**\n\t * Sets up trigger event listeners to open and close the menu with a keyboard\n\t */\n\tconst toggleMenuKey = React.useCallback(\n\t\t(e: KeyboardEvent) => {\n\t\t\tif (!state.isOpen) {\n\t\t\t\tswitch (e.key) {\n\t\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\t\tif (isSubMenu) {\n\t\t\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\t\t\tsetState({ actionType: 'click', isOpen: true });\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'Enter':\n\t\t\t\t\tcase ' ':\n\t\t\t\t\t\tif (!disableClickToOpen && !isTriggerDisabled()) {\n\t\t\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\t\t\tsetState({ actionType: e.key as ActionType, isOpen: true });\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\t\tif (!isSubMenu && !disableClickToOpen && !isTriggerDisabled()) {\n\t\t\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\t\t\tsetState({ actionType: e.key as ActionType, isOpen: true });\n\t\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (state.isOpen) {\n\t\t\t\t// When focus is on the trigger and the popover is open, if a user presses \"tab\"\n\t\t\t\t// we want to move focus to the first interactive element of the popover\n\t\t\t\t// so that the tab order of the DOM follows the visual order of the page\n\t\t\t\tswitch (e.key) {\n\t\t\t\t\tcase 'Tab':\n\t\t\t\t\t\tif (!e.shiftKey && disableFocusTrap) {\n\t\t\t\t\t\t\tif (document.activeElement === triggerRef?.current) {\n\t\t\t\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\t\t\t\tinteractiveElements[0].focus();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[disableFocusTrap, state.isOpen, interactiveElements]\n\t);\n\n\t/**\n\t * Sets up trigger event listeners to open and close the menu\n\t *\n\t */\n\tconst toggleMenuTrigger = React.useCallback(() => {\n\t\tif (disableClickToOpen || isTriggerDisabled()) return;\n\t\tsetState((prevState) => ({ actionType: 'click', isOpen: !prevState.isOpen }));\n\t}, [disableClickToOpen, isTriggerDisabled, setState]);\n\n\t/**\n\t * Used to display the menu when hovering over a menu item that has a submenu\n\t */\n\tconst showMenuHover = React.useCallback(() => {\n\t\tsetState({ actionType: 'click', isOpen: true });\n\t}, [setState]);\n\n\tconst hideMenuHover = React.useCallback(\n\t\t(event: MouseEvent) => {\n\t\t\t// event.relatedTarget is a property utilized in mouse-related events such as `mouseover` and `mouseout`\n\t\t\t// It signifies the element that was previously targeted before the current event occurred.\n\t\t\t//\n\t\t\t// For instance, in a `mouseover` event, `event.relatedTarget` refers to the\n\t\t\t// element the cursor was over before moving to the current element.\n\t\t\tconst relatedTarget = event.relatedTarget as Node;\n\n\t\t\t// If the related target is not a child of the menu, close the menu\n\t\t\t// This prevents the menu from closing when hovering over a submenu item or trigger\n\t\t\tif (\n\t\t\t\tmenuRef.current &&\n\t\t\t\t!menuRef.current.contains(relatedTarget) &&\n\t\t\t\ttriggerRef?.current &&\n\t\t\t\t!triggerRef?.current.contains(relatedTarget)\n\t\t\t) {\n\t\t\t\tsetState({ actionType: null, isOpen: false });\n\t\t\t}\n\t\t},\n\t\t[triggerRef, menuRef, setState]\n\t);\n\n\t/**\n\t * Focus management when someone is using a keyboard to navigate the menu\n\t *\n\t * @param e - keyboard event\n\t */\n\tconst handleMenuKey = (e: React.KeyboardEvent) => {\n\t\tif (state.isOpen) {\n\t\t\tswitch (e.key) {\n\t\t\t\tcase 'Escape':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\ttriggerRef?.current?.focus();\n\t\t\t\t\tcloseMenu();\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Tab':\n\t\t\t\t\te.stopPropagation();\n\n\t\t\t\t\tif (disableFocusTrap) {\n\t\t\t\t\t\tconst first = interactiveElements[0];\n\t\t\t\t\t\tconst last = interactiveElements[interactiveElements.length - 1];\n\t\t\t\t\t\tconst isShiftKey = e.shiftKey;\n\n\t\t\t\t\t\t// If the first or last interactive element is focused, we want to move focus to the trigger\n\t\t\t\t\t\t// and close the menu. If the last iteractive element is focused, we are checking that the shift\n\t\t\t\t\t\t// key is not held down. Otherwise the popover will close when you press shift+tab on an element\n\t\t\t\t\t\t// that is not the first one.\n\t\t\t\t\t\tif (isShiftKey && document.activeElement === first) {\n\t\t\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\t\t\ttriggerRef?.current?.focus();\n\t\t\t\t\t\t\tif (!hasCloseButton) setState({ actionType: null, isOpen: false });\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!isShiftKey && document.activeElement === last) {\n\t\t\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\t\t\tfindAdjacentInteractiveElement(triggerRef, 'next')?.focus();\n\t\t\t\t\t\t\tif (!hasCloseButton) setState({ actionType: null, isOpen: false });\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * When focus trap is disabled, we need to handle moving focus back to the popover when you\n\t * shift+tab from the interactive element immediately after the trigger. This will allow us\n\t * to maintain a tab order that matches the visual order on the page.\n\t *\n\t * @param e - keyboard event\n\t */\n\tconst handleTriggerSiblingKey = (e: KeyboardEvent) => {\n\t\tif (state.isOpen && disableFocusTrap) {\n\t\t\tswitch (e.key) {\n\t\t\t\tcase 'Tab':\n\t\t\t\t\tif (e.shiftKey) {\n\t\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\t\tinteractiveElements[interactiveElements.length - 1].focus();\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleClose = React.useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\t\tcloseMenu();\n\t\t\t\tif (disableFocusTrap) triggerRef?.current?.focus();\n\t\t\t}\n\t\t},\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[closeMenu, disableFocusTrap]\n\t);\n\n\treturn {\n\t\thandleClose,\n\t\thandleMenuKey,\n\t\thandleTriggerSiblingKey,\n\t\thideMenuHover,\n\t\tshowMenuHover,\n\t\ttoggleMenuKey,\n\t\ttoggleMenuTrigger\n\t};\n};\n"],"names":["useMrlPopoverEventHandlers","_ref","closeMenu","isSubMenu","disableFocusTrap","disableClickToOpen","hasCloseButton","interactiveElements","menuRef","state","setState","triggerRef","isTriggerDisabled","toggleMenuKey","React","useCallback","e","isOpen","key","preventDefault","actionType","shiftKey","document","activeElement","current","focus","toggleMenuTrigger","prevState","showMenuHover","hideMenuHover","event","relatedTarget","contains","handleMenuKey","_triggerRef$current","stopPropagation","first","last","length","isShiftKey","_triggerRef$current2","_findAdjacentInteract","findAdjacentInteractiveElement","handleTriggerSiblingKey","handleClose","_triggerRef$current3"],"mappings":";;;;AA6BA;AACA;AACA;AACA;AACA;AACA;IACaA,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAAC,IAAA,EAYoC;AAAA,EAAA,IAX1EC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,gBAAgB,GAAAH,IAAA,CAAhBG,gBAAgB;IAChBC,kBAAkB,GAAAJ,IAAA,CAAlBI,kBAAkB;IAClBC,cAAc,GAAAL,IAAA,CAAdK,cAAc;IACdC,mBAAmB,GAAAN,IAAA,CAAnBM,mBAAmB;IACnBC,OAAO,GAAAP,IAAA,CAAPO,OAAO;IACPC,KAAK,GAAAR,IAAA,CAALQ,KAAK;IACLC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACRC,UAAU,GAAAV,IAAA,CAAVU,UAAU;IACVC,iBAAiB,GAAAX,IAAA,CAAjBW,iBAAiB;AAEjB;AACD;AACA;EACC,IAAMC,aAAa,GAAGC,KAAK,CAACC,WAAW,CACtC,UAACC,CAAgB,EAAK;AACrB,IAAA,IAAI,CAACP,KAAK,CAACQ,MAAM,EAAE;MAClB,QAAQD,CAAC,CAACE,GAAG;AACZ,QAAA,KAAK,YAAY;AAChB,UAAA,IAAIf,SAAS,EAAE;YACdgB,cAAc,CAACH,CAAC,CAAC;AACjBN,YAAAA,QAAQ,CAAC;AAAEU,cAAAA,UAAU,EAAE,OAAO;AAAEH,cAAAA,MAAM,EAAE;AAAK,aAAC,CAAC;AAChD,UAAA;AACA,UAAA;AACD,QAAA,KAAK,OAAO;AACZ,QAAA,KAAK,GAAG;AACP,UAAA,IAAI,CAACZ,kBAAkB,IAAI,CAACO,iBAAiB,EAAE,EAAE;YAChDO,cAAc,CAACH,CAAC,CAAC;AACjBN,YAAAA,QAAQ,CAAC;cAAEU,UAAU,EAAEJ,CAAC,CAACE,GAAiB;AAAED,cAAAA,MAAM,EAAE;AAAK,aAAC,CAAC;AAC5D,UAAA;AACA,UAAA;AACD,QAAA,KAAK,WAAW;UACf,IAAI,CAACd,SAAS,IAAI,CAACE,kBAAkB,IAAI,CAACO,iBAAiB,EAAE,EAAE;YAC9DO,cAAc,CAACH,CAAC,CAAC;AACjBN,YAAAA,QAAQ,CAAC;cAAEU,UAAU,EAAEJ,CAAC,CAACE,GAAiB;AAAED,cAAAA,MAAM,EAAE;AAAK,aAAC,CAAC;AAC5D,UAAA;AACF;AACD,IAAA,CAAC,MAAM,IAAIR,KAAK,CAACQ,MAAM,EAAE;AACxB;AACA;AACA;MACA,QAAQD,CAAC,CAACE,GAAG;AACZ,QAAA,KAAK,KAAK;AACT,UAAA,IAAI,CAACF,CAAC,CAACK,QAAQ,IAAIjB,gBAAgB,EAAE;YACpC,IAAIkB,QAAQ,CAACC,aAAa,MAAKZ,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAVA,UAAU,CAAEa,OAAO,CAAA,EAAE;cACnDL,cAAc,CAACH,CAAC,CAAC;AACjBT,cAAAA,mBAAmB,CAAC,CAAC,CAAC,CAACkB,KAAK,EAAE;AAC/B,YAAA;AACD,UAAA;AACA,UAAA;AACF;AACD,IAAA;EACD,CAAC;AACD;EACA,CAACrB,gBAAgB,EAAEK,KAAK,CAACQ,MAAM,EAAEV,mBAAmB,CACrD,CAAC;;AAED;AACD;AACA;AACA;AACC,EAAA,IAAMmB,iBAAiB,GAAGZ,KAAK,CAACC,WAAW,CAAC,YAAM;AACjD,IAAA,IAAIV,kBAAkB,IAAIO,iBAAiB,EAAE,EAAE;IAC/CF,QAAQ,CAAC,UAACiB,SAAS,EAAA;MAAA,OAAM;AAAEP,QAAAA,UAAU,EAAE,OAAO;QAAEH,MAAM,EAAE,CAACU,SAAS,CAACV;OAAQ;AAAA,IAAA,CAAC,CAAC;EAC9E,CAAC,EAAE,CAACZ,kBAAkB,EAAEO,iBAAiB,EAAEF,QAAQ,CAAC,CAAC;;AAErD;AACD;AACA;AACC,EAAA,IAAMkB,aAAa,GAAGd,KAAK,CAACC,WAAW,CAAC,YAAM;AAC7CL,IAAAA,QAAQ,CAAC;AAAEU,MAAAA,UAAU,EAAE,OAAO;AAAEH,MAAAA,MAAM,EAAE;AAAK,KAAC,CAAC;AAChD,EAAA,CAAC,EAAE,CAACP,QAAQ,CAAC,CAAC;EAEd,IAAMmB,aAAa,GAAGf,KAAK,CAACC,WAAW,CACtC,UAACe,KAAiB,EAAK;AACtB;AACA;AACA;AACA;AACA;AACA,IAAA,IAAMC,aAAa,GAAGD,KAAK,CAACC,aAAqB;;AAEjD;AACA;AACA,IAAA,IACCvB,OAAO,CAACgB,OAAO,IACf,CAAChB,OAAO,CAACgB,OAAO,CAACQ,QAAQ,CAACD,aAAa,CAAC,IACxCpB,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,IAAVA,UAAU,CAAEa,OAAO,IACnB,EAACb,UAAU,aAAVA,UAAU,KAAA,MAAA,IAAVA,UAAU,CAAEa,OAAO,CAACQ,QAAQ,CAACD,aAAa,CAAC,CAAA,EAC3C;AACDrB,MAAAA,QAAQ,CAAC;AAAEU,QAAAA,UAAU,EAAE,IAAI;AAAEH,QAAAA,MAAM,EAAE;AAAM,OAAC,CAAC;AAC9C,IAAA;EACD,CAAC,EACD,CAACN,UAAU,EAAEH,OAAO,EAAEE,QAAQ,CAC/B,CAAC;;AAED;AACD;AACA;AACA;AACA;AACC,EAAA,IAAMuB,aAAa,GAAG,SAAhBA,aAAaA,CAAIjB,CAAsB,EAAK;AAAA,IAAA,IAAAkB,mBAAA;IACjD,IAAIzB,KAAK,CAACQ,MAAM,EAAE;MACjB,QAAQD,CAAC,CAACE,GAAG;AACZ,QAAA,KAAK,QAAQ;UACZC,cAAc,CAACH,CAAC,CAAC;AACjBL,UAAAA,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAA,CAAAuB,mBAAA,GAAVvB,UAAU,CAAEa,OAAO,MAAA,IAAA,IAAAU,mBAAA,KAAA,MAAA,GAAA,MAAA,GAAnBA,mBAAA,CAAqBT,KAAK,EAAE;AAC5BvB,UAAAA,SAAS,EAAE;AACX,UAAA;AACD,QAAA,KAAK,KAAK;UACTc,CAAC,CAACmB,eAAe,EAAE;AAEnB,UAAA,IAAI/B,gBAAgB,EAAE;AACrB,YAAA,IAAMgC,KAAK,GAAG7B,mBAAmB,CAAC,CAAC,CAAC;YACpC,IAAM8B,IAAI,GAAG9B,mBAAmB,CAACA,mBAAmB,CAAC+B,MAAM,GAAG,CAAC,CAAC;AAChE,YAAA,IAAMC,UAAU,GAAGvB,CAAC,CAACK,QAAQ;;AAE7B;AACA;AACA;AACA;AACA,YAAA,IAAIkB,UAAU,IAAIjB,QAAQ,CAACC,aAAa,KAAKa,KAAK,EAAE;AAAA,cAAA,IAAAI,oBAAA;cACnDrB,cAAc,CAACH,CAAC,CAAC;AACjBL,cAAAA,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAA,CAAA6B,oBAAA,GAAV7B,UAAU,CAAEa,OAAO,MAAA,IAAA,IAAAgB,oBAAA,KAAA,MAAA,GAAA,MAAA,GAAnBA,oBAAA,CAAqBf,KAAK,EAAE;AAC5B,cAAA,IAAI,CAACnB,cAAc,EAAEI,QAAQ,CAAC;AAAEU,gBAAAA,UAAU,EAAE,IAAI;AAAEH,gBAAAA,MAAM,EAAE;AAAM,eAAC,CAAC;AACnE,YAAA;YAEA,IAAI,CAACsB,UAAU,IAAIjB,QAAQ,CAACC,aAAa,KAAKc,IAAI,EAAE;AAAA,cAAA,IAAAI,qBAAA;cACnDtB,cAAc,CAACH,CAAC,CAAC;AACjB,cAAA,CAAAyB,qBAAA,GAAAC,8BAA8B,CAAC/B,UAAU,EAAE,MAAM,CAAC,MAAA,IAAA,IAAA8B,qBAAA,KAAA,MAAA,GAAA,MAAA,GAAlDA,qBAAA,CAAoDhB,KAAK,EAAE;AAC3D,cAAA,IAAI,CAACnB,cAAc,EAAEI,QAAQ,CAAC;AAAEU,gBAAAA,UAAU,EAAE,IAAI;AAAEH,gBAAAA,MAAM,EAAE;AAAM,eAAC,CAAC;AACnE,YAAA;AACD,UAAA;AACA,UAAA;AACD,QAAA,KAAK,SAAS;AACd,QAAA,KAAK,WAAW;AAChB,QAAA,KAAK,WAAW;AAChB,QAAA,KAAK,YAAY;UAChBE,cAAc,CAACH,CAAC,CAAC;AACjB,UAAA;AACF;AACD,IAAA;EACD,CAAC;;AAED;AACD;AACA;AACA;AACA;AACA;AACA;AACC,EAAA,IAAM2B,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAI3B,CAAgB,EAAK;AACrD,IAAA,IAAIP,KAAK,CAACQ,MAAM,IAAIb,gBAAgB,EAAE;MACrC,QAAQY,CAAC,CAACE,GAAG;AACZ,QAAA,KAAK,KAAK;UACT,IAAIF,CAAC,CAACK,QAAQ,EAAE;YACfF,cAAc,CAACH,CAAC,CAAC;YACjBT,mBAAmB,CAACA,mBAAmB,CAAC+B,MAAM,GAAG,CAAC,CAAC,CAACb,KAAK,EAAE;AAC3D,YAAA;AACD,UAAA;AACF;AACD,IAAA;EACD,CAAC;EAED,IAAMmB,WAAW,GAAG9B,KAAK,CAACC,WAAW,CACpC,UAACC,CAAyC,EAAK;IAC9C,IAAIA,CAAC,CAACE,GAAG,KAAK,OAAO,IAAIF,CAAC,CAACE,GAAG,KAAK,GAAG,EAAE;AAAA,MAAA,IAAA2B,oBAAA;AACvC3C,MAAAA,SAAS,EAAE;AACX,MAAA,IAAIE,gBAAgB,EAAEO,UAAU,aAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAA,CAAAkC,oBAAA,GAAVlC,UAAU,CAAEa,OAAO,cAAAqB,oBAAA,KAAA,MAAA,GAAA,MAAA,GAAnBA,oBAAA,CAAqBpB,KAAK,EAAE;AACnD,IAAA;EACD,CAAC;AACD;AACA,EAAA,CAACvB,SAAS,EAAEE,gBAAgB,CAC7B,CAAC;EAED,OAAO;AACNwC,IAAAA,WAAW,EAAXA,WAAW;AACXX,IAAAA,aAAa,EAAbA,aAAa;AACbU,IAAAA,uBAAuB,EAAvBA,uBAAuB;AACvBd,IAAAA,aAAa,EAAbA,aAAa;AACbD,IAAAA,aAAa,EAAbA,aAAa;AACbf,IAAAA,aAAa,EAAbA,aAAa;AACba,IAAAA,iBAAiB,EAAjBA;GACA;AACF;;;;"}

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

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+var getDataPoint = function getDataPoint(position, alignment) {
+  return "".concat(position, "-").concat(alignment);
+};
+
+export { getDataPoint };
+//# sourceMappingURL=get-data-point.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-data-point.js","sources":["../../../../../../src/components/popover/MrlPopover/utilities/get-data-point.ts"],"sourcesContent":["import { MenuAlignment, MenuPosition } from '../../../menu';\n\n/**\n * Returns the data-point attribute for the popover pointer\n *\n * @param position - position of the menu\n * @param alignment - alignment of the menu\n * @returns - data-point attribute value\n */\nexport const getDataPoint = (position: MenuPosition, alignment: MenuAlignment): string => {\n\treturn `${position}-${alignment}`;\n};\n"],"names":["getDataPoint","position","alignment","concat"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAIC,QAAsB,EAAEC,SAAwB,EAAa;AACzF,EAAA,OAAA,EAAA,CAAAC,MAAA,CAAUF,QAAQ,EAAA,GAAA,CAAA,CAAAE,MAAA,CAAID,SAAS,CAAA;AAChC;;;;"}

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

@@ -0,0 +1,20 @@
+/**
+ * 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
+ */
+var getOffset = function getOffset(position, point) {
+  if (point) {
+    if (position === 'top' || position === 'bottom') {
+      return 7;
+    } else if (position === 'left' || position === 'right') {
+      return 7;
+    }
+  }
+  return 10;
+};
+
+export { getOffset };
+//# sourceMappingURL=get-offset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-offset.js","sources":["../../../../../../src/components/popover/MrlPopover/utilities/get-offset.ts"],"sourcesContent":["import { MenuPosition } from '../../../menu';\n\n/**\n * Returns a value in PX for the offset of the popover from the menu at different positions\n *\n * @param position - position of the menu\n * @param point - if the menu has a pointer\n * @returns - offset in PX\n */\nexport const getOffset = (position: MenuPosition, point: boolean): number => {\n\tif (point) {\n\t\tif (position === 'top' || position === 'bottom') {\n\t\t\treturn 7;\n\t\t} else if (position === 'left' || position === 'right') {\n\t\t\treturn 7;\n\t\t}\n\t}\n\n\treturn 10;\n};\n"],"names":["getOffset","position","point"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,SAAS,GAAG,SAAZA,SAASA,CAAIC,QAAsB,EAAEC,KAAc,EAAa;AAC5E,EAAA,IAAIA,KAAK,EAAE;AACV,IAAA,IAAID,QAAQ,KAAK,KAAK,IAAIA,QAAQ,KAAK,QAAQ,EAAE;AAChD,MAAA,OAAO,CAAC;IACT,CAAC,MAAM,IAAIA,QAAQ,KAAK,MAAM,IAAIA,QAAQ,KAAK,OAAO,EAAE;AACvD,MAAA,OAAO,CAAC;AACT,IAAA;AACD,EAAA;AAEA,EAAA,OAAO,EAAE;AACV;;;;"}

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

@@ -0,0 +1,66 @@
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { PORTAL_LAYERS } from '../../utils/layers/index.js';
+
+var _excluded = ["children", "className", "id", "layer"];
+var MRL_PORTAL_ID = 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
+ */
+var MrlPortal = function MrlPortal(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    id = _ref.id,
+    layer = _ref.layer,
+    remainingProps = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    portalElement = _React$useState2[0],
+    setPortalElement = _React$useState2[1];
+  var element = 'div';
+  var portalId = (layer === null || layer === void 0 ? void 0 : layer.name) || id || MRL_PORTAL_ID;
+  var portalLayer = layer || PORTAL_LAYERS.ROOT;
+  React.useLayoutEffect(function () {
+    var portal = document.getElementById(portalId);
+    var dataQa = remainingProps['data-qa'] || id || 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;
+  var childrenArray = React.Children.toArray(children);
+  if (childrenArray.length > 0 && portalElement) {
+    var firstChildElement = portalElement.firstElementChild;
+    if (firstChildElement) {
+      firstChildElement.style.zIndex = "".concat(portalLayer.zIndex);
+    }
+  }
+
+  // state will be null on the very first render.
+  if (!portalElement) return null;
+  return /*#__PURE__*/createPortal(children, portalElement);
+};
+
+export { MRL_PORTAL_ID, MrlPortal };
+//# sourceMappingURL=MrlPortal.js.map

package/dist/esm/components/portal/MrlPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlPortal.js","sources":["../../../../src/components/portal/MrlPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PORTAL_LAYERS } from '../../utils/layers';\n\ntype PortalLayer = (typeof PORTAL_LAYERS)[keyof typeof PORTAL_LAYERS];\nexport interface PortalProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\t['data-qa']?: string;\n\tid?: string;\n\tlayer?: PortalLayer;\n}\n\nexport const MRL_PORTAL_ID = PORTAL_LAYERS.ROOT.name;\n\n/**\n * Dynamically creates a single portal and send your children to the portal.\n * Where they will live outside of the normal document flow\n *\n * @param PortalProps Portal only takes children. Contact the platform team if you need to extend this.\n * @returns MrlPortal component\n */\nexport const MrlPortal = ({\n\tchildren,\n\tclassName,\n\tid,\n\tlayer,\n\t...remainingProps\n}: PortalProps): React.ReactElement | null => {\n\tconst [portalElement, setPortalElement] = React.useState<HTMLElement | null>(null);\n\tconst element = 'div';\n\tconst portalId = layer?.name || id || MRL_PORTAL_ID;\n\tconst portalLayer = layer || PORTAL_LAYERS.ROOT;\n\n\tReact.useLayoutEffect(() => {\n\t\tlet portal = document.getElementById(portalId);\n\t\tconst dataQa = remainingProps['data-qa'] || id || PORTAL_LAYERS.ROOT.name;\n\n\t\t// create the portal on the fly and reuse the same one each time.\n\t\tif (!portal) {\n\t\t\tportal = document.createElement(element);\n\t\t\tportal.setAttribute('id', portalId);\n\t\t\tportal.setAttribute('data-qa', dataQa);\n\t\t\tportal.setAttribute('data-testid', dataQa);\n\t\t\tif (className) portal.setAttribute('class', className);\n\t\t\tdocument.body.appendChild(portal);\n\t\t}\n\n\t\tsetPortalElement(portal);\n\t}, [\n\t\tportalId,\n\t\tremainingProps,\n\t\tid,\n\t\tclassName\n\t]);\n\n\t/**\n\t * Sets z-index of the first child element of the portal to the layer's z-index\n\t *\n\t * TODO: update to also accept a 'layerId' that will override the default layer\n\t * with the provided layerId\n\t */\n\tif (!portalElement) return null;\n\n\tconst childrenArray = React.Children.toArray(children);\n\tif (childrenArray.length > 0 && portalElement) {\n\t\tconst firstChildElement = portalElement.firstElementChild as HTMLElement | null;\n\t\tif (firstChildElement) {\n\t\t\tfirstChildElement.style.zIndex = `${portalLayer.zIndex}`;\n\t\t}\n\t}\n\n\t// state will be null on the very first render.\n\tif (!portalElement) return null;\n\n\treturn createPortal(children, portalElement);\n};\n"],"names":["MRL_PORTAL_ID","PORTAL_LAYERS","ROOT","name","MrlPortal","_ref","children","className","id","layer","remainingProps","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","portalElement","setPortalElement","element","portalId","portalLayer","useLayoutEffect","portal","document","getElementById","dataQa","createElement","setAttribute","body","appendChild","childrenArray","Children","toArray","length","firstChildElement","firstElementChild","style","zIndex","concat","createPortal"],"mappings":";;;;;;IAaaA,aAAa,GAAGC,aAAa,CAACC,IAAI,CAACC;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA;IACaC,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAMwB;AAAA,EAAA,IAL7CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IACFC,KAAK,GAAAJ,IAAA,CAALI,KAAK;AACFC,IAAAA,cAAc,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA;AAEjB,EAAA,IAAAC,eAAA,GAA0CC,KAAK,CAACC,QAAQ,CAAqB,IAAI,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAA3EK,IAAAA,aAAa,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,gBAAgB,GAAAH,gBAAA,CAAA,CAAA,CAAA;EACtC,IAAMI,OAAO,GAAG,KAAK;AACrB,EAAA,IAAMC,QAAQ,GAAG,CAAAZ,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,MAAA,GAAA,MAAA,GAALA,KAAK,CAAEN,IAAI,KAAIK,EAAE,IAAIR,aAAa;AACnD,EAAA,IAAMsB,WAAW,GAAGb,KAAK,IAAIR,aAAa,CAACC,IAAI;EAE/CY,KAAK,CAACS,eAAe,CAAC,YAAM;AAC3B,IAAA,IAAIC,MAAM,GAAGC,QAAQ,CAACC,cAAc,CAACL,QAAQ,CAAC;AAC9C,IAAA,IAAMM,MAAM,GAAGjB,cAAc,CAAC,SAAS,CAAC,IAAIF,EAAE,IAAIP,aAAa,CAACC,IAAI,CAACC,IAAI;;AAEzE;IACA,IAAI,CAACqB,MAAM,EAAE;AACZA,MAAAA,MAAM,GAAGC,QAAQ,CAACG,aAAa,CAACR,OAAO,CAAC;AACxCI,MAAAA,MAAM,CAACK,YAAY,CAAC,IAAI,EAAER,QAAQ,CAAC;AACnCG,MAAAA,MAAM,CAACK,YAAY,CAAC,SAAS,EAAEF,MAAM,CAAC;AACtCH,MAAAA,MAAM,CAACK,YAAY,CAAC,aAAa,EAAEF,MAAM,CAAC;MAC1C,IAAIpB,SAAS,EAAEiB,MAAM,CAACK,YAAY,CAAC,OAAO,EAAEtB,SAAS,CAAC;AACtDkB,MAAAA,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACP,MAAM,CAAC;AAClC,IAAA;IAEAL,gBAAgB,CAACK,MAAM,CAAC;EACzB,CAAC,EAAE,CACFH,QAAQ,EACRX,cAAc,EACdF,EAAE,EACFD,SAAS,CACT,CAAC;;AAEF;AACD;AACA;AACA;AACA;AACA;AACC,EAAA,IAAI,CAACW,aAAa,EAAE,OAAO,IAAI;EAE/B,IAAMc,aAAa,GAAGlB,KAAK,CAACmB,QAAQ,CAACC,OAAO,CAAC5B,QAAQ,CAAC;AACtD,EAAA,IAAI0B,aAAa,CAACG,MAAM,GAAG,CAAC,IAAIjB,aAAa,EAAE;AAC9C,IAAA,IAAMkB,iBAAiB,GAAGlB,aAAa,CAACmB,iBAAuC;AAC/E,IAAA,IAAID,iBAAiB,EAAE;MACtBA,iBAAiB,CAACE,KAAK,CAACC,MAAM,GAAA,EAAA,CAAAC,MAAA,CAAMlB,WAAW,CAACiB,MAAM,CAAE;AACzD,IAAA;AACD,EAAA;;AAEA;AACA,EAAA,IAAI,CAACrB,aAAa,EAAE,OAAO,IAAI;AAE/B,EAAA,oBAAOuB,YAAY,CAACnC,QAAQ,EAAEY,aAAa,CAAC;AAC7C;;;;"}