@muraldevkit/ui-toolkit 4.70.1 → 4.70.3-dev-kmM6.1

package/dist/cjs/components/form/select/components/MrlSelectContainer.js

@@ -3,6 +3,7 @@
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var Select = require('react-select');
+var useMenuEscapeContainment = require('../utils/useMenuEscapeContainment.js');
 
 function _interopNamespace(e) {
 	if (e && e.__esModule) return e;
@@ -27,13 +28,17 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 /**
  * MrlSelectContainer component
  *
+ * Adds `data-qa` support and keeps the `Escape` press that dismisses an open menu
+ * from also closing an outer dismissible surface (e.g. a select inside MrlModal).
+ *
  * @param props - the react-select container props
  * @returns a select container
  */
 function MrlSelectContainer(props) {
   var dataQa = props.selectProps['data-qa'];
+  var escapeContainment = useMenuEscapeContainment.useMenuEscapeContainment(props.selectProps.menuIsOpen, props.innerProps.onKeyDown);
   return /*#__PURE__*/React__namespace.createElement(Select.components.SelectContainer, _rollupPluginBabelHelpers.extends({}, props, {
-    innerProps: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props.innerProps), dataQa && {
+    innerProps: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props.innerProps), escapeContainment), dataQa && {
       'data-qa': "".concat(dataQa, "-container")
     })
   }));

