@wordpress/components 18.0.0 → 19.0.3

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js"],"names":["Root","TooltipWrapper","Tooltip","COLORS","ui","border","textDark","LabelText","Text"],"mappings":";;;;;;;;;;;AAQA;;AACA;;;;AAEO,MAAMA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;;AAUA,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAUA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBACJC,cAAOC,EAAP,CAAUC,MADN,oEAKTF,cAAOC,EAAP,CAAUE,QALD,+5DAAb,C,CAUP;AACA;;;AAEO,MAAMC,SAAS,GAAG,iCAAQC,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../../../text';\nimport { COLORS } from '../../../utils';\n\nexport const Root = styled.div`\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n`;\n\nexport const TooltipWrapper = styled.div`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\topacity: 0;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n`;\n\nexport const Tooltip = styled.div`\n\tbackground: ${ COLORS.ui.border };\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tfont-size: 12px;\n\tcolor: ${ COLORS.ui.textDark };\n\tpadding: 4px 8px;\n\tposition: relative;\n`;\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const LabelText = styled( Text )`\n\t&&& {\n\t\tcolor: white;\n\t\tdisplay: block;\n\t\tfont-size: 13px;\n\t\tline-height: 1.4;\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js"],"names":["Root","TooltipWrapper","Tooltip","COLORS","ui","border","textDark","LabelText","Text"],"mappings":";;;;;;;;;;;AAQA;;AACA;;;;AAEO,MAAMA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;;AAUA,MAAMC,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAUA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBACJC,cAAOC,EAAP,CAAUC,MADN,oEAKTF,cAAOC,EAAP,CAAUE,QALD,u7DAAb,C,CAUP;AACA;;;AAEO,MAAMC,SAAS,GAAG,iCAAQC,UAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,eAEVL,cAAOC,EAAP,CAAUE,QAFA,m8DAAf","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../../../text';\nimport { COLORS } from '../../../utils';\n\nexport const Root = styled.div`\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n`;\n\nexport const TooltipWrapper = styled.div`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\topacity: 0;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n`;\n\nexport const Tooltip = styled.div`\n\tbackground: ${ COLORS.ui.border };\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tfont-size: 12px;\n\tcolor: ${ COLORS.ui.textDark };\n\tpadding: 4px 8px;\n\tposition: relative;\n`;\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const LabelText = styled( Text )`\n\t&&& {\n\t\tcolor: ${ COLORS.ui.textDark };\n\t\tdisplay: block;\n\t\tfont-size: 13px;\n\t\tline-height: 1.4;\n\t}\n`;\n"]}

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

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useResizeLabel = useResizeLabel;
 exports.POSITIONS = void 0;
+exports.useResizeLabel = useResizeLabel;
 
 var _lodash = require("lodash");
 
@@ -24,41 +24,35 @@ var _element = require("@wordpress/element");
 const {
   clearTimeout,
   setTimeout
-} = typeof window !== 'undefined' ? window : {};
+} = window;
 const POSITIONS = {
   bottom: 'bottom',
   corner: 'corner'
 };
-/**
- * @typedef {Object} UseResizeLabelProps
- *
- * @property {undefined|string} label          The label value.
- * @property {Function}         resizeListener Element to be rendered for resize listening events.
- */
+exports.POSITIONS = POSITIONS;
 
 /**
  * Custom hook that manages resize listener events. It also provides a label
  * based on current resize width x height values.
  *
- * @param {Object}  props
- * @param {string}  props.axis        Only shows the label corresponding to the axis.
- * @param {number}  props.fadeTimeout Duration (ms) before deactivating the resize label.
- * @param {boolean} props.onResize    Callback when a resize occurs. Provides { width, height } callback.
- * @param {string}  props.position    Adjusts label value.
- * @param {boolean} props.showPx      Whether to add `PX` to the label.
+ * @param  props
+ * @param  props.axis        Only shows the label corresponding to the axis.
+ * @param  props.fadeTimeout Duration (ms) before deactivating the resize label.
+ * @param  props.onResize    Callback when a resize occurs. Provides { width, height } callback.
+ * @param  props.position    Adjusts label value.
+ * @param  props.showPx      Whether to add `PX` to the label.
  *
- * @return {UseResizeLabelProps} Properties for hook.
+ * @return Properties for hook.
  */
