@wordpress/components 23.1.0 → 23.3.0

package/build-module/responsive-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.js"],"names":["classnames","cloneElement","Children","useResizeObserver","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,QAAvB,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,oBAAlC;;AAEA,SAASC,iBAAT,OAKI;AAAA,MALwB;AAC3BC,IAAAA,YAD2B;AAE3BC,IAAAA,aAF2B;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA,QAAQ,GAAG;AAJgB,GAKxB;AACH,QAAM,CAAEC,uBAAF,EAA2B;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAA3B,IACLR,iBAAiB,EADlB;;AAEA,MAAKD,QAAQ,CAACU,KAAT,CAAgBL,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMM,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZT,YAAY,GAAGM,cAAf,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMU,OAAO,GAAGP,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,cAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,cAAC,OAAD;AAAS,IAAA,KAAK,EAAGI;AAAjB,IAFD,EAGGZ,YAAY,CAAEM,QAAF,EAAY;AACzBS,IAAAA,SAAS,EAAEhB,UAAU,CACpB,wCADoB,EAEpBO,QAAQ,CAACU,KAAT,CAAeD,SAFK;AADI,GAAZ,CAHf,CADD;AAYA;;AAED,eAAeZ,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n} ) {\n\tconst [ containerResizeListener, { width: containerWidth } ] =\n\t\tuseResizeObserver();\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\tconst imageStyle = {\n\t\tpaddingBottom:\n\t\t\tnaturalWidth < containerWidth\n\t\t\t\t? naturalHeight\n\t\t\t\t: ( naturalHeight / naturalWidth ) * 100 + '%',\n\t};\n\tconst TagName = isInline ? 'span' : 'div';\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t{ containerResizeListener }\n\t\t\t<TagName style={ imageStyle } />\n\t\t\t{ cloneElement( children, {\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\tchildren.props.className\n\t\t\t\t),\n\t\t\t} ) }\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}
+{"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"names":["classnames","cloneElement","Children","useResizeObserver","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,QAAvB,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,oBAAlC;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAT,OAK4B;AAAA,MALA;AAC3BC,IAAAA,YAD2B;AAE3BC,IAAAA,aAF2B;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA,QAAQ,GAAG;AAJgB,GAKA;AAC3B,QAAM,CAAEC,uBAAF,EAA2B;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAA3B,IACLR,iBAAiB,EADlB;;AAEA,MAAKD,QAAQ,CAACU,KAAT,CAAgBL,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMM,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZT,YAAY,IAAKM,cAAL,aAAKA,cAAL,cAAKA,cAAL,GAAuB,CAAvB,CAAZ,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMU,OAAO,GAAGP,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,cAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,cAAC,OAAD;AAAS,IAAA,KAAK,EAAGI;AAAjB,IAFD,EAGGZ,YAAY,CAAEM,QAAF,EAAY;AACzBS,IAAAA,SAAS,EAAEhB,UAAU,CACpB,wCADoB,EAEpBO,QAAQ,CAACU,KAAT,CAAeD,SAFK;AADI,GAAZ,CAHf,CADD;AAYA;;AAED,eAAeZ,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveWrapperProps } from './types';\n\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n}: ResponsiveWrapperProps ) {\n\tconst [ containerResizeListener, { width: containerWidth } ] =\n\t\tuseResizeObserver();\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\tconst imageStyle = {\n\t\tpaddingBottom:\n\t\t\tnaturalWidth < ( containerWidth ?? 0 )\n\t\t\t\t? naturalHeight\n\t\t\t\t: ( naturalHeight / naturalWidth ) * 100 + '%',\n\t};\n\tconst TagName = isInline ? 'span' : 'div';\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t{ containerResizeListener }\n\t\t\t<TagName style={ imageStyle } />\n\t\t\t{ cloneElement( children, {\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\tchildren.props.className\n\t\t\t\t),\n\t\t\t} ) }\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}

package/build-module/responsive-wrapper/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/responsive-wrapper/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build-module/sandbox/index.js

