@wordpress/components 30.5.1-next.233ccab9b.0 → 30.6.0

package/build-module/sandbox/index.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { renderToString, useRef, useState, useEffect } from '@wordpress/element';
-import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
+import { renderToString, useRef, useState, useEffect } from "@wordpress/element";
+import { useFocusableIframe, useMergeRefs } from "@wordpress/compose";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const observeAndResizeJS = function () {
+const observeAndResizeJS = function() {
   const {
     MutationObserver
   } = window;
@@ -18,10 +11,10 @@ const observeAndResizeJS = function () {
   function sendResize() {
     const clientBoundingRect = document.body.getBoundingClientRect();
     window.parent.postMessage({
-      action: 'resize',
+      action: "resize",
       width: clientBoundingRect.width,
       height: clientBoundingRect.height
-    }, '*');
+    }, "*");
   }
   const observer = new MutationObserver(sendResize);
   observer.observe(document.body, {
@@ -32,35 +25,26 @@ const observeAndResizeJS = function () {
     childList: true,
     subtree: true
   });
-  window.addEventListener('load', sendResize, true);
-
-  // Hack: Remove viewport unit styles, as these are relative
-  // the iframe root and interfere with our mechanism for
-  // determining the unconstrained page bounds.
+  window.addEventListener("load", sendResize, true);
   function removeViewportStyles(ruleOrNode) {
     if (ruleOrNode.style) {
-      ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) {
-        if (/^\\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])) {
-          ruleOrNode.style[style] = '';
+      ["width", "height", "minHeight", "maxHeight"].forEach(function(style2) {
+        if (/^\\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[style2])) {
+          ruleOrNode.style[style2] = "";
         }
       });
     }
   }