package/dist/cjs/components/form/select/components/MrlSelectContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlSelectContainer.js","sources":["../../../../../../src/components/form/select/components/MrlSelectContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { GroupBase, components, ContainerProps } from 'react-select';\n\n/**\n * MrlSelectContainer component\n *\n * @param props - the react-select container props\n * @returns a select container\n */\nexport function MrlSelectContainer<\n\tT,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<T> = GroupBase<T>\n>(props: ContainerProps<T, IsMulti, Group>): JSX.Element {\n\tconst dataQa = props.selectProps['data-qa'];\n\treturn (\n\t\t<components.SelectContainer\n\t\t\t{...props}\n\t\t\tinnerProps={{\n\t\t\t\t...props.innerProps,\n\t\t\t\t...(dataQa && { 'data-qa': `${dataQa}-container` })\n\t\t\t}}\n\t\t/>\n\t);\n}\n"],"names":["MrlSelectContainer","props","dataQa","selectProps","React","createElement","components","SelectContainer","_extends","innerProps","_objectSpread","concat"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAIhCC,KAAwC,EAAe;AACxD,EAAA,IAAMC,MAAM,GAAGD,KAAK,CAACE,WAAW,CAAC,SAAS,CAAC;EAC3C,oBACCC,gBAAA,CAAAC,aAAA,CAACC,iBAAU,CAACC,eAAe,EAAAC,iCAAA,CAAA,EAAA,EACtBP,KAAK,EAAA;IACTQ,UAAU,EAAAC,uCAAA,CAAAA,uCAAA,CAAA,EAAA,EACNT,KAAK,CAACQ,UAAU,CAAA,EACfP,MAAM,IAAI;MAAE,SAAS,EAAA,EAAA,CAAAS,MAAA,CAAKT,MAAM,EAAA,YAAA;KAAc;AACjD,GAAA,CACF,CAAC;AAEJ;;;;"}
+{"version":3,"file":"MrlSelectContainer.js","sources":["../../../../../../src/components/form/select/components/MrlSelectContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { GroupBase, components, ContainerProps } from 'react-select';\nimport { useMenuEscapeContainment } from '../utils/useMenuEscapeContainment';\n\n/**\n * MrlSelectContainer component\n *\n * Adds `data-qa` support and keeps the `Escape` press that dismisses an open menu\n * from also closing an outer dismissible surface (e.g. a select inside MrlModal).\n *\n * @param props - the react-select container props\n * @returns a select container\n */\nexport function MrlSelectContainer<\n\tT,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<T> = GroupBase<T>\n>(props: ContainerProps<T, IsMulti, Group>): JSX.Element {\n\tconst dataQa = props.selectProps['data-qa'];\n\tconst escapeContainment = useMenuEscapeContainment(\n\t\tprops.selectProps.menuIsOpen,\n\t\tprops.innerProps.onKeyDown\n\t);\n\n\treturn (\n\t\t<components.SelectContainer\n\t\t\t{...props}\n\t\t\tinnerProps={{\n\t\t\t\t...props.innerProps,\n\t\t\t\t...escapeContainment,\n\t\t\t\t...(dataQa && { 'data-qa': `${dataQa}-container` })\n\t\t\t}}\n\t\t/>\n\t);\n}\n"],"names":["MrlSelectContainer","props","dataQa","selectProps","escapeContainment","useMenuEscapeContainment","menuIsOpen","innerProps","onKeyDown","React","createElement","components","SelectContainer","_extends","_objectSpread","concat"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAIhCC,KAAwC,EAAe;AACxD,EAAA,IAAMC,MAAM,GAAGD,KAAK,CAACE,WAAW,CAAC,SAAS,CAAC;AAC3C,EAAA,IAAMC,iBAAiB,GAAGC,iDAAwB,CACjDJ,KAAK,CAACE,WAAW,CAACG,UAAU,EAC5BL,KAAK,CAACM,UAAU,CAACC,SAClB,CAAC;EAED,oBACCC,gBAAA,CAAAC,aAAA,CAACC,iBAAU,CAACC,eAAe,EAAAC,iCAAA,CAAA,EAAA,EACtBZ,KAAK,EAAA;AACTM,IAAAA,UAAU,EAAAO,uCAAA,CAAAA,uCAAA,CAAAA,uCAAA,CAAA,EAAA,EACNb,KAAK,CAACM,UAAU,CAAA,EAChBH,iBAAiB,CAAA,EAChBF,MAAM,IAAI;MAAE,SAAS,EAAA,EAAA,CAAAa,MAAA,CAAKb,MAAM,EAAA,YAAA;KAAc;AACjD,GAAA,CACF,CAAC;AAEJ;;;;"}

package/dist/cjs/components/form/select/utils/useMenuEscapeContainment.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * Keeps the `Escape` press that dismisses an open select menu from reaching outer
+ * dismissible surfaces. MrlModal, MrlPanel and MrlPopover close on `Escape` keydown
+ * and MrlSidebar on keyup, so without containment a single press would close the
+ * menu and the surface behind it at the same time.
+ *
+ * While the menu is open, the `Escape` keydown and its paired keyup stop propagating
+ * after react-select handles them. Once the menu is closed, `Escape` bubbles as
+ * usual so the outer surface can respond to the next press.
+ *
+ * @param menuIsOpen - the resolved react-select menu state
+ * @param onKeyDown - react-select's container keydown handler to wrap
+ * @returns key event handlers to spread into the select container's `innerProps`
+ */
+function useMenuEscapeContainment(menuIsOpen, onKeyDown) {
+  var escapeDismissedTheMenu = React__namespace.useRef(false);
+  var handleKeyDown = event => {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    if (event.key !== 'Escape') return;
+    escapeDismissedTheMenu.current = menuIsOpen;
+    if (menuIsOpen) event.stopPropagation();
+  };
+  var handleKeyUp = event => {
+    if (event.key !== 'Escape') return;
+    if (escapeDismissedTheMenu.current) event.stopPropagation();
+    escapeDismissedTheMenu.current = false;
+  };
+  return {
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  };
+}
+
+exports.useMenuEscapeContainment = useMenuEscapeContainment;
+//# sourceMappingURL=useMenuEscapeContainment.js.map

package/dist/cjs/components/form/select/utils/useMenuEscapeContainment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuEscapeContainment.js","sources":["../../../../../../src/components/form/select/utils/useMenuEscapeContainment.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface MenuEscapeContainmentHandlers {\n\tonKeyDown: React.KeyboardEventHandler<HTMLDivElement>;\n\tonKeyUp: React.KeyboardEventHandler<HTMLDivElement>;\n}\n\n/**\n * Keeps the `Escape` press that dismisses an open select menu from reaching outer\n * dismissible surfaces. MrlModal, MrlPanel and MrlPopover close on `Escape` keydown\n * and MrlSidebar on keyup, so without containment a single press would close the\n * menu and the surface behind it at the same time.\n *\n * While the menu is open, the `Escape` keydown and its paired keyup stop propagating\n * after react-select handles them. Once the menu is closed, `Escape` bubbles as\n * usual so the outer surface can respond to the next press.\n *\n * @param menuIsOpen - the resolved react-select menu state\n * @param onKeyDown - react-select's container keydown handler to wrap\n * @returns key event handlers to spread into the select container's `innerProps`\n */\nexport function useMenuEscapeContainment(\n\tmenuIsOpen: boolean,\n\tonKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined\n): MenuEscapeContainmentHandlers {\n\tconst escapeDismissedTheMenu = React.useRef(false);\n\n\tconst handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n\t\tonKeyDown?.(event);\n\n\t\tif (event.key !== 'Escape') return;\n\n\t\tescapeDismissedTheMenu.current = menuIsOpen;\n\t\tif (menuIsOpen) event.stopPropagation();\n\t};\n\n\tconst handleKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n\t\tif (event.key !== 'Escape') return;\n\n\t\tif (escapeDismissedTheMenu.current) event.stopPropagation();\n\t\tescapeDismissedTheMenu.current = false;\n\t};\n\n\treturn { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp };\n}\n"],"names":["useMenuEscapeContainment","menuIsOpen","onKeyDown","escapeDismissedTheMenu","React","useRef","handleKeyDown","event","key","current","stopPropagation","handleKeyUp","onKeyUp"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,wBAAwBA,CACvCC,UAAmB,EACnBC,SAAiE,EACjC;AAChC,EAAA,IAAMC,sBAAsB,GAAGC,gBAAK,CAACC,MAAM,CAAC,KAAK,CAAC;EAElD,IAAMC,aAAyD,GAAIC,KAAK,IAAK;AAC5EL,IAAAA,SAAS,aAATA,SAAS,KAAA,MAAA,GAAA,MAAA,GAATA,SAAS,CAAGK,KAAK,CAAC;AAElB,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;IAE5BL,sBAAsB,CAACM,OAAO,GAAGR,UAAU;AAC3C,IAAA,IAAIA,UAAU,EAAEM,KAAK,CAACG,eAAe,EAAE;EACxC,CAAC;EAED,IAAMC,WAAuD,GAAIJ,KAAK,IAAK;AAC1E,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;IAE5B,IAAIL,sBAAsB,CAACM,OAAO,EAAEF,KAAK,CAACG,eAAe,EAAE;IAC3DP,sBAAsB,CAACM,OAAO,GAAG,KAAK;EACvC,CAAC;EAED,OAAO;AAAEP,IAAAA,SAAS,EAAEI,aAAa;AAAEM,IAAAA,OAAO,EAAED;GAAa;AAC1D;;;;"}

package/dist/cjs/components/notification/MrlBlockNotification/MrlBlockNotification.module.scss.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"mrl-blockNotification":"mrl-blockNotification--xbhrd","mrl-blockNotification-icon":"mrl-blockNotification-icon--CAq04","mrl-blockNotification-close-wrapper":"mrl-blockNotification-close-wrapper--yODTH","cta":"cta--gnyoO","mrl-blockNotification--dismissible":"mrl-blockNotification--dismissible--ZlIID","mrl-blockNotification-message":"mrl-blockNotification-message--MdtXZ","mrl-blockNotification-heading":"mrl-blockNotification-heading--WGPWE"};
+var styles = {"mrl-blockNotification":"mrl-blockNotification--xbhrd","mrl-blockNotification-icon":"mrl-blockNotification-icon--CAq04","mrl-blockNotification-close-wrapper":"mrl-blockNotification-close-wrapper--yODTH","cta":"cta--gnyoO","mrl-blockNotification--dismissible":"mrl-blockNotification--dismissible--ZlIID","mrl-blockNotification-heading":"mrl-blockNotification-heading--WGPWE","mrl-blockNotification-message":"mrl-blockNotification-message--MdtXZ"};
 
 exports.default = styles;
 //# sourceMappingURL=MrlBlockNotification.module.scss.js.map

