@wordpress/components 23.6.0 → 23.7.0

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

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

@@ -117,7 +117,7 @@ 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.
 
-  (0, _element.useEffect)(() => {
+  (0, _element.useLayoutEffect)(() => {
     // If there's a selected tab, don't override it.
     if (selectedTab) {
       return;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","children","selected","rest","undefined","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","initialTab","tab","disabled","firstEnabledTab","map","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? undefined : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\t__experimentalIsFocusable\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLButtonElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = tabs.find( ( { name } ) => name === selected );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\t// Handle selecting the initial tab.\n\tuseEffect( () => {\n\t\t// If there's a selected tab, don't override it.\n\t\tif ( selectedTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst initialTab = tabs.find( ( tab ) => tab.name === initialTabName );\n\n\t\t// Wait for the denoted initial tab to be declared before making a\n\t\t// selection. This ensures that if a tab is declared lazily it can\n\t\t// still receive initial selection.\n\t\tif ( initialTabName && ! initialTab ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( initialTab && ! initialTab.disabled ) {\n\t\t\t// Select the initial tab if it's not disabled.\n\t\t\thandleTabSelection( initialTab.name );\n\t\t} else {\n\t\t\t// Fallback to the first enabled tab when the initial is disabled.\n\t\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\t\t\tif ( firstEnabledTab ) handleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab, initialTabName, handleTabSelection ] );\n\n\t// Handle the currently selected tab becoming disabled.\n\tuseEffect( () => {\n\t\t// This effect only runs when the selected tab is defined and becomes disabled.\n\t\tif ( ! selectedTab?.disabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );\n\n\t\t// If the currently selected tab becomes disabled, select the first enabled tab.\n\t\t// (if there is one).\n\t\tif ( firstEnabledTab ) {\n\t\t\thandleTabSelection( firstEnabledTab.name );\n\t\t}\n\t}, [ tabs, selectedTab?.disabled, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tdisabled={ tab.disabled }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","children","selected","rest","undefined","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","find","name","selectedId","initialTab","tab","disabled","firstEnabledTab","map","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\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/tools-panel/tools-panel/hook.js

@@ -30,8 +30,13 @@ const generateMenuItems = _ref => {
   let {
     panelItems,
     shouldReset,
-    currentMenuItems
+    currentMenuItems,
+    menuItemOrder
   } = _ref;
+  const newMenuItems = {
+    default: {},
+    optional: {}
+  };
   const menuItems = {
     default: {},
     optional: {}
@@ -50,7 +55,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;
 };
@@ -82,8 +108,10 @@ function useToolsPanel(props) {
   }, [wasResetting]); // Allow panel items to register themselves.
 
   const [panelItems, setPanelItems] = (0, _element.useState)([]);
+  const [menuItemOrder, setMenuItemOrder] = (0, _element.useState)([]);
   const [resetAllFilters, setResetAllFilters] = (0, _element.useState)([]);
   const registerPanelItem = (0, _element.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
@@ -96,8 +124,17 @@ 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 = (0, _element.useCallback)(label => {
@@ -137,11 +174,12 @@ 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.
@@ -204,10 +242,11 @@ 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/tools-panel/tools-panel/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["DEFAULT_COLUMNS","generateMenuItems","panelItems","shouldReset","currentMenuItems","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","existingItemValue","value","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","styles","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"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["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","styles","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","resetAllItems","resetMenuItems","getFirstVisibleItemLabel","optionalItems","firstItem","firstDisplayedItem","lastDisplayedItem","reverse","panelContext","hasMenuItems"],"mappings":";;;;;;;AAGA;;AAWA;;AACA;;AACA;;;;;;AAhBA;AACA;AACA;;AASA;AACA;AACA;AAaA,MAAMA,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;;AAIO,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,MAUF,+BAAkBT,KAAlB,EAAyB,YAAzB,CAVJ;AAYA,QAAMU,WAAW,GAAG,qBAAQ,KAAR,CAApB;AACA,QAAMC,YAAY,GAAGD,WAAW,CAACE,OAAjC,CAdC,CAgBD;AACA;AACA;AACA;;AACA,0BAAW,MAAM;AAChB,QAAKD,YAAL,EAAoB;AACnBD,MAAAA,WAAW,CAACE,OAAZ,GAAsB,KAAtB;AACA;AACD,GAJD,EAIG,CAAED,YAAF,CAJH,EApBC,CA0BD;;AACA,QAAM,CAAElC,UAAF,EAAcoC,aAAd,IAAgC,uBAA8B,EAA9B,CAAtC;AACA,QAAM,CAAEjC,aAAF,EAAiBkC,gBAAjB,IAAsC,uBAAsB,EAAtB,CAA5C;AACA,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0C,uBAE7C,EAF6C,CAAhD;AAIA,QAAMC,iBAAiB,GAAG,0BACvBC,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,GA1BwB,EA2BzB,CAAEyB,aAAF,EAAiBC,gBAAjB,CA3ByB,CAA1B,CAjCC,CA+DD;AACA;;AACA,QAAMY,mBAAmB,GAAG,0BACzBtC,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,GAhB0B,EAiB3B,CAAEP,aAAF,CAjB2B,CAA5B;AAoBA,QAAMe,sBAAsB,GAAG,0BAC5BC,SAAF,IAAiC;AAChCb,IAAAA,kBAAkB,CAAIc,OAAF,IAAe;AAClC,aAAO,CAAE,GAAGA,OAAL,EAAcD,SAAd,CAAP;AACA,KAFiB,CAAlB;AAGA,GAL6B,EAM9B,CAAEb,kBAAF,CAN8B,CAA/B;AASA,QAAMe,wBAAwB,GAAG,0BAC9BC,cAAF,IAAsC;AACrChB,IAAAA,kBAAkB,CAAIc,OAAF,IAAe;AAClC,aAAOA,OAAO,CAACG,MAAR,CACJA,MAAF,IAAcA,MAAM,KAAKD,cADnB,CAAP;AAGA,KAJiB,CAAlB;AAKA,GAP+B,EAQhC,CAAEhB,kBAAF,CARgC,CAAjC,CA9FC,CAyGD;;AACA,QAAM,CAAEhC,SAAF,EAAakD,YAAb,IAA8B,uBAAiC;AACpEpD,IAAAA,OAAO,EAAE,EAD2D;AAEpEC,IAAAA,QAAQ,EAAE;AAF0D,GAAjC,CAApC,CA1GC,CA+GD;;AACA,0BAAW,MAAM;AAChBmD,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,GAVD,EAUG,CAAE1C,UAAF,EAAcyD,YAAd,EAA4BtD,aAA5B,CAVH,EAhHC,CA4HD;AACA;AACA;AACA;;AACA,QAAMwD,qBAAqB,GAAG,0BAC7B,UAAEhD,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,GAZ4B,EAa7B,CAAEH,YAAF,CAb6B,CAA9B,CAhIC,CAgJD;AACA;AACA;AACA;;AACA,QAAM,CAAEI,4BAAF,EAAgCC,+BAAhC,IACL,uBAAU,KAAV,CADD;AAGA,0BAAW,MAAM;AAChB,QACC3C,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,GAVD,EAUG,CAAExD,SAAF,EAAauD,+BAAb,CAVH;AAYA,QAAMK,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,UAAMC,YAAY,GACjBzC,eAAe,IACf0C,MAAM,CAACC,0BAAP,CAAmCzE,eAAnC,CAFD;AAGA,UAAM0E,UAAU,GACfrD,mBAAmB,CAAEZ,SAAF,aAAEA,SAAF,uBAAEA,SAAS,CAAEF,OAAb,CAAnB,IACAwD,4BADA,IAEAS,MAAM,CAACG,4BAHR;AAKA,WAAON,EAAE,CACRG,MAAM,CAACI,UAAP,CAAmB5E,eAAnB,CADQ,EAERuE,YAFQ,EAGRG,UAHQ,EAIRhD,SAJQ,CAAT;AAMA,GAfe,EAeb,CACFqC,4BADE,EAEFrC,SAFE,EAGF2C,EAHE,EAIFvC,eAJE,EAKFrB,SALE,CAfa,CAAhB,CApKC,CA2LD;AACA;;AACA,QAAMoE,UAAU,GAAG,0BAChBhE,KAAF,IAAqB;AACpB,UAAMiE,WAAW,GAAG5E,UAAU,CAAC6E,IAAX,CACjBpC,IAAF,IAAYA,IAAI,CAAC9B,KAAL,KAAeA,KADR,CAApB;;AAIA,QAAK,CAAEiE,WAAP,EAAqB;AACpB;AACA;;AAED,UAAME,SAAS,GAAGF,WAAW,CAAClE,gBAAZ,GACf,SADe,GAEf,UAFH;AAIA,UAAMN,YAAY,GAAG,EACpB,GAAGG,SADiB;AAEpB,OAAEuE,SAAF,GAAe,EACd,GAAGvE,SAAS,CAAEuE,SAAF,CADE;AAEd,SAAEnE,KAAF,GAAW,CAAEJ,SAAS,CAAEuE,SAAF,CAAT,CAAwBnE,KAAxB;AAFC;AAFK,KAArB;AAQA8C,IAAAA,YAAY,CAAErD,YAAF,CAAZ;AACA,GAvBiB,EAwBlB,CAAEG,SAAF,EAAaP,UAAb,EAAyByD,YAAzB,CAxBkB,CAAnB,CA7LC,CAwND;;AACA,QAAMsB,aAAa,GAAG,0BAAa,MAAM;AACxC,QAAK,OAAOrD,QAAP,KAAoB,UAAzB,EAAsC;AACrCO,MAAAA,WAAW,CAACE,OAAZ,GAAsB,IAAtB;AACAT,MAAAA,QAAQ,CAAEY,eAAF,CAAR;AACA,KAJuC,CAMxC;;;AACA,UAAM0C,cAAc,GAAGjF,iBAAiB,CAAE;AACzCC,MAAAA,UADyC;AAEzCG,MAAAA,aAFyC;AAGzCF,MAAAA,WAAW,EAAE;AAH4B,KAAF,CAAxC;AAKAwD,IAAAA,YAAY,CAAEuB,cAAF,CAAZ;AACA,GAbqB,EAanB,CAAEhF,UAAF,EAAcsC,eAAd,EAA+BZ,QAA/B,EAAyC+B,YAAzC,EAAuDtD,aAAvD,CAbmB,CAAtB,CAzNC,CAwOD;AACA;;AACA,QAAM8E,wBAAwB,GAAKvC,KAAF,IAA+B;AAC/D,UAAMwC,aAAa,GAAG3E,SAAS,CAACD,QAAV,IAAsB,EAA5C;AACA,UAAM6E,SAAS,GAAGzC,KAAK,CAACmC,IAAN,CACfpC,IAAF,IAAYA,IAAI,CAAC/B,gBAAL,IAAyB,CAAC,CAAEwE,aAAa,CAAEzC,IAAI,CAAC9B,KAAP,CADpC,CAAlB;AAIA,WAAOwE,SAAP,aAAOA,SAAP,uBAAOA,SAAS,CAAExE,KAAlB;AACA,GAPD;;AASA,QAAMyE,kBAAkB,GAAGH,wBAAwB,CAAEjF,UAAF,CAAnD;AACA,QAAMqF,iBAAiB,GAAGJ,wBAAwB,CACjD,CAAE,GAAGjF,UAAL,EAAkBsF,OAAlB,EADiD,CAAlD;AAIA,QAAMC,YAAY,GAAG,sBACpB,OAAQ;AACP1B,IAAAA,4BADO;AAEPZ,IAAAA,mBAFO;AAGPK,IAAAA,wBAHO;AAIP8B,IAAAA,kBAJO;AAKPzB,IAAAA,qBALO;AAMP6B,IAAAA,YAAY,EAAE,CAAC,CAAExF,UAAU,CAACqB,MANrB;AAOPY,IAAAA,WAAW,EAAEA,WAAW,CAACE,OAPlB;AAQPkD,IAAAA,iBARO;AASP9E,IAAAA,SATO;AAUPoB,IAAAA,OAVO;AAWPa,IAAAA,iBAXO;AAYPW,IAAAA,sBAZO;AAaPtB,IAAAA,4BAbO;AAcPC,IAAAA,mCAdO;AAePC,IAAAA;AAfO,GAAR,CADoB,EAkBpB,CACC8B,4BADD,EAECZ,mBAFD,EAGCK,wBAHD,EAIC8B,kBAJD,EAKCzB,qBALD,EAMC0B,iBAND,EAOC9E,SAPD,EAQCoB,OARD,EASC3B,UATD,EAUCmD,sBAVD,EAWCX,iBAXD,EAYCX,4BAZD,EAaCC,mCAbD,EAcCC,kCAdD,CAlBoB,CAArB;AAoCA,SAAO,EACN,GAAGC,UADG;AAENP,IAAAA,YAFM;AAGN8D,IAAAA,YAHM;AAINR,IAAAA,aAJM;AAKNJ,IAAAA,UALM;AAMNnD,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/utils/input/input-control.js

@@ -22,6 +22,6 @@ var _breakpoint = require("../breakpoint");
 /**
  * Internal dependencies
  */
-const inputControl = /*#__PURE__*/(0, _react.css)("font-family:", (0, _font.font)('default.fontFamily'), ";padding:6px 8px;", _base.inputStyleNeutral, ";font-size:", (0, _font.font)('mobileTextMinFontSize'), ";line-height:normal;", (0, _breakpoint.breakpoint)('small'), "{font-size:", (0, _font.font)('default.fontSize'), ";line-height:normal;}&:focus{", _base.inputStyleFocus, ";}&::-webkit-input-placeholder{color:", _colorsValues.COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", _colorsValues.COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", _colorsValues.COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", _colorsValues.COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", _colorsValues.COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", _colorsValues.COLORS.ui.lightGrayPlaceholder, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:inputControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvaW5wdXQtY29udHJvbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9pbnB1dC1jb250cm9sLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBpbnB1dFN0eWxlTmV1dHJhbCwgaW5wdXRTdHlsZUZvY3VzIH0gZnJvbSAnLi9iYXNlJztcbmltcG9ydCB7IGZvbnQgfSBmcm9tICcuLi9mb250JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL2NvbG9ycy12YWx1ZXMnO1xuaW1wb3J0IHsgYnJlYWtwb2ludCB9IGZyb20gJy4uL2JyZWFrcG9pbnQnO1xuXG5leHBvcnQgY29uc3QgaW5wdXRDb250cm9sID0gY3NzYFxuXHRmb250LWZhbWlseTogJHsgZm9udCggJ2RlZmF1bHQuZm9udEZhbWlseScgKSB9O1xuXHRwYWRkaW5nOiA2cHggOHB4O1xuXHQkeyBpbnB1dFN0eWxlTmV1dHJhbCB9O1xuXG5cdC8qIEZvbnRzIHNtYWxsZXIgdGhhbiAxNnB4IGNhdXNlcyBtb2JpbGUgc2FmYXJpIHRvIHpvb20uICovXG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ21vYmlsZVRleHRNaW5Gb250U2l6ZScgKSB9O1xuXHQvKiBPdmVycmlkZSBjb3JlIGxpbmUtaGVpZ2h0LiBUbyBiZSByZXZpZXdlZC4gKi9cblx0bGluZS1oZWlnaHQ6IG5vcm1hbDtcblxuXHQkeyBicmVha3BvaW50KCAnc21hbGwnICkgfSB7XG5cdFx0Zm9udC1zaXplOiAkeyBmb250KCAnZGVmYXVsdC5mb250U2l6ZScgKSB9O1xuXHRcdC8qIE92ZXJyaWRlIGNvcmUgbGluZS1oZWlnaHQuIFRvIGJlIHJldmlld2VkLiAqL1xuXHRcdGxpbmUtaGVpZ2h0OiBub3JtYWw7XG5cdH1cblxuXHQmOmZvY3VzIHtcblx0XHQkeyBpbnB1dFN0eWxlRm9jdXMgfVxuXHR9XG5cblx0Ly8gVXNlIG9wYWNpdHkgdG8gd29yayBpbiB2YXJpb3VzIGVkaXRvciBzdHlsZXMuXG5cdCY6Oi13ZWJraXQtaW5wdXQtcGxhY2Vob2xkZXIge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkuZGFya0dyYXlQbGFjZWhvbGRlciB9O1xuXHR9XG5cblx0Jjo6LW1vei1wbGFjZWhvbGRlciB7XG5cdFx0b3BhY2l0eTogMTsgLy8gTmVjZXNzYXJ5IGJlY2F1c2UgRmlyZWZveCByZWR1Y2VzIHRoaXMgZnJvbSAxLlxuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkuZGFya0dyYXlQbGFjZWhvbGRlciB9O1xuXHR9XG5cblx0JjotbXMtaW5wdXQtcGxhY2Vob2xkZXIge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkuZGFya0dyYXlQbGFjZWhvbGRlciB9O1xuXHR9XG5cblx0LmlzLWRhcmstdGhlbWUgJiB7XG5cdFx0Jjo6LXdlYmtpdC1pbnB1dC1wbGFjZWhvbGRlciB7XG5cdFx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmxpZ2h0R3JheVBsYWNlaG9sZGVyIH07XG5cdFx0fVxuXG5cdFx0Jjo6LW1vei1wbGFjZWhvbGRlciB7XG5cdFx0XHRvcGFjaXR5OiAxOyAvLyBOZWNlc3NhcnkgYmVjYXVzZSBGaXJlZm94IHJlZHVjZXMgdGhpcyBmcm9tIDEuXG5cdFx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmxpZ2h0R3JheVBsYWNlaG9sZGVyIH07XG5cdFx0fVxuXG5cdFx0JjotbXMtaW5wdXQtcGxhY2Vob2xkZXIge1xuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5saWdodEdyYXlQbGFjZWhvbGRlciB9O1xuXHRcdH1cblx0fVxuYDtcbiJdfQ== */");
+const inputControl = /*#__PURE__*/(0, _react.css)("display:block;font-family:", (0, _font.font)('default.fontFamily'), ";padding:6px 8px;", _base.inputStyleNeutral, ";font-size:", (0, _font.font)('mobileTextMinFontSize'), ";line-height:normal;", (0, _breakpoint.breakpoint)('small'), "{font-size:", (0, _font.font)('default.fontSize'), ";line-height:normal;}&:focus{", _base.inputStyleFocus, ";}&::-webkit-input-placeholder{color:", _colorsValues.COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", _colorsValues.COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", _colorsValues.COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", _colorsValues.COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", _colorsValues.COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", _colorsValues.COLORS.ui.lightGrayPlaceholder, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:inputControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvaW5wdXQtY29udHJvbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9pbnB1dC1jb250cm9sLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBpbnB1dFN0eWxlTmV1dHJhbCwgaW5wdXRTdHlsZUZvY3VzIH0gZnJvbSAnLi9iYXNlJztcbmltcG9ydCB7IGZvbnQgfSBmcm9tICcuLi9mb250JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL2NvbG9ycy12YWx1ZXMnO1xuaW1wb3J0IHsgYnJlYWtwb2ludCB9IGZyb20gJy4uL2JyZWFrcG9pbnQnO1xuXG5leHBvcnQgY29uc3QgaW5wdXRDb250cm9sID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0cGFkZGluZzogNnB4IDhweDtcblx0JHsgaW5wdXRTdHlsZU5ldXRyYWwgfTtcblxuXHQvKiBGb250cyBzbWFsbGVyIHRoYW4gMTZweCBjYXVzZXMgbW9iaWxlIHNhZmFyaSB0byB6b29tLiAqL1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdtb2JpbGVUZXh0TWluRm9udFNpemUnICkgfTtcblx0LyogT3ZlcnJpZGUgY29yZSBsaW5lLWhlaWdodC4gVG8gYmUgcmV2aWV3ZWQuICovXG5cdGxpbmUtaGVpZ2h0OiBub3JtYWw7XG5cblx0JHsgYnJlYWtwb2ludCggJ3NtYWxsJyApIH0ge1xuXHRcdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcblx0XHQvKiBPdmVycmlkZSBjb3JlIGxpbmUtaGVpZ2h0LiBUbyBiZSByZXZpZXdlZC4gKi9cblx0XHRsaW5lLWhlaWdodDogbm9ybWFsO1xuXHR9XG5cblx0Jjpmb2N1cyB7XG5cdFx0JHsgaW5wdXRTdHlsZUZvY3VzIH1cblx0fVxuXG5cdC8vIFVzZSBvcGFjaXR5IHRvIHdvcmsgaW4gdmFyaW91cyBlZGl0b3Igc3R5bGVzLlxuXHQmOjotd2Via2l0LWlucHV0LXBsYWNlaG9sZGVyIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmRhcmtHcmF5UGxhY2Vob2xkZXIgfTtcblx0fVxuXG5cdCY6Oi1tb3otcGxhY2Vob2xkZXIge1xuXHRcdG9wYWNpdHk6IDE7IC8vIE5lY2Vzc2FyeSBiZWNhdXNlIEZpcmVmb3ggcmVkdWNlcyB0aGlzIGZyb20gMS5cblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmRhcmtHcmF5UGxhY2Vob2xkZXIgfTtcblx0fVxuXG5cdCY6LW1zLWlucHV0LXBsYWNlaG9sZGVyIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmRhcmtHcmF5UGxhY2Vob2xkZXIgfTtcblx0fVxuXG5cdC5pcy1kYXJrLXRoZW1lICYge1xuXHRcdCY6Oi13ZWJraXQtaW5wdXQtcGxhY2Vob2xkZXIge1xuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5saWdodEdyYXlQbGFjZWhvbGRlciB9O1xuXHRcdH1cblxuXHRcdCY6Oi1tb3otcGxhY2Vob2xkZXIge1xuXHRcdFx0b3BhY2l0eTogMTsgLy8gTmVjZXNzYXJ5IGJlY2F1c2UgRmlyZWZveCByZWR1Y2VzIHRoaXMgZnJvbSAxLlxuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5saWdodEdyYXlQbGFjZWhvbGRlciB9O1xuXHRcdH1cblxuXHRcdCY6LW1zLWlucHV0LXBsYWNlaG9sZGVyIHtcblx0XHRcdGNvbG9yOiAkeyBDT0xPUlMudWkubGlnaHRHcmF5UGxhY2Vob2xkZXIgfTtcblx0XHR9XG5cdH1cbmA7XG4iXX0= */");
 exports.inputControl = inputControl;
 //# sourceMappingURL=input-control.js.map

package/build/utils/input/input-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/input/input-control.js"],"names":["inputControl","css","inputStyleNeutral","inputStyleFocus","COLORS","ui","darkGrayPlaceholder","lightGrayPlaceholder"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMO,MAAMA,YAAY,oBAAGC,UAAH,kBACR,gBAAM,oBAAN,CADQ,uBAGrBC,uBAHqB,iBAMV,gBAAM,uBAAN,CANU,0BAUrB,4BAAY,OAAZ,CAVqB,iBAWT,gBAAM,kBAAN,CAXS,mCAiBpBC,qBAjBoB,2CAsBbC,qBAAOC,EAAP,CAAUC,mBAtBG,4CA2BbF,qBAAOC,EAAP,CAAUC,mBA3BG,sCA+BbF,qBAAOC,EAAP,CAAUC,mBA/BG,4DAoCZF,qBAAOC,EAAP,CAAUE,oBApCE,4CAyCZH,qBAAOC,EAAP,CAAUE,oBAzCE,sCA6CZH,qBAAOC,EAAP,CAAUE,oBA7CE,ghFAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { inputStyleNeutral, inputStyleFocus } from './base';\nimport { font } from '../font';\nimport { COLORS } from '../colors-values';\nimport { breakpoint } from '../breakpoint';\n\nexport const inputControl = css`\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tpadding: 6px 8px;\n\t${ inputStyleNeutral };\n\n\t/* Fonts smaller than 16px causes mobile safari to zoom. */\n\tfont-size: ${ font( 'mobileTextMinFontSize' ) };\n\t/* Override core line-height. To be reviewed. */\n\tline-height: normal;\n\n\t${ breakpoint( 'small' ) } {\n\t\tfont-size: ${ font( 'default.fontSize' ) };\n\t\t/* Override core line-height. To be reviewed. */\n\t\tline-height: normal;\n\t}\n\n\t&:focus {\n\t\t${ inputStyleFocus }\n\t}\n\n\t// Use opacity to work in various editor styles.\n\t&::-webkit-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&::-moz-placeholder {\n\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&:-ms-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t.is-dark-theme & {\n\t\t&::-webkit-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&::-moz-placeholder {\n\t\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&:-ms-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/input/input-control.js"],"names":["inputControl","css","inputStyleNeutral","inputStyleFocus","COLORS","ui","darkGrayPlaceholder","lightGrayPlaceholder"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMO,MAAMA,YAAY,oBAAGC,UAAH,gCAER,gBAAM,oBAAN,CAFQ,uBAIrBC,uBAJqB,iBAOV,gBAAM,uBAAN,CAPU,0BAWrB,4BAAY,OAAZ,CAXqB,iBAYT,gBAAM,kBAAN,CAZS,mCAkBpBC,qBAlBoB,2CAuBbC,qBAAOC,EAAP,CAAUC,mBAvBG,4CA4BbF,qBAAOC,EAAP,CAAUC,mBA5BG,sCAgCbF,qBAAOC,EAAP,CAAUC,mBAhCG,4DAqCZF,qBAAOC,EAAP,CAAUE,oBArCE,4CA0CZH,qBAAOC,EAAP,CAAUE,oBA1CE,sCA8CZH,qBAAOC,EAAP,CAAUE,oBA9CE,wiFAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { inputStyleNeutral, inputStyleFocus } from './base';\nimport { font } from '../font';\nimport { COLORS } from '../colors-values';\nimport { breakpoint } from '../breakpoint';\n\nexport const inputControl = css`\n\tdisplay: block;\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tpadding: 6px 8px;\n\t${ inputStyleNeutral };\n\n\t/* Fonts smaller than 16px causes mobile safari to zoom. */\n\tfont-size: ${ font( 'mobileTextMinFontSize' ) };\n\t/* Override core line-height. To be reviewed. */\n\tline-height: normal;\n\n\t${ breakpoint( 'small' ) } {\n\t\tfont-size: ${ font( 'default.fontSize' ) };\n\t\t/* Override core line-height. To be reviewed. */\n\t\tline-height: normal;\n\t}\n\n\t&:focus {\n\t\t${ inputStyleFocus }\n\t}\n\n\t// Use opacity to work in various editor styles.\n\t&::-webkit-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&::-moz-placeholder {\n\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&:-ms-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t.is-dark-theme & {\n\t\t&::-webkit-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&::-moz-placeholder {\n\t\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&:-ms-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\t}\n`;\n"]}

package/build-module/angle-picker-control/angle-circle.js

@@ -82,10 +82,7 @@ function AngleCircle(_ref) {
   return createElement(CircleRoot, _extends({
     ref: angleCircleRef,
     onMouseDown: startDrag,
-    className: "components-angle-picker-control__angle-circle",
-    style: isDragging ? {
-      cursor: 'grabbing'
-    } : undefined
+    className: "components-angle-picker-control__angle-circle"
   }, props), createElement(CircleIndicatorWrapper, {
     style: value ? {
       transform: `rotate(${value}deg)`

package/build-module/angle-picker-control/angle-circle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.tsx"],"names":["useEffect","useRef","__experimentalUseDragging","useDragging","CircleRoot","CircleIndicatorWrapper","CircleIndicator","AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","document","body","style","cursor","transform","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenter = useRef< { x: number; y: number } | undefined >();\n\tconst previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenter.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || '';\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\tstyle={ isDragging ? { cursor: 'grabbing' } : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.tsx"],"names":["useEffect","useRef","__experimentalUseDragging","useDragging","CircleRoot","CircleIndicatorWrapper","CircleIndicator","AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","document","body","style","cursor","transform","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,yBAAyB,IAAIC,WAAtC,QAAyD,oBAAzD;AAEA;AACA;AACA;;AACA,SACCC,UADD,EAECC,sBAFD,EAGCC,eAHD,QAIO,sCAJP;;AAeA,SAASC,WAAT,OAIwD;AAAA,MAJlC;AACrBC,IAAAA,KADqB;AAErBC,IAAAA,QAFqB;AAGrB,OAAGC;AAHkB,GAIkC;AACvD,QAAMC,cAAc,GAAGV,MAAM,CAA2B,IAA3B,CAA7B;AACA,QAAMW,iBAAiB,GAAGX,MAAM,EAAhC;AACA,QAAMY,mBAAmB,GAAGZ,MAAM,EAAlC;;AAEA,QAAMa,oBAAoB,GAAG,MAAM;AAClC,QAAKH,cAAc,CAACI,OAAf,KAA2B,IAAhC,EAAuC;AACtC;AACA;;AAED,UAAMC,IAAI,GAAGL,cAAc,CAACI,OAAf,CAAuBE,qBAAvB,EAAb;AACAL,IAAAA,iBAAiB,CAACG,OAAlB,GAA4B;AAC3BG,MAAAA,CAAC,EAAEF,IAAI,CAACE,CAAL,GAASF,IAAI,CAACG,KAAL,GAAa,CADE;AAE3BC,MAAAA,CAAC,EAAEJ,IAAI,CAACI,CAAL,GAASJ,IAAI,CAACK,MAAL,GAAc;AAFC,KAA5B;AAIA,GAVD;;AAYA,QAAMC,qBAAqB,GAAKC,KAAF,IAAuC;AAAA;;AACpE,QAAKA,KAAK,KAAKC,SAAf,EAA2B;AAC1B;AACA,KAHmE,CAKpE;AACA;;;AACAD,IAAAA,KAAK,CAACE,cAAN,GAPoE,CAQpE;;AACA,qBAAEF,KAAK,CAACG,MAAR,gEAA2CC,KAA3C;;AAEA,QACCf,iBAAiB,CAACG,OAAlB,KAA8BS,SAA9B,IACAf,QAAQ,KAAKe,SAFd,EAGE;AACD,YAAM;AAAEN,QAAAA,CAAC,EAAEU,OAAL;AAAcR,QAAAA,CAAC,EAAES;AAAjB,UAA6BjB,iBAAiB,CAACG,OAArD;AACAN,MAAAA,QAAQ,CACPqB,QAAQ,CAAEF,OAAF,EAAWC,OAAX,EAAoBN,KAAK,CAACQ,OAA1B,EAAmCR,KAAK,CAACS,OAAzC,CADD,CAAR;AAGA;AACD,GApBD;;AAsBA,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAA4B/B,WAAW,CAAE;AAC9CgC,IAAAA,WAAW,EAAIZ,KAAF,IAAa;AACzBT,MAAAA,oBAAoB;AACpBQ,MAAAA,qBAAqB,CAAEC,KAAF,CAArB;AACA,KAJ6C;AAK9Ca,IAAAA,UAAU,EAAEd,qBALkC;AAM9Ce,IAAAA,SAAS,EAAEf;AANmC,GAAF,CAA7C;AASAtB,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKkC,UAAL,EAAkB;AACjB,UAAKrB,mBAAmB,CAACE,OAApB,KAAgCS,SAArC,EAAiD;AAChDX,QAAAA,mBAAmB,CAACE,OAApB,GAA8BuB,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAAlD;AACA;;AACDH,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,UAA7B;AACA,KALD,MAKO;AACNH,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B5B,mBAAmB,CAACE,OAApB,IAA+B,EAA5D;AACAF,MAAAA,mBAAmB,CAACE,OAApB,GAA8BS,SAA9B;AACA;AACD,GAVQ,EAUN,CAAEU,UAAF,CAVM,CAAT;AAYA,SACC,cAAC,UAAD;AACC,IAAA,GAAG,EAAGvB,cADP;AAEC,IAAA,WAAW,EAAGsB,SAFf;AAGC,IAAA,SAAS,EAAC;AAHX,KAIMvB,KAJN,GAMC,cAAC,sBAAD;AACC,IAAA,KAAK,EACJF,KAAK,GAAG;AAAEkC,MAAAA,SAAS,EAAG,UAAUlC,KAAO;AAA/B,KAAH,GAA4CgB,SAFnD;AAIC,IAAA,SAAS,EAAC,iEAJX;AAKC,IAAA,QAAQ,EAAG,CAAC;AALb,KAOC,cAAC,eAAD;AAAiB,IAAA,SAAS,EAAC;AAA3B,IAPD,CAND,CADD;AAkBA;;AAED,SAASM,QAAT,CACCF,OADD,EAECC,OAFD,EAGCc,MAHD,EAICC,MAJD,EAKE;AACD,QAAMxB,CAAC,GAAGwB,MAAM,GAAGf,OAAnB;AACA,QAAMX,CAAC,GAAGyB,MAAM,GAAGf,OAAnB;AAEA,QAAMiB,cAAc,GAAGC,IAAI,CAACC,KAAL,CAAY3B,CAAZ,EAAeF,CAAf,CAAvB;AACA,QAAM8B,UAAU,GAAGF,IAAI,CAACG,KAAL,CAAYJ,cAAc,IAAK,MAAMC,IAAI,CAACI,EAAhB,CAA1B,IAAmD,EAAtE;;AACA,MAAKF,UAAU,GAAG,CAAlB,EAAsB;AACrB,WAAO,MAAMA,UAAb;AACA;;AACD,SAAOA,UAAP;AACA;;AAED,eAAezC,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenter = useRef< { x: number; y: number } | undefined >();\n\tconst previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenter.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || '';\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"]}

package/build-module/angle-picker-control/index.js

@@ -11,19 +11,16 @@ import classnames from 'classnames';
 
 import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 
-import { FlexBlock, FlexItem } from '../flex';
+import { FlexBlock } from '../flex';
+import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
-import { Root } from './styles/angle-picker-control-styles';
-import { space } from '../ui/utils/space';
-import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { COLORS } from '../utils/colors-values';
+import { Root, UnitText } from './styles/angle-picker-control-styles';
 
 function UnforwardedAnglePickerControl(props, ref) {
   const {
@@ -53,11 +50,13 @@ function UnforwardedAnglePickerControl(props, ref) {
   };
 
   const classes = classnames('components-angle-picker-control', className);
+  const unitText = createElement(UnitText, null, "\xB0");
+  const [prefixedUnitText, suffixedUnitText] = isRTL() ? [unitText, null] : [null, unitText];
   return createElement(Root, _extends({}, restProps, {
     ref: ref,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     className: classes,
-    gap: 4
+    gap: 2
   }), createElement(FlexBlock, null, createElement(NumberControl, {
     label: label,
     className: "components-angle-picker-control__input-field",
@@ -68,19 +67,11 @@ function UnforwardedAnglePickerControl(props, ref) {
     step: "1",
     value: value,
     spinControls: "none",
-    suffix: createElement(Spacer, {
-      as: Text,
-      marginBottom: 0,
-      marginRight: space(3),
-      style: {
-        color: COLORS.ui.theme
-      }
-    }, "\xB0")
-  })), createElement(FlexItem, {
-    style: {
-      marginBottom: space(1),
-      marginTop: 'auto'
-    }
+    prefix: prefixedUnitText,
+    suffix: suffixedUnitText
+  })), createElement(Spacer, {
+    marginBottom: "1",
+    marginTop: "auto"
   }, createElement(AngleCircle, {
     "aria-hidden": "true",
     value: value,

package/build-module/angle-picker-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.tsx"],"names":["classnames","deprecated","forwardRef","__","FlexBlock","FlexItem","NumberControl","AngleCircle","Root","space","Text","Spacer","COLORS","UnforwardedAnglePickerControl","props","ref","__nextHasNoMarginBottom","className","label","onChange","value","restProps","since","version","hint","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","color","ui","theme","marginBottom","marginTop","AnglePickerControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { COLORS } from '../utils/colors-values';\n\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { AnglePickerControlProps } from './types';\n\nfunction UnforwardedAnglePickerControl(\n\tprops: WordPressComponentProps< AnglePickerControlProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tlabel = __( 'Angle' ),\n\t\tonChange,\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue: string | undefined ) => {\n\t\tif ( onChange === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== undefined && unprocessedValue !== ''\n\t\t\t\t? parseInt( unprocessedValue, 10 )\n\t\t\t\t: 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...restProps }\n\t\t\tref={ ref }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: COLORS.ui.theme,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *       __nextHasNoMarginBottom\n *     </>\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );\n\nexport default AnglePickerControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.tsx"],"names":["classnames","deprecated","forwardRef","isRTL","__","FlexBlock","Spacer","NumberControl","AngleCircle","Root","UnitText","UnforwardedAnglePickerControl","props","ref","__nextHasNoMarginBottom","className","label","onChange","value","restProps","since","version","hint","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","unitText","prefixedUnitText","suffixedUnitText","AnglePickerControl"],"mappings":";;;AAAA;AACA;AACA;AAEA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,UAAT,QAA2B,oBAA3B;AACA,SAASC,KAAT,EAAgBC,EAAhB,QAA0B,iBAA1B;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,SAA1B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,SAASC,IAAT,EAAeC,QAAf,QAA+B,sCAA/B;;AAKA,SAASC,6BAAT,CACCC,KADD,EAECC,GAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBAAuB,GAAG,KADrB;AAELC,IAAAA,SAFK;AAGLC,IAAAA,KAAK,GAAGZ,EAAE,CAAE,OAAF,CAHL;AAILa,IAAAA,QAJK;AAKLC,IAAAA,KALK;AAML,OAAGC;AANE,MAOFP,KAPJ;;AASA,MAAK,CAAEE,uBAAP,EAAiC;AAChCb,IAAAA,UAAU,CACT,2DADS,EAET;AACCmB,MAAAA,KAAK,EAAE,KADR;AAECC,MAAAA,OAAO,EAAE,KAFV;AAGCC,MAAAA,IAAI,EAAE;AAHP,KAFS,CAAV;AAQA;;AAED,QAAMC,oBAAoB,GAAKC,gBAAF,IAA4C;AACxE,QAAKP,QAAQ,KAAKQ,SAAlB,EAA8B;AAC7B;AACA;;AAED,UAAMC,UAAU,GACfF,gBAAgB,KAAKC,SAArB,IAAkCD,gBAAgB,KAAK,EAAvD,GACGG,QAAQ,CAAEH,gBAAF,EAAoB,EAApB,CADX,GAEG,CAHJ;AAIAP,IAAAA,QAAQ,CAAES,UAAF,CAAR;AACA,GAVD;;AAYA,QAAME,OAAO,GAAG5B,UAAU,CAAE,iCAAF,EAAqCe,SAArC,CAA1B;AAEA,QAAMc,QAAQ,GAAG,cAAC,QAAD,eAAjB;AACA,QAAM,CAAEC,gBAAF,EAAoBC,gBAApB,IAAyC5B,KAAK,KACjD,CAAE0B,QAAF,EAAY,IAAZ,CADiD,GAEjD,CAAE,IAAF,EAAQA,QAAR,CAFH;AAIA,SACC,cAAC,IAAD,eACMV,SADN;AAEC,IAAA,GAAG,EAAGN,GAFP;AAGC,IAAA,uBAAuB,EAAGC,uBAH3B;AAIC,IAAA,SAAS,EAAGc,OAJb;AAKC,IAAA,GAAG,EAAG;AALP,MAOC,cAAC,SAAD,QACC,cAAC,aAAD;AACC,IAAA,KAAK,EAAGZ,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGO,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGL,KART;AASC,IAAA,YAAY,EAAC,MATd;AAUC,IAAA,MAAM,EAAGY,gBAVV;AAWC,IAAA,MAAM,EAAGC;AAXV,IADD,CAPD,EAsBC,cAAC,MAAD;AAAQ,IAAA,YAAY,EAAC,GAArB;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACC,cAAC,WAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGb,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IADD,CAtBD,CADD;AAgCA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMe,kBAAkB,GAAG9B,UAAU,CAAES,6BAAF,CAArC;AAEP,eAAeqB,kBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport { Spacer } from '../spacer';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root, UnitText } from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { AnglePickerControlProps } from './types';\n\nfunction UnforwardedAnglePickerControl(\n\tprops: WordPressComponentProps< AnglePickerControlProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tlabel = __( 'Angle' ),\n\t\tonChange,\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue: string | undefined ) => {\n\t\tif ( onChange === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== undefined && unprocessedValue !== ''\n\t\t\t\t? parseInt( unprocessedValue, 10 )\n\t\t\t\t: 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\tconst unitText = <UnitText>°</UnitText>;\n\tconst [ prefixedUnitText, suffixedUnitText ] = isRTL()\n\t\t? [ unitText, null ]\n\t\t: [ null, unitText ];\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...restProps }\n\t\t\tref={ ref }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 2 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tprefix={ prefixedUnitText }\n\t\t\t\t\tsuffix={ suffixedUnitText }\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<Spacer marginBottom=\"1\" marginTop=\"auto\">\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t</Root>\n\t);\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *       __nextHasNoMarginBottom\n *     </>\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );\n\nexport default AnglePickerControl;\n"]}