@muraldevkit/ui-toolkit 4.70.2 → 4.70.3

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/components/form/select/components/MrlSelectContainer.d.ts

@@ -2,6 +2,9 @@ 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/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/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/types/components/form/select/components/MrlSelectContainer.d.ts

@@ -2,6 +2,9 @@ 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/types/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "4.70.2",
+	"version": "4.70.3",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/cjs/index.js",
 	"module": "./dist/esm/index.js",