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

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

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","_compose","noop","POSITIONS","exports","bottom","corner","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 ) {\n\t\t\t\treturn;\n\t\t\t}\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 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) {\n\t\t\treturn;\n\t\t}\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 ) {\n\t\treturn undefined;\n\t}\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":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../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';\nconst noop = () => {};\nexport const POSITIONS = {\n  bottom: 'bottom',\n  corner: 'corner'\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  axis,\n  fadeTimeout = 180,\n  onResize = noop,\n  position = POSITIONS.bottom,\n  showPx = false\n}) {\n  /*\n   * The width/height values derive from this special useResizeObserver hook.\n   * This custom hook uses the ResizeObserver API to listen for resize events.\n   */\n  const [resizeListener, sizes] = useResizeObserver();\n\n  /*\n   * Indicates if the x/y axis is preferred.\n   * If set, we will avoid resetting the moveX and moveY values.\n   * This will allow for the preferred axis values to persist in the label.\n   */\n  const isAxisControlled = !!axis;\n\n  /*\n   * The moveX and moveY values are used to track whether the label should\n   * display width, height, or width x height.\n   */\n  const [moveX, setMoveX] = useState(false);\n  const [moveY, setMoveY] = useState(false);\n\n  /*\n   * Cached dimension values to check for width/height updates from the\n   * sizes property from useResizeAware()\n   */\n  const {\n    width,\n    height\n  } = sizes;\n  const heightRef = useRef(height);\n  const widthRef = useRef(width);\n\n  /*\n   * This timeout is used with setMoveX and setMoveY to determine of\n   * both width and height values have changed at (roughly) the same time.\n   */\n  const moveTimeoutRef = useRef();\n  const debounceUnsetMoveXY = useCallback(() => {\n    const unsetMoveXY = () => {\n      /*\n       * If axis is controlled, we will avoid resetting the moveX and moveY values.\n       * This will allow for the preferred axis values to persist in the label.\n       */\n      if (isAxisControlled) {\n        return;\n      }\n      setMoveX(false);\n      setMoveY(false);\n    };\n    if (moveTimeoutRef.current) {\n      window.clearTimeout(moveTimeoutRef.current);\n    }\n    moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);\n  }, [fadeTimeout, isAxisControlled]);\n  useEffect(() => {\n    /*\n     * On the initial render of useResizeAware, the height and width values are\n     * null. They are calculated then set using via an internal useEffect hook.\n     */\n    const isRendered = width !== null || height !== null;\n    if (!isRendered) {\n      return;\n    }\n    const didWidthChange = width !== widthRef.current;\n    const didHeightChange = height !== heightRef.current;\n    if (!didWidthChange && !didHeightChange) {\n      return;\n    }\n\n    /*\n     * After the initial render, the useResizeAware will set the first\n     * width and height values. We'll sync those values with our\n     * width and height refs. However, we shouldn't render our Tooltip\n     * label on this first cycle.\n     */\n    if (width && !widthRef.current && height && !heightRef.current) {\n      widthRef.current = width;\n      heightRef.current = height;\n      return;\n    }\n\n    /*\n     * After the first cycle, we can track width and height changes.\n     */\n    if (didWidthChange) {\n      setMoveX(true);\n      widthRef.current = width;\n    }\n    if (didHeightChange) {\n      setMoveY(true);\n      heightRef.current = height;\n    }\n    onResize({\n      width,\n      height\n    });\n    debounceUnsetMoveXY();\n  }, [width, height, onResize, debounceUnsetMoveXY]);\n  const label = getSizeLabel({\n    axis,\n    height,\n    moveX,\n    moveY,\n    position,\n    showPx,\n    width\n  });\n  return {\n    label,\n    resizeListener\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  axis,\n  height,\n  moveX = false,\n  moveY = false,\n  position = POSITIONS.bottom,\n  showPx = false,\n  width\n}) {\n  if (!moveX && !moveY) {\n    return undefined;\n  }\n\n  /*\n   * Corner position...\n   * We want the label to appear like width x height.\n   */\n  if (position === POSITIONS.corner) {\n    return `${width} x ${height}`;\n  }\n\n  /*\n   * Other POSITIONS...\n   * The label will combine both width x height values if both\n   * values have recently been changed.\n   *\n   * Otherwise, only width or height will be displayed.\n   * The `PX` unit will be added, if specified by the `showPx` prop.\n   */\n  const labelUnit = showPx ? ' px' : '';\n  if (axis) {\n    if (axis === 'x' && moveX) {\n      return `${width}${labelUnit}`;\n    }\n    if (axis === 'y' && moveY) {\n      return `${height}${labelUnit}`;\n    }\n  }\n  if (moveX && moveY) {\n    return `${width} x ${height}`;\n  }\n  if (moveX) {\n    return `${width}${labelUnit}`;\n  }\n  if (moveY) {\n    return `${height}${labelUnit}`;\n  }\n  return undefined;\n}"],
+  "mappings": "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",
+  "names": []
+}

