npm - @wordpress/components - Versions diffs - 23.6.0 → 23.7.0 - Mend

@wordpress/components 23.6.0 → 23.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (328) hide show

package/build-module/resizable-box/resize-tooltip/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["useCallback","useEffect","useRef","useState","useResizeObserver","noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","debounceUnsetMoveXY","unsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' \| 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = typeof POSITIONS[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/* The label value. /\n\tlabel?: string;\n\t/* Element to be rendered for resize listening events. /\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number \| null; height: number \| null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/\n Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n \n @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n \n @return Properties for hook.\n /\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t /\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t /\n\tconst isAxisControlled = !! axis;\n\n\t/\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t /\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t /\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t /\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst debounceUnsetMoveXY = useCallback( () => {\n\t\tconst unsetMoveXY = () => {\n\t\t\t/\n\t\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t\t /\n\t\t\tif ( isAxisControlled ) return;\n\t\t\tsetMoveX( false );\n\t\t\tsetMoveY( false );\n\t\t};\n\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t}, [ fadeTimeout, isAxisControlled ] );\n\n\tuseEffect( () => {\n\t\t/\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t /\n\t\tconst isRendered = width !== null \|\| height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t /\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/\n\t\t * After the first cycle, we can track width and height changes.\n\t\t /\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height, onResize, debounceUnsetMoveXY ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number \| null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number \| null;\n}\n\n/\n Gets the resize label based on width and height values (as well as recent changes).\n \n @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.height Height value.\n * @param props.moveX Recent width (x axis) changes.\n * @param props.moveY Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n * @param props.width Width value.\n \n @return The rendered label.\n /\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string \| undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t /\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t \n\t Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["useCallback","useEffect","useRef","useState","useResizeObserver","noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","debounceUnsetMoveXY","unsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' \| 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = ( typeof POSITIONS )[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/* The label value. /\n\tlabel?: string;\n\t/* Element to be rendered for resize listening events. /\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number \| null; height: number \| null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/\n Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n \n @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n \n @return Properties for hook.\n /\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t /\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t /\n\tconst isAxisControlled = !! axis;\n\n\t/\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t /\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t /\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t /\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst debounceUnsetMoveXY = useCallback( () => {\n\t\tconst unsetMoveXY = () => {\n\t\t\t/\n\t\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t\t /\n\t\t\tif ( isAxisControlled ) return;\n\t\t\tsetMoveX( false );\n\t\t\tsetMoveY( false );\n\t\t};\n\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t}, [ fadeTimeout, isAxisControlled ] );\n\n\tuseEffect( () => {\n\t\t/\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t /\n\t\tconst isRendered = width !== null \|\| height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t /\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/\n\t\t * After the first cycle, we can track width and height changes.\n\t\t /\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height, onResize, debounceUnsetMoveXY ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number \| null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number \| null;\n}\n\n/\n Gets the resize label based on width and height values (as well as recent changes).\n \n @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.height Height value.\n * @param props.moveX Recent width (x axis) changes.\n * @param props.moveY Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n * @param props.width Width value.\n \n @return The rendered label.\n /\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string \| undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t /\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t \n\t Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}

package/build-module/sandbox/index.native.js CHANGED Viewed

@@ -16,69 +16,85 @@ import { usePreferredColorScheme } from '@wordpress/compose';
  */
 import sandboxStyles from './style.scss';
+const observeAndResizeJS = `
+	(function() {
+		const { MutationObserver } = window;
-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';
+		if ( ! MutationObserver || ! document.body || ! window.parent ) {
+			return;
+		}
-  const {
-    MutationObserver
-  } = window;
+		function sendResize() {
+			const clientBoundingRect = document.body.getBoundingClientRect();
-  if (!MutationObserver || !document.body || !window.parent) {
-    return;
-  }
+			// 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,
+				} )
+			);
+		}
-  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.
+		const observer = new MutationObserver( sendResize );
+		observer.observe( document.body, {
+			attributes: true,
+			attributeOldValue: false,
+			characterData: true,
+			characterDataOldValue: false,
+			childList: true,
+			subtree: true,
+		} );
-    window.ReactNativeWebView.postMessage(JSON.stringify({
-      action: 'resize',
-      width: clientBoundingRect.width,
-      height: clientBoundingRect.height
-    }));
-  }
+		window.addEventListener( 'load', sendResize, true );
-  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.
+		// 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 ] = '';
+					}
+				} );
+			}
+		}
-  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
+				);
+			}
+		);
-  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.
+		document.body.style.position = 'absolute';
+		document.body.style.width = '100%';
+		document.body.setAttribute( 'data-resizable-iframe-connected', '' );
-  window.addEventListener('resize', sendResize, true);
-};
+		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 );
+		window.addEventListener( 'orientationchange', sendResize, true );
+		widow.addEventListener( 'click', sendResize, true );
+	})();
+`;
 const style = `
 	body {
 		margin: 0;
@@ -202,11 +218,6 @@ function Sandbox(_ref) {
       dangerouslySetInnerHTML: {
         __html: html
       }
-    }), createElement("script", {
-      type: "text/javascript",
-      dangerouslySetInnerHTML: {
-        __html: customJS || `(${observeAndResizeJS.toString()})();`
-      }
     }), scripts.map(src => createElement("script", {
       key: src,
       src: src
@@ -283,6 +294,7 @@ function Sandbox(_ref) {
   }, [isLandscape]);
   return createElement(WebView, {
     containerStyle: [sandboxStyles['sandbox-webview__container'], containerStyle],
+    injectedJavaScript: customJS || observeAndResizeJS,
     key: key,
     ref: ref,
     source: {

package/build-module/sandbox/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["Dimensions","StyleSheet","WebView","Platform","renderToString","memo","useRef","useState","useEffect","usePreferredColorScheme","sandboxStyles","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","get","isLandscape","setIsLandscape","wasLandscape","key","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","baseUrl","isAndroid","workaroundStyles","webView","create","opacity"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AACA,SAASC,OAAT,QAAwB,sBAAxB;AAEA;AACA;AACA;;AACA,SACCC,QADD,EAECC,cAFD,EAGCC,IAHD,EAICC,MAJD,EAKCC,QALD,EAMCC,SAND,QAOO,oBAPP;AAQA,SAASC,uBAAT,QAAwC,oBAAxC;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,cAA1B;;AAEA,MAAMC,kBAAkB,GAAG,YAAY;AACtC;AACA;AACA;AACA;;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAuBC,MAA7B;;AAEA,MAAK,CAAED,gBAAF,IAAsB,CAAEE,QAAQ,CAACC,IAAjC,IAAyC,CAAEF,MAAM,CAACG,MAAvD,EAAgE;AAC/D;AACA;;AAED,WAASC,UAAT,GAAsB;AACrB,UAAMC,kBAAkB,GAAGJ,QAAQ,CAACC,IAAT,CAAcI,qBAAd,EAA3B,CADqB,CAGrB;AACA;AACA;;AACAN,IAAAA,MAAM,CAACO,kBAAP,CAA0BC,WAA1B,CACCC,IAAI,CAACC,SAAL,CAAgB;AACfC,MAAAA,MAAM,EAAE,QADO;AAEfC,MAAAA,KAAK,EAAEP,kBAAkB,CAACO,KAFX;AAGfC,MAAAA,MAAM,EAAER,kBAAkB,CAACQ;AAHZ,KAAhB,CADD;AAOA;;AAED,QAAMC,QAAQ,GAAG,IAAIf,gBAAJ,CAAsBK,UAAtB,CAAjB;AACAU,EAAAA,QAAQ,CAACC,OAAT,CAAkBd,QAAQ,CAACC,IAA3B,EAAiC;AAChCc,IAAAA,UAAU,EAAE,IADoB;AAEhCC,IAAAA,iBAAiB,EAAE,KAFa;AAGhCC,IAAAA,aAAa,EAAE,IAHiB;AAIhCC,IAAAA,qBAAqB,EAAE,KAJS;AAKhCC,IAAAA,SAAS,EAAE,IALqB;AAMhCC,IAAAA,OAAO,EAAE;AANuB,GAAjC;AASArB,EAAAA,MAAM,CAACsB,gBAAP,CAAyB,MAAzB,EAAiClB,UAAjC,EAA6C,IAA7C,EApCsC,CAsCtC;AACA;AACA;;AACA,WAASmB,oBAAT,CAA+BC,UAA/B,EAA4C;AAC3C,QAAKA,UAAU,CAACC,KAAhB,EAAwB;AACvB,OAAE,OAAF,EAAW,QAAX,EAAqB,WAArB,EAAkC,WAAlC,EAAgDC,OAAhD,CAAyD,UACxDD,KADwD,EAEvD;AACD,YACC,0BAA0BE,IAA1B,CAAgCH,UAAU,CAACC,KAAX,CAAkBA,KAAlB,CAAhC,CADD,EAEE;AACDD,UAAAA,UAAU,CAACC,KAAX,CAAkBA,KAAlB,IAA4B,EAA5B;AACA;AACD,OARD;AASA;AACD;;AAEDG,EAAAA,KAAK,CAACC,SAAN,CAAgBH,OAAhB,CAAwBI,IAAxB,CACC7B,QAAQ,CAAC8B,gBAAT,CAA2B,SAA3B,CADD,EAECR,oBAFD;AAIAK,EAAAA,KAAK,CAACC,SAAN,CAAgBH,OAAhB,CAAwBI,IAAxB,CACC7B,QAAQ,CAAC+B,WADV,EAEC,UAAWC,UAAX,EAAwB;AACvBL,IAAAA,KAAK,CAACC,SAAN,CAAgBH,OAAhB,CAAwBI,IAAxB,CACCG,UAAU,CAACC,QAAX,IAAuBD,UAAU,CAACE,KADnC,EAECZ,oBAFD;AAIA,GAPF;AAUAtB,EAAAA,QAAQ,CAACC,IAAT,CAAcuB,KAAd,CAAoBW,QAApB,GAA+B,UAA/B;AACAnC,EAAAA,QAAQ,CAACC,IAAT,CAAcuB,KAAd,CAAoBb,KAApB,GAA4B,MAA5B;AACAX,EAAAA,QAAQ,CAACC,IAAT,CAAcmC,YAAd,CAA4B,iCAA5B,EAA+D,EAA/D;AAEAjC,EAAAA,UAAU,GAzE4B,CA2EtC;AACA;;AACAJ,EAAAA,MAAM,CAACsB,gBAAP,CAAyB,QAAzB,EAAmClB,UAAnC,EAA+C,IAA/C;AACA,CA9ED;;AAgFA,MAAMqB,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,MAAMa,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,GAAGtD,uBAAuB,EAA3C;AACA,QAAMuD,GAAG,GAAG1D,MAAM,EAAlB;AACA,QAAM,CAAEoB,MAAF,EAAUuC,SAAV,IAAwB1D,QAAQ,CAAE,CAAF,CAAtC;AACA,QAAM,CAAE2D,WAAF,EAAeC,cAAf,IAAkC5D,QAAQ,CAAE6D,UAAU,EAAZ,CAAhD;AAEA,QAAMC,UAAU,GAAGrE,UAAU,CAACsE,GAAX,CAAgB,QAAhB,CAAnB;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkCjE,QAAQ,CAC/C8D,UAAU,CAAC5C,KAAX,IAAoB4C,UAAU,CAAC3C,MADgB,CAAhD;AAGA,QAAM+C,YAAY,GAAGnE,MAAM,CAAEiE,WAAF,CAA3B,CAVG,CAWH;AACA;AACA;AACA;;AACA,QAAMG,GAAG,GAAGvE,QAAQ,CAACwE,MAAT,CAAiB;AAC5BC,IAAAA,OAAO,EAAG,GAAGd,GAAK,IACjBS,WAAW,GAAG,WAAH,GAAiB,UAC5B,IAAIR,WAAa,EAHU;AAI5Bc,IAAAA,GAAG,EAAEf;AAJuB,GAAjB,CAAZ;;AAOA,WAASM,UAAT,GAAsB;AACrB;AACA;AACA;AACA;AACA,UAAMU,OAAO,GACZ;AAAM,MAAA,IAAI,EAAGtB;AAAb,OACC,4BACC,6BAASI,KAAT,CADD,EAEC;AACC,MAAA,IAAI,EAAC,UADN;AAEC,MAAA,OAAO,EAAC;AAFT,MAFD,EAMC;AAAO,MAAA,uBAAuB,EAAG;AAAEmB,QAAAA,MAAM,EAAEzC;AAAV;AAAjC,MAND,EAOGqB,MAAM,CAACqB,GAAP,CAAY,CAAEhC,KAAF,EAASiC,CAAT,KACb;AACC,MAAA,GAAG,EAAGA,CADP;AAEC,MAAA,uBAAuB,EAAG;AAAEF,QAAAA,MAAM,EAAE/B;AAAV;AAF3B,MADC,CAPH,CADD,EAeC;AACC,yCAAgC,iCADjC;AAEC,MAAA,SAAS,EAAGa;AAFb,OAIC;AAAK,MAAA,uBAAuB,EAAG;AAAEkB,QAAAA,MAAM,EAAExB;AAAV;AAA/B,MAJD,EAKC;AACC,MAAA,IAAI,EAAC,iBADN;AAEC,MAAA,uBAAuB,EAAG;AACzBwB,QAAAA,MAAM,EACLzB,QAAQ,IACP,IAAI3C,kBAAkB,CAACuE,QAAnB,EAA+B;AAHZ;AAF3B,MALD,EAaGxB,OAAO,CAACsB,GAAR,CAAeG,GAAF,IACd;AAAQ,MAAA,GAAG,EAAGA,GAAd;AAAoB,MAAA,GAAG,EAAGA;AAA1B,MADC,CAbH,CAfD,CADD;AAmCA,WAAO,oBAAoB/E,cAAc,CAAE0E,OAAF,CAAzC;AACA;;AAED,WAASM,iBAAT,GAAoD;AAAA,QAAxBC,aAAwB,uEAAR,KAAQ;AACnD,UAAMC,cAAc,GAAGlB,UAAU,EAAjC;;AAEA,QAAKiB,aAAa,IAAInB,WAAW,KAAKoB,cAAtC,EAAuD;AACtD;AACA;AACA;AACAnB,MAAAA,cAAc,CAAE,EAAF,CAAd;AACAoB,MAAAA,YAAY,CAAE,MAAMpB,cAAc,CAAEmB,cAAF,CAAtB,CAAZ;AACA,KAND,MAMO;AACNnB,MAAAA,cAAc,CAAEmB,cAAF,CAAd;AACA;AACD;;AAED,WAASE,qBAAT,CAAgCC,KAAhC,EAAwC;AACvC;AACA,QAAIC,IAAI,GAAGD,KAAK,CAACE,WAAN,CAAkBD,IAAlB,IAA0B,EAArC;;AAEA,QAAK,aAAa,OAAOA,IAAzB,EAAgC;AAC/B,UAAI;AACHA,QAAAA,IAAI,GAAGpE,IAAI,CAACsE,KAAL,CAAYF,IAAZ,CAAP;AACA,OAFD,CAEE,OAAQG,CAAR,EAAY,CAAE;AAChB,KARsC,CAUvC;AACA;;;AACA,QAAK,aAAaH,IAAI,CAAClE,MAAvB,EAAgC;AAC/B;AACA;;AAEDyC,IAAAA,SAAS,CAAEyB,IAAI,CAAChE,MAAP,CAAT;AACA;;AAED,WAASoE,YAAT,GAAwB;AACvB,UAAMC,aAAa,GAAGC,IAAI,CAACC,IAAL,CAAWvE,MAAX,CAAtB;AAEA,WAAOqE,aAAa,GAAG;AAAErE,MAAAA,MAAM,EAAEqE;AAAV,KAAH,GAA+B;AAAEG,MAAAA,WAAW,EAAE;AAAf,KAAnD;AACA;;AAED,WAASC,kBAAT,CAA6BC,UAA7B,EAA0C;AACzC5B,IAAAA,cAAc,CAAE4B,UAAU,CAACvF,MAAX,CAAkBY,KAAlB,IAA2B2E,UAAU,CAACvF,MAAX,CAAkBa,MAA/C,CAAd;AACA;;AAEDlB,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAM6F,4BAA4B,GAAGrG,UAAU,CAACmC,gBAAX,CACpC,QADoC,EAEpCgE,kBAFoC,CAArC;AAIA,WAAO,MAAM;AACZE,MAAAA,4BAA4B,CAACC,MAA7B;AACA,KAFD;AAGA,GARQ,EAQN,EARM,CAAT;AAUA9F,EAAAA,SAAS,CAAE,MAAM;AAChB4E,IAAAA,iBAAiB,GADD,CAEhB;AACA;AACA;AACA,GALQ,EAKN,CAAE7B,IAAF,EAAQK,KAAR,EAAeC,IAAf,EAAqBF,MAArB,EAA6BD,OAA7B,CALM,CAAT;AAOAlD,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA;AACA,QAAKiE,YAAY,CAAC8B,OAAb,KAAyBhC,WAA9B,EAA4C;AAC3CN,MAAAA,SAAS,CAAE,CAAF,CAAT;AACA;;AACDQ,IAAAA,YAAY,CAAC8B,OAAb,GAAuBhC,WAAvB;AACA,GAPQ,EAON,CAAEA,WAAF,CAPM,CAAT;AASA,SACC,cAAC,OAAD;AACC,IAAA,cAAc,EAAG,CAChB7D,aAAa,CAAE,4BAAF,CADG,EAEhB2C,cAFgB,CADlB;AAKC,IAAA,GAAG,EAAGqB,GALP;AAMC,IAAA,GAAG,EAAGV,GANP;AAOC,IAAA,MAAM,EAAG;AAAEwC,MAAAA,OAAO,EAAE/C,WAAX;AAAwBF,MAAAA,IAAI,EAAEW;AAA9B,KAPV,CAQC;AACA;AATD;AAUC,IAAA,eAAe,EAAG,CAAE,GAAF,CAVnB;AAWC,IAAA,KAAK,EAAG,CACPxD,aAAa,CAAE,0BAAF,CADN,EAEPoF,YAAY,EAFL,EAGP3F,QAAQ,CAACsG,SAAT,IAAsBC,gBAAgB,CAACC,OAHhC,CAXT;AAgBC,IAAA,SAAS,EAAGnB,qBAhBb;AAiBC,IAAA,aAAa,EAAG,KAjBjB;AAkBC,IAAA,sBAAsB,EAAG,KAlB1B;AAmBC,IAAA,8BAA8B,EAAG,KAnBlC;AAoBC,IAAA,4BAA4B,EAAG;AApBhC,IADD;AAwBA;;AAED,MAAMkB,gBAAgB,GAAGzG,UAAU,CAAC2G,MAAX,CAAmB;AAC3CD,EAAAA,OAAO,EAAE;AACR;AACF;AACA;AACA;AACA;AACEE,IAAAA,OAAO,EAAE;AAND;AADkC,CAAnB,CAAzB;AAWA,eAAexG,IAAI,CAAE+C,OAAF,CAAnB","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"]}
1	+ {"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["Dimensions","StyleSheet","WebView","Platform","renderToString","memo","useRef","useState","useEffect","usePreferredColorScheme","sandboxStyles","observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","colorScheme","ref","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","get","isLandscape","setIsLandscape","width","wasLandscape","key","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","baseUrl","isAndroid","workaroundStyles","webView","create","opacity"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,cAAvC;AACA,SAASC,OAAT,QAAwB,sBAAxB;AAEA;AACA;AACA;;AACA,SACCC,QADD,EAECC,cAFD,EAGCC,IAHD,EAICC,MAJD,EAKCC,QALD,EAMCC,SAND,QAOO,oBAPP;AAQA,SAASC,uBAAT,QAAwC,oBAAxC;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,cAA1B;AAEA,MAAMC,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA9EA;AAgFA,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,W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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\tconst { MutationObserver } = window;\n\n\t\tif ( ! MutationObserver \|\| ! document.body \|\| ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tconst 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\t\t\twindow.ReactNativeWebView.postMessage(\n\t\t\t\tJSON.stringify( {\n\t\t\t\t\taction: 'resize',\n\t\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\t\theight: clientBoundingRect.height,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\n\t\tconst observer = 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 (\n\t\t\t\t\tstyle\n\t\t\t\t) {\n\t\t\t\t\tif (\n\t\t\t\t\t\t/^\\\\d+(vmin\|vmax\|vh\|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t\t) {\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(\n\t\t\tdocument.querySelectorAll( '[style]' ),\n\t\t\tremoveViewportStyles\n\t\t);\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.styleSheets,\n\t\t\tfunction ( stylesheet ) {\n\t\t\t\tArray.prototype.forEach.call(\n\t\t\t\t\tstylesheet.cssRules \|\| stylesheet.rules,\n\t\t\t\t\tremoveViewportStyles\n\t\t\t\t);\n\t\t\t}\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\t\twindow.addEventListener( 'orientationchange', sendResize, true );\n\t\twidow.addEventListener( 'click', sendResize, true );\n\t})();\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{ 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\tinjectedJavaScript={ customJS \|\| observeAndResizeJS }\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-module/tab-panel/index.js CHANGED Viewed

@@ -9,7 +9,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import { useState, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -104,7 +104,7 @@ export function TabPanel(_ref2) {
   });
   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(() => {
+  useLayoutEffect(() => {
     // If there's a selected tab, don't override it.
     if (selectedTab) {
       return;

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

	@@ -1 +1 @@
1	- {"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":";;;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,QAFmB;AAGnBC,IAAAA,QAHmB;AAInB,OAAGC;AAJgB,GAAF;AAAA,SAMjB,cAAC,MAAD;AACC,IAAA,IAAI,EAAC,KADN;AAEC,IAAA,QAAQ,EAAGD,QAAQ,GAAGE,SAAH,GAAe,CAAC,CAFpC;AAGC,qBAAgBF,QAHjB;AAIC,IAAA,EAAE,EAAGF,KAJN;AAKC,IAAA,yBAAyB;AAL1B,KAMMG,IANN,GAQGF,QARH,CANiB;AAAA,CAAlB;AAkBA;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,SAASI,QAAT,QASqD;AAAA;;AAAA,MATlC;AACzBC,IAAAA,SADyB;AAEzBL,IAAAA,QAFyB;AAGzBM,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,CAAEH,QAAF,EAAYY,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,KAAKrB,QAAzB;AAAA,GAAX,CAApB;AACA,QAAMsB,UAAU,GAAI,GAAGX,UAAY,IAAhB,qBAAoBQ,WAApB,aAAoBA,WAApB,uBAAoBA,WAAW,CAAEE,IAAjC,iEAAyC,MAAQ,EAApE,CArB2D,CAuB3D;;AACA7B,EAAAA,~~SAAS~~,CAAE,MAAM;~~AAChB~~;AACA,QAAK2B,WAAL,EAAmB;AAClB;AACA;;AAED,UAAMI,UAAU,GAAGlB,IAAI,CAACe,IAAL,CAAaI,GAAF,IAAWA,GAAG,CAACH,IAAJ,KAAad,cAAnC,CAAnB,~~CANgB~~,~~CAQhB~~;AACA;AACA;;AACA,QAAKA,cAAc,IAAI,CAAEgB,UAAzB,EAAsC;AACrC;AACA;;AAED,QAAKA,UAAU,IAAI,CAAEA,UAAU,CAACE,QAAhC,EAA2C;AAC1C;AACAZ,MAAAA,kBAAkB,CAAEU,UAAU,CAACF,IAAb,CAAlB;AACA,KAHD,MAGO;AACN;AACA,YAAMK,eAAe,GAAGrB,IAAI,CAACe,IAAL,CAAaI,GAAF,IAAW,CAAEA,GAAG,CAACC,QAA5B,CAAxB;AACA,UAAKC,eAAL,EAAuBb,kBAAkB,CAAEa,eAAe,CAACL,IAAlB,CAAlB;AACvB;AACD,~~GAvBQ~~,~~EAuBN~~,CAAEhB,IAAF,EAAQc,WAAR,EAAqBZ,cAArB,EAAqCM,kBAArC,~~CAvBM~~,~~CAAT~~,CAxB2D,CAiD3D;;~~AACArB~~,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA,QAAK,~~EAAE2B~~,WAAF,aAAEA,WAAF,eAAEA,WAAW,CAAEM,QAAf,CAAL,EAA+B;AAC9B;AACA;;AAED,UAAMC,eAAe,GAAGrB,IAAI,CAACe,IAAL,CAAaI,GAAF,IAAW,CAAEA,GAAG,CAACC,QAA5B,CAAxB,CANgB,CAQhB;AACA;;AACA,QAAKC,eAAL,EAAuB;AACtBb,MAAAA,kBAAkB,CAAEa,eAAe,CAACL,IAAlB,CAAlB;AACA;AACD,GAbQ,EAaN,CAAEhB,IAAF,EAAQc,WAAR,aAAQA,WAAR,uBAAQA,WAAW,CAAEM,QAArB,EAA+BZ,kBAA/B,CAbM,CAAT;AAeA,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,GAA8Bb,SAJ5C;AAMC,IAAA,SAAS,EAAC;AANX,KAQGG,IAAI,CAACsB,GAAL,CAAYH,GAAF,IACX,cAAC,SAAD;AACC,IAAA,SAAS,~~EAAGlC~~,UAAU,CACrB,iCADqB,~~EAErBkC~~,GAAG,CAACpB,SAFiB,EAGrB;AACC,OAAEK,WAAF,GAAiBe,GAAG,CAACH,IAAJ,KAAarB;AAD/B,KAHqB,CADvB;AAQC,IAAA,KAAK,EAAI,GAAGW,UAAY,IAAIa,GAAG,CAACH,IAAM,EARvC;AASC,qBAAiB,GAAGV,UAAY,IAAIa,GAAG,CAACH,IAAM,OAT/C;AAUC,IAAA,QAAQ,EAAGG,GAAG,CAACH,IAAJ,KAAarB,QAVzB;AAWC,IAAA,GAAG,EAAGwB,GAAG,CAACH,IAXX;AAYC,IAAA,OAAO,EAAG,MAAMR,kBAAkB,CAAEW,GAAG,CAACH,IAAN,CAZnC;AAaC,IAAA,QAAQ,EAAGG,GAAG,CAACC,QAbhB;AAcC,IAAA,KAAK,EAAGD,GAAG,CAACI,IAAJ,IAAYJ,GAAG,CAACK,KAdzB;AAeC,IAAA,IAAI,EAAGL,GAAG,CAACI,IAfZ;AAgBC,IAAA,WAAW,EAAG,CAAC,CAAEJ,GAAG,CAACI;AAhBtB,KAkBG,CAAEJ,GAAG,CAACI,IAAN,IAAcJ,GAAG,CAACK,KAlBrB,CADC,CARH,CADD,EAgCGV,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,KAOGvB,QAAQ,CAAEoB,WAAF,CAPX,CAjCF,CADD;AA8CA;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\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"]}
1	+ {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","useState","useEffect","useLayoutEffect","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":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SACCC,QADD,EAECC,SAFD,EAGCC,eAHD,EAICC,WAJD,QAKO,oBALP;AAMA,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,QAFmB;AAGnBC,IAAAA,QAHmB;AAInB,OAAGC;AAJgB,GAAF;AAAA,SAMjB,cAAC,MAAD;AACC,IAAA,IAAI,EAAC,KADN;AAEC,IAAA,QAAQ,EAAGD,QAAQ,GAAGE,SAAH,GAAe,CAAC,CAFpC;AAGC,qBAAgBF,QAHjB;AAIC,IAAA,EAAE,EAAGF,KAJN;AAKC,IAAA,yBAAyB;AAL1B,KAMMG,IANN,GAQGF,QARH,CANiB;AAAA,CAAlB;AAkBA;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,SAASI,QAAT,QASqD;AAAA;;AAAA,MATlC;AACzBC,IAAAA,SADyB;AAEzBL,IAAAA,QAFyB;AAGzBM,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,CAAEH,QAAF,EAAYY,WAAZ,IAA4BtB,QAAQ,EAA1C;AAEA,QAAMuB,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,KAAKrB,QAAzB;AAAA,GAAX,CAApB;AACA,QAAMsB,UAAU,GAAI,GAAGX,UAAY,IAAhB,qBAAoBQ,WAApB,aAAoBA,WAApB,uBAAoBA,WAAW,CAAEE,IAAjC,iEAAyC,MAAQ,EAApE,CArB2D,CAuB3D;;AACA7B,EAAAA,eAAe,CAAE,MAAM;AACtB;AACA,QAAK2B,WAAL,EAAmB;AAClB;AACA;;AAED,UAAMI,UAAU,GAAGlB,IAAI,CAACe,IAAL,CAAaI,GAAF,IAAWA,GAAG,CAACH,IAAJ,KAAad,cAAnC,CAAnB,CANsB,CAQtB;AACA;AACA;;AACA,QAAKA,cAAc,IAAI,CAAEgB,UAAzB,EAAsC;AACrC;AACA;;AAED,QAAKA,UAAU,IAAI,CAAEA,UAAU,CAACE,QAAhC,EAA2C;AAC1C;AACAZ,MAAAA,kBAAkB,CAAEU,UAAU,CAACF,IAAb,CAAlB;AACA,KAHD,MAGO;AACN;AACA,YAAMK,eAAe,GAAGrB,IAAI,CAACe,IAAL,CAAaI,GAAF,IAAW,CAAEA,GAAG,CAACC,QAA5B,CAAxB;AACA,UAAKC,eAAL,EAAuBb,kBAAkB,CAAEa,eAAe,CAACL,IAAlB,CAAlB;AACvB;AACD,GAvBc,EAuBZ,CAAEhB,IAAF,EAAQc,WAAR,EAAqBZ,cAArB,EAAqCM,kBAArC,CAvBY,CAAf,CAxB2D,CAiD3D;;AACAtB,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA,QAAK,EAAE4B,WAAF,aAAEA,WAAF,eAAEA,WAAW,CAAEM,QAAf,CAAL,EAA+B;AAC9B;AACA;;AAED,UAAMC,eAAe,GAAGrB,IAAI,CAACe,IAAL,CAAaI,GAAF,IAAW,CAAEA,GAAG,CAACC,QAA5B,CAAxB,CANgB,CAQhB;AACA;;AACA,QAAKC,eAAL,EAAuB;AACtBb,MAAAA,kBAAkB,CAAEa,eAAe,CAACL,IAAlB,CAAlB;AACA;AACD,GAbQ,EAaN,CAAEhB,IAAF,EAAQc,WAAR,aAAQA,WAAR,uBAAQA,WAAW,CAAEM,QAArB,EAA+BZ,kBAA/B,CAbM,CAAT;AAeA,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,GAA8Bb,SAJ5C;AAMC,IAAA,SAAS,EAAC;AANX,KAQGG,IAAI,CAACsB,GAAL,CAAYH,GAAF,IACX,cAAC,SAAD;AACC,IAAA,SAAS,EAAGnC,UAAU,CACrB,iCADqB,EAErBmC,GAAG,CAACpB,SAFiB,EAGrB;AACC,OAAEK,WAAF,GAAiBe,GAAG,CAACH,IAAJ,KAAarB;AAD/B,KAHqB,CADvB;AAQC,IAAA,KAAK,EAAI,GAAGW,UAAY,IAAIa,GAAG,CAACH,IAAM,EARvC;AASC,qBAAiB,GAAGV,UAAY,IAAIa,GAAG,CAACH,IAAM,OAT/C;AAUC,IAAA,QAAQ,EAAGG,GAAG,CAACH,IAAJ,KAAarB,QAVzB;AAWC,IAAA,GAAG,EAAGwB,GAAG,CAACH,IAXX;AAYC,IAAA,OAAO,EAAG,MAAMR,kBAAkB,CAAEW,GAAG,CAACH,IAAN,CAZnC;AAaC,IAAA,QAAQ,EAAGG,GAAG,CAACC,QAbhB;AAcC,IAAA,KAAK,EAAGD,GAAG,CAACI,IAAJ,IAAYJ,GAAG,CAACK,KAdzB;AAeC,IAAA,IAAI,EAAGL,GAAG,CAACI,IAfZ;AAgBC,IAAA,WAAW,EAAG,CAAC,CAAEJ,GAAG,CAACI;AAhBtB,KAkBG,CAAEJ,GAAG,CAACI,IAAN,IAAcJ,GAAG,CAACK,KAlBrB,CADC,CARH,CADD,EAgCGV,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,KAOGvB,QAAQ,CAAEoB,WAAF,CAPX,CAjCF,CADD;AA8CA;AAED,eAAehB,QAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallback,\n} 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\tuseLayoutEffect( () => {\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"]}

package/build-module/tools-panel/tools-panel/hook.js CHANGED Viewed

@@ -15,8 +15,13 @@ const generateMenuItems = _ref => {
   let {
     panelItems,
     shouldReset,
-    currentMenuItems
+    currentMenuItems,
+    menuItemOrder
   } = _ref;
+  const newMenuItems = {
+    default: {},
+    optional: {}
+  };
   const menuItems = {
     default: {},
     optional: {}
@@ -35,7 +40,28 @@ const generateMenuItems = _ref => {
     const existingItemValue = currentMenuItems === null || currentMenuItems === void 0 ? void 0 : (_currentMenuItems$gro = currentMenuItems[group]) === null || _currentMenuItems$gro === void 0 ? void 0 : _currentMenuItems$gro[label];
     const value = existingItemValue ? existingItemValue : hasValue();
-    menuItems[group][label] = shouldReset ? false : value;
+    newMenuItems[group][label] = shouldReset ? false : value;
+  }); // Loop the known, previously registered items first to maintain menu order.
+  menuItemOrder.forEach(key => {
+    if (newMenuItems.default.hasOwnProperty(key)) {
+      menuItems.default[key] = newMenuItems.default[key];
+    }
+    if (newMenuItems.optional.hasOwnProperty(key)) {
+      menuItems.optional[key] = newMenuItems.optional[key];
+    }
+  }); // Loop newMenuItems object adding any that aren't in the known items order.
+  Object.keys(newMenuItems.default).forEach(key => {
+    if (!menuItems.default.hasOwnProperty(key)) {
+      menuItems.default[key] = newMenuItems.default[key];
+    }
+  });
+  Object.keys(newMenuItems.optional).forEach(key => {
+    if (!menuItems.optional.hasOwnProperty(key)) {
+      menuItems.optional[key] = newMenuItems.optional[key];
+    }
   });
   return menuItems;
 };
@@ -67,8 +93,10 @@ export function useToolsPanel(props) {
   }, [wasResetting]); // Allow panel items to register themselves.
   const [panelItems, setPanelItems] = useState([]);
+  const [menuItemOrder, setMenuItemOrder] = useState([]);
   const [resetAllFilters, setResetAllFilters] = useState([]);
   const registerPanelItem = useCallback(item => {
+    // Add item to panel items.
     setPanelItems(items => {
       const newItems = [...items]; // If an item with this label has already been registered, remove it
       // first. This can happen when an item is moved between the default
@@ -81,8 +109,17 @@ export function useToolsPanel(props) {
       }
       return [...newItems, item];
+    }); // Track the initial order of item registration. This is used for
+    // maintaining menu item order later.
+    setMenuItemOrder(items => {
+      if (items.includes(item.label)) {
+        return items;
+      }
+      return [...items, item.label];
     });
-  }, [setPanelItems]); // Panels need to deregister on unmount to avoid orphans in menu state.
+  }, [setPanelItems, setMenuItemOrder]); // Panels need to deregister on unmount to avoid orphans in menu state.
   // This is an issue when panel items are being injected via SlotFills.
   const deregisterPanelItem = useCallback(label => {
@@ -122,11 +159,12 @@ export function useToolsPanel(props) {
       const items = generateMenuItems({
         panelItems,
         shouldReset: false,
-        currentMenuItems: prevState
+        currentMenuItems: prevState,
+        menuItemOrder
       });
       return items;
     });
-  }, [panelItems, setMenuItems]); // Force a menu item to be checked.
+  }, [panelItems, setMenuItems, menuItemOrder]); // 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.
@@ -189,10 +227,11 @@ export function useToolsPanel(props) {
     const resetMenuItems = generateMenuItems({
       panelItems,
+      menuItemOrder,
       shouldReset: true
     });
     setMenuItems(resetMenuItems);
-  }, [panelItems, resetAllFilters, resetAll, setMenuItems]); // Assist ItemGroup styling when there are potentially hidden placeholder
+  }, [panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder]); // Assist ItemGroup styling when there are potentially hidden placeholder
   // items by identifying first & last items that are toggled on for display.
   const getFirstVisibleItemLabel = items => {

package/build-module/tools-panel/tools-panel/hook.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["useCallback","useEffect","useMemo","useRef","useState","styles","useContextSystem","useCx","DEFAULT_COLUMNS","generateMenuItems","panelItems","shouldReset","currentMenuItems","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","existingItemValue","value","isMenuItemTypeEmpty","obj","Object","keys","length","useToolsPanel","props","className","headingLevel","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","otherProps","isResetting","wasResetting","current","setPanelItems","resetAllFilters","setResetAllFilters","registerPanelItem","item","items","newItems","existingIndex","findIndex","oldItem","splice","deregisterPanelItem","index","registerResetAllFilter","newFilter","filters","deregisterResetAllFilter","filterToRemove","filter","setMenuItems","prevState","flagItemCustomization","newState","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","allControlsHidden","entries","some","isSelected","cx","classes","wrapperStyle","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","newMenuItems","resetAllItems","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\tResetAllFilter,\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 has already been flagged as customized\n\t\t// (for default controls), or toggled on (for optional controls), do not\n\t\t// overwrite its value as those controls would lose that state.\n\t\tconst existingItemValue = currentMenuItems?.[ group ]?.[ label ];\n\t\tconst value = existingItemValue ? 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\theadingLevel = 2,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper = false,\n\t\tshouldRenderPlaceholderItems = false,\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\tconst [ resetAllFilters, setResetAllFilters ] = useState<\n\t\tResetAllFilter[]\n\t>( [] );\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\tconst registerResetAllFilter = useCallback(\n\t\t( newFilter: ResetAllFilter ) => {\n\t\t\tsetResetAllFilters( ( filters ) => {\n\t\t\t\treturn [ ...filters, newFilter ];\n\t\t\t} );\n\t\t},\n\t\t[ setResetAllFilters ]\n\t);\n\n\tconst deregisterResetAllFilter = useCallback(\n\t\t( filterToRemove: ResetAllFilter ) => {\n\t\t\tsetResetAllFilters( ( filters ) => {\n\t\t\t\treturn filters.filter(\n\t\t\t\t\t( filter ) => filter !== filterToRemove\n\t\t\t\t);\n\t\t\t} );\n\t\t},\n\t\t[ setResetAllFilters ]\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\t\t\tresetAll( resetAllFilters );\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, resetAllFilters, 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\tderegisterResetAllFilter,\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\tregisterResetAllFilter,\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\tderegisterResetAllFilter,\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\tregisterResetAllFilter,\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\theadingLevel,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["useCallback","useEffect","useMemo","useRef","useState","styles","useContextSystem","useCx","DEFAULT_COLUMNS","generateMenuItems","panelItems","shouldReset","currentMenuItems","menuItemOrder","newMenuItems","default","optional","menuItems","forEach","hasValue","isShownByDefault","label","group","existingItemValue","value","key","hasOwnProperty","Object","keys","isMenuItemTypeEmpty","obj","length","useToolsPanel","props","className","headingLevel","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","__experimentalFirstVisibleItemClass","__experimentalLastVisibleItemClass","otherProps","isResetting","wasResetting","current","setPanelItems","setMenuItemOrder","resetAllFilters","setResetAllFilters","registerPanelItem","item","items","newItems","existingIndex","findIndex","oldItem","splice","includes","deregisterPanelItem","index","registerResetAllFilter","newFilter","filters","deregisterResetAllFilter","filterToRemove","filter","setMenuItems","prevState","flagItemCustomization","newState","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","allControlsHidden","entries","some","isSelected","cx","classes","wrapperStyle","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","resetAllItems","resetMenuItems","getFirstVisibleItemLabel","optionalItems","firstItem","firstDisplayedItem","lastDisplayedItem","reverse","panelContext","hasMenuItems"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,WADD,EAECC,SAFD,EAGCC,OAHD,EAICC,MAJD,EAKCC,QALD,QAMO,oBANP;AAQA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAUA,MAAMC,eAAe,GAAG,CAAxB;;AAEA,MAAMC,iBAAiB,GAAG,QAKQ;AAAA,MALN;AAC3BC,IAAAA,UAD2B;AAE3BC,IAAAA,WAF2B;AAG3BC,IAAAA,gBAH2B;AAI3BC,IAAAA;AAJ2B,GAKM;AACjC,QAAMC,YAAiC,GAAG;AAAEC,IAAAA,OAAO,EAAE,EAAX;AAAeC,IAAAA,QAAQ,EAAE;AAAzB,GAA1C;AACA,QAAMC,SAA8B,GAAG;AAAEF,IAAAA,OAAO,EAAE,EAAX;AAAeC,IAAAA,QAAQ,EAAE;AAAzB,GAAvC;AAEAN,EAAAA,UAAU,CAACQ,OAAX,CAAoB,SAA6C;AAAA;;AAAA,QAA3C;AAAEC,MAAAA,QAAF;AAAYC,MAAAA,gBAAZ;AAA8BC,MAAAA;AAA9B,KAA2C;AAChE,UAAMC,KAAK,GAAGF,gBAAgB,GAAG,SAAH,GAAe,UAA7C,CADgE,CAGhE;AACA;AACA;;AACA,UAAMG,iBAAiB,GAAGX,gBAAH,aAAGA,gBAAH,gDAAGA,gBAAgB,CAAIU,KAAJ,CAAnB,0DAAG,sBAA+BD,KAA/B,CAA1B;AACA,UAAMG,KAAK,GAAGD,iBAAiB,GAAGA,iBAAH,GAAuBJ,QAAQ,EAA9D;AAEAL,IAAAA,YAAY,CAAEQ,KAAF,CAAZ,CAAuBD,KAAvB,IAAiCV,WAAW,GAAG,KAAH,GAAWa,KAAvD;AACA,GAVD,EAJiC,CAgBjC;;AACAX,EAAAA,aAAa,CAACK,OAAd,CAAyBO,GAAF,IAAW;AACjC,QAAKX,YAAY,CAACC,OAAb,CAAqBW,cAArB,CAAqCD,GAArC,CAAL,EAAkD;AACjDR,MAAAA,SAAS,CAACF,OAAV,CAAmBU,GAAnB,IAA2BX,YAAY,CAACC,OAAb,CAAsBU,GAAtB,CAA3B;AACA;;AAED,QAAKX,YAAY,CAACE,QAAb,CAAsBU,cAAtB,CAAsCD,GAAtC,CAAL,EAAmD;AAClDR,MAAAA,SAAS,CAACD,QAAV,CAAoBS,GAApB,IAA4BX,YAAY,CAACE,QAAb,CAAuBS,GAAvB,CAA5B;AACA;AACD,GARD,EAjBiC,CA2BjC;;AACAE,EAAAA,MAAM,CAACC,IAAP,CAAad,YAAY,CAACC,OAA1B,EAAoCG,OAApC,CAA+CO,GAAF,IAAW;AACvD,QAAK,CAAER,SAAS,CAACF,OAAV,CAAkBW,cAAlB,CAAkCD,GAAlC,CAAP,EAAiD;AAChDR,MAAAA,SAAS,CAACF,OAAV,CAAmBU,GAAnB,IAA2BX,YAAY,CAACC,OAAb,CAAsBU,GAAtB,CAA3B;AACA;AACD,GAJD;AAMAE,EAAAA,MAAM,CAACC,IAAP,CAAad,YAAY,CAACE,QAA1B,EAAqCE,OAArC,CAAgDO,GAAF,IAAW;AACxD,QAAK,CAAER,SAAS,CAACD,QAAV,CAAmBU,cAAnB,CAAmCD,GAAnC,CAAP,EAAkD;AACjDR,MAAAA,SAAS,CAACD,QAAV,CAAoBS,GAApB,IAA4BX,YAAY,CAACE,QAAb,CAAuBS,GAAvB,CAA5B;AACA;AACD,GAJD;AAMA,SAAOR,SAAP;AACA,CA9CD;;AAgDA,MAAMY,mBAAmB,GACxBC,GAD2B,IAEvBA,GAAG,IAAIH,MAAM,CAACC,IAAP,CAAaE,GAAb,EAAmBC,MAAnB,KAA8B,CAF1C;;AAIA,OAAO,SAASC,aAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,YAAY,GAAG,CAFV;AAGLC,IAAAA,QAHK;AAILC,IAAAA,OAJK;AAKLC,IAAAA,eAAe,GAAG,KALb;AAMLC,IAAAA,4BAA4B,GAAG,KAN1B;AAOLC,IAAAA,mCAPK;AAQLC,IAAAA,kCARK;AASL,OAAGC;AATE,MAUFpC,gBAAgB,CAAE2B,KAAF,EAAS,YAAT,CAVpB;AAYA,QAAMU,WAAW,GAAGxC,MAAM,CAAE,KAAF,CAA1B;AACA,QAAMyC,YAAY,GAAGD,WAAW,CAACE,OAAjC,CAdC,CAgBD;AACA;AACA;AACA;;AACA5C,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK2C,YAAL,EAAoB;AACnBD,MAAAA,WAAW,CAACE,OAAZ,GAAsB,KAAtB;AACA;AACD,GAJQ,EAIN,CAAED,YAAF,CAJM,CAAT,CApBC,CA0BD;;AACA,QAAM,CAAElC,UAAF,EAAcoC,aAAd,IAAgC1C,QAAQ,CAAsB,EAAtB,CAA9C;AACA,QAAM,CAAES,aAAF,EAAiBkC,gBAAjB,IAAsC3C,QAAQ,CAAc,EAAd,CAApD;AACA,QAAM,CAAE4C,eAAF,EAAmBC,kBAAnB,IAA0C7C,QAAQ,CAErD,EAFqD,CAAxD;AAIA,QAAM8C,iBAAiB,GAAGlD,WAAW,CAClCmD,IAAF,IAA4B;AAC3B;AACAL,IAAAA,aAAa,CAAIM,KAAF,IAAa;AAC3B,YAAMC,QAAQ,GAAG,CAAE,GAAGD,KAAL,CAAjB,CAD2B,CAE3B;AACA;AACA;;AACA,YAAME,aAAa,GAAGD,QAAQ,CAACE,SAAT,CACnBC,OAAF,IAAeA,OAAO,CAACnC,KAAR,KAAkB8B,IAAI,CAAC9B,KADjB,CAAtB;;AAGA,UAAKiC,aAAa,KAAK,CAAC,CAAxB,EAA4B;AAC3BD,QAAAA,QAAQ,CAACI,MAAT,CAAiBH,aAAjB,EAAgC,CAAhC;AACA;;AACD,aAAO,CAAE,GAAGD,QAAL,EAAeF,IAAf,CAAP;AACA,KAZY,CAAb,CAF2B,CAgB3B;AACA;;AACAJ,IAAAA,gBAAgB,CAAIK,KAAF,IAAa;AAC9B,UAAKA,KAAK,CAACM,QAAN,CAAgBP,IAAI,CAAC9B,KAArB,CAAL,EAAoC;AACnC,eAAO+B,KAAP;AACA;;AAED,aAAO,CAAE,GAAGA,KAAL,EAAYD,IAAI,CAAC9B,KAAjB,CAAP;AACA,KANe,CAAhB;AAOA,GA1BmC,EA2BpC,CAAEyB,aAAF,EAAiBC,gBAAjB,CA3BoC,CAArC,CAjCC,CA+DD;AACA;;AACA,QAAMY,mBAAmB,GAAG3D,WAAW,CACpCqB,KAAF,IAAqB;AACpB;AACA;AACA;AACA;AACAyB,IAAAA,aAAa,CAAIM,KAAF,IAAa;AAC3B,YAAMC,QAAQ,GAAG,CAAE,GAAGD,KAAL,CAAjB;AACA,YAAMQ,KAAK,GAAGP,QAAQ,CAACE,SAAT,CACXJ,IAAF,IAAYA,IAAI,CAAC9B,KAAL,KAAeA,KADd,CAAd;;AAGA,UAAKuC,KAAK,KAAK,CAAC,CAAhB,EAAoB;AACnBP,QAAAA,QAAQ,CAACI,MAAT,CAAiBG,KAAjB,EAAwB,CAAxB;AACA;;AACD,aAAOP,QAAP;AACA,KATY,CAAb;AAUA,GAhBqC,EAiBtC,CAAEP,aAAF,CAjBsC,CAAvC;AAoBA,QAAMe,sBAAsB,GAAG7D,WAAW,CACvC8D,SAAF,IAAiC;AAChCb,IAAAA,kBAAkB,CAAIc,OAAF,IAAe;AAClC,aAAO,CAAE,GAAGA,OAAL,EAAcD,SAAd,CAAP;AACA,KAFiB,CAAlB;AAGA,GALwC,EAMzC,CAAEb,kBAAF,CANyC,CAA1C;AASA,QAAMe,wBAAwB,GAAGhE,WAAW,CACzCiE,cAAF,IAAsC;AACrChB,IAAAA,kBAAkB,CAAIc,OAAF,IAAe;AAClC,aAAOA,OAAO,CAACG,MAAR,CACJA,MAAF,IAAcA,MAAM,KAAKD,cADnB,CAAP;AAGA,KAJiB,CAAlB;AAKA,GAP0C,EAQ3C,CAAEhB,kBAAF,CAR2C,CAA5C,CA9FC,CAyGD;;AACA,QAAM,CAAEhC,SAAF,EAAakD,YAAb,IAA8B/D,QAAQ,CAAyB;AACpEW,IAAAA,OAAO,EAAE,EAD2D;AAEpEC,IAAAA,QAAQ,EAAE;AAF0D,GAAzB,CAA5C,CA1GC,CA+GD;;AACAf,EAAAA,SAAS,CAAE,MAAM;AAChBkE,IAAAA,YAAY,CAAIC,SAAF,IAAiB;AAC9B,YAAMhB,KAAK,GAAG3C,iBAAiB,CAAE;AAChCC,QAAAA,UADgC;AAEhCC,QAAAA,WAAW,EAAE,KAFmB;AAGhCC,QAAAA,gBAAgB,EAAEwD,SAHc;AAIhCvD,QAAAA;AAJgC,OAAF,CAA/B;AAMA,aAAOuC,KAAP;AACA,KARW,CAAZ;AASA,GAVQ,EAUN,CAAE1C,UAAF,EAAcyD,YAAd,EAA4BtD,aAA5B,CAVM,CAAT,CAhHC,CA4HD;AACA;AACA;AACA;;AACA,QAAMwD,qBAAqB,GAAGrE,WAAW,CACxC,UAAEqB,KAAF,EAA+D;AAAA,QAA9CC,KAA8C,uEAAf,SAAe;AAC9D6C,IAAAA,YAAY,CAAIf,KAAF,IAAa;AAC1B,YAAMkB,QAAQ,GAAG,EAChB,GAAGlB,KADa;AAEhB,SAAE9B,KAAF,GAAW,EACV,GAAG8B,KAAK,CAAE9B,KAAF,CADE;AAEV,WAAED,KAAF,GAAW;AAFD;AAFK,OAAjB;AAOA,aAAOiD,QAAP;AACA,KATW,CAAZ;AAUA,GAZuC,EAaxC,CAAEH,YAAF,CAbwC,CAAzC,CAhIC,CAgJD;AACA;AACA;AACA;;AACA,QAAM,CAAEI,4BAAF,EAAgCC,+BAAhC,IACLpE,QAAQ,CAAE,KAAF,CADT;AAGAH,EAAAA,SAAS,CAAE,MAAM;AAChB,QACC4B,mBAAmB,CAAEZ,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEF,OAAb,CAAnB,IACA,CAAEc,mBAAmB,CAAEZ,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAED,QAAb,CAFtB,EAGE;AACD,YAAMyD,iBAAiB,GAAG,CAAE9C,MAAM,CAAC+C,OAAP,CAC3BzD,SAAS,CAACD,QADiB,EAE1B2D,IAF0B,CAEpB;AAAA,YAAE,GAAIC,UAAJ,CAAF;AAAA,eAAwBA,UAAxB;AAAA,OAFoB,CAA5B;AAGAJ,MAAAA,+BAA+B,CAAEC,iBAAF,CAA/B;AACA;AACD,GAVQ,EAUN,CAAExD,SAAF,EAAauD,+BAAb,CAVM,CAAT;AAYA,QAAMK,EAAE,GAAGtE,KAAK,EAAhB;AACA,QAAMuE,OAAO,GAAG5E,OAAO,CAAE,MAAM;AAC9B,UAAM6E,YAAY,GACjBzC,eAAe,IACfjC,MAAM,CAAC2E,0BAAP,CAAmCxE,eAAnC,CAFD;AAGA,UAAMyE,UAAU,GACfpD,mBAAmB,CAAEZ,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEF,OAAb,CAAnB,IACAwD,4BADA,IAEAlE,MAAM,CAAC6E,4BAHR;AAKA,WAAOL,EAAE,CACRxE,MAAM,CAAC8E,UAAP,CAAmB3E,eAAnB,CADQ,EAERuE,YAFQ,EAGRE,UAHQ,EAIR/C,SAJQ,CAAT;AAMA,GAfsB,EAepB,CACFqC,4BADE,EAEFrC,SAFE,EAGF2C,EAHE,EAIFvC,eAJE,EAKFrB,SALE,CAfoB,CAAvB,CApKC,CA2LD;AACA;;AACA,QAAMmE,UAAU,GAAGpF,WAAW,CAC3BqB,KAAF,IAAqB;AACpB,UAAMgE,WAAW,GAAG3E,UAAU,CAAC4E,IAAX,CACjBnC,IAAF,IAAYA,IAAI,CAAC9B,KAAL,KAAeA,KADR,CAApB;;AAIA,QAAK,CAAEgE,WAAP,EAAqB;AACpB;AACA;;AAED,UAAME,SAAS,GAAGF,WAAW,CAACjE,gBAAZ,GACf,SADe,GAEf,UAFH;AAIA,UAAMN,YAAY,GAAG,EACpB,GAAGG,SADiB;AAEpB,OAAEsE,SAAF,GAAe,EACd,GAAGtE,SAAS,CAAEsE,SAAF,CADE;AAEd,SAAElE,KAAF,GAAW,CAAEJ,SAAS,CAAEsE,SAAF,CAAT,CAAwBlE,KAAxB;AAFC;AAFK,KAArB;AAQA8C,IAAAA,YAAY,CAAErD,YAAF,CAAZ;AACA,GAvB4B,EAwB7B,CAAEG,SAAF,EAAaP,UAAb,EAAyByD,YAAzB,CAxB6B,CAA9B,CA7LC,CAwND;;AACA,QAAMqB,aAAa,GAAGxF,WAAW,CAAE,MAAM;AACxC,QAAK,OAAOoC,QAAP,KAAoB,UAAzB,EAAsC;AACrCO,MAAAA,WAAW,CAACE,OAAZ,GAAsB,IAAtB;AACAT,MAAAA,QAAQ,CAAEY,eAAF,CAAR;AACA,KAJuC,CAMxC;;;AACA,UAAMyC,cAAc,GAAGhF,iBAAiB,CAAE;AACzCC,MAAAA,UADyC;AAEzCG,MAAAA,aAFyC;AAGzCF,MAAAA,WAAW,EAAE;AAH4B,KAAF,CAAxC;AAKAwD,IAAAA,YAAY,CAAEsB,cAAF,CAAZ;AACA,GAbgC,EAa9B,CAAE/E,UAAF,EAAcsC,eAAd,EAA+BZ,QAA/B,EAAyC+B,YAAzC,EAAuDtD,aAAvD,CAb8B,CAAjC,CAzNC,CAwOD;AACA;;AACA,QAAM6E,wBAAwB,GAAKtC,KAAF,IAA+B;AAC/D,UAAMuC,aAAa,GAAG1E,SAAS,CAACD,QAAV,IAAsB,EAA5C;AACA,UAAM4E,SAAS,GAAGxC,KAAK,CAACkC,IAAN,CACfnC,IAAF,IAAYA,IAAI,CAAC/B,gBAAL,IAAyB,CAAC,CAAEuE,aAAa,CAAExC,IAAI,CAAC9B,KAAP,CADpC,CAAlB;AAIA,WAAOuE,SAAP,aAAOA,SAAP,uBAAOA,SAAS,CAAEvE,KAAlB;AACA,GAPD;;AASA,QAAMwE,kBAAkB,GAAGH,wBAAwB,CAAEhF,UAAF,CAAnD;AACA,QAAMoF,iBAAiB,GAAGJ,wBAAwB,CACjD,CAAE,GAAGhF,UAAL,EAAkBqF,OAAlB,EADiD,CAAlD;AAIA,QAAMC,YAAY,GAAG9F,OAAO,CAC3B,OAAQ;AACPqE,IAAAA,4BADO;AAEPZ,IAAAA,mBAFO;AAGPK,IAAAA,wBAHO;AAIP6B,IAAAA,kBAJO;AAKPxB,IAAAA,qBALO;AAMP4B,IAAAA,YAAY,EAAE,CAAC,CAAEvF,UAAU,CAACqB,MANrB;AAOPY,IAAAA,WAAW,EAAEA,WAAW,CAACE,OAPlB;AAQPiD,IAAAA,iBARO;AASP7E,IAAAA,SATO;AAUPoB,IAAAA,OAVO;AAWPa,IAAAA,iBAXO;AAYPW,IAAAA,sBAZO;AAaPtB,IAAAA,4BAbO;AAcPC,IAAAA,mCAdO;AAePC,IAAAA;AAfO,GAAR,CAD2B,EAkB3B,CACC8B,4BADD,EAECZ,mBAFD,EAGCK,wBAHD,EAIC6B,kBAJD,EAKCxB,qBALD,EAMCyB,iBAND,EAOC7E,SAPD,EAQCoB,OARD,EASC3B,UATD,EAUCmD,sBAVD,EAWCX,iBAXD,EAYCX,4BAZD,EAaCC,mCAbD,EAcCC,kCAdD,CAlB2B,CAA5B;AAoCA,SAAO,EACN,GAAGC,UADG;AAENP,IAAAA,YAFM;AAGN6D,IAAAA,YAHM;AAINR,IAAAA,aAJM;AAKNJ,IAAAA,UALM;AAMNlD,IAAAA,SAAS,EAAE4C;AANL,GAAP;AAQA","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\tResetAllFilter,\n} from '../types';\n\nconst DEFAULT_COLUMNS = 2;\n\nconst generateMenuItems = ( {\n\tpanelItems,\n\tshouldReset,\n\tcurrentMenuItems,\n\tmenuItemOrder,\n}: ToolsPanelMenuItemsConfig ) => {\n\tconst newMenuItems: ToolsPanelMenuItems = { default: {}, optional: {} };\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 has already been flagged as customized\n\t\t// (for default controls), or toggled on (for optional controls), do not\n\t\t// overwrite its value as those controls would lose that state.\n\t\tconst existingItemValue = currentMenuItems?.[ group ]?.[ label ];\n\t\tconst value = existingItemValue ? existingItemValue : hasValue();\n\n\t\tnewMenuItems[ group ][ label ] = shouldReset ? false : value;\n\t} );\n\n\t// Loop the known, previously registered items first to maintain menu order.\n\tmenuItemOrder.forEach( ( key ) => {\n\t\tif ( newMenuItems.default.hasOwnProperty( key ) ) {\n\t\t\tmenuItems.default[ key ] = newMenuItems.default[ key ];\n\t\t}\n\n\t\tif ( newMenuItems.optional.hasOwnProperty( key ) ) {\n\t\t\tmenuItems.optional[ key ] = newMenuItems.optional[ key ];\n\t\t}\n\t} );\n\n\t// Loop newMenuItems object adding any that aren't in the known items order.\n\tObject.keys( newMenuItems.default ).forEach( ( key ) => {\n\t\tif ( ! menuItems.default.hasOwnProperty( key ) ) {\n\t\t\tmenuItems.default[ key ] = newMenuItems.default[ key ];\n\t\t}\n\t} );\n\n\tObject.keys( newMenuItems.optional ).forEach( ( key ) => {\n\t\tif ( ! menuItems.optional.hasOwnProperty( key ) ) {\n\t\t\tmenuItems.optional[ key ] = newMenuItems.optional[ key ];\n\t\t}\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\theadingLevel = 2,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper = false,\n\t\tshouldRenderPlaceholderItems = false,\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\tconst [ menuItemOrder, setMenuItemOrder ] = useState< string[] >( [] );\n\tconst [ resetAllFilters, setResetAllFilters ] = useState<\n\t\tResetAllFilter[]\n\t>( [] );\n\n\tconst registerPanelItem = useCallback(\n\t\t( item: ToolsPanelItem ) => {\n\t\t\t// Add item to panel items.\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\n\t\t\t// Track the initial order of item registration. This is used for\n\t\t\t// maintaining menu item order later.\n\t\t\tsetMenuItemOrder( ( items ) => {\n\t\t\t\tif ( items.includes( item.label ) ) {\n\t\t\t\t\treturn items;\n\t\t\t\t}\n\n\t\t\t\treturn [ ...items, item.label ];\n\t\t\t} );\n\t\t},\n\t\t[ setPanelItems, setMenuItemOrder ]\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\tconst registerResetAllFilter = useCallback(\n\t\t( newFilter: ResetAllFilter ) => {\n\t\t\tsetResetAllFilters( ( filters ) => {\n\t\t\t\treturn [ ...filters, newFilter ];\n\t\t\t} );\n\t\t},\n\t\t[ setResetAllFilters ]\n\t);\n\n\tconst deregisterResetAllFilter = useCallback(\n\t\t( filterToRemove: ResetAllFilter ) => {\n\t\t\tsetResetAllFilters( ( filters ) => {\n\t\t\t\treturn filters.filter(\n\t\t\t\t\t( filter ) => filter !== filterToRemove\n\t\t\t\t);\n\t\t\t} );\n\t\t},\n\t\t[ setResetAllFilters ]\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\tmenuItemOrder,\n\t\t\t} );\n\t\t\treturn items;\n\t\t} );\n\t}, [ panelItems, setMenuItems, menuItemOrder ] );\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\t\t\tresetAll( resetAllFilters );\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\tmenuItemOrder,\n\t\t\tshouldReset: true,\n\t\t} );\n\t\tsetMenuItems( resetMenuItems );\n\t}, [ panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder ] );\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\tderegisterResetAllFilter,\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\tregisterResetAllFilter,\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\tderegisterResetAllFilter,\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\tregisterResetAllFilter,\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\theadingLevel,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}

package/build-module/utils/input/input-control.js CHANGED Viewed

@@ -10,5 +10,5 @@ import { inputStyleNeutral, inputStyleFocus } from './base';
 import { font } from '../font';
 import { COLORS } from '../colors-values';
 import { breakpoint } from '../breakpoint';
-export const inputControl = /*#__PURE__*/css("font-family:", font('default.fontFamily'), ";padding:6px 8px;", inputStyleNeutral, ";font-size:", font('mobileTextMinFontSize'), ";line-height:normal;", breakpoint('small'), "{font-size:", font('default.fontSize'), ";line-height:normal;}&:focus{", inputStyleFocus, ";}&::-webkit-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:inputControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvaW5wdXQtY29udHJvbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9pbnB1dC1jb250cm9sLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBpbnB1dFN0eWxlTmV1dHJhbCwgaW5wdXRTdHlsZUZvY3VzIH0gZnJvbSAnLi9iYXNlJztcbmltcG9ydCB7IGZvbnQgfSBmcm9tICcuLi9mb250JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL2NvbG9ycy12YWx1ZXMnO1xuaW1wb3J0IHsgYnJlYWtwb2ludCB9IGZyb20gJy4uL2JyZWFrcG9pbnQnO1xuXG5leHBvcnQgY29uc3QgaW5wdXRDb250cm9sID0gY3NzYFxuXHRmb250LWZhbWlseTogJHsgZm9udCggJ2RlZmF1bHQuZm9udEZhbWlseScgKSB9O1xuXHRwYWRkaW5nOiA2cHggOHB4O1xuXHQkeyBpbnB1dFN0eWxlTmV1dHJhbCB9O1xuXG5cdC8qIEZvbnRzIHNtYWxsZXIgdGhhbiAxNnB4IGNhdXNlcyBtb2JpbGUgc2FmYXJpIHRvIHpvb20uICovXG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ21vYmlsZVRleHRNaW5Gb250U2l6ZScgKSB9O1xuXHQvKiBPdmVycmlkZSBjb3JlIGxpbmUtaGVpZ2h0LiBUbyBiZSByZXZpZXdlZC4gKi9cblx0bGluZS1oZWlnaHQ6IG5vcm1hbDtcblxuXHQkeyBicmVha3BvaW50KCAnc21hbGwnICkgfSB7XG5cdFx0Zm9udC1zaXplOiAkeyBmb250KCAnZGVmYXVsdC5mb250U2l6ZScgKSB9O1xuXHRcdC8qIE92ZXJyaWRlIGNvcmUgbGluZS1oZWlnaHQuIFRvIGJlIHJldmlld2VkLiAqL1xuXHRcdGxpbmUtaGVpZ2h0OiBub3JtYWw7XG5cdH1cblxuXHQmOmZvY3VzIHtcblx0XHQkeyBpbnB1dFN0eWxlRm9jdXMgfVxuXHR9XG5cblx0Ly8gVXNlIG9wYWNpdHkgdG8gd29yayBpbiB2YXJpb3VzIGVkaXRvciBzdHlsZXMuXG5cdCY6Oi13ZWJraXQtaW5wdXQtcGxhY2Vob2xkZXIge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkuZGFya0dyYXlQbGFjZWhvbGRlciB9O1xuXHR9XG5cblx0Jjo6LW1vei1wbGFjZWhvbGRlciB7XG5cdFx0b3BhY2l0eTogMTsgLy8gTmVjZXNzYXJ5IGJlY2F1c2UgRmlyZWZveCByZWR1Y2VzIHRoaXMgZnJvbSAxLlxuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkuZGFya0dyYXlQbGFjZWhvbGRlciB9O1xuXHR9XG5cblx0JjotbXMtaW5wdXQtcGxhY2Vob2xkZXIge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkuZGFya0dyYXlQbGFjZWhvbGRlciB9O1xuXHR9XG5cblx0LmlzLWRhcmstdGhlbWUgJiB7XG5cdFx0Jjo6LXdlYmtpdC1pbnB1dC1wbGFjZWhvbGRlciB7XG5cdFx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmxpZ2h0R3JheVBsYWNlaG9sZGVyIH07XG5cdFx0fVxuXG5cdFx0Jjo6LW1vei1wbGFjZWhvbGRlciB7XG5cdFx0XHRvcGFjaXR5OiAxOyAvLyBOZWNlc3NhcnkgYmVjYXVzZSBGaXJlZm94IHJlZHVjZXMgdGhpcyBmcm9tIDEuXG5cdFx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmxpZ2h0R3JheVBsYWNlaG9sZGVyIH07XG5cdFx0fVxuXG5cdFx0JjotbXMtaW5wdXQtcGxhY2Vob2xkZXIge1xuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5saWdodEdyYXlQbGFjZWhvbGRlciB9O1xuXHRcdH1cblx0fVxuYDtcbiJdfQ== */");
+export const inputControl = /*#__PURE__*/css("display:block;font-family:", font('default.fontFamily'), ";padding:6px 8px;", inputStyleNeutral, ";font-size:", font('mobileTextMinFontSize'), ";line-height:normal;", breakpoint('small'), "{font-size:", font('default.fontSize'), ";line-height:normal;}&:focus{", inputStyleFocus, ";}&::-webkit-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:inputControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvaW5wdXQtY29udHJvbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9pbnB1dC1jb250cm9sLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBpbnB1dFN0eWxlTmV1dHJhbCwgaW5wdXRTdHlsZUZvY3VzIH0gZnJvbSAnLi9iYXNlJztcbmltcG9ydCB7IGZvbnQgfSBmcm9tICcuLi9mb250JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL2NvbG9ycy12YWx1ZXMnO1xuaW1wb3J0IHsgYnJlYWtwb2ludCB9IGZyb20gJy4uL2JyZWFrcG9pbnQnO1xuXG5leHBvcnQgY29uc3QgaW5wdXRDb250cm9sID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0cGFkZGluZzogNnB4IDhweDtcblx0JHsgaW5wdXRTdHlsZU5ldXRyYWwgfTtcblxuXHQvKiBGb250cyBzbWFsbGVyIHRoYW4gMTZweCBjYXVzZXMgbW9iaWxlIHNhZmFyaSB0byB6b29tLiAqL1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdtb2JpbGVUZXh0TWluRm9udFNpemUnICkgfTtcblx0LyogT3ZlcnJpZGUgY29yZSBsaW5lLWhlaWdodC4gVG8gYmUgcmV2aWV3ZWQuICovXG5cdGxpbmUtaGVpZ2h0OiBub3JtYWw7XG5cblx0JHsgYnJlYWtwb2ludCggJ3NtYWxsJyApIH0ge1xuXHRcdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcblx0XHQvKiBPdmVycmlkZSBjb3JlIGxpbmUtaGVpZ2h0LiBUbyBiZSByZXZpZXdlZC4gKi9cblx0XHRsaW5lLWhlaWdodDogbm9ybWFsO1xuXHR9XG5cblx0Jjpmb2N1cyB7XG5cdFx0JHsgaW5wdXRTdHlsZUZvY3VzIH1cblx0fVxuXG5cdC8vIFVzZSBvcGFjaXR5IHRvIHdvcmsgaW4gdmFyaW91cyBlZGl0b3Igc3R5bGVzLlxuXHQmOjotd2Via2l0LWlucHV0LXBsYWNlaG9sZGVyIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmRhcmtHcmF5UGxhY2Vob2xkZXIgfTtcblx0fVxuXG5cdCY6Oi1tb3otcGxhY2Vob2xkZXIge1xuXHRcdG9wYWNpdHk6IDE7IC8vIE5lY2Vzc2FyeSBiZWNhdXNlIEZpcmVmb3ggcmVkdWNlcyB0aGlzIGZyb20gMS5cblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmRhcmtHcmF5UGxhY2Vob2xkZXIgfTtcblx0fVxuXG5cdCY6LW1zLWlucHV0LXBsYWNlaG9sZGVyIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmRhcmtHcmF5UGxhY2Vob2xkZXIgfTtcblx0fVxuXG5cdC5pcy1kYXJrLXRoZW1lICYge1xuXHRcdCY6Oi13ZWJraXQtaW5wdXQtcGxhY2Vob2xkZXIge1xuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5saWdodEdyYXlQbGFjZWhvbGRlciB9O1xuXHRcdH1cblxuXHRcdCY6Oi1tb3otcGxhY2Vob2xkZXIge1xuXHRcdFx0b3BhY2l0eTogMTsgLy8gTmVjZXNzYXJ5IGJlY2F1c2UgRmlyZWZveCByZWR1Y2VzIHRoaXMgZnJvbSAxLlxuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5saWdodEdyYXlQbGFjZWhvbGRlciB9O1xuXHRcdH1cblxuXHRcdCY6LW1zLWlucHV0LXBsYWNlaG9sZGVyIHtcblx0XHRcdGNvbG9yOiAkeyBDT0xPUlMudWkubGlnaHRHcmF5UGxhY2Vob2xkZXIgfTtcblx0XHR9XG5cdH1cbmA7XG4iXX0= */");
 //# sourceMappingURL=input-control.js.map