@@ -5,6 +5,9 @@ import { createElement } from "@wordpress/element";
  */
 import { renderToString, useRef, useState, useEffect } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
 
 const observeAndResizeJS = function () {
   const {
@@ -58,7 +61,8 @@ const observeAndResizeJS = function () {
   // get an DOM mutations for that, so do the resize when the window is resized, too.
 
   window.addEventListener('resize', sendResize, true);
-};
+}; // TODO: These styles shouldn't be coupled with WordPress.
+
 
 const style = `
 	body {
@@ -82,7 +86,19 @@ const style = `
 		margin-bottom: 0 !important;
 	}
 `;
-export default function Sandbox(_ref) {
+/**
+ * This component provides an isolated environment for arbitrary HTML via iframes.
+ *
+ * ```jsx
+ * import { SandBox } from '@wordpress/components';
+ *
+ * const MySandBox = () => (
+ * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
+ * );
+ * ```
+ */
+
+function SandBox(_ref) {
   let {
     html = '',
     title = '',
@@ -97,13 +113,15 @@ export default function Sandbox(_ref) {
 
   function isFrameAccessible() {
     try {
-      return !!ref.current.contentDocument.body;
+      var _ref$current, _ref$current$contentD;
+
+      return !!((_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current$contentD = _ref$current.contentDocument) !== null && _ref$current$contentD !== void 0 && _ref$current$contentD.body);
     } catch (e) {
       return false;
     }
   }
 
-  function trySandbox() {
+  function trySandBox() {
     let forceRerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
     if (!isFrameAccessible()) {
@@ -114,11 +132,8 @@ export default function Sandbox(_ref) {
       contentDocument,
       ownerDocument
     } = ref.current;
-    const {
-      body
-    } = contentDocument;
 
-    if (!forceRerender && null !== body.getAttribute('data-resizable-iframe-connected')) {
+    if (!forceRerender && null !== (contentDocument === null || contentDocument === void 0 ? void 0 : contentDocument.body.getAttribute('data-resizable-iframe-connected'))) {
       return;
     } // Put the html snippet into a html document, and then write it to the iframe's document
     // we can use this in the future to inject custom styles or scripts.
@@ -163,10 +178,12 @@ export default function Sandbox(_ref) {
   }
 
   useEffect(() => {
-    trySandbox();
+    var _iframe$ownerDocument;
+
+    trySandBox();
 
-    function tryNoForceSandbox() {
-      trySandbox(false);
+    function tryNoForceSandBox() {
+      trySandBox(false);
     }
 
     function checkMessageForResize(event) {
@@ -196,32 +213,27 @@ export default function Sandbox(_ref) {
     }
 
     const iframe = ref.current;
-    const {
-      ownerDocument
-    } = iframe;
-    const {
-      defaultView
-    } = ownerDocument; // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
+    const defaultView = iframe === null || iframe === void 0 ? void 0 : (_iframe$ownerDocument = iframe.ownerDocument) === null || _iframe$ownerDocument === void 0 ? void 0 : _iframe$ownerDocument.defaultView; // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
     // after reordering the containing block. See these two issues for more details:
     // https://github.com/WordPress/gutenberg/issues/6146
     // https://github.com/facebook/react/issues/18752
 
-    iframe.addEventListener('load', tryNoForceSandbox, false);
-    defaultView.addEventListener('message', checkMessageForResize);
+    iframe === null || iframe === void 0 ? void 0 : iframe.addEventListener('load', tryNoForceSandBox, false);
+    defaultView === null || defaultView === void 0 ? void 0 : defaultView.addEventListener('message', checkMessageForResize);
     return () => {
-      iframe === null || iframe === void 0 ? void 0 : iframe.removeEventListener('load', tryNoForceSandbox, false);
-      defaultView.addEventListener('message', checkMessageForResize);
+      iframe === null || iframe === void 0 ? void 0 : iframe.removeEventListener('load', tryNoForceSandBox, false);
+      defaultView === null || defaultView === void 0 ? void 0 : defaultView.addEventListener('message', checkMessageForResize);
     }; // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
-    trySandbox(); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+    trySandBox(); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [title, styles, scripts]);
   useEffect(() => {
-    trySandbox(true); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+    trySandBox(true); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [html, type]);
@@ -235,4 +247,6 @@ export default function Sandbox(_ref) {
     height: Math.ceil(height)
   });
 }
+
+export default SandBox;
 //# sourceMappingURL=index.js.map

package/build-module/sandbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/sandbox/index.js"],"names":["renderToString","useRef","useState","useEffect","useFocusableIframe","useMergeRefs","observeAndResizeJS","MutationObserver","window","document","body","parent","sendResize","clientBoundingRect","getBoundingClientRect","postMessage","action","width","height","observer","observe","attributes","attributeOldValue","characterData","characterDataOldValue","childList","subtree","addEventListener","removeViewportStyles","ruleOrNode","style","forEach","test","Array","prototype","call","querySelectorAll","styleSheets","stylesheet","cssRules","rules","position","setAttribute","Sandbox","html","title","type","styles","scripts","onFocus","ref","setWidth","setHeight","isFrameAccessible","current","contentDocument","e","trySandbox","forceRerender","ownerDocument","getAttribute","htmlDoc","documentElement","lang","__html","map","i","toString","src","open","write","close","tryNoForceSandbox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","defaultView","removeEventListener","Math","ceil"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\nconst observeAndResizeJS = function () {\n\tconst { MutationObserver } = window;\n\n\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\treturn;\n\t}\n\n\tfunction sendResize() {\n\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t},\n\t\t\t'*'\n\t\t);\n\t}\n\n\tconst observer = new MutationObserver( sendResize );\n\tobserver.observe( document.body, {\n\t\tattributes: true,\n\t\tattributeOldValue: false,\n\t\tcharacterData: true,\n\t\tcharacterDataOldValue: false,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t} );\n\n\twindow.addEventListener( 'load', sendResize, true );\n\n\t// Hack: Remove viewport unit styles, as these are relative\n\t// the iframe root and interfere with our mechanism for\n\t// determining the unconstrained page bounds.\n\tfunction removeViewportStyles( ruleOrNode ) {\n\t\tif ( ruleOrNode.style ) {\n\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (\n\t\t\t\tstyle\n\t\t\t) {\n\t\t\t\tif (\n\t\t\t\t\t/^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t) {\n\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\tArray.prototype.forEach.call(\n\t\tdocument.querySelectorAll( '[style]' ),\n\t\tremoveViewportStyles\n\t);\n\tArray.prototype.forEach.call(\n\t\tdocument.styleSheets,\n\t\tfunction ( stylesheet ) {\n\t\t\tArray.prototype.forEach.call(\n\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\tremoveViewportStyles\n\t\t\t);\n\t\t}\n\t);\n\n\tdocument.body.style.position = 'absolute';\n\tdocument.body.style.width = '100%';\n\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\tsendResize();\n\n\t// Resize events can change the width of elements with 100% width, but we don't\n\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\twindow.addEventListener( 'resize', sendResize, true );\n};\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\nexport default function Sandbox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n} ) {\n\tconst ref = useRef();\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ height, setHeight ] = useState( 0 );\n\n\tfunction isFrameAccessible() {\n\t\ttry {\n\t\t\treturn !! ref.current.contentDocument.body;\n\t\t} catch ( e ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tfunction trySandbox( forceRerender = false ) {\n\t\tif ( ! isFrameAccessible() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { contentDocument, ownerDocument } = ref.current;\n\t\tconst { body } = contentDocument;\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !== body.getAttribute( 'data-resizable-iframe-connected' )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Put the html snippet into a html document, and then write it to the iframe's document\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html\n\t\t\t\tlang={ ownerDocument.documentElement.lang }\n\t\t\t\tclassName={ type }\n\t\t\t>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: `(${ observeAndResizeJS.toString() })();`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\n\t\t// Writing the document like this makes it act in the same way as if it was\n\t\t// loaded over the network, so DOM creation and mutation, script execution, etc.\n\t\t// all work as expected.\n\t\tcontentDocument.open();\n\t\tcontentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );\n\t\tcontentDocument.close();\n\t}\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\n\t\tfunction tryNoForceSandbox() {\n\t\t\ttrySandbox( false );\n\t\t}\n\n\t\tfunction checkMessageForResize( event ) {\n\t\t\tconst iframe = ref.current;\n\n\t\t\t// Verify that the mounted element is the source of the message.\n\t\t\tif ( ! iframe || iframe.contentWindow !== event.source ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\t\tlet data = event.data || {};\n\n\t\t\tif ( 'string' === typeof data ) {\n\t\t\t\ttry {\n\t\t\t\t\tdata = JSON.parse( data );\n\t\t\t\t} catch ( e ) {}\n\t\t\t}\n\n\t\t\t// Update the state only if the message is formatted as we expect,\n\t\t\t// i.e. as an object with a 'resize' action.\n\t\t\tif ( 'resize' !== data.action ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetWidth( data.width );\n\t\t\tsetHeight( data.height );\n\t\t}\n\n\t\tconst iframe = ref.current;\n\t\tconst { ownerDocument } = iframe;\n\t\tconst { defaultView } = ownerDocument;\n\n\t\t// This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n\t\t// after reordering the containing block. See these two issues for more details:\n\t\t// https://github.com/WordPress/gutenberg/issues/6146\n\t\t// https://github.com/facebook/react/issues/18752\n\t\tiframe.addEventListener( 'load', tryNoForceSandbox, false );\n\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tiframe?.removeEventListener( 'load', tryNoForceSandbox, false );\n\t\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\t\t};\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ title, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandbox( true );\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, type ] );\n\n\treturn (\n\t\t<iframe\n\t\t\tref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }\n\t\t\ttitle={ title }\n\t\t\tclassName=\"components-sandbox\"\n\t\t\tsandbox=\"allow-scripts allow-same-origin allow-presentation\"\n\t\t\tonFocus={ onFocus }\n\t\t\twidth={ Math.ceil( width ) }\n\t\t\theight={ Math.ceil( height ) }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/sandbox/index.tsx"],"names":["renderToString","useRef","useState","useEffect","useFocusableIframe","useMergeRefs","observeAndResizeJS","MutationObserver","window","document","body","parent","sendResize","clientBoundingRect","getBoundingClientRect","postMessage","action","width","height","observer","observe","attributes","attributeOldValue","characterData","characterDataOldValue","childList","subtree","addEventListener","removeViewportStyles","ruleOrNode","style","forEach","test","Array","prototype","call","querySelectorAll","styleSheets","stylesheet","cssRules","rules","position","setAttribute","SandBox","html","title","type","styles","scripts","onFocus","ref","setWidth","setHeight","isFrameAccessible","current","contentDocument","e","trySandBox","forceRerender","ownerDocument","getAttribute","htmlDoc","documentElement","lang","__html","map","i","toString","src","open","write","close","tryNoForceSandBox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","defaultView","removeEventListener","Math","ceil"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { SandBoxProps } from './types';\n\nconst observeAndResizeJS = function () {\n\tconst { MutationObserver } = window;\n\n\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\treturn;\n\t}\n\n\tfunction sendResize() {\n\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t},\n\t\t\t'*'\n\t\t);\n\t}\n\n\tconst observer = new MutationObserver( sendResize );\n\tobserver.observe( document.body, {\n\t\tattributes: true,\n\t\tattributeOldValue: false,\n\t\tcharacterData: true,\n\t\tcharacterDataOldValue: false,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t} );\n\n\twindow.addEventListener( 'load', sendResize, true );\n\n\t// Hack: Remove viewport unit styles, as these are relative\n\t// the iframe root and interfere with our mechanism for\n\t// determining the unconstrained page bounds.\n\tfunction removeViewportStyles( ruleOrNode: ElementCSSInlineStyle ) {\n\t\tif ( ruleOrNode.style ) {\n\t\t\t(\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ] as const\n\t\t\t ).forEach( function ( style ) {\n\t\t\t\tif (\n\t\t\t\t\t/^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t) {\n\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\tArray.prototype.forEach.call(\n\t\tdocument.querySelectorAll( '[style]' ),\n\t\tremoveViewportStyles\n\t);\n\tArray.prototype.forEach.call(\n\t\tdocument.styleSheets,\n\t\tfunction ( stylesheet ) {\n\t\t\tArray.prototype.forEach.call(\n\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\tremoveViewportStyles\n\t\t\t);\n\t\t}\n\t);\n\n\tdocument.body.style.position = 'absolute';\n\tdocument.body.style.width = '100%';\n\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\tsendResize();\n\n\t// Resize events can change the width of elements with 100% width, but we don't\n\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\twindow.addEventListener( 'resize', sendResize, true );\n};\n\n// TODO: These styles shouldn't be coupled with WordPress.\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\n/**\n * This component provides an isolated environment for arbitrary HTML via iframes.\n *\n * ```jsx\n * import { SandBox } from '@wordpress/components';\n *\n * const MySandBox = () => (\n * \t<SandBox html=\"<p>Content</p>\" title=\"SandBox\" type=\"embed\" />\n * );\n * ```\n */\nfunction SandBox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n}: SandBoxProps ) {\n\tconst ref = useRef< HTMLIFrameElement >();\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ height, setHeight ] = useState( 0 );\n\n\tfunction isFrameAccessible() {\n\t\ttry {\n\t\t\treturn !! ref.current?.contentDocument?.body;\n\t\t} catch ( e ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tfunction trySandBox( forceRerender = false ) {\n\t\tif ( ! isFrameAccessible() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { contentDocument, ownerDocument } =\n\t\t\tref.current as HTMLIFrameElement & {\n\t\t\t\tcontentDocument: Document;\n\t\t\t};\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !==\n\t\t\t\tcontentDocument?.body.getAttribute(\n\t\t\t\t\t'data-resizable-iframe-connected'\n\t\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Put the html snippet into a html document, and then write it to the iframe's document\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html\n\t\t\t\tlang={ ownerDocument.documentElement.lang }\n\t\t\t\tclassName={ type }\n\t\t\t>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: `(${ observeAndResizeJS.toString() })();`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\n\t\t// Writing the document like this makes it act in the same way as if it was\n\t\t// loaded over the network, so DOM creation and mutation, script execution, etc.\n\t\t// all work as expected.\n\t\tcontentDocument.open();\n\t\tcontentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );\n\t\tcontentDocument.close();\n\t}\n\n\tuseEffect( () => {\n\t\ttrySandBox();\n\n\t\tfunction tryNoForceSandBox() {\n\t\t\ttrySandBox( false );\n\t\t}\n\n\t\tfunction checkMessageForResize( event: MessageEvent ) {\n\t\t\tconst iframe = ref.current;\n\n\t\t\t// Verify that the mounted element is the source of the message.\n\t\t\tif ( ! iframe || iframe.contentWindow !== event.source ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\t\tlet data = event.data || {};\n\n\t\t\tif ( 'string' === typeof data ) {\n\t\t\t\ttry {\n\t\t\t\t\tdata = JSON.parse( data );\n\t\t\t\t} catch ( e ) {}\n\t\t\t}\n\n\t\t\t// Update the state only if the message is formatted as we expect,\n\t\t\t// i.e. as an object with a 'resize' action.\n\t\t\tif ( 'resize' !== data.action ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetWidth( data.width );\n\t\t\tsetHeight( data.height );\n\t\t}\n\n\t\tconst iframe = ref.current;\n\t\tconst defaultView = iframe?.ownerDocument?.defaultView;\n\n\t\t// This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n\t\t// after reordering the containing block. See these two issues for more details:\n\t\t// https://github.com/WordPress/gutenberg/issues/6146\n\t\t// https://github.com/facebook/react/issues/18752\n\t\tiframe?.addEventListener( 'load', tryNoForceSandBox, false );\n\t\tdefaultView?.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tiframe?.removeEventListener( 'load', tryNoForceSandBox, false );\n\t\t\tdefaultView?.addEventListener( 'message', checkMessageForResize );\n\t\t};\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandBox();\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ title, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandBox( true );\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, type ] );\n\n\treturn (\n\t\t<iframe\n\t\t\tref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }\n\t\t\ttitle={ title }\n\t\t\tclassName=\"components-sandbox\"\n\t\t\tsandbox=\"allow-scripts allow-same-origin allow-presentation\"\n\t\t\tonFocus={ onFocus }\n\t\t\twidth={ Math.ceil( width ) }\n\t\t\theight={ Math.ceil( height ) }\n\t\t/>\n\t);\n}\n\nexport default SandBox;\n"]}

