@wordpress/components 21.2.0 → 21.3.0

package/build/sandbox/index.native.js

@@ -28,67 +28,68 @@ var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * Internal dependencies
  */
-const observeAndResizeJS = `
-	( function() {
-		var observer;
-
-		if ( ! window.MutationObserver || ! document.body || ! window.parent ) {
-			return;
-		}
-
-		function sendResize() {
-			var clientBoundingRect = document.body.getBoundingClientRect();
-
-			// The function postMessage is exposed by the react-native-webview library
-			// to communicate between React Native and the WebView, in this case,
-			// we use it for notifying resize changes.
-            window.ReactNativeWebView.postMessage(JSON.stringify( {
-                action: 'resize',
-				width: clientBoundingRect.width,
-				height: clientBoundingRect.height,
-            }));
-		}
-
-		observer = new MutationObserver( sendResize );
-		observer.observe( document.body, {
-			attributes: true,
-			attributeOldValue: false,
-			characterData: true,
-			characterDataOldValue: false,
-			childList: true,
-			subtree: true
-		} );
-
-		window.addEventListener( 'load', sendResize, true );
-
-		// Hack: Remove viewport unit styles, as these are relative
-		// the iframe root and interfere with our mechanism for
-		// determining the unconstrained page bounds.
-		function removeViewportStyles( ruleOrNode ) {
-			if( ruleOrNode.style ) {
-				[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {
-					if ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {
-						ruleOrNode.style[ style ] = '';
-					}
-				} );
-			}
-		}
-
-		Array.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );
-		Array.prototype.forEach.call( document.styleSheets, function( stylesheet ) {
-			Array.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );
-		} );
-
-		document.body.style.position = 'absolute';
-		document.body.style.width = '100%';
-		document.body.setAttribute( 'data-resizable-iframe-connected', '' );
-
-		sendResize();
-
-		// Resize events can change the width of elements with 100% width, but we don't
-		// get an DOM mutations for that, so do the resize when the window is resized, too.
-		window.addEventListener( 'resize', sendResize, true );
-} )();`;
+const observeAndResizeJS = function () {
+  // Hermes requires a special directive to preserve the original source code
+  // when using `Function.prototype.toString()` below.
+  // https://github.com/facebook/hermes/issues/114#issuecomment-887106990
+  'show source';
+
+  const {
+    MutationObserver
+  } = window;
+
+  if (!MutationObserver || !document.body || !window.parent) {
+    return;
+  }
+
+  function sendResize() {
+    const clientBoundingRect = document.body.getBoundingClientRect(); // The function postMessage is exposed by the react-native-webview library
+    // to communicate between React Native and the WebView, in this case,
+    // we use it for notifying resize changes.
+
+    window.ReactNativeWebView.postMessage(JSON.stringify({
+      action: 'resize',
+      width: clientBoundingRect.width,
+      height: clientBoundingRect.height
+    }));
+  }
+
+  const observer = new MutationObserver(sendResize);
+  observer.observe(document.body, {
+    attributes: true,
+    attributeOldValue: false,
+    characterData: true,
+    characterDataOldValue: false,
+    childList: true,
+    subtree: true
+  });
+  window.addEventListener('load', sendResize, true); // Hack: Remove viewport unit styles, as these are relative
+  // the iframe root and interfere with our mechanism for
+  // determining the unconstrained page bounds.
+
+  function removeViewportStyles(ruleOrNode) {
+    if (ruleOrNode.style) {
+      ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) {
+        if (/^\\d+(vmin|vmax|vh|vw)$/.test(ruleOrNode.style[style])) {
+          ruleOrNode.style[style] = '';
+        }
+      });
+    }
+  }
+
+  Array.prototype.forEach.call(document.querySelectorAll('[style]'), removeViewportStyles);
+  Array.prototype.forEach.call(document.styleSheets, function (stylesheet) {
+    Array.prototype.forEach.call(stylesheet.cssRules || stylesheet.rules, removeViewportStyles);
+  });
+  document.body.style.position = 'absolute';
+  document.body.style.width = '100%';
+  document.body.setAttribute('data-resizable-iframe-connected', '');
+  sendResize(); // Resize events can change the width of elements with 100% width, but we don't
+  // get an DOM mutations for that, so do the resize when the window is resized, too.
+
+  window.addEventListener('resize', sendResize, true);
+};
+
 const style = `
 	body {
 		margin: 0;
@@ -217,7 +218,7 @@ function Sandbox(_ref) {
     }), (0, _element.createElement)("script", {
       type: "text/javascript",
       dangerouslySetInnerHTML: {
-        __html: customJS || observeAndResizeJS
+        __html: customJS || `(${observeAndResizeJS.toString()})();`
       }
     }), scripts.map(src => (0, _element.createElement)("script", {
       key: src,

package/build/sandbox/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","colorScheme","ref","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","key","Platform","select","android","ios","htmlDoc","__html","map","rules","i","src","updateContentHtml","forceRerender","newContentHtml","setImmediate","checkMessageForResize","event","data","nativeEvent","JSON","parse","e","action","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","dimensionsChangeSubscription","addEventListener","remove","current","sandboxStyles","baseUrl","isAndroid","workaroundStyles","webView","StyleSheet","create","opacity"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAaA;;AAKA;;AAtBA;AACA;AACA;;AAIA;AACA;AACA;;AAWA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAI;AAC5B;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OA5DA;AA8DA,MAAMC,KAAK,GAAI;AACf;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;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,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,OAAT,OAWI;AAAA,MAXc;AACjBC,IAAAA,cADiB;AAEjBC,IAAAA,QAFiB;AAGjBC,IAAAA,IAAI,GAAG,EAHU;AAIjBC,IAAAA,IAAI,GAAG,IAJU;AAKjBC,IAAAA,WAAW,GAAG,EALG;AAMjBC,IAAAA,OAAO,GAAGP,WANO;AAOjBQ,IAAAA,MAAM,GAAGR,WAPQ;AAQjBS,IAAAA,KAAK,GAAG,EARS;AASjBC,IAAAA,IATiB;AAUjBC,IAAAA;AAViB,GAWd;AACH,QAAMC,WAAW,GAAG,uCAApB;AACA,QAAMC,GAAG,GAAG,sBAAZ;AACA,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,CAAV,CAA9B;AACA,QAAM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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tPlatform,\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n            window.ReactNativeWebView.postMessage(JSON.stringify( {\n                action: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n            }));\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\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\tbody > div iframe {\n\t\twidth: 100%;\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\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nfunction Sandbox( {\n\tcontainerStyle,\n\tcustomJS,\n\thtml = '',\n\tlang = 'en',\n\tproviderUrl = '',\n\tscripts = EMPTY_ARRAY,\n\tstyles = EMPTY_ARRAY,\n\ttitle = '',\n\ttype,\n\turl,\n} ) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst ref = useRef();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\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 lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent=\"width=device-width, initial-scale=1\"\n\t\t\t\t\t></meta>\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: customJS || observeAndResizeJS,\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\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction checkMessageForResize( event ) {\n\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\tlet data = event.nativeEvent.data || {};\n\n\t\tif ( 'string' === typeof data ) {\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {}\n\t\t}\n\n\t\t// Update the state only if the message is formatted as we expect,\n\t\t// i.e. as an object with a 'resize' action.\n\t\tif ( 'resize' !== data.action ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetHeight( data.height );\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t\tPlatform.isAndroid && workaroundStyles.webView,\n\t\t\t] }\n\t\t\tonMessage={ checkMessageForResize }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t/>\n\t);\n}\n\nconst workaroundStyles = StyleSheet.create( {\n\twebView: {\n\t\t/**\n\t\t * The slight opacity below is a workaround for an Android crash caused from combining Android\n\t\t * 12's new scroll overflow behavior and webviews.\n\t\t * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253\n\t\t */\n\t\topacity: 0.99,\n\t},\n} );\n\nexport default memo( Sandbox );\n"]}
+{"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","MutationObserver","window","document","body","parent","sendResize","clientBoundingRect","getBoundingClientRect","ReactNativeWebView","postMessage","JSON","stringify","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","EMPTY_ARRAY","Sandbox","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","colorScheme","ref","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","wasLandscape","key","Platform","select","android","ios","htmlDoc","__html","map","i","toString","src","updateContentHtml","forceRerender","newContentHtml","setImmediate","checkMessageForResize","event","data","nativeEvent","parse","e","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","dimensionsChangeSubscription","remove","current","sandboxStyles","baseUrl","isAndroid","workaroundStyles","webView","StyleSheet","create","opacity"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tPlatform,\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = function () {\n\t// Hermes requires a special directive to preserve the original source code\n\t// when using `Function.prototype.toString()` below.\n\t// https://github.com/facebook/hermes/issues/114#issuecomment-887106990\n\t'show source';\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\t// The function postMessage is exposed by the react-native-webview library\n\t\t// to communicate between React Native and the WebView, in this case,\n\t\t// we use it for notifying resize changes.\n\t\twindow.ReactNativeWebView.postMessage(\n\t\t\tJSON.stringify( {\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);\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\tbody > div iframe {\n\t\twidth: 100%;\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\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nfunction Sandbox( {\n\tcontainerStyle,\n\tcustomJS,\n\thtml = '',\n\tlang = 'en',\n\tproviderUrl = '',\n\tscripts = EMPTY_ARRAY,\n\tstyles = EMPTY_ARRAY,\n\ttitle = '',\n\ttype,\n\turl,\n} ) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst ref = useRef();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\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 lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent=\"width=device-width, initial-scale=1\"\n\t\t\t\t\t></meta>\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:\n\t\t\t\t\t\t\t\tcustomJS ||\n\t\t\t\t\t\t\t\t`(${ 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\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction checkMessageForResize( event ) {\n\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\tlet data = event.nativeEvent.data || {};\n\n\t\tif ( 'string' === typeof data ) {\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {}\n\t\t}\n\n\t\t// Update the state only if the message is formatted as we expect,\n\t\t// i.e. as an object with a 'resize' action.\n\t\tif ( 'resize' !== data.action ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetHeight( data.height );\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t\tPlatform.isAndroid && workaroundStyles.webView,\n\t\t\t] }\n\t\t\tonMessage={ checkMessageForResize }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t/>\n\t);\n}\n\nconst workaroundStyles = StyleSheet.create( {\n\twebView: {\n\t\t/**\n\t\t * The slight opacity below is a workaround for an Android crash caused from combining Android\n\t\t * 12's new scroll overflow behavior and webviews.\n\t\t * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253\n\t\t */\n\t\topacity: 0.99,\n\t},\n} );\n\nexport default memo( Sandbox );\n"]}

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

@@ -71,7 +71,7 @@ function useSlotRegistry() {
   }, []);
   const unregisterFill = (0, _element.useCallback)((name, ref) => {
     if (fills.current.get(name)) {
-      fills.current.set(name, fills.current.get(name).filter(fillRef => fillRef !== ref));
+      fills.current.set(name, (0, _valtio.ref)(fills.current.get(name).filter(fillRef => fillRef !== ref)));
     }
   }, []); // Memoizing the return value so it can be directly passed to Provider value
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js"],"names":["useSlotRegistry","slots","fills","registerSlot","name","ref","fillProps","slot","current","get","set","unregisterSlot","delete","updateSlot","slotFills","map","fill","rerender","registerFill","unregisterFill","filter","fillRef","registry","SlotFillProvider","children"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { ref as valRef } from 'valtio';\nimport { proxyMap } from 'valtio/utils';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback, useRef } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nfunction useSlotRegistry() {\n\tconst slots = useRef( proxyMap() );\n\tconst fills = useRef( proxyMap() );\n\n\tconst registerSlot = useCallback( ( name, ref, fillProps ) => {\n\t\tconst slot = slots.current.get( name ) || {};\n\t\tslots.current.set(\n\t\t\tname,\n\t\t\tvalRef( {\n\t\t\t\t...slot,\n\t\t\t\tref: ref || slot.ref,\n\t\t\t\tfillProps: fillProps || slot.fillProps || {},\n\t\t\t} )\n\t\t);\n\t}, [] );\n\n\tconst unregisterSlot = useCallback( ( name, ref ) => {\n\t\t// Make sure we're not unregistering a slot registered by another element\n\t\t// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412\n\t\tif ( slots.current.get( name )?.ref === ref ) {\n\t\t\tslots.current.delete( name );\n\t\t}\n\t}, [] );\n\n\tconst updateSlot = useCallback( ( name, fillProps ) => {\n\t\tconst slot = slots.current.get( name );\n\t\tif ( ! slot ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! isShallowEqual( slot.fillProps, fillProps ) ) {\n\t\t\tslot.fillProps = fillProps;\n\t\t\tconst slotFills = fills.current.get( name );\n\t\t\tif ( slotFills ) {\n\t\t\t\t// Force update fills.\n\t\t\t\tslotFills.map( ( fill ) => fill.current.rerender() );\n\t\t\t}\n\t\t}\n\t}, [] );\n\n\tconst registerFill = useCallback( ( name, ref ) => {\n\t\tfills.current.set(\n\t\t\tname,\n\t\t\tvalRef( [ ...( fills.current.get( name ) || [] ), ref ] )\n\t\t);\n\t}, [] );\n\n\tconst unregisterFill = useCallback( ( name, ref ) => {\n\t\tif ( fills.current.get( name ) ) {\n\t\t\tfills.current.set(\n\t\t\t\tname,\n\t\t\t\tfills.current\n\t\t\t\t\t.get( name )\n\t\t\t\t\t.filter( ( fillRef ) => fillRef !== ref )\n\t\t\t);\n\t\t}\n\t}, [] );\n\n\t// Memoizing the return value so it can be directly passed to Provider value\n\tconst registry = useMemo(\n\t\t() => ( {\n\t\t\tslots: slots.current,\n\t\t\tfills: fills.current,\n\t\t\tregisterSlot,\n\t\t\tupdateSlot,\n\t\t\tunregisterSlot,\n\t\t\tregisterFill,\n\t\t\tunregisterFill,\n\t\t} ),\n\t\t[\n\t\t\tregisterSlot,\n\t\t\tupdateSlot,\n\t\t\tunregisterSlot,\n\t\t\tregisterFill,\n\t\t\tunregisterFill,\n\t\t]\n\t);\n\n\treturn registry;\n}\n\nexport default function SlotFillProvider( { children } ) {\n\tconst registry = useSlotRegistry();\n\treturn (\n\t\t<SlotFillContext.Provider value={ registry }>\n\t\t\t{ children }\n\t\t</SlotFillContext.Provider>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js"],"names":["useSlotRegistry","slots","fills","registerSlot","name","ref","fillProps","slot","current","get","set","unregisterSlot","delete","updateSlot","slotFills","map","fill","rerender","registerFill","unregisterFill","filter","fillRef","registry","SlotFillProvider","children"],"mappings":";;;;;;;;;AAUA;;AANA;;AACA;;AAMA;;AAKA;;AAhBA;;AACA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,eAAT,GAA2B;AAC1B,QAAMC,KAAK,GAAG,qBAAQ,sBAAR,CAAd;AACA,QAAMC,KAAK,GAAG,qBAAQ,sBAAR,CAAd;AAEA,QAAMC,YAAY,GAAG,0BAAa,CAAEC,IAAF,EAAQC,GAAR,EAAaC,SAAb,KAA4B;AAC7D,UAAMC,IAAI,GAAGN,KAAK,CAACO,OAAN,CAAcC,GAAd,CAAmBL,IAAnB,KAA6B,EAA1C;AACAH,IAAAA,KAAK,CAACO,OAAN,CAAcE,GAAd,CACCN,IADD,EAEC,iBAAQ,EACP,GAAGG,IADI;AAEPF,MAAAA,GAAG,EAAEA,GAAG,IAAIE,IAAI,CAACF,GAFV;AAGPC,MAAAA,SAAS,EAAEA,SAAS,IAAIC,IAAI,CAACD,SAAlB,IAA+B;AAHnC,KAAR,CAFD;AAQA,GAVoB,EAUlB,EAVkB,CAArB;AAYA,QAAMK,cAAc,GAAG,0BAAa,CAAEP,IAAF,EAAQC,GAAR,KAAiB;AAAA;;AACpD;AACA;AACA,QAAK,uBAAAJ,KAAK,CAACO,OAAN,CAAcC,GAAd,CAAmBL,IAAnB,2EAA2BC,GAA3B,MAAmCA,GAAxC,EAA8C;AAC7CJ,MAAAA,KAAK,CAACO,OAAN,CAAcI,MAAd,CAAsBR,IAAtB;AACA;AACD,GANsB,EAMpB,EANoB,CAAvB;AAQA,QAAMS,UAAU,GAAG,0BAAa,CAAET,IAAF,EAAQE,SAAR,KAAuB;AACtD,UAAMC,IAAI,GAAGN,KAAK,CAACO,OAAN,CAAcC,GAAd,CAAmBL,IAAnB,CAAb;;AACA,QAAK,CAAEG,IAAP,EAAc;AACb;AACA;;AAED,QAAK,CAAE,6BAAgBA,IAAI,CAACD,SAArB,EAAgCA,SAAhC,CAAP,EAAqD;AACpDC,MAAAA,IAAI,CAACD,SAAL,GAAiBA,SAAjB;AACA,YAAMQ,SAAS,GAAGZ,KAAK,CAACM,OAAN,CAAcC,GAAd,CAAmBL,IAAnB,CAAlB;;AACA,UAAKU,SAAL,EAAiB;AAChB;AACAA,QAAAA,SAAS,CAACC,GAAV,CAAiBC,IAAF,IAAYA,IAAI,CAACR,OAAL,CAAaS,QAAb,EAA3B;AACA;AACD;AACD,GAdkB,EAchB,EAdgB,CAAnB;AAgBA,QAAMC,YAAY,GAAG,0BAAa,CAAEd,IAAF,EAAQC,GAAR,KAAiB;AAClDH,IAAAA,KAAK,CAACM,OAAN,CAAcE,GAAd,CACCN,IADD,EAEC,iBAAQ,CAAE,IAAKF,KAAK,CAACM,OAAN,CAAcC,GAAd,CAAmBL,IAAnB,KAA6B,EAAlC,CAAF,EAA0CC,GAA1C,CAAR,CAFD;AAIA,GALoB,EAKlB,EALkB,CAArB;AAOA,QAAMc,cAAc,GAAG,0BAAa,CAAEf,IAAF,EAAQC,GAAR,KAAiB;AACpD,QAAKH,KAAK,CAACM,OAAN,CAAcC,GAAd,CAAmBL,IAAnB,CAAL,EAAiC;AAChCF,MAAAA,KAAK,CAACM,OAAN,CAAcE,GAAd,CACCN,IADD,EAEC,iBACCF,KAAK,CAACM,OAAN,CACEC,GADF,CACOL,IADP,EAEEgB,MAFF,CAEYC,OAAF,IAAeA,OAAO,KAAKhB,GAFrC,CADD,CAFD;AAQA;AACD,GAXsB,EAWpB,EAXoB,CAAvB,CA/C0B,CA4D1B;;AACA,QAAMiB,QAAQ,GAAG,sBAChB,OAAQ;AACPrB,IAAAA,KAAK,EAAEA,KAAK,CAACO,OADN;AAEPN,IAAAA,KAAK,EAAEA,KAAK,CAACM,OAFN;AAGPL,IAAAA,YAHO;AAIPU,IAAAA,UAJO;AAKPF,IAAAA,cALO;AAMPO,IAAAA,YANO;AAOPC,IAAAA;AAPO,GAAR,CADgB,EAUhB,CACChB,YADD,EAECU,UAFD,EAGCF,cAHD,EAICO,YAJD,EAKCC,cALD,CAVgB,CAAjB;AAmBA,SAAOG,QAAP;AACA;;AAEc,SAASC,gBAAT,OAA0C;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AACxD,QAAMF,QAAQ,GAAGtB,eAAe,EAAhC;AACA,SACC,4BAAC,wBAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAGsB;AAAlC,KACGE,QADH,CADD;AAKA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { ref as valRef } from 'valtio';\nimport { proxyMap } from 'valtio/utils';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback, useRef } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nfunction useSlotRegistry() {\n\tconst slots = useRef( proxyMap() );\n\tconst fills = useRef( proxyMap() );\n\n\tconst registerSlot = useCallback( ( name, ref, fillProps ) => {\n\t\tconst slot = slots.current.get( name ) || {};\n\t\tslots.current.set(\n\t\t\tname,\n\t\t\tvalRef( {\n\t\t\t\t...slot,\n\t\t\t\tref: ref || slot.ref,\n\t\t\t\tfillProps: fillProps || slot.fillProps || {},\n\t\t\t} )\n\t\t);\n\t}, [] );\n\n\tconst unregisterSlot = useCallback( ( name, ref ) => {\n\t\t// Make sure we're not unregistering a slot registered by another element\n\t\t// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412\n\t\tif ( slots.current.get( name )?.ref === ref ) {\n\t\t\tslots.current.delete( name );\n\t\t}\n\t}, [] );\n\n\tconst updateSlot = useCallback( ( name, fillProps ) => {\n\t\tconst slot = slots.current.get( name );\n\t\tif ( ! slot ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! isShallowEqual( slot.fillProps, fillProps ) ) {\n\t\t\tslot.fillProps = fillProps;\n\t\t\tconst slotFills = fills.current.get( name );\n\t\t\tif ( slotFills ) {\n\t\t\t\t// Force update fills.\n\t\t\t\tslotFills.map( ( fill ) => fill.current.rerender() );\n\t\t\t}\n\t\t}\n\t}, [] );\n\n\tconst registerFill = useCallback( ( name, ref ) => {\n\t\tfills.current.set(\n\t\t\tname,\n\t\t\tvalRef( [ ...( fills.current.get( name ) || [] ), ref ] )\n\t\t);\n\t}, [] );\n\n\tconst unregisterFill = useCallback( ( name, ref ) => {\n\t\tif ( fills.current.get( name ) ) {\n\t\t\tfills.current.set(\n\t\t\t\tname,\n\t\t\t\tvalRef(\n\t\t\t\t\tfills.current\n\t\t\t\t\t\t.get( name )\n\t\t\t\t\t\t.filter( ( fillRef ) => fillRef !== ref )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}, [] );\n\n\t// Memoizing the return value so it can be directly passed to Provider value\n\tconst registry = useMemo(\n\t\t() => ( {\n\t\t\tslots: slots.current,\n\t\t\tfills: fills.current,\n\t\t\tregisterSlot,\n\t\t\tupdateSlot,\n\t\t\tunregisterSlot,\n\t\t\tregisterFill,\n\t\t\tunregisterFill,\n\t\t} ),\n\t\t[\n\t\t\tregisterSlot,\n\t\t\tupdateSlot,\n\t\t\tunregisterSlot,\n\t\t\tregisterFill,\n\t\t\tunregisterFill,\n\t\t]\n\t);\n\n\treturn registry;\n}\n\nexport default function SlotFillProvider( { children } ) {\n\tconst registry = useSlotRegistry();\n\treturn (\n\t\t<SlotFillContext.Provider value={ registry }>\n\t\t\t{ children }\n\t\t</SlotFillContext.Provider>\n\t);\n}\n"]}

