@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.2

package/build/modal/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Modal = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
@@ -14,8 +15,8 @@ var _dom = require("@wordpress/dom");
 var ariaHelper = _interopRequireWildcard(require("./aria-helper"));
 var _button = _interopRequireDefault(require("../button"));
 var _styleProvider = _interopRequireDefault(require("../style-provider"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && Object.prototype.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
  */
@@ -28,8 +29,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Internal dependencies
  */
 
-// Used to count the number of open modals.
-let openModalCount = 0;
+// Used to track and dismiss the prior modal when another opens unless nested.
+const ModalContext = (0, _element.createContext)([]);
+
+// Used to track body class names applied while modals are open.
+const bodyOpenClasses = new Map();
 function UnforwardedModal(props, forwardedRef) {
   const {
     bodyOpenClassName = 'modal-open',
@@ -54,20 +58,35 @@ function UnforwardedModal(props, forwardedRef) {
     contentLabel,
     onKeyDown,
     isFullScreen = false,
+    size,
     headerActions = null,
     __experimentalHideHeader = false
   } = props;
   const ref = (0, _element.useRef)();
   const instanceId = (0, _compose.useInstanceId)(Modal);
   const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;
-  const focusOnMountRef = (0, _compose.useFocusOnMount)(focusOnMount);
+
+  // 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 focusOutsideProps = (0, _compose.__experimentalUseFocusOutside)(onRequestClose);
   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);
+  let sizeClass;
+  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)(() => {
@@ -81,17 +100,52 @@ function UnforwardedModal(props, forwardedRef) {
       setHasScrollableContent(false);
     }
   }, [contentRef]);
+
+  // Accessibly isolates/unisolates the modal.
   (0, _element.useEffect)(() => {
-    openModalCount++;
-    if (openModalCount === 1) {
-      ariaHelper.hideApp(ref.current);
-      document.body.classList.add(bodyOpenClassName);
-    }
+    ariaHelper.modalize(ref.current);
+    return () => ariaHelper.unmodalize();
+  }, []);
+
+  // Keeps a fresh ref for the subsequent effect.
+  const refOnRequestClose = (0, _element.useRef)();
+  (0, _element.useEffect)(() => {
+    refOnRequestClose.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.useRef)([]);
+
+  // Updates the stack tracking open modals at this level and calls
+  // onRequestClose for any prior and/or nested modals as applicable.
+  (0, _element.useEffect)(() => {
+    dismissers.push(refOnRequestClose);
+    const [first, second] = dismissers;
+    if (second) first?.current?.();
+    const nested = nestedDismissers.current;
+    return () => {
+      nested[0]?.current?.();
+      dismissers.shift();
+    };
+  }, [dismissers]);
+
+  // Adds/removes the value of bodyOpenClassName to body element.
+  (0, _element.useEffect)(() => {
+    var _bodyOpenClasses$get;
+    const theClass = bodyOpenClassName;
+    const oneMore = 1 + ((_bodyOpenClasses$get = bodyOpenClasses.get(theClass)) !== null && _bodyOpenClasses$get !== void 0 ? _bodyOpenClasses$get : 0);
+    bodyOpenClasses.set(theClass, oneMore);
+    document.body.classList.add(bodyOpenClassName);
     return () => {
-      openModalCount--;
-      if (openModalCount === 0) {
-        document.body.classList.remove(bodyOpenClassName);
-        ariaHelper.showApp();
+      const oneLess = bodyOpenClasses.get(theClass) - 1;
+      if (oneLess === 0) {
+        document.body.classList.remove(theClass);
+        bodyOpenClasses.delete(theClass);
+      } else {
+        bodyOpenClasses.set(theClass, oneLess);
       }
     };
   }, [bodyOpenClassName]);
@@ -118,7 +172,7 @@ function UnforwardedModal(props, forwardedRef) {
     event.keyCode === 229) {
       return;
     }
-    if (shouldCloseOnEsc && event.code === 'Escape' && !event.defaultPrevented) {
+    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {
       event.preventDefault();
       if (onRequestClose) {
         onRequestClose(event);
@@ -137,12 +191,9 @@ function UnforwardedModal(props, forwardedRef) {
   let pressTarget = null;
   const overlayPressHandlers = {
     onPointerDown: event => {
-      if (event.isPrimary && event.target === event.currentTarget) {
+      if (event.target === event.currentTarget) {
         pressTarget = event.target;
-        // Avoids loss of focus yet also leaves `useFocusOutside`
-        // practically useless with its only potential trigger being
-        // programmatic focus movement. TODO opt for either removing
-        // the hook or enhancing it such that this isn't needed.
+        // Avoids focus changing so that focus return works as expected.
         event.preventDefault();
       }
     },
@@ -161,29 +212,26 @@ function UnforwardedModal(props, forwardedRef) {
       if (button === 0 && isSameTarget) onRequestClose();
     }
   };
-  return (0, _element.createPortal)(
+  const modal =
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-  (0, _element.createElement)("div", {
+  (0, _react.createElement)("div", {
     ref: (0, _compose.useMergeRefs)([ref, forwardedRef]),
     className: (0, _classnames.default)('components-modal__screen-overlay', overlayClassName),
     onKeyDown: handleEscapeKeyDown,
     ...(shouldCloseOnClickOutside ? overlayPressHandlers : {})
-  }, (0, _element.createElement)(_styleProvider.default, {
+  }, (0, _react.createElement)(_styleProvider.default, {
     document: document
-  }, (0, _element.createElement)("div", {
-    className: (0, _classnames.default)('components-modal__frame', className, {
-      'is-full-screen': isFullScreen
-    }),
+  }, (0, _react.createElement)("div", {
+    className: (0, _classnames.default)('components-modal__frame', sizeClass, className),
     style: style,
-    ref: (0, _compose.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMountRef]),
+    ref: (0, _compose.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
     role: role,
     "aria-label": contentLabel,
     "aria-labelledby": contentLabel ? undefined : headingId,
     "aria-describedby": aria.describedby,
     tabIndex: -1,
-    ...(shouldCloseOnClickOutside ? focusOutsideProps : {}),
     onKeyDown: onKeyDown
-  }, (0, _element.createElement)("div", {
+  }, (0, _react.createElement)("div", {
     className: (0, _classnames.default)('components-modal__content', {
       'hide-header': __experimentalHideHeader,
       'is-scrollable': hasScrollableContent,
@@ -194,23 +242,26 @@ function UnforwardedModal(props, forwardedRef) {
     ref: contentRef,
     "aria-label": hasScrollableContent ? (0, _i18n.__)('Scrollable section') : undefined,
     tabIndex: hasScrollableContent ? 0 : undefined
-  }, !__experimentalHideHeader && (0, _element.createElement)("div", {
+  }, !__experimentalHideHeader && (0, _react.createElement)("div", {
     className: "components-modal__header"
-  }, (0, _element.createElement)("div", {
+  }, (0, _react.createElement)("div", {
     className: "components-modal__header-heading-container"
-  }, icon && (0, _element.createElement)("span", {
+  }, icon && (0, _react.createElement)("span", {
     className: "components-modal__icon-container",
     "aria-hidden": true
-  }, icon), title && (0, _element.createElement)("h1", {
+  }, icon), title && (0, _react.createElement)("h1", {
     id: headingId,
     className: "components-modal__header-heading"
-  }, title)), headerActions, isDismissible && (0, _element.createElement)(_button.default, {
+  }, title)), headerActions, isDismissible && (0, _react.createElement)(_button.default, {
     onClick: onRequestClose,
     icon: _icons.close,
     label: closeButtonLabel || (0, _i18n.__)('Close')
-  })), (0, _element.createElement)("div", {
-    ref: childrenContainerRef
-  }, children))))), document.body);
+  })), (0, _react.createElement)("div", {
+    ref: (0, _compose.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null])
+  }, children)))));
+  return (0, _element.createPortal)((0, _react.createElement)(ModalContext.Provider, {
+    value: nestedDismissers.current
+  }, modal), document.body);
 }
 
 /**
@@ -244,8 +295,6 @@ function UnforwardedModal(props, forwardedRef) {
  * };
  * ```
  */
-const Modal = (0, _element.forwardRef)(UnforwardedModal);
-exports.Modal = Modal;
-var _default = Modal;
-exports.default = _default;
+const Modal = exports.Modal = (0, _element.forwardRef)(UnforwardedModal);
+var _default = exports.default = Modal;
 //# sourceMappingURL=index.js.map

package/build/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_compose","_i18n","_icons","_dom","ariaHelper","_interopRequireWildcard","_button","_styleProvider","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","openModalCount","UnforwardedModal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","undefined","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","headerActions","__experimentalHideHeader","ref","useRef","instanceId","useInstanceId","Modal","headingId","focusOnMountRef","useFocusOnMount","constrainedTabbingRef","useConstrainedTabbing","focusReturnRef","useFocusReturn","focusOutsideProps","useFocusOutside","contentRef","childrenContainerRef","hasScrolledContent","setHasScrolledContent","useState","hasScrollableContent","setHasScrollableContent","isContentScrollable","useCallback","current","closestScrollContainer","getScrollContainer","useEffect","hideApp","document","body","classList","add","remove","showApp","useLayoutEffect","window","ResizeObserver","resizeObserver","observe","disconnect","handleEscapeKeyDown","event","nativeEvent","isComposing","keyCode","code","defaultPrevented","preventDefault","onContentContainerScroll","e","_e$currentTarget$scro","scrollY","currentTarget","scrollTop","pressTarget","overlayPressHandlers","onPointerDown","isPrimary","target","onPointerUp","button","isSameTarget","createPortal","createElement","useMergeRefs","classnames","tabIndex","onScroll","__","id","onClick","close","label","forwardRef","exports","_default"],"sources":["@wordpress/components/src/modal/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef, KeyboardEvent, UIEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n\tuseLayoutEffect,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport type { ModalProps } from './types';\n\n// Used to count the number of open modals.\nlet openModalCount = 0;\n\nfunction UnforwardedModal(\n\tprops: ModalProps,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: undefined,\n\t\t\tdescribedby: undefined,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\theaderActions = null,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef< HTMLDivElement >();\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\tconst focusOnMountRef = useFocusOnMount( focusOnMount );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( onRequestClose );\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst childrenContainerRef = useRef< HTMLDivElement >( null );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\tconst [ hasScrollableContent, setHasScrollableContent ] = useState( false );\n\n\t// Determines whether the Modal content is scrollable and updates the state.\n\tconst isContentScrollable = useCallback( () => {\n\t\tif ( ! contentRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestScrollContainer = getScrollContainer( contentRef.current );\n\n\t\tif ( contentRef.current === closestScrollContainer ) {\n\t\t\tsetHasScrollableContent( true );\n\t\t} else {\n\t\t\tsetHasScrollableContent( false );\n\t\t}\n\t}, [ contentRef ] );\n\n\tuseEffect( () => {\n\t\topenModalCount++;\n\n\t\tif ( openModalCount === 1 ) {\n\t\t\tariaHelper.hideApp( ref.current );\n\t\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\t}\n\n\t\treturn () => {\n\t\t\topenModalCount--;\n\n\t\t\tif ( openModalCount === 0 ) {\n\t\t\t\tdocument.body.classList.remove( bodyOpenClassName );\n\t\t\t\tariaHelper.showApp();\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\t// Calls the isContentScrollable callback when the Modal children container resizes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! window.ResizeObserver || ! childrenContainerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver( isContentScrollable );\n\t\tresizeObserver.observe( childrenContainerRef.current );\n\n\t\tisContentScrollable();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [ isContentScrollable, childrenContainerRef ] );\n\n\tfunction handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {\n\t\tif (\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\tevent.code === 'Escape' &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e: UIEvent< HTMLDivElement > ) => {\n\t\t\tconst scrollY = e?.currentTarget?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\tlet pressTarget: EventTarget | null = null;\n\tconst overlayPressHandlers: {\n\t\tonPointerDown: React.PointerEventHandler< HTMLDivElement >;\n\t\tonPointerUp: React.PointerEventHandler< HTMLDivElement >;\n\t} = {\n\t\tonPointerDown: ( event ) => {\n\t\t\tif ( event.isPrimary && event.target === event.currentTarget ) {\n\t\t\t\tpressTarget = event.target;\n\t\t\t\t// Avoids loss of focus yet also leaves `useFocusOutside`\n\t\t\t\t// practically useless with its only potential trigger being\n\t\t\t\t// programmatic focus movement. TODO opt for either removing\n\t\t\t\t// the hook or enhancing it such that this isn't needed.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t// Closes the modal with two exceptions. 1. Opening the context menu on\n\t\t// the overlay. 2. Pressing on the overlay then dragging the pointer\n\t\t// over the modal and releasing. Due to the modal being a child of the\n\t\t// overlay, such a gesture is a `click` on the overlay and cannot be\n\t\t// excepted by a `click` handler. Thus the tactic of handling\n\t\t// `pointerup` and comparing its target to that of the `pointerdown`.\n\t\tonPointerUp: ( { target, button } ) => {\n\t\t\tconst isSameTarget = target === pressTarget;\n\t\t\tpressTarget = null;\n\t\t\tif ( button === 0 && isSameTarget ) onRequestClose();\n\t\t},\n\t};\n\n\treturn createPortal(\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ handleEscapeKeyDown }\n\t\t\t{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-full-screen': isFullScreen,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? undefined : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t{ ...( shouldCloseOnClickOutside\n\t\t\t\t\t\t? focusOutsideProps\n\t\t\t\t\t\t: {} ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'is-scrollable': hasScrollableContent,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t\tref={ contentRef }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\thasScrollableContent\n\t\t\t\t\t\t\t\t? __( 'Scrollable section' )\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttabIndex={ hasScrollableContent ? 0 : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ headerActions }\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel || __( 'Close' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<div ref={ childrenContainerRef }>{ children }</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>,\n\t\tdocument.body\n\t);\n}\n\n/**\n * Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef( UnforwardedModal );\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_compose","_i18n","_icons","_dom","ariaHelper","_interopRequireWildcard","_button","_styleProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ModalContext","createContext","bodyOpenClasses","Map","UnforwardedModal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","undefined","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","size","headerActions","__experimentalHideHeader","ref","useRef","instanceId","useInstanceId","Modal","headingId","focusOnMountRef","useFocusOnMount","constrainedTabbingRef","useConstrainedTabbing","focusReturnRef","useFocusReturn","contentRef","childrenContainerRef","hasScrolledContent","setHasScrolledContent","useState","hasScrollableContent","setHasScrollableContent","sizeClass","isContentScrollable","useCallback","current","closestScrollContainer","getScrollContainer","useEffect","modalize","unmodalize","refOnRequestClose","dismissers","useContext","nestedDismissers","push","first","second","nested","shift","_bodyOpenClasses$get","theClass","oneMore","document","body","classList","add","oneLess","remove","delete","useLayoutEffect","window","ResizeObserver","resizeObserver","observe","disconnect","handleEscapeKeyDown","event","nativeEvent","isComposing","keyCode","code","key","defaultPrevented","preventDefault","onContentContainerScroll","_e$currentTarget$scro","scrollY","currentTarget","scrollTop","pressTarget","overlayPressHandlers","onPointerDown","target","onPointerUp","button","isSameTarget","modal","_react","createElement","useMergeRefs","classnames","tabIndex","onScroll","__","id","onClick","close","label","createPortal","Provider","value","exports","forwardRef","_default"],"sources":["@wordpress/components/src/modal/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type {\n\tForwardedRef,\n\tKeyboardEvent,\n\tMutableRefObject,\n\tUIEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n\tuseLayoutEffect,\n\tcreateContext,\n\tuseContext,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport type { ModalProps } from './types';\n\n// Used to track and dismiss the prior modal when another opens unless nested.\nconst ModalContext = createContext<\n\tMutableRefObject< ModalProps[ 'onRequestClose' ] | undefined >[]\n>( [] );\n\n// Used to track body class names applied while modals are open.\nconst bodyOpenClasses = new Map< string, number >();\n\nfunction UnforwardedModal(\n\tprops: ModalProps,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: undefined,\n\t\t\tdescribedby: undefined,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\tsize,\n\t\theaderActions = null,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef< HTMLDivElement >();\n\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\n\t// The focus hook does not support 'firstContentElement' but this is a valid\n\t// value for the Modal's focusOnMount prop. The following code ensures the focus\n\t// hook will focus the first focusable node within the element to which it is applied.\n\t// When `firstContentElement` is passed as the value of the focusOnMount prop,\n\t// the focus hook is applied to the Modal's content element.\n\t// Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n\t// focus hook will focus the first element in the Modal's **content** when\n\t// `firstContentElement` is passed.\n\tconst focusOnMountRef = useFocusOnMount(\n\t\tfocusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount\n\t);\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst childrenContainerRef = useRef< HTMLDivElement >( null );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\tconst [ hasScrollableContent, setHasScrollableContent ] = useState( false );\n\n\tlet sizeClass;\n\tif ( isFullScreen || size === 'fill' ) {\n\t\tsizeClass = 'is-full-screen';\n\t} else if ( size ) {\n\t\tsizeClass = `has-size-${ size }`;\n\t}\n\n\t// Determines whether the Modal content is scrollable and updates the state.\n\tconst isContentScrollable = useCallback( () => {\n\t\tif ( ! contentRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestScrollContainer = getScrollContainer( contentRef.current );\n\n\t\tif ( contentRef.current === closestScrollContainer ) {\n\t\t\tsetHasScrollableContent( true );\n\t\t} else {\n\t\t\tsetHasScrollableContent( false );\n\t\t}\n\t}, [ contentRef ] );\n\n\t// Accessibly isolates/unisolates the modal.\n\tuseEffect( () => {\n\t\tariaHelper.modalize( ref.current );\n\t\treturn () => ariaHelper.unmodalize();\n\t}, [] );\n\n\t// Keeps a fresh ref for the subsequent effect.\n\tconst refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();\n\tuseEffect( () => {\n\t\trefOnRequestClose.current = onRequestClose;\n\t}, [ onRequestClose ] );\n\n\t// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n\t// one should remain open at a time and the list enables closing prior ones.\n\tconst dismissers = useContext( ModalContext );\n\t// Used for the tracking and dismissing any nested modals.\n\tconst nestedDismissers = useRef< typeof dismissers >( [] );\n\n\t// Updates the stack tracking open modals at this level and calls\n\t// onRequestClose for any prior and/or nested modals as applicable.\n\tuseEffect( () => {\n\t\tdismissers.push( refOnRequestClose );\n\t\tconst [ first, second ] = dismissers;\n\t\tif ( second ) first?.current?.();\n\n\t\tconst nested = nestedDismissers.current;\n\t\treturn () => {\n\t\t\tnested[ 0 ]?.current?.();\n\t\t\tdismissers.shift();\n\t\t};\n\t}, [ dismissers ] );\n\n\t// Adds/removes the value of bodyOpenClassName to body element.\n\tuseEffect( () => {\n\t\tconst theClass = bodyOpenClassName;\n\t\tconst oneMore = 1 + ( bodyOpenClasses.get( theClass ) ?? 0 );\n\t\tbodyOpenClasses.set( theClass, oneMore );\n\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\treturn () => {\n\t\t\tconst oneLess = bodyOpenClasses.get( theClass )! - 1;\n\t\t\tif ( oneLess === 0 ) {\n\t\t\t\tdocument.body.classList.remove( theClass );\n\t\t\t\tbodyOpenClasses.delete( theClass );\n\t\t\t} else {\n\t\t\t\tbodyOpenClasses.set( theClass, oneLess );\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\t// Calls the isContentScrollable callback when the Modal children container resizes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! window.ResizeObserver || ! childrenContainerRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver( isContentScrollable );\n\t\tresizeObserver.observe( childrenContainerRef.current );\n\n\t\tisContentScrollable();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [ isContentScrollable, childrenContainerRef ] );\n\n\tfunction handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {\n\t\tif (\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.nativeEvent.isComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\t( event.code === 'Escape' || event.key === 'Escape' ) &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e: UIEvent< HTMLDivElement > ) => {\n\t\t\tconst scrollY = e?.currentTarget?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\tlet pressTarget: EventTarget | null = null;\n\tconst overlayPressHandlers: {\n\t\tonPointerDown: React.PointerEventHandler< HTMLDivElement >;\n\t\tonPointerUp: React.PointerEventHandler< HTMLDivElement >;\n\t} = {\n\t\tonPointerDown: ( event ) => {\n\t\t\tif ( event.target === event.currentTarget ) {\n\t\t\t\tpressTarget = event.target;\n\t\t\t\t// Avoids focus changing so that focus return works as expected.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t},\n\t\t// Closes the modal with two exceptions. 1. Opening the context menu on\n\t\t// the overlay. 2. Pressing on the overlay then dragging the pointer\n\t\t// over the modal and releasing. Due to the modal being a child of the\n\t\t// overlay, such a gesture is a `click` on the overlay and cannot be\n\t\t// excepted by a `click` handler. Thus the tactic of handling\n\t\t// `pointerup` and comparing its target to that of the `pointerdown`.\n\t\tonPointerUp: ( { target, button } ) => {\n\t\t\tconst isSameTarget = target === pressTarget;\n\t\t\tpressTarget = null;\n\t\t\tif ( button === 0 && isSameTarget ) onRequestClose();\n\t\t},\n\t};\n\n\tconst modal = (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ handleEscapeKeyDown }\n\t\t\t{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tsizeClass,\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMount !== 'firstContentElement'\n\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t: null,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? undefined : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'is-scrollable': hasScrollableContent,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t\tref={ contentRef }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\thasScrollableContent\n\t\t\t\t\t\t\t\t? __( 'Scrollable section' )\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttabIndex={ hasScrollableContent ? 0 : undefined }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ headerActions }\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel || __( 'Close' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\t\t\tchildrenContainerRef,\n\t\t\t\t\t\t\t\tfocusOnMount === 'firstContentElement'\n\t\t\t\t\t\t\t\t\t? focusOnMountRef\n\t\t\t\t\t\t\t\t\t: null,\n\t\t\t\t\t\t\t] ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>\n\t);\n\n\treturn createPortal(\n\t\t<ModalContext.Provider value={ nestedDismissers.current }>\n\t\t\t{ modal }\n\t\t</ModalContext.Provider>,\n\t\tdocument.body\n\t);\n}\n\n/**\n * Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef( UnforwardedModal );\n\nexport default Modal;\n"],"mappings":"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"}

package/build/modal/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/modal/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tAriaRole,\n\tCSSProperties,\n\tReactNode,\n\tKeyboardEventHandler,\n\tKeyboardEvent,\n\tSyntheticEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { useFocusOnMount } from '@wordpress/compose';\n\nexport type ModalProps = {\n\taria?: {\n\t\t/**\n\t\t * If this property is added, it will be added to the modal content\n\t\t * `div` as `aria-describedby`.\n\t\t */\n\t\tdescribedby?: string;\n\t\t/**\n\t\t * If this property is added, it will be added to the modal content\n\t\t * `div` as `aria-labelledby`. Use this when you are rendering the title\n\t\t * yourself within the modal's content area instead of using the `title`\n\t\t * prop. This ensures the title is usable by assistive technology.\n\t\t *\n\t\t * Titles are required for accessibility reasons, see `contentLabel` and\n\t\t * `title` for other ways to provide a title.\n\t\t */\n\t\tlabelledby?: string;\n\t};\n\t/**\n\t * Class name added to the body element when the modal is open.\n\t *\n\t * @default 'modal-open'\n\t */\n\tbodyOpenClassName?: string;\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * If this property is added, it will an additional class name to the modal\n\t * content `div`.\n\t */\n\tclassName?: string;\n\t/**\n\t * Label on the close button.\n\t *\n\t * @default `__( 'Close' )`\n\t */\n\tcloseButtonLabel?: string;\n\t/**\n\t * If this property is added, it will be added to the modal content `div` as\n\t * `aria-label`.\n\t *\n\t * Titles are required for accessibility reasons, see `aria.labelledby` and\n\t * `title` for other ways to provide a title.\n\t */\n\tcontentLabel?: string;\n\t/**\n\t * If this property is true, it will focus the first tabbable element\n\t * rendered in the modal.\n\t *\n\t * @default true\n\t */\n\tfocusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];\n\t/**\n\t * Elements that are injected into the modal header to the left of the close button (if rendered).\n\t * Hidden if `__experimentalHideHeader` is `true`.\n\t *\n\t * @default null\n\t */\n\theaderActions?: ReactNode;\n\n\t/**\n\t * If this property is added, an icon will be added before the title.\n\t */\n\ticon?: JSX.Element;\n\t/**\n\t * If this property is set to false, the modal will not display a close icon\n\t * and cannot be dismissed.\n\t *\n\t * @default true\n\t */\n\tisDismissible?: boolean;\n\t/**\n\t * This property when set to `true` will render a full screen modal.\n\t *\n\t * @default false\n\t */\n\tisFullScreen?: boolean;\n\t/**\n\t *  Handle the key down on the modal frame `div`.\n\t */\n\tonKeyDown?: KeyboardEventHandler< HTMLDivElement >;\n\t/**\n\t * This function is called to indicate that the modal should be closed.\n\t */\n\tonRequestClose: (\n\t\tevent?: KeyboardEvent< HTMLDivElement > | SyntheticEvent\n\t) => void;\n\t/**\n\t * If this property is added, it will an additional class name to the modal\n\t * overlay `div`.\n\t */\n\toverlayClassName?: string;\n\t/**\n\t * If this property is added, it will override the default role of the\n\t * modal.\n\t *\n\t * @default 'dialog'\n\t */\n\trole?: AriaRole;\n\t/**\n\t * If this property is added, it will determine whether the modal requests\n\t * to close when a mouse click occurs outside of the modal content.\n\t *\n\t * @default true\n\t */\n\tshouldCloseOnClickOutside?: boolean;\n\t/**\n\t * If this property is added, it will determine whether the modal requests\n\t * to close when the escape key is pressed.\n\t *\n\t * @default true\n\t */\n\tshouldCloseOnEsc?: boolean;\n\t/**\n\t * If this property is added, it will be added to the modal frame `div`.\n\t */\n\tstyle?: CSSProperties;\n\t/**\n\t * This property is used as the modal header's title.\n\t *\n\t * Titles are required for accessibility reasons, see `aria.labelledby` and\n\t * `contentLabel` for other ways to provide a title.\n\t */\n\ttitle?: string;\n\t/**\n\t * When set to `true`, the Modal's header (including the icon, title and\n\t * close button) will not be rendered.\n\t *\n\t * _Warning_: This property is still experimental. “Experimental” means this\n\t * is an early implementation subject to drastic and breaking changes.\n\t *\n\t * @default false\n\t */\n\t__experimentalHideHeader?: boolean;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/modal/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tAriaRole,\n\tCSSProperties,\n\tReactNode,\n\tKeyboardEventHandler,\n\tKeyboardEvent,\n\tSyntheticEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { useFocusOnMount } from '@wordpress/compose';\n\nexport type ModalProps = {\n\taria?: {\n\t\t/**\n\t\t * If this property is added, it will be added to the modal content\n\t\t * `div` as `aria-describedby`.\n\t\t */\n\t\tdescribedby?: string;\n\t\t/**\n\t\t * If this property is added, it will be added to the modal content\n\t\t * `div` as `aria-labelledby`. Use this when you are rendering the title\n\t\t * yourself within the modal's content area instead of using the `title`\n\t\t * prop. This ensures the title is usable by assistive technology.\n\t\t *\n\t\t * Titles are required for accessibility reasons, see `contentLabel` and\n\t\t * `title` for other ways to provide a title.\n\t\t */\n\t\tlabelledby?: string;\n\t};\n\t/**\n\t * Class name added to the body element when the modal is open.\n\t *\n\t * @default 'modal-open'\n\t */\n\tbodyOpenClassName?: string;\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * If this property is added, it will an additional class name to the modal\n\t * content `div`.\n\t */\n\tclassName?: string;\n\t/**\n\t * Label on the close button.\n\t *\n\t * @default `__( 'Close' )`\n\t */\n\tcloseButtonLabel?: string;\n\t/**\n\t * If this property is added, it will be added to the modal content `div` as\n\t * `aria-label`.\n\t *\n\t * Titles are required for accessibility reasons, see `aria.labelledby` and\n\t * `title` for other ways to provide a title.\n\t */\n\tcontentLabel?: string;\n\t/**\n\t * If this property is true, it will focus the first tabbable element\n\t * rendered in the modal.\n\t *\n\t * @default true\n\t */\n\tfocusOnMount?:\n\t\t| Parameters< typeof useFocusOnMount >[ 0 ]\n\t\t| 'firstContentElement';\n\t/**\n\t * Elements that are injected into the modal header to the left of the close button (if rendered).\n\t * Hidden if `__experimentalHideHeader` is `true`.\n\t *\n\t * @default null\n\t */\n\theaderActions?: ReactNode;\n\n\t/**\n\t * If this property is added, an icon will be added before the title.\n\t */\n\ticon?: JSX.Element;\n\t/**\n\t * If this property is set to false, the modal will not display a close icon\n\t * and cannot be dismissed.\n\t *\n\t * @default true\n\t */\n\tisDismissible?: boolean;\n\t/**\n\t * This property when set to `true` will render a full screen modal.\n\t *\n\t * @default false\n\t */\n\tisFullScreen?: boolean;\n\t/**\n\t * If this property is added it will cause the modal to render at a preset\n\t * width, or expand to fill the screen. This prop will be ignored if\n\t * `isFullScreen` is set to `true`.\n\t *\n\t * Note: `Modal`'s width can also be controlled by adjusting the width of the\n\t * modal's contents, or via CSS using the `style` prop.\n\t */\n\tsize?: 'small' | 'medium' | 'large' | 'fill';\n\t/**\n\t *  Handle the key down on the modal frame `div`.\n\t */\n\tonKeyDown?: KeyboardEventHandler< HTMLDivElement >;\n\t/**\n\t * This function is called to indicate that the modal should be closed.\n\t */\n\tonRequestClose: (\n\t\tevent?: KeyboardEvent< HTMLDivElement > | SyntheticEvent\n\t) => void;\n\t/**\n\t * If this property is added, it will an additional class name to the modal\n\t * overlay `div`.\n\t */\n\toverlayClassName?: string;\n\t/**\n\t * If this property is added, it will override the default role of the\n\t * modal.\n\t *\n\t * @default 'dialog'\n\t */\n\trole?: AriaRole;\n\t/**\n\t * If this property is added, it will determine whether the modal requests\n\t * to close when a mouse click occurs outside of the modal content.\n\t *\n\t * @default true\n\t */\n\tshouldCloseOnClickOutside?: boolean;\n\t/**\n\t * If this property is added, it will determine whether the modal requests\n\t * to close when the escape key is pressed.\n\t *\n\t * @default true\n\t */\n\tshouldCloseOnEsc?: boolean;\n\t/**\n\t * If this property is added, it will be added to the modal frame `div`.\n\t */\n\tstyle?: CSSProperties;\n\t/**\n\t * This property is used as the modal header's title.\n\t *\n\t * Titles are required for accessibility reasons, see `aria.labelledby` and\n\t * `contentLabel` for other ways to provide a title.\n\t */\n\ttitle?: string;\n\t/**\n\t * When set to `true`, the Modal's header (including the icon, title and\n\t * close button) will not be rendered.\n\t *\n\t * _Warning_: This property is still experimental. “Experimental” means this\n\t * is an early implementation subject to drastic and breaking changes.\n\t *\n\t * @default false\n\t */\n\t__experimentalHideHeader?: boolean;\n};\n"],"mappings":""}

package/build/navigable-container/container.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _dom = require("@wordpress/dom");
 /**
@@ -153,19 +154,18 @@ class NavigableContainer extends _element.Component {
       forwardedRef,
       ...restProps
     } = this.props;
-    return (0, _element.createElement)("div", {
+    return (0, _react.createElement)("div", {
       ref: this.bindContainer,
       ...restProps
     }, children);
   }
 }
 const forwardedNavigableContainer = (props, ref) => {
-  return (0, _element.createElement)(NavigableContainer, {
+  return (0, _react.createElement)(NavigableContainer, {
     ...props,
     forwardedRef: ref
   });
 };
 forwardedNavigableContainer.displayName = 'NavigableContainer';
-var _default = (0, _element.forwardRef)(forwardedNavigableContainer);
-exports.default = _default;
+var _default = exports.default = (0, _element.forwardRef)(forwardedNavigableContainer);
 //# sourceMappingURL=container.js.map

package/build/navigable-container/container.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_dom","noop","MENU_ITEM_ROLES","cycleValue","value","total","offset","nextValue","NavigableContainer","Component","constructor","args","onKeyDown","bind","bindContainer","getFocusableContext","getFocusableIndex","componentDidMount","container","addEventListener","componentWillUnmount","removeEventListener","ref","forwardedRef","props","current","target","onlyBrowserTabstops","finder","focus","tabbable","focusable","focusables","find","index","indexOf","event","cycle","eventToOffset","onNavigate","stopNavigationEvents","undefined","stopImmediatePropagation","targetRole","getAttribute","targetHasMenuItemRole","includes","preventDefault","activeElement","ownerDocument","context","nextIndex","length","code","render","children","restProps","createElement","forwardedNavigableContainer","displayName","_default","forwardRef","exports","default"],"sources":["@wordpress/components/src/navigable-container/container.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Component, forwardRef } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport type { NavigableContainerProps } from './types';\n\nconst noop = () => {};\nconst MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];\n\nfunction cycleValue( value: number, total: number, offset: number ) {\n\tconst nextValue = value + offset;\n\tif ( nextValue < 0 ) {\n\t\treturn total + nextValue;\n\t} else if ( nextValue >= total ) {\n\t\treturn nextValue - total;\n\t}\n\n\treturn nextValue;\n}\n\nclass NavigableContainer extends Component< NavigableContainerProps > {\n\tcontainer?: HTMLDivElement;\n\n\tconstructor( args: NavigableContainerProps ) {\n\t\tsuper( args );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.bindContainer = this.bindContainer.bind( this );\n\n\t\tthis.getFocusableContext = this.getFocusableContext.bind( this );\n\t\tthis.getFocusableIndex = this.getFocusableIndex.bind( this );\n\t}\n\n\tcomponentDidMount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We use DOM event listeners instead of React event listeners\n\t\t// because we want to catch events from the underlying DOM tree\n\t\t// The React Tree can be different from the DOM tree when using\n\t\t// portals. Block Toolbars for instance are rendered in a separate\n\t\t// React Trees.\n\t\tthis.container.addEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.container.removeEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tbindContainer( ref: HTMLDivElement ) {\n\t\tconst { forwardedRef } = this.props;\n\t\tthis.container = ref;\n\n\t\tif ( typeof forwardedRef === 'function' ) {\n\t\t\tforwardedRef( ref );\n\t\t} else if ( forwardedRef && 'current' in forwardedRef ) {\n\t\t\tforwardedRef.current = ref;\n\t\t}\n\t}\n\n\tgetFocusableContext( target: Element ) {\n\t\tif ( ! this.container ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst { onlyBrowserTabstops } = this.props;\n\t\tconst finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;\n\t\tconst focusables = finder.find( this.container ) as HTMLElement[];\n\n\t\tconst index = this.getFocusableIndex( focusables, target );\n\t\tif ( index > -1 && target ) {\n\t\t\treturn { index, target, focusables };\n\t\t}\n\t\treturn null;\n\t}\n\n\tgetFocusableIndex( focusables: Element[], target: Element ) {\n\t\treturn focusables.indexOf( target );\n\t}\n\n\tonKeyDown( event: KeyboardEvent ) {\n\t\tif ( this.props.onKeyDown ) {\n\t\t\tthis.props.onKeyDown( event );\n\t\t}\n\n\t\tconst { getFocusableContext } = this;\n\t\tconst {\n\t\t\tcycle = true,\n\t\t\teventToOffset,\n\t\t\tonNavigate = noop,\n\t\t\tstopNavigationEvents,\n\t\t} = this.props;\n\n\t\tconst offset = eventToOffset( event );\n\n\t\t// eventToOffset returns undefined if the event is not handled by the component.\n\t\tif ( offset !== undefined && stopNavigationEvents ) {\n\t\t\t// Prevents arrow key handlers bound to the document directly interfering.\n\t\t\tevent.stopImmediatePropagation();\n\n\t\t\t// When navigating a collection of items, prevent scroll containers\n\t\t\t// from scrolling. The preventDefault also prevents Voiceover from\n\t\t\t// 'handling' the event, as voiceover will try to use arrow keys\n\t\t\t// for highlighting text.\n\t\t\tconst targetRole = (\n\t\t\t\tevent.target as HTMLDivElement | null\n\t\t\t )?.getAttribute( 'role' );\n\t\t\tconst targetHasMenuItemRole =\n\t\t\t\t!! targetRole && MENU_ITEM_ROLES.includes( targetRole );\n\n\t\t\tif ( targetHasMenuItemRole ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tif ( ! offset ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = ( event.target as HTMLElement | null )\n\t\t\t?.ownerDocument?.activeElement;\n\t\tif ( ! activeElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst context = getFocusableContext( activeElement );\n\t\tif ( ! context ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { index, focusables } = context;\n\t\tconst nextIndex = cycle\n\t\t\t? cycleValue( index, focusables.length, offset )\n\t\t\t: index + offset;\n\n\t\tif ( nextIndex >= 0 && nextIndex < focusables.length ) {\n\t\t\tfocusables[ nextIndex ].focus();\n\t\t\tonNavigate( nextIndex, focusables[ nextIndex ] );\n\n\t\t\t// `preventDefault()` on tab to avoid having the browser move the focus\n\t\t\t// after this component has already moved it.\n\t\t\tif ( event.code === 'Tab' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tchildren,\n\t\t\tstopNavigationEvents,\n\t\t\teventToOffset,\n\t\t\tonNavigate,\n\t\t\tonKeyDown,\n\t\t\tcycle,\n\t\t\tonlyBrowserTabstops,\n\t\t\tforwardedRef,\n\t\t\t...restProps\n\t\t} = this.props;\n\t\treturn (\n\t\t\t<div ref={ this.bindContainer } { ...restProps }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nconst forwardedNavigableContainer = (\n\tprops: NavigableContainerProps,\n\tref: ForwardedRef< HTMLDivElement >\n) => {\n\treturn <NavigableContainer { ...props } forwardedRef={ ref } />;\n};\nforwardedNavigableContainer.displayName = 'NavigableContainer';\n\nexport default forwardRef( forwardedNavigableContainer );\n"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AASA,MAAME,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AACrB,MAAMC,eAAe,GAAG,CAAE,UAAU,EAAE,eAAe,EAAE,kBAAkB,CAAE;AAE3E,SAASC,UAAUA,CAAEC,KAAa,EAAEC,KAAa,EAAEC,MAAc,EAAG;EACnE,MAAMC,SAAS,GAAGH,KAAK,GAAGE,MAAM;EAChC,IAAKC,SAAS,GAAG,CAAC,EAAG;IACpB,OAAOF,KAAK,GAAGE,SAAS;EACzB,CAAC,MAAM,IAAKA,SAAS,IAAIF,KAAK,EAAG;IAChC,OAAOE,SAAS,GAAGF,KAAK;EACzB;EAEA,OAAOE,SAAS;AACjB;AAEA,MAAMC,kBAAkB,SAASC,kBAAS,CAA4B;EAGrEC,WAAWA,CAAEC,IAA6B,EAAG;IAC5C,KAAK,CAAEA,IAAK,CAAC;IACb,IAAI,CAACC,SAAS,GAAG,IAAI,CAACA,SAAS,CAACC,IAAI,CAAE,IAAK,CAAC;IAC5C,IAAI,CAACC,aAAa,GAAG,IAAI,CAACA,aAAa,CAACD,IAAI,CAAE,IAAK,CAAC;IAEpD,IAAI,CAACE,mBAAmB,GAAG,IAAI,CAACA,mBAAmB,CAACF,IAAI,CAAE,IAAK,CAAC;IAChE,IAAI,CAACG,iBAAiB,GAAG,IAAI,CAACA,iBAAiB,CAACH,IAAI,CAAE,IAAK,CAAC;EAC7D;EAEAI,iBAAiBA,CAAA,EAAG;IACnB,IAAK,CAAE,IAAI,CAACC,SAAS,EAAG;MACvB;IACD;;IAEA;IACA;IACA;IACA;IACA;IACA,IAAI,CAACA,SAAS,CAACC,gBAAgB,CAAE,SAAS,EAAE,IAAI,CAACP,SAAU,CAAC;EAC7D;EAEAQ,oBAAoBA,CAAA,EAAG;IACtB,IAAK,CAAE,IAAI,CAACF,SAAS,EAAG;MACvB;IACD;IAEA,IAAI,CAACA,SAAS,CAACG,mBAAmB,CAAE,SAAS,EAAE,IAAI,CAACT,SAAU,CAAC;EAChE;EAEAE,aAAaA,CAAEQ,GAAmB,EAAG;IACpC,MAAM;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACC,KAAK;IACnC,IAAI,CAACN,SAAS,GAAGI,GAAG;IAEpB,IAAK,OAAOC,YAAY,KAAK,UAAU,EAAG;MACzCA,YAAY,CAAED,GAAI,CAAC;IACpB,CAAC,MAAM,IAAKC,YAAY,IAAI,SAAS,IAAIA,YAAY,EAAG;MACvDA,YAAY,CAACE,OAAO,GAAGH,GAAG;IAC3B;EACD;EAEAP,mBAAmBA,CAAEW,MAAe,EAAG;IACtC,IAAK,CAAE,IAAI,CAACR,SAAS,EAAG;MACvB,OAAO,IAAI;IACZ;IAEA,MAAM;MAAES;IAAoB,CAAC,GAAG,IAAI,CAACH,KAAK;IAC1C,MAAMI,MAAM,GAAGD,mBAAmB,GAAGE,UAAK,CAACC,QAAQ,GAAGD,UAAK,CAACE,SAAS;IACrE,MAAMC,UAAU,GAAGJ,MAAM,CAACK,IAAI,CAAE,IAAI,CAACf,SAAU,CAAkB;IAEjE,MAAMgB,KAAK,GAAG,IAAI,CAAClB,iBAAiB,CAAEgB,UAAU,EAAEN,MAAO,CAAC;IAC1D,IAAKQ,KAAK,GAAG,CAAC,CAAC,IAAIR,MAAM,EAAG;MAC3B,OAAO;QAAEQ,KAAK;QAAER,MAAM;QAAEM;MAAW,CAAC;IACrC;IACA,OAAO,IAAI;EACZ;EAEAhB,iBAAiBA,CAAEgB,UAAqB,EAAEN,MAAe,EAAG;IAC3D,OAAOM,UAAU,CAACG,OAAO,CAAET,MAAO,CAAC;EACpC;EAEAd,SAASA,CAAEwB,KAAoB,EAAG;IACjC,IAAK,IAAI,CAACZ,KAAK,CAACZ,SAAS,EAAG;MAC3B,IAAI,CAACY,KAAK,CAACZ,SAAS,CAAEwB,KAAM,CAAC;IAC9B;IAEA,MAAM;MAAErB;IAAoB,CAAC,GAAG,IAAI;IACpC,MAAM;MACLsB,KAAK,GAAG,IAAI;MACZC,aAAa;MACbC,UAAU,GAAGtC,IAAI;MACjBuC;IACD,CAAC,GAAG,IAAI,CAAChB,KAAK;IAEd,MAAMlB,MAAM,GAAGgC,aAAa,CAAEF,KAAM,CAAC;;IAErC;IACA,IAAK9B,MAAM,KAAKmC,SAAS,IAAID,oBAAoB,EAAG;MACnD;MACAJ,KAAK,CAACM,wBAAwB,CAAC,CAAC;;MAEhC;MACA;MACA;MACA;MACA,MAAMC,UAAU,GACfP,KAAK,CAACV,MAAM,EACTkB,YAAY,CAAE,MAAO,CAAC;MAC1B,MAAMC,qBAAqB,GAC1B,CAAC,CAAEF,UAAU,IAAIzC,eAAe,CAAC4C,QAAQ,CAAEH,UAAW,CAAC;MAExD,IAAKE,qBAAqB,EAAG;QAC5BT,KAAK,CAACW,cAAc,CAAC,CAAC;MACvB;IACD;IAEA,IAAK,CAAEzC,MAAM,EAAG;MACf;IACD;IAEA,MAAM0C,aAAa,GAAKZ,KAAK,CAACV,MAAM,EACjCuB,aAAa,EAAED,aAAa;IAC/B,IAAK,CAAEA,aAAa,EAAG;MACtB;IACD;IAEA,MAAME,OAAO,GAAGnC,mBAAmB,CAAEiC,aAAc,CAAC;IACpD,IAAK,CAAEE,OAAO,EAAG;MAChB;IACD;IAEA,MAAM;MAAEhB,KAAK;MAAEF;IAAW,CAAC,GAAGkB,OAAO;IACrC,MAAMC,SAAS,GAAGd,KAAK,GACpBlC,UAAU,CAAE+B,KAAK,EAAEF,UAAU,CAACoB,MAAM,EAAE9C,MAAO,CAAC,GAC9C4B,KAAK,GAAG5B,MAAM;IAEjB,IAAK6C,SAAS,IAAI,CAAC,IAAIA,SAAS,GAAGnB,UAAU,CAACoB,MAAM,EAAG;MACtDpB,UAAU,CAAEmB,SAAS,CAAE,CAACtB,KAAK,CAAC,CAAC;MAC/BU,UAAU,CAAEY,SAAS,EAAEnB,UAAU,CAAEmB,SAAS,CAAG,CAAC;;MAEhD;MACA;MACA,IAAKf,KAAK,CAACiB,IAAI,KAAK,KAAK,EAAG;QAC3BjB,KAAK,CAACW,cAAc,CAAC,CAAC;MACvB;IACD;EACD;EAEAO,MAAMA,CAAA,EAAG;IACR,MAAM;MACLC,QAAQ;MACRf,oBAAoB;MACpBF,aAAa;MACbC,UAAU;MACV3B,SAAS;MACTyB,KAAK;MACLV,mBAAmB;MACnBJ,YAAY;MACZ,GAAGiC;IACJ,CAAC,GAAG,IAAI,CAAChC,KAAK;IACd,OACC,IAAA1B,QAAA,CAAA2D,aAAA;MAAKnC,GAAG,EAAG,IAAI,CAACR,aAAe;MAAA,GAAM0C;IAAS,GAC3CD,QACE,CAAC;EAER;AACD;AAEA,MAAMG,2BAA2B,GAAGA,CACnClC,KAA8B,EAC9BF,GAAmC,KAC/B;EACJ,OAAO,IAAAxB,QAAA,CAAA2D,aAAA,EAACjD,kBAAkB;IAAA,GAAMgB,KAAK;IAAGD,YAAY,EAAGD;EAAK,CAAE,CAAC;AAChE,CAAC;AACDoC,2BAA2B,CAACC,WAAW,GAAG,oBAAoB;AAAC,IAAAC,QAAA,GAEhD,IAAAC,mBAAU,EAAEH,2BAA4B,CAAC;AAAAI,OAAA,CAAAC,OAAA,GAAAH,QAAA"}
+{"version":3,"names":["_element","require","_dom","noop","MENU_ITEM_ROLES","cycleValue","value","total","offset","nextValue","NavigableContainer","Component","constructor","args","onKeyDown","bind","bindContainer","getFocusableContext","getFocusableIndex","componentDidMount","container","addEventListener","componentWillUnmount","removeEventListener","ref","forwardedRef","props","current","target","onlyBrowserTabstops","finder","focus","tabbable","focusable","focusables","find","index","indexOf","event","cycle","eventToOffset","onNavigate","stopNavigationEvents","undefined","stopImmediatePropagation","targetRole","getAttribute","targetHasMenuItemRole","includes","preventDefault","activeElement","ownerDocument","context","nextIndex","length","code","render","children","restProps","_react","createElement","forwardedNavigableContainer","displayName","_default","exports","default","forwardRef"],"sources":["@wordpress/components/src/navigable-container/container.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Component, forwardRef } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport type { NavigableContainerProps } from './types';\n\nconst noop = () => {};\nconst MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];\n\nfunction cycleValue( value: number, total: number, offset: number ) {\n\tconst nextValue = value + offset;\n\tif ( nextValue < 0 ) {\n\t\treturn total + nextValue;\n\t} else if ( nextValue >= total ) {\n\t\treturn nextValue - total;\n\t}\n\n\treturn nextValue;\n}\n\nclass NavigableContainer extends Component< NavigableContainerProps > {\n\tcontainer?: HTMLDivElement;\n\n\tconstructor( args: NavigableContainerProps ) {\n\t\tsuper( args );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.bindContainer = this.bindContainer.bind( this );\n\n\t\tthis.getFocusableContext = this.getFocusableContext.bind( this );\n\t\tthis.getFocusableIndex = this.getFocusableIndex.bind( this );\n\t}\n\n\tcomponentDidMount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// We use DOM event listeners instead of React event listeners\n\t\t// because we want to catch events from the underlying DOM tree\n\t\t// The React Tree can be different from the DOM tree when using\n\t\t// portals. Block Toolbars for instance are rendered in a separate\n\t\t// React Trees.\n\t\tthis.container.addEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tif ( ! this.container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.container.removeEventListener( 'keydown', this.onKeyDown );\n\t}\n\n\tbindContainer( ref: HTMLDivElement ) {\n\t\tconst { forwardedRef } = this.props;\n\t\tthis.container = ref;\n\n\t\tif ( typeof forwardedRef === 'function' ) {\n\t\t\tforwardedRef( ref );\n\t\t} else if ( forwardedRef && 'current' in forwardedRef ) {\n\t\t\tforwardedRef.current = ref;\n\t\t}\n\t}\n\n\tgetFocusableContext( target: Element ) {\n\t\tif ( ! this.container ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst { onlyBrowserTabstops } = this.props;\n\t\tconst finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;\n\t\tconst focusables = finder.find( this.container ) as HTMLElement[];\n\n\t\tconst index = this.getFocusableIndex( focusables, target );\n\t\tif ( index > -1 && target ) {\n\t\t\treturn { index, target, focusables };\n\t\t}\n\t\treturn null;\n\t}\n\n\tgetFocusableIndex( focusables: Element[], target: Element ) {\n\t\treturn focusables.indexOf( target );\n\t}\n\n\tonKeyDown( event: KeyboardEvent ) {\n\t\tif ( this.props.onKeyDown ) {\n\t\t\tthis.props.onKeyDown( event );\n\t\t}\n\n\t\tconst { getFocusableContext } = this;\n\t\tconst {\n\t\t\tcycle = true,\n\t\t\teventToOffset,\n\t\t\tonNavigate = noop,\n\t\t\tstopNavigationEvents,\n\t\t} = this.props;\n\n\t\tconst offset = eventToOffset( event );\n\n\t\t// eventToOffset returns undefined if the event is not handled by the component.\n\t\tif ( offset !== undefined && stopNavigationEvents ) {\n\t\t\t// Prevents arrow key handlers bound to the document directly interfering.\n\t\t\tevent.stopImmediatePropagation();\n\n\t\t\t// When navigating a collection of items, prevent scroll containers\n\t\t\t// from scrolling. The preventDefault also prevents Voiceover from\n\t\t\t// 'handling' the event, as voiceover will try to use arrow keys\n\t\t\t// for highlighting text.\n\t\t\tconst targetRole = (\n\t\t\t\tevent.target as HTMLDivElement | null\n\t\t\t )?.getAttribute( 'role' );\n\t\t\tconst targetHasMenuItemRole =\n\t\t\t\t!! targetRole && MENU_ITEM_ROLES.includes( targetRole );\n\n\t\t\tif ( targetHasMenuItemRole ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tif ( ! offset ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = ( event.target as HTMLElement | null )\n\t\t\t?.ownerDocument?.activeElement;\n\t\tif ( ! activeElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst context = getFocusableContext( activeElement );\n\t\tif ( ! context ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { index, focusables } = context;\n\t\tconst nextIndex = cycle\n\t\t\t? cycleValue( index, focusables.length, offset )\n\t\t\t: index + offset;\n\n\t\tif ( nextIndex >= 0 && nextIndex < focusables.length ) {\n\t\t\tfocusables[ nextIndex ].focus();\n\t\t\tonNavigate( nextIndex, focusables[ nextIndex ] );\n\n\t\t\t// `preventDefault()` on tab to avoid having the browser move the focus\n\t\t\t// after this component has already moved it.\n\t\t\tif ( event.code === 'Tab' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tchildren,\n\t\t\tstopNavigationEvents,\n\t\t\teventToOffset,\n\t\t\tonNavigate,\n\t\t\tonKeyDown,\n\t\t\tcycle,\n\t\t\tonlyBrowserTabstops,\n\t\t\tforwardedRef,\n\t\t\t...restProps\n\t\t} = this.props;\n\t\treturn (\n\t\t\t<div ref={ this.bindContainer } { ...restProps }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nconst forwardedNavigableContainer = (\n\tprops: NavigableContainerProps,\n\tref: ForwardedRef< HTMLDivElement >\n) => {\n\treturn <NavigableContainer { ...props } forwardedRef={ ref } />;\n};\nforwardedNavigableContainer.displayName = 'NavigableContainer';\n\nexport default forwardRef( forwardedNavigableContainer );\n"],"mappings":"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"}

package/build/navigable-container/menu.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.NavigableMenu = void 0;
 exports.UnforwardedNavigableMenu = UnforwardedNavigableMenu;
 exports.default = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _container = _interopRequireDefault(require("./container"));
 /**
@@ -52,7 +53,7 @@ function UnforwardedNavigableMenu({
     }
     return undefined;
   };
-  return (0, _element.createElement)(_container.default, {
+  return (0, _react.createElement)(_container.default, {
     ref: ref,
     stopNavigationEvents: true,
     onlyBrowserTabstops: false,
@@ -88,8 +89,6 @@ function UnforwardedNavigableMenu({
  *  );
  *  ```
  */
-const NavigableMenu = (0, _element.forwardRef)(UnforwardedNavigableMenu);
-exports.NavigableMenu = NavigableMenu;
-var _default = NavigableMenu;
-exports.default = _default;
+const NavigableMenu = exports.NavigableMenu = (0, _element.forwardRef)(UnforwardedNavigableMenu);
+var _default = exports.default = NavigableMenu;
 //# sourceMappingURL=menu.js.map

package/build/navigable-container/menu.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_container","_interopRequireDefault","UnforwardedNavigableMenu","role","orientation","rest","ref","eventToOffset","evt","code","next","previous","includes","undefined","createElement","default","stopNavigationEvents","onlyBrowserTabstops","NavigableMenu","forwardRef","exports","_default"],"sources":["@wordpress/components/src/navigable-container/menu.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\nimport type { NavigableMenuProps } from './types';\n\nexport function UnforwardedNavigableMenu(\n\t{ role = 'menu', orientation = 'vertical', ...rest }: NavigableMenuProps,\n\tref: ForwardedRef< any >\n) {\n\tconst eventToOffset = ( evt: KeyboardEvent ) => {\n\t\tconst { code } = evt;\n\n\t\tlet next = [ 'ArrowDown' ];\n\t\tlet previous = [ 'ArrowUp' ];\n\n\t\tif ( orientation === 'horizontal' ) {\n\t\t\tnext = [ 'ArrowRight' ];\n\t\t\tprevious = [ 'ArrowLeft' ];\n\t\t}\n\n\t\tif ( orientation === 'both' ) {\n\t\t\tnext = [ 'ArrowRight', 'ArrowDown' ];\n\t\t\tprevious = [ 'ArrowLeft', 'ArrowUp' ];\n\t\t}\n\n\t\tif ( next.includes( code ) ) {\n\t\t\treturn 1;\n\t\t} else if ( previous.includes( code ) ) {\n\t\t\treturn -1;\n\t\t} else if (\n\t\t\t[ 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t) {\n\t\t\t// Key press should be handled, e.g. have event propagation and\n\t\t\t// default behavior handled by NavigableContainer but not result\n\t\t\t// in an offset.\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn undefined;\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops={ false }\n\t\t\trole={ role }\n\t\t\taria-orientation={\n\t\t\t\trole !== 'presentation' &&\n\t\t\t\t( orientation === 'vertical' || orientation === 'horizontal' )\n\t\t\t\t\t? orientation\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\teventToOffset={ eventToOffset }\n\t\t\t{ ...rest }\n\t\t/>\n\t);\n}\n\n/**\n * A container for a navigable menu.\n *\n *  ```jsx\n *  import {\n *    NavigableMenu,\n *    Button,\n *  } from '@wordpress/components';\n *\n *  function onNavigate( index, target ) {\n *    console.log( `Navigates to ${ index }`, target );\n *  }\n *\n *  const MyNavigableContainer = () => (\n *    <div>\n *      <span>Navigable Menu:</span>\n *      <NavigableMenu onNavigate={ onNavigate } orientation=\"horizontal\">\n *        <Button variant=\"secondary\">Item 1</Button>\n *        <Button variant=\"secondary\">Item 2</Button>\n *        <Button variant=\"secondary\">Item 3</Button>\n *      </NavigableMenu>\n *    </div>\n *  );\n *  ```\n */\nexport const NavigableMenu = forwardRef( UnforwardedNavigableMenu );\n\nexport default NavigableMenu;\n"],"mappings":";;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASG,wBAAwBA,CACvC;EAAEC,IAAI,GAAG,MAAM;EAAEC,WAAW,GAAG,UAAU;EAAE,GAAGC;AAAyB,CAAC,EACxEC,GAAwB,EACvB;EACD,MAAMC,aAAa,GAAKC,GAAkB,IAAM;IAC/C,MAAM;MAAEC;IAAK,CAAC,GAAGD,GAAG;IAEpB,IAAIE,IAAI,GAAG,CAAE,WAAW,CAAE;IAC1B,IAAIC,QAAQ,GAAG,CAAE,SAAS,CAAE;IAE5B,IAAKP,WAAW,KAAK,YAAY,EAAG;MACnCM,IAAI,GAAG,CAAE,YAAY,CAAE;MACvBC,QAAQ,GAAG,CAAE,WAAW,CAAE;IAC3B;IAEA,IAAKP,WAAW,KAAK,MAAM,EAAG;MAC7BM,IAAI,GAAG,CAAE,YAAY,EAAE,WAAW,CAAE;MACpCC,QAAQ,GAAG,CAAE,WAAW,EAAE,SAAS,CAAE;IACtC;IAEA,IAAKD,IAAI,CAACE,QAAQ,CAAEH,IAAK,CAAC,EAAG;MAC5B,OAAO,CAAC;IACT,CAAC,MAAM,IAAKE,QAAQ,CAACC,QAAQ,CAAEH,IAAK,CAAC,EAAG;MACvC,OAAO,CAAC,CAAC;IACV,CAAC,MAAM,IACN,CAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,CAAE,CAACG,QAAQ,CAC7DH,IACD,CAAC,EACA;MACD;MACA;MACA;MACA,OAAO,CAAC;IACT;IAEA,OAAOI,SAAS;EACjB,CAAC;EAED,OACC,IAAAf,QAAA,CAAAgB,aAAA,EAACd,UAAA,CAAAe,OAAkB;IAClBT,GAAG,EAAGA,GAAK;IACXU,oBAAoB;IACpBC,mBAAmB,EAAG,KAAO;IAC7Bd,IAAI,EAAGA,IAAM;IACb,oBACCA,IAAI,KAAK,cAAc,KACrBC,WAAW,KAAK,UAAU,IAAIA,WAAW,KAAK,YAAY,CAAE,GAC3DA,WAAW,GACXS,SACH;IACDN,aAAa,EAAGA,aAAe;IAAA,GAC1BF;EAAI,CACT,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMa,aAAa,GAAG,IAAAC,mBAAU,EAAEjB,wBAAyB,CAAC;AAACkB,OAAA,CAAAF,aAAA,GAAAA,aAAA;AAAA,IAAAG,QAAA,GAErDH,aAAa;AAAAE,OAAA,CAAAL,OAAA,GAAAM,QAAA"}
+{"version":3,"names":["_element","require","_container","_interopRequireDefault","UnforwardedNavigableMenu","role","orientation","rest","ref","eventToOffset","evt","code","next","previous","includes","undefined","_react","createElement","default","stopNavigationEvents","onlyBrowserTabstops","NavigableMenu","exports","forwardRef","_default"],"sources":["@wordpress/components/src/navigable-container/menu.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\nimport type { NavigableMenuProps } from './types';\n\nexport function UnforwardedNavigableMenu(\n\t{ role = 'menu', orientation = 'vertical', ...rest }: NavigableMenuProps,\n\tref: ForwardedRef< any >\n) {\n\tconst eventToOffset = ( evt: KeyboardEvent ) => {\n\t\tconst { code } = evt;\n\n\t\tlet next = [ 'ArrowDown' ];\n\t\tlet previous = [ 'ArrowUp' ];\n\n\t\tif ( orientation === 'horizontal' ) {\n\t\t\tnext = [ 'ArrowRight' ];\n\t\t\tprevious = [ 'ArrowLeft' ];\n\t\t}\n\n\t\tif ( orientation === 'both' ) {\n\t\t\tnext = [ 'ArrowRight', 'ArrowDown' ];\n\t\t\tprevious = [ 'ArrowLeft', 'ArrowUp' ];\n\t\t}\n\n\t\tif ( next.includes( code ) ) {\n\t\t\treturn 1;\n\t\t} else if ( previous.includes( code ) ) {\n\t\t\treturn -1;\n\t\t} else if (\n\t\t\t[ 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight' ].includes(\n\t\t\t\tcode\n\t\t\t)\n\t\t) {\n\t\t\t// Key press should be handled, e.g. have event propagation and\n\t\t\t// default behavior handled by NavigableContainer but not result\n\t\t\t// in an offset.\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn undefined;\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops={ false }\n\t\t\trole={ role }\n\t\t\taria-orientation={\n\t\t\t\trole !== 'presentation' &&\n\t\t\t\t( orientation === 'vertical' || orientation === 'horizontal' )\n\t\t\t\t\t? orientation\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\teventToOffset={ eventToOffset }\n\t\t\t{ ...rest }\n\t\t/>\n\t);\n}\n\n/**\n * A container for a navigable menu.\n *\n *  ```jsx\n *  import {\n *    NavigableMenu,\n *    Button,\n *  } from '@wordpress/components';\n *\n *  function onNavigate( index, target ) {\n *    console.log( `Navigates to ${ index }`, target );\n *  }\n *\n *  const MyNavigableContainer = () => (\n *    <div>\n *      <span>Navigable Menu:</span>\n *      <NavigableMenu onNavigate={ onNavigate } orientation=\"horizontal\">\n *        <Button variant=\"secondary\">Item 1</Button>\n *        <Button variant=\"secondary\">Item 2</Button>\n *        <Button variant=\"secondary\">Item 3</Button>\n *      </NavigableMenu>\n *    </div>\n *  );\n *  ```\n */\nexport const NavigableMenu = forwardRef( UnforwardedNavigableMenu );\n\nexport default NavigableMenu;\n"],"mappings":";;;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASG,wBAAwBA,CACvC;EAAEC,IAAI,GAAG,MAAM;EAAEC,WAAW,GAAG,UAAU;EAAE,GAAGC;AAAyB,CAAC,EACxEC,GAAwB,EACvB;EACD,MAAMC,aAAa,GAAKC,GAAkB,IAAM;IAC/C,MAAM;MAAEC;IAAK,CAAC,GAAGD,GAAG;IAEpB,IAAIE,IAAI,GAAG,CAAE,WAAW,CAAE;IAC1B,IAAIC,QAAQ,GAAG,CAAE,SAAS,CAAE;IAE5B,IAAKP,WAAW,KAAK,YAAY,EAAG;MACnCM,IAAI,GAAG,CAAE,YAAY,CAAE;MACvBC,QAAQ,GAAG,CAAE,WAAW,CAAE;IAC3B;IAEA,IAAKP,WAAW,KAAK,MAAM,EAAG;MAC7BM,IAAI,GAAG,CAAE,YAAY,EAAE,WAAW,CAAE;MACpCC,QAAQ,GAAG,CAAE,WAAW,EAAE,SAAS,CAAE;IACtC;IAEA,IAAKD,IAAI,CAACE,QAAQ,CAAEH,IAAK,CAAC,EAAG;MAC5B,OAAO,CAAC;IACT,CAAC,MAAM,IAAKE,QAAQ,CAACC,QAAQ,CAAEH,IAAK,CAAC,EAAG;MACvC,OAAO,CAAC,CAAC;IACV,CAAC,MAAM,IACN,CAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,CAAE,CAACG,QAAQ,CAC7DH,IACD,CAAC,EACA;MACD;MACA;MACA;MACA,OAAO,CAAC;IACT;IAEA,OAAOI,SAAS;EACjB,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACf,UAAA,CAAAgB,OAAkB;IAClBV,GAAG,EAAGA,GAAK;IACXW,oBAAoB;IACpBC,mBAAmB,EAAG,KAAO;IAC7Bf,IAAI,EAAGA,IAAM;IACb,oBACCA,IAAI,KAAK,cAAc,KACrBC,WAAW,KAAK,UAAU,IAAIA,WAAW,KAAK,YAAY,CAAE,GAC3DA,WAAW,GACXS,SACH;IACDN,aAAa,EAAGA,aAAe;IAAA,GAC1BF;EAAI,CACT,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMc,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,mBAAU,EAAEnB,wBAAyB,CAAC;AAAC,IAAAoB,QAAA,GAAAF,OAAA,CAAAJ,OAAA,GAErDG,aAAa"}

package/build/navigable-container/tabbable.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TabbableContainer = void 0;
 exports.UnforwardedTabbableContainer = UnforwardedTabbableContainer;
 exports.default = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _container = _interopRequireDefault(require("./container"));
 /**
@@ -50,7 +51,7 @@ function UnforwardedTabbableContainer({
     }
     return undefined;
   };
-  return (0, _element.createElement)(_container.default, {
+  return (0, _react.createElement)(_container.default, {
     ref: ref,
     stopNavigationEvents: true,
     onlyBrowserTabstops: true,
@@ -93,8 +94,6 @@ function UnforwardedTabbableContainer({
  *  );
  *  ```
  */
-const TabbableContainer = (0, _element.forwardRef)(UnforwardedTabbableContainer);
-exports.TabbableContainer = TabbableContainer;
-var _default = TabbableContainer;
-exports.default = _default;
+const TabbableContainer = exports.TabbableContainer = (0, _element.forwardRef)(UnforwardedTabbableContainer);
+var _default = exports.default = TabbableContainer;
 //# sourceMappingURL=tabbable.js.map

package/build/navigable-container/tabbable.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_container","_interopRequireDefault","UnforwardedTabbableContainer","eventToOffset","props","ref","innerEventToOffset","evt","code","shiftKey","undefined","createElement","default","stopNavigationEvents","onlyBrowserTabstops","TabbableContainer","forwardRef","exports","_default"],"sources":["@wordpress/components/src/navigable-container/tabbable.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\nimport type { TabbableContainerProps } from './types';\n\nexport function UnforwardedTabbableContainer(\n\t{ eventToOffset, ...props }: TabbableContainerProps,\n\tref: ForwardedRef< any >\n) {\n\tconst innerEventToOffset = ( evt: KeyboardEvent ) => {\n\t\tconst { code, shiftKey } = evt;\n\t\tif ( 'Tab' === code ) {\n\t\t\treturn shiftKey ? -1 : 1;\n\t\t}\n\n\t\t// Allow custom handling of keys besides Tab.\n\t\t//\n\t\t// By default, TabbableContainer will move focus forward on Tab and\n\t\t// backward on Shift+Tab. The handler below will be used for all other\n\t\t// events. The semantics for `eventToOffset`'s return\n\t\t// values are the following:\n\t\t//\n\t\t// - +1: move focus forward\n\t\t// - -1: move focus backward\n\t\t// -  0: don't move focus, but acknowledge event and thus stop it\n\t\t// - undefined: do nothing, let the event propagate.\n\t\tif ( eventToOffset ) {\n\t\t\treturn eventToOffset( evt );\n\t\t}\n\n\t\treturn undefined;\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops\n\t\t\teventToOffset={ innerEventToOffset }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\n/**\n * A container for tabbable elements.\n *\n *  ```jsx\n *  import {\n *    TabbableContainer,\n *    Button,\n *  } from '@wordpress/components';\n *\n *  function onNavigate( index, target ) {\n *    console.log( `Navigates to ${ index }`, target );\n *  }\n *\n *  const MyTabbableContainer = () => (\n *    <div>\n *      <span>Tabbable Container:</span>\n *      <TabbableContainer onNavigate={ onNavigate }>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 1\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 2\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 3\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 4\n *        </Button>\n *      </TabbableContainer>\n *    </div>\n *  );\n *  ```\n */\nexport const TabbableContainer = forwardRef( UnforwardedTabbableContainer );\n\nexport default TabbableContainer;\n"],"mappings":";;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASG,4BAA4BA,CAC3C;EAAEC,aAAa;EAAE,GAAGC;AAA8B,CAAC,EACnDC,GAAwB,EACvB;EACD,MAAMC,kBAAkB,GAAKC,GAAkB,IAAM;IACpD,MAAM;MAAEC,IAAI;MAAEC;IAAS,CAAC,GAAGF,GAAG;IAC9B,IAAK,KAAK,KAAKC,IAAI,EAAG;MACrB,OAAOC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;IACzB;;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAKN,aAAa,EAAG;MACpB,OAAOA,aAAa,CAAEI,GAAI,CAAC;IAC5B;IAEA,OAAOG,SAAS;EACjB,CAAC;EAED,OACC,IAAAZ,QAAA,CAAAa,aAAA,EAACX,UAAA,CAAAY,OAAkB;IAClBP,GAAG,EAAGA,GAAK;IACXQ,oBAAoB;IACpBC,mBAAmB;IACnBX,aAAa,EAAGG,kBAAoB;IAAA,GAC/BF;EAAK,CACV,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMW,iBAAiB,GAAG,IAAAC,mBAAU,EAAEd,4BAA6B,CAAC;AAACe,OAAA,CAAAF,iBAAA,GAAAA,iBAAA;AAAA,IAAAG,QAAA,GAE7DH,iBAAiB;AAAAE,OAAA,CAAAL,OAAA,GAAAM,QAAA"}
+{"version":3,"names":["_element","require","_container","_interopRequireDefault","UnforwardedTabbableContainer","eventToOffset","props","ref","innerEventToOffset","evt","code","shiftKey","undefined","_react","createElement","default","stopNavigationEvents","onlyBrowserTabstops","TabbableContainer","exports","forwardRef","_default"],"sources":["@wordpress/components/src/navigable-container/tabbable.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\nimport type { TabbableContainerProps } from './types';\n\nexport function UnforwardedTabbableContainer(\n\t{ eventToOffset, ...props }: TabbableContainerProps,\n\tref: ForwardedRef< any >\n) {\n\tconst innerEventToOffset = ( evt: KeyboardEvent ) => {\n\t\tconst { code, shiftKey } = evt;\n\t\tif ( 'Tab' === code ) {\n\t\t\treturn shiftKey ? -1 : 1;\n\t\t}\n\n\t\t// Allow custom handling of keys besides Tab.\n\t\t//\n\t\t// By default, TabbableContainer will move focus forward on Tab and\n\t\t// backward on Shift+Tab. The handler below will be used for all other\n\t\t// events. The semantics for `eventToOffset`'s return\n\t\t// values are the following:\n\t\t//\n\t\t// - +1: move focus forward\n\t\t// - -1: move focus backward\n\t\t// -  0: don't move focus, but acknowledge event and thus stop it\n\t\t// - undefined: do nothing, let the event propagate.\n\t\tif ( eventToOffset ) {\n\t\t\treturn eventToOffset( evt );\n\t\t}\n\n\t\treturn undefined;\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops\n\t\t\teventToOffset={ innerEventToOffset }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\n/**\n * A container for tabbable elements.\n *\n *  ```jsx\n *  import {\n *    TabbableContainer,\n *    Button,\n *  } from '@wordpress/components';\n *\n *  function onNavigate( index, target ) {\n *    console.log( `Navigates to ${ index }`, target );\n *  }\n *\n *  const MyTabbableContainer = () => (\n *    <div>\n *      <span>Tabbable Container:</span>\n *      <TabbableContainer onNavigate={ onNavigate }>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 1\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 2\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 3\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 4\n *        </Button>\n *      </TabbableContainer>\n *    </div>\n *  );\n *  ```\n */\nexport const TabbableContainer = forwardRef( UnforwardedTabbableContainer );\n\nexport default TabbableContainer;\n"],"mappings":";;;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASG,4BAA4BA,CAC3C;EAAEC,aAAa;EAAE,GAAGC;AAA8B,CAAC,EACnDC,GAAwB,EACvB;EACD,MAAMC,kBAAkB,GAAKC,GAAkB,IAAM;IACpD,MAAM;MAAEC,IAAI;MAAEC;IAAS,CAAC,GAAGF,GAAG;IAC9B,IAAK,KAAK,KAAKC,IAAI,EAAG;MACrB,OAAOC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;IACzB;;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAKN,aAAa,EAAG;MACpB,OAAOA,aAAa,CAAEI,GAAI,CAAC;IAC5B;IAEA,OAAOG,SAAS;EACjB,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACZ,UAAA,CAAAa,OAAkB;IAClBR,GAAG,EAAGA,GAAK;IACXS,oBAAoB;IACpBC,mBAAmB;IACnBZ,aAAa,EAAGG,kBAAoB;IAAA,GAC/BF;EAAK,CACV,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,mBAAU,EAAEhB,4BAA6B,CAAC;AAAC,IAAAiB,QAAA,GAAAF,OAAA,CAAAJ,OAAA,GAE7DG,iBAAiB"}

package/build/navigable-container/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/navigable-container/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\n\ntype BaseProps = {\n\t/**\n\t * The component children.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.\n\t *\n\t * @default true\n\t */\n\tcycle?: boolean;\n\t/**\n\t * A callback invoked on the keydown event.\n\t */\n\tonKeyDown?: ( event: KeyboardEvent ) => void;\n\t/**\n\t * A callback invoked when the menu navigates to one of its children passing the index and child as an argument\n\t */\n\tonNavigate?: ( index: number, focusable: HTMLElement ) => void;\n};\n\nexport type NavigableContainerProps = WordPressComponentProps<\n\tBaseProps & {\n\t\t/**\n\t\t * Gets an offset, given an event.\n\t\t */\n\t\teventToOffset: ( event: KeyboardEvent ) => -1 | 0 | 1 | undefined;\n\t\t/**\n\t\t * The forwarded ref.\n\t\t */\n\t\tforwardedRef?: ForwardedRef< any >;\n\t\t/**\n\t\t * Whether to only consider browser tab stops.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tonlyBrowserTabstops: boolean;\n\t\t/**\n\t\t * Whether to stop navigation events.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tstopNavigationEvents: boolean;\n\t},\n\t'div',\n\tfalse\n>;\n\nexport type NavigableMenuProps = WordPressComponentProps<\n\tBaseProps & {\n\t\t/**\n\t\t * The orientation of the menu.\n\t\t *\n\t\t * @default 'vertical'\n\t\t */\n\t\torientation?: 'vertical' | 'horizontal' | 'both';\n\t},\n\t'div',\n\tfalse\n>;\n\nexport type TabbableContainerProps = WordPressComponentProps<\n\tBaseProps & Partial< Pick< NavigableContainerProps, 'eventToOffset' > >,\n\t'div',\n\tfalse\n>;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/navigable-container/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\n\ntype BaseProps = {\n\t/**\n\t * The component children.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.\n\t *\n\t * @default true\n\t */\n\tcycle?: boolean;\n\t/**\n\t * A callback invoked on the keydown event.\n\t */\n\tonKeyDown?: ( event: KeyboardEvent ) => void;\n\t/**\n\t * A callback invoked when the menu navigates to one of its children passing the index and child as an argument\n\t */\n\tonNavigate?: ( index: number, focusable: HTMLElement ) => void;\n};\n\nexport type NavigableContainerProps = WordPressComponentProps<\n\tBaseProps & {\n\t\t/**\n\t\t * Gets an offset, given an event.\n\t\t */\n\t\teventToOffset: ( event: KeyboardEvent ) => -1 | 0 | 1 | undefined;\n\t\t/**\n\t\t * The forwarded ref.\n\t\t */\n\t\tforwardedRef?: ForwardedRef< any >;\n\t\t/**\n\t\t * Whether to only consider browser tab stops.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tonlyBrowserTabstops: boolean;\n\t\t/**\n\t\t * Whether to stop navigation events.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tstopNavigationEvents: boolean;\n\t},\n\t'div',\n\tfalse\n>;\n\nexport type NavigableMenuProps = WordPressComponentProps<\n\tBaseProps & {\n\t\t/**\n\t\t * The orientation of the menu.\n\t\t *\n\t\t * @default 'vertical'\n\t\t */\n\t\torientation?: 'vertical' | 'horizontal' | 'both';\n\t},\n\t'div',\n\tfalse\n>;\n\nexport type TabbableContainerProps = WordPressComponentProps<\n\tBaseProps & Partial< Pick< NavigableContainerProps, 'eventToOffset' > >,\n\t'div',\n\tfalse\n>;\n"],"mappings":""}