package/dist/cjs/hooks/useAutoClose/useAutoClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoClose.js","sources":["../../../../src/hooks/useAutoClose/useAutoClose.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type useAutoClose = (\n\tshouldAutoClose?: boolean,\n\tcloseAfterMs?: number,\n\tonClose?: () => unknown\n) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];\n\n/**\n * Hook that exposes a piece of state that allows components to close themselves after a delay\n *\n * @param shouldAutoClose - When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern)\n * @param closeAfterMs - Delay in milliseconds before the component closes\n * @param onClose - Callback to be called when component closes\n * @returns [closed, setClosed] - a boolean tracking closed state, and a setter for that same state\n */\nexport const useAutoClose: useAutoClose = function (\n\tshouldAutoClose = true,\n\tcloseAfterMs = 3000,\n\tonClose\n) {\n\tconst [closed, setClosed] = React.useState<boolean>(false);\n\tconst currentTimeout = React.useRef<NodeJS.Timeout | null>(null);\n\n\tReact.useEffect(() => {\n\t\t// Reset current timeout when component mounts or when notification changes\n\t\tif (currentTimeout.current) {\n\t\t\tresetTimeout();\n\t\t}\n\n\t\t// Allowing autoClose when there are interactive elements in the toast is an anti-pattern\n\t\t// and should be avoided. If autoClose is set to true and interactive elements exist, the\n\t\t// toast will not close automatically.\n\t\tif (shouldAutoClose) {\n\t\t\tsetClosed(false);\n\n\t\t\tcurrentTimeout.current = setTimeout(() => {\n\t\t\t\tsetClosed(true);\n\n\t\t\t\t// Handle onClose after the timeout is elapsed\n\t\t\t\tif (onClose) onClose();\n\t\t\t}, closeAfterMs);\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Clear timeout when component unmounts\n\t\t\tresetTimeout();\n\t\t};\n\t}, [shouldAutoClose, closeAfterMs, onClose]);\n\n\t/** Resets the current timeout and `closed` to its initial value */\n\tconst resetTimeout = (): void => {\n\t\tif (currentTimeout.current !== null) {\n\t\t\tclearTimeout(currentTimeout.current);\n\t\t}\n\t\tsetClosed(false);\n\t};\n\n\treturn [closed, setClosed];\n};\n"],"names":["useAutoClose","shouldAutoClose","arguments","length","undefined","closeAfterMs","onClose","_React$useState","React","useState","_React$useState2","_slicedToArray","closed","setClosed","currentTimeout","useRef","useEffect","current","resetTimeout","setTimeout","clearTimeout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaA,YAA0B,GAAG,SAA7BA,YAA0BA,GAIrC;AAAA,EAAA,IAHDC,eAAe,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;AAAA,EAAA,IACtBG,YAAY,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;EAAA,IACnBI,OAAO,GAAAJ,SAAA,CAAAC,MAAA,GAAA,CAAA,GAAAD,SAAA,MAAAE,SAAA;AAEP,EAAA,IAAAG,eAAA,GAA4BC,gBAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,GAAAC,uCAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAnDK,IAAAA,MAAM,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,SAAS,GAAAH,gBAAA,CAAA,CAAA,CAAA;AACxB,EAAA,IAAMI,cAAc,GAAGN,gBAAK,CAACO,MAAM,CAAwB,IAAI,CAAC;EAEhEP,gBAAK,CAACQ,SAAS,CAAC,MAAM;AACrB;IACA,IAAIF,cAAc,CAACG,OAAO,EAAE;AAC3BC,MAAAA,YAAY,EAAE;AACf,IAAA;;AAEA;AACA;AACA;AACA,IAAA,IAAIjB,eAAe,EAAE;MACpBY,SAAS,CAAC,KAAK,CAAC;AAEhBC,MAAAA,cAAc,CAACG,OAAO,GAAGE,UAAU,CAAC,MAAM;QACzCN,SAAS,CAAC,IAAI,CAAC;;AAEf;AACA,QAAA,IAAIP,OAAO,EAAEA,OAAO,EAAE;MACvB,CAAC,EAAED,YAAY,CAAC;AACjB,IAAA;AAEA,IAAA,OAAO,MAAM;AACZ;AACAa,MAAAA,YAAY,EAAE;IACf,CAAC;EACF,CAAC,EAAE,CAACjB,eAAe,EAAEI,YAAY,EAAEC,OAAO,CAAC,CAAC;;AAE5C;EACA,IAAMY,YAAY,GAAGA,MAAY;AAChC,IAAA,IAAIJ,cAAc,CAACG,OAAO,KAAK,IAAI,EAAE;AACpCG,MAAAA,YAAY,CAACN,cAAc,CAACG,OAAO,CAAC;AACrC,IAAA;IACAJ,SAAS,CAAC,KAAK,CAAC;EACjB,CAAC;AAED,EAAA,OAAO,CAACD,MAAM,EAAEC,SAAS,CAAC;AAC3B;;;;"}
+{"version":3,"file":"useAutoClose.js","sources":["../../../../src/hooks/useAutoClose/useAutoClose.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type useAutoClose = (\n\tshouldAutoClose?: boolean,\n\tcloseAfterMs?: number,\n\tonClose?: () => unknown\n) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];\n\n/**\n * Hook that exposes a piece of state that allows components to close themselves after a delay\n *\n * @param shouldAutoClose - When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern)\n * @param closeAfterMs - Delay in milliseconds before the component closes\n * @param onClose - Callback to be called when component closes\n * @returns [closed, setClosed] - a boolean tracking closed state, and a setter for that same state\n */\nexport const useAutoClose: useAutoClose = function (\n\tshouldAutoClose = true,\n\tcloseAfterMs = 3000,\n\tonClose\n) {\n\tconst [closed, setClosed] = React.useState<boolean>(false);\n\tconst currentTimeout = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n\tReact.useEffect(() => {\n\t\t// Reset current timeout when component mounts or when notification changes\n\t\tif (currentTimeout.current) {\n\t\t\tresetTimeout();\n\t\t}\n\n\t\t// Allowing autoClose when there are interactive elements in the toast is an anti-pattern\n\t\t// and should be avoided. If autoClose is set to true and interactive elements exist, the\n\t\t// toast will not close automatically.\n\t\tif (shouldAutoClose) {\n\t\t\tsetClosed(false);\n\n\t\t\tcurrentTimeout.current = setTimeout(() => {\n\t\t\t\tsetClosed(true);\n\n\t\t\t\t// Handle onClose after the timeout is elapsed\n\t\t\t\tif (onClose) onClose();\n\t\t\t}, closeAfterMs);\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Clear timeout when component unmounts\n\t\t\tresetTimeout();\n\t\t};\n\t}, [shouldAutoClose, closeAfterMs, onClose]);\n\n\t/** Resets the current timeout and `closed` to its initial value */\n\tconst resetTimeout = (): void => {\n\t\tif (currentTimeout.current !== null) {\n\t\t\tclearTimeout(currentTimeout.current);\n\t\t}\n\t\tsetClosed(false);\n\t};\n\n\treturn [closed, setClosed];\n};\n"],"names":["useAutoClose","shouldAutoClose","arguments","length","undefined","closeAfterMs","onClose","_React$useState","React","useState","_React$useState2","_slicedToArray","closed","setClosed","currentTimeout","useRef","useEffect","current","resetTimeout","setTimeout","clearTimeout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaA,YAA0B,GAAG,SAA7BA,YAA0BA,GAIrC;AAAA,EAAA,IAHDC,eAAe,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;AAAA,EAAA,IACtBG,YAAY,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;EAAA,IACnBI,OAAO,GAAAJ,SAAA,CAAAC,MAAA,GAAA,CAAA,GAAAD,SAAA,MAAAE,SAAA;AAEP,EAAA,IAAAG,eAAA,GAA4BC,gBAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,GAAAC,uCAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAnDK,IAAAA,MAAM,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,SAAS,GAAAH,gBAAA,CAAA,CAAA,CAAA;AACxB,EAAA,IAAMI,cAAc,GAAGN,gBAAK,CAACO,MAAM,CAAuC,IAAI,CAAC;EAE/EP,gBAAK,CAACQ,SAAS,CAAC,MAAM;AACrB;IACA,IAAIF,cAAc,CAACG,OAAO,EAAE;AAC3BC,MAAAA,YAAY,EAAE;AACf,IAAA;;AAEA;AACA;AACA;AACA,IAAA,IAAIjB,eAAe,EAAE;MACpBY,SAAS,CAAC,KAAK,CAAC;AAEhBC,MAAAA,cAAc,CAACG,OAAO,GAAGE,UAAU,CAAC,MAAM;QACzCN,SAAS,CAAC,IAAI,CAAC;;AAEf;AACA,QAAA,IAAIP,OAAO,EAAEA,OAAO,EAAE;MACvB,CAAC,EAAED,YAAY,CAAC;AACjB,IAAA;AAEA,IAAA,OAAO,MAAM;AACZ;AACAa,MAAAA,YAAY,EAAE;IACf,CAAC;EACF,CAAC,EAAE,CAACjB,eAAe,EAAEI,YAAY,EAAEC,OAAO,CAAC,CAAC;;AAE5C;EACA,IAAMY,YAAY,GAAGA,MAAY;AAChC,IAAA,IAAIJ,cAAc,CAACG,OAAO,KAAK,IAAI,EAAE;AACpCG,MAAAA,YAAY,CAACN,cAAc,CAACG,OAAO,CAAC;AACrC,IAAA;IACAJ,SAAS,CAAC,KAAK,CAAC;EACjB,CAAC;AAED,EAAA,OAAO,CAACD,MAAM,EAAEC,SAAS,CAAC;AAC3B;;;;"}

package/dist/components/breadcrumb/MrlBreadcrumbSeparator/MrlBreadcrumbSeparator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * MrlBreadcrumbSeparator component.
  * @returns The MrlBreadcrumbSeparator component.

package/dist/components/divider/MrlDivider/MrlDivider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AttrsObject } from '../../../utils';
 import { Kind, Orientation, Spacing, Weight } from '../constants';
 interface MrlDividerProps {

package/dist/components/empty/default/MrlEmpty.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MrlEmptyProps {
     graphic?: JSX.Element;
     heading: string;

package/dist/components/empty/large/MrlEmptyLarge.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MrlEmptyLargeProps {
     graphic?: JSX.Element;
     heading: string;

package/dist/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AttrsObject } from '../../../../utils';
 import { CheckboxSelected, CheckboxStates } from '../../constants';
 import './MrlCheckboxStandalone.global.scss';

package/dist/components/form/legacy-select/MrlLegacySelectMenu/MrlLegacySelectMenu.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
 import { SelectMenuPositions } from '../../constants';
 import { AttrsObject } from '../../../../utils';
 export interface MrlLegacySelectMenuProptypes extends React.HTMLAttributes<HTMLDivElement> {

package/dist/components/form/select/MrlCreatableSelect/MrlCreatableSelect.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CreatableProps } from 'react-select/creatable';
 import { GroupBase } from 'react-select';
 import { SelectKind } from '../types';
@@ -17,7 +16,7 @@ export interface MrlCreatableSelectProps<Option, IsMulti extends boolean = false
     showClearIndicatorIcon?: boolean;
 }
 export declare const CREATABLE_SELECT_CLASS_NAME_PREFIX = "MrlCreatableSelect";
-export declare const CREATABLE_SELECT_MENU_LIST_CLASS_NAME: string;
+export declare const CREATABLE_SELECT_MENU_LIST_CLASS_NAME = "MrlCreatableSelect__menu-list";
 /**
  * MrlCreatableSelect component that supports creating extra options with user input. Option creating could be async too.
  * @param props - the component props

package/dist/components/form/select/MrlMultiCreatableSelect/MrlMultiCreatableSelect.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CreatableProps } from 'react-select/creatable';
 import { GroupBase } from 'react-select';
 import { DefaultOption, SelectKind } from '../types';
@@ -17,7 +16,7 @@ export interface MrlMultiCreatableSelectProps<Option, IsMulti extends boolean =
     showClearIndicatorIcon?: boolean;
 }
 export declare const MULTI_CREATABLE_SELECT_CLASS_NAME_PREFIX = "MrlMultiCreatableSelect";
-export declare const MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME: string;
+export declare const MULTI_CREATABLE_SELECT_MENU_LIST_CLASS_NAME = "MrlMultiCreatableSelect__menu-list";
 /**
  * MrlMultiCreatableSelect component that supports creating extra options with user input. Option creating could be async too.
  * @param props - the component props

package/dist/components/form/select/MrlMultiSelect/MrlMultiSelect.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GroupBase, Props } from 'react-select';
 import { DefaultOption, SelectKind } from '../types';
 export interface MrlMultiSelectProps<T, IsMulti extends boolean = false, Group extends GroupBase<T> = GroupBase<T>> extends Omit<Props<T, IsMulti, Group>, 'isMulti' | 'hideSelectedOptions'> {
@@ -15,7 +14,7 @@ export interface MrlMultiSelectProps<T, IsMulti extends boolean = false, Group e
     ['data-qa']?: string;
 }
 export declare const MULTI_SELECT_CLASS_NAME_PREFIX = "MrlMultiSelect";
-export declare const MULTI_SELECT_MENU_LIST_CLASS_NAME: string;
+export declare const MULTI_SELECT_MENU_LIST_CLASS_NAME = "MrlMultiSelect__menu-list";
 /**
  * MrlSelect component
  * @param props - the component props

package/dist/components/form/select/MrlSelect/MrlSelect.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GroupBase, Props } from 'react-select';
 import { SelectKind } from '../types';
 export interface MrlSelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends Props<Option, IsMulti, Group> {
@@ -15,7 +14,7 @@ export interface MrlSelectProps<Option, IsMulti extends boolean = false, Group e
     ['data-qa']?: string;
 }
 export declare const SELECT_CLASS_NAME_PREFIX = "MrlSelect";
-export declare const SELECT_MENU_LIST_CLASS_NAME: string;
+export declare const SELECT_MENU_LIST_CLASS_NAME = "MrlSelect__menu-list";
 /**
  * MrlSelect component
  * @param props - the component props

package/dist/components/form/select/components/MrlSelectClearIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ClearIndicatorProps, GroupBase } from 'react-select';
 /**
  * MrlSelectClearIndicator component

package/dist/components/form/select/components/MrlSelectContainer.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
 import { GroupBase, ContainerProps } from 'react-select';
 /**
  * MrlSelectContainer component
  *
+ * Adds `data-qa` support and keeps the `Escape` press that dismisses an open menu
+ * from also closing an outer dismissible surface (e.g. a select inside MrlModal).
+ *
  * @param props - the react-select container props
  * @returns a select container
  */

package/dist/components/form/select/components/MrlSelectDropdownIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DropdownIndicatorProps, GroupBase } from 'react-select';
 /**
  * MrlSelectDropdownIndicator component

package/dist/components/form/select/components/MrlSelectMultiValue.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GroupBase, MultiValueProps } from 'react-select';
 import { DefaultOption } from '../types';
 /**

package/dist/components/form/select/components/MrlSelectMultiValueRemove.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GroupBase, MultiValueRemoveProps } from 'react-select';
 /**
  * MrlSelectMultiValueRemove component

package/dist/components/form/select/components/MrlSelectOption.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GroupBase, OptionProps } from 'react-select';
 /**
  * MrlSelectOption component

package/dist/components/form/select/components/MrlSelectValueContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GroupBase, ValueContainerProps } from 'react-select';
 /**
  * MrlSelectValueContainer component

package/dist/components/form/select/utils/useMenuEscapeContainment.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+interface MenuEscapeContainmentHandlers {
+    onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp: React.KeyboardEventHandler<HTMLDivElement>;
+}
+/**
+ * Keeps the `Escape` press that dismisses an open select menu from reaching outer
+ * dismissible surfaces. MrlModal, MrlPanel and MrlPopover close on `Escape` keydown
+ * and MrlSidebar on keyup, so without containment a single press would close the
+ * menu and the surface behind it at the same time.
+ *
+ * While the menu is open, the `Escape` keydown and its paired keyup stop propagating
+ * after react-select handles them. Once the menu is closed, `Escape` bubbles as
+ * usual so the outer surface can respond to the next press.
+ *
+ * @param menuIsOpen - the resolved react-select menu state
+ * @param onKeyDown - react-select's container keydown handler to wrap
+ * @returns key event handlers to spread into the select container's `innerProps`
+ */
+export declare function useMenuEscapeContainment(menuIsOpen: boolean, onKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined): MenuEscapeContainmentHandlers;
+export {};

package/dist/components/form/textarea/MrlTextarea/MrlTextarea.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AttrsObject } from '../../../../utils';
 import './MrlTextarea.global.scss';
 type MrlTextareaState = 'default' | 'disabled' | 'error' | 'read-only';

package/dist/components/grid/MrlCol/MrlCol.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LayoutComponent } from '../../layout/constants';
 import { GridColumns } from '../constants';
 type MrlCol = LayoutComponent & GridColumns;

package/dist/components/grid/MrlGrid/MrlGrid.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LayoutComponent } from '../../layout/constants';
 import '../grid.variables.scss';
 import '../grid.global.scss';