package/build/tab-panel/index.js

@@ -102,7 +102,7 @@ function TabPanel(_ref2) {
   const instanceId = (0, _compose.useInstanceId)(TabPanel, 'tab-panel');
   const [selected, setSelected] = (0, _element.useState)();
 
-  const handleClick = tabKey => {
+  const handleTabSelection = tabKey => {
     setSelected(tabKey);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(tabKey);
   };
@@ -120,8 +120,8 @@ function TabPanel(_ref2) {
       name: selected
     });
 
-    if (!newSelectedTab) {
-      setSelected(initialTabName || (tabs.length > 0 ? tabs[0].name : undefined));
+    if (!newSelectedTab && tabs.length > 0) {
+      handleTabSelection(initialTabName || tabs[0].name);
     }
   }, [tabs]);
   return (0, _element.createElement)("div", {
@@ -139,7 +139,7 @@ function TabPanel(_ref2) {
     "aria-controls": `${instanceId}-${tab.name}-view`,
     selected: tab.name === selected,
     key: tab.name,
-    onClick: () => handleClick(tab.name)
+    onClick: () => handleTabSelection(tab.name)
   }, tab.title))), selectedTab && (0, _element.createElement)("div", {
     key: selectedId,
     "aria-labelledby": selectedId,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleClick","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","newSelectedTab","length","undefined","map","tab","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } 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\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 handleClick = ( tabKey: string ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect?.( tabKey );\n\t};\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tconst newSelectedTab = find( tabs, { name: selected } );\n\t\tif ( ! newSelectedTab ) {\n\t\t\tsetSelected(\n\t\t\t\tinitialTabName ||\n\t\t\t\t\t( tabs.length > 0 ? tabs[ 0 ].name : undefined )\n\t\t\t);\n\t\t}\n\t}, [ tabs ] );\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={ onNavigate }\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={ () => handleClick( tab.name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ 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":["TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","newSelectedTab","length","map","tab","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } 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\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 = ( tabKey: string ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect?.( tabKey );\n\t};\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tconst newSelectedTab = find( tabs, { name: selected } );\n\t\tif ( ! newSelectedTab && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs ] );\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={ onNavigate }\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>\n\t\t\t\t\t\t{ 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"]}

package/build/theme/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _colord = require("colord");
+
+var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
+
+var _names = _interopRequireDefault(require("colord/plugins/names"));
+
+var _styles = require("./styles");
+
+/**
+ * External dependencies
+ */
+(0, _colord.extend)([_names.default, _a11y.default]);
+/**
+ * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
+ *
+ * Multiple `Theme` components can be nested in order to override specific theme variables.
+ *
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalTheme as Theme } from '@wordpress/components';
+ *
+ * const Example = () => {
+ *   return (
+ *     <Theme accent="red">
+ *       <Button variant="primary">I'm red</Button>
+ *       <Theme accent="blue">
+ *         <Button variant="primary">I'm blue</Button>
+ *       </Theme>
+ *     </Theme>
+ *   );
+ * };
+ * ```
+ */
+
+function Theme(props) {
+  const {
+    accent
+  } = props;
+
+  if (accent && !(0, _colord.colord)(accent).isValid()) {
+    // eslint-disable-next-line no-console
+    console.warn(`wp.components.Theme: "${accent}" is not a valid color value for the 'accent' prop.`);
+  }
+
+  return (0, _element.createElement)(_styles.Wrapper, props);
+}
+
+var _default = Theme;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/theme/index.tsx"],"names":["namesPlugin","a11yPlugin","Theme","props","accent","isValid","console","warn"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAOA;;AAZA;AACA;AACA;AAYA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,KAAT,CAAgBC,KAAhB,EAA4E;AAC3E,QAAM;AAAEC,IAAAA;AAAF,MAAaD,KAAnB;;AACA,MAAKC,MAAM,IAAI,CAAE,oBAAQA,MAAR,EAAiBC,OAAjB,EAAjB,EAA8C;AAC7C;AACAC,IAAAA,OAAO,CAACC,IAAR,CACE,yBAAyBH,MAAQ,qDADnC;AAGA;;AAED,SAAO,4BAAC,eAAD,EAAcD,KAAd,CAAP;AACA;;eAEcD,K","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { Wrapper } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * `Theme` allows defining theme variables for components in the `@wordpress/components` package.\n *\n * Multiple `Theme` components can be nested in order to override specific theme variables.\n *\n *\n * @example\n * ```jsx\n * import { __experimentalTheme as Theme } from '@wordpress/components';\n *\n * const Example = () => {\n *   return (\n *     <Theme accent=\"red\">\n *       <Button variant=\"primary\">I'm red</Button>\n *       <Theme accent=\"blue\">\n *         <Button variant=\"primary\">I'm blue</Button>\n *       </Theme>\n *     </Theme>\n *   );\n * };\n * ```\n */\nfunction Theme( props: WordPressComponentProps< ThemeProps, 'div', true > ) {\n\tconst { accent } = props;\n\tif ( accent && ! colord( accent ).isValid() ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`wp.components.Theme: \"${ accent }\" is not a valid color value for the 'accent' prop.`\n\t\t);\n\t}\n\n\treturn <Wrapper { ...props } />;\n}\n\nexport default Theme;\n"]}