-  Array.prototype.forEach.call(document.querySelectorAll('[style]'), removeViewportStyles);
-  Array.prototype.forEach.call(document.styleSheets, function (stylesheet) {
+  Array.prototype.forEach.call(document.querySelectorAll("[style]"), removeViewportStyles);
+  Array.prototype.forEach.call(document.styleSheets, function(stylesheet) {
     Array.prototype.forEach.call(stylesheet.cssRules || stylesheet.rules, removeViewportStyles);
   });
-  document.body.style.position = 'absolute';
-  document.body.style.width = '100%';
-  document.body.setAttribute('data-resizable-iframe-connected', '');
+  document.body.style.position = "absolute";
+  document.body.style.width = "100%";
+  document.body.setAttribute("data-resizable-iframe-connected", "");
   sendResize();
-
-  // Resize events can change the width of elements with 100% width, but we don't
-  // get an DOM mutations for that, so do the resize when the window is resized, too.
-  window.addEventListener('resize', sendResize, true);
+  window.addEventListener("resize", sendResize, true);
 };
-
-// TODO: These styles shouldn't be coupled with WordPress.
 const style = `
 	body {
 		margin: 0;
@@ -83,21 +67,9 @@ const style = `
 		margin-bottom: 0 !important;
 	}
 `;
-
-/**
- * This component provides an isolated environment for arbitrary HTML via iframes.
- *
- * ```jsx
- * import { SandBox } from '@wordpress/components';
- *
- * const MySandBox = () => (
- * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
- * );
- * ```
- */
 function SandBox({
-  html = '',
-  title = '',
+  html = "",
+  title = "",
   type,
   styles = [],
   scripts = [],
@@ -122,52 +94,43 @@ function SandBox({
       contentDocument,
       ownerDocument
     } = ref.current;
-    if (!forceRerender && null !== contentDocument?.body.getAttribute('data-resizable-iframe-connected')) {
+    if (!forceRerender && null !== contentDocument?.body.getAttribute("data-resizable-iframe-connected")) {
       return;
     }
-
-    // Put the html snippet into a html document, and then write it to the iframe's document
-    // we can use this in the future to inject custom styles or scripts.
-    // 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 = /*#__PURE__*/_jsxs("html", {
+    const htmlDoc = /* @__PURE__ */ _jsxs("html", {
       lang: ownerDocument.documentElement.lang,
       className: type,
-      children: [/*#__PURE__*/_jsxs("head", {
-        children: [/*#__PURE__*/_jsx("title", {
+      children: [/* @__PURE__ */ _jsxs("head", {
+        children: [/* @__PURE__ */ _jsx("title", {
           children: title
-        }), /*#__PURE__*/_jsx("style", {
+        }), /* @__PURE__ */ _jsx("style", {
           dangerouslySetInnerHTML: {
             __html: style
           }
-        }), styles.map((rules, i) => /*#__PURE__*/_jsx("style", {
+        }), styles.map((rules, i) => /* @__PURE__ */ _jsx("style", {
           dangerouslySetInnerHTML: {
             __html: rules
           }
         }, i))]
-      }), /*#__PURE__*/_jsxs("body", {
+      }), /* @__PURE__ */ _jsxs("body", {
         "data-resizable-iframe-connected": "data-resizable-iframe-connected",
         className: type,
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [/* @__PURE__ */ _jsx("div", {
           dangerouslySetInnerHTML: {
             __html: html
           }
-        }), /*#__PURE__*/_jsx("script", {
+        }), /* @__PURE__ */ _jsx("script", {
           type: "text/javascript",
           dangerouslySetInnerHTML: {
             __html: `(${observeAndResizeJS.toString()})();`
           }
-        }), scripts.map(src => /*#__PURE__*/_jsx("script", {
-          src: src
+        }), scripts.map((src) => /* @__PURE__ */ _jsx("script", {
+          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.
-    // all work as expected.
     contentDocument.open();
-    contentDocument.write('<!DOCTYPE html>' + renderToString(htmlDoc));
+    contentDocument.write("<!DOCTYPE html>" + renderToString(htmlDoc));
     contentDocument.close();
   }
   useEffect(() => {
@@ -176,24 +139,18 @@ function SandBox({
       trySandBox(false);
     }
     function checkMessageForResize(event) {
-      const iframe = ref.current;
-
-      // Verify that the mounted element is the source of the message.
-      if (!iframe || iframe.contentWindow !== event.source) {
+      const iframe2 = ref.current;
+      if (!iframe2 || iframe2.contentWindow !== event.source) {
         return;
       }
-
-      // Attempt to parse the message data as JSON if passed as string.
       let data = event.data || {};
-      if ('string' === typeof data) {
+      if ("string" === typeof data) {
         try {
           data = JSON.parse(data);
-        } catch (e) {}
+        } catch (e) {
+        }
       }
-
-      // Update the state only if the message is formatted as we expect,
-      // i.e. as an object with a 'resize' action.
-      if ('resize' !== data.action) {
+      if ("resize" !== data.action) {
         return;
       }
       setWidth(data.width);
@@ -201,40 +158,32 @@ function SandBox({
     }
     const iframe = ref.current;
     const defaultView = iframe?.ownerDocument?.defaultView;
-
-    // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
-    // after reordering the containing block. See these two issues for more details:
-    // https://github.com/WordPress/gutenberg/issues/6146
-    // https://github.com/facebook/react/issues/18752
-    iframe?.addEventListener('load', tryNoForceSandBox, false);
-    defaultView?.addEventListener('message', checkMessageForResize);
+    iframe?.addEventListener("load", tryNoForceSandBox, false);
+    defaultView?.addEventListener("message", checkMessageForResize);
     return () => {
-      iframe?.removeEventListener('load', tryNoForceSandBox, false);
-      defaultView?.removeEventListener('message', checkMessageForResize);
+      iframe?.removeEventListener("load", tryNoForceSandBox, false);
+      defaultView?.removeEventListener("message", checkMessageForResize);
     };
-    // Passing `exhaustive-deps` will likely involve a more detailed refactor.
-    // See https://github.com/WordPress/gutenberg/pull/44378
   }, []);
   useEffect(() => {
     trySandBox();
-    // Passing `exhaustive-deps` will likely involve a more detailed refactor.
-    // See https://github.com/WordPress/gutenberg/pull/44378
   }, [title, styles, scripts]);
   useEffect(() => {
     trySandBox(true);
-    // Passing `exhaustive-deps` will likely involve a more detailed refactor.
-    // See https://github.com/WordPress/gutenberg/pull/44378
   }, [html, type]);
-  return /*#__PURE__*/_jsx("iframe", {
+  return /* @__PURE__ */ _jsx("iframe", {
     ref: useMergeRefs([ref, useFocusableIframe()]),
-    title: title,
-    tabIndex: tabIndex,
+    title,
+    tabIndex,
     className: "components-sandbox",
     sandbox: "allow-scripts allow-same-origin allow-presentation",
-    onFocus: onFocus,
+    onFocus,
     width: Math.ceil(width),
     height: Math.ceil(height)
   });
 }
-export default SandBox;
-//# sourceMappingURL=index.js.map
+var sandbox_default = SandBox;
+export {
+  sandbox_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["renderToString","useRef","useState","useEffect","useFocusableIframe","useMergeRefs","jsx","_jsx","jsxs","_jsxs","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","setWidth","setHeight","isFrameAccessible","current","contentDocument","e","trySandBox","forceRerender","ownerDocument","getAttribute","htmlDoc","lang","documentElement","className","children","dangerouslySetInnerHTML","__html","map","i","toString","src","open","write","close","tryNoForceSandBox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","defaultView","removeEventListener","sandbox","Math","ceil"],"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// Passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandBox();\n\t\t// Passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t}, [ title, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandBox( true );\n\t\t// Passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\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,
+  "sources": ["../../src/sandbox/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { renderToString, useRef, useState, useEffect } from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst observeAndResizeJS = function () {\n  const {\n    MutationObserver\n  } = window;\n  if (!MutationObserver || !document.body || !window.parent) {\n    return;\n  }\n  function sendResize() {\n    const clientBoundingRect = document.body.getBoundingClientRect();\n    window.parent.postMessage({\n      action: 'resize',\n      width: clientBoundingRect.width,\n      height: clientBoundingRect.height\n    }, '*');\n  }\n  const observer = new MutationObserver(sendResize);\n  observer.observe(document.body, {\n    attributes: true,\n    attributeOldValue: false,\n    characterData: true,\n    characterDataOldValue: false,\n    childList: true,\n    subtree: true\n  });\n  window.addEventListener('load', sendResize, true);\n\n  // Hack: Remove viewport unit styles, as these are relative\n  // the iframe root and interfere with our mechanism for\n  // determining the unconstrained page bounds.\n  function removeViewportStyles(ruleOrNode) {\n    if (ruleOrNode.style) {\n      ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) {\n        if (/^\\\\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          ruleOrNode.style[style] = '';\n        }\n      });\n    }\n  }\n  Array.prototype.forEach.call(document.querySelectorAll('[style]'), removeViewportStyles);\n  Array.prototype.forEach.call(document.styleSheets, function (stylesheet) {\n    Array.prototype.forEach.call(stylesheet.cssRules || stylesheet.rules, removeViewportStyles);\n  });\n  document.body.style.position = 'absolute';\n  document.body.style.width = '100%';\n  document.body.setAttribute('data-resizable-iframe-connected', '');\n  sendResize();\n\n  // Resize events can change the width of elements with 100% width, but we don't\n  // get an DOM mutations for that, so do the resize when the window is resized, too.\n  window.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  html = '',\n  title = '',\n  type,\n  styles = [],\n  scripts = [],\n  onFocus,\n  tabIndex\n}) {\n  const ref = useRef();\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  function isFrameAccessible() {\n    try {\n      return !!ref.current?.contentDocument?.body;\n    } catch (e) {\n      return false;\n    }\n  }\n  function trySandBox(forceRerender = false) {\n    if (!isFrameAccessible()) {\n      return;\n    }\n    const {\n      contentDocument,\n      ownerDocument\n    } = ref.current;\n    if (!forceRerender && null !== contentDocument?.body.getAttribute('data-resizable-iframe-connected')) {\n      return;\n    }\n\n    // Put the html snippet into a html document, and then write it to the iframe's document\n    // we can use this in the future to inject custom styles or scripts.\n    // Scripts go into the body rather than the head, to support embedded content such as Instagram\n    // that expect the scripts to be part of the body.\n    const htmlDoc = /*#__PURE__*/_jsxs(\"html\", {\n      lang: ownerDocument.documentElement.lang,\n      className: type,\n      children: [/*#__PURE__*/_jsxs(\"head\", {\n        children: [/*#__PURE__*/_jsx(\"title\", {\n          children: title\n        }), /*#__PURE__*/_jsx(\"style\", {\n          dangerouslySetInnerHTML: {\n            __html: style\n          }\n        }), styles.map((rules, i) => /*#__PURE__*/_jsx(\"style\", {\n          dangerouslySetInnerHTML: {\n            __html: rules\n          }\n        }, i))]\n      }), /*#__PURE__*/_jsxs(\"body\", {\n        \"data-resizable-iframe-connected\": \"data-resizable-iframe-connected\",\n        className: type,\n        children: [/*#__PURE__*/_jsx(\"div\", {\n          dangerouslySetInnerHTML: {\n            __html: html\n          }\n        }), /*#__PURE__*/_jsx(\"script\", {\n          type: \"text/javascript\",\n          dangerouslySetInnerHTML: {\n            __html: `(${observeAndResizeJS.toString()})();`\n          }\n        }), scripts.map(src => /*#__PURE__*/_jsx(\"script\", {\n          src: src\n        }, src))]\n      })]\n    });\n\n    // Writing the document like this makes it act in the same way as if it was\n    // loaded over the network, so DOM creation and mutation, script execution, etc.\n    // all work as expected.\n    contentDocument.open();\n    contentDocument.write('<!DOCTYPE html>' + renderToString(htmlDoc));\n    contentDocument.close();\n  }\n  useEffect(() => {\n    trySandBox();\n    function tryNoForceSandBox() {\n      trySandBox(false);\n    }\n    function checkMessageForResize(event) {\n      const iframe = ref.current;\n\n      // Verify that the mounted element is the source of the message.\n      if (!iframe || iframe.contentWindow !== event.source) {\n        return;\n      }\n\n      // Attempt to parse the message data as JSON if passed as string.\n      let data = event.data || {};\n      if ('string' === typeof data) {\n        try {\n          data = JSON.parse(data);\n        } catch (e) {}\n      }\n\n      // Update the state only if the message is formatted as we expect,\n      // i.e. as an object with a 'resize' action.\n      if ('resize' !== data.action) {\n        return;\n      }\n      setWidth(data.width);\n      setHeight(data.height);\n    }\n    const iframe = ref.current;\n    const defaultView = iframe?.ownerDocument?.defaultView;\n\n    // This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n    // after reordering the containing block. See these two issues for more details:\n    // https://github.com/WordPress/gutenberg/issues/6146\n    // https://github.com/facebook/react/issues/18752\n    iframe?.addEventListener('load', tryNoForceSandBox, false);\n    defaultView?.addEventListener('message', checkMessageForResize);\n    return () => {\n      iframe?.removeEventListener('load', tryNoForceSandBox, false);\n      defaultView?.removeEventListener('message', checkMessageForResize);\n    };\n    // Passing `exhaustive-deps` will likely involve a more detailed refactor.\n    // See https://github.com/WordPress/gutenberg/pull/44378\n  }, []);\n  useEffect(() => {\n    trySandBox();\n    // Passing `exhaustive-deps` will likely involve a more detailed refactor.\n    // See https://github.com/WordPress/gutenberg/pull/44378\n  }, [title, styles, scripts]);\n  useEffect(() => {\n    trySandBox(true);\n    // Passing `exhaustive-deps` will likely involve a more detailed refactor.\n    // See https://github.com/WordPress/gutenberg/pull/44378\n  }, [html, type]);\n  return /*#__PURE__*/_jsx(\"iframe\", {\n    ref: useMergeRefs([ref, useFocusableIframe()]),\n    title: title,\n    tabIndex: tabIndex,\n    className: \"components-sandbox\",\n    sandbox: \"allow-scripts allow-same-origin allow-presentation\",\n    onFocus: onFocus,\n    width: Math.ceil(width),\n    height: Math.ceil(height)\n  });\n}\nexport default SandBox;"],
+  "mappings": "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",
+  "names": ["style", "iframe"]
+}

package/build-module/sandbox/types.js

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

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

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/sandbox/types.ts"],"sourcesContent":["export type SandBoxProps = {\n\t/**\n\t * The HTML to render in the body of the iframe document.\n\t *\n\t * @default ''\n\t */\n\thtml?: string;\n\t/**\n\t * The `<title>` of the iframe document.\n\t *\n\t * @default ''\n\t */\n\ttitle?: string;\n\t/**\n\t * The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.\n\t */\n\ttype?: string;\n\t/**\n\t * An array of CSS strings to inject into the `<head>` of the iframe document.\n\t *\n\t * @default []\n\t */\n\tstyles?: string[];\n\t/**\n\t * An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.\n\t *\n\t * @default []\n\t */\n\tscripts?: string[];\n\t/**\n\t * The `onFocus` callback for the iframe.\n\t */\n\tonFocus?: React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ];\n\t/**\n\t * The `tabindex` the iframe should receive.\n\t *\n\t * @default 0\n\t */\n\ttabIndex?: HTMLElement[ 'tabIndex' ];\n};\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/scroll-lock/index.js

@@ -1,66 +1,19 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-
-/*
- * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.
- * Save scroll top so we can restore it after locking scroll.
- *
- * NOTE: It would be cleaner and possibly safer to find a localized solution such
- * as preventing default on certain touchmove events.
- */
+import { useEffect } from "@wordpress/element";
 let previousScrollTop = 0;
 function setLocked(locked) {
   const scrollingElement = document.scrollingElement || document.body;
   if (locked) {
     previousScrollTop = scrollingElement.scrollTop;
   }
-  const methodName = locked ? 'add' : 'remove';
-  scrollingElement.classList[methodName]('lockscroll');
-
-  // Adding the class to the document element seems to be necessary in iOS.
-  document.documentElement.classList[methodName]('lockscroll');
+  const methodName = locked ? "add" : "remove";
+  scrollingElement.classList[methodName]("lockscroll");
+  document.documentElement.classList[methodName]("lockscroll");
   if (!locked) {
     scrollingElement.scrollTop = previousScrollTop;
   }
 }
 let lockCounter = 0;
-
-/**
- * ScrollLock is a content-free React component for declaratively preventing
- * scroll bleed from modal UI to the page body. This component applies a
- * `lockscroll` class to the `document.documentElement` and
- * `document.scrollingElement` elements to stop the body from scrolling. When it
- * is present, the lock is applied.
- *
- * ```jsx
- * import { ScrollLock, Button } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyScrollLock = () => {
- *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );
- *
- *   const toggleLock = () => {
- *     setIsScrollLocked( ( locked ) => ! locked ) );
- *   };
- *
- *   return (
- *     <div>
- *       <Button variant="secondary" onClick={ toggleLock }>
- *         Toggle scroll lock
- *       </Button>
- *       { isScrollLocked && <ScrollLock /> }
- *       <p>
- *         Scroll locked:
- *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
- *       </p>
- *     </div>
- *   );
- * };
- * ```
- */
-export function ScrollLock() {
+function ScrollLock() {
   useEffect(() => {
     if (lockCounter === 0) {
       setLocked(true);
@@ -75,5 +28,9 @@ export function ScrollLock() {
   }, []);
   return null;
 }
-export default ScrollLock;
-//# sourceMappingURL=index.js.map
+var scroll_lock_default = ScrollLock;
+export {
+  ScrollLock,
+  scroll_lock_default as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/scroll-lock/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useEffect","previousScrollTop","setLocked","locked","scrollingElement","document","body","scrollTop","methodName","classList","documentElement","lockCounter","ScrollLock"],"sources":["@wordpress/components/src/scroll-lock/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/*\n * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.\n * Save scroll top so we can restore it after locking scroll.\n *\n * NOTE: It would be cleaner and possibly safer to find a localized solution such\n * as preventing default on certain touchmove events.\n */\nlet previousScrollTop = 0;\n\nfunction setLocked( locked: boolean ) {\n\tconst scrollingElement = document.scrollingElement || document.body;\n\n\tif ( locked ) {\n\t\tpreviousScrollTop = scrollingElement.scrollTop;\n\t}\n\n\tconst methodName = locked ? 'add' : 'remove';\n\tscrollingElement.classList[ methodName ]( 'lockscroll' );\n\n\t// Adding the class to the document element seems to be necessary in iOS.\n\tdocument.documentElement.classList[ methodName ]( 'lockscroll' );\n\n\tif ( ! locked ) {\n\t\tscrollingElement.scrollTop = previousScrollTop;\n\t}\n}\n\nlet lockCounter = 0;\n\n/**\n * ScrollLock is a content-free React component for declaratively preventing\n * scroll bleed from modal UI to the page body. This component applies a\n * `lockscroll` class to the `document.documentElement` and\n * `document.scrollingElement` elements to stop the body from scrolling. When it\n * is present, the lock is applied.\n *\n * ```jsx\n * import { ScrollLock, Button } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyScrollLock = () => {\n *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );\n *\n *   const toggleLock = () => {\n *     setIsScrollLocked( ( locked ) => ! locked ) );\n *   };\n *\n *   return (\n *     <div>\n *       <Button variant=\"secondary\" onClick={ toggleLock }>\n *         Toggle scroll lock\n *       </Button>\n *       { isScrollLocked && <ScrollLock /> }\n *       <p>\n *         Scroll locked:\n *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>\n *       </p>\n *     </div>\n *   );\n * };\n * ```\n */\nexport function ScrollLock(): null {\n\tuseEffect( () => {\n\t\tif ( lockCounter === 0 ) {\n\t\t\tsetLocked( true );\n\t\t}\n\n\t\t++lockCounter;\n\n\t\treturn () => {\n\t\t\tif ( lockCounter === 1 ) {\n\t\t\t\tsetLocked( false );\n\t\t\t}\n\n\t\t\t--lockCounter;\n\t\t};\n\t}, [] );\n\n\treturn null;\n}\n\nexport default ScrollLock;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;;AAE9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,iBAAiB,GAAG,CAAC;AAEzB,SAASC,SAASA,CAAEC,MAAe,EAAG;EACrC,MAAMC,gBAAgB,GAAGC,QAAQ,CAACD,gBAAgB,IAAIC,QAAQ,CAACC,IAAI;EAEnE,IAAKH,MAAM,EAAG;IACbF,iBAAiB,GAAGG,gBAAgB,CAACG,SAAS;EAC/C;EAEA,MAAMC,UAAU,GAAGL,MAAM,GAAG,KAAK,GAAG,QAAQ;EAC5CC,gBAAgB,CAACK,SAAS,CAAED,UAAU,CAAE,CAAE,YAAa,CAAC;;EAExD;EACAH,QAAQ,CAACK,eAAe,CAACD,SAAS,CAAED,UAAU,CAAE,CAAE,YAAa,CAAC;EAEhE,IAAK,CAAEL,MAAM,EAAG;IACfC,gBAAgB,CAACG,SAAS,GAAGN,iBAAiB;EAC/C;AACD;AAEA,IAAIU,WAAW,GAAG,CAAC;;AAEnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAA,EAAS;EAClCZ,SAAS,CAAE,MAAM;IAChB,IAAKW,WAAW,KAAK,CAAC,EAAG;MACxBT,SAAS,CAAE,IAAK,CAAC;IAClB;IAEA,EAAES,WAAW;IAEb,OAAO,MAAM;MACZ,IAAKA,WAAW,KAAK,CAAC,EAAG;QACxBT,SAAS,CAAE,KAAM,CAAC;MACnB;MAEA,EAAES,WAAW;IACd,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OAAO,IAAI;AACZ;AAEA,eAAeC,UAAU","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/scroll-lock/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/*\n * Setting `overflow: hidden` on html and body elements resets body scroll in iOS.\n * Save scroll top so we can restore it after locking scroll.\n *\n * NOTE: It would be cleaner and possibly safer to find a localized solution such\n * as preventing default on certain touchmove events.\n */\nlet previousScrollTop = 0;\nfunction setLocked(locked) {\n  const scrollingElement = document.scrollingElement || document.body;\n  if (locked) {\n    previousScrollTop = scrollingElement.scrollTop;\n  }\n  const methodName = locked ? 'add' : 'remove';\n  scrollingElement.classList[methodName]('lockscroll');\n\n  // Adding the class to the document element seems to be necessary in iOS.\n  document.documentElement.classList[methodName]('lockscroll');\n  if (!locked) {\n    scrollingElement.scrollTop = previousScrollTop;\n  }\n}\nlet lockCounter = 0;\n\n/**\n * ScrollLock is a content-free React component for declaratively preventing\n * scroll bleed from modal UI to the page body. This component applies a\n * `lockscroll` class to the `document.documentElement` and\n * `document.scrollingElement` elements to stop the body from scrolling. When it\n * is present, the lock is applied.\n *\n * ```jsx\n * import { ScrollLock, Button } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyScrollLock = () => {\n *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );\n *\n *   const toggleLock = () => {\n *     setIsScrollLocked( ( locked ) => ! locked ) );\n *   };\n *\n *   return (\n *     <div>\n *       <Button variant=\"secondary\" onClick={ toggleLock }>\n *         Toggle scroll lock\n *       </Button>\n *       { isScrollLocked && <ScrollLock /> }\n *       <p>\n *         Scroll locked:\n *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>\n *       </p>\n *     </div>\n *   );\n * };\n * ```\n */\nexport function ScrollLock() {\n  useEffect(() => {\n    if (lockCounter === 0) {\n      setLocked(true);\n    }\n    ++lockCounter;\n    return () => {\n      if (lockCounter === 1) {\n        setLocked(false);\n      }\n      --lockCounter;\n    };\n  }, []);\n  return null;\n}\nexport default ScrollLock;"],
+  "mappings": "AAGA,SAAS,iBAAiB;AAS1B,IAAI,oBAAoB;AACxB,SAAS,UAAU,QAAQ;AACzB,QAAM,mBAAmB,SAAS,oBAAoB,SAAS;AAC/D,MAAI,QAAQ;AACV,wBAAoB,iBAAiB;AAAA,EACvC;AACA,QAAM,aAAa,SAAS,QAAQ;AACpC,mBAAiB,UAAU,UAAU,EAAE,YAAY;AAGnD,WAAS,gBAAgB,UAAU,UAAU,EAAE,YAAY;AAC3D,MAAI,CAAC,QAAQ;AACX,qBAAiB,YAAY;AAAA,EAC/B;AACF;AACA,IAAI,cAAc;AAmCX,SAAS,aAAa;AAC3B,YAAU,MAAM;AACd,QAAI,gBAAgB,GAAG;AACrB,gBAAU,IAAI;AAAA,IAChB;AACA,MAAE;AACF,WAAO,MAAM;AACX,UAAI,gBAAgB,GAAG;AACrB,kBAAU,KAAK;AAAA,MACjB;AACA,QAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AACA,IAAO,sBAAQ;",
+  "names": []
+}