package/dist/components/grid/MrlRow/MrlRow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LayoutComponent } from '../../layout/constants';
 import { AlignOptions, GutterSizes, JustifyOptions } from '../constants';
 interface MrlRow extends LayoutComponent {

package/dist/components/layout/MrlMain/MrlMain.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LayoutComponent } from '../constants';
 /**
  * MrlMain React component.

package/dist/components/layout/MrlPage/MrlPage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LayoutComponent } from '../constants';
 type MrlPage = LayoutComponent;
 /**

package/dist/components/layout/MrlPage/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LayoutComponent } from '../constants';
 type MrlPage = LayoutComponent;
 /**

package/dist/components/layout/MrlSidebar/demo/MrlSidebarDemo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * MrlSidebar demo with the use of the forward ref to make open/close/toggle the sidebar
  * through buttons as children and outside of the sidebar.

package/dist/components/layout/MrlTopbar/MrlTopbar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LayoutComponent, LayoutSection } from '../constants';
 type MrlTopbar = LayoutComponent & LayoutSection;
 /**

package/dist/components/layout/constants.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface LayoutComponent {
     /**
      * Children to be rendered within the component.

package/dist/components/live-region/demo/LiveRegionDemo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Demo of a live region
  *

package/dist/components/loader/MrlProgressBar/MrlProgressBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProgressBarComponent } from '../constants';
 import '../../../styles/shared/a11y-helpers/a11y.global.scss';
 /**

package/dist/components/loader/MrlSpinner/MrlSpinner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SpinnerComponent } from '../constants';
 import '../../../styles/shared/a11y-helpers/a11y.global.scss';
 /**

package/dist/components/loader/constants.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type CreateArrayWithLengthX<LENGTH extends number, ACC extends unknown[] = []> = ACC['length'] extends LENGTH ? ACC : CreateArrayWithLengthX<LENGTH, [...ACC, 1]>;
 type NumericRange<START_ARR extends number[], END extends number, ACC extends number = never> = START_ARR['length'] extends END ? ACC | END : NumericRange<[...START_ARR, 1], END, ACC | START_ARR['length']>;
 export type ProgressRange = NumericRange<CreateArrayWithLengthX<0>, 100>;

package/dist/components/menu/constants.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type MenuPosition = 'bottom' | 'left' | 'right' | 'top' | 'static' | MenuIgnore;
 export type MenuAlignment = 'start' | 'end' | 'center';
 export type HorizontalAlign = 'left' | 'right' | 'center';

package/dist/components/menu/demo/MenuByConfig.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Demo of a menu with a trigger for stories and testing
  *

package/dist/components/menu/demo/MenuWithPopover.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuPosition, ActionState, MenuAlignment } from '../constants';
 interface MenuWithPopoverProps {
     position?: MenuPosition;

package/dist/components/menu/demo/MenuWithSubmenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuPosition, ActionState, MenuAlignment } from '../constants';
 interface MenuWithSubmenuProps {
     position?: MenuPosition;

package/dist/components/menu/demo/MenuWithTrigger.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CustomMenuPosition } from '../';
 import { MenuPosition, ActionState, MenuAlignment } from '../constants';
 export interface MenuWithTriggerProps {

package/dist/components/modal/demo/ModalWithTriggerDemo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import '../MrlModal/stories.scss';
 interface ModalDemoProps {
     /** Additional function to be run when the modal closes */