+function useResizeLabel(_ref) {
+  let {
+    axis,
+    fadeTimeout = 180,
+    onResize = _lodash.noop,
+    position = POSITIONS.bottom,
+    showPx = false
+  } = _ref;
 
-exports.POSITIONS = POSITIONS;
-
-function useResizeLabel({
-  axis,
-  fadeTimeout = 180,
-  onResize = _lodash.noop,
-  position = POSITIONS.bottom,
-  showPx = false
-}) {
   /*
    * The width/height values derive from this special useResizeAware hook.
    * This custom hook uses injects an iFrame into the element, allowing it
@@ -172,32 +166,32 @@ function useResizeLabel({
     resizeListener
   };
 }
+
 /**
  * Gets the resize label based on width and height values (as well as recent changes).
  *
- * @param {Object}  props
- * @param {string}  props.axis     Only shows the label corresponding to the axis.
- * @param {number}  props.height   Height value.
- * @param {boolean} props.moveX    Recent width (x axis) changes.
- * @param {boolean} props.moveY    Recent width (y axis) changes.
- * @param {string}  props.position Adjusts label value.
- * @param {boolean} props.showPx   Whether to add `PX` to the label.
- * @param {number}  props.width    Width value.
+ * @param  props
+ * @param  props.axis     Only shows the label corresponding to the axis.
+ * @param  props.height   Height value.
+ * @param  props.moveX    Recent width (x axis) changes.
+ * @param  props.moveY    Recent width (y axis) changes.
+ * @param  props.position Adjusts label value.
+ * @param  props.showPx   Whether to add `PX` to the label.
+ * @param  props.width    Width value.
  *
- * @return {undefined | string} The rendered label.
+ * @return The rendered label.
  */
-
-
-function getSizeLabel({
-  axis,
-  height,
-  moveX = false,
-  moveY = false,
-  position = POSITIONS.bottom,
-  showPx = false,
-  width
-}) {
-  if (!moveX && !moveY) return null;
+function getSizeLabel(_ref2) {
+  let {
+    axis,
+    height,
+    moveX = false,
+    moveY = false,
+    position = POSITIONS.bottom,
+    showPx = false,
+    width
+  } = _ref2;
+  if (!moveX && !moveY) return undefined;
   /*
    * Corner position...
    * We want the label to appear like width x height.
@@ -240,6 +234,6 @@ function getSizeLabel({
     return `${height}${labelUnit}`;
   }
 
-  return null;
+  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.js"],"names":["clearTimeout","setTimeout","window","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","noop","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","unsetMoveXY","debounceUnsetMoveXY","current","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","labelUnit"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport useResizeAware from 'react-resize-aware';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\n\nconst { clearTimeout, setTimeout } =\n\ttypeof window !== 'undefined' ? window : {};\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n};\n\n/**\n * @typedef {Object} UseResizeLabelProps\n *\n * @property {undefined|string} label          The label value.\n * @property {Function}         resizeListener Element to be rendered for resize listening events.\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 {Object}  props\n * @param {string}  props.axis        Only shows the label corresponding to the axis.\n * @param {number}  props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param {boolean} props.onResize    Callback when a resize occurs. Provides { width, height } callback.\n * @param {string}  props.position    Adjusts label value.\n * @param {boolean} props.showPx      Whether to add `PX` to the label.\n *\n * @return {UseResizeLabelProps} Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n} ) {\n\t/*\n\t * The width/height values derive from this special useResizeAware hook.\n\t * This custom hook uses injects an iFrame into the element, allowing it\n\t * to tap into the onResize (window) callback events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeAware();\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();\n\n\tconst unsetMoveXY = () => {\n\t\t/*\n\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t */\n\t\tif ( isAxisControlled ) return;\n\t\tsetMoveX( false );\n\t\tsetMoveY( false );\n\t};\n\n\tconst debounceUnsetMoveXY = () => {\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\tclearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = setTimeout( unsetMoveXY, fadeTimeout );\n\t};\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 ] );\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\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param {Object}  props\n * @param {string}  props.axis     Only shows the label corresponding to the axis.\n * @param {number}  props.height   Height value.\n * @param {boolean} props.moveX    Recent width (x axis) changes.\n * @param {boolean} props.moveY    Recent width (y axis) changes.\n * @param {string}  props.position Adjusts label value.\n * @param {boolean} props.showPx   Whether to add `PX` to the label.\n * @param {number}  props.width    Width value.\n *\n * @return {undefined | string} 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} ) {\n\tif ( ! moveX && ! moveY ) return null;\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 null;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["clearTimeout","setTimeout","window","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","noop","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","unsetMoveXY","debounceUnsetMoveXY","current","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport useResizeAware from 'react-resize-aware';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\n\nconst { clearTimeout, setTimeout } = window;\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 useResizeAware hook.\n\t * This custom hook uses injects an iFrame into the element, allowing it\n\t * to tap into the onResize (window) callback events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeAware();\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 unsetMoveXY = () => {\n\t\t/*\n\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t */\n\t\tif ( isAxisControlled ) return;\n\t\tsetMoveX( false );\n\t\tsetMoveY( false );\n\t};\n\n\tconst debounceUnsetMoveXY = () => {\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\tclearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = setTimeout( unsetMoveXY, fadeTimeout );\n\t};\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 ] );\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"]}

package/build/responsive-wrapper/index.js

@@ -20,12 +20,13 @@ var _compose = require("@wordpress/compose");
 /**
  * WordPress dependencies
  */
