@wordpress/components 27.6.0 → 28.0.1

package/build/sandbox/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -137,34 +137,38 @@ function SandBox({
     // we can use this in the future to inject custom styles or scripts.
     // Scripts go into the body rather than the head, to support embedded content such as Instagram
     // that expect the scripts to be part of the body.
-    const htmlDoc = (0, _react.createElement)("html", {
+    const htmlDoc = /*#__PURE__*/(0, _jsxRuntime.jsxs)("html", {
       lang: ownerDocument.documentElement.lang,
-      className: type
-    }, (0, _react.createElement)("head", null, (0, _react.createElement)("title", null, title), (0, _react.createElement)("style", {
-      dangerouslySetInnerHTML: {
-        __html: style
-      }
-    }), styles.map((rules, i) => (0, _react.createElement)("style", {
-      key: i,
-      dangerouslySetInnerHTML: {
-        __html: rules
-      }
-    }))), (0, _react.createElement)("body", {
-      "data-resizable-iframe-connected": "data-resizable-iframe-connected",
-      className: type
-    }, (0, _react.createElement)("div", {
-      dangerouslySetInnerHTML: {
-        __html: html
-      }
-    }), (0, _react.createElement)("script", {
-      type: "text/javascript",
-      dangerouslySetInnerHTML: {
-        __html: `(${observeAndResizeJS.toString()})();`
-      }
-    }), scripts.map(src => (0, _react.createElement)("script", {
-      key: src,
-      src: src
-    }))));
+      className: type,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("head", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+          dangerouslySetInnerHTML: {
+            __html: style
+          }
+        }), styles.map((rules, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+          dangerouslySetInnerHTML: {
+            __html: rules
+          }
+        }, i))]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("body", {
+        "data-resizable-iframe-connected": "data-resizable-iframe-connected",
+        className: type,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          dangerouslySetInnerHTML: {
+            __html: html
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+          type: "text/javascript",
+          dangerouslySetInnerHTML: {
+            __html: `(${observeAndResizeJS.toString()})();`
+          }
+        }), scripts.map(src => /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+          src: src
+        }, src))]
+      })]
+    });
 
     // Writing the document like this makes it act in the same way as if it was
     // loaded over the network, so DOM creation and mutation, script execution, etc.