package/build/theme/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+var _colord = require("colord");
+
+var _react = require("@emotion/react");
+
+/**
+ * External dependencies
+ */
+const accentColor = _ref => {
+  let {
+    accent
+  } = _ref;
+  return accent ? /*#__PURE__*/(0, _react.css)("--wp-components-color-accent:", accent, ";--wp-components-color-accent-darker-10:", (0, _colord.colord)(accent).darken(0.1).toHex(), ";--wp-components-color-accent-darker-20:", (0, _colord.colord)(accent).darken(0.2).toHex(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:accentColor;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNPIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY29sb3JkIH0gZnJvbSAnY29sb3JkJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBUaGVtZVByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IGFjY2VudENvbG9yID0gKCB7IGFjY2VudCB9OiBUaGVtZVByb3BzICkgPT5cblx0YWNjZW50XG5cdFx0PyBjc3NgXG5cdFx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1hY2NlbnQ6ICR7IGFjY2VudCB9O1xuXHRcdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0xMDogJHsgY29sb3JkKCBhY2NlbnQgKVxuXHRcdFx0XHRcdC5kYXJrZW4oIDAuMSApXG5cdFx0XHRcdFx0LnRvSGV4KCkgfTtcblx0XHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudC1kYXJrZXItMjA6ICR7IGNvbG9yZCggYWNjZW50IClcblx0XHRcdFx0XHQuZGFya2VuKCAwLjIgKVxuXHRcdFx0XHRcdC50b0hleCgpIH07XG5cdFx0ICBgXG5cdFx0OiB1bmRlZmluZWQ7XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdjwgVGhlbWVQcm9wcyA+YFxuXHQkeyBhY2NlbnRDb2xvciB9XG5gO1xuIl19 */") : undefined;
+};
+
+const Wrapper = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e1krjpvb0"
+} : {
+  target: "e1krjpvb0",
+  label: "Wrapper"
+})(accentColor, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCK0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90aGVtZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjb2xvcmQgfSBmcm9tICdjb2xvcmQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IFRoZW1lUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgYWNjZW50Q29sb3IgPSAoIHsgYWNjZW50IH06IFRoZW1lUHJvcHMgKSA9PlxuXHRhY2NlbnRcblx0XHQ/IGNzc2Bcblx0XHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudDogJHsgYWNjZW50IH07XG5cdFx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1hY2NlbnQtZGFya2VyLTEwOiAkeyBjb2xvcmQoIGFjY2VudCApXG5cdFx0XHRcdFx0LmRhcmtlbiggMC4xIClcblx0XHRcdFx0XHQudG9IZXgoKSB9O1xuXHRcdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0yMDogJHsgY29sb3JkKCBhY2NlbnQgKVxuXHRcdFx0XHRcdC5kYXJrZW4oIDAuMiApXG5cdFx0XHRcdFx0LnRvSGV4KCkgfTtcblx0XHQgIGBcblx0XHQ6IHVuZGVmaW5lZDtcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2PCBUaGVtZVByb3BzID5gXG5cdCR7IGFjY2VudENvbG9yIH1cbmA7XG4iXX0= */"));
+exports.Wrapper = Wrapper;
+//# sourceMappingURL=styles.js.map

package/build/theme/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/theme/styles.ts"],"names":["accentColor","accent","css","darken","toHex","undefined","Wrapper"],"mappings":";;;;;;;;;;;AAGA;;AAEA;;AALA;AACA;AACA;AAUA,MAAMA,WAAW,GAAG;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACnBA,MAAM,oBACHC,UADG,mCAE8BD,MAF9B,8CAGwC,oBAAQA,MAAR,EACzCE,MADyC,CACjC,GADiC,EAEzCC,KAFyC,EAHxC,8CAMwC,oBAAQH,MAAR,EACzCE,MADyC,CACjC,GADiC,EAEzCC,KAFyC,EANxC,w0CAUHC,SAXgB;AAAA,CAApB;;AAaO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAChBN,WADgB,qwCAAb","sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProps } from './types';\n\nconst accentColor = ( { accent }: ThemeProps ) =>\n\taccent\n\t\t? css`\n\t\t\t\t--wp-components-color-accent: ${ accent };\n\t\t\t\t--wp-components-color-accent-darker-10: ${ colord( accent )\n\t\t\t\t\t.darken( 0.1 )\n\t\t\t\t\t.toHex() };\n\t\t\t\t--wp-components-color-accent-darker-20: ${ colord( accent )\n\t\t\t\t\t.darken( 0.2 )\n\t\t\t\t\t.toHex() };\n\t\t  `\n\t\t: undefined;\n\nexport const Wrapper = styled.div< ThemeProps >`\n\t${ accentColor }\n`;\n"]}

