@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.1-next.b8c8708f3.0

package/build/modal/aria-helper.js

@@ -1,26 +1,30 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var aria_helper_exports = {};
+__export(aria_helper_exports, {
+  elementShouldBeHidden: () => elementShouldBeHidden,
+  modalize: () => modalize,
+  unmodalize: () => unmodalize
 });
-exports.elementShouldBeHidden = elementShouldBeHidden;
-exports.modalize = modalize;
-exports.unmodalize = unmodalize;
-const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']);
+module.exports = __toCommonJS(aria_helper_exports);
+const LIVE_REGION_ARIA_ROLES = /* @__PURE__ */ new Set(["alert", "status", "log", "marquee", "timer"]);
 const hiddenElementsByDepth = [];
-
-/**
- * Hides all elements in the body element from screen-readers except
- * the provided element and elements that should not be hidden from
- * screen-readers.
- *
- * The reason we do this is because `aria-modal="true"` currently is bugged
- * in Safari, and support is spotty in other browsers overall. In the future
- * we should consider removing these helper functions in favor of
- * `aria-modal="true"`.
- *
- * @param modalElement The element that should not be hidden.
- */
 function modalize(modalElement) {
   const elements = Array.from(document.body.children);
   const hiddenElements = [];
@@ -30,34 +34,28 @@ function modalize(modalElement) {
       continue;
     }
     if (elementShouldBeHidden(element)) {
-      element.setAttribute('aria-hidden', 'true');
+      element.setAttribute("aria-hidden", "true");
       hiddenElements.push(element);
     }
   }
 }
-
-/**
- * Determines if the passed element should not be hidden from screen readers.
- *
- * @param element The element that should be checked.
- *
- * @return Whether the element should not be hidden from screen-readers.
- */
 function elementShouldBeHidden(element) {
-  const role = element.getAttribute('role');
-  return !(element.tagName === 'SCRIPT' || element.hasAttribute('hidden') || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role));
+  const role = element.getAttribute("role");
+  return !(element.tagName === "SCRIPT" || element.hasAttribute("hidden") || element.hasAttribute("aria-hidden") || element.hasAttribute("aria-live") || role && LIVE_REGION_ARIA_ROLES.has(role));
 }
-
-/**
- * Accessibly reveals the elements hidden by the latest modal.
- */
 function unmodalize() {
   const hiddenElements = hiddenElementsByDepth.pop();
   if (!hiddenElements) {
     return;
   }
   for (const element of hiddenElements) {
-    element.removeAttribute('aria-hidden');
+    element.removeAttribute("aria-hidden");
   }
 }
-//# sourceMappingURL=aria-helper.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  elementShouldBeHidden,
+  modalize,
+  unmodalize
+});
+//# sourceMappingURL=aria-helper.js.map

