@wordpress/components 25.5.0 → 25.6.1

package/build/resizable-box/resize-tooltip/utils.js

@@ -5,22 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.POSITIONS = void 0;
 exports.useResizeLabel = useResizeLabel;
-
 var _element = require("@wordpress/element");
-
 var _compose = require("@wordpress/compose");
-
 /**
  * WordPress dependencies
  */
-const noop = () => {};
 
+const noop = () => {};
 const POSITIONS = {
   bottom: 'bottom',
   corner: 'corner'
 };
 exports.POSITIONS = POSITIONS;
-
 /**
  * Custom hook that manages resize listener events. It also provides a label
  * based on current resize width x height values.
@@ -46,36 +42,36 @@ function useResizeLabel({
    * This custom hook uses the ResizeObserver API to listen for resize events.
    */
   const [resizeListener, sizes] = (0, _compose.useResizeObserver)();
+
   /*
    * Indicates if the x/y axis is preferred.
    * If set, we will avoid resetting the moveX and moveY values.
    * This will allow for the preferred axis values to persist in the label.
    */
-
   const isAxisControlled = !!axis;
+
   /*
    * The moveX and moveY values are used to track whether the label should
    * display width, height, or width x height.
    */
-
   const [moveX, setMoveX] = (0, _element.useState)(false);
   const [moveY, setMoveY] = (0, _element.useState)(false);
+
   /*
    * Cached dimension values to check for width/height updates from the
    * sizes property from useResizeAware()
    */
-
   const {
     width,
     height
   } = sizes;
   const heightRef = (0, _element.useRef)(height);
   const widthRef = (0, _element.useRef)(width);
+
   /*
    * This timeout is used with setMoveX and setMoveY to determine of
    * both width and height values have changed at (roughly) the same time.
    */