package/build/responsive-wrapper/index.js

@@ -1,60 +1,58 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var responsive_wrapper_exports = {};
+__export(responsive_wrapper_exports, {
+  default: () => responsive_wrapper_default
 });
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _element = require("@wordpress/element");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * A wrapper component that maintains its aspect ratio when resized.
- *
- * ```jsx
- * import { ResponsiveWrapper } from '@wordpress/components';
- *
- * const MyResponsiveWrapper = () => (
- * 	<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
- * 		<img
- * 			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
- * 			alt="WordPress"
- * 		/>
- * 	</ResponsiveWrapper>
- * );
- * ```
- */
+module.exports = __toCommonJS(responsive_wrapper_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_jsx_runtime = require("react/jsx-runtime");
 function ResponsiveWrapper({
   naturalWidth,
   naturalHeight,
   children,
   isInline = false
 }) {
-  if (_element.Children.count(children) !== 1) {
+  if (import_element.Children.count(children) !== 1) {
     return null;
   }
-  const TagName = isInline ? 'span' : 'div';
+  const TagName = isInline ? "span" : "div";
   let aspectRatio;
   if (naturalWidth && naturalHeight) {
     aspectRatio = `${naturalWidth} / ${naturalHeight}`;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagName, {
     className: "components-responsive-wrapper",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: (0, _element.cloneElement)(children, {
-        className: (0, _clsx.default)('components-responsive-wrapper__content', children.props.className),
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      children: (0, import_element.cloneElement)(children, {
+        className: (0, import_clsx.default)("components-responsive-wrapper__content", children.props.className),
         style: {
           ...children.props.style,
           aspectRatio
@@ -63,5 +61,5 @@ function ResponsiveWrapper({
     })
   });
 }
-var _default = exports.default = ResponsiveWrapper;
-//# sourceMappingURL=index.js.map
+var responsive_wrapper_default = ResponsiveWrapper;
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_jsxRuntime","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","Children","count","TagName","aspectRatio","jsx","className","cloneElement","clsx","props","style","_default","exports","default"],"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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: clsx(\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":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAA4D,IAAAE,WAAA,GAAAF,OAAA;AAR5D;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;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,GAAG,GAAIP,YAAY,MAAQC,aAAa,EAAG;EACvD;EAEA,oBACC,IAAAH,WAAA,CAAAU,GAAA,EAACF,OAAO;IAACG,SAAS,EAAC,+BAA+B;IAAAP,QAAA,eACjD,IAAAJ,WAAA,CAAAU,GAAA;MAAAN,QAAA,EACG,IAAAQ,qBAAY,EAAER,QAAQ,EAAE;QACzBO,SAAS,EAAE,IAAAE,aAAI,EACd,wCAAwC,EACxCT,QAAQ,CAACU,KAAK,CAACH,SAChB,CAAC;QACDI,KAAK,EAAE;UACN,GAAGX,QAAQ,CAACU,KAAK,CAACC,KAAK;UACvBN;QACD;MACD,CAAE;IAAC,CACC;EAAC,CACE,CAAC;AAEZ;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcjB,iBAAiB","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/responsive-wrapper/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\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  naturalWidth,\n  naturalHeight,\n  children,\n  isInline = false\n}) {\n  if (Children.count(children) !== 1) {\n    return null;\n  }\n  const TagName = isInline ? 'span' : 'div';\n  let aspectRatio;\n  if (naturalWidth && naturalHeight) {\n    aspectRatio = `${naturalWidth} / ${naturalHeight}`;\n  }\n  return /*#__PURE__*/_jsx(TagName, {\n    className: \"components-responsive-wrapper\",\n    children: /*#__PURE__*/_jsx(\"div\", {\n      children: cloneElement(children, {\n        className: clsx('components-responsive-wrapper__content', children.props.className),\n        style: {\n          ...children.props.style,\n          aspectRatio\n        }\n      })\n    })\n  });\n}\nexport default ResponsiveWrapper;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAAuC;AAKvC,yBAA4B;AAiB5B,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAG;AACD,MAAI,wBAAS,MAAM,QAAQ,MAAM,GAAG;AAClC,WAAO;AAAA,EACT;AACA,QAAM,UAAU,WAAW,SAAS;AACpC,MAAI;AACJ,MAAI,gBAAgB,eAAe;AACjC,kBAAc,GAAG,YAAY,MAAM,aAAa;AAAA,EAClD;AACA,SAAoB,uCAAAA,KAAK,SAAS;AAAA,IAChC,WAAW;AAAA,IACX,UAAuB,uCAAAA,KAAK,OAAO;AAAA,MACjC,cAAU,6BAAa,UAAU;AAAA,QAC/B,eAAW,YAAAC,SAAK,0CAA0C,SAAS,MAAM,SAAS;AAAA,QAClF,OAAO;AAAA,UACL,GAAG,SAAS,MAAM;AAAA,UAClB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,6BAAQ;",
+  "names": ["_jsx", "clsx"]
+}

package/build/responsive-wrapper/types.js

@@ -1,6 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

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

@@ -1 +1,7 @@
-{"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":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/responsive-wrapper/types.ts"],
+  "sourcesContent": ["export {};"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/sandbox/index.js

@@ -1,21 +1,30 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sandbox_exports = {};
+__export(sandbox_exports, {
+  default: () => sandbox_default
 });
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _compose = require("@wordpress/compose");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const observeAndResizeJS = function () {
+module.exports = __toCommonJS(sandbox_exports);
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_jsx_runtime = require("react/jsx-runtime");
+const observeAndResizeJS = function() {
   const {
     MutationObserver
   } = window;
@@ -25,10 +34,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, {
@@ -39,35 +48,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;
@@ -90,30 +90,18 @@ 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 = [],
   onFocus,
   tabIndex
 }) {
-  const ref = (0, _element.useRef)();
-  const [width, setWidth] = (0, _element.useState)(0);
-  const [height, setHeight] = (0, _element.useState)(0);
+  const ref = (0, import_element.useRef)();
+  const [width, setWidth] = (0, import_element.useState)(0);
+  const [height, setHeight] = (0, import_element.useState)(0);
   function isFrameAccessible() {
     try {
       return !!ref.current?.contentDocument?.body;
@@ -129,78 +117,63 @@ 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__*/(0, _jsxRuntime.jsxs)("html", {
+    const htmlDoc = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("html", {
       lang: ownerDocument.documentElement.lang,
       className: type,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("head", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("head", {
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", {
           children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
           dangerouslySetInnerHTML: {
             __html: style
           }
-        }), styles.map((rules, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+        }), styles.map((rules, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
           dangerouslySetInnerHTML: {
             __html: rules
           }
         }, i))]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("body", {
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("body", {
         "data-resizable-iframe-connected": "data-resizable-iframe-connected",
         className: type,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
           dangerouslySetInnerHTML: {
             __html: html
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
           type: "text/javascript",
           dangerouslySetInnerHTML: {
             __html: `(${observeAndResizeJS.toString()})();`
           }
-        }), scripts.map(src => /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
-          src: src
+        }), scripts.map((src) => /* @__PURE__ */ (0, import_jsx_runtime.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>' + (0, _element.renderToString)(htmlDoc));
+    contentDocument.write("<!DOCTYPE html>" + (0, import_element.renderToString)(htmlDoc));
     contentDocument.close();
   }
-  (0, _element.useEffect)(() => {
+  (0, import_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.
-      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);
@@ -208,40 +181,29 @@ 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
   }, []);
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     trySandBox();
-    // Passing `exhaustive-deps` will likely involve a more detailed refactor.
-    // See https://github.com/WordPress/gutenberg/pull/44378
   }, [title, styles, scripts]);
-  (0, _element.useEffect)(() => {
+  (0, import_element.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__*/(0, _jsxRuntime.jsx)("iframe", {
-    ref: (0, _compose.useMergeRefs)([ref, (0, _compose.useFocusableIframe)()]),
-    title: title,
-    tabIndex: tabIndex,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", {
+    ref: (0, import_compose.useMergeRefs)([ref, (0, import_compose.useFocusableIframe)()]),
+    title,
+    tabIndex,
     className: "components-sandbox",
     sandbox: "allow-scripts allow-same-origin allow-presentation",
-    onFocus: onFocus,
+    onFocus,
     width: Math.ceil(width),
     height: Math.ceil(height)
   });
 }
-var _default = exports.default = SandBox;
-//# sourceMappingURL=index.js.map
+var sandbox_default = SandBox;
+//# sourceMappingURL=index.js.map

package/build/sandbox/index.js.map

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

package/build/sandbox/types.js

@@ -1,6 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/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": ["../../src/sandbox/types.ts"],
+  "sourcesContent": ["export {};"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}