package/build/modal/aria-helper.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["LIVE_REGION_ARIA_ROLES","Set","hiddenElementsByDepth","modalize","modalElement","elements","Array","from","document","body","children","hiddenElements","push","element","elementShouldBeHidden","setAttribute","role","getAttribute","tagName","hasAttribute","has","unmodalize","pop","removeAttribute"],"sources":["@wordpress/components/src/modal/aria-helper.ts"],"sourcesContent":["const LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nconst hiddenElementsByDepth: Element[][] = [];\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param modalElement The element that should not be hidden.\n */\nexport function modalize( modalElement?: HTMLDivElement ) {\n\tconst elements = Array.from( document.body.children );\n\tconst hiddenElements: Element[] = [];\n\thiddenElementsByDepth.push( hiddenElements );\n\tfor ( const element of elements ) {\n\t\tif ( element === modalElement ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t}\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param element The element that should be checked.\n *\n * @return Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element: Element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'hidden' ) ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\t( role && LIVE_REGION_ARIA_ROLES.has( role ) )\n\t);\n}\n\n/**\n * Accessibly reveals the elements hidden by the latest modal.\n */\nexport function unmodalize() {\n\tconst hiddenElements = hiddenElementsByDepth.pop();\n\tif ( ! hiddenElements ) {\n\t\treturn;\n\t}\n\n\tfor ( const element of hiddenElements ) {\n\t\telement.removeAttribute( 'aria-hidden' );\n\t}\n}\n"],"mappings":";;;;;;;;AAAA,MAAMA,sBAAsB,GAAG,IAAIC,GAAG,CAAE,CACvC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,CACN,CAAC;AAEH,MAAMC,qBAAkC,GAAG,EAAE;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,QAAQA,CAAEC,YAA6B,EAAG;EACzD,MAAMC,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAAEC,QAAQ,CAACC,IAAI,CAACC,QAAS,CAAC;EACrD,MAAMC,cAAyB,GAAG,EAAE;EACpCT,qBAAqB,CAACU,IAAI,CAAED,cAAe,CAAC;EAC5C,KAAM,MAAME,OAAO,IAAIR,QAAQ,EAAG;IACjC,IAAKQ,OAAO,KAAKT,YAAY,EAAG;MAC/B;IACD;IAEA,IAAKU,qBAAqB,CAAED,OAAQ,CAAC,EAAG;MACvCA,OAAO,CAACE,YAAY,CAAE,aAAa,EAAE,MAAO,CAAC;MAC7CJ,cAAc,CAACC,IAAI,CAAEC,OAAQ,CAAC;IAC/B;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,qBAAqBA,CAAED,OAAgB,EAAG;EACzD,MAAMG,IAAI,GAAGH,OAAO,CAACI,YAAY,CAAE,MAAO,CAAC;EAC3C,OAAO,EACNJ,OAAO,CAACK,OAAO,KAAK,QAAQ,IAC5BL,OAAO,CAACM,YAAY,CAAE,QAAS,CAAC,IAChCN,OAAO,CAACM,YAAY,CAAE,aAAc,CAAC,IACrCN,OAAO,CAACM,YAAY,CAAE,WAAY,CAAC,IACjCH,IAAI,IAAIhB,sBAAsB,CAACoB,GAAG,CAAEJ,IAAK,CAAG,CAC9C;AACF;;AAEA;AACA;AACA;AACO,SAASK,UAAUA,CAAA,EAAG;EAC5B,MAAMV,cAAc,GAAGT,qBAAqB,CAACoB,GAAG,CAAC,CAAC;EAClD,IAAK,CAAEX,cAAc,EAAG;IACvB;EACD;EAEA,KAAM,MAAME,OAAO,IAAIF,cAAc,EAAG;IACvCE,OAAO,CAACU,eAAe,CAAE,aAAc,CAAC;EACzC;AACD","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/modal/aria-helper.ts"],
+  "sourcesContent": ["const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']);\nconst hiddenElementsByDepth = [];\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param modalElement The element that should not be hidden.\n */\nexport function modalize(modalElement) {\n  const elements = Array.from(document.body.children);\n  const hiddenElements = [];\n  hiddenElementsByDepth.push(hiddenElements);\n  for (const element of elements) {\n    if (element === modalElement) {\n      continue;\n    }\n    if (elementShouldBeHidden(element)) {\n      element.setAttribute('aria-hidden', 'true');\n      hiddenElements.push(element);\n    }\n  }\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param element The element that should be checked.\n *\n * @return Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden(element) {\n  const role = element.getAttribute('role');\n  return !(element.tagName === 'SCRIPT' || element.hasAttribute('hidden') || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role));\n}\n\n/**\n * Accessibly reveals the elements hidden by the latest modal.\n */\nexport function unmodalize() {\n  const hiddenElements = hiddenElementsByDepth.pop();\n  if (!hiddenElements) {\n    return;\n  }\n  for (const element of hiddenElements) {\n    element.removeAttribute('aria-hidden');\n  }\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAM,yBAAyB,oBAAI,IAAI,CAAC,SAAS,UAAU,OAAO,WAAW,OAAO,CAAC;AACrF,MAAM,wBAAwB,CAAC;AAcxB,SAAS,SAAS,cAAc;AACrC,QAAM,WAAW,MAAM,KAAK,SAAS,KAAK,QAAQ;AAClD,QAAM,iBAAiB,CAAC;AACxB,wBAAsB,KAAK,cAAc;AACzC,aAAW,WAAW,UAAU;AAC9B,QAAI,YAAY,cAAc;AAC5B;AAAA,IACF;AACA,QAAI,sBAAsB,OAAO,GAAG;AAClC,cAAQ,aAAa,eAAe,MAAM;AAC1C,qBAAe,KAAK,OAAO;AAAA,IAC7B;AAAA,EACF;AACF;AASO,SAAS,sBAAsB,SAAS;AAC7C,QAAM,OAAO,QAAQ,aAAa,MAAM;AACxC,SAAO,EAAE,QAAQ,YAAY,YAAY,QAAQ,aAAa,QAAQ,KAAK,QAAQ,aAAa,aAAa,KAAK,QAAQ,aAAa,WAAW,KAAK,QAAQ,uBAAuB,IAAI,IAAI;AAChM;AAKO,SAAS,aAAa;AAC3B,QAAM,iBAAiB,sBAAsB,IAAI;AACjD,MAAI,CAAC,gBAAgB;AACnB;AAAA,EACF;AACA,aAAW,WAAW,gBAAgB;AACpC,YAAQ,gBAAgB,aAAa;AAAA,EACvC;AACF;",
+  "names": []
+}