-
   const moveTimeoutRef = (0, _element.useRef)();
   const debounceUnsetMoveXY = (0, _element.useCallback)(() => {
     const unsetMoveXY = () => {
@@ -87,11 +83,9 @@ function useResizeLabel({
       setMoveX(false);
       setMoveY(false);
     };
-
     if (moveTimeoutRef.current) {
       window.clearTimeout(moveTimeoutRef.current);
     }
-
     moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);
   }, [fadeTimeout, isAxisControlled]);
   (0, _element.useEffect)(() => {
@@ -104,33 +98,30 @@ function useResizeLabel({
     const didWidthChange = width !== widthRef.current;
     const didHeightChange = height !== heightRef.current;
     if (!didWidthChange && !didHeightChange) return;
+
     /*
      * After the initial render, the useResizeAware will set the first
      * width and height values. We'll sync those values with our
      * width and height refs. However, we shouldn't render our Tooltip
      * label on this first cycle.
      */
-
     if (width && !widthRef.current && height && !heightRef.current) {
       widthRef.current = width;
       heightRef.current = height;
       return;
     }
+
     /*
      * After the first cycle, we can track width and height changes.
      */
-
-
     if (didWidthChange) {
       setMoveX(true);
       widthRef.current = width;
     }
-
     if (didHeightChange) {
       setMoveY(true);
       heightRef.current = height;
     }
-
     onResize({
       width,
       height
@@ -151,7 +142,6 @@ function useResizeLabel({
     resizeListener
   };
 }
-
 /**
  * Gets the resize label based on width and height values (as well as recent changes).
  *
@@ -176,14 +166,15 @@ function getSizeLabel({
   width
 }) {
   if (!moveX && !moveY) return undefined;
+
   /*
    * Corner position...
    * We want the label to appear like width x height.
    */
-
   if (position === POSITIONS.corner) {
     return `${width} x ${height}`;
   }
+
   /*
    * Other POSITIONS...
    * The label will combine both width x height values if both
@@ -192,32 +183,24 @@ function getSizeLabel({
    * Otherwise, only width or height will be displayed.
    * The `PX` unit will be added, if specified by the `showPx` prop.
    */
-
-
   const labelUnit = showPx ? ' px' : '';
-
   if (axis) {
     if (axis === 'x' && moveX) {
       return `${width}${labelUnit}`;
     }
-
     if (axis === 'y' && moveY) {
       return `${height}${labelUnit}`;
     }
   }
-
   if (moveX && moveY) {
     return `${width} x ${height}`;
   }
-
   if (moveX) {
     return `${width}${labelUnit}`;
   }
-
   if (moveY) {
     return `${height}${labelUnit}`;
   }
-
   return undefined;
 }
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","debounceUnsetMoveXY","unsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":";;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAIO,MAAMC,SAAS,GAAG;AACxBC,EAAAA,MAAM,EAAE,QADgB;AAExBC,EAAAA,MAAM,EAAE;AAFgB,CAAlB;;;AAsBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAT,CAAyB;AAC/BC,EAAAA,IAD+B;AAE/BC,EAAAA,WAAW,GAAG,GAFiB;AAG/BC,EAAAA,QAAQ,GAAGP,IAHoB;AAI/BQ,EAAAA,QAAQ,GAAGP,SAAS,CAACC,MAJU;AAK/BO,EAAAA,MAAM,GAAG;AALsB,CAAzB,EAMsC;AAC5C;AACD;AACA;AACA;AACC,QAAM,CAAEC,cAAF,EAAkBC,KAAlB,IAA4B,iCAAlC;AAEA;AACD;AACA;AACA;AACA;;AACC,QAAMC,gBAAgB,GAAG,CAAC,CAAEP,IAA5B;AAEA;AACD;AACA;AACA;;AACC,QAAM,CAAEQ,KAAF,EAASC,QAAT,IAAsB,uBAAU,KAAV,CAA5B;AACA,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAAU,KAAV,CAA5B;AAEA;AACD;AACA;AACA;;AACC,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBP,KAA1B;AACA,QAAMQ,SAAS,GAAG,qBAAQD,MAAR,CAAlB;AACA,QAAME,QAAQ,GAAG,qBAAQH,KAAR,CAAjB;AAEA;AACD;AACA;AACA;;AACC,QAAMI,cAAc,GAAG,sBAAvB;AAEA,QAAMC,mBAAmB,GAAG,0BAAa,MAAM;AAC9C,UAAMC,WAAW,GAAG,MAAM;AACzB;AACH;AACA;AACA;AACG,UAAKX,gBAAL,EAAwB;AACxBE,MAAAA,QAAQ,CAAE,KAAF,CAAR;AACAE,MAAAA,QAAQ,CAAE,KAAF,CAAR;AACA,KARD;;AAUA,QAAKK,cAAc,CAACG,OAApB,EAA8B;AAC7BC,MAAAA,MAAM,CAACC,YAAP,CAAqBL,cAAc,CAACG,OAApC;AACA;;AAEDH,IAAAA,cAAc,CAACG,OAAf,GAAyBC,MAAM,CAACE,UAAP,CAAmBJ,WAAnB,EAAgCjB,WAAhC,CAAzB;AACA,GAhB2B,EAgBzB,CAAEA,WAAF,EAAeM,gBAAf,CAhByB,CAA5B;AAkBA,0BAAW,MAAM;AAChB;AACF;AACA;AACA;AACE,UAAMgB,UAAU,GAAGX,KAAK,KAAK,IAAV,IAAkBC,MAAM,KAAK,IAAhD;AAEA,QAAK,CAAEU,UAAP,EAAoB;AAEpB,UAAMC,cAAc,GAAGZ,KAAK,KAAKG,QAAQ,CAACI,OAA1C;AACA,UAAMM,eAAe,GAAGZ,MAAM,KAAKC,SAAS,CAACK,OAA7C;AAEA,QAAK,CAAEK,cAAF,IAAoB,CAAEC,eAA3B,EAA6C;AAE7C;AACF;AACA;AACA;AACA;AACA;;AACE,QAAKb,KAAK,IAAI,CAAEG,QAAQ,CAACI,OAApB,IAA+BN,MAA/B,IAAyC,CAAEC,SAAS,CAACK,OAA1D,EAAoE;AACnEJ,MAAAA,QAAQ,CAACI,OAAT,GAAmBP,KAAnB;AACAE,MAAAA,SAAS,CAACK,OAAV,GAAoBN,MAApB;AACA;AACA;AAED;AACF;AACA;;;AACE,QAAKW,cAAL,EAAsB;AACrBf,MAAAA,QAAQ,CAAE,IAAF,CAAR;AACAM,MAAAA,QAAQ,CAACI,OAAT,GAAmBP,KAAnB;AACA;;AAED,QAAKa,eAAL,EAAuB;AACtBd,MAAAA,QAAQ,CAAE,IAAF,CAAR;AACAG,MAAAA,SAAS,CAACK,OAAV,GAAoBN,MAApB;AACA;;AAEDX,IAAAA,QAAQ,CAAE;AAAEU,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAF,CAAR;AACAI,IAAAA,mBAAmB;AACnB,GAzCD,EAyCG,CAAEL,KAAF,EAASC,MAAT,EAAiBX,QAAjB,EAA2Be,mBAA3B,CAzCH;AA2CA,QAAMS,KAAK,GAAGC,YAAY,CAAE;AAC3B3B,IAAAA,IAD2B;AAE3Ba,IAAAA,MAF2B;AAG3BL,IAAAA,KAH2B;AAI3BE,IAAAA,KAJ2B;AAK3BP,IAAAA,QAL2B;AAM3BC,IAAAA,MAN2B;AAO3BQ,IAAAA;AAP2B,GAAF,CAA1B;AAUA,SAAO;AACNc,IAAAA,KADM;AAENrB,IAAAA;AAFM,GAAP;AAIA;;AAYD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASsB,YAAT,CAAuB;AACtB3B,EAAAA,IADsB;AAEtBa,EAAAA,MAFsB;AAGtBL,EAAAA,KAAK,GAAG,KAHc;AAItBE,EAAAA,KAAK,GAAG,KAJc;AAKtBP,EAAAA,QAAQ,GAAGP,SAAS,CAACC,MALC;AAMtBO,EAAAA,MAAM,GAAG,KANa;AAOtBQ,EAAAA;AAPsB,CAAvB,EAQ0C;AACzC,MAAK,CAAEJ,KAAF,IAAW,CAAEE,KAAlB,EAA0B,OAAOkB,SAAP;AAE1B;AACD;AACA;AACA;;AACC,MAAKzB,QAAQ,KAAKP,SAAS,CAACE,MAA5B,EAAqC;AACpC,WAAQ,GAAGc,KAAO,MAAMC,MAAQ,EAAhC;AACA;AAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;;AACC,QAAMgB,SAAS,GAAGzB,MAAM,GAAG,KAAH,GAAW,EAAnC;;AAEA,MAAKJ,IAAL,EAAY;AACX,QAAKA,IAAI,KAAK,GAAT,IAAgBQ,KAArB,EAA6B;AAC5B,aAAQ,GAAGI,KAAO,GAAGiB,SAAW,EAAhC;AACA;;AACD,QAAK7B,IAAI,KAAK,GAAT,IAAgBU,KAArB,EAA6B;AAC5B,aAAQ,GAAGG,MAAQ,GAAGgB,SAAW,EAAjC;AACA;AACD;;AAED,MAAKrB,KAAK,IAAIE,KAAd,EAAsB;AACrB,WAAQ,GAAGE,KAAO,MAAMC,MAAQ,EAAhC;AACA;;AACD,MAAKL,KAAL,EAAa;AACZ,WAAQ,GAAGI,KAAO,GAAGiB,SAAW,EAAhC;AACA;;AACD,MAAKnB,KAAL,EAAa;AACZ,WAAQ,GAAGG,MAAQ,GAAGgB,SAAW,EAAjC;AACA;;AAED,SAAOD,SAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = ( typeof POSITIONS )[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param props\n * @param props.axis        Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize    Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position    Adjusts label value.\n * @param props.showPx      Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst debounceUnsetMoveXY = useCallback( () => {\n\t\tconst unsetMoveXY = () => {\n\t\t\t/*\n\t\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t\t */\n\t\t\tif ( isAxisControlled ) return;\n\t\t\tsetMoveX( false );\n\t\t\tsetMoveY( false );\n\t\t};\n\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t}, [ fadeTimeout, isAxisControlled ] );\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height, onResize, debounceUnsetMoveXY ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param props\n * @param props.axis     Only shows the label corresponding to the axis.\n * @param props.height   Height value.\n * @param props.moveX    Recent width (x axis) changes.\n * @param props.moveY    Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx   Whether to add `PX` to the label.\n * @param props.width    Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}
+{"version":3,"names":["_element","require","_compose","noop","POSITIONS","bottom","corner","exports","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","useResizeObserver","isAxisControlled","moveX","setMoveX","useState","moveY","setMoveY","width","height","heightRef","useRef","widthRef","moveTimeoutRef","debounceUnsetMoveXY","useCallback","unsetMoveXY","current","window","clearTimeout","setTimeout","useEffect","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = ( typeof POSITIONS )[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param props\n * @param props.axis        Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize    Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position    Adjusts label value.\n * @param props.showPx      Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst debounceUnsetMoveXY = useCallback( () => {\n\t\tconst unsetMoveXY = () => {\n\t\t\t/*\n\t\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t\t */\n\t\t\tif ( isAxisControlled ) return;\n\t\t\tsetMoveX( false );\n\t\t\tsetMoveY( false );\n\t\t};\n\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t}, [ fadeTimeout, isAxisControlled ] );\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height, onResize, debounceUnsetMoveXY ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param props\n * @param props.axis     Only shows the label corresponding to the axis.\n * @param props.height   Height value.\n * @param props.moveX    Recent width (x axis) changes.\n * @param props.moveY    Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx   Whether to add `PX` to the label.\n * @param props.width    Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIA,MAAME,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAId,MAAMC,SAAS,GAAG;EACxBC,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE;AACT,CAAU;AAACC,OAAA,CAAAH,SAAA,GAAAA,SAAA;AAmBX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAE;EAC/BC,IAAI;EACJC,WAAW,GAAG,GAAG;EACjBC,QAAQ,GAAGR,IAAI;EACfS,QAAQ,GAAGR,SAAS,CAACC,MAAM;EAC3BQ,MAAM,GAAG;AACU,CAAC,EAAwB;EAC5C;AACD;AACA;AACA;EACC,MAAM,CAAEC,cAAc,EAAEC,KAAK,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;;EAErD;AACD;AACA;AACA;AACA;EACC,MAAMC,gBAAgB,GAAG,CAAC,CAAER,IAAI;;EAEhC;AACD;AACA;AACA;EACC,MAAM,CAAES,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAC7C,MAAM,CAAEC,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAF,iBAAQ,EAAE,KAAM,CAAC;;EAE7C;AACD;AACA;AACA;EACC,MAAM;IAAEG,KAAK;IAAEC;EAAO,CAAC,GAAGT,KAAK;EAC/B,MAAMU,SAAS,GAAG,IAAAC,eAAM,EAAEF,MAAO,CAAC;EAClC,MAAMG,QAAQ,GAAG,IAAAD,eAAM,EAAEH,KAAM,CAAC;;EAEhC;AACD;AACA;AACA;EACC,MAAMK,cAAc,GAAG,IAAAF,eAAM,EAAW,CAAC;EAEzC,MAAMG,mBAAmB,GAAG,IAAAC,oBAAW,EAAE,MAAM;IAC9C,MAAMC,WAAW,GAAGA,CAAA,KAAM;MACzB;AACH;AACA;AACA;MACG,IAAKd,gBAAgB,EAAG;MACxBE,QAAQ,CAAE,KAAM,CAAC;MACjBG,QAAQ,CAAE,KAAM,CAAC;IAClB,CAAC;IAED,IAAKM,cAAc,CAACI,OAAO,EAAG;MAC7BC,MAAM,CAACC,YAAY,CAAEN,cAAc,CAACI,OAAQ,CAAC;IAC9C;IAEAJ,cAAc,CAACI,OAAO,GAAGC,MAAM,CAACE,UAAU,CAAEJ,WAAW,EAAErB,WAAY,CAAC;EACvE,CAAC,EAAE,CAAEA,WAAW,EAAEO,gBAAgB,CAAG,CAAC;EAEtC,IAAAmB,kBAAS,EAAE,MAAM;IAChB;AACF;AACA;AACA;IACE,MAAMC,UAAU,GAAGd,KAAK,KAAK,IAAI,IAAIC,MAAM,KAAK,IAAI;IAEpD,IAAK,CAAEa,UAAU,EAAG;IAEpB,MAAMC,cAAc,GAAGf,KAAK,KAAKI,QAAQ,CAACK,OAAO;IACjD,MAAMO,eAAe,GAAGf,MAAM,KAAKC,SAAS,CAACO,OAAO;IAEpD,IAAK,CAAEM,cAAc,IAAI,CAAEC,eAAe,EAAG;;IAE7C;AACF;AACA;AACA;AACA;AACA;IACE,IAAKhB,KAAK,IAAI,CAAEI,QAAQ,CAACK,OAAO,IAAIR,MAAM,IAAI,CAAEC,SAAS,CAACO,OAAO,EAAG;MACnEL,QAAQ,CAACK,OAAO,GAAGT,KAAK;MACxBE,SAAS,CAACO,OAAO,GAAGR,MAAM;MAC1B;IACD;;IAEA;AACF;AACA;IACE,IAAKc,cAAc,EAAG;MACrBnB,QAAQ,CAAE,IAAK,CAAC;MAChBQ,QAAQ,CAACK,OAAO,GAAGT,KAAK;IACzB;IAEA,IAAKgB,eAAe,EAAG;MACtBjB,QAAQ,CAAE,IAAK,CAAC;MAChBG,SAAS,CAACO,OAAO,GAAGR,MAAM;IAC3B;IAEAb,QAAQ,CAAE;MAAEY,KAAK;MAAEC;IAAO,CAAE,CAAC;IAC7BK,mBAAmB,CAAC,CAAC;EACtB,CAAC,EAAE,CAAEN,KAAK,EAAEC,MAAM,EAAEb,QAAQ,EAAEkB,mBAAmB,CAAG,CAAC;EAErD,MAAMW,KAAK,GAAGC,YAAY,CAAE;IAC3BhC,IAAI;IACJe,MAAM;IACNN,KAAK;IACLG,KAAK;IACLT,QAAQ;IACRC,MAAM;IACNU;EACD,CAAE,CAAC;EAEH,OAAO;IACNiB,KAAK;IACL1B;EACD,CAAC;AACF;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS2B,YAAYA,CAAE;EACtBhC,IAAI;EACJe,MAAM;EACNN,KAAK,GAAG,KAAK;EACbG,KAAK,GAAG,KAAK;EACbT,QAAQ,GAAGR,SAAS,CAACC,MAAM;EAC3BQ,MAAM,GAAG,KAAK;EACdU;AACiB,CAAC,EAAuB;EACzC,IAAK,CAAEL,KAAK,IAAI,CAAEG,KAAK,EAAG,OAAOqB,SAAS;;EAE1C;AACD;AACA;AACA;EACC,IAAK9B,QAAQ,KAAKR,SAAS,CAACE,MAAM,EAAG;IACpC,OAAQ,GAAGiB,KAAO,MAAMC,MAAQ,EAAC;EAClC;;EAEA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAMmB,SAAS,GAAG9B,MAAM,GAAG,KAAK,GAAG,EAAE;EAErC,IAAKJ,IAAI,EAAG;IACX,IAAKA,IAAI,KAAK,GAAG,IAAIS,KAAK,EAAG;MAC5B,OAAQ,GAAGK,KAAO,GAAGoB,SAAW,EAAC;IAClC;IACA,IAAKlC,IAAI,KAAK,GAAG,IAAIY,KAAK,EAAG;MAC5B,OAAQ,GAAGG,MAAQ,GAAGmB,SAAW,EAAC;IACnC;EACD;EAEA,IAAKzB,KAAK,IAAIG,KAAK,EAAG;IACrB,OAAQ,GAAGE,KAAO,MAAMC,MAAQ,EAAC;EAClC;EACA,IAAKN,KAAK,EAAG;IACZ,OAAQ,GAAGK,KAAO,GAAGoB,SAAW,EAAC;EAClC;EACA,IAAKtB,KAAK,EAAG;IACZ,OAAQ,GAAGG,MAAQ,GAAGmB,SAAW,EAAC;EACnC;EAEA,OAAOD,SAAS;AACjB"}

package/build/responsive-wrapper/index.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 /**
  * External dependencies
  */
@@ -44,24 +40,21 @@ function ResponsiveWrapper({
   if (_element.Children.count(children) !== 1) {
     return null;
   }
-
   const TagName = isInline ? 'span' : 'div';
   let aspectRatio;
-
   if (naturalWidth && naturalHeight) {
     aspectRatio = `${naturalWidth} / ${naturalHeight}`;
   }
-
   return (0, _element.createElement)(TagName, {
     className: "components-responsive-wrapper"
   }, (0, _element.createElement)("div", null, (0, _element.cloneElement)(children, {
     className: (0, _classnames.default)('components-responsive-wrapper__content', children.props.className),
-    style: { ...children.props.style,
+    style: {
+      ...children.props.style,
       aspectRatio
     }
   })));
 }
-
 var _default = ResponsiveWrapper;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/responsive-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"names":["ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","Children","count","TagName","aspectRatio","className","props","style"],"mappings":";;;;;;;;;AAQA;;AALA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,iBAAT,CAA4B;AAC3BC,EAAAA,YAD2B;AAE3BC,EAAAA,aAF2B;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA,QAAQ,GAAG;AAJgB,CAA5B,EAK4B;AAC3B,MAAKC,kBAASC,KAAT,CAAgBH,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,QAAMI,OAAO,GAAGH,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,MAAII,WAAJ;;AACA,MAAKP,YAAY,IAAIC,aAArB,EAAqC;AACpCM,IAAAA,WAAW,GAAI,GAAGP,YAAc,MAAMC,aAAe,EAArD;AACA;;AAED,SACC,4BAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,yCACG,2BAAcC,QAAd,EAAwB;AACzBM,IAAAA,SAAS,EAAE,yBACV,wCADU,EAEVN,QAAQ,CAACO,KAAT,CAAeD,SAFL,CADc;AAKzBE,IAAAA,KAAK,EAAE,EACN,GAAGR,QAAQ,CAACO,KAAT,CAAeC,KADZ;AAENH,MAAAA;AAFM;AALkB,GAAxB,CADH,CADD,CADD;AAgBA;;eAEcR,iB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveWrapperProps } from './types';\n\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n}: ResponsiveWrapperProps ) {\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\n\tconst TagName = isInline ? 'span' : 'div';\n\tlet aspectRatio;\n\tif ( naturalWidth && naturalHeight ) {\n\t\taspectRatio = `${ naturalWidth } / ${ naturalHeight }`;\n\t}\n\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t<div>\n\t\t\t\t{ cloneElement( children, {\n\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\t\tchildren.props.className\n\t\t\t\t\t),\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t...children.props.style,\n\t\t\t\t\t\taspectRatio,\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}
+{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","Children","count","TagName","aspectRatio","createElement","className","cloneElement","classnames","props","style","_default","exports","default"],"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveWrapperProps } from './types';\n\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n}: ResponsiveWrapperProps ) {\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\n\tconst TagName = isInline ? 'span' : 'div';\n\tlet aspectRatio;\n\tif ( naturalWidth && naturalHeight ) {\n\t\taspectRatio = `${ naturalWidth } / ${ naturalHeight }`;\n\t}\n\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t<div>\n\t\t\t\t{ cloneElement( children, {\n\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\t\tchildren.props.className\n\t\t\t\t\t),\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t...children.props.style,\n\t\t\t\t\t\taspectRatio,\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,iBAAiBA,CAAE;EAC3BC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC,QAAQ,GAAG;AACY,CAAC,EAAG;EAC3B,IAAKC,iBAAQ,CAACC,KAAK,CAAEH,QAAS,CAAC,KAAK,CAAC,EAAG;IACvC,OAAO,IAAI;EACZ;EAEA,MAAMI,OAAO,GAAGH,QAAQ,GAAG,MAAM,GAAG,KAAK;EACzC,IAAII,WAAW;EACf,IAAKP,YAAY,IAAIC,aAAa,EAAG;IACpCM,WAAW,GAAI,GAAGP,YAAc,MAAMC,aAAe,EAAC;EACvD;EAEA,OACC,IAAAN,QAAA,CAAAa,aAAA,EAACF,OAAO;IAACG,SAAS,EAAC;EAA+B,GACjD,IAAAd,QAAA,CAAAa,aAAA,eACG,IAAAE,qBAAY,EAAER,QAAQ,EAAE;IACzBO,SAAS,EAAE,IAAAE,mBAAU,EACpB,wCAAwC,EACxCT,QAAQ,CAACU,KAAK,CAACH,SAChB,CAAC;IACDI,KAAK,EAAE;MACN,GAAGX,QAAQ,CAACU,KAAK,CAACC,KAAK;MACvBN;IACD;EACD,CAAE,CACE,CACG,CAAC;AAEZ;AAAC,IAAAO,QAAA,GAEcf,iBAAiB;AAAAgB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/responsive-wrapper/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/responsive-wrapper/types.ts"],"sourcesContent":["export type ResponsiveWrapperProps = {\n\t/**\n\t * The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.\n\t */\n\tnaturalWidth?: number;\n\t/**\n\t * The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.\n\t */\n\tnaturalHeight?: number;\n\t/**\n\t * The element to wrap.\n\t */\n\tchildren: React.ReactElement;\n\t/**\n\t * If true, the wrapper will be `span` instead of `div`.\n\t *\n\t * @default false\n\t */\n\tisInline?: boolean;\n};\n"],"mappings":""}

package/build/sandbox/index.js

@@ -4,23 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _compose = require("@wordpress/compose");
-
 /**
  * WordPress dependencies
  */
+
 const observeAndResizeJS = function () {
   const {
     MutationObserver
   } = window;
-
   if (!MutationObserver || !document.body || !window.parent) {
     return;
   }
-
   function sendResize() {
     const clientBoundingRect = document.body.getBoundingClientRect();
     window.parent.postMessage({
@@ -29,7 +25,6 @@ const observeAndResizeJS = function () {
       height: clientBoundingRect.height
     }, '*');
   }
-
   const observer = new MutationObserver(sendResize);
   observer.observe(document.body, {
     attributes: true,
@@ -39,10 +34,11 @@ const observeAndResizeJS = function () {
     childList: true,
     subtree: true
   });
-  window.addEventListener('load', sendResize, true); // Hack: Remove viewport unit styles, as these are relative
+  window.addEventListener('load', sendResize, true);
+
+  // Hack: Remove viewport unit styles, as these are relative
   // the iframe root and interfere with our mechanism for
   // determining the unconstrained page bounds.
-
   function removeViewportStyles(ruleOrNode) {
     if (ruleOrNode.style) {
       ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) {
@@ -52,7 +48,6 @@ const observeAndResizeJS = function () {
       });
     }
   }
-
   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);
@@ -60,13 +55,14 @@ const observeAndResizeJS = function () {
   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.
+  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);
-}; // TODO: These styles shouldn't be coupled with WordPress.
-
+};
 
+// TODO: These styles shouldn't be coupled with WordPress.
 const style = `
 	body {
 		margin: 0;
@@ -89,6 +85,7 @@ const style = `
 		margin-bottom: 0 !important;
 	}
 `;
+
 /**
  * This component provides an isolated environment for arbitrary HTML via iframes.
  *
@@ -100,7 +97,6 @@ const style = `
  * );
  * ```
  */
-
 function SandBox({
   html = '',
   title = '',
@@ -112,7 +108,6 @@ function SandBox({
   const ref = (0, _element.useRef)();
   const [width, setWidth] = (0, _element.useState)(0);
   const [height, setHeight] = (0, _element.useState)(0);
-
   function isFrameAccessible() {
     try {
       return !!ref.current?.contentDocument?.body;
@@ -120,25 +115,22 @@ function SandBox({
       return false;
     }
   }
-
   function trySandBox(forceRerender = false) {
     if (!isFrameAccessible()) {
       return;
     }
-
     const {
       contentDocument,
       ownerDocument
     } = ref.current;
-
     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
+    }
+
+    // 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 = (0, _element.createElement)("html", {
       lang: ownerDocument.documentElement.lang,
       className: type
@@ -166,70 +158,70 @@ function SandBox({
     }), scripts.map(src => (0, _element.createElement)("script", {
       key: src,
       src: src
-    })))); // Writing the document like this makes it act in the same way as if it was
+    }))));
+
+    // 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>' + (0, _element.renderToString)(htmlDoc));
     contentDocument.close();
   }
-
   (0, _element.useEffect)(() => {
     trySandBox();
-
     function tryNoForceSandBox() {
       trySandBox(false);
     }
-
     function checkMessageForResize(event) {
-      const iframe = ref.current; // Verify that the mounted element is the source of the message.
+      const iframe = ref.current;
 
+      // Verify that the mounted element is the source of the message.
       if (!iframe || iframe.contentWindow !== event.source) {
         return;
-      } // Attempt to parse the message data as JSON if passed as string.
-
+      }
 
+      // Attempt to parse the message data as JSON if passed as string.
       let data = event.data || {};
-
       if ('string' === typeof data) {
         try {
           data = JSON.parse(data);
         } catch (e) {}
-      } // Update the state only if the message is formatted as we expect,
-      // i.e. as an object with a 'resize' action.
-
+      }
 
+      // 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) {
         return;
       }
-
       setWidth(data.width);
       setHeight(data.height);
     }
-
     const iframe = ref.current;
-    const defaultView = iframe?.ownerDocument?.defaultView; // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
+    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);
     return () => {
       iframe?.removeEventListener('load', tryNoForceSandBox, false);
-      defaultView?.addEventListener('message', checkMessageForResize);
-    }; // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+      defaultView?.removeEventListener('message', checkMessageForResize);
+    };
+    // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   (0, _element.useEffect)(() => {
-    trySandBox(); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+    trySandBox();
+    // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [title, styles, scripts]);
   (0, _element.useEffect)(() => {
-    trySandBox(true); // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+    trySandBox(true);
+    // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [html, type]);
@@ -243,7 +235,6 @@ function SandBox({
     height: Math.ceil(height)
   });
 }
-
 var _default = SandBox;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/sandbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/sandbox/index.tsx"],"names":["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","ref","setWidth","setHeight","isFrameAccessible","current","contentDocument","e","trySandBox","forceRerender","ownerDocument","getAttribute","htmlDoc","documentElement","lang","__html","map","i","toString","src","open","write","close","tryNoForceSandBox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","defaultView","removeEventListener","Math","ceil"],"mappings":"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","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+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t) {\n\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\tArray.prototype.forEach.call(\n\t\tdocument.querySelectorAll( '[style]' ),\n\t\tremoveViewportStyles\n\t);\n\tArray.prototype.forEach.call(\n\t\tdocument.styleSheets,\n\t\tfunction ( stylesheet ) {\n\t\t\tArray.prototype.forEach.call(\n\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\tremoveViewportStyles\n\t\t\t);\n\t\t}\n\t);\n\n\tdocument.body.style.position = 'absolute';\n\tdocument.body.style.width = '100%';\n\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\tsendResize();\n\n\t// Resize events can change the width of elements with 100% width, but we don't\n\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\twindow.addEventListener( 'resize', sendResize, true );\n};\n\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}: 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?.addEventListener( 'message', checkMessageForResize );\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\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"]}
+{"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","ref","useRef","setWidth","useState","setHeight","isFrameAccessible","current","contentDocument","e","trySandBox","forceRerender","ownerDocument","getAttribute","htmlDoc","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+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t) {\n\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\tArray.prototype.forEach.call(\n\t\tdocument.querySelectorAll( '[style]' ),\n\t\tremoveViewportStyles\n\t);\n\tArray.prototype.forEach.call(\n\t\tdocument.styleSheets,\n\t\tfunction ( stylesheet ) {\n\t\t\tArray.prototype.forEach.call(\n\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\tremoveViewportStyles\n\t\t\t);\n\t\t}\n\t);\n\n\tdocument.body.style.position = 'absolute';\n\tdocument.body.style.width = '100%';\n\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\tsendResize();\n\n\t// Resize events can change the width of elements with 100% width, but we don't\n\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\twindow.addEventListener( 'resize', sendResize, true );\n};\n\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}: 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\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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"}