package/build-module/scrollable/component.js

@@ -1,38 +1,18 @@
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-import { contextConnect } from '../context';
-import { View } from '../view';
-import { useScrollable } from './hook';
+import { contextConnect } from "../context";
+import { View } from "../view";
+import { useScrollable } from "./hook";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedScrollable(props, forwardedRef) {
   const scrollableProps = useScrollable(props);
-  return /*#__PURE__*/_jsx(View, {
+  return /* @__PURE__ */ _jsx(View, {
     ...scrollableProps,
     ref: forwardedRef
   });
 }
-
-/**
- * `Scrollable` is a layout component that content in a scrollable container.
- *
- * ```jsx
- * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;
- *
- * function Example() {
- * 	return (
- * 		<Scrollable style={ { maxHeight: 200 } }>
- * 			<div style={ { height: 500 } }>...</div>
- * 		</Scrollable>
- * 	);
- * }
- * ```
- */
-export const Scrollable = contextConnect(UnconnectedScrollable, 'Scrollable');
-export default Scrollable;
-//# sourceMappingURL=component.js.map
+const Scrollable = contextConnect(UnconnectedScrollable, "Scrollable");
+var component_default = Scrollable;
+export {
+  Scrollable,
+  component_default as default
+};
+//# sourceMappingURL=component.js.map

package/build-module/scrollable/component.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["contextConnect","View","useScrollable","jsx","_jsx","UnconnectedScrollable","props","forwardedRef","scrollableProps","ref","Scrollable"],"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":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,aAAa,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGvC,SAASC,qBAAqBA,CAC7BC,KAAwD,EACxDC,YAAiC,EAChC;EACD,MAAMC,eAAe,GAAGN,aAAa,CAAEI,KAAM,CAAC;EAE9C,oBAAOF,IAAA,CAACH,IAAI;IAAA,GAAMO,eAAe;IAAGC,GAAG,EAAGF;EAAc,CAAE,CAAC;AAC5D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,UAAU,GAAGV,cAAc,CAAEK,qBAAqB,EAAE,YAAa,CAAC;AAE/E,eAAeK,UAAU","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/scrollable/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useScrollable } from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedScrollable(props, forwardedRef) {\n  const scrollableProps = useScrollable(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...scrollableProps,\n    ref: forwardedRef\n  });\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');\nexport default Scrollable;"],
+  "mappings": "AAQA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,OAAO,YAAY;AAC5B,SAAS,sBAAsB,OAAO,cAAc;AAClD,QAAM,kBAAkB,cAAc,KAAK;AAC3C,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AAiBO,MAAM,aAAa,eAAe,uBAAuB,YAAY;AAC5E,IAAO,oBAAQ;",
+  "names": []
+}