package/build-module/sandbox/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/sandbox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build-module/slot-fill/bubbles-virtually/fill.js

@@ -16,6 +16,7 @@ function useForceUpdate() {
   const [, setState] = useState({});
   const mounted = useRef(true);
   useEffect(() => {
+    mounted.current = true;
     return () => {
       mounted.current = false;
     };

package/build-module/slot-fill/bubbles-virtually/fill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.js"],"names":["useRef","useState","useEffect","createPortal","useSlot","StyleProvider","useForceUpdate","setState","mounted","current","Fill","name","children","registerFill","unregisterFill","slot","ref","rerender","fillProps","wrappedChildren","ownerDocument"],"mappings":";AAAA;;AACA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,QAAjB,EAA2BC,SAA3B,EAAsCC,YAAtC,QAA0D,oBAA1D;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,aAAP,MAA0B,sBAA1B;;AAEA,SAASC,cAAT,GAA0B;AACzB,QAAM,GAAIC,QAAJ,IAAiBN,QAAQ,CAAE,EAAF,CAA/B;AACA,QAAMO,OAAO,GAAGR,MAAM,CAAE,IAAF,CAAtB;AAEAE,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AACZM,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACA,KAFD;AAGA,GAJQ,EAIN,EAJM,CAAT;AAMA,SAAO,MAAM;AACZ,QAAKD,OAAO,CAACC,OAAb,EAAuB;AACtBF,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAJD;AAKA;;AAED,eAAe,SAASG,IAAT,OAAoC;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgC,OAAGC;AAAnC,MAA4CX,OAAO,CAAEO,IAAF,CAAzD;AACA,QAAMK,GAAG,GAAGhB,MAAM,CAAE;AAAEiB,IAAAA,QAAQ,EAAEX,cAAc;AAA1B,GAAF,CAAlB;AAEAJ,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA;AACAW,IAAAA,YAAY,CAAEG,GAAF,CAAZ;AACA,WAAO,MAAM;AACZF,MAAAA,cAAc,CAAEE,GAAF,CAAd;AACA,KAFD;AAGA,GARQ,EAQN,CAAEH,YAAF,EAAgBC,cAAhB,CARM,CAAT;;AAUA,MAAK,CAAEC,IAAI,CAACC,GAAP,IAAc,CAAED,IAAI,CAACC,GAAL,CAASP,OAA9B,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,MAAK,OAAOG,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEG,IAAI,CAACG,SAAP,CAAnB;AACA,GApBiD,CAsBlD;AACA;AACA;AACA;;;AACA,QAAMC,eAAe,GACpB,cAAC,aAAD;AAAe,IAAA,QAAQ,EAAGJ,IAAI,CAACC,GAAL,CAASP,OAAT,CAAiBW;AAA3C,KACGR,QADH,CADD;AAMA,SAAOT,YAAY,CAAEgB,eAAF,EAAmBJ,IAAI,CAACC,GAAL,CAASP,OAA5B,CAAnB;AACA","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useRef, useState, useEffect, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useSlot from './use-slot';\nimport StyleProvider from '../../style-provider';\n\nfunction useForceUpdate() {\n\tconst [ , setState ] = useState( {} );\n\tconst mounted = useRef( true );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t};\n\t}, [] );\n\n\treturn () => {\n\t\tif ( mounted.current ) {\n\t\t\tsetState( {} );\n\t\t}\n\t};\n}\n\nexport default function Fill( { name, children } ) {\n\tconst { registerFill, unregisterFill, ...slot } = useSlot( name );\n\tconst ref = useRef( { rerender: useForceUpdate() } );\n\n\tuseEffect( () => {\n\t\t// We register fills so we can keep track of their existence.\n\t\t// Some Slot implementations need to know if there're already fills\n\t\t// registered so they can choose to render themselves or not.\n\t\tregisterFill( ref );\n\t\treturn () => {\n\t\t\tunregisterFill( ref );\n\t\t};\n\t}, [ registerFill, unregisterFill ] );\n\n\tif ( ! slot.ref || ! slot.ref.current ) {\n\t\treturn null;\n\t}\n\n\tif ( typeof children === 'function' ) {\n\t\tchildren = children( slot.fillProps );\n\t}\n\n\t// When using a `Fill`, the `children` will be rendered in the document of the\n\t// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`\n\t// to make sure we're referencing the right document/iframe (instead of the\n\t// context of the `Fill`'s parent).\n\tconst wrappedChildren = (\n\t\t<StyleProvider document={ slot.ref.current.ownerDocument }>\n\t\t\t{ children }\n\t\t</StyleProvider>\n\t);\n\n\treturn createPortal( wrappedChildren, slot.ref.current );\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.js"],"names":["useRef","useState","useEffect","createPortal","useSlot","StyleProvider","useForceUpdate","setState","mounted","current","Fill","name","children","registerFill","unregisterFill","slot","ref","rerender","fillProps","wrappedChildren","ownerDocument"],"mappings":";AAAA;;AACA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,QAAjB,EAA2BC,SAA3B,EAAsCC,YAAtC,QAA0D,oBAA1D;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,aAAP,MAA0B,sBAA1B;;AAEA,SAASC,cAAT,GAA0B;AACzB,QAAM,GAAIC,QAAJ,IAAiBN,QAAQ,CAAE,EAAF,CAA/B;AACA,QAAMO,OAAO,GAAGR,MAAM,CAAE,IAAF,CAAtB;AAEAE,EAAAA,SAAS,CAAE,MAAM;AAChBM,IAAAA,OAAO,CAACC,OAAR,GAAkB,IAAlB;AACA,WAAO,MAAM;AACZD,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACA,KAFD;AAGA,GALQ,EAKN,EALM,CAAT;AAOA,SAAO,MAAM;AACZ,QAAKD,OAAO,CAACC,OAAb,EAAuB;AACtBF,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAJD;AAKA;;AAED,eAAe,SAASG,IAAT,OAAoC;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgC,OAAGC;AAAnC,MAA4CX,OAAO,CAAEO,IAAF,CAAzD;AACA,QAAMK,GAAG,GAAGhB,MAAM,CAAE;AAAEiB,IAAAA,QAAQ,EAAEX,cAAc;AAA1B,GAAF,CAAlB;AAEAJ,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA;AACAW,IAAAA,YAAY,CAAEG,GAAF,CAAZ;AACA,WAAO,MAAM;AACZF,MAAAA,cAAc,CAAEE,GAAF,CAAd;AACA,KAFD;AAGA,GARQ,EAQN,CAAEH,YAAF,EAAgBC,cAAhB,CARM,CAAT;;AAUA,MAAK,CAAEC,IAAI,CAACC,GAAP,IAAc,CAAED,IAAI,CAACC,GAAL,CAASP,OAA9B,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,MAAK,OAAOG,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEG,IAAI,CAACG,SAAP,CAAnB;AACA,GApBiD,CAsBlD;AACA;AACA;AACA;;;AACA,QAAMC,eAAe,GACpB,cAAC,aAAD;AAAe,IAAA,QAAQ,EAAGJ,IAAI,CAACC,GAAL,CAASP,OAAT,CAAiBW;AAA3C,KACGR,QADH,CADD;AAMA,SAAOT,YAAY,CAAEgB,eAAF,EAAmBJ,IAAI,CAACC,GAAL,CAASP,OAA5B,CAAnB;AACA","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useRef, useState, useEffect, createPortal } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useSlot from './use-slot';\nimport StyleProvider from '../../style-provider';\n\nfunction useForceUpdate() {\n\tconst [ , setState ] = useState( {} );\n\tconst mounted = useRef( true );\n\n\tuseEffect( () => {\n\t\tmounted.current = true;\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t};\n\t}, [] );\n\n\treturn () => {\n\t\tif ( mounted.current ) {\n\t\t\tsetState( {} );\n\t\t}\n\t};\n}\n\nexport default function Fill( { name, children } ) {\n\tconst { registerFill, unregisterFill, ...slot } = useSlot( name );\n\tconst ref = useRef( { rerender: useForceUpdate() } );\n\n\tuseEffect( () => {\n\t\t// We register fills so we can keep track of their existence.\n\t\t// Some Slot implementations need to know if there're already fills\n\t\t// registered so they can choose to render themselves or not.\n\t\tregisterFill( ref );\n\t\treturn () => {\n\t\t\tunregisterFill( ref );\n\t\t};\n\t}, [ registerFill, unregisterFill ] );\n\n\tif ( ! slot.ref || ! slot.ref.current ) {\n\t\treturn null;\n\t}\n\n\tif ( typeof children === 'function' ) {\n\t\tchildren = children( slot.fillProps );\n\t}\n\n\t// When using a `Fill`, the `children` will be rendered in the document of the\n\t// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`\n\t// to make sure we're referencing the right document/iframe (instead of the\n\t// context of the `Fill`'s parent).\n\tconst wrappedChildren = (\n\t\t<StyleProvider document={ slot.ref.current.ownerDocument }>\n\t\t\t{ children }\n\t\t</StyleProvider>\n\t);\n\n\treturn createPortal( wrappedChildren, slot.ref.current );\n}\n"]}

package/build-module/slot-fill/slot.js

@@ -33,6 +33,7 @@ class SlotComponent extends Component {
     const {
       registerSlot
     } = this.props;
+    this.isUnmounted = false;
     registerSlot(this.props.name, this);
   }
 

package/build-module/slot-fill/slot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/slot-fill/slot.js"],"names":["Children","Component","cloneElement","isEmptyElement","SlotFillContext","isFunction","maybeFunc","SlotComponent","constructor","arguments","isUnmounted","bindNode","bind","componentDidMount","registerSlot","props","name","componentWillUnmount","unregisterSlot","componentDidUpdate","prevProps","node","forceUpdate","render","children","fillProps","getFills","fills","map","fill","fillChildren","child","childIndex","childKey","key","filter","element","Slot"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport {\n\tChildren,\n\tComponent,\n\tcloneElement,\n\tisEmptyElement,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\n\n/**\n * Whether the argument is a function.\n *\n * @param {*} maybeFunc The argument to check.\n * @return {boolean} True if the argument is a function, false otherwise.\n */\nfunction isFunction( maybeFunc ) {\n\treturn typeof maybeFunc === 'function';\n}\n\nclass SlotComponent extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.isUnmounted = false;\n\t\tthis.bindNode = this.bindNode.bind( this );\n\t}\n\n\tcomponentDidMount() {\n\t\tconst { registerSlot } = this.props;\n\n\t\tregisterSlot( this.props.name, this );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tconst { unregisterSlot } = this.props;\n\t\tthis.isUnmounted = true;\n\t\tunregisterSlot( this.props.name, this );\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tconst { name, unregisterSlot, registerSlot } = this.props;\n\n\t\tif ( prevProps.name !== name ) {\n\t\t\tunregisterSlot( prevProps.name );\n\t\t\tregisterSlot( name, this );\n\t\t}\n\t}\n\n\tbindNode( node ) {\n\t\tthis.node = node;\n\t}\n\n\tforceUpdate() {\n\t\tif ( this.isUnmounted ) {\n\t\t\treturn;\n\t\t}\n\t\tsuper.forceUpdate();\n\t}\n\n\trender() {\n\t\tconst { children, name, fillProps = {}, getFills } = this.props;\n\n\t\tconst fills = ( getFills( name, this ) ?? [] )\n\t\t\t.map( ( fill ) => {\n\t\t\t\tconst fillChildren = isFunction( fill.children )\n\t\t\t\t\t? fill.children( fillProps )\n\t\t\t\t\t: fill.children;\n\n\t\t\t\treturn Children.map( fillChildren, ( child, childIndex ) => {\n\t\t\t\t\tif ( ! child || typeof child === 'string' ) {\n\t\t\t\t\t\treturn child;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst childKey = child.key || childIndex;\n\t\t\t\t\treturn cloneElement( child, { key: childKey } );\n\t\t\t\t} );\n\t\t\t} )\n\t\t\t.filter(\n\t\t\t\t// In some cases fills are rendered only when some conditions apply.\n\t\t\t\t// This ensures that we only use non-empty fills when rendering, i.e.,\n\t\t\t\t// it allows us to render wrappers only when the fills are actually present.\n\t\t\t\t( element ) => ! isEmptyElement( element )\n\t\t\t);\n\n\t\treturn <>{ isFunction( children ) ? children( fills ) : fills }</>;\n\t}\n}\n\nconst Slot = ( props ) => (\n\t<SlotFillContext.Consumer>\n\t\t{ ( { registerSlot, unregisterSlot, getFills } ) => (\n\t\t\t<SlotComponent\n\t\t\t\t{ ...props }\n\t\t\t\tregisterSlot={ registerSlot }\n\t\t\t\tunregisterSlot={ unregisterSlot }\n\t\t\t\tgetFills={ getFills }\n\t\t\t/>\n\t\t) }\n\t</SlotFillContext.Consumer>\n);\n\nexport default Slot;\n"]}
+{"version":3,"sources":["@wordpress/components/src/slot-fill/slot.js"],"names":["Children","Component","cloneElement","isEmptyElement","SlotFillContext","isFunction","maybeFunc","SlotComponent","constructor","arguments","isUnmounted","bindNode","bind","componentDidMount","registerSlot","props","name","componentWillUnmount","unregisterSlot","componentDidUpdate","prevProps","node","forceUpdate","render","children","fillProps","getFills","fills","map","fill","fillChildren","child","childIndex","childKey","key","filter","element","Slot"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport {\n\tChildren,\n\tComponent,\n\tcloneElement,\n\tisEmptyElement,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\n\n/**\n * Whether the argument is a function.\n *\n * @param {*} maybeFunc The argument to check.\n * @return {boolean} True if the argument is a function, false otherwise.\n */\nfunction isFunction( maybeFunc ) {\n\treturn typeof maybeFunc === 'function';\n}\n\nclass SlotComponent extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.isUnmounted = false;\n\t\tthis.bindNode = this.bindNode.bind( this );\n\t}\n\n\tcomponentDidMount() {\n\t\tconst { registerSlot } = this.props;\n\t\tthis.isUnmounted = false;\n\t\tregisterSlot( this.props.name, this );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tconst { unregisterSlot } = this.props;\n\t\tthis.isUnmounted = true;\n\t\tunregisterSlot( this.props.name, this );\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tconst { name, unregisterSlot, registerSlot } = this.props;\n\n\t\tif ( prevProps.name !== name ) {\n\t\t\tunregisterSlot( prevProps.name );\n\t\t\tregisterSlot( name, this );\n\t\t}\n\t}\n\n\tbindNode( node ) {\n\t\tthis.node = node;\n\t}\n\n\tforceUpdate() {\n\t\tif ( this.isUnmounted ) {\n\t\t\treturn;\n\t\t}\n\t\tsuper.forceUpdate();\n\t}\n\n\trender() {\n\t\tconst { children, name, fillProps = {}, getFills } = this.props;\n\n\t\tconst fills = ( getFills( name, this ) ?? [] )\n\t\t\t.map( ( fill ) => {\n\t\t\t\tconst fillChildren = isFunction( fill.children )\n\t\t\t\t\t? fill.children( fillProps )\n\t\t\t\t\t: fill.children;\n\n\t\t\t\treturn Children.map( fillChildren, ( child, childIndex ) => {\n\t\t\t\t\tif ( ! child || typeof child === 'string' ) {\n\t\t\t\t\t\treturn child;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst childKey = child.key || childIndex;\n\t\t\t\t\treturn cloneElement( child, { key: childKey } );\n\t\t\t\t} );\n\t\t\t} )\n\t\t\t.filter(\n\t\t\t\t// In some cases fills are rendered only when some conditions apply.\n\t\t\t\t// This ensures that we only use non-empty fills when rendering, i.e.,\n\t\t\t\t// it allows us to render wrappers only when the fills are actually present.\n\t\t\t\t( element ) => ! isEmptyElement( element )\n\t\t\t);\n\n\t\treturn <>{ isFunction( children ) ? children( fills ) : fills }</>;\n\t}\n}\n\nconst Slot = ( props ) => (\n\t<SlotFillContext.Consumer>\n\t\t{ ( { registerSlot, unregisterSlot, getFills } ) => (\n\t\t\t<SlotComponent\n\t\t\t\t{ ...props }\n\t\t\t\tregisterSlot={ registerSlot }\n\t\t\t\tunregisterSlot={ unregisterSlot }\n\t\t\t\tgetFills={ getFills }\n\t\t\t/>\n\t\t) }\n\t</SlotFillContext.Consumer>\n);\n\nexport default Slot;\n"]}

package/build-module/slot-fill/use-slot.js

@@ -3,7 +3,7 @@
 /**
  * WordPress dependencies
  */
-import { useContext, useState, useEffect } from '@wordpress/element';
+import { useContext, useSyncExternalStore } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -21,17 +21,7 @@ const useSlot = name => {
     getSlot,
     subscribe
   } = useContext(SlotFillContext);
-  const [slot, setSlot] = useState(getSlot(name));
-  useEffect(() => {
-    setSlot(getSlot(name));
-    const unsubscribe = subscribe(() => {
-      setSlot(getSlot(name));
-    });
-    return unsubscribe; // Ignore reason: Modifying this dep array could introduce unexpected changes in behavior,
-    // so we'll leave it as=is until the hook can be properly refactored for exhaustive-deps.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [name]);
-  return slot;
+  return useSyncExternalStore(subscribe, () => getSlot(name), () => getSlot(name));
 };
 
 export default useSlot;

package/build-module/slot-fill/use-slot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/slot-fill/use-slot.js"],"names":["useContext","useState","useEffect","SlotFillContext","useSlot","name","getSlot","subscribe","slot","setSlot","unsubscribe"],"mappings":"AAAA;;AACA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,QAArB,EAA+BC,SAA/B,QAAgD,oBAAhD;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,WAA5B;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,OAAO,GAAKC,IAAF,IAAY;AAC3B,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAyBP,UAAU,CAAEG,eAAF,CAAzC;AACA,QAAM,CAAEK,IAAF,EAAQC,OAAR,IAAoBR,QAAQ,CAAEK,OAAO,CAAED,IAAF,CAAT,CAAlC;AAEAH,EAAAA,SAAS,CAAE,MAAM;AAChBO,IAAAA,OAAO,CAAEH,OAAO,CAAED,IAAF,CAAT,CAAP;AACA,UAAMK,WAAW,GAAGH,SAAS,CAAE,MAAM;AACpCE,MAAAA,OAAO,CAAEH,OAAO,CAAED,IAAF,CAAT,CAAP;AACA,KAF4B,CAA7B;AAIA,WAAOK,WAAP,CANgB,CAOhB;AACA;AACA;AACA,GAVQ,EAUN,CAAEL,IAAF,CAVM,CAAT;AAYA,SAAOG,IAAP;AACA,CAjBD;;AAmBA,eAAeJ,OAAf","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useContext, useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\n\n/**\n * React hook returning the active slot given a name.\n *\n * @param {string} name Slot name.\n * @return {Object} Slot object.\n */\nconst useSlot = ( name ) => {\n\tconst { getSlot, subscribe } = useContext( SlotFillContext );\n\tconst [ slot, setSlot ] = useState( getSlot( name ) );\n\n\tuseEffect( () => {\n\t\tsetSlot( getSlot( name ) );\n\t\tconst unsubscribe = subscribe( () => {\n\t\t\tsetSlot( getSlot( name ) );\n\t\t} );\n\n\t\treturn unsubscribe;\n\t\t// Ignore reason: Modifying this dep array could introduce unexpected changes in behavior,\n\t\t// so we'll leave it as=is until the hook can be properly refactored for exhaustive-deps.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ name ] );\n\n\treturn slot;\n};\n\nexport default useSlot;\n"]}
+{"version":3,"sources":["@wordpress/components/src/slot-fill/use-slot.js"],"names":["useContext","useSyncExternalStore","SlotFillContext","useSlot","name","getSlot","subscribe"],"mappings":"AAAA;;AACA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,oBAArB,QAAiD,oBAAjD;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,WAA5B;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,OAAO,GAAKC,IAAF,IAAY;AAC3B,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAyBN,UAAU,CAAEE,eAAF,CAAzC;AACA,SAAOD,oBAAoB,CAC1BK,SAD0B,EAE1B,MAAMD,OAAO,CAAED,IAAF,CAFa,EAG1B,MAAMC,OAAO,CAAED,IAAF,CAHa,CAA3B;AAKA,CAPD;;AASA,eAAeD,OAAf","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useContext, useSyncExternalStore } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\n\n/**\n * React hook returning the active slot given a name.\n *\n * @param {string} name Slot name.\n * @return {Object} Slot object.\n */\nconst useSlot = ( name ) => {\n\tconst { getSlot, subscribe } = useContext( SlotFillContext );\n\treturn useSyncExternalStore(\n\t\tsubscribe,\n\t\t() => getSlot( name ),\n\t\t() => getSlot( name )\n\t);\n};\n\nexport default useSlot;\n"]}

package/build-module/snackbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/snackbar/index.tsx"],"names":["classnames","speak","useEffect","forwardRef","renderToString","__","warning","Button","NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","UnforwardedSnackbar","ref","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","undefined","map","index","label","url","Snackbar"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { NoticeAction, SnackbarProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst NOTICE_TIMEOUT = 10000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param  message    Message to announce.\n * @param  politeness Politeness to announce.\n */\nfunction useSpokenMessage(\n\tmessage: SnackbarProps[ 'spokenMessage' ],\n\tpoliteness: NonNullable< SnackbarProps[ 'politeness' ] >\n) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction UnforwardedSnackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss,\n\t\tlistRef,\n\t}: WordPressComponentProps< SnackbarProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tfunction dismissMe( event: KeyboardEvent | MouseEvent ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef?.current?.focus();\n\n\t\tonDismiss?.();\n\t\tonRemove?.();\n\t}\n\n\tfunction onActionClick(\n\t\tevent: MouseEvent,\n\t\tonClick: NoticeAction[ 'onClick' ]\n\t) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove?.();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss?.();\n\t\t\t\tonRemove?.();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove, explicitDismiss ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\ttabIndex={ 0 }\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ ( event: MouseEvent ) =>\n\t\t\t\t\t\t\t\tonActionClick( event, onClick )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef( UnforwardedSnackbar );\n\nexport default Snackbar;\n"]}
+{"version":3,"sources":["@wordpress/components/src/snackbar/index.tsx"],"names":["classnames","speak","useEffect","forwardRef","renderToString","__","warning","Button","NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","UnforwardedSnackbar","ref","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","undefined","map","index","label","url","Snackbar"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { SnackbarProps } from './types';\nimport type { NoticeAction } from '../notice/types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst NOTICE_TIMEOUT = 10000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param  message    Message to announce.\n * @param  politeness Politeness to announce.\n */\nfunction useSpokenMessage(\n\tmessage: SnackbarProps[ 'spokenMessage' ],\n\tpoliteness: NonNullable< SnackbarProps[ 'politeness' ] >\n) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction UnforwardedSnackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss,\n\t\tlistRef,\n\t}: WordPressComponentProps< SnackbarProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tfunction dismissMe( event: KeyboardEvent | MouseEvent ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef?.current?.focus();\n\n\t\tonDismiss?.();\n\t\tonRemove?.();\n\t}\n\n\tfunction onActionClick(\n\t\tevent: MouseEvent< HTMLButtonElement >,\n\t\tonClick: NoticeAction[ 'onClick' ]\n\t) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove?.();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss?.();\n\t\t\t\tonRemove?.();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove, explicitDismiss ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\ttabIndex={ 0 }\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ (\n\t\t\t\t\t\t\t\tevent: MouseEvent< HTMLButtonElement >\n\t\t\t\t\t\t\t) => onActionClick( event, onClick ) }\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef( UnforwardedSnackbar );\n\nexport default Snackbar;\n"]}

package/build-module/snackbar/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/snackbar/list.tsx"],"names":["classnames","useReducedMotion","useRef","Snackbar","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","SNACKBAR_VARIANTS","init","height","opacity","open","transition","stiffness","velocity","exit","duration","SnackbarList","notices","className","children","onRemove","listRef","isReducedMotion","removeNotice","notice","id","map","content","restNotice","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,GAArB;AACA,SACCC,gBAAgB,IAAIC,MADrB,EAECC,yBAAyB,IAAIC,eAF9B,QAGO,cAHP;AAOA,MAAMC,iBAAiB,GAAG;AACzBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ,GADmB;AAKzBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,MAAM,EAAE,MADH;AAELC,IAAAA,OAAO,EAAE,CAFJ;AAGLE,IAAAA,UAAU,EAAE;AACXH,MAAAA,MAAM,EAAE;AAAEI,QAAAA,SAAS,EAAE,IAAb;AAAmBC,QAAAA,QAAQ,EAAE,CAAC;AAA9B;AADG;AAHP,GALmB;AAYzBC,EAAAA,IAAI,EAAE;AACLL,IAAAA,OAAO,EAAE,CADJ;AAELE,IAAAA,UAAU,EAAE;AACXI,MAAAA,QAAQ,EAAE;AADC;AAFP;AAZmB,CAA1B;AAoBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,YAAT,OAKkD;AAAA,MAL3B;AAC7BC,IAAAA,OAD6B;AAE7BC,IAAAA,SAF6B;AAG7BC,IAAAA,QAH6B;AAI7BC,IAAAA;AAJ6B,GAK2B;AACxD,QAAMC,OAAO,GAAGrB,MAAM,CAA2B,IAA3B,CAAtB;AACA,QAAMsB,eAAe,GAAGvB,gBAAgB,EAAxC;AACAmB,EAAAA,SAAS,GAAGpB,UAAU,CAAE,0BAAF,EAA8BoB,SAA9B,CAAtB;;AACA,QAAMK,YAAY,GAAKC,MAAF,IAAsB,MAAMJ,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,CAAII,MAAM,CAACC,EAAX,CAAzD;;AACA,SACC;AAAK,IAAA,SAAS,EAAGP,SAAjB;AAA6B,IAAA,QAAQ,EAAG,CAAC,CAAzC;AAA6C,IAAA,GAAG,EAAGG;AAAnD,KACGF,QADH,EAEC,cAAC,eAAD,QACGF,OAAO,CAACS,GAAR,CAAeF,MAAF,IAAc;AAC5B,UAAM;AAAEG,MAAAA,OAAF;AAAW,SAAGC;AAAd,QAA6BJ,MAAnC;AAEA,WACC,cAAC,MAAD,CAAQ,GAAR;AACC,MAAA,MAAM,EAAG,CAAEF,eADZ,CAC8B;AAD9B;AAEC,MAAA,OAAO,EAAG,MAFX;AAGC,MAAA,OAAO,EAAG,MAHX;AAIC,MAAA,IAAI,EAAG,MAJR;AAKC,MAAA,GAAG,EAAGE,MAAM,CAACC,EALd;AAMC,MAAA,QAAQ,EACPH,eAAe,GAAGO,SAAH,GAAevB;AAPhC,OAUC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,cAAC,QAAD,eACMsB,UADN;AAEC,MAAA,QAAQ,EAAGL,YAAY,CAAEC,MAAF,CAFxB;AAGC,MAAA,OAAO,EAAGH;AAHX,QAKGG,MAAM,CAACG,OALV,CADD,CAVD,CADD;AAsBA,GAzBC,CADH,CAFD,CADD;AAiCA;AAED,eAAeX,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Snackbar from '.';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\nimport type { Notice, SnackbarListProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst SNACKBAR_VARIANTS = {\n\tinit: {\n\t\theight: 0,\n\t\topacity: 0,\n\t},\n\topen: {\n\t\theight: 'auto',\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\theight: { stiffness: 1000, velocity: -100 },\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.5,\n\t\t},\n\t},\n};\n\n/**\n * Renders a list of notices.\n *\n * ```jsx\n * const MySnackbarListNotice = () => (\n *   <SnackbarList\n *     notices={ notices }\n *     onRemove={ removeNotice }\n *   />\n * );\n * ```\n */\nexport function SnackbarList( {\n\tnotices,\n\tclassName,\n\tchildren,\n\tonRemove,\n}: WordPressComponentProps< SnackbarListProps, 'div' > ) {\n\tconst listRef = useRef< HTMLDivElement | null >( null );\n\tconst isReducedMotion = useReducedMotion();\n\tclassName = classnames( 'components-snackbar-list', className );\n\tconst removeNotice = ( notice: Notice ) => () => onRemove?.( notice.id );\n\treturn (\n\t\t<div className={ className } tabIndex={ -1 } ref={ listRef }>\n\t\t\t{ children }\n\t\t\t<AnimatePresence>\n\t\t\t\t{ notices.map( ( notice ) => {\n\t\t\t\t\tconst { content, ...restNotice } = notice;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tlayout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations\n\t\t\t\t\t\t\tinitial={ 'init' }\n\t\t\t\t\t\t\tanimate={ 'open' }\n\t\t\t\t\t\t\texit={ 'exit' }\n\t\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\t\tvariants={\n\t\t\t\t\t\t\t\tisReducedMotion ? undefined : SNACKBAR_VARIANTS\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"components-snackbar-list__notice-container\">\n\t\t\t\t\t\t\t\t<Snackbar\n\t\t\t\t\t\t\t\t\t{ ...restNotice }\n\t\t\t\t\t\t\t\t\tonRemove={ removeNotice( notice ) }\n\t\t\t\t\t\t\t\t\tlistRef={ listRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ notice.content }\n\t\t\t\t\t\t\t\t</Snackbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n\nexport default SnackbarList;\n"]}
+{"version":3,"sources":["@wordpress/components/src/snackbar/list.tsx"],"names":["classnames","useReducedMotion","useRef","Snackbar","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","SNACKBAR_VARIANTS","init","height","opacity","open","transition","stiffness","velocity","exit","duration","SnackbarList","notices","className","children","onRemove","listRef","isReducedMotion","removeNotice","notice","id","map","content","restNotice","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,GAArB;AACA,SACCC,gBAAgB,IAAIC,MADrB,EAECC,yBAAyB,IAAIC,eAF9B,QAGO,cAHP;AAOA,MAAMC,iBAAiB,GAAG;AACzBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ,GADmB;AAKzBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,MAAM,EAAE,MADH;AAELC,IAAAA,OAAO,EAAE,CAFJ;AAGLE,IAAAA,UAAU,EAAE;AACXH,MAAAA,MAAM,EAAE;AAAEI,QAAAA,SAAS,EAAE,IAAb;AAAmBC,QAAAA,QAAQ,EAAE,CAAC;AAA9B;AADG;AAHP,GALmB;AAYzBC,EAAAA,IAAI,EAAE;AACLL,IAAAA,OAAO,EAAE,CADJ;AAELE,IAAAA,UAAU,EAAE;AACXI,MAAAA,QAAQ,EAAE;AADC;AAFP;AAZmB,CAA1B;AAoBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,YAAT,OAKkD;AAAA,MAL3B;AAC7BC,IAAAA,OAD6B;AAE7BC,IAAAA,SAF6B;AAG7BC,IAAAA,QAH6B;AAI7BC,IAAAA;AAJ6B,GAK2B;AACxD,QAAMC,OAAO,GAAGrB,MAAM,CAA2B,IAA3B,CAAtB;AACA,QAAMsB,eAAe,GAAGvB,gBAAgB,EAAxC;AACAmB,EAAAA,SAAS,GAAGpB,UAAU,CAAE,0BAAF,EAA8BoB,SAA9B,CAAtB;;AACA,QAAMK,YAAY,GACfC,MAAF,IAAwD,MACvDJ,QADuD,aACvDA,QADuD,uBACvDA,QAAQ,CAAII,MAAM,CAACC,EAAX,CAFV;;AAGA,SACC;AAAK,IAAA,SAAS,EAAGP,SAAjB;AAA6B,IAAA,QAAQ,EAAG,CAAC,CAAzC;AAA6C,IAAA,GAAG,EAAGG;AAAnD,KACGF,QADH,EAEC,cAAC,eAAD,QACGF,OAAO,CAACS,GAAR,CAAeF,MAAF,IAAc;AAC5B,UAAM;AAAEG,MAAAA,OAAF;AAAW,SAAGC;AAAd,QAA6BJ,MAAnC;AAEA,WACC,cAAC,MAAD,CAAQ,GAAR;AACC,MAAA,MAAM,EAAG,CAAEF,eADZ,CAC8B;AAD9B;AAEC,MAAA,OAAO,EAAG,MAFX;AAGC,MAAA,OAAO,EAAG,MAHX;AAIC,MAAA,IAAI,EAAG,MAJR;AAKC,MAAA,GAAG,EAAGE,MAAM,CAACC,EALd;AAMC,MAAA,QAAQ,EACPH,eAAe,GAAGO,SAAH,GAAevB;AAPhC,OAUC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,cAAC,QAAD,eACMsB,UADN;AAEC,MAAA,QAAQ,EAAGL,YAAY,CAAEC,MAAF,CAFxB;AAGC,MAAA,OAAO,EAAGH;AAHX,QAKGG,MAAM,CAACG,OALV,CADD,CAVD,CADD;AAsBA,GAzBC,CADH,CAFD,CADD;AAiCA;AAED,eAAeX,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Snackbar from '.';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\nimport type { SnackbarListProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst SNACKBAR_VARIANTS = {\n\tinit: {\n\t\theight: 0,\n\t\topacity: 0,\n\t},\n\topen: {\n\t\theight: 'auto',\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\theight: { stiffness: 1000, velocity: -100 },\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.5,\n\t\t},\n\t},\n};\n\n/**\n * Renders a list of notices.\n *\n * ```jsx\n * const MySnackbarListNotice = () => (\n *   <SnackbarList\n *     notices={ notices }\n *     onRemove={ removeNotice }\n *   />\n * );\n * ```\n */\nexport function SnackbarList( {\n\tnotices,\n\tclassName,\n\tchildren,\n\tonRemove,\n}: WordPressComponentProps< SnackbarListProps, 'div' > ) {\n\tconst listRef = useRef< HTMLDivElement | null >( null );\n\tconst isReducedMotion = useReducedMotion();\n\tclassName = classnames( 'components-snackbar-list', className );\n\tconst removeNotice =\n\t\t( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>\n\t\t\tonRemove?.( notice.id );\n\treturn (\n\t\t<div className={ className } tabIndex={ -1 } ref={ listRef }>\n\t\t\t{ children }\n\t\t\t<AnimatePresence>\n\t\t\t\t{ notices.map( ( notice ) => {\n\t\t\t\t\tconst { content, ...restNotice } = notice;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tlayout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations\n\t\t\t\t\t\t\tinitial={ 'init' }\n\t\t\t\t\t\t\tanimate={ 'open' }\n\t\t\t\t\t\t\texit={ 'exit' }\n\t\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\t\tvariants={\n\t\t\t\t\t\t\t\tisReducedMotion ? undefined : SNACKBAR_VARIANTS\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"components-snackbar-list__notice-container\">\n\t\t\t\t\t\t\t\t<Snackbar\n\t\t\t\t\t\t\t\t\t{ ...restNotice }\n\t\t\t\t\t\t\t\t\tonRemove={ removeNotice( notice ) }\n\t\t\t\t\t\t\t\t\tlistRef={ listRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ notice.content }\n\t\t\t\t\t\t\t\t</Snackbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n\nexport default SnackbarList;\n"]}

package/build-module/tab-panel/index.js

@@ -21,17 +21,16 @@ import Button from '../button';
 const TabButton = _ref => {
   let {
     tabId,
-    onClick,
     children,
     selected,
     ...rest
   } = _ref;
   return createElement(Button, _extends({
     role: "tab",
-    tabIndex: selected ? null : -1,
+    tabIndex: selected ? undefined : -1,
     "aria-selected": selected,
     id: tabId,
-    onClick: onClick
+    __experimentalIsFocusable: true
   }, rest), children);
 };
 /**
@@ -103,12 +102,45 @@ export function TabPanel(_ref2) {
     } = _ref3;
     return name === selected;
   });
-  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`;
+  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`; // Handle selecting the initial tab.
+
+  useEffect(() => {
+    // If there's a selected tab, don't override it.
+    if (selectedTab) {
+      return;
+    }
+
+    const initialTab = tabs.find(tab => tab.name === initialTabName); // Wait for the denoted initial tab to be declared before making a
+    // selection. This ensures that if a tab is declared lazily it can
+    // still receive initial selection.
+
+    if (initialTabName && !initialTab) {
+      return;
+    }
+
+    if (initialTab && !initialTab.disabled) {
+      // Select the initial tab if it's not disabled.
+      handleTabSelection(initialTab.name);
+    } else {
+      // Fallback to the first enabled tab when the initial is disabled.
+      const firstEnabledTab = tabs.find(tab => !tab.disabled);
+      if (firstEnabledTab) handleTabSelection(firstEnabledTab.name);
+    }
+  }, [tabs, selectedTab, initialTabName, handleTabSelection]); // Handle the currently selected tab becoming disabled.
+
   useEffect(() => {
-    if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.name) && tabs.length > 0) {
-      handleTabSelection(initialTabName || tabs[0].name);
+    // This effect only runs when the selected tab is defined and becomes disabled.
+    if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.disabled)) {
+      return;
+    }
+
+    const firstEnabledTab = tabs.find(tab => !tab.disabled); // If the currently selected tab becomes disabled, select the first enabled tab.
+    // (if there is one).
+
+    if (firstEnabledTab) {
+      handleTabSelection(firstEnabledTab.name);
     }
-  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, initialTabName, handleTabSelection]);
+  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.disabled, handleTabSelection]);
   return createElement("div", {
     className: className
   }, createElement(NavigableMenu, {
@@ -125,6 +157,7 @@ export function TabPanel(_ref2) {
     selected: tab.name === selected,
     key: tab.name,
     onClick: () => handleTabSelection(tab.name),
+    disabled: tab.disabled,
     label: tab.icon && tab.title,
     icon: tab.icon,
     showTooltip: !!tab.icon

package/build-module/tab-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","useState","useEffect","useCallback","useInstanceId","NavigableMenu","Button","TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","length","undefined","map","tab","icon","title"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,WAA9B,QAAiD,oBAAjD;AACA,SAASC,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,wBAA9B;AACA,OAAOC,MAAP,MAAmB,WAAnB;;AAIA,MAAMC,SAAS,GAAG;AAAA,MAAE;AACnBC,IAAAA,KADmB;AAEnBC,IAAAA,OAFmB;AAGnBC,IAAAA,QAHmB;AAInBC,IAAAA,QAJmB;AAKnB,OAAGC;AALgB,GAAF;AAAA,SAOjB,cAAC,MAAD;AACC,IAAA,IAAI,EAAC,KADN;AAEC,IAAA,QAAQ,EAAGD,QAAQ,GAAG,IAAH,GAAU,CAAC,CAF/B;AAGC,qBAAgBA,QAHjB;AAIC,IAAA,EAAE,EAAGH,KAJN;AAKC,IAAA,OAAO,EAAGC;AALX,KAMMG,IANN,GAQGF,QARH,CAPiB;AAAA,CAAlB;AAmBA;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;AACA;AACA;;;AACA,OAAO,SAASG,QAAT,QASqD;AAAA;;AAAA,MATlC;AACzBC,IAAAA,SADyB;AAEzBJ,IAAAA,QAFyB;AAGzBK,IAAAA,IAHyB;AAIzBC,IAAAA,YAAY,GAAG,IAJU;AAKzBC,IAAAA,cALyB;AAMzBC,IAAAA,WAAW,GAAG,YANW;AAOzBC,IAAAA,WAAW,GAAG,WAPW;AAQzBC,IAAAA;AARyB,GASkC;AAC3D,QAAMC,UAAU,GAAGjB,aAAa,CAAES,QAAF,EAAY,WAAZ,CAAhC;AACA,QAAM,CAAEF,QAAF,EAAYW,WAAZ,IAA4BrB,QAAQ,EAA1C;AAEA,QAAMsB,kBAAkB,GAAGpB,WAAW,CACnCqB,MAAF,IAAsB;AACrBF,IAAAA,WAAW,CAAEE,MAAF,CAAX;AACAJ,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAII,MAAJ,CAAR;AACA,GAJoC,EAKrC,CAAEJ,QAAF,CALqC,CAAtC,CAJ2D,CAY3D;AACA;;AACA,QAAMK,wBAAwB,GAAG,CAChCC,WADgC,EAEhCC,KAFgC,KAG5B;AACJA,IAAAA,KAAK,CAACC,KAAN;AACA,GALD;;AAMA,QAAMC,WAAW,GAAGd,IAAI,CAACe,IAAL,CAAW;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAgBA,IAAI,KAAKpB,QAAzB;AAAA,GAAX,CAApB;AACA,QAAMqB,UAAU,GAAI,GAAGX,UAAY,IAAhB,qBAAoBQ,WAApB,aAAoBA,WAApB,uBAAoBA,WAAW,CAAEE,IAAjC,iEAAyC,MAAQ,EAApE;AAEA7B,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,EAAE2B,WAAF,aAAEA,WAAF,eAAEA,WAAW,CAAEE,IAAf,KAAuBhB,IAAI,CAACkB,MAAL,GAAc,CAA1C,EAA8C;AAC7CV,MAAAA,kBAAkB,CAAEN,cAAc,IAAIF,IAAI,CAAE,CAAF,CAAJ,CAAUgB,IAA9B,CAAlB;AACA;AACD,GAJQ,EAIN,CAAEhB,IAAF,EAAQc,WAAR,aAAQA,WAAR,uBAAQA,WAAW,CAAEE,IAArB,EAA2Bd,cAA3B,EAA2CM,kBAA3C,CAJM,CAAT;AAMA,SACC;AAAK,IAAA,SAAS,EAAGT;AAAjB,KACC,cAAC,aAAD;AACC,IAAA,IAAI,EAAC,SADN;AAEC,IAAA,WAAW,EAAGI,WAFf;AAGC,IAAA,UAAU,EACTF,YAAY,GAAGS,wBAAH,GAA8BS,SAJ5C;AAMC,IAAA,SAAS,EAAC;AANX,KAQGnB,IAAI,CAACoB,GAAL,CAAYC,GAAF,IACX,cAAC,SAAD;AACC,IAAA,SAAS,EAAGpC,UAAU,CACrB,iCADqB,EAErBoC,GAAG,CAACtB,SAFiB,EAGrB;AACC,OAAEK,WAAF,GAAiBiB,GAAG,CAACL,IAAJ,KAAapB;AAD/B,KAHqB,CADvB;AAQC,IAAA,KAAK,EAAI,GAAGU,UAAY,IAAIe,GAAG,CAACL,IAAM,EARvC;AASC,qBAAiB,GAAGV,UAAY,IAAIe,GAAG,CAACL,IAAM,OAT/C;AAUC,IAAA,QAAQ,EAAGK,GAAG,CAACL,IAAJ,KAAapB,QAVzB;AAWC,IAAA,GAAG,EAAGyB,GAAG,CAACL,IAXX;AAYC,IAAA,OAAO,EAAG,MAAMR,kBAAkB,CAAEa,GAAG,CAACL,IAAN,CAZnC;AAaC,IAAA,KAAK,EAAGK,GAAG,CAACC,IAAJ,IAAYD,GAAG,CAACE,KAbzB;AAcC,IAAA,IAAI,EAAGF,GAAG,CAACC,IAdZ;AAeC,IAAA,WAAW,EAAG,CAAC,CAAED,GAAG,CAACC;AAftB,KAiBG,CAAED,GAAG,CAACC,IAAN,IAAcD,GAAG,CAACE,KAjBrB,CADC,CARH,CADD,EA+BGT,WAAW,IACZ;AACC,IAAA,GAAG,EAAGG,UADP;AAEC,uBAAkBA,UAFnB;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,EAAE,EAAI,GAAGA,UAAY,OAJtB;AAKC,IAAA,SAAS,EAAC;AALX,KAOGtB,QAAQ,CAAEmB,WAAF,CAPX,CAhCF,CADD;AA6CA;AAED,eAAehB,QAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLButtonElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = tabs.find( ( { name } ) => name === selected );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tif ( ! selectedTab?.name && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","useState","useEffect","useCallback","useInstanceId","NavigableMenu","Button","TabButton","tabId","children","selected","rest","undefined","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","initialTab","tab","disabled","firstEnabledTab","map","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? undefined : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\t__experimentalIsFocusable\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLButtonElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = tabs.find( ( { name } ) => name === selected );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\t// Handle selecting the initial tab.\n\tuseEffect( () => {\n\t\t// If there's a selected tab, don't override it.\n\t\tif ( selectedTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst initialTab = tabs.find( ( tab ) => tab.name === initialTabName );\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection.\n\t\tif ( initialTabName && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( initialTab && ! initialTab.disabled ) {\n\t\t\t// Select the initial tab if it's not disabled.\n\t\t\thandleTabSelection( initialTab.name );\n\t\t} else {\n\t\t\t// Fallback to the first enabled tab when the initial is disabled.\n\t\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\t\tif ( firstEnabledTab ) handleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab, initialTabName, handleTabSelection ] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseEffect( () => {\n\t\t// This effect only runs when the selected tab is defined and becomes disabled.\n\t\tif ( ! selectedTab?.disabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\n\t\t// If the currently selected tab becomes disabled, select the first enabled tab.\n\t\t// (if there is one).\n\t\tif ( firstEnabledTab ) {\n\t\t\thandleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab?.disabled, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tdisabled={ tab.disabled }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}