@@ -231,7 +235,7 @@ function SandBox({
     // See https://github.com/WordPress/gutenberg/pull/44378
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [html, type]);
-  return (0, _react.createElement)("iframe", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
     ref: (0, _compose.useMergeRefs)([ref, (0, _compose.useFocusableIframe)()]),
     title: title,
     tabIndex: tabIndex,

package/build/sandbox/index.js.map

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

package/build/sandbox/index.native.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
 var _reactNativeWebview = require("react-native-webview");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _style = _interopRequireDefault(require("./style.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -206,31 +206,35 @@ const Sandbox = (0, _element.forwardRef)(function Sandbox({
 
     // Avoid comma issues with props.viewportProps.
     const addViewportProps = viewportProps.trim().replace(/(^[^,])/, ', $1');
-    const htmlDoc = (0, _react.createElement)("html", {
-      lang: lang
-    }, (0, _react.createElement)("head", null, (0, _react.createElement)("title", null, title), (0, _react.createElement)("meta", {
-      name: "viewport",
-      content: `width=device-width, initial-scale=1${addViewportProps}`
-    }), (0, _react.createElement)("style", {
-      dangerouslySetInnerHTML: {
-        __html: style
-      }
-    }), styles.map((rules, i) => (0, _react.createElement)("style", {
-      key: i,
-      dangerouslySetInnerHTML: {
-        __html: rules
-      }
-    }))), (0, _react.createElement)("body", {
-      "data-resizable-iframe-connected": "data-resizable-iframe-connected",
-      className: type
-    }, (0, _react.createElement)("div", {
-      dangerouslySetInnerHTML: {
-        __html: html
-      }
-    }), scripts.map(src => (0, _react.createElement)("script", {
-      key: src,
-      src: src
-    }))));
+    const htmlDoc = /*#__PURE__*/(0, _jsxRuntime.jsxs)("html", {
+      lang: lang,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("head", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("meta", {
+          name: "viewport",
+          content: `width=device-width, initial-scale=1${addViewportProps}`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+          dangerouslySetInnerHTML: {
+            __html: style
+          }
+        }), styles.map((rules, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+          dangerouslySetInnerHTML: {
+            __html: rules
+          }
+        }, i))]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("body", {
+        "data-resizable-iframe-connected": "data-resizable-iframe-connected",
+        className: type,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          dangerouslySetInnerHTML: {
+            __html: html
+          }
+        }), scripts.map(src => /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+          src: src
+        }, src))]
+      })]
+    });
     return '<!DOCTYPE html>' + (0, _element.renderToString)(htmlDoc);
   }
   const getInjectedJavaScript = (0, _element.useCallback)(() => {
@@ -314,10 +318,9 @@ const Sandbox = (0, _element.forwardRef)(function Sandbox({
     }
     wasLandscape.current = isLandscape;
   }, [isLandscape]);
-  return (0, _react.createElement)(_reactNativeWebview.WebView, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeWebview.WebView, {
     containerStyle: [_style.default['sandbox-webview__container'], containerStyle],
     injectedJavaScript: getInjectedJavaScript(),
-    key: key,
     ref: ref,
     source: {
       baseUrl: providerUrl,
@@ -336,7 +339,7 @@ const Sandbox = (0, _element.forwardRef)(function Sandbox({
     mediaPlaybackRequiresUserAction: false,
     onLoadEnd: onLoadEnd,
     testID: testID
-  });
+  }, key);
 });
 const workaroundStyles = _reactNative.StyleSheet.create({
   webView: {

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_reactNativeWebview","_element","_compose","_style","_interopRequireDefault","observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","forwardRef","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","onWindowEvents","viewportProps","onLoadEnd","testID","ref","colorScheme","usePreferredColorScheme","height","setHeight","useState","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","useRef","key","Platform","select","android","ios","addViewportProps","trim","replace","htmlDoc","_react","createElement","name","content","dangerouslySetInnerHTML","__html","map","rules","i","className","src","renderToString","getInjectedJavaScript","useCallback","injectedJS","Object","keys","forEach","eventType","updateContentHtml","forceRerender","newContentHtml","setImmediate","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","onMessage","message","data","nativeEvent","JSON","parse","e","action","console","warn","useEffect","dimensionsChangeSubscription","addEventListener","remove","current","WebView","sandboxStyles","injectedJavaScript","source","baseUrl","originWhitelist","isAndroid","workaroundStyles","webView","scrollEnabled","setBuiltInZoomControls","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","mediaPlaybackRequiresUserAction","StyleSheet","create","opacity","_default","exports","default","memo"],"sources":["@wordpress/components/src/sandbox/index.native.js"],"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\tforwardRef,\n\tuseCallback,\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+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.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})();\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\nconst Sandbox = forwardRef( function Sandbox(\n\t{\n\t\tcontainerStyle,\n\t\tcustomJS,\n\t\thtml = '',\n\t\tlang = 'en',\n\t\tproviderUrl = '',\n\t\tscripts = EMPTY_ARRAY,\n\t\tstyles = EMPTY_ARRAY,\n\t\ttitle = '',\n\t\ttype,\n\t\turl,\n\t\tonWindowEvents = {},\n\t\tviewportProps = '',\n\t\tonLoadEnd = () => {},\n\t\ttestID,\n\t},\n\tref\n) {\n\tconst colorScheme = usePreferredColorScheme();\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\n\t\t// Avoid comma issues with props.viewportProps.\n\t\tconst addViewportProps = viewportProps\n\t\t\t.trim()\n\t\t\t.replace( /(^[^,])/, ', $1' );\n\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${ addViewportProps }` }\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\tconst getInjectedJavaScript = useCallback( () => {\n\t\t// Allow parent to override the resize observers with prop.customJS (legacy support)\n\t\tlet injectedJS = customJS || observeAndResizeJS;\n\n\t\t// Add any event listeners that were passed in.\n\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\tinjectedJS += `\n\t\t\t\twindow.addEventListener( '${ eventType }', function( event ) {\n\t\t\t\t\twindow.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );\n\t\t\t\t});`;\n\t\t} );\n\n\t\treturn injectedJS;\n\t}, [ customJS, onWindowEvents ] );\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 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\tconst onMessage = useCallback(\n\t\t( message ) => {\n\t\t\tlet data = message?.nativeEvent?.data;\n\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check for resize event\n\t\t\tif ( 'resize' === data?.action ) {\n\t\t\t\tsetHeight( data.height );\n\t\t\t}\n\n\t\t\t// Forward the event to parent event listeners\n\t\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\t\tif ( data?.type === eventType ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonWindowEvents[ eventType ]( data );\n\t\t\t\t\t} catch ( e ) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Error handling event ${ eventType }`,\n\t\t\t\t\t\t\te\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[ onWindowEvents ]\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={ getInjectedJavaScript() }\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={ onMessage }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t\tmediaPlaybackRequiresUserAction={ false }\n\t\t\tonLoadEnd={ onLoadEnd }\n\t\t\ttestID={ testID }\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"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAUA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAC,sBAAA,CAAAL,OAAA;AAxBA;AACA;AACA;;AAIA;AACA;AACA;;AAaA;AACA;AACA;;AAGA,MAAMM,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,CAAC;AAED,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,CAAC;AAED,MAAMC,WAAW,GAAG,EAAE;AAEtB,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EAAE,SAASD,OAAOA,CAC3C;EACCE,cAAc;EACdC,QAAQ;EACRC,IAAI,GAAG,EAAE;EACTC,IAAI,GAAG,IAAI;EACXC,WAAW,GAAG,EAAE;EAChBC,OAAO,GAAGR,WAAW;EACrBS,MAAM,GAAGT,WAAW;EACpBU,KAAK,GAAG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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_reactNativeWebview","_element","_compose","_style","_interopRequireDefault","_jsxRuntime","observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","forwardRef","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","onWindowEvents","viewportProps","onLoadEnd","testID","ref","colorScheme","usePreferredColorScheme","height","setHeight","useState","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","useRef","key","Platform","select","android","ios","addViewportProps","trim","replace","htmlDoc","jsxs","children","jsx","name","content","dangerouslySetInnerHTML","__html","map","rules","i","className","src","renderToString","getInjectedJavaScript","useCallback","injectedJS","Object","keys","forEach","eventType","updateContentHtml","forceRerender","newContentHtml","setImmediate","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","onMessage","message","data","nativeEvent","JSON","parse","e","action","console","warn","useEffect","dimensionsChangeSubscription","addEventListener","remove","current","WebView","sandboxStyles","injectedJavaScript","source","baseUrl","originWhitelist","isAndroid","workaroundStyles","webView","scrollEnabled","setBuiltInZoomControls","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","mediaPlaybackRequiresUserAction","StyleSheet","create","opacity","_default","exports","default","memo"],"sources":["@wordpress/components/src/sandbox/index.native.js"],"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\tforwardRef,\n\tuseCallback,\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+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.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})();\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\nconst Sandbox = forwardRef( function Sandbox(\n\t{\n\t\tcontainerStyle,\n\t\tcustomJS,\n\t\thtml = '',\n\t\tlang = 'en',\n\t\tproviderUrl = '',\n\t\tscripts = EMPTY_ARRAY,\n\t\tstyles = EMPTY_ARRAY,\n\t\ttitle = '',\n\t\ttype,\n\t\turl,\n\t\tonWindowEvents = {},\n\t\tviewportProps = '',\n\t\tonLoadEnd = () => {},\n\t\ttestID,\n\t},\n\tref\n) {\n\tconst colorScheme = usePreferredColorScheme();\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\n\t\t// Avoid comma issues with props.viewportProps.\n\t\tconst addViewportProps = viewportProps\n\t\t\t.trim()\n\t\t\t.replace( /(^[^,])/, ', $1' );\n\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${ addViewportProps }` }\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\tconst getInjectedJavaScript = useCallback( () => {\n\t\t// Allow parent to override the resize observers with prop.customJS (legacy support)\n\t\tlet injectedJS = customJS || observeAndResizeJS;\n\n\t\t// Add any event listeners that were passed in.\n\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\tinjectedJS += `\n\t\t\t\twindow.addEventListener( '${ eventType }', function( event ) {\n\t\t\t\t\twindow.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );\n\t\t\t\t});`;\n\t\t} );\n\n\t\treturn injectedJS;\n\t}, [ customJS, onWindowEvents ] );\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 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\tconst onMessage = useCallback(\n\t\t( message ) => {\n\t\t\tlet data = message?.nativeEvent?.data;\n\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check for resize event\n\t\t\tif ( 'resize' === data?.action ) {\n\t\t\t\tsetHeight( data.height );\n\t\t\t}\n\n\t\t\t// Forward the event to parent event listeners\n\t\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\t\tif ( data?.type === eventType ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonWindowEvents[ eventType ]( data );\n\t\t\t\t\t} catch ( e ) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Error handling event ${ eventType }`,\n\t\t\t\t\t\t\te\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[ onWindowEvents ]\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={ getInjectedJavaScript() }\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={ onMessage }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t\tmediaPlaybackRequiresUserAction={ false }\n\t\t\tonLoadEnd={ onLoadEnd }\n\t\t\ttestID={ testID }\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"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAUA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAC,sBAAA,CAAAL,OAAA;AAAyC,IAAAM,WAAA,GAAAN,OAAA;AAxBzC;AACA;AACA;;AAIA;AACA;AACA;;AAaA;AACA;AACA;;AAGA,MAAMO,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,CAAC;AAED,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,CAAC;AAED,MAAMC,WAAW,GAAG,EAAE;AAEtB,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EAAE,SAASD,OAAOA,CAC3C;EACCE,cAAc;EACdC,QAAQ;EACRC,IAAI,GAAG,EAAE;EACTC,IAAI,GAAG,IAAI;EACXC,WAAW,GAAG,EAAE;EAChBC,OAAO,GAAGR,WAAW;EACrBS,MAAM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","ignoreList":[]}

package/build/scrollable/component.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Scrollable = void 0;
-var _react = require("react");
 var _context = require("../context");
 var _view = require("../view");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -18,7 +18,7 @@ var _hook = require("./hook");
 
 function UnconnectedScrollable(props, forwardedRef) {
   const scrollableProps = (0, _hook.useScrollable)(props);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     ...scrollableProps,
     ref: forwardedRef
   });

package/build/scrollable/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_view","_hook","UnconnectedScrollable","props","forwardedRef","scrollableProps","useScrollable","_react","createElement","View","ref","Scrollable","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/scrollable/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useScrollable } from './hook';\nimport type { ScrollableProps } from './types';\n\nfunction UnconnectedScrollable(\n\tprops: WordPressComponentProps< ScrollableProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst scrollableProps = useScrollable( props );\n\n\treturn <View { ...scrollableProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Scrollable` is a layout component that content in a scrollable container.\n *\n * ```jsx\n * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Scrollable style={ { maxHeight: 200 } }>\n * \t\t\t<div style={ { height: 500 } }>...</div>\n * \t\t</Scrollable>\n * \t);\n * }\n * ```\n */\nexport const Scrollable = contextConnect( UnconnectedScrollable, 'Scrollable' );\n\nexport default Scrollable;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,qBAAqBA,CAC7BC,KAAwD,EACxDC,YAAiC,EAChC;EACD,MAAMC,eAAe,GAAG,IAAAC,mBAAa,EAAEH,KAAM,CAAC;EAE9C,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMJ,eAAe;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AAC5D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,IAAAE,uBAAc,EAAEX,qBAAqB,EAAE,YAAa,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEjEJ,UAAU","ignoreList":[]}
+{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedScrollable","props","forwardedRef","scrollableProps","useScrollable","jsx","View","ref","Scrollable","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/scrollable/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useScrollable } from './hook';\nimport type { ScrollableProps } from './types';\n\nfunction UnconnectedScrollable(\n\tprops: WordPressComponentProps< ScrollableProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst scrollableProps = useScrollable( props );\n\n\treturn <View { ...scrollableProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Scrollable` is a layout component that content in a scrollable container.\n *\n * ```jsx\n * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Scrollable style={ { maxHeight: 200 } }>\n * \t\t\t<div style={ { height: 500 } }>...</div>\n * \t\t</Scrollable>\n * \t);\n * }\n * ```\n */\nexport const Scrollable = contextConnect( UnconnectedScrollable, 'Scrollable' );\n\nexport default Scrollable;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAuC,IAAAG,WAAA,GAAAH,OAAA;AAXvC;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,qBAAqBA,CAC7BC,KAAwD,EACxDC,YAAiC,EAChC;EACD,MAAMC,eAAe,GAAG,IAAAC,mBAAa,EAAEH,KAAM,CAAC;EAE9C,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMH,eAAe;IAAGI,GAAG,EAAGL;EAAc,CAAE,CAAC;AAC5D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,IAAAE,uBAAc,EAAEV,qBAAqB,EAAE,YAAa,CAAC;AAAC,IAAAW,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEjEJ,UAAU","ignoreList":[]}

package/build/search-control/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SearchControl = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
@@ -14,6 +13,7 @@ var _element = require("@wordpress/element");
 var _button = _interopRequireDefault(require("../button"));
 var _context = require("../context");
 var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -33,7 +33,7 @@ function SuffixItem({
   onClose
 }) {
   if (!onClose && !value) {
-    return (0, _react.createElement)(_icons.Icon, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
       icon: _icons.search
     });
   }
@@ -41,7 +41,7 @@ function SuffixItem({
     onChange('');
     searchRef.current?.focus();
   };
-  return (0, _react.createElement)(_button.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
     size: "small",
     icon: _icons.closeSmall,
     label: onClose ? (0, _i18n.__)('Close search') : (0, _i18n.__)('Reset search'),
@@ -79,31 +79,33 @@ function UnforwardedSearchControl({
       isBorderless: true
     }
   }), [__nextHasNoMarginBottom]);
-  return (0, _react.createElement)(_context.ContextSystemProvider, {
-    value: contextValue
-  }, (0, _react.createElement)(_styles.StyledInputControl, {
-    __next40pxDefaultSize: true,
-    id: instanceId,
-    hideLabelFromVision: hideLabelFromVision,
-    label: label,
-    ref: (0, _compose.useMergeRefs)([searchRef, forwardedRef]),
-    type: "search",
-    size: size,
-    className: (0, _clsx.default)('components-search-control', className),
-    onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''),
-    autoComplete: "off",
-    placeholder: placeholder,
-    value: value !== null && value !== void 0 ? value : '',
-    suffix: (0, _react.createElement)(_styles.SuffixItemWrapper, {
-      size: size
-    }, (0, _react.createElement)(SuffixItem, {
-      searchRef: searchRef,
-      value: value,
-      onChange: onChange,
-      onClose: onClose
-    })),
-    ...restProps
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ContextSystemProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledInputControl, {
+      __next40pxDefaultSize: true,
+      id: instanceId,
+      hideLabelFromVision: hideLabelFromVision,
+      label: label,
+      ref: (0, _compose.useMergeRefs)([searchRef, forwardedRef]),
+      type: "search",
+      size: size,
+      className: (0, _clsx.default)('components-search-control', className),
+      onChange: nextValue => onChange(nextValue !== null && nextValue !== void 0 ? nextValue : ''),
+      autoComplete: "off",
+      placeholder: placeholder,
+      value: value !== null && value !== void 0 ? value : '',
+      suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SuffixItemWrapper, {
+        size: size,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SuffixItem, {
+          searchRef: searchRef,
+          value: value,
+          onChange: onChange,
+          onClose: onClose
+        })
+      }),
+      ...restProps
+    })
+  });
 }
 
 /**

package/build/search-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_icons","_element","_button","_context","_styles","SuffixItem","searchRef","value","onChange","onClose","_react","createElement","Icon","icon","search","onReset","current","focus","default","size","closeSmall","label","__","onClick","UnforwardedSearchControl","__nextHasNoMarginBottom","className","placeholder","hideLabelFromVision","restProps","forwardedRef","disabled","useRef","instanceId","useInstanceId","SearchControl","contextValue","useMemo","BaseControl","_overrides","InputBase","isBorderless","ContextSystemProvider","StyledInputControl","__next40pxDefaultSize","id","ref","useMergeRefs","type","clsx","nextValue","autoComplete","suffix","SuffixItemWrapper","exports","forwardRef","_default"],"sources":["@wordpress/components/src/search-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { SearchControlProps, SuffixItemProps } from './types';\nimport type { ForwardedRef } from 'react';\nimport { ContextSystemProvider } from '../context';\nimport { StyledInputControl, SuffixItemWrapper } from './styles';\n\nfunction SuffixItem( {\n\tsearchRef,\n\tvalue,\n\tonChange,\n\tonClose,\n}: SuffixItemProps ) {\n\tif ( ! onClose && ! value ) {\n\t\treturn <Icon icon={ search } />;\n\t}\n\n\tconst onReset = () => {\n\t\tonChange( '' );\n\t\tsearchRef.current?.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\tsize=\"small\"\n\t\t\ticon={ closeSmall }\n\t\t\tlabel={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }\n\t\t\tonClick={ onClose ?? onReset }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedSearchControl(\n\t{\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tonChange,\n\t\tvalue,\n\t\tlabel = __( 'Search' ),\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\tonClose,\n\t\tsize = 'default',\n\t\t...restProps\n\t}: Omit<\n\t\tWordPressComponentProps< SearchControlProps, 'input', false >,\n\t\t// TODO: Background styling currently doesn't support a disabled state. Needs design work.\n\t\t'disabled'\n\t>,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\t// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.\n\t// Work with the design team (@WordPress/gutenberg-design) if you need this feature.\n\tdelete restProps.disabled;\n\n\tconst searchRef = useRef< HTMLInputElement >( null );\n\tconst instanceId = useInstanceId(\n\t\tSearchControl,\n\t\t'components-search-control'\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\t// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system\n\t\t\t// to provide backwards compatibile margin for SearchControl.\n\t\t\t// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)\n\t\t\tBaseControl: { _overrides: { __nextHasNoMarginBottom } },\n\t\t\t// `isBorderless` is still experimental and not a public prop for InputControl yet.\n\t\t\tInputBase: { isBorderless: true },\n\t\t} ),\n\t\t[ __nextHasNoMarginBottom ]\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextValue }>\n\t\t\t<StyledInputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tid={ instanceId }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tlabel={ label }\n\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\ttype=\"search\"\n\t\t\t\tsize={ size }\n\t\t\t\tclassName={ clsx( 'components-search-control', className ) }\n\t\t\t\tonChange={ ( nextValue?: string ) =>\n\t\t\t\t\tonChange( nextValue ?? '' )\n\t\t\t\t}\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tvalue={ value ?? '' }\n\t\t\t\tsuffix={\n\t\t\t\t\t<SuffixItemWrapper size={ size }>\n\t\t\t\t\t\t<SuffixItem\n\t\t\t\t\t\t\tsearchRef={ searchRef }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SuffixItemWrapper>\n\t\t\t\t}\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * SearchControl components let users display a search control.\n *\n * ```jsx\n * import { SearchControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function MySearchControl( { className, setState } ) {\n *   const [ searchInput, setSearchInput ] = useState( '' );\n *\n *   return (\n *     <SearchControl\n *       __nextHasNoMarginBottom\n *       value={ searchInput }\n *       onChange={ setSearchInput }\n *     />\n *   );\n * }\n * ```\n */\nexport const SearchControl = forwardRef( UnforwardedSearchControl );\n\nexport default SearchControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_icons","_element","_button","_context","_styles","_jsxRuntime","SuffixItem","searchRef","value","onChange","onClose","jsx","Icon","icon","search","onReset","current","focus","default","size","closeSmall","label","__","onClick","UnforwardedSearchControl","__nextHasNoMarginBottom","className","placeholder","hideLabelFromVision","restProps","forwardedRef","disabled","useRef","instanceId","useInstanceId","SearchControl","contextValue","useMemo","BaseControl","_overrides","InputBase","isBorderless","ContextSystemProvider","children","StyledInputControl","__next40pxDefaultSize","id","ref","useMergeRefs","type","clsx","nextValue","autoComplete","suffix","SuffixItemWrapper","exports","forwardRef","_default"],"sources":["@wordpress/components/src/search-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { SearchControlProps, SuffixItemProps } from './types';\nimport type { ForwardedRef } from 'react';\nimport { ContextSystemProvider } from '../context';\nimport { StyledInputControl, SuffixItemWrapper } from './styles';\n\nfunction SuffixItem( {\n\tsearchRef,\n\tvalue,\n\tonChange,\n\tonClose,\n}: SuffixItemProps ) {\n\tif ( ! onClose && ! value ) {\n\t\treturn <Icon icon={ search } />;\n\t}\n\n\tconst onReset = () => {\n\t\tonChange( '' );\n\t\tsearchRef.current?.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\tsize=\"small\"\n\t\t\ticon={ closeSmall }\n\t\t\tlabel={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }\n\t\t\tonClick={ onClose ?? onReset }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedSearchControl(\n\t{\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tonChange,\n\t\tvalue,\n\t\tlabel = __( 'Search' ),\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\tonClose,\n\t\tsize = 'default',\n\t\t...restProps\n\t}: Omit<\n\t\tWordPressComponentProps< SearchControlProps, 'input', false >,\n\t\t// TODO: Background styling currently doesn't support a disabled state. Needs design work.\n\t\t'disabled'\n\t>,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\t// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.\n\t// Work with the design team (@WordPress/gutenberg-design) if you need this feature.\n\tdelete restProps.disabled;\n\n\tconst searchRef = useRef< HTMLInputElement >( null );\n\tconst instanceId = useInstanceId(\n\t\tSearchControl,\n\t\t'components-search-control'\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\t// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system\n\t\t\t// to provide backwards compatibile margin for SearchControl.\n\t\t\t// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)\n\t\t\tBaseControl: { _overrides: { __nextHasNoMarginBottom } },\n\t\t\t// `isBorderless` is still experimental and not a public prop for InputControl yet.\n\t\t\tInputBase: { isBorderless: true },\n\t\t} ),\n\t\t[ __nextHasNoMarginBottom ]\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextValue }>\n\t\t\t<StyledInputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tid={ instanceId }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tlabel={ label }\n\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\ttype=\"search\"\n\t\t\t\tsize={ size }\n\t\t\t\tclassName={ clsx( 'components-search-control', className ) }\n\t\t\t\tonChange={ ( nextValue?: string ) =>\n\t\t\t\t\tonChange( nextValue ?? '' )\n\t\t\t\t}\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tvalue={ value ?? '' }\n\t\t\t\tsuffix={\n\t\t\t\t\t<SuffixItemWrapper size={ size }>\n\t\t\t\t\t\t<SuffixItem\n\t\t\t\t\t\t\tsearchRef={ searchRef }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SuffixItemWrapper>\n\t\t\t\t}\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * SearchControl components let users display a search control.\n *\n * ```jsx\n * import { SearchControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function MySearchControl( { className, setState } ) {\n *   const [ searchInput, setSearchInput ] = useState( '' );\n *\n *   return (\n *     <SearchControl\n *       __nextHasNoMarginBottom\n *       value={ searchInput }\n *       onChange={ setSearchInput }\n *     />\n *   );\n * }\n * ```\n */\nexport const SearchControl = forwardRef( UnforwardedSearchControl );\n\nexport default SearchControl;\n"],"mappings":"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","ignoreList":[]}