package/build-module/scrollable/hook.js

@@ -1,27 +1,22 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-
-import { useContextSystem } from '../context';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
-export function useScrollable(props) {
+import { useMemo } from "@wordpress/element";
+import { useContextSystem } from "../context";
+import * as styles from "./styles";
+import { useCx } from "../utils/hooks/use-cx";
+function useScrollable(props) {
   const {
     className,
-    scrollDirection = 'y',
+    scrollDirection = "y",
     smoothScroll = false,
     ...otherProps
-  } = useContextSystem(props, 'Scrollable');
+  } = useContextSystem(props, "Scrollable");
   const cx = useCx();
-  const classes = useMemo(() => cx(styles.Scrollable, styles.scrollableScrollbar, smoothScroll && styles.smoothScroll, scrollDirection === 'x' && styles.scrollX, scrollDirection === 'y' && styles.scrollY, scrollDirection === 'auto' && styles.scrollAuto, className), [className, cx, scrollDirection, smoothScroll]);
+  const classes = useMemo(() => cx(styles.Scrollable, styles.scrollableScrollbar, smoothScroll && styles.smoothScroll, scrollDirection === "x" && styles.scrollX, scrollDirection === "y" && styles.scrollY, scrollDirection === "auto" && styles.scrollAuto, className), [className, cx, scrollDirection, smoothScroll]);
   return {
     ...otherProps,
     className: classes
   };
 }
