npm - @wordpress/components - Versions diffs - 24.0.0 → 25.1.0 - Mend

@wordpress/components 24.0.0 → 25.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1491) hide show

package/build-module/resizable-box/index.js CHANGED Viewed

@@ -49,15 +49,14 @@ const HANDLE_STYLES = {
   bottomLeft: HANDLE_STYLES_OVERRIDES
 };
-function UnforwardedResizableBox(_ref, ref) {
-  let {
-    className,
-    children,
-    showHandle = true,
-    __experimentalShowTooltip: showTooltip = false,
-    __experimentalTooltipProps: tooltipProps = {},
-    ...props
-  } = _ref;
+function UnforwardedResizableBox({
+  className,
+  children,
+  showHandle = true,
+  __experimentalShowTooltip: showTooltip = false,
+  __experimentalTooltipProps: tooltipProps = {},
+  ...props
+}, ref) {
   return createElement(Resizable, _extends({
     className: classnames('components-resizable-box__container', showHandle && 'has-show-handle', className),
     handleClasses: HANDLE_CLASSES,

package/build-module/resizable-box/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/resizable-box/index.tsx"],"names":["forwardRef","classnames","Resizable","ResizeTooltip","HANDLE_CLASS_NAME","SIDE_HANDLE_CLASS_NAME","CORNER_HANDLE_CLASS_NAME","HANDLE_CLASSES","top","right","bottom","left","topLeft","topRight","bottomRight","bottomLeft","HANDLE_STYLES_OVERRIDES","width","undefined","height","HANDLE_STYLES","UnforwardedResizableBox","~~ref","~~className","children","showHandle","__experimentalShowTooltip","showTooltip","__experimentalTooltipProps","tooltipProps","props","ResizableBox"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT,QAA0B,cAA1B;;AAIA;AACA;AACA;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AAEA,MAAMC,iBAAiB,GAAG,kCAA1B;AACA,MAAMC,sBAAsB,GAAG,uCAA/B;AACA,MAAMC,wBAAwB,GAAG,yCAAjC;AAEA,MAAMC,cAAc,GAAG;AACtBC,EAAAA,GAAG,EAAEP,UAAU,CACdG,iBADc,EAEdC,sBAFc,EAGd,sCAHc,CADO;AAMtBI,EAAAA,KAAK,EAAER,UAAU,CAChBG,iBADgB,EAEhBC,sBAFgB,EAGhB,wCAHgB,CANK;AAWtBK,EAAAA,MAAM,EAAET,UAAU,CACjBG,iBADiB,EAEjBC,sBAFiB,EAGjB,yCAHiB,CAXI;AAgBtBM,EAAAA,IAAI,EAAEV,UAAU,CACfG,iBADe,EAEfC,sBAFe,EAGf,uCAHe,CAhBM;AAqBtBO,EAAAA,OAAO,EAAEX,UAAU,CAClBG,iBADkB,EAElBE,wBAFkB,EAGlB,sCAHkB,EAIlB,uCAJkB,CArBG;AA2BtBO,EAAAA,QAAQ,EAAEZ,UAAU,CACnBG,iBADmB,EAEnBE,wBAFmB,EAGnB,sCAHmB,EAInB,wCAJmB,CA3BE;AAiCtBQ,EAAAA,WAAW,EAAEb,UAAU,CACtBG,iBADsB,EAEtBE,wBAFsB,EAGtB,yCAHsB,EAItB,wCAJsB,CAjCD;AAuCtBS,EAAAA,UAAU,EAAEd,UAAU,CACrBG,iBADqB,EAErBE,wBAFqB,EAGrB,yCAHqB,EAIrB,uCAJqB;AAvCA,CAAvB,C,CA+CA;;AACA,MAAMU,uBAAuB,GAAG;AAC/BC,EAAAA,KAAK,EAAEC,SADwB;AAE/BC,EAAAA,MAAM,EAAED,SAFuB;AAG/BV,EAAAA,GAAG,EAAEU,SAH0B;AAI/BT,EAAAA,KAAK,EAAES,SAJwB;AAK/BR,EAAAA,MAAM,EAAEQ,SALuB;AAM/BP,EAAAA,IAAI,EAAEO;AANyB,CAAhC;AAQA,MAAME,aAAa,GAAG;AACrBZ,EAAAA,GAAG,EAAEQ,uBADgB;AAErBP,EAAAA,KAAK,EAAEO,uBAFc;AAGrBN,EAAAA,MAAM,EAAEM,uBAHa;AAIrBL,EAAAA,IAAI,EAAEK,uBAJe;AAKrBJ,EAAAA,OAAO,EAAEI,uBALY;AAMrBH,EAAAA,QAAQ,EAAEG,uBANW;AAOrBF,EAAAA,WAAW,EAAEE,uBAPQ;AAQrBD,EAAAA,UAAU,EAAEC;AARS,CAAtB;;AAkBA,SAASK,uBAAT,~~OASCC,GATD,EAUe~~;~~AAAA,MATd;~~AACCC,~~IAAAA~~,SADD;AAECC,~~IAAAA~~,QAFD;AAGCC,~~IAAAA~~,UAAU,GAAG,IAHd;AAICC,~~IAAAA~~,yBAAyB,EAAEC,WAAW,GAAG,KAJ1C;AAKCC,~~IAAAA~~,0BAA0B,EAAEC,YAAY,GAAG,EAL5C;AAMC,~~OAAGC~~;AANJ,~~GASc~~;AACd,SACC,cAAC,SAAD;AACC,IAAA,SAAS,EAAG7B,UAAU,CACrB,qCADqB,~~EAErBwB~~,UAAU,IAAI,iBAFO,EAGrBF,SAHqB,CADvB;AAMC,IAAA,aAAa,~~EAAGhB~~,cANjB;AAOC,IAAA,YAAY,EAAGa,aAPhB;AAQC,IAAA,GAAG,~~EAAGE~~;AARP,~~KASMQ~~,KATN,GAWGN,QAXH,EAYGG,WAAW,IAAI,cAAC,aAAD,EAAoBE,YAApB,CAZlB,CADD;AAgBA;;AAED,OAAO,~~MAAME~~,YAAY,GAAG/B,UAAU,CAAEqB,uBAAF,CAA/B;AAEP,eAAeU,YAAf","sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n\n/\n External dependencies\n /\nimport classnames from 'classnames';\nimport { Resizable } from 're-resizable';\nimport type { ResizableProps } from 're-resizable';\nimport type { ReactNode, ForwardedRef } from 'react';\n\n/\n Internal dependencies\n */\nimport ResizeTooltip from './resize-tooltip';\n\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\n\nconst HANDLE_CLASSES = {\n\ttop: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top'\n\t),\n\tright: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottom: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom'\n\t),\n\tleft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-left'\n\t),\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\nconst HANDLE_STYLES = {\n\ttop: HANDLE_STYLES_OVERRIDES,\n\tright: HANDLE_STYLES_OVERRIDES,\n\tbottom: HANDLE_STYLES_OVERRIDES,\n\tleft: HANDLE_STYLES_OVERRIDES,\n\ttopLeft: HANDLE_STYLES_OVERRIDES,\n\ttopRight: HANDLE_STYLES_OVERRIDES,\n\tbottomRight: HANDLE_STYLES_OVERRIDES,\n\tbottomLeft: HANDLE_STYLES_OVERRIDES,\n};\n\ntype ResizableBoxProps = ResizableProps & {\n\tchildren: ReactNode;\n\tshowHandle?: boolean;\n\t__experimentalShowTooltip?: boolean;\n\t__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];\n};\n\nfunction UnforwardedResizableBox(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tshowHandle = true,\n\t\t__experimentalShowTooltip: showTooltip = false,\n\t\t__experimentalTooltipProps: tooltipProps = {},\n\t\t...props\n\t}: ResizableBoxProps,\n\tref: ForwardedRef< Resizable >\n): JSX.Element {\n\treturn (\n\t\t<Resizable\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-resizable-box__container',\n\t\t\t\tshowHandle && 'has-show-handle',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\thandleClasses={ HANDLE_CLASSES }\n\t\t\thandleStyles={ HANDLE_STYLES }\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }\n\t\t</Resizable>\n\t);\n}\n\nexport const ResizableBox = forwardRef( UnforwardedResizableBox );\n\nexport default ResizableBox;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/resizable-box/index.tsx"],"names":["forwardRef","classnames","Resizable","ResizeTooltip","HANDLE_CLASS_NAME","SIDE_HANDLE_CLASS_NAME","CORNER_HANDLE_CLASS_NAME","HANDLE_CLASSES","top","right","bottom","left","topLeft","topRight","bottomRight","bottomLeft","HANDLE_STYLES_OVERRIDES","width","undefined","height","HANDLE_STYLES","UnforwardedResizableBox","className","children","showHandle","__experimentalShowTooltip","showTooltip","__experimentalTooltipProps","tooltipProps","props","ref","ResizableBox"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT,QAA0B,cAA1B;;AAIA;AACA;AACA;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AAEA,MAAMC,iBAAiB,GAAG,kCAA1B;AACA,MAAMC,sBAAsB,GAAG,uCAA/B;AACA,MAAMC,wBAAwB,GAAG,yCAAjC;AAEA,MAAMC,cAAc,GAAG;AACtBC,EAAAA,GAAG,EAAEP,UAAU,CACdG,iBADc,EAEdC,sBAFc,EAGd,sCAHc,CADO;AAMtBI,EAAAA,KAAK,EAAER,UAAU,CAChBG,iBADgB,EAEhBC,sBAFgB,EAGhB,wCAHgB,CANK;AAWtBK,EAAAA,MAAM,EAAET,UAAU,CACjBG,iBADiB,EAEjBC,sBAFiB,EAGjB,yCAHiB,CAXI;AAgBtBM,EAAAA,IAAI,EAAEV,UAAU,CACfG,iBADe,EAEfC,sBAFe,EAGf,uCAHe,CAhBM;AAqBtBO,EAAAA,OAAO,EAAEX,UAAU,CAClBG,iBADkB,EAElBE,wBAFkB,EAGlB,sCAHkB,EAIlB,uCAJkB,CArBG;AA2BtBO,EAAAA,QAAQ,EAAEZ,UAAU,CACnBG,iBADmB,EAEnBE,wBAFmB,EAGnB,sCAHmB,EAInB,wCAJmB,CA3BE;AAiCtBQ,EAAAA,WAAW,EAAEb,UAAU,CACtBG,iBADsB,EAEtBE,wBAFsB,EAGtB,yCAHsB,EAItB,wCAJsB,CAjCD;AAuCtBS,EAAAA,UAAU,EAAEd,UAAU,CACrBG,iBADqB,EAErBE,wBAFqB,EAGrB,yCAHqB,EAIrB,uCAJqB;AAvCA,CAAvB,C,CA+CA;;AACA,MAAMU,uBAAuB,GAAG;AAC/BC,EAAAA,KAAK,EAAEC,SADwB;AAE/BC,EAAAA,MAAM,EAAED,SAFuB;AAG/BV,EAAAA,GAAG,EAAEU,SAH0B;AAI/BT,EAAAA,KAAK,EAAES,SAJwB;AAK/BR,EAAAA,MAAM,EAAEQ,SALuB;AAM/BP,EAAAA,IAAI,EAAEO;AANyB,CAAhC;AAQA,MAAME,aAAa,GAAG;AACrBZ,EAAAA,GAAG,EAAEQ,uBADgB;AAErBP,EAAAA,KAAK,EAAEO,uBAFc;AAGrBN,EAAAA,MAAM,EAAEM,uBAHa;AAIrBL,EAAAA,IAAI,EAAEK,uBAJe;AAKrBJ,EAAAA,OAAO,EAAEI,uBALY;AAMrBH,EAAAA,QAAQ,EAAEG,uBANW;AAOrBF,EAAAA,WAAW,EAAEE,uBAPQ;AAQrBD,EAAAA,UAAU,EAAEC;AARS,CAAtB;;AAkBA,SAASK,uBAAT,CACC;AACCC,EAAAA,SADD;AAECC,EAAAA,QAFD;AAGCC,EAAAA,UAAU,GAAG,IAHd;AAICC,EAAAA,yBAAyB,EAAEC,WAAW,GAAG,KAJ1C;AAKCC,EAAAA,0BAA0B,EAAEC,YAAY,GAAG,EAL5C;AAMC,KAAGC;AANJ,CADD,EASCC,GATD,EAUe;AACd,SACC,cAAC,SAAD;AACC,IAAA,SAAS,EAAG7B,UAAU,CACrB,qCADqB,EAErBuB,UAAU,IAAI,iBAFO,EAGrBF,SAHqB,CADvB;AAMC,IAAA,aAAa,EAAGf,cANjB;AAOC,IAAA,YAAY,EAAGa,aAPhB;AAQC,IAAA,GAAG,EAAGU;AARP,KASMD,KATN,GAWGN,QAXH,EAYGG,WAAW,IAAI,cAAC,aAAD,EAAoBE,YAApB,CAZlB,CADD;AAgBA;;AAED,OAAO,MAAMG,YAAY,GAAG/B,UAAU,CAAEqB,uBAAF,CAA/B;AAEP,eAAeU,YAAf","sourcesContent":["/*\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n\n/\n External dependencies\n /\nimport classnames from 'classnames';\nimport { Resizable } from 're-resizable';\nimport type { ResizableProps } from 're-resizable';\nimport type { ReactNode, ForwardedRef } from 'react';\n\n/\n Internal dependencies\n */\nimport ResizeTooltip from './resize-tooltip';\n\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\n\nconst HANDLE_CLASSES = {\n\ttop: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top'\n\t),\n\tright: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottom: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom'\n\t),\n\tleft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-left'\n\t),\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\nconst HANDLE_STYLES = {\n\ttop: HANDLE_STYLES_OVERRIDES,\n\tright: HANDLE_STYLES_OVERRIDES,\n\tbottom: HANDLE_STYLES_OVERRIDES,\n\tleft: HANDLE_STYLES_OVERRIDES,\n\ttopLeft: HANDLE_STYLES_OVERRIDES,\n\ttopRight: HANDLE_STYLES_OVERRIDES,\n\tbottomRight: HANDLE_STYLES_OVERRIDES,\n\tbottomLeft: HANDLE_STYLES_OVERRIDES,\n};\n\ntype ResizableBoxProps = ResizableProps & {\n\tchildren: ReactNode;\n\tshowHandle?: boolean;\n\t__experimentalShowTooltip?: boolean;\n\t__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];\n};\n\nfunction UnforwardedResizableBox(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tshowHandle = true,\n\t\t__experimentalShowTooltip: showTooltip = false,\n\t\t__experimentalTooltipProps: tooltipProps = {},\n\t\t...props\n\t}: ResizableBoxProps,\n\tref: ForwardedRef< Resizable >\n): JSX.Element {\n\treturn (\n\t\t<Resizable\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-resizable-box__container',\n\t\t\t\tshowHandle && 'has-show-handle',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\thandleClasses={ HANDLE_CLASSES }\n\t\t\thandleStyles={ HANDLE_STYLES }\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }\n\t\t</Resizable>\n\t);\n}\n\nexport const ResizableBox = forwardRef( UnforwardedResizableBox );\n\nexport default ResizableBox;\n"]}

package/build-module/resizable-box/resize-tooltip/index.js CHANGED Viewed

@@ -20,19 +20,18 @@ import { Root } from './styles/resize-tooltip.styles';
 const noop = () => {};
-function ResizeTooltip(_ref, ref) {
-  let {
-    axis,
-    className,
-    fadeTimeout = 180,
-    isVisible = true,
-    labelRef,
-    onResize = noop,
-    position = POSITIONS.bottom,
-    showPx = true,
-    zIndex = 1000,
-    ...props
-  } = _ref;
+function ResizeTooltip({
+  axis,
+  className,
+  fadeTimeout = 180,
+  isVisible = true,
+  labelRef,
+  onResize = noop,
+  position = POSITIONS.bottom,
+  showPx = true,
+  zIndex = 1000,
+  ...props
+}, ref) {
   const {
     label,
     resizeListener

package/build-module/resizable-box/resize-tooltip/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/index.tsx"],"names":["classnames","forwardRef","Label","useResizeLabel","POSITIONS","Root","noop","ResizeTooltip","~~ref","~~axis","className","fadeTimeout","isVisible","labelRef","onResize","position","bottom","showPx","zIndex","props","label","resizeListener","classes","ForwardedComponent"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,SAASC,cAAT,EAAyCC,SAAzC,QAA0D,SAA1D;AACA,SAASC,IAAT,QAAqB,gCAArB;;AAeA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,aAAT,~~OAaCC,GAbD,EAcsB~~;~~AAAA,MAbrB;~~AACCC,~~IAAAA~~,IADD;AAECC,~~IAAAA~~,SAFD;AAGCC,~~IAAAA~~,WAAW,GAAG,GAHf;AAICC,~~IAAAA~~,SAAS,GAAG,IAJb;AAKCC,~~IAAAA~~,QALD;AAMCC,~~IAAAA~~,QAAQ,~~GAAGR~~,IANZ;~~AAOCS~~,~~IAAAA~~,QAAQ,~~GAAGX~~,SAAS,~~CAACY~~,MAPtB;AAQCC,~~IAAAA~~,MAAM,GAAG,IARV;AASCC,~~IAAAA~~,MAAM,GAAG,IATV;AAUC,~~OAAGC~~;AAVJ,~~GAaqB~~;AACrB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAA4BlB,cAAc,CAAE;~~AACjDM~~,IAAAA,IADiD;AAEjDE,IAAAA,WAFiD;AAGjDG,IAAAA,QAHiD;AAIjDG,IAAAA,MAJiD;AAKjDF,IAAAA;AALiD,GAAF,CAAhD;AAQA,MAAK,CAAEH,SAAP,EAAmB,OAAO,IAAP;AAEnB,~~QAAMU~~,OAAO,GAAGtB,UAAU,CAAE,2BAAF,EAA+BU,SAA/B,CAA1B;AAEA,SACC,cAAC,IAAD;AAAM,mBAAY,MAAlB;AAAyB,IAAA,SAAS,~~EAAGY~~,OAArC;AAA+C,IAAA,GAAG,~~EAAGd~~;AAArD,~~KAAgEW~~,KAAhE,~~GACGE~~,cADH,EAEC,cAAC,KAAD;AACC,~~mBAAcF~~,KAAK,CAAE,aAAF,CADpB;AAEC,IAAA,KAAK,~~EAAGC~~,KAFT;AAGC,IAAA,QAAQ,~~EAAGL~~,QAHZ;AAIC,IAAA,GAAG,EAAGF,QAJP;AAKC,IAAA,MAAM,EAAGK;AALV,IAFD,CADD;AAYA;;AAED,~~MAAMK~~,kBAAkB,GAAGtB,UAAU,CAAEM,aAAF,CAArC;AAEA,eAAegB,kBAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type { Ref, ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport Label from './label';\nimport { useResizeLabel, Axis, Position, POSITIONS } from './utils';\nimport { Root } from './styles/resize-tooltip.styles';\n\ntype ResizeTooltipProps = React.ComponentProps< typeof Root > & {\n\t'aria-hidden'?: boolean;\n\taxis?: Axis;\n\tclassName?: string;\n\tfadeTimeout?: number;\n\tisVisible?: boolean;\n\tlabelRef?: Ref< HTMLDivElement >;\n\tonResize?: Parameters< typeof useResizeLabel >[ 0 ][ 'onResize' ];\n\tposition?: Position;\n\tshowPx?: boolean;\n\tzIndex?: number;\n};\n\nconst noop = () => {};\n\nfunction ResizeTooltip(\n\t{\n\t\taxis,\n\t\tclassName,\n\t\tfadeTimeout = 180,\n\t\tisVisible = true,\n\t\tlabelRef,\n\t\tonResize = noop,\n\t\tposition = POSITIONS.bottom,\n\t\tshowPx = true,\n\t\tzIndex = 1000,\n\t\t...props\n\t}: ResizeTooltipProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element \| null {\n\tconst { label, resizeListener } = useResizeLabel( {\n\t\taxis,\n\t\tfadeTimeout,\n\t\tonResize,\n\t\tshowPx,\n\t\tposition,\n\t} );\n\n\tif ( ! isVisible ) return null;\n\n\tconst classes = classnames( 'components-resize-tooltip', className );\n\n\treturn (\n\t\t<Root aria-hidden=\"true\" className={ classes } ref={ ref } { ...props }>\n\t\t\t{ resizeListener }\n\t\t\t<Label\n\t\t\t\taria-hidden={ props[ 'aria-hidden' ] }\n\t\t\t\tlabel={ label }\n\t\t\t\tposition={ position }\n\t\t\t\tref={ labelRef }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( ResizeTooltip );\n\nexport default ForwardedComponent;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/index.tsx"],"names":["classnames","forwardRef","Label","useResizeLabel","POSITIONS","Root","noop","ResizeTooltip","axis","className","fadeTimeout","isVisible","labelRef","onResize","position","bottom","showPx","zIndex","props","ref","label","resizeListener","classes","ForwardedComponent"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,SAASC,cAAT,EAAyCC,SAAzC,QAA0D,SAA1D;AACA,SAASC,IAAT,QAAqB,gCAArB;;AAeA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,aAAT,CACC;AACCC,EAAAA,IADD;AAECC,EAAAA,SAFD;AAGCC,EAAAA,WAAW,GAAG,GAHf;AAICC,EAAAA,SAAS,GAAG,IAJb;AAKCC,EAAAA,QALD;AAMCC,EAAAA,QAAQ,GAAGP,IANZ;AAOCQ,EAAAA,QAAQ,GAAGV,SAAS,CAACW,MAPtB;AAQCC,EAAAA,MAAM,GAAG,IARV;AASCC,EAAAA,MAAM,GAAG,IATV;AAUC,KAAGC;AAVJ,CADD,EAaCC,GAbD,EAcsB;AACrB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAA4BlB,cAAc,CAAE;AACjDK,IAAAA,IADiD;AAEjDE,IAAAA,WAFiD;AAGjDG,IAAAA,QAHiD;AAIjDG,IAAAA,MAJiD;AAKjDF,IAAAA;AALiD,GAAF,CAAhD;AAQA,MAAK,CAAEH,SAAP,EAAmB,OAAO,IAAP;AAEnB,QAAMW,OAAO,GAAGtB,UAAU,CAAE,2BAAF,EAA+BS,SAA/B,CAA1B;AAEA,SACC,cAAC,IAAD;AAAM,mBAAY,MAAlB;AAAyB,IAAA,SAAS,EAAGa,OAArC;AAA+C,IAAA,GAAG,EAAGH;AAArD,KAAgED,KAAhE,GACGG,cADH,EAEC,cAAC,KAAD;AACC,mBAAcH,KAAK,CAAE,aAAF,CADpB;AAEC,IAAA,KAAK,EAAGE,KAFT;AAGC,IAAA,QAAQ,EAAGN,QAHZ;AAIC,IAAA,GAAG,EAAGF,QAJP;AAKC,IAAA,MAAM,EAAGK;AALV,IAFD,CADD;AAYA;;AAED,MAAMM,kBAAkB,GAAGtB,UAAU,CAAEM,aAAF,CAArC;AAEA,eAAegB,kBAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport type { Ref, ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport Label from './label';\nimport { useResizeLabel, Axis, Position, POSITIONS } from './utils';\nimport { Root } from './styles/resize-tooltip.styles';\n\ntype ResizeTooltipProps = React.ComponentProps< typeof Root > & {\n\t'aria-hidden'?: boolean;\n\taxis?: Axis;\n\tclassName?: string;\n\tfadeTimeout?: number;\n\tisVisible?: boolean;\n\tlabelRef?: Ref< HTMLDivElement >;\n\tonResize?: Parameters< typeof useResizeLabel >[ 0 ][ 'onResize' ];\n\tposition?: Position;\n\tshowPx?: boolean;\n\tzIndex?: number;\n};\n\nconst noop = () => {};\n\nfunction ResizeTooltip(\n\t{\n\t\taxis,\n\t\tclassName,\n\t\tfadeTimeout = 180,\n\t\tisVisible = true,\n\t\tlabelRef,\n\t\tonResize = noop,\n\t\tposition = POSITIONS.bottom,\n\t\tshowPx = true,\n\t\tzIndex = 1000,\n\t\t...props\n\t}: ResizeTooltipProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element \| null {\n\tconst { label, resizeListener } = useResizeLabel( {\n\t\taxis,\n\t\tfadeTimeout,\n\t\tonResize,\n\t\tshowPx,\n\t\tposition,\n\t} );\n\n\tif ( ! isVisible ) return null;\n\n\tconst classes = classnames( 'components-resize-tooltip', className );\n\n\treturn (\n\t\t<Root aria-hidden=\"true\" className={ classes } ref={ ref } { ...props }>\n\t\t\t{ resizeListener }\n\t\t\t<Label\n\t\t\t\taria-hidden={ props[ 'aria-hidden' ] }\n\t\t\t\tlabel={ label }\n\t\t\t\tposition={ position }\n\t\t\t\tref={ labelRef }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( ResizeTooltip );\n\nexport default ForwardedComponent;\n"]}

package/build-module/resizable-box/resize-tooltip/label.js CHANGED Viewed

@@ -19,13 +19,12 @@ import { TooltipWrapper, Tooltip, LabelText } from './styles/resize-tooltip.styl
 const CORNER_OFFSET = 4;
 const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
-function Label(_ref, ref) {
-  let {
-    label,
-    position = POSITIONS.corner,
-    zIndex = 1000,
-    ...props
-  } = _ref;
+function Label({
+  label,
+  position = POSITIONS.corner,
+  zIndex = 1000,
+  ...props
+}, ref) {
   const showLabel = !!label;
   const isBottom = position === POSITIONS.bottom;
   const isCorner = position === POSITIONS.corner;

package/build-module/resizable-box/resize-tooltip/label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/label.tsx"],"names":["forwardRef","isRTL","POSITIONS","TooltipWrapper","Tooltip","LabelText","CORNER_OFFSET","CURSOR_OFFSET_TOP","Label","~~ref","~~label","position","corner","zIndex","props","showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","ForwardedComponent"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,SAAmBC,SAAnB,QAAoC,SAApC;AACA,SACCC,cADD,EAECC,OAFD,EAGCC,SAHD,QAIO,gCAJP;AAMA,MAAMC,aAAa,GAAG,CAAtB;AACA,MAAMC,iBAAiB,GAAGD,aAAa,GAAG,GAA1C;;AAWA,SAASE,KAAT,~~OAECC,GAFD,EAGsB~~;~~AAAA,MAFrB;~~AAAEC,~~IAAAA~~,KAAF;AAASC,~~IAAAA~~,QAAQ,~~GAAGT~~,SAAS,~~CAACU~~,MAA9B;AAAsCC,~~IAAAA~~,MAAM,GAAG,IAA/C;AAAqD,~~OAAGC~~;AAAxD,~~GAEqB~~;AACrB,QAAMC,SAAS,GAAG,CAAC,~~CAAEL~~,KAArB;AAEA,~~QAAMM~~,QAAQ,~~GAAGL~~,QAAQ,~~KAAKT~~,SAAS,CAACe,MAAxC;AACA,QAAMC,QAAQ,~~GAAGP~~,QAAQ,~~KAAKT~~,SAAS,~~CAACU~~,MAAxC;AAEA,MAAK,~~CAAEG~~,SAAP,EAAmB,OAAO,IAAP;AAEnB,MAAII,KAA0B,GAAG;AAChCC,IAAAA,OAAO,EAAEL,SAAS,GAAG,CAAH,GAAOM,SADO;~~AAEhCR~~,IAAAA;AAFgC,GAAjC;AAKA,~~MAAIS~~,UAAU,GAAG,EAAjB;;AAEA,MAAKN,QAAL,EAAgB;AACfG,IAAAA,KAAK,GAAG,EACP,GAAGA,KADI;~~AAEPR~~,MAAAA,QAAQ,EAAE,UAFH;~~AAGPM~~,MAAAA,MAAM,EAAEV,iBAAiB,GAAG,CAAC,CAHtB;AAIPgB,MAAAA,IAAI,EAAE,KAJC;AAKPC,MAAAA,SAAS,EAAE;AALJ,KAAR;AAQAF,IAAAA,UAAU,GAAG;AACZE,MAAAA,SAAS,EAAG;AADA,KAAb;AAGA;;AAED,MAAKN,QAAL,EAAgB;AACfC,IAAAA,KAAK,GAAG,EACP,GAAGA,KADI;~~AAEPR~~,MAAAA,QAAQ,EAAE,UAFH;~~AAGPc~~,MAAAA,GAAG,EAAEnB,aAHE;AAIPoB,MAAAA,KAAK,EAAEzB,KAAK,KAAKoB,SAAL,GAAiBf,aAJtB;AAKPiB,MAAAA,IAAI,EAAEtB,KAAK,KAAKK,aAAL,GAAqBe;AALzB,KAAR;AAOA;;AAED,SACC,cAAC,cAAD;AACC,mBAAY,MADb;AAEC,IAAA,SAAS,EAAC,+CAFX;AAGC,IAAA,GAAG,~~EAAGZ~~,GAHP;AAIC,IAAA,KAAK,~~EAAGU~~;AAJT,~~KAKML~~,KALN,GAOC,cAAC,OAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,~~EAAGQ~~;AAFT,KAIC,cAAC,SAAD;AAAW,IAAA,EAAE,EAAC;AAAd,~~KAAuBZ~~,KAAvB,CAJD,CAPD,CADD;AAgBA;;AAED,~~MAAMiB~~,kBAAkB,GAAG3B,UAAU,CAAEQ,KAAF,CAArC;AAEA,eAAemB,kBAAf","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport { Position, POSITIONS } from './utils';\nimport {\n\tTooltipWrapper,\n\tTooltip,\n\tLabelText,\n} from './styles/resize-tooltip.styles';\n\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET 2.5;\n\ntype LabelProps = React.DetailedHTMLProps<\n\tReact.HTMLAttributes< HTMLDivElement >,\n\tHTMLDivElement\n> & {\n\tlabel?: string;\n\tposition: Position;\n\tzIndex: number;\n};\n\nfunction Label(\n\t{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element \| null {\n\tconst showLabel = !! label;\n\n\tconst isBottom = position === POSITIONS.bottom;\n\tconst isCorner = position === POSITIONS.corner;\n\n\tif ( ! showLabel ) return null;\n\n\tlet style: React.CSSProperties = {\n\t\topacity: showLabel ? 1 : undefined,\n\t\tzIndex,\n\t};\n\n\tlet labelStyle = {};\n\n\tif ( isBottom ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\tbottom: CURSOR_OFFSET_TOP * -1,\n\t\t\tleft: '50%',\n\t\t\ttransform: 'translate(-50%, 0)',\n\t\t};\n\n\t\tlabelStyle = {\n\t\t\ttransform: `translate(0, 100%)`,\n\t\t};\n\t}\n\n\tif ( isCorner ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\ttop: CORNER_OFFSET,\n\t\t\tright: isRTL() ? undefined : CORNER_OFFSET,\n\t\t\tleft: isRTL() ? CORNER_OFFSET : undefined,\n\t\t};\n\t}\n\n\treturn (\n\t\t<TooltipWrapper\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"components-resizable-tooltip__tooltip-wrapper\"\n\t\t\tref={ ref }\n\t\t\tstyle={ style }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<Tooltip\n\t\t\t\tclassName=\"components-resizable-tooltip__tooltip\"\n\t\t\t\tstyle={ labelStyle }\n\t\t\t>\n\t\t\t\t<LabelText as=\"span\">{ label }</LabelText>\n\t\t\t</Tooltip>\n\t\t</TooltipWrapper>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( Label );\n\nexport default ForwardedComponent;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/label.tsx"],"names":["forwardRef","isRTL","POSITIONS","TooltipWrapper","Tooltip","LabelText","CORNER_OFFSET","CURSOR_OFFSET_TOP","Label","label","position","corner","zIndex","props","ref","showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","ForwardedComponent"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,SAAmBC,SAAnB,QAAoC,SAApC;AACA,SACCC,cADD,EAECC,OAFD,EAGCC,SAHD,QAIO,gCAJP;AAMA,MAAMC,aAAa,GAAG,CAAtB;AACA,MAAMC,iBAAiB,GAAGD,aAAa,GAAG,GAA1C;;AAWA,SAASE,KAAT,CACC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,QAAQ,GAAGR,SAAS,CAACS,MAA9B;AAAsCC,EAAAA,MAAM,GAAG,IAA/C;AAAqD,KAAGC;AAAxD,CADD,EAECC,GAFD,EAGsB;AACrB,QAAMC,SAAS,GAAG,CAAC,CAAEN,KAArB;AAEA,QAAMO,QAAQ,GAAGN,QAAQ,KAAKR,SAAS,CAACe,MAAxC;AACA,QAAMC,QAAQ,GAAGR,QAAQ,KAAKR,SAAS,CAACS,MAAxC;AAEA,MAAK,CAAEI,SAAP,EAAmB,OAAO,IAAP;AAEnB,MAAII,KAA0B,GAAG;AAChCC,IAAAA,OAAO,EAAEL,SAAS,GAAG,CAAH,GAAOM,SADO;AAEhCT,IAAAA;AAFgC,GAAjC;AAKA,MAAIU,UAAU,GAAG,EAAjB;;AAEA,MAAKN,QAAL,EAAgB;AACfG,IAAAA,KAAK,GAAG,EACP,GAAGA,KADI;AAEPT,MAAAA,QAAQ,EAAE,UAFH;AAGPO,MAAAA,MAAM,EAAEV,iBAAiB,GAAG,CAAC,CAHtB;AAIPgB,MAAAA,IAAI,EAAE,KAJC;AAKPC,MAAAA,SAAS,EAAE;AALJ,KAAR;AAQAF,IAAAA,UAAU,GAAG;AACZE,MAAAA,SAAS,EAAG;AADA,KAAb;AAGA;;AAED,MAAKN,QAAL,EAAgB;AACfC,IAAAA,KAAK,GAAG,EACP,GAAGA,KADI;AAEPT,MAAAA,QAAQ,EAAE,UAFH;AAGPe,MAAAA,GAAG,EAAEnB,aAHE;AAIPoB,MAAAA,KAAK,EAAEzB,KAAK,KAAKoB,SAAL,GAAiBf,aAJtB;AAKPiB,MAAAA,IAAI,EAAEtB,KAAK,KAAKK,aAAL,GAAqBe;AALzB,KAAR;AAOA;;AAED,SACC,cAAC,cAAD;AACC,mBAAY,MADb;AAEC,IAAA,SAAS,EAAC,+CAFX;AAGC,IAAA,GAAG,EAAGP,GAHP;AAIC,IAAA,KAAK,EAAGK;AAJT,KAKMN,KALN,GAOC,cAAC,OAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,EAAGS;AAFT,KAIC,cAAC,SAAD;AAAW,IAAA,EAAE,EAAC;AAAd,KAAuBb,KAAvB,CAJD,CAPD,CADD;AAgBA;;AAED,MAAMkB,kBAAkB,GAAG3B,UAAU,CAAEQ,KAAF,CAArC;AAEA,eAAemB,kBAAf","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport { Position, POSITIONS } from './utils';\nimport {\n\tTooltipWrapper,\n\tTooltip,\n\tLabelText,\n} from './styles/resize-tooltip.styles';\n\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET 2.5;\n\ntype LabelProps = React.DetailedHTMLProps<\n\tReact.HTMLAttributes< HTMLDivElement >,\n\tHTMLDivElement\n> & {\n\tlabel?: string;\n\tposition: Position;\n\tzIndex: number;\n};\n\nfunction Label(\n\t{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element \| null {\n\tconst showLabel = !! label;\n\n\tconst isBottom = position === POSITIONS.bottom;\n\tconst isCorner = position === POSITIONS.corner;\n\n\tif ( ! showLabel ) return null;\n\n\tlet style: React.CSSProperties = {\n\t\topacity: showLabel ? 1 : undefined,\n\t\tzIndex,\n\t};\n\n\tlet labelStyle = {};\n\n\tif ( isBottom ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\tbottom: CURSOR_OFFSET_TOP * -1,\n\t\t\tleft: '50%',\n\t\t\ttransform: 'translate(-50%, 0)',\n\t\t};\n\n\t\tlabelStyle = {\n\t\t\ttransform: `translate(0, 100%)`,\n\t\t};\n\t}\n\n\tif ( isCorner ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\ttop: CORNER_OFFSET,\n\t\t\tright: isRTL() ? undefined : CORNER_OFFSET,\n\t\t\tleft: isRTL() ? CORNER_OFFSET : undefined,\n\t\t};\n\t}\n\n\treturn (\n\t\t<TooltipWrapper\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"components-resizable-tooltip__tooltip-wrapper\"\n\t\t\tref={ ref }\n\t\t\tstyle={ style }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<Tooltip\n\t\t\t\tclassName=\"components-resizable-tooltip__tooltip\"\n\t\t\t\tstyle={ labelStyle }\n\t\t\t>\n\t\t\t\t<LabelText as=\"span\">{ label }</LabelText>\n\t\t\t</Tooltip>\n\t\t</TooltipWrapper>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( Label );\n\nexport default ForwardedComponent;\n"]}

package/build-module/resizable-box/resize-tooltip/utils.js CHANGED Viewed

@@ -24,15 +24,13 @@ export const POSITIONS = {
  *
  * @return Properties for hook.
  */
-export function useResizeLabel(_ref) {
-  let {
-    axis,
-    fadeTimeout = 180,
-    onResize = noop,
-    position = POSITIONS.bottom,
-    showPx = false
-  } = _ref;
+export function useResizeLabel({
+  axis,
+  fadeTimeout = 180,
+  onResize = noop,
+  position = POSITIONS.bottom,
+  showPx = false
+}) {
   /*
    * The width/height values derive from this special useResizeObserver hook.
    * This custom hook uses the ResizeObserver API to listen for resize events.
@@ -158,16 +156,15 @@ export function useResizeLabel(_ref) {
  *
  * @return The rendered label.
  */
-function getSizeLabel(_ref2) {
-  let {
-    axis,
-    height,
-    moveX = false,
-    moveY = false,
-    position = POSITIONS.bottom,
-    showPx = false,
-    width
-  } = _ref2;
+function getSizeLabel({
+  axis,
+  height,
+  moveX = false,
+  moveY = false,
+  position = POSITIONS.bottom,
+  showPx = false,
+  width
+}) {
   if (!moveX && !moveY) return undefined;
   /*
    * Corner position...

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["useCallback","useEffect","useRef","useState","useResizeObserver","noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","debounceUnsetMoveXY","unsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' \| 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = ( typeof POSITIONS )[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/* The label value. /\n\tlabel?: string;\n\t/* Element to be rendered for resize listening events. /\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number \| null; height: number \| null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/\n Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n \n @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n \n @return Properties for hook.\n /\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t /\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t /\n\tconst isAxisControlled = !! axis;\n\n\t/\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t /\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t /\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t /\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst debounceUnsetMoveXY = useCallback( () => {\n\t\tconst unsetMoveXY = () => {\n\t\t\t/\n\t\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t\t /\n\t\t\tif ( isAxisControlled ) return;\n\t\t\tsetMoveX( false );\n\t\t\tsetMoveY( false );\n\t\t};\n\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t}, [ fadeTimeout, isAxisControlled ] );\n\n\tuseEffect( () => {\n\t\t/\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t /\n\t\tconst isRendered = width !== null \|\| height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t /\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/\n\t\t * After the first cycle, we can track width and height changes.\n\t\t /\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height, onResize, debounceUnsetMoveXY ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number \| null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number \| null;\n}\n\n/\n Gets the resize label based on width and height values (as well as recent changes).\n \n @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.height Height value.\n * @param props.moveX Recent width (x axis) changes.\n * @param props.moveY Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n * @param props.width Width value.\n \n @return The rendered label.\n /\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string \| undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t /\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t \n\t Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["useCallback","useEffect","useRef","useState","useResizeObserver","noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","debounceUnsetMoveXY","unsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' \| 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = ( typeof POSITIONS )[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/* The label value. /\n\tlabel?: string;\n\t/* Element to be rendered for resize listening events. /\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number \| null; height: number \| null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/\n Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n \n @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n \n @return Properties for hook.\n /\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t /\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t /\n\tconst isAxisControlled = !! axis;\n\n\t/\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t /\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t /\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t /\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst debounceUnsetMoveXY = useCallback( () => {\n\t\tconst unsetMoveXY = () => {\n\t\t\t/\n\t\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t\t /\n\t\t\tif ( isAxisControlled ) return;\n\t\t\tsetMoveX( false );\n\t\t\tsetMoveY( false );\n\t\t};\n\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t}, [ fadeTimeout, isAxisControlled ] );\n\n\tuseEffect( () => {\n\t\t/\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t /\n\t\tconst isRendered = width !== null \|\| height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t /\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/\n\t\t * After the first cycle, we can track width and height changes.\n\t\t /\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height, onResize, debounceUnsetMoveXY ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number \| null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number \| null;\n}\n\n/\n Gets the resize label based on width and height values (as well as recent changes).\n \n @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.height Height value.\n * @param props.moveX Recent width (x axis) changes.\n * @param props.moveY Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n * @param props.width Width value.\n \n @return The rendered label.\n /\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string \| undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t /\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t \n\t Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}

package/build-module/responsive-wrapper/index.js CHANGED Viewed

@@ -29,14 +29,12 @@ import { cloneElement, Children } from '@wordpress/element';
  * );
  * ```
  */
-function ResponsiveWrapper(_ref) {
-  let {
-    naturalWidth,
-    naturalHeight,
-    children,
-    isInline = false
-  } = _ref;
+function ResponsiveWrapper({
+  naturalWidth,
+  naturalHeight,
+  children,
+  isInline = false
+}) {
   if (Children.count(children) !== 1) {
     return null;
   }

package/build-module/responsive-wrapper/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"names":["classnames","cloneElement","Children","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","count","TagName","aspectRatio","className","props","style"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,QAAvB,QAAuC,oBAAvC;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAT,~~OAK4B~~;~~AAAA,MALA;~~AAC3BC,~~IAAAA~~,YAD2B;AAE3BC,~~IAAAA~~,aAF2B;AAG3BC,~~IAAAA~~,QAH2B;AAI3BC,~~IAAAA~~,QAAQ,GAAG;AAJgB,~~GAKA;;~~AAC3B,MAAKL,QAAQ,CAACM,KAAT,CAAgBF,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,QAAMG,OAAO,GAAGF,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,MAAIG,WAAJ;;AACA,MAAKN,YAAY,IAAIC,aAArB,EAAqC;AACpCK,IAAAA,WAAW,GAAI,GAAGN,YAAc,MAAMC,aAAe,EAArD;AACA;;AAED,SACC,cAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,2BACGJ,YAAY,CAAEK,QAAF,EAAY;AACzBK,IAAAA,SAAS,EAAEX,UAAU,CACpB,wCADoB,EAEpBM,QAAQ,CAACM,KAAT,CAAeD,SAFK,CADI;AAKzBE,IAAAA,KAAK,EAAE,EACN,GAAGP,QAAQ,CAACM,KAAT,CAAeC,KADZ;AAENH,MAAAA;AAFM;AALkB,GAAZ,CADf,CADD,CADD;AAgBA;;AAED,eAAeP,iBAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { cloneElement, Children } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { ResponsiveWrapperProps } from './types';\n\n/\n A wrapper component that maintains its aspect ratio when resized.\n \n ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n \n const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n}: ResponsiveWrapperProps ) {\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\n\tconst TagName = isInline ? 'span' : 'div';\n\tlet aspectRatio;\n\tif ( naturalWidth && naturalHeight ) {\n\t\taspectRatio = `${ naturalWidth } / ${ naturalHeight }`;\n\t}\n\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t<div>\n\t\t\t\t{ cloneElement( children, {\n\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\t\tchildren.props.className\n\t\t\t\t\t),\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t...children.props.style,\n\t\t\t\t\t\taspectRatio,\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"names":["classnames","cloneElement","Children","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","count","TagName","aspectRatio","className","props","style"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,QAAvB,QAAuC,oBAAvC;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAT,CAA4B;AAC3BC,EAAAA,YAD2B;AAE3BC,EAAAA,aAF2B;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA,QAAQ,GAAG;AAJgB,CAA5B,EAK4B;AAC3B,MAAKL,QAAQ,CAACM,KAAT,CAAgBF,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,QAAMG,OAAO,GAAGF,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,MAAIG,WAAJ;;AACA,MAAKN,YAAY,IAAIC,aAArB,EAAqC;AACpCK,IAAAA,WAAW,GAAI,GAAGN,YAAc,MAAMC,aAAe,EAArD;AACA;;AAED,SACC,cAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,2BACGJ,YAAY,CAAEK,QAAF,EAAY;AACzBK,IAAAA,SAAS,EAAEX,UAAU,CACpB,wCADoB,EAEpBM,QAAQ,CAACM,KAAT,CAAeD,SAFK,CADI;AAKzBE,IAAAA,KAAK,EAAE,EACN,GAAGP,QAAQ,CAACM,KAAT,CAAeC,KADZ;AAENH,MAAAA;AAFM;AALkB,GAAZ,CADf,CADD,CADD;AAgBA;;AAED,eAAeP,iBAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { cloneElement, Children } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { ResponsiveWrapperProps } from './types';\n\n/\n A wrapper component that maintains its aspect ratio when resized.\n \n ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n \n const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n}: ResponsiveWrapperProps ) {\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\n\tconst TagName = isInline ? 'span' : 'div';\n\tlet aspectRatio;\n\tif ( naturalWidth && naturalHeight ) {\n\t\taspectRatio = `${ naturalWidth } / ${ naturalHeight }`;\n\t}\n\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t<div>\n\t\t\t\t{ cloneElement( children, {\n\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\t\tchildren.props.className\n\t\t\t\t\t),\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t...children.props.style,\n\t\t\t\t\t\taspectRatio,\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}

package/build-module/sandbox/index.js CHANGED Viewed

@@ -98,32 +98,27 @@ const style = `
  * ```
  */
-function SandBox(_ref) {
-  let {
-    html = '',
-    title = '',
-    type,
-    styles = [],
-    scripts = [],
-    onFocus
-  } = _ref;
+function SandBox({
+  html = '',
+  title = '',
+  type,
+  styles = [],
+  scripts = [],
+  onFocus
+}) {
   const ref = useRef();
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
   function isFrameAccessible() {
     try {
-      var _ref$current, _ref$current$contentD;
-      return !!((_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current$contentD = _ref$current.contentDocument) !== null && _ref$current$contentD !== void 0 && _ref$current$contentD.body);
+      return !!ref.current?.contentDocument?.body;
     } catch (e) {
       return false;
     }
   }
-  function trySandBox() {
-    let forceRerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  function trySandBox(forceRerender = false) {
     if (!isFrameAccessible()) {
       return;
     }
@@ -133,7 +128,7 @@ function SandBox(_ref) {
       ownerDocument
     } = ref.current;
-    if (!forceRerender && null !== (contentDocument === null || contentDocument === void 0 ? void 0 : 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.
@@ -178,8 +173,6 @@ function SandBox(_ref) {
   }
   useEffect(() => {
-    var _iframe$ownerDocument;
     trySandBox();
     function tryNoForceSandBox() {
@@ -213,16 +206,16 @@ function SandBox(_ref) {
     }
     const iframe = ref.current;
-    const defaultView = iframe === null || iframe === void 0 ? void 0 : (_iframe$ownerDocument = iframe.ownerDocument) === null || _iframe$ownerDocument === void 0 ? void 0 : _iframe$ownerDocument.defaultView; // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
+    const defaultView = iframe?.ownerDocument?.defaultView; // This used to be registered using <iframe onLoad={} />, but it made the iframe blank
     // after reordering the containing block. See these two issues for more details:
     // https://github.com/WordPress/gutenberg/issues/6146
     // https://github.com/facebook/react/issues/18752
-    iframe === null || iframe === void 0 ? void 0 : iframe.addEventListener('load', tryNoForceSandBox, false);
-    defaultView === null || defaultView === void 0 ? void 0 : defaultView.addEventListener('message', checkMessageForResize);
+    iframe?.addEventListener('load', tryNoForceSandBox, false);
+    defaultView?.addEventListener('message', checkMessageForResize);
     return () => {
-      iframe === null || iframe === void 0 ? void 0 : iframe.removeEventListener('load', tryNoForceSandBox, false);
-      defaultView === null || defaultView === void 0 ? void 0 : defaultView.addEventListener('message', checkMessageForResize);
+      iframe?.removeEventListener('load', tryNoForceSandBox, false);
+      defaultView?.addEventListener('message', checkMessageForResize);
     }; // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

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

package/build-module/sandbox/index.native.js CHANGED Viewed

@@ -161,23 +161,22 @@ const style = `
 	}
 `;
 const EMPTY_ARRAY = [];
-const Sandbox = forwardRef(function Sandbox(_ref, ref) {
-  let {
-    containerStyle,
-    customJS,
-    html = '',
-    lang = 'en',
-    providerUrl = '',
-    scripts = EMPTY_ARRAY,
-    styles = EMPTY_ARRAY,
-    title = '',
-    type,
-    url,
-    onWindowEvents = {},
-    viewportProps = '',
-    onLoadEnd = () => {},
-    testID
-  } = _ref;
+const Sandbox = forwardRef(function Sandbox({
+  containerStyle,
+  customJS,
+  html = '',
+  lang = 'en',
+  providerUrl = '',
+  scripts = EMPTY_ARRAY,
+  styles = EMPTY_ARRAY,
+  title = '',
+  type,
+  url,
+  onWindowEvents = {},
+  viewportProps = '',
+  onLoadEnd = () => {},
+  testID
+}, ref) {
   const colorScheme = usePreferredColorScheme();
   const [height, setHeight] = useState(0);
   const [contentHtml, setContentHtml] = useState(getHtmlDoc());
@@ -241,8 +240,7 @@ const Sandbox = forwardRef(function Sandbox(_ref, ref) {
     return injectedJS;
   }, [customJS, onWindowEvents]);
-  function updateContentHtml() {
-    let forceRerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  function updateContentHtml(forceRerender = false) {
     const newContentHtml = getHtmlDoc();
     if (forceRerender && contentHtml === newContentHtml) {
@@ -270,9 +268,7 @@ const Sandbox = forwardRef(function Sandbox(_ref, ref) {
   }
   const onMessage = useCallback(message => {
-    var _message$nativeEvent, _data;
-    let data = message === null || message === void 0 ? void 0 : (_message$nativeEvent = message.nativeEvent) === null || _message$nativeEvent === void 0 ? void 0 : _message$nativeEvent.data;
+    let data = message?.nativeEvent?.data;
     try {
       data = JSON.parse(data);
@@ -281,15 +277,13 @@ const Sandbox = forwardRef(function Sandbox(_ref, ref) {
     } // check for resize event
-    if ('resize' === ((_data = data) === null || _data === void 0 ? void 0 : _data.action)) {
+    if ('resize' === data?.action) {
       setHeight(data.height);
     } // Forward the event to parent event listeners
     Object.keys(onWindowEvents).forEach(eventType => {
-      var _data2;
-      if (((_data2 = data) === null || _data2 === void 0 ? void 0 : _data2.type) === eventType) {
+      if (data?.type === eventType) {
         try {
           onWindowEvents[eventType](data);
         } catch (e) {