package/build/theme/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/theme/types.js.map

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

package/build/tools-panel/tools-panel/hook.js

@@ -129,7 +129,7 @@ function useToolsPanel(props) {
       });
       return items;
     });
-  }, [generateMenuItems, panelItems, setMenuItems]); // Force a menu item to be checked.
+  }, [panelItems, setMenuItems]); // Force a menu item to be checked.
   // This is intended for use with default panel items. They are displayed
   // separately to optional items and have different display states,
   // we need to update that when their value is customized.
@@ -202,7 +202,7 @@ function useToolsPanel(props) {
       shouldReset: true
     });
     setMenuItems(resetMenuItems);
-  }, [generateMenuItems, isResetting.current, panelItems, resetAll, setMenuItems]); // Assist ItemGroup styling when there are potentially hidden placeholder
+  }, [panelItems, resetAll, setMenuItems]); // Assist ItemGroup styling when there are potentially hidden placeholder
   // items by identifying first & last items that are toggled on for display.
 
   const getFirstVisibleItemLabel = items => {
@@ -227,7 +227,7 @@ function useToolsPanel(props) {
     shouldRenderPlaceholderItems,
     __experimentalFirstVisibleItemClass,
     __experimentalLastVisibleItemClass
-  }), [areAllOptionalControlsHidden, deregisterPanelItem, firstDisplayedItem, flagItemCustomization, isResetting.current, lastDisplayedItem, menuItems, panelId, panelItems, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
+  }), [areAllOptionalControlsHidden, deregisterPanelItem, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, panelItems, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
   return { ...otherProps,
     panelContext,
     resetAllItems,

package/build/tools-panel/tools-panel/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["DEFAULT_COLUMNS","generateMenuItems","panelItems","shouldReset","currentMenuItems","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","existingItemValue","value","undefined","isMenuItemTypeEmpty","obj","Object","keys","length","useToolsPanel","props","className","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","otherProps","isResetting","wasResetting","current","setPanelItems","registerPanelItem","item","items","newItems","existingIndex","findIndex","oldItem","splice","deregisterPanelItem","index","setMenuItems","prevState","flagItemCustomization","newState","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","allControlsHidden","entries","some","isSelected","cx","classes","wrapperStyle","styles","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","newMenuItems","resetAllItems","filters","resetAllFilter","push","resetMenuItems","getFirstVisibleItemLabel","optionalItems","firstItem","firstDisplayedItem","lastDisplayedItem","reverse","panelContext","hasMenuItems"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type {\n\tToolsPanelItem,\n\tToolsPanelMenuItemKey,\n\tToolsPanelMenuItems,\n\tToolsPanelMenuItemsConfig,\n\tToolsPanelProps,\n} from '../types';\n\nconst DEFAULT_COLUMNS = 2;\n\nconst generateMenuItems = ( {\n\tpanelItems,\n\tshouldReset,\n\tcurrentMenuItems,\n}: ToolsPanelMenuItemsConfig ) => {\n\tconst menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };\n\n\tpanelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {\n\t\tconst group = isShownByDefault ? 'default' : 'optional';\n\n\t\t// If a menu item for this label already exists, do not overwrite its value.\n\t\t// This can cause default controls that have been flagged as customized to\n\t\t// lose their value.\n\t\tconst existingItemValue = currentMenuItems?.[ group ]?.[ label ];\n\t\tconst value =\n\t\t\texistingItemValue !== undefined ? existingItemValue : hasValue();\n\n\t\tmenuItems[ group ][ label ] = shouldReset ? false : value;\n\t} );\n\n\treturn menuItems;\n};\n\nconst isMenuItemTypeEmpty = (\n\tobj?: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]\n) => obj && Object.keys( obj ).length === 0;\n\nexport function useToolsPanel(\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper,\n\t\tshouldRenderPlaceholderItems,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanel' );\n\n\tconst isResetting = useRef( false );\n\tconst wasResetting = isResetting.current;\n\n\t// `isResetting` is cleared via this hook to effectively batch together\n\t// the resetAll task. Without this, the flag is cleared after the first\n\t// control updates and forces a rerender with subsequent controls then\n\t// believing they need to reset, unfortunately using stale data.\n\tuseEffect( () => {\n\t\tif ( wasResetting ) {\n\t\t\tisResetting.current = false;\n\t\t}\n\t}, [ wasResetting ] );\n\n\t// Allow panel items to register themselves.\n\tconst [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );\n\n\tconst registerPanelItem = useCallback(\n\t\t( item: ToolsPanelItem ) => {\n\t\t\tsetPanelItems( ( items ) => {\n\t\t\t\tconst newItems = [ ...items ];\n\t\t\t\t// If an item with this label has already been registered, remove it\n\t\t\t\t// first. This can happen when an item is moved between the default\n\t\t\t\t// and optional groups.\n\t\t\t\tconst existingIndex = newItems.findIndex(\n\t\t\t\t\t( oldItem ) => oldItem.label === item.label\n\t\t\t\t);\n\t\t\t\tif ( existingIndex !== -1 ) {\n\t\t\t\t\tnewItems.splice( existingIndex, 1 );\n\t\t\t\t}\n\t\t\t\treturn [ ...newItems, item ];\n\t\t\t} );\n\t\t},\n\t\t[ setPanelItems ]\n\t);\n\n\t// Panels need to deregister on unmount to avoid orphans in menu state.\n\t// This is an issue when panel items are being injected via SlotFills.\n\tconst deregisterPanelItem = useCallback(\n\t\t( label: string ) => {\n\t\t\t// When switching selections between components injecting matching\n\t\t\t// controls, e.g. both panels have a \"padding\" control, the\n\t\t\t// deregistration of the first panel doesn't occur until after the\n\t\t\t// registration of the next.\n\t\t\tsetPanelItems( ( items ) => {\n\t\t\t\tconst newItems = [ ...items ];\n\t\t\t\tconst index = newItems.findIndex(\n\t\t\t\t\t( item ) => item.label === label\n\t\t\t\t);\n\t\t\t\tif ( index !== -1 ) {\n\t\t\t\t\tnewItems.splice( index, 1 );\n\t\t\t\t}\n\t\t\t\treturn newItems;\n\t\t\t} );\n\t\t},\n\t\t[ setPanelItems ]\n\t);\n\n\t// Manage and share display state of menu items representing child controls.\n\tconst [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {\n\t\tdefault: {},\n\t\toptional: {},\n\t} );\n\n\t// Setup menuItems state as panel items register themselves.\n\tuseEffect( () => {\n\t\tsetMenuItems( ( prevState ) => {\n\t\t\tconst items = generateMenuItems( {\n\t\t\t\tpanelItems,\n\t\t\t\tshouldReset: false,\n\t\t\t\tcurrentMenuItems: prevState,\n\t\t\t} );\n\t\t\treturn items;\n\t\t} );\n\t}, [ generateMenuItems, panelItems, setMenuItems ] );\n\n\t// Force a menu item to be checked.\n\t// This is intended for use with default panel items. They are displayed\n\t// separately to optional items and have different display states,\n\t// we need to update that when their value is customized.\n\tconst flagItemCustomization = useCallback(\n\t\t( label: string, group: ToolsPanelMenuItemKey = 'default' ) => {\n\t\t\tsetMenuItems( ( items ) => {\n\t\t\t\tconst newState = {\n\t\t\t\t\t...items,\n\t\t\t\t\t[ group ]: {\n\t\t\t\t\t\t...items[ group ],\n\t\t\t\t\t\t[ label ]: true,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\treturn newState;\n\t\t\t} );\n\t\t},\n\t\t[ setMenuItems ]\n\t);\n\n\t// Whether all optional menu items are hidden or not must be tracked\n\t// in order to later determine if the panel display is empty and handle\n\t// conditional display of a plus icon to indicate the presence of further\n\t// menu items.\n\tconst [ areAllOptionalControlsHidden, setAreAllOptionalControlsHidden ] =\n\t\tuseState( false );\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\tisMenuItemTypeEmpty( menuItems?.default ) &&\n\t\t\t! isMenuItemTypeEmpty( menuItems?.optional )\n\t\t) {\n\t\t\tconst allControlsHidden = ! Object.entries(\n\t\t\t\tmenuItems.optional\n\t\t\t).some( ( [ , isSelected ] ) => isSelected );\n\t\t\tsetAreAllOptionalControlsHidden( allControlsHidden );\n\t\t}\n\t}, [ menuItems, setAreAllOptionalControlsHidden ] );\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst wrapperStyle =\n\t\t\thasInnerWrapper &&\n\t\t\tstyles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );\n\t\tconst emptyStyle =\n\t\t\tisMenuItemTypeEmpty( menuItems?.default ) &&\n\t\t\tareAllOptionalControlsHidden &&\n\t\t\tstyles.ToolsPanelHiddenInnerWrapper;\n\n\t\treturn cx(\n\t\t\tstyles.ToolsPanel( DEFAULT_COLUMNS ),\n\t\t\twrapperStyle,\n\t\t\temptyStyle,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\tareAllOptionalControlsHidden,\n\t\tclassName,\n\t\tcx,\n\t\thasInnerWrapper,\n\t\tmenuItems,\n\t] );\n\n\t// Toggle the checked state of a menu item which is then used to determine\n\t// display of the item within the panel.\n\tconst toggleItem = useCallback(\n\t\t( label: string ) => {\n\t\t\tconst currentItem = panelItems.find(\n\t\t\t\t( item ) => item.label === label\n\t\t\t);\n\n\t\t\tif ( ! currentItem ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst menuGroup = currentItem.isShownByDefault\n\t\t\t\t? 'default'\n\t\t\t\t: 'optional';\n\n\t\t\tconst newMenuItems = {\n\t\t\t\t...menuItems,\n\t\t\t\t[ menuGroup ]: {\n\t\t\t\t\t...menuItems[ menuGroup ],\n\t\t\t\t\t[ label ]: ! menuItems[ menuGroup ][ label ],\n\t\t\t\t},\n\t\t\t};\n\n\t\t\tsetMenuItems( newMenuItems );\n\t\t},\n\t\t[ menuItems, panelItems, setMenuItems ]\n\t);\n\n\t// Resets display of children and executes resetAll callback if available.\n\tconst resetAllItems = useCallback( () => {\n\t\tif ( typeof resetAll === 'function' ) {\n\t\t\tisResetting.current = true;\n\n\t\t\t// Collect available reset filters from panel items.\n\t\t\tconst filters: Array< () => void > = [];\n\t\t\tpanelItems.forEach( ( item ) => {\n\t\t\t\tif ( item.resetAllFilter ) {\n\t\t\t\t\tfilters.push( item.resetAllFilter );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tresetAll( filters );\n\t\t}\n\n\t\t// Turn off display of all non-default items.\n\t\tconst resetMenuItems = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: true,\n\t\t} );\n\t\tsetMenuItems( resetMenuItems );\n\t}, [\n\t\tgenerateMenuItems,\n\t\tisResetting.current,\n\t\tpanelItems,\n\t\tresetAll,\n\t\tsetMenuItems,\n\t] );\n\n\t// Assist ItemGroup styling when there are potentially hidden placeholder\n\t// items by identifying first & last items that are toggled on for display.\n\tconst getFirstVisibleItemLabel = ( items: ToolsPanelItem[] ) => {\n\t\tconst optionalItems = menuItems.optional || {};\n\t\tconst firstItem = items.find(\n\t\t\t( item ) => item.isShownByDefault || !! optionalItems[ item.label ]\n\t\t);\n\n\t\treturn firstItem?.label;\n\t};\n\n\tconst firstDisplayedItem = getFirstVisibleItemLabel( panelItems );\n\tconst lastDisplayedItem = getFirstVisibleItemLabel(\n\t\t[ ...panelItems ].reverse()\n\t);\n\n\tconst panelContext = useMemo(\n\t\t() => ( {\n\t\t\tareAllOptionalControlsHidden,\n\t\t\tderegisterPanelItem,\n\t\t\tfirstDisplayedItem,\n\t\t\tflagItemCustomization,\n\t\t\thasMenuItems: !! panelItems.length,\n\t\t\tisResetting: isResetting.current,\n\t\t\tlastDisplayedItem,\n\t\t\tmenuItems,\n\t\t\tpanelId,\n\t\t\tregisterPanelItem,\n\t\t\tshouldRenderPlaceholderItems,\n\t\t\t__experimentalFirstVisibleItemClass,\n\t\t\t__experimentalLastVisibleItemClass,\n\t\t} ),\n\t\t[\n\t\t\tareAllOptionalControlsHidden,\n\t\t\tderegisterPanelItem,\n\t\t\tfirstDisplayedItem,\n\t\t\tflagItemCustomization,\n\t\t\tisResetting.current,\n\t\t\tlastDisplayedItem,\n\t\t\tmenuItems,\n\t\t\tpanelId,\n\t\t\tpanelItems,\n\t\t\tregisterPanelItem,\n\t\t\tshouldRenderPlaceholderItems,\n\t\t\t__experimentalFirstVisibleItemClass,\n\t\t\t__experimentalLastVisibleItemClass,\n\t\t]\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["DEFAULT_COLUMNS","generateMenuItems","panelItems","shouldReset","currentMenuItems","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","existingItemValue","value","undefined","isMenuItemTypeEmpty","obj","Object","keys","length","useToolsPanel","props","className","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","otherProps","isResetting","wasResetting","current","setPanelItems","registerPanelItem","item","items","newItems","existingIndex","findIndex","oldItem","splice","deregisterPanelItem","index","setMenuItems","prevState","flagItemCustomization","newState","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","allControlsHidden","entries","some","isSelected","cx","classes","wrapperStyle","styles","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","newMenuItems","resetAllItems","filters","resetAllFilter","push","resetMenuItems","getFirstVisibleItemLabel","optionalItems","firstItem","firstDisplayedItem","lastDisplayedItem","reverse","panelContext","hasMenuItems"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type {\n\tToolsPanelItem,\n\tToolsPanelMenuItemKey,\n\tToolsPanelMenuItems,\n\tToolsPanelMenuItemsConfig,\n\tToolsPanelProps,\n} from '../types';\n\nconst DEFAULT_COLUMNS = 2;\n\nconst generateMenuItems = ( {\n\tpanelItems,\n\tshouldReset,\n\tcurrentMenuItems,\n}: ToolsPanelMenuItemsConfig ) => {\n\tconst menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };\n\n\tpanelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {\n\t\tconst group = isShownByDefault ? 'default' : 'optional';\n\n\t\t// If a menu item for this label already exists, do not overwrite its value.\n\t\t// This can cause default controls that have been flagged as customized to\n\t\t// lose their value.\n\t\tconst existingItemValue = currentMenuItems?.[ group ]?.[ label ];\n\t\tconst value =\n\t\t\texistingItemValue !== undefined ? existingItemValue : hasValue();\n\n\t\tmenuItems[ group ][ label ] = shouldReset ? false : value;\n\t} );\n\n\treturn menuItems;\n};\n\nconst isMenuItemTypeEmpty = (\n\tobj?: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]\n) => obj && Object.keys( obj ).length === 0;\n\nexport function useToolsPanel(\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper,\n\t\tshouldRenderPlaceholderItems,\n\t\t__experimentalFirstVisibleItemClass,\n\t\t__experimentalLastVisibleItemClass,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanel' );\n\n\tconst isResetting = useRef( false );\n\tconst wasResetting = isResetting.current;\n\n\t// `isResetting` is cleared via this hook to effectively batch together\n\t// the resetAll task. Without this, the flag is cleared after the first\n\t// control updates and forces a rerender with subsequent controls then\n\t// believing they need to reset, unfortunately using stale data.\n\tuseEffect( () => {\n\t\tif ( wasResetting ) {\n\t\t\tisResetting.current = false;\n\t\t}\n\t}, [ wasResetting ] );\n\n\t// Allow panel items to register themselves.\n\tconst [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );\n\n\tconst registerPanelItem = useCallback(\n\t\t( item: ToolsPanelItem ) => {\n\t\t\tsetPanelItems( ( items ) => {\n\t\t\t\tconst newItems = [ ...items ];\n\t\t\t\t// If an item with this label has already been registered, remove it\n\t\t\t\t// first. This can happen when an item is moved between the default\n\t\t\t\t// and optional groups.\n\t\t\t\tconst existingIndex = newItems.findIndex(\n\t\t\t\t\t( oldItem ) => oldItem.label === item.label\n\t\t\t\t);\n\t\t\t\tif ( existingIndex !== -1 ) {\n\t\t\t\t\tnewItems.splice( existingIndex, 1 );\n\t\t\t\t}\n\t\t\t\treturn [ ...newItems, item ];\n\t\t\t} );\n\t\t},\n\t\t[ setPanelItems ]\n\t);\n\n\t// Panels need to deregister on unmount to avoid orphans in menu state.\n\t// This is an issue when panel items are being injected via SlotFills.\n\tconst deregisterPanelItem = useCallback(\n\t\t( label: string ) => {\n\t\t\t// When switching selections between components injecting matching\n\t\t\t// controls, e.g. both panels have a \"padding\" control, the\n\t\t\t// deregistration of the first panel doesn't occur until after the\n\t\t\t// registration of the next.\n\t\t\tsetPanelItems( ( items ) => {\n\t\t\t\tconst newItems = [ ...items ];\n\t\t\t\tconst index = newItems.findIndex(\n\t\t\t\t\t( item ) => item.label === label\n\t\t\t\t);\n\t\t\t\tif ( index !== -1 ) {\n\t\t\t\t\tnewItems.splice( index, 1 );\n\t\t\t\t}\n\t\t\t\treturn newItems;\n\t\t\t} );\n\t\t},\n\t\t[ setPanelItems ]\n\t);\n\n\t// Manage and share display state of menu items representing child controls.\n\tconst [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {\n\t\tdefault: {},\n\t\toptional: {},\n\t} );\n\n\t// Setup menuItems state as panel items register themselves.\n\tuseEffect( () => {\n\t\tsetMenuItems( ( prevState ) => {\n\t\t\tconst items = generateMenuItems( {\n\t\t\t\tpanelItems,\n\t\t\t\tshouldReset: false,\n\t\t\t\tcurrentMenuItems: prevState,\n\t\t\t} );\n\t\t\treturn items;\n\t\t} );\n\t}, [ panelItems, setMenuItems ] );\n\n\t// Force a menu item to be checked.\n\t// This is intended for use with default panel items. They are displayed\n\t// separately to optional items and have different display states,\n\t// we need to update that when their value is customized.\n\tconst flagItemCustomization = useCallback(\n\t\t( label: string, group: ToolsPanelMenuItemKey = 'default' ) => {\n\t\t\tsetMenuItems( ( items ) => {\n\t\t\t\tconst newState = {\n\t\t\t\t\t...items,\n\t\t\t\t\t[ group ]: {\n\t\t\t\t\t\t...items[ group ],\n\t\t\t\t\t\t[ label ]: true,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\treturn newState;\n\t\t\t} );\n\t\t},\n\t\t[ setMenuItems ]\n\t);\n\n\t// Whether all optional menu items are hidden or not must be tracked\n\t// in order to later determine if the panel display is empty and handle\n\t// conditional display of a plus icon to indicate the presence of further\n\t// menu items.\n\tconst [ areAllOptionalControlsHidden, setAreAllOptionalControlsHidden ] =\n\t\tuseState( false );\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\tisMenuItemTypeEmpty( menuItems?.default ) &&\n\t\t\t! isMenuItemTypeEmpty( menuItems?.optional )\n\t\t) {\n\t\t\tconst allControlsHidden = ! Object.entries(\n\t\t\t\tmenuItems.optional\n\t\t\t).some( ( [ , isSelected ] ) => isSelected );\n\t\t\tsetAreAllOptionalControlsHidden( allControlsHidden );\n\t\t}\n\t}, [ menuItems, setAreAllOptionalControlsHidden ] );\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst wrapperStyle =\n\t\t\thasInnerWrapper &&\n\t\t\tstyles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );\n\t\tconst emptyStyle =\n\t\t\tisMenuItemTypeEmpty( menuItems?.default ) &&\n\t\t\tareAllOptionalControlsHidden &&\n\t\t\tstyles.ToolsPanelHiddenInnerWrapper;\n\n\t\treturn cx(\n\t\t\tstyles.ToolsPanel( DEFAULT_COLUMNS ),\n\t\t\twrapperStyle,\n\t\t\temptyStyle,\n\t\t\tclassName\n\t\t);\n\t}, [\n\t\tareAllOptionalControlsHidden,\n\t\tclassName,\n\t\tcx,\n\t\thasInnerWrapper,\n\t\tmenuItems,\n\t] );\n\n\t// Toggle the checked state of a menu item which is then used to determine\n\t// display of the item within the panel.\n\tconst toggleItem = useCallback(\n\t\t( label: string ) => {\n\t\t\tconst currentItem = panelItems.find(\n\t\t\t\t( item ) => item.label === label\n\t\t\t);\n\n\t\t\tif ( ! currentItem ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst menuGroup = currentItem.isShownByDefault\n\t\t\t\t? 'default'\n\t\t\t\t: 'optional';\n\n\t\t\tconst newMenuItems = {\n\t\t\t\t...menuItems,\n\t\t\t\t[ menuGroup ]: {\n\t\t\t\t\t...menuItems[ menuGroup ],\n\t\t\t\t\t[ label ]: ! menuItems[ menuGroup ][ label ],\n\t\t\t\t},\n\t\t\t};\n\n\t\t\tsetMenuItems( newMenuItems );\n\t\t},\n\t\t[ menuItems, panelItems, setMenuItems ]\n\t);\n\n\t// Resets display of children and executes resetAll callback if available.\n\tconst resetAllItems = useCallback( () => {\n\t\tif ( typeof resetAll === 'function' ) {\n\t\t\tisResetting.current = true;\n\n\t\t\t// Collect available reset filters from panel items.\n\t\t\tconst filters: Array< () => void > = [];\n\t\t\tpanelItems.forEach( ( item ) => {\n\t\t\t\tif ( item.resetAllFilter ) {\n\t\t\t\t\tfilters.push( item.resetAllFilter );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tresetAll( filters );\n\t\t}\n\n\t\t// Turn off display of all non-default items.\n\t\tconst resetMenuItems = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: true,\n\t\t} );\n\t\tsetMenuItems( resetMenuItems );\n\t}, [ panelItems, resetAll, setMenuItems ] );\n\n\t// Assist ItemGroup styling when there are potentially hidden placeholder\n\t// items by identifying first & last items that are toggled on for display.\n\tconst getFirstVisibleItemLabel = ( items: ToolsPanelItem[] ) => {\n\t\tconst optionalItems = menuItems.optional || {};\n\t\tconst firstItem = items.find(\n\t\t\t( item ) => item.isShownByDefault || !! optionalItems[ item.label ]\n\t\t);\n\n\t\treturn firstItem?.label;\n\t};\n\n\tconst firstDisplayedItem = getFirstVisibleItemLabel( panelItems );\n\tconst lastDisplayedItem = getFirstVisibleItemLabel(\n\t\t[ ...panelItems ].reverse()\n\t);\n\n\tconst panelContext = useMemo(\n\t\t() => ( {\n\t\t\tareAllOptionalControlsHidden,\n\t\t\tderegisterPanelItem,\n\t\t\tfirstDisplayedItem,\n\t\t\tflagItemCustomization,\n\t\t\thasMenuItems: !! panelItems.length,\n\t\t\tisResetting: isResetting.current,\n\t\t\tlastDisplayedItem,\n\t\t\tmenuItems,\n\t\t\tpanelId,\n\t\t\tregisterPanelItem,\n\t\t\tshouldRenderPlaceholderItems,\n\t\t\t__experimentalFirstVisibleItemClass,\n\t\t\t__experimentalLastVisibleItemClass,\n\t\t} ),\n\t\t[\n\t\t\tareAllOptionalControlsHidden,\n\t\t\tderegisterPanelItem,\n\t\t\tfirstDisplayedItem,\n\t\t\tflagItemCustomization,\n\t\t\tlastDisplayedItem,\n\t\t\tmenuItems,\n\t\t\tpanelId,\n\t\t\tpanelItems,\n\t\t\tregisterPanelItem,\n\t\t\tshouldRenderPlaceholderItems,\n\t\t\t__experimentalFirstVisibleItemClass,\n\t\t\t__experimentalLastVisibleItemClass,\n\t\t]\n\t);\n\n\treturn {\n\t\t...otherProps,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}