package/dist/components/pagination/MrlPaginationText/MrlPaginationText.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MrlPaginationTextProps {
     /** Additional class to add to the container element */
     className?: string;

package/dist/components/popover/demo/PopoverWithIconButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
 interface PopoverWithIconButtonProps {
     hasCloseButton?: boolean;

package/dist/components/popover/demo/PopoverWithSelect.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
 interface PopoverWithSelectProps {
     hasCloseButton?: boolean;

package/dist/components/popover/demo/PopoverWithTrigger.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
 interface PopoverWithTriggerProps {
     hasCloseButton?: boolean;

package/dist/components/table/MrlSmartTable/storybook-utils.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import { MrlSmartCellRendererProps, MrlSmartTableColumn } from './MrlSmartTable';
-export declare const LicenseCell: ((props: MrlSmartCellRendererProps) => JSX.Element) | undefined;
-export declare const MemberSinceCell: ((props: MrlSmartCellRendererProps) => JSX.Element) | undefined;
-export declare const LastSeenCell: ((props: MrlSmartCellRendererProps) => JSX.Element) | undefined;
-export declare const CreateRoomCell: ((props: MrlSmartCellRendererProps) => JSX.Element) | undefined;
-export declare const SeeOpenRoomsCell: ((props: MrlSmartCellRendererProps) => JSX.Element) | undefined;
-export declare const PublishTemplatesCell: ((props: MrlSmartCellRendererProps) => JSX.Element) | undefined;
-export declare const WorkspaceAdminCell: ((props: MrlSmartCellRendererProps) => JSX.Element) | undefined;
-export declare const ActionsCell: ((props: MrlSmartCellRendererProps) => JSX.Element) | undefined;
+import { MrlSmartTableColumn } from './MrlSmartTable';
+export declare const LicenseCell: MrlSmartTableColumn["renderCell"];
+export declare const MemberSinceCell: MrlSmartTableColumn["renderCell"];
+export declare const LastSeenCell: MrlSmartTableColumn["renderCell"];
+export declare const CreateRoomCell: MrlSmartTableColumn["renderCell"];
+export declare const SeeOpenRoomsCell: MrlSmartTableColumn["renderCell"];
+export declare const PublishTemplatesCell: MrlSmartTableColumn["renderCell"];
+export declare const WorkspaceAdminCell: MrlSmartTableColumn["renderCell"];
+export declare const ActionsCell: MrlSmartTableColumn["renderCell"];
 export declare const SAMPLE_COLUMNS_WITH_EDIT_ICON_BUTTON: MrlSmartTableColumn[];

package/dist/components/table/MrlTableEmptyState/MrlTableEmptyState.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MrlTableEmptyStateProps {
     /**
      * Text to be displayed in the empty state.

package/dist/components/table/utils.d.ts

@@ -19,7 +19,7 @@ export declare const sortAlphabeticallyAsCoercedStrings: (a: unknown, b: unknown
  * @param {string[]} keys a set of properties to uniquely identify the element
  * @returns {string} the generated key
  */
-export declare const keyFor: (prefix: string, elementType: 'header' | 'column' | 'body' | 'row' | 'row-cell', ...keys: string[]) => string;
+export declare const keyFor: (prefix: string, elementType: "header" | "column" | "body" | "row" | "row-cell", ...keys: string[]) => string;
 /**
  * Provides sort icon based on direction.
  *

package/dist/components/toolbar/MrlToolbarItem/MrlToolbarItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Props for the MrlToolbarItem component.
  */

package/dist/esm/components/form/select/components/MrlSelectContainer.js

@@ -1,17 +1,22 @@
 import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import { components } from 'react-select';
+import { useMenuEscapeContainment } from '../utils/useMenuEscapeContainment.js';
 
 /**
  * MrlSelectContainer component
  *
+ * Adds `data-qa` support and keeps the `Escape` press that dismisses an open menu
+ * from also closing an outer dismissible surface (e.g. a select inside MrlModal).
+ *
  * @param props - the react-select container props
  * @returns a select container
  */
 function MrlSelectContainer(props) {
   var dataQa = props.selectProps['data-qa'];
+  var escapeContainment = useMenuEscapeContainment(props.selectProps.menuIsOpen, props.innerProps.onKeyDown);
   return /*#__PURE__*/React.createElement(components.SelectContainer, _extends({}, props, {
-    innerProps: _objectSpread2(_objectSpread2({}, props.innerProps), dataQa && {
+    innerProps: _objectSpread2(_objectSpread2(_objectSpread2({}, props.innerProps), escapeContainment), dataQa && {
       'data-qa': "".concat(dataQa, "-container")
     })
   }));

package/dist/esm/components/form/select/components/MrlSelectContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlSelectContainer.js","sources":["../../../../../../src/components/form/select/components/MrlSelectContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { GroupBase, components, ContainerProps } from 'react-select';\n\n/**\n * MrlSelectContainer component\n *\n * @param props - the react-select container props\n * @returns a select container\n */\nexport function MrlSelectContainer<\n\tT,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<T> = GroupBase<T>\n>(props: ContainerProps<T, IsMulti, Group>): JSX.Element {\n\tconst dataQa = props.selectProps['data-qa'];\n\treturn (\n\t\t<components.SelectContainer\n\t\t\t{...props}\n\t\t\tinnerProps={{\n\t\t\t\t...props.innerProps,\n\t\t\t\t...(dataQa && { 'data-qa': `${dataQa}-container` })\n\t\t\t}}\n\t\t/>\n\t);\n}\n"],"names":["MrlSelectContainer","props","dataQa","selectProps","React","createElement","components","SelectContainer","_extends","innerProps","_objectSpread","concat"],"mappings":";;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAIhCC,KAAwC,EAAe;AACxD,EAAA,IAAMC,MAAM,GAAGD,KAAK,CAACE,WAAW,CAAC,SAAS,CAAC;EAC3C,oBACCC,KAAA,CAAAC,aAAA,CAACC,UAAU,CAACC,eAAe,EAAAC,QAAA,CAAA,EAAA,EACtBP,KAAK,EAAA;IACTQ,UAAU,EAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACNT,KAAK,CAACQ,UAAU,CAAA,EACfP,MAAM,IAAI;MAAE,SAAS,EAAA,EAAA,CAAAS,MAAA,CAAKT,MAAM,EAAA,YAAA;KAAc;AACjD,GAAA,CACF,CAAC;AAEJ;;;;"}
+{"version":3,"file":"MrlSelectContainer.js","sources":["../../../../../../src/components/form/select/components/MrlSelectContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { GroupBase, components, ContainerProps } from 'react-select';\nimport { useMenuEscapeContainment } from '../utils/useMenuEscapeContainment';\n\n/**\n * MrlSelectContainer component\n *\n * Adds `data-qa` support and keeps the `Escape` press that dismisses an open menu\n * from also closing an outer dismissible surface (e.g. a select inside MrlModal).\n *\n * @param props - the react-select container props\n * @returns a select container\n */\nexport function MrlSelectContainer<\n\tT,\n\tIsMulti extends boolean = false,\n\tGroup extends GroupBase<T> = GroupBase<T>\n>(props: ContainerProps<T, IsMulti, Group>): JSX.Element {\n\tconst dataQa = props.selectProps['data-qa'];\n\tconst escapeContainment = useMenuEscapeContainment(\n\t\tprops.selectProps.menuIsOpen,\n\t\tprops.innerProps.onKeyDown\n\t);\n\n\treturn (\n\t\t<components.SelectContainer\n\t\t\t{...props}\n\t\t\tinnerProps={{\n\t\t\t\t...props.innerProps,\n\t\t\t\t...escapeContainment,\n\t\t\t\t...(dataQa && { 'data-qa': `${dataQa}-container` })\n\t\t\t}}\n\t\t/>\n\t);\n}\n"],"names":["MrlSelectContainer","props","dataQa","selectProps","escapeContainment","useMenuEscapeContainment","menuIsOpen","innerProps","onKeyDown","React","createElement","components","SelectContainer","_extends","_objectSpread","concat"],"mappings":";;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAIhCC,KAAwC,EAAe;AACxD,EAAA,IAAMC,MAAM,GAAGD,KAAK,CAACE,WAAW,CAAC,SAAS,CAAC;AAC3C,EAAA,IAAMC,iBAAiB,GAAGC,wBAAwB,CACjDJ,KAAK,CAACE,WAAW,CAACG,UAAU,EAC5BL,KAAK,CAACM,UAAU,CAACC,SAClB,CAAC;EAED,oBACCC,KAAA,CAAAC,aAAA,CAACC,UAAU,CAACC,eAAe,EAAAC,QAAA,CAAA,EAAA,EACtBZ,KAAK,EAAA;AACTM,IAAAA,UAAU,EAAAO,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACNb,KAAK,CAACM,UAAU,CAAA,EAChBH,iBAAiB,CAAA,EAChBF,MAAM,IAAI;MAAE,SAAS,EAAA,EAAA,CAAAa,MAAA,CAAKb,MAAM,EAAA,YAAA;KAAc;AACjD,GAAA,CACF,CAAC;AAEJ;;;;"}

package/dist/esm/components/form/select/utils/useMenuEscapeContainment.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+/**
+ * Keeps the `Escape` press that dismisses an open select menu from reaching outer
+ * dismissible surfaces. MrlModal, MrlPanel and MrlPopover close on `Escape` keydown
+ * and MrlSidebar on keyup, so without containment a single press would close the
+ * menu and the surface behind it at the same time.
+ *
+ * While the menu is open, the `Escape` keydown and its paired keyup stop propagating
+ * after react-select handles them. Once the menu is closed, `Escape` bubbles as
+ * usual so the outer surface can respond to the next press.
+ *
+ * @param menuIsOpen - the resolved react-select menu state
+ * @param onKeyDown - react-select's container keydown handler to wrap
+ * @returns key event handlers to spread into the select container's `innerProps`
+ */
+function useMenuEscapeContainment(menuIsOpen, onKeyDown) {
+  var escapeDismissedTheMenu = React.useRef(false);
+  var handleKeyDown = event => {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    if (event.key !== 'Escape') return;
+    escapeDismissedTheMenu.current = menuIsOpen;
+    if (menuIsOpen) event.stopPropagation();
+  };
+  var handleKeyUp = event => {
+    if (event.key !== 'Escape') return;
+    if (escapeDismissedTheMenu.current) event.stopPropagation();
+    escapeDismissedTheMenu.current = false;
+  };
+  return {
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  };
+}
+
+export { useMenuEscapeContainment };
+//# sourceMappingURL=useMenuEscapeContainment.js.map

package/dist/esm/components/form/select/utils/useMenuEscapeContainment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuEscapeContainment.js","sources":["../../../../../../src/components/form/select/utils/useMenuEscapeContainment.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface MenuEscapeContainmentHandlers {\n\tonKeyDown: React.KeyboardEventHandler<HTMLDivElement>;\n\tonKeyUp: React.KeyboardEventHandler<HTMLDivElement>;\n}\n\n/**\n * Keeps the `Escape` press that dismisses an open select menu from reaching outer\n * dismissible surfaces. MrlModal, MrlPanel and MrlPopover close on `Escape` keydown\n * and MrlSidebar on keyup, so without containment a single press would close the\n * menu and the surface behind it at the same time.\n *\n * While the menu is open, the `Escape` keydown and its paired keyup stop propagating\n * after react-select handles them. Once the menu is closed, `Escape` bubbles as\n * usual so the outer surface can respond to the next press.\n *\n * @param menuIsOpen - the resolved react-select menu state\n * @param onKeyDown - react-select's container keydown handler to wrap\n * @returns key event handlers to spread into the select container's `innerProps`\n */\nexport function useMenuEscapeContainment(\n\tmenuIsOpen: boolean,\n\tonKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined\n): MenuEscapeContainmentHandlers {\n\tconst escapeDismissedTheMenu = React.useRef(false);\n\n\tconst handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n\t\tonKeyDown?.(event);\n\n\t\tif (event.key !== 'Escape') return;\n\n\t\tescapeDismissedTheMenu.current = menuIsOpen;\n\t\tif (menuIsOpen) event.stopPropagation();\n\t};\n\n\tconst handleKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n\t\tif (event.key !== 'Escape') return;\n\n\t\tif (escapeDismissedTheMenu.current) event.stopPropagation();\n\t\tescapeDismissedTheMenu.current = false;\n\t};\n\n\treturn { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp };\n}\n"],"names":["useMenuEscapeContainment","menuIsOpen","onKeyDown","escapeDismissedTheMenu","React","useRef","handleKeyDown","event","key","current","stopPropagation","handleKeyUp","onKeyUp"],"mappings":";;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,wBAAwBA,CACvCC,UAAmB,EACnBC,SAAiE,EACjC;AAChC,EAAA,IAAMC,sBAAsB,GAAGC,KAAK,CAACC,MAAM,CAAC,KAAK,CAAC;EAElD,IAAMC,aAAyD,GAAIC,KAAK,IAAK;AAC5EL,IAAAA,SAAS,aAATA,SAAS,KAAA,MAAA,GAAA,MAAA,GAATA,SAAS,CAAGK,KAAK,CAAC;AAElB,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;IAE5BL,sBAAsB,CAACM,OAAO,GAAGR,UAAU;AAC3C,IAAA,IAAIA,UAAU,EAAEM,KAAK,CAACG,eAAe,EAAE;EACxC,CAAC;EAED,IAAMC,WAAuD,GAAIJ,KAAK,IAAK;AAC1E,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;IAE5B,IAAIL,sBAAsB,CAACM,OAAO,EAAEF,KAAK,CAACG,eAAe,EAAE;IAC3DP,sBAAsB,CAACM,OAAO,GAAG,KAAK;EACvC,CAAC;EAED,OAAO;AAAEP,IAAAA,SAAS,EAAEI,aAAa;AAAEM,IAAAA,OAAO,EAAED;GAAa;AAC1D;;;;"}

package/dist/esm/components/notification/MrlBlockNotification/MrlBlockNotification.module.scss.js

@@ -1,4 +1,4 @@
-var styles = {"mrl-blockNotification":"mrl-blockNotification--xbhrd","mrl-blockNotification-icon":"mrl-blockNotification-icon--CAq04","mrl-blockNotification-close-wrapper":"mrl-blockNotification-close-wrapper--yODTH","cta":"cta--gnyoO","mrl-blockNotification--dismissible":"mrl-blockNotification--dismissible--ZlIID","mrl-blockNotification-message":"mrl-blockNotification-message--MdtXZ","mrl-blockNotification-heading":"mrl-blockNotification-heading--WGPWE"};
+var styles = {"mrl-blockNotification":"mrl-blockNotification--xbhrd","mrl-blockNotification-icon":"mrl-blockNotification-icon--CAq04","mrl-blockNotification-close-wrapper":"mrl-blockNotification-close-wrapper--yODTH","cta":"cta--gnyoO","mrl-blockNotification--dismissible":"mrl-blockNotification--dismissible--ZlIID","mrl-blockNotification-heading":"mrl-blockNotification-heading--WGPWE","mrl-blockNotification-message":"mrl-blockNotification-message--MdtXZ"};
 
 export { styles as default };
 //# sourceMappingURL=MrlBlockNotification.module.scss.js.map