-//# sourceMappingURL=hook.js.map
+export {
+  useScrollable
+};
+//# sourceMappingURL=hook.js.map

package/build-module/scrollable/hook.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useMemo","useContextSystem","styles","useCx","useScrollable","props","className","scrollDirection","smoothScroll","otherProps","cx","classes","Scrollable","scrollableScrollbar","scrollX","scrollY","scrollAuto"],"sources":["@wordpress/components/src/scrollable/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nimport type { ScrollableProps } from './types';\n\nexport function useScrollable(\n\tprops: WordPressComponentProps< ScrollableProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tscrollDirection = 'y',\n\t\tsmoothScroll = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Scrollable' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Scrollable,\n\t\t\t\tstyles.scrollableScrollbar,\n\t\t\t\tsmoothScroll && styles.smoothScroll,\n\t\t\t\tscrollDirection === 'x' && styles.scrollX,\n\t\t\t\tscrollDirection === 'y' && styles.scrollY,\n\t\t\t\tscrollDirection === 'auto' && styles.scrollAuto,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, scrollDirection, smoothScroll ]\n\t);\n\n\treturn { ...otherProps, className: classes };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,SAASC,KAAK,QAAQ,uBAAuB;AAG7C,OAAO,SAASC,aAAaA,CAC5BC,KAAwD,EACvD;EACD,MAAM;IACLC,SAAS;IACTC,eAAe,GAAG,GAAG;IACrBC,YAAY,GAAG,KAAK;IACpB,GAAGC;EACJ,CAAC,GAAGR,gBAAgB,CAAEI,KAAK,EAAE,YAAa,CAAC;EAE3C,MAAMK,EAAE,GAAGP,KAAK,CAAC,CAAC;EAElB,MAAMQ,OAAO,GAAGX,OAAO,CACtB,MACCU,EAAE,CACDR,MAAM,CAACU,UAAU,EACjBV,MAAM,CAACW,mBAAmB,EAC1BL,YAAY,IAAIN,MAAM,CAACM,YAAY,EACnCD,eAAe,KAAK,GAAG,IAAIL,MAAM,CAACY,OAAO,EACzCP,eAAe,KAAK,GAAG,IAAIL,MAAM,CAACa,OAAO,EACzCR,eAAe,KAAK,MAAM,IAAIL,MAAM,CAACc,UAAU,EAC/CV,SACD,CAAC,EACF,CAAEA,SAAS,EAAEI,EAAE,EAAEH,eAAe,EAAEC,YAAY,CAC/C,CAAC;EAED,OAAO;IAAE,GAAGC,UAAU;IAAEH,SAAS,EAAEK;EAAQ,CAAC;AAC7C","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/scrollable/hook.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nexport function useScrollable(props) {\n  const {\n    className,\n    scrollDirection = 'y',\n    smoothScroll = false,\n    ...otherProps\n  } = useContextSystem(props, 'Scrollable');\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.Scrollable, styles.scrollableScrollbar, smoothScroll && styles.smoothScroll, scrollDirection === 'x' && styles.scrollX, scrollDirection === 'y' && styles.scrollY, scrollDirection === 'auto' && styles.scrollAuto, className), [className, cx, scrollDirection, smoothScroll]);\n  return {\n    ...otherProps,\n    className: classes\n  };\n}"],
+  "mappings": "AAGA,SAAS,eAAe;AAMxB,SAAS,wBAAwB;AACjC,YAAY,YAAY;AACxB,SAAS,aAAa;AACf,SAAS,cAAc,OAAO;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,YAAY;AACxC,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM,GAAG,OAAO,YAAY,OAAO,qBAAqB,gBAAgB,OAAO,cAAc,oBAAoB,OAAO,OAAO,SAAS,oBAAoB,OAAO,OAAO,SAAS,oBAAoB,UAAU,OAAO,YAAY,SAAS,GAAG,CAAC,WAAW,IAAI,iBAAiB,YAAY,CAAC;AACtT,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,EACb;AACF;",
+  "names": []
+}

package/build-module/scrollable/index.js

@@ -1,3 +1,6 @@
-export { default as Scrollable } from './component';
-export * from './hook';
-//# sourceMappingURL=index.js.map
+import { default as default2 } from "./component";
+export * from "./hook";
+export {
+  default2 as Scrollable
+};
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["default","Scrollable"],"sources":["@wordpress/components/src/scrollable/index.ts"],"sourcesContent":["export { default as Scrollable } from './component';\n\nexport * from './hook';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,aAAa;AAEnD,cAAc,QAAQ","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/scrollable/index.ts"],
+  "sourcesContent": ["export { default as Scrollable } from './component';\nexport * from './hook';"],
+  "mappings": "AAAA,SAAoB,WAAXA,gBAA6B;AACtC,cAAc;",
+  "names": ["default"]
+}