-function ResponsiveWrapper({
-  naturalWidth,
-  naturalHeight,
-  children,
-  isInline = false
-}) {
+function ResponsiveWrapper(_ref) {
+  let {
+    naturalWidth,
+    naturalHeight,
+    children,
+    isInline = false
+  } = _ref;
   const [containerResizeListener, {
     width: containerWidth
   }] = (0, _compose.useResizeObserver)();

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.js"],"names":["ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","Children","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,iBAAT,CAA4B;AAC3BC,EAAAA,YAD2B;AAE3BC,EAAAA,aAF2B;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA,QAAQ,GAAG;AAJgB,CAA5B,EAKI;AACH,QAAM,CACLC,uBADK,EAEL;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAFK,IAGF,iCAHJ;;AAIA,MAAKC,kBAASC,KAAT,CAAgBN,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMO,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZV,YAAY,GAAGM,cAAf,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMW,OAAO,GAAGR,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,4BAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,4BAAC,OAAD;AAAS,IAAA,KAAK,EAAGK;AAAjB,IAFD,EAGG,2BAAcP,QAAd,EAAwB;AACzBU,IAAAA,SAAS,EAAE,yBACV,wCADU,EAEVV,QAAQ,CAACW,KAAT,CAAeD,SAFL;AADc,GAAxB,CAHH,CADD;AAYA;;eAEcb,iB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n} ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\tconst imageStyle = {\n\t\tpaddingBottom:\n\t\t\tnaturalWidth < containerWidth\n\t\t\t\t? naturalHeight\n\t\t\t\t: ( naturalHeight / naturalWidth ) * 100 + '%',\n\t};\n\tconst TagName = isInline ? 'span' : 'div';\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t{ containerResizeListener }\n\t\t\t<TagName style={ imageStyle } />\n\t\t\t{ cloneElement( children, {\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\tchildren.props.className\n\t\t\t\t),\n\t\t\t} ) }\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}
+{"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.js"],"names":["ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","Children","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,iBAAT,OAKI;AAAA,MALwB;AAC3BC,IAAAA,YAD2B;AAE3BC,IAAAA,aAF2B;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA,QAAQ,GAAG;AAJgB,GAKxB;AACH,QAAM,CACLC,uBADK,EAEL;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAFK,IAGF,iCAHJ;;AAIA,MAAKC,kBAASC,KAAT,CAAgBN,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMO,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZV,YAAY,GAAGM,cAAf,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMW,OAAO,GAAGR,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,4BAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,4BAAC,OAAD;AAAS,IAAA,KAAK,EAAGK;AAAjB,IAFD,EAGG,2BAAcP,QAAd,EAAwB;AACzBU,IAAAA,SAAS,EAAE,yBACV,wCADU,EAEVV,QAAQ,CAACW,KAAT,CAAeD,SAFL;AADc,GAAxB,CAHH,CADD;AAYA;;eAEcb,iB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n} ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\tconst imageStyle = {\n\t\tpaddingBottom:\n\t\t\tnaturalWidth < containerWidth\n\t\t\t\t? naturalHeight\n\t\t\t\t: ( naturalHeight / naturalWidth ) * 100 + '%',\n\t};\n\tconst TagName = isInline ? 'span' : 'div';\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t{ containerResizeListener }\n\t\t\t<TagName style={ imageStyle } />\n\t\t\t{ cloneElement( children, {\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\tchildren.props.className\n\t\t\t\t),\n\t\t\t} ) }\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}

package/build/sandbox/index.js

@@ -93,14 +93,15 @@ const style = `
 	}
 `;
 
-function Sandbox({
-  html = '',
-  title = '',
-  type,
-  styles = [],
-  scripts = [],
-  onFocus
-}) {
+function Sandbox(_ref) {
+  let {
+    html = '',
+    title = '',
+    type,
+    styles = [],
+    scripts = [],
+    onFocus
+  } = _ref;
   const ref = (0, _element.useRef)();
   const [width, setWidth] = (0, _element.useState)(0);
   const [height, setHeight] = (0, _element.useState)(0);
@@ -113,7 +114,9 @@ function Sandbox({
     }
   }
 
-  function trySandbox(forceRerender = false) {
+  function trySandbox() {
+    let forceRerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
     if (!isFrameAccessible()) {
       return;
     }

package/build/sandbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/sandbox/index.js"],"names":["observeAndResizeJS","style","Sandbox","html","title","type","styles","scripts","onFocus","ref","width","setWidth","height","setHeight","isFrameAccessible","current","contentDocument","body","e","trySandbox","forceRerender","ownerDocument","getAttribute","htmlDoc","documentElement","lang","__html","map","rules","i","src","open","write","close","tryNoForceSandbox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","action","defaultView","addEventListener","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\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\twindow.parent.postMessage( {\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t}, '*' );\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\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\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\nexport default function Sandbox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n} ) {\n\tconst ref = useRef();\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 } = ref.current;\n\t\tconst { body } = contentDocument;\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !== body.getAttribute( 'data-resizable-iframe-connected' )\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,\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 ) {\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 { ownerDocument } = ref.current;\n\t\tconst { defaultView } = ownerDocument;\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\tref.current.addEventListener( 'load', tryNoForceSandbox, false );\n\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tref.current?.removeEventListener(\n\t\t\t\t'load',\n\t\t\t\ttryNoForceSandbox,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\t}, [ title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandbox( true );\n\t}, [ html ] );\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"]}
+{"version":3,"sources":["@wordpress/components/src/sandbox/index.js"],"names":["observeAndResizeJS","style","Sandbox","html","title","type","styles","scripts","onFocus","ref","width","setWidth","height","setHeight","isFrameAccessible","current","contentDocument","body","e","trySandbox","forceRerender","ownerDocument","getAttribute","htmlDoc","documentElement","lang","__html","map","rules","i","src","open","write","close","tryNoForceSandbox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","action","defaultView","addEventListener","removeEventListener","Math","ceil"],"mappings":";;;;;;;AAGA;;AAMA;;AATA;AACA;AACA;AASA,MAAMA,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAzDA;AA2DA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CArBA;;AAuBe,SAASC,OAAT,OAOX;AAAA,MAP6B;AAChCC,IAAAA,IAAI,GAAG,EADyB;AAEhCC,IAAAA,KAAK,GAAG,EAFwB;AAGhCC,IAAAA,IAHgC;AAIhCC,IAAAA,MAAM,GAAG,EAJuB;AAKhCC,IAAAA,OAAO,GAAG,EALsB;AAMhCC,IAAAA;AANgC,GAO7B;AACH,QAAMC,GAAG,GAAG,sBAAZ;AACA,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAAU,CAAV,CAA5B;AACA,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,CAAV,CAA9B;;AAEA,WAASC,iBAAT,GAA6B;AAC5B,QAAI;AACH,aAAO,CAAC,CAAEL,GAAG,CAACM,OAAJ,CAAYC,eAAZ,CAA4BC,IAAtC;AACA,KAFD,CAEE,OAAQC,CAAR,EAAY;AACb,aAAO,KAAP;AACA;AACD;;AAED,WAASC,UAAT,GAA6C;AAAA,QAAxBC,aAAwB,uEAAR,KAAQ;;AAC5C,QAAK,CAAEN,iBAAiB,EAAxB,EAA6B;AAC5B;AACA;;AAED,UAAM;AAAEE,MAAAA,eAAF;AAAmBK,MAAAA;AAAnB,QAAqCZ,GAAG,CAACM,OAA/C;AACA,UAAM;AAAEE,MAAAA;AAAF,QAAWD,eAAjB;;AAEA,QACC,CAAEI,aAAF,IACA,SAASH,IAAI,CAACK,YAAL,CAAmB,iCAAnB,CAFV,EAGE;AACD;AACA,KAb2C,CAe5C;AACA;AACA;AACA;;;AACA,UAAMC,OAAO,GACZ;AACC,MAAA,IAAI,EAAGF,aAAa,CAACG,eAAd,CAA8BC,IADtC;AAEC,MAAA,SAAS,EAAGpB;AAFb,OAIC,0CACC,2CAASD,KAAT,CADD,EAEC;AAAO,MAAA,uBAAuB,EAAG;AAAEsB,QAAAA,MAAM,EAAEzB;AAAV;AAAjC,MAFD,EAGGK,MAAM,CAACqB,GAAP,CAAY,CAAEC,KAAF,EAASC,CAAT,KACb;AACC,MAAA,GAAG,EAAGA,CADP;AAEC,MAAA,uBAAuB,EAAG;AAAEH,QAAAA,MAAM,EAAEE;AAAV;AAF3B,MADC,CAHH,CAJD,EAcC;AACC,yCAAgC,iCADjC;AAEC,MAAA,SAAS,EAAGvB;AAFb,OAIC;AAAK,MAAA,uBAAuB,EAAG;AAAEqB,QAAAA,MAAM,EAAEvB;AAAV;AAA/B,MAJD,EAKC;AACC,MAAA,IAAI,EAAC,iBADN;AAEC,MAAA,uBAAuB,EAAG;AACzBuB,QAAAA,MAAM,EAAE1B;AADiB;AAF3B,MALD,EAWGO,OAAO,CAACoB,GAAR,CAAeG,GAAF,IACd;AAAQ,MAAA,GAAG,EAAGA,GAAd;AAAoB,MAAA,GAAG,EAAGA;AAA1B,MADC,CAXH,CAdD,CADD,CAnB4C,CAoD5C;AACA;AACA;;AACAd,IAAAA,eAAe,CAACe,IAAhB;AACAf,IAAAA,eAAe,CAACgB,KAAhB,CAAuB,oBAAoB,6BAAgBT,OAAhB,CAA3C;AACAP,IAAAA,eAAe,CAACiB,KAAhB;AACA;;AAED,0BAAW,MAAM;AAChBd,IAAAA,UAAU;;AAEV,aAASe,iBAAT,GAA6B;AAC5Bf,MAAAA,UAAU,CAAE,KAAF,CAAV;AACA;;AAED,aAASgB,qBAAT,CAAgCC,KAAhC,EAAwC;AACvC,YAAMC,MAAM,GAAG5B,GAAG,CAACM,OAAnB,CADuC,CAGvC;;AACA,UAAK,CAAEsB,MAAF,IAAYA,MAAM,CAACC,aAAP,KAAyBF,KAAK,CAACG,MAAhD,EAAyD;AACxD;AACA,OANsC,CAQvC;;;AACA,UAAIC,IAAI,GAAGJ,KAAK,CAACI,IAAN,IAAc,EAAzB;;AAEA,UAAK,aAAa,OAAOA,IAAzB,EAAgC;AAC/B,YAAI;AACHA,UAAAA,IAAI,GAAGC,IAAI,CAACC,KAAL,CAAYF,IAAZ,CAAP;AACA,SAFD,CAEE,OAAQtB,CAAR,EAAY,CAAE;AAChB,OAfsC,CAiBvC;AACA;;;AACA,UAAK,aAAasB,IAAI,CAACG,MAAvB,EAAgC;AAC/B;AACA;;AAEDhC,MAAAA,QAAQ,CAAE6B,IAAI,CAAC9B,KAAP,CAAR;AACAG,MAAAA,SAAS,CAAE2B,IAAI,CAAC5B,MAAP,CAAT;AACA;;AAED,UAAM;AAAES,MAAAA;AAAF,QAAoBZ,GAAG,CAACM,OAA9B;AACA,UAAM;AAAE6B,MAAAA;AAAF,QAAkBvB,aAAxB,CAnCgB,CAqChB;AACA;AACA;AACA;;AACAZ,IAAAA,GAAG,CAACM,OAAJ,CAAY8B,gBAAZ,CAA8B,MAA9B,EAAsCX,iBAAtC,EAAyD,KAAzD;AACAU,IAAAA,WAAW,CAACC,gBAAZ,CAA8B,SAA9B,EAAyCV,qBAAzC;AAEA,WAAO,MAAM;AAAA;;AACZ,sBAAA1B,GAAG,CAACM,OAAJ,8DAAa+B,mBAAb,CACC,MADD,EAECZ,iBAFD,EAGC,KAHD;AAKAU,MAAAA,WAAW,CAACC,gBAAZ,CAA8B,SAA9B,EAAyCV,qBAAzC;AACA,KAPD;AAQA,GApDD,EAoDG,EApDH;AAsDA,0BAAW,MAAM;AAChBhB,IAAAA,UAAU;AACV,GAFD,EAEG,CAAEf,KAAF,EAASC,IAAT,EAAeC,MAAf,EAAuBC,OAAvB,CAFH;AAIA,0BAAW,MAAM;AAChBY,IAAAA,UAAU,CAAE,IAAF,CAAV;AACA,GAFD,EAEG,CAAEhB,IAAF,CAFH;AAIA,SACC;AACC,IAAA,GAAG,EAAG,2BAAc,CAAEM,GAAF,EAAO,kCAAP,CAAd,CADP;AAEC,IAAA,KAAK,EAAGL,KAFT;AAGC,IAAA,SAAS,EAAC,oBAHX;AAIC,IAAA,OAAO,EAAC,oDAJT;AAKC,IAAA,OAAO,EAAGI,OALX;AAMC,IAAA,KAAK,EAAGuC,IAAI,CAACC,IAAL,CAAWtC,KAAX,CANT;AAOC,IAAA,MAAM,EAAGqC,IAAI,CAACC,IAAL,CAAWpC,MAAX;AAPV,IADD;AAWA","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\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\twindow.parent.postMessage( {\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t}, '*' );\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\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\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\nexport default function Sandbox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n} ) {\n\tconst ref = useRef();\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 } = ref.current;\n\t\tconst { body } = contentDocument;\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !== body.getAttribute( 'data-resizable-iframe-connected' )\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,\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 ) {\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 { ownerDocument } = ref.current;\n\t\tconst { defaultView } = ownerDocument;\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\tref.current.addEventListener( 'load', tryNoForceSandbox, false );\n\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tref.current?.removeEventListener(\n\t\t\t\t'load',\n\t\t\t\ttryNoForceSandbox,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tdefaultView.addEventListener( 'message', checkMessageForResize );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandbox();\n\t}, [ title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandbox( true );\n\t}, [ html ] );\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"]}

package/build/sandbox/index.native.js

@@ -157,18 +157,19 @@ const style = `
 `;
 const EMPTY_ARRAY = [];
 
-function Sandbox({
-  containerStyle,
-  customJS,
-  html = '',
-  lang = 'en',
-  providerUrl = '',
-  scripts = EMPTY_ARRAY,
-  styles = EMPTY_ARRAY,
-  title = '',
-  type,
-  url
-}) {
+function Sandbox(_ref) {
+  let {
+    containerStyle,
+    customJS,
+    html = '',
+    lang = 'en',
+    providerUrl = '',
+    scripts = EMPTY_ARRAY,
+    styles = EMPTY_ARRAY,
+    title = '',
+    type,
+    url
+  } = _ref;
   const colorScheme = (0, _compose.usePreferredColorScheme)();
   const ref = (0, _element.useRef)();
   const [height, setHeight] = (0, _element.useState)(0);
@@ -225,7 +226,8 @@ function Sandbox({
     return '<!DOCTYPE html>' + (0, _element.renderToString)(htmlDoc);
   }
 
-  function updateContentHtml(forceRerender = false) {
+  function updateContentHtml() {
+    let forceRerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     const newContentHtml = getHtmlDoc();
 
     if (forceRerender && contentHtml === newContentHtml) {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","colorScheme","ref","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","key","Platform","select","android","ios","htmlDoc","__html","map","rules","i","src","updateContentHtml","forceRerender","newContentHtml","setImmediate","checkMessageForResize","event","data","nativeEvent","JSON","parse","e","action","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","addEventListener","removeEventListener","current","sandboxStyles","baseUrl"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAYA;;AAKA;;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OA5DA;AA8DA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,OAAT,CAAkB;AACjBC,EAAAA,cADiB;AAEjBC,EAAAA,QAFiB;AAGjBC,EAAAA,IAAI,GAAG,EAHU;AAIjBC,EAAAA,IAAI,GAAG,IAJU;AAKjBC,EAAAA,WAAW,GAAG,EALG;AAMjBC,EAAAA,OAAO,GAAGP,WANO;AAOjBQ,EAAAA,MAAM,GAAGR,WAPQ;AAQjBS,EAAAA,KAAK,GAAG,EARS;AASjBC,EAAAA,IATiB;AAUjBC,EAAAA;AAViB,CAAlB,EAWI;AACH,QAAMC,WAAW,GAAG,uCAApB;AACA,QAAMC,GAAG,GAAG,sBAAZ;AACA,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,CAAV,CAA9B;AACA,QAAM,CA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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, Platform } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library \n\t\t\t// to communicate between React Native and the WebView, in this case, \n\t\t\t// we use it for notifying resize changes.\n            window.ReactNativeWebView.postMessage(JSON.stringify( {\n                action: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n            }));\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t * \n\t * These styles have been copied from the web version (https://git.io/JEFcX) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nfunction Sandbox( {\n\tcontainerStyle,\n\tcustomJS,\n\thtml = '',\n\tlang = 'en',\n\tproviderUrl = '',\n\tscripts = EMPTY_ARRAY,\n\tstyles = EMPTY_ARRAY,\n\ttitle = '',\n\ttype,\n\turl,\n} ) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst ref = useRef();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent=\"width=device-width, initial-scale=1\"\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: customJS || observeAndResizeJS,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction checkMessageForResize( event ) {\n\t\t// Attempt to parse the message data as JSON if passed as string\n\t\tlet data = event.nativeEvent.data || {};\n\n\t\tif ( 'string' === typeof data ) {\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {}\n\t\t}\n\n\t\t// Update the state only if the message is formatted as we expect,\n\t\t// i.e. as an object with a 'resize' action.\n\t\tif ( 'resize' !== data.action ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetHeight( data.height );\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tDimensions.addEventListener( 'change', onChangeDimensions );\n\t\treturn () => {\n\t\t\tDimensions.removeEventListener( 'change', onChangeDimensions );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t] }\n\t\t\tonMessage={ checkMessageForResize }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t/>\n\t);\n}\n\nexport default memo( Sandbox );\n"]}
+{"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","colorScheme","ref","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","key","Platform","select","android","ios","htmlDoc","__html","map","rules","i","src","updateContentHtml","forceRerender","newContentHtml","setImmediate","checkMessageForResize","event","data","nativeEvent","JSON","parse","e","action","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","addEventListener","removeEventListener","current","sandboxStyles","baseUrl"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAYA;;AAKA;;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OA5DA;AA8DA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,OAAT,OAWI;AAAA,MAXc;AACjBC,IAAAA,cADiB;AAEjBC,IAAAA,QAFiB;AAGjBC,IAAAA,IAAI,GAAG,EAHU;AAIjBC,IAAAA,IAAI,GAAG,IAJU;AAKjBC,IAAAA,WAAW,GAAG,EALG;AAMjBC,IAAAA,OAAO,GAAGP,WANO;AAOjBQ,IAAAA,MAAM,GAAGR,WAPQ;AAQjBS,IAAAA,KAAK,GAAG,EARS;AASjBC,IAAAA,IATiB;AAUjBC,IAAAA;AAViB,GAWd;AACH,QAAMC,WAAW,GAAG,uCAApB;AACA,QAAMC,GAAG,GAAG,sBAAZ;AACA,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,CAAV,CAA9B;AACA,QAAM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","sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, Platform } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library \n\t\t\t// to communicate between React Native and the WebView, in this case, \n\t\t\t// we use it for notifying resize changes.\n            window.ReactNativeWebView.postMessage(JSON.stringify( {\n                action: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n            }));\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t * \n\t * These styles have been copied from the web version (https://git.io/JEFcX) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nfunction Sandbox( {\n\tcontainerStyle,\n\tcustomJS,\n\thtml = '',\n\tlang = 'en',\n\tproviderUrl = '',\n\tscripts = EMPTY_ARRAY,\n\tstyles = EMPTY_ARRAY,\n\ttitle = '',\n\ttype,\n\turl,\n} ) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst ref = useRef();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent=\"width=device-width, initial-scale=1\"\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: customJS || observeAndResizeJS,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction checkMessageForResize( event ) {\n\t\t// Attempt to parse the message data as JSON if passed as string\n\t\tlet data = event.nativeEvent.data || {};\n\n\t\tif ( 'string' === typeof data ) {\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {}\n\t\t}\n\n\t\t// Update the state only if the message is formatted as we expect,\n\t\t// i.e. as an object with a 'resize' action.\n\t\tif ( 'resize' !== data.action ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetHeight( data.height );\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tDimensions.addEventListener( 'change', onChangeDimensions );\n\t\treturn () => {\n\t\t\tDimensions.removeEventListener( 'change', onChangeDimensions );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t] }\n\t\t\tonMessage={ checkMessageForResize }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t/>\n\t);\n}\n\nexport default memo( Sandbox );\n"]}

package/build/scrollable/hook.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +13,10 @@ var styles = _interopRequireWildcard(require("./styles"));
 
 var _useCx = require("../utils/hooks/use-cx");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * WordPress dependencies
  */

package/build/scrollable/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/scrollable/hook.js"],"names":["useScrollable","props","className","scrollDirection","smoothScroll","otherProps","cx","classes","styles","Scrollable","scrollableScrollbar","scrollX","scrollY","scrollAuto"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;;AACA;AACA;AACA;;AACA;AACO,SAASA,aAAT,CAAwBC,KAAxB,EAAgC;AACtC,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,eAAe,GAAG,GAFb;AAGLC,IAAAA,YAAY,GAAG,KAHV;AAIL,OAAGC;AAJE,MAKF,+BAAkBJ,KAAlB,EAAyB,YAAzB,CALJ;AAOA,QAAMK,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBACf,MACCD,EAAE,CACDE,MAAM,CAACC,UADN,EAEDD,MAAM,CAACE,mBAFN,EAGDN,YAAY,IAAII,MAAM,CAACJ,YAHtB,EAIDD,eAAe,KAAK,GAApB,IAA2BK,MAAM,CAACG,OAJjC,EAKDR,eAAe,KAAK,GAApB,IAA2BK,MAAM,CAACI,OALjC,EAMDT,eAAe,KAAK,MAApB,IAA8BK,MAAM,CAACK,UANpC,EAODX,SAPC,CAFY,EAWf,CAAEA,SAAF,EAAaC,eAAb,EAA8BC,YAA9B,CAXe,CAAhB;AAcA,SAAO,EAAE,GAAGC,UAAL;AAAiBH,IAAAA,SAAS,EAAEK;AAA5B,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../ui/context';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n */\n/* eslint-enable jsdoc/valid-types */\nexport function useScrollable( props ) {\n\tconst {\n\t\tclassName,\n\t\tscrollDirection = 'y',\n\t\tsmoothScroll = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Scrollable' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Scrollable,\n\t\t\t\tstyles.scrollableScrollbar,\n\t\t\t\tsmoothScroll && styles.smoothScroll,\n\t\t\t\tscrollDirection === 'x' && styles.scrollX,\n\t\t\t\tscrollDirection === 'y' && styles.scrollY,\n\t\t\t\tscrollDirection === 'auto' && styles.scrollAuto,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, scrollDirection, smoothScroll ]\n\t);\n\n\treturn { ...otherProps, className: classes };\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/scrollable/hook.js"],"names":["useScrollable","props","className","scrollDirection","smoothScroll","otherProps","cx","classes","styles","Scrollable","scrollableScrollbar","scrollX","scrollY","scrollAuto"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;;AACA;AACA;AACA;;AACA;AACO,SAASA,aAAT,CAAwBC,KAAxB,EAAgC;AACtC,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,eAAe,GAAG,GAFb;AAGLC,IAAAA,YAAY,GAAG,KAHV;AAIL,OAAGC;AAJE,MAKF,+BAAkBJ,KAAlB,EAAyB,YAAzB,CALJ;AAOA,QAAMK,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBACf,MACCD,EAAE,CACDE,MAAM,CAACC,UADN,EAEDD,MAAM,CAACE,mBAFN,EAGDN,YAAY,IAAII,MAAM,CAACJ,YAHtB,EAIDD,eAAe,KAAK,GAApB,IAA2BK,MAAM,CAACG,OAJjC,EAKDR,eAAe,KAAK,GAApB,IAA2BK,MAAM,CAACI,OALjC,EAMDT,eAAe,KAAK,MAApB,IAA8BK,MAAM,CAACK,UANpC,EAODX,SAPC,CAFY,EAWf,CAAEA,SAAF,EAAaC,eAAb,EAA8BC,YAA9B,CAXe,CAAhB;AAcA,SAAO,EAAE,GAAGC,UAAL;AAAiBH,IAAAA,SAAS,EAAEK;AAA5B,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem } from '../ui/context';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n */\n/* eslint-enable jsdoc/valid-types */\nexport function useScrollable( props ) {\n\tconst {\n\t\tclassName,\n\t\tscrollDirection = 'y',\n\t\tsmoothScroll = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Scrollable' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Scrollable,\n\t\t\t\tstyles.scrollableScrollbar,\n\t\t\t\tsmoothScroll && styles.smoothScroll,\n\t\t\t\tscrollDirection === 'x' && styles.scrollX,\n\t\t\t\tscrollDirection === 'y' && styles.scrollY,\n\t\t\t\tscrollDirection === 'auto' && styles.scrollAuto,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, scrollDirection, smoothScroll ]\n\t);\n\n\treturn { ...otherProps, className: classes };\n}\n"]}

package/build/scrollable/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scrollAuto = exports.scrollY = exports.scrollX = exports.smoothScroll = exports.Content = exports.Scrollable = exports.scrollableScrollbar = void 0;
+exports.smoothScroll = exports.scrollableScrollbar = exports.scrollY = exports.scrollX = exports.scrollAuto = exports.Scrollable = exports.Content = void 0;
 
 var _react = require("@emotion/react");
 

package/build/scrollable/types.js

@@ -1,2 +1,6 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=types.js.map

package/build/search-control/index.js

@@ -21,6 +21,8 @@ var _ = require("../");
 
 var _baseControl = _interopRequireDefault(require("../base-control"));
 
+var _utils = require("../utils");
+
 /**
  * External dependencies
  */
@@ -32,18 +34,47 @@ var _baseControl = _interopRequireDefault(require("../base-control"));
 /**
  * Internal dependencies
  */
-function SearchControl({
-  className,
-  onChange,
-  value,
-  label,
-  placeholder = (0, _i18n.__)('Search'),
-  hideLabelFromVision = true,
-  help
-}) {
+function SearchControl(_ref, ref) {
+  let {
+    className,
+    onChange,
+    onKeyDown,
+    value,
+    label,
+    placeholder = (0, _i18n.__)('Search'),
+    hideLabelFromVision = true,
+    help,
+    onClose
+  } = _ref;
   const instanceId = (0, _compose.useInstanceId)(SearchControl);
-  const searchInput = (0, _element.useRef)();
+  const searchInput = (0, _utils.useCombinedRef)(ref);
   const id = `components-search-control-${instanceId}`;
+
+  const renderRightButton = () => {
+    if (onClose) {
+      return (0, _element.createElement)(_.Button, {
+        icon: _icons.closeSmall,
+        label: (0, _i18n.__)('Close search'),
+        onClick: onClose
+      });
+    }
+
+    if (!!value) {
+      return (0, _element.createElement)(_.Button, {
+        icon: _icons.closeSmall,
+        label: (0, _i18n.__)('Reset search'),
+        onClick: () => {
+          onChange('');
+          searchInput.current.focus();
+        }
+      });
+    }
+
+    return (0, _element.createElement)(_icons.Icon, {
+      icon: _icons.search
+    });
+  };
+
   return (0, _element.createElement)(_baseControl.default, {
     label: label,
     id: id,
@@ -59,22 +90,15 @@ function SearchControl({
     type: "search",
     placeholder: placeholder,
     onChange: event => onChange(event.target.value),
+    onKeyDown: onKeyDown,
     autoComplete: "off",
     value: value || ''
   }), (0, _element.createElement)("div", {
     className: "components-search-control__icon"
-  }, !!value && (0, _element.createElement)(_.Button, {
-    icon: _icons.closeSmall,
-    label: (0, _i18n.__)('Reset search'),
-    onClick: () => {
-      onChange('');
-      searchInput.current.focus();
-    }
-  }), !value && (0, _element.createElement)(_icons.Icon, {
-    icon: _icons.search
-  }))));
+  }, renderRightButton())));
 }
 
-var _default = SearchControl;
+var _default = (0, _element.forwardRef)(SearchControl);
+
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/search-control/index.js"],"names":["SearchControl","className","onChange","value","label","placeholder","hideLabelFromVision","help","instanceId","searchInput","id","event","target","closeSmall","current","focus","search"],"mappings":";;;;;;;;;AAWA;;AARA;;AAKA;;AACA;;AACA;;AAMA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AAIA,SAASA,aAAT,CAAwB;AACvBC,EAAAA,SADuB;AAEvBC,EAAAA,QAFuB;AAGvBC,EAAAA,KAHuB;AAIvBC,EAAAA,KAJuB;AAKvBC,EAAAA,WAAW,GAAG,cAAI,QAAJ,CALS;AAMvBC,EAAAA,mBAAmB,GAAG,IANC;AAOvBC,EAAAA;AAPuB,CAAxB,EAQI;AACH,QAAMC,UAAU,GAAG,4BAAeR,aAAf,CAAnB;AACA,QAAMS,WAAW,GAAG,sBAApB;AACA,QAAMC,EAAE,GAAI,6BAA6BF,UAAY,EAArD;AAEA,SACC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,EAAE,EAAGM,EAFN;AAGC,IAAA,mBAAmB,EAAGJ,mBAHvB;AAIC,IAAA,IAAI,EAAGC,IAJR;AAKC,IAAA,SAAS,EAAG,yBAAYN,SAAZ,EAAuB,2BAAvB;AALb,KAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AACC,IAAA,GAAG,EAAGQ,WADP;AAEC,IAAA,SAAS,EAAC,kCAFX;AAGC,IAAA,EAAE,EAAGC,EAHN;AAIC,IAAA,IAAI,EAAC,QAJN;AAKC,IAAA,WAAW,EAAGL,WALf;AAMC,IAAA,QAAQ,EAAKM,KAAF,IAAaT,QAAQ,CAAES,KAAK,CAACC,MAAN,CAAaT,KAAf,CANjC;AAOC,IAAA,YAAY,EAAC,KAPd;AAQC,IAAA,KAAK,EAAGA,KAAK,IAAI;AARlB,IADD,EAWC;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,CAAC,CAAEA,KAAH,IACD,4BAAC,QAAD;AACC,IAAA,IAAI,EAAGU,iBADR;AAEC,IAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,IAAA,OAAO,EAAG,MAAM;AACfX,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACAO,MAAAA,WAAW,CAACK,OAAZ,CAAoBC,KAApB;AACA;AANF,IAFF,EAWG,CAAEZ,KAAF,IAAW,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGa;AAAb,IAXd,CAXD,CAPD,CADD;AAmCA;;eAEchB,a","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../';\nimport BaseControl from '../base-control';\n\nfunction SearchControl( {\n\tclassName,\n\tonChange,\n\tvalue,\n\tlabel,\n\tplaceholder = __( 'Search' ),\n\thideLabelFromVision = true,\n\thelp,\n} ) {\n\tconst instanceId = useInstanceId( SearchControl );\n\tconst searchInput = useRef();\n\tconst id = `components-search-control-${ instanceId }`;\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( className, 'components-search-control' ) }\n\t\t>\n\t\t\t<div className=\"components-search-control__input-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\tref={ searchInput }\n\t\t\t\t\tclassName=\"components-search-control__input\"\n\t\t\t\t\tid={ id }\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tonChange={ ( event ) => onChange( event.target.value ) }\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tvalue={ value || '' }\n\t\t\t\t/>\n\t\t\t\t<div className=\"components-search-control__icon\">\n\t\t\t\t\t{ !! value && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\tlabel={ __( 'Reset search' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonChange( '' );\n\t\t\t\t\t\t\t\tsearchInput.current.focus();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! value && <Icon icon={ search } /> }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</BaseControl>\n\t);\n}\n\nexport default SearchControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/search-control/index.js"],"names":["SearchControl","ref","className","onChange","onKeyDown","value","label","placeholder","hideLabelFromVision","help","onClose","instanceId","searchInput","id","renderRightButton","closeSmall","current","focus","search","event","target"],"mappings":";;;;;;;;;AAWA;;AARA;;AAKA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AAKA,SAASA,aAAT,OAYCC,GAZD,EAaE;AAAA,MAZD;AACCC,IAAAA,SADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,SAHD;AAICC,IAAAA,KAJD;AAKCC,IAAAA,KALD;AAMCC,IAAAA,WAAW,GAAG,cAAI,QAAJ,CANf;AAOCC,IAAAA,mBAAmB,GAAG,IAPvB;AAQCC,IAAAA,IARD;AASCC,IAAAA;AATD,GAYC;AACD,QAAMC,UAAU,GAAG,4BAAeX,aAAf,CAAnB;AACA,QAAMY,WAAW,GAAG,2BAAgBX,GAAhB,CAApB;AACA,QAAMY,EAAE,GAAI,6BAA6BF,UAAY,EAArD;;AAEA,QAAMG,iBAAiB,GAAG,MAAM;AAC/B,QAAKJ,OAAL,EAAe;AACd,aACC,4BAAC,QAAD;AACC,QAAA,IAAI,EAAGK,iBADR;AAEC,QAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,QAAA,OAAO,EAAGL;AAHX,QADD;AAOA;;AAED,QAAK,CAAC,CAAEL,KAAR,EAAgB;AACf,aACC,4BAAC,QAAD;AACC,QAAA,IAAI,EAAGU,iBADR;AAEC,QAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,QAAA,OAAO,EAAG,MAAM;AACfZ,UAAAA,QAAQ,CAAE,EAAF,CAAR;AACAS,UAAAA,WAAW,CAACI,OAAZ,CAAoBC,KAApB;AACA;AANF,QADD;AAUA;;AAED,WAAO,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGC;AAAb,MAAP;AACA,GAzBD;;AA2BA,SACC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGZ,KADT;AAEC,IAAA,EAAE,EAAGO,EAFN;AAGC,IAAA,mBAAmB,EAAGL,mBAHvB;AAIC,IAAA,IAAI,EAAGC,IAJR;AAKC,IAAA,SAAS,EAAG,yBAAYP,SAAZ,EAAuB,2BAAvB;AALb,KAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AACC,IAAA,GAAG,EAAGU,WADP;AAEC,IAAA,SAAS,EAAC,kCAFX;AAGC,IAAA,EAAE,EAAGC,EAHN;AAIC,IAAA,IAAI,EAAC,QAJN;AAKC,IAAA,WAAW,EAAGN,WALf;AAMC,IAAA,QAAQ,EAAKY,KAAF,IAAahB,QAAQ,CAAEgB,KAAK,CAACC,MAAN,CAAaf,KAAf,CANjC;AAOC,IAAA,SAAS,EAAGD,SAPb;AAQC,IAAA,YAAY,EAAC,KARd;AASC,IAAA,KAAK,EAAGC,KAAK,IAAI;AATlB,IADD,EAYC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGS,iBAAiB,EADpB,CAZD,CAPD,CADD;AA0BA;;eAEc,yBAAYd,aAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../';\nimport BaseControl from '../base-control';\nimport { useCombinedRef } from '../utils';\n\nfunction SearchControl(\n\t{\n\t\tclassName,\n\t\tonChange,\n\t\tonKeyDown,\n\t\tvalue,\n\t\tlabel,\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\thelp,\n\t\tonClose,\n\t},\n\tref\n) {\n\tconst instanceId = useInstanceId( SearchControl );\n\tconst searchInput = useCombinedRef( ref );\n\tconst id = `components-search-control-${ instanceId }`;\n\n\tconst renderRightButton = () => {\n\t\tif ( onClose ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close search' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( !! value ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Reset search' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonChange( '' );\n\t\t\t\t\t\tsearchInput.current.focus();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn <Icon icon={ search } />;\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( className, 'components-search-control' ) }\n\t\t>\n\t\t\t<div className=\"components-search-control__input-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\tref={ searchInput }\n\t\t\t\t\tclassName=\"components-search-control__input\"\n\t\t\t\t\tid={ id }\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tonChange={ ( event ) => onChange( event.target.value ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tvalue={ value || '' }\n\t\t\t\t/>\n\t\t\t\t<div className=\"components-search-control__icon\">\n\t\t\t\t\t{ renderRightButton() }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</BaseControl>\n\t);\n}\n\nexport default forwardRef( SearchControl );\n"]}