package/build/modal/index.js

@@ -1,48 +1,57 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var modal_exports = {};
+__export(modal_exports, {
+  Modal: () => Modal,
+  default: () => modal_default
 });
-exports.default = exports.Modal = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _element = require("@wordpress/element");
-var _compose = require("@wordpress/compose");
-var _i18n = require("@wordpress/i18n");
-var _icons = require("@wordpress/icons");
-var _dom = require("@wordpress/dom");
-var ariaHelper = _interopRequireWildcard(require("./aria-helper"));
-var _button = _interopRequireDefault(require("../button"));
-var _styleProvider = _interopRequireDefault(require("../style-provider"));
-var _withIgnoreImeEvents = require("../utils/with-ignore-ime-events");
-var _spacer = require("../spacer");
-var _useModalExitAnimation = require("./use-modal-exit-animation");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-// Used to track and dismiss the prior modal when another opens unless nested.
-
-const ModalContext = (0, _element.createContext)(new Set());
-ModalContext.displayName = 'ModalContext';
-
-// Used to track body class names applied while modals are open.
-const bodyOpenClasses = new Map();
+module.exports = __toCommonJS(modal_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_dom = require("@wordpress/dom");
+var ariaHelper = __toESM(require("./aria-helper"));
+var import_button = __toESM(require("../button"));
+var import_style_provider = __toESM(require("../style-provider"));
+var import_with_ignore_ime_events = require("../utils/with-ignore-ime-events");
+var import_spacer = require("../spacer");
+var import_use_modal_exit_animation = require("./use-modal-exit-animation");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ModalContext = (0, import_element.createContext)(/* @__PURE__ */ new Set());
+ModalContext.displayName = "ModalContext";
+const bodyOpenClasses = /* @__PURE__ */ new Map();
 function UnforwardedModal(props, forwardedRef) {
   const {
-    bodyOpenClassName = 'modal-open',
-    role = 'dialog',
+    bodyOpenClassName = "modal-open",
+    role = "dialog",
     title = null,
     focusOnMount = true,
     shouldCloseOnEsc = true,
@@ -50,8 +59,8 @@ function UnforwardedModal(props, forwardedRef) {
     isDismissible = true,
     /* Accessibility. */
     aria = {
-      labelledby: undefined,
-      describedby: undefined
+      labelledby: void 0,
+      describedby: void 0
     },
     onRequestClose,
     icon,
@@ -67,86 +76,58 @@ function UnforwardedModal(props, forwardedRef) {
     headerActions = null,
     __experimentalHideHeader = false
   } = props;
-  const ref = (0, _element.useRef)();
-  const instanceId = (0, _compose.useInstanceId)(Modal);
+  const ref = (0, import_element.useRef)();
+  const instanceId = (0, import_compose.useInstanceId)(Modal);
   const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;
-
-  // The focus hook does not support 'firstContentElement' but this is a valid
-  // value for the Modal's focusOnMount prop. The following code ensures the focus
-  // hook will focus the first focusable node within the element to which it is applied.
-  // When `firstContentElement` is passed as the value of the focusOnMount prop,
-  // the focus hook is applied to the Modal's content element.
-  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the
-  // focus hook will focus the first element in the Modal's **content** when
-  // `firstContentElement` is passed.
-  const focusOnMountRef = (0, _compose.useFocusOnMount)(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);
-  const constrainedTabbingRef = (0, _compose.useConstrainedTabbing)();
-  const focusReturnRef = (0, _compose.useFocusReturn)();
-  const contentRef = (0, _element.useRef)(null);
-  const childrenContainerRef = (0, _element.useRef)(null);
-  const [hasScrolledContent, setHasScrolledContent] = (0, _element.useState)(false);
-  const [hasScrollableContent, setHasScrollableContent] = (0, _element.useState)(false);
+  const focusOnMountRef = (0, import_compose.useFocusOnMount)(focusOnMount === "firstContentElement" ? "firstElement" : focusOnMount);
+  const constrainedTabbingRef = (0, import_compose.useConstrainedTabbing)();
+  const focusReturnRef = (0, import_compose.useFocusReturn)();
+  const contentRef = (0, import_element.useRef)(null);
+  const childrenContainerRef = (0, import_element.useRef)(null);
+  const [hasScrolledContent, setHasScrolledContent] = (0, import_element.useState)(false);
+  const [hasScrollableContent, setHasScrollableContent] = (0, import_element.useState)(false);
   let sizeClass;
-  if (isFullScreen || size === 'fill') {
-    sizeClass = 'is-full-screen';
+  if (isFullScreen || size === "fill") {
+    sizeClass = "is-full-screen";
   } else if (size) {
     sizeClass = `has-size-${size}`;
   }
-
-  // Determines whether the Modal content is scrollable and updates the state.
-  const isContentScrollable = (0, _element.useCallback)(() => {
+  const isContentScrollable = (0, import_element.useCallback)(() => {
     if (!contentRef.current) {
       return;
     }
-    const closestScrollContainer = (0, _dom.getScrollContainer)(contentRef.current);
+    const closestScrollContainer = (0, import_dom.getScrollContainer)(contentRef.current);
     if (contentRef.current === closestScrollContainer) {
       setHasScrollableContent(true);
     } else {
       setHasScrollableContent(false);
     }
   }, [contentRef]);
-
-  // Accessibly isolates/unisolates the modal.
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     ariaHelper.modalize(ref.current);
     return () => ariaHelper.unmodalize();
   }, []);
-
-  // Keeps a fresh ref for the subsequent effect.
-  const onRequestCloseRef = (0, _element.useRef)();
-  (0, _element.useEffect)(() => {
+  const onRequestCloseRef = (0, import_element.useRef)();
+  (0, import_element.useEffect)(() => {
     onRequestCloseRef.current = onRequestClose;
   }, [onRequestClose]);
-
-  // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only
-  // one should remain open at a time and the list enables closing prior ones.
-  const dismissers = (0, _element.useContext)(ModalContext);
-  // Used for the tracking and dismissing any nested modals.
-  const [nestedDismissers] = (0, _element.useState)(() => new Set());
-
-  // Updates the stack tracking open modals at this level and calls
-  // onRequestClose for any prior and/or nested modals as applicable.
-  (0, _element.useEffect)(() => {
-    // add this modal instance to the dismissers set
+  const dismissers = (0, import_element.useContext)(ModalContext);
+  const [nestedDismissers] = (0, import_element.useState)(() => /* @__PURE__ */ new Set());
+  (0, import_element.useEffect)(() => {
     dismissers.add(onRequestCloseRef);
-    // request that all the other modals close themselves
     for (const dismisser of dismissers) {
       if (dismisser !== onRequestCloseRef) {
         dismisser.current?.();
       }
     }
     return () => {
-      // request that all the nested modals close themselves
       for (const dismisser of nestedDismissers) {
         dismisser.current?.();
       }
-      // remove this modal instance from the dismissers set
       dismissers.delete(onRequestCloseRef);
     };
   }, [dismissers, nestedDismissers]);
-
-  // Adds/removes the value of bodyOpenClassName to body element.
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     var _bodyOpenClasses$get;
     const theClass = bodyOpenClassName;
     const oneMore = 1 + ((_bodyOpenClasses$get = bodyOpenClasses.get(theClass)) !== null && _bodyOpenClasses$get !== void 0 ? _bodyOpenClasses$get : 0);
@@ -167,10 +148,8 @@ function UnforwardedModal(props, forwardedRef) {
     frameRef,
     frameStyle,
     overlayClassname
-  } = (0, _useModalExitAnimation.useModalExitAnimation)();
-
-  // Calls the isContentScrollable callback when the Modal children container resizes.
-  (0, _element.useLayoutEffect)(() => {
+  } = (0, import_use_modal_exit_animation.useModalExitAnimation)();
+  (0, import_element.useLayoutEffect)(() => {
     if (!window.ResizeObserver || !childrenContainerRef.current) {
       return;
     }
@@ -182,12 +161,12 @@ function UnforwardedModal(props, forwardedRef) {
     };
   }, [isContentScrollable, childrenContainerRef]);
   function handleEscapeKeyDown(event) {
-    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {
+    if (shouldCloseOnEsc && (event.code === "Escape" || event.key === "Escape") && !event.defaultPrevented) {
       event.preventDefault();
       closeModal().then(() => onRequestClose(event));
     }
   }
-  const onContentContainerScroll = (0, _element.useCallback)(e => {
+  const onContentContainerScroll = (0, import_element.useCallback)((e) => {
     var _e$currentTarget$scro;
     const scrollY = (_e$currentTarget$scro = e?.currentTarget?.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1;
     if (!hasScrolledContent && scrollY > 0) {
@@ -198,10 +177,9 @@ function UnforwardedModal(props, forwardedRef) {
   }, [hasScrolledContent]);
   let pressTarget = null;
   const overlayPressHandlers = {
-    onPointerDown: event => {
+    onPointerDown: (event) => {
       if (event.target === event.currentTarget) {
         pressTarget = event.target;
-        // Avoids focus changing so that focus return works as expected.
         event.preventDefault();
       }
     },
@@ -222,109 +200,81 @@ function UnforwardedModal(props, forwardedRef) {
       }
     }
   };
-  const modal =
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-  (0, _jsxRuntime.jsx)("div", {
-    ref: (0, _compose.useMergeRefs)([ref, forwardedRef]),
-    className: (0, _clsx.default)('components-modal__screen-overlay', overlayClassname, overlayClassnameProp),
-    onKeyDown: (0, _withIgnoreImeEvents.withIgnoreIMEEvents)(handleEscapeKeyDown),
-    ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styleProvider.default, {
-      document: document,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _clsx.default)('components-modal__frame', sizeClass, className),
-        style: {
-          ...frameStyle,
-          ...style
-        },
-        ref: (0, _compose.useMergeRefs)([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
-        role: role,
-        "aria-label": contentLabel,
-        "aria-labelledby": contentLabel ? undefined : headingId,
-        "aria-describedby": aria.describedby,
-        tabIndex: -1,
-        onKeyDown: onKeyDown,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _clsx.default)('components-modal__content', {
-            'hide-header': __experimentalHideHeader,
-            'is-scrollable': hasScrollableContent,
-            'has-scrolled-content': hasScrolledContent
-          }),
-          role: "document",
-          onScroll: onContentContainerScroll,
-          ref: contentRef,
-          "aria-label": hasScrollableContent ? (0, _i18n.__)('Scrollable section') : undefined,
-          tabIndex: hasScrollableContent ? 0 : undefined,
-          children: [!__experimentalHideHeader && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "components-modal__header",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "components-modal__header-heading-container",
-              children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "components-modal__icon-container",
-                "aria-hidden": true,
-                children: icon
-              }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
-                id: headingId,
-                className: "components-modal__header-heading",
-                children: title
-              })]
-            }), headerActions, isDismissible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
-                marginBottom: 0,
-                marginLeft: 2
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-                size: "compact",
-                onClick: event => closeModal().then(() => onRequestClose(event)),
-                icon: _icons.close,
-                label: closeButtonLabel || (0, _i18n.__)('Close')
+  const modal = (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      ref: (0, import_compose.useMergeRefs)([ref, forwardedRef]),
+      className: (0, import_clsx.default)("components-modal__screen-overlay", overlayClassname, overlayClassnameProp),
+      onKeyDown: (0, import_with_ignore_ime_events.withIgnoreIMEEvents)(handleEscapeKeyDown),
+      ...shouldCloseOnClickOutside ? overlayPressHandlers : {},
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style_provider.default, {
+        document,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+          className: (0, import_clsx.default)("components-modal__frame", sizeClass, className),
+          style: {
+            ...frameStyle,
+            ...style
+          },
+          ref: (0, import_compose.useMergeRefs)([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== "firstContentElement" ? focusOnMountRef : null]),
+          role,
+          "aria-label": contentLabel,
+          "aria-labelledby": contentLabel ? void 0 : headingId,
+          "aria-describedby": aria.describedby,
+          tabIndex: -1,
+          onKeyDown,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+            className: (0, import_clsx.default)("components-modal__content", {
+              "hide-header": __experimentalHideHeader,
+              "is-scrollable": hasScrollableContent,
+              "has-scrolled-content": hasScrolledContent
+            }),
+            role: "document",
+            onScroll: onContentContainerScroll,
+            ref: contentRef,
+            "aria-label": hasScrollableContent ? (0, import_i18n.__)("Scrollable section") : void 0,
+            tabIndex: hasScrollableContent ? 0 : void 0,
+            children: [!__experimentalHideHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+              className: "components-modal__header",
+              children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                className: "components-modal__header-heading-container",
+                children: [icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                  className: "components-modal__icon-container",
+                  "aria-hidden": true,
+                  children: icon
+                }), title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+                  id: headingId,
+                  className: "components-modal__header-heading",
+                  children: title
+                })]
+              }), headerActions, isDismissible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+                children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spacer.Spacer, {
+                  marginBottom: 0,
+                  marginLeft: 2
+                }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
+                  size: "compact",
+                  onClick: (event) => closeModal().then(() => onRequestClose(event)),
+                  icon: import_icons.close,
+                  label: closeButtonLabel || (0, import_i18n.__)("Close")
+                })]
               })]
+            }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+              ref: (0, import_compose.useMergeRefs)([childrenContainerRef, focusOnMount === "firstContentElement" ? focusOnMountRef : null]),
+              children
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            ref: (0, _compose.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),
-            children: children
-          })]
+          })
         })
       })
     })
-  });
-  return (0, _element.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContext.Provider, {
+  );
+  return (0, import_element.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContext.Provider, {
     value: nestedDismissers,
     children: modal
   }), document.body);
 }
-
-/**
- * Modals give users information and choices related to a task they’re trying to
- * accomplish. They can contain critical information, require decisions, or
- * involve multiple tasks.
- *
- * ```jsx
- * import { Button, Modal } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyModal = () => {
- *   const [ isOpen, setOpen ] = useState( false );
- *   const openModal = () => setOpen( true );
- *   const closeModal = () => setOpen( false );
- *
- *   return (
- *     <>
- *       <Button variant="secondary" onClick={ openModal }>
- *         Open Modal
- *       </Button>
- *       { isOpen && (
- *         <Modal title="This is my modal" onRequestClose={ closeModal }>
- *           <Button variant="secondary" onClick={ closeModal }>
- *             My custom close button
- *           </Button>
- *         </Modal>
- *       ) }
- *     </>
- *   );
- * };
- * ```
- */
-const Modal = exports.Modal = (0, _element.forwardRef)(UnforwardedModal);
-var _default = exports.default = Modal;
-//# sourceMappingURL=index.js.map
+const Modal = (0, import_element.forwardRef)(UnforwardedModal);
+var modal_default = Modal;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modal
+});
+//# sourceMappingURL=index.js.map