npm - @wordpress/components - Versions diffs - 19.0.0 → 19.0.4 - Mend

@wordpress/components 19.0.0 → 19.0.4

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 (1440) hide show

package/build-module/range-control/styles/range-control-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.js"],"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","colorProp","ui","borderFocus","wrapperMargin","marks","marginBottom","Wrapper","blue","medium","focus","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","lightGray","Rail","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","darkGray","MarkLabel","thumbColor","ThumbWrapper","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","transform","InputNumber","ActionRightWrapper"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/\n Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\tbox-sizing: border-box;\n\talign-items: flex-start;\n\tdisplay: inline-flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color: colorProp = COLORS.ui.borderFocus } ) => {\n\treturn css( { color: colorProp } );\n};\nconst wrapperMargin = ( { marks } ) =>\n\tcss( { marginBottom: marks ? 16 : null } );\n\nexport const Wrapper = styled.div`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.blue.medium.focus };\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 16 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor } ) => {\n\tlet background = railColor \|\| null;\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.lightGray[ 600 ] };\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor } ) => {\n\tlet background = trackColor \|\| 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\tbox-sizing: border-box;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled } ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\tbox-sizing: border-box;\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled } ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.lightGray[ 600 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled } ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.lightGray[ 800 ] };\n\t\t `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\ttransform: translateX( 4.5px );\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n`;\n\nconst thumbFocus = ( { isFocused } ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t `\n\t\t: '';\n};\n\nexport const Thumb = styled.span`\n\talign-items: center;\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show } ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position } ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack\nexport const InputNumber = styled( NumberControl )`\n\tbox-sizing: border-box;\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.js"],"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","colorProp","ui","borderFocus","wrapperMargin","marks","marginBottom","Wrapper","blue","medium","focus","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","lightGray","Rail","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","darkGray","MarkLabel","thumbColor","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","ActionRightWrapper"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/\n Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\tbox-sizing: border-box;\n\talign-items: flex-start;\n\tdisplay: inline-flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color: colorProp = COLORS.ui.borderFocus } ) => {\n\treturn css( { color: colorProp } );\n};\nconst wrapperMargin = ( { marks } ) =>\n\tcss( { marginBottom: marks ? 16 : null } );\n\nexport const Wrapper = styled.div`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.blue.medium.focus };\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 16 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor } ) => {\n\tlet background = railColor \|\| null;\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.lightGray[ 600 ] };\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor } ) => {\n\tlet background = trackColor \|\| 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\tbox-sizing: border-box;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled } ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\tbox-sizing: border-box;\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled } ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.lightGray[ 600 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled } ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.lightGray[ 800 ] };\n\t\t `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused } ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t `\n\t\t: '';\n};\n\nexport const Thumb = styled.span`\n\talign-items: center;\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show } ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position } ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack\nexport const InputNumber = styled( NumberControl )`\n\tbox-sizing: border-box;\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}

package/build-module/range-control/tooltip.js CHANGED Viewed

@@ -16,17 +16,18 @@ import { useCallback, useEffect, useState } from '@wordpress/element';
  */
 import { Tooltip } from './styles/range-control-styles';
-export default function SimpleTooltip({
-  className,
-  inputRef,
-  tooltipPosition,
-  show = false,
-  style = {},
-  value = 0,
-  renderTooltipContent = v => v,
-  zIndex = 100,
-  ...restProps
-}) {
+export default function SimpleTooltip(_ref) {
+  let {
+    className,
+    inputRef,
+    tooltipPosition,
+    show = false,
+    style = {},
+    value = 0,
+    renderTooltipContent = v => v,
+    zIndex = 100,
+    ...restProps
+  } = _ref;
   const position = useTooltipPosition({
     inputRef,
     tooltipPosition
@@ -45,10 +46,11 @@ export default function SimpleTooltip({
   }), renderTooltipContent(value));
 }
-function useTooltipPosition({
-  inputRef,
-  tooltipPosition
-}) {
+function useTooltipPosition(_ref2) {
+  let {
+    inputRef,
+    tooltipPosition
+  } = _ref2;
   const [position, setPosition] = useState();
   const setTooltipPosition = useCallback(() => {
     if (inputRef && inputRef.current) {

package/build-module/range-control/tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/range-control/tooltip.js"],"names":["classnames","useCallback","useEffect","useState","Tooltip","SimpleTooltip","className","inputRef","tooltipPosition","show","style","value","renderTooltipContent","v","zIndex","restProps","position","useTooltipPosition","classes","styles","setPosition","setTooltipPosition","current","window","addEventListener","removeEventListener"],"mappings":";;AAAA;;AACA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,QAAjC,QAAiD,oBAAjD;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,+BAAxB;AAEA,eAAe,SAASC,aAAT,~~CAAwB~~;AACtCC,~~EAAAA~~,SADsC;AAEtCC,~~EAAAA~~,QAFsC;AAGtCC,~~EAAAA~~,eAHsC;AAItCC,~~EAAAA~~,IAAI,GAAG,KAJ+B;AAKtCC,~~EAAAA~~,KAAK,GAAG,EAL8B;AAMtCC,~~EAAAA~~,KAAK,GAAG,CAN8B;AAOtCC,~~EAAAA~~,oBAAoB,GAAKC,CAAF,IAASA,CAPM;AAQtCC,~~EAAAA~~,MAAM,GAAG,GAR6B;AAStC,~~KAAGC~~;AATmC,~~CAAxB,EAUX~~;AACH,QAAMC,QAAQ,GAAGC,kBAAkB,CAAE;AAAEV,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAF,CAAnC;AACA,QAAMU,OAAO,GAAGlB,UAAU,CAAE,2BAAF,EAA+BM,SAA/B,CAA1B;AACA,QAAMa,MAAM,GAAG,EACd,GAAGT,KADW;AAEdI,IAAAA;AAFc,GAAf;AAKA,SACC,cAAC,OAAD,eACMC,SADN;AAEC,mBAAcN,IAFf;AAGC,IAAA,SAAS,EAAGS,OAHb;AAIC,IAAA,QAAQ,EAAGF,QAJZ;AAKC,IAAA,IAAI,EAAGP,IALR;AAMC,IAAA,IAAI,EAAC,SANN;AAOC,IAAA,KAAK,EAAGU;AAPT,MASGP,oBAAoB,CAAED,KAAF,CATvB,CADD;AAaA;;AAED,SAASM,kBAAT,~~CAA6B~~;AAAEV,~~EAAAA~~,QAAF;AAAYC,~~EAAAA~~;AAAZ,~~CAA7B,EAA6D~~;AAC5D,QAAM,CAAEQ,QAAF,EAAYI,WAAZ,IAA4BjB,QAAQ,EAA1C;AAEA,QAAMkB,kBAAkB,GAAGpB,WAAW,CAAE,MAAM;AAC7C,QAAKM,QAAQ,IAAIA,QAAQ,CAACe,OAA1B,EAAoC;AACnCF,MAAAA,WAAW,CAAEZ,eAAF,CAAX;AACA;AACD,GAJqC,EAInC,CAAEA,eAAF,CAJmC,CAAtC;AAMAN,EAAAA,SAAS,CAAE,MAAM;AAChBmB,IAAAA,kBAAkB;AAClB,GAFQ,EAEN,CAAEA,kBAAF,CAFM,CAAT;AAIAnB,EAAAA,SAAS,CAAE,MAAM;AAChBqB,IAAAA,MAAM,CAACC,gBAAP,CAAyB,QAAzB,EAAmCH,kBAAnC;AAEA,WAAO,MAAM;AACZE,MAAAA,MAAM,CAACE,mBAAP,CAA4B,QAA5B,EAAsCJ,kBAAtC;AACA,KAFD;AAGA,GANQ,CAAT;AAQA,SAAOL,QAAP;AACA","sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { Tooltip } from './styles/range-control-styles';\n\nexport default function SimpleTooltip( {\n\tclassName,\n\tinputRef,\n\ttooltipPosition,\n\tshow = false,\n\tstyle = {},\n\tvalue = 0,\n\trenderTooltipContent = ( v ) => v,\n\tzIndex = 100,\n\t...restProps\n} ) {\n\tconst position = useTooltipPosition( { inputRef, tooltipPosition } );\n\tconst classes = classnames( 'components-simple-tooltip', className );\n\tconst styles = {\n\t\t...style,\n\t\tzIndex,\n\t};\n\n\treturn (\n\t\t<Tooltip\n\t\t\t{ ...restProps }\n\t\t\taria-hidden={ show }\n\t\t\tclassName={ classes }\n\t\t\tposition={ position }\n\t\t\tshow={ show }\n\t\t\trole=\"tooltip\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ renderTooltipContent( value ) }\n\t\t</Tooltip>\n\t);\n}\n\nfunction useTooltipPosition( { inputRef, tooltipPosition } ) {\n\tconst [ position, setPosition ] = useState();\n\n\tconst setTooltipPosition = useCallback( () => {\n\t\tif ( inputRef && inputRef.current ) {\n\t\t\tsetPosition( tooltipPosition );\n\t\t}\n\t}, [ tooltipPosition ] );\n\n\tuseEffect( () => {\n\t\tsetTooltipPosition();\n\t}, [ setTooltipPosition ] );\n\n\tuseEffect( () => {\n\t\twindow.addEventListener( 'resize', setTooltipPosition );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'resize', setTooltipPosition );\n\t\t};\n\t} );\n\n\treturn position;\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/range-control/tooltip.js"],"names":["classnames","useCallback","useEffect","useState","Tooltip","SimpleTooltip","className","inputRef","tooltipPosition","show","style","value","renderTooltipContent","v","zIndex","restProps","position","useTooltipPosition","classes","styles","setPosition","setTooltipPosition","current","window","addEventListener","removeEventListener"],"mappings":";;AAAA;;AACA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,QAAjC,QAAiD,oBAAjD;AAEA;AACA;AACA;;AACA,SAASC,OAAT,QAAwB,+BAAxB;AAEA,eAAe,SAASC,aAAT,OAUX;AAAA,MAVmC;AACtCC,IAAAA,SADsC;AAEtCC,IAAAA,QAFsC;AAGtCC,IAAAA,eAHsC;AAItCC,IAAAA,IAAI,GAAG,KAJ+B;AAKtCC,IAAAA,KAAK,GAAG,EAL8B;AAMtCC,IAAAA,KAAK,GAAG,CAN8B;AAOtCC,IAAAA,oBAAoB,GAAKC,CAAF,IAASA,CAPM;AAQtCC,IAAAA,MAAM,GAAG,GAR6B;AAStC,OAAGC;AATmC,GAUnC;AACH,QAAMC,QAAQ,GAAGC,kBAAkB,CAAE;AAAEV,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAF,CAAnC;AACA,QAAMU,OAAO,GAAGlB,UAAU,CAAE,2BAAF,EAA+BM,SAA/B,CAA1B;AACA,QAAMa,MAAM,GAAG,EACd,GAAGT,KADW;AAEdI,IAAAA;AAFc,GAAf;AAKA,SACC,cAAC,OAAD,eACMC,SADN;AAEC,mBAAcN,IAFf;AAGC,IAAA,SAAS,EAAGS,OAHb;AAIC,IAAA,QAAQ,EAAGF,QAJZ;AAKC,IAAA,IAAI,EAAGP,IALR;AAMC,IAAA,IAAI,EAAC,SANN;AAOC,IAAA,KAAK,EAAGU;AAPT,MASGP,oBAAoB,CAAED,KAAF,CATvB,CADD;AAaA;;AAED,SAASM,kBAAT,QAA6D;AAAA,MAAhC;AAAEV,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAgC;AAC5D,QAAM,CAAEQ,QAAF,EAAYI,WAAZ,IAA4BjB,QAAQ,EAA1C;AAEA,QAAMkB,kBAAkB,GAAGpB,WAAW,CAAE,MAAM;AAC7C,QAAKM,QAAQ,IAAIA,QAAQ,CAACe,OAA1B,EAAoC;AACnCF,MAAAA,WAAW,CAAEZ,eAAF,CAAX;AACA;AACD,GAJqC,EAInC,CAAEA,eAAF,CAJmC,CAAtC;AAMAN,EAAAA,SAAS,CAAE,MAAM;AAChBmB,IAAAA,kBAAkB;AAClB,GAFQ,EAEN,CAAEA,kBAAF,CAFM,CAAT;AAIAnB,EAAAA,SAAS,CAAE,MAAM;AAChBqB,IAAAA,MAAM,CAACC,gBAAP,CAAyB,QAAzB,EAAmCH,kBAAnC;AAEA,WAAO,MAAM;AACZE,MAAAA,MAAM,CAACE,mBAAP,CAA4B,QAA5B,EAAsCJ,kBAAtC;AACA,KAFD;AAGA,GANQ,CAAT;AAQA,SAAOL,QAAP;AACA","sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { Tooltip } from './styles/range-control-styles';\n\nexport default function SimpleTooltip( {\n\tclassName,\n\tinputRef,\n\ttooltipPosition,\n\tshow = false,\n\tstyle = {},\n\tvalue = 0,\n\trenderTooltipContent = ( v ) => v,\n\tzIndex = 100,\n\t...restProps\n} ) {\n\tconst position = useTooltipPosition( { inputRef, tooltipPosition } );\n\tconst classes = classnames( 'components-simple-tooltip', className );\n\tconst styles = {\n\t\t...style,\n\t\tzIndex,\n\t};\n\n\treturn (\n\t\t<Tooltip\n\t\t\t{ ...restProps }\n\t\t\taria-hidden={ show }\n\t\t\tclassName={ classes }\n\t\t\tposition={ position }\n\t\t\tshow={ show }\n\t\t\trole=\"tooltip\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ renderTooltipContent( value ) }\n\t\t</Tooltip>\n\t);\n}\n\nfunction useTooltipPosition( { inputRef, tooltipPosition } ) {\n\tconst [ position, setPosition ] = useState();\n\n\tconst setTooltipPosition = useCallback( () => {\n\t\tif ( inputRef && inputRef.current ) {\n\t\t\tsetPosition( tooltipPosition );\n\t\t}\n\t}, [ tooltipPosition ] );\n\n\tuseEffect( () => {\n\t\tsetTooltipPosition();\n\t}, [ setTooltipPosition ] );\n\n\tuseEffect( () => {\n\t\twindow.addEventListener( 'resize', setTooltipPosition );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'resize', setTooltipPosition );\n\t\t};\n\t} );\n\n\treturn position;\n}\n"]}

package/build-module/range-control/utils.js CHANGED Viewed

@@ -43,12 +43,13 @@ export function floatClamp(value, min, max) {
  * @return {[*, Function]} The controlled value and the value setter.
  */
-export function useControlledRangeValue({
-  min,
-  max,
-  value: valueProp,
-  initial
-}) {
+export function useControlledRangeValue(_ref) {
+  let {
+    min,
+    max,
+    value: valueProp,
+    initial
+  } = _ref;
   const [state, setInternalState] = useControlledState(floatClamp(valueProp, min, max), {
     initial,
     fallback: null
@@ -76,13 +77,14 @@ export function useControlledRangeValue({
  * @return {Object} Bound properties for use on a React.Node.
  */
-export function useDebouncedHoverInteraction({
-  onHide = noop,
-  onMouseLeave = noop,
-  onMouseMove = noop,
-  onShow = noop,
-  timeout = 300
-}) {
+export function useDebouncedHoverInteraction(_ref2) {
+  let {
+    onHide = noop,
+    onMouseLeave = noop,
+    onMouseMove = noop,
+    onShow = noop,
+    timeout = 300
+  } = _ref2;
   const [show, setShow] = useState(false);
   const timeoutRef = useRef();
   const setDebouncedTimeout = useCallback(callback => {

package/build-module/range-control/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/range-control/utils.js"],"names":["clamp","noop","useCallback","useRef","useEffect","useState","useControlledState","floatClamp","value","min","max","parseFloat","useControlledRangeValue","valueProp","initial","state","setInternalState","fallback","setState","nextValue","useDebouncedHoverInteraction","onHide","onMouseLeave","onMouseMove","onShow","timeout","show","setShow","timeoutRef","setDebouncedTimeout","callback","window","clearTimeout","current","setTimeout","handleOnMouseMove","event","handleOnMouseLeave"],"mappings":"AAAA;;AACA;AACA;AACA;AACA,SAASA,KAAT,EAAgBC,IAAhB,QAA4B,QAA5B;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,SAA9B,EAAyCC,QAAzC,QAAyD,oBAAzD;AAEA;AACA;AACA;;AACA,SAASC,kBAAT,QAAmC,gBAAnC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,UAAT,CAAqBC,KAArB,EAA4BC,GAA5B,EAAiCC,GAAjC,EAAuC;AAC7C,MAAK,OAAOF,KAAP,KAAiB,QAAtB,EAAiC;AAChC,WAAO,IAAP;AACA;;AAED,SAAOG,UAAU,CAAEX,KAAK,CAAEQ,KAAF,EAASC,GAAT,EAAcC,GAAd,CAAP,CAAjB;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,uBAAT,~~CAAkC~~;AACxCH,~~EAAAA~~,GADwC;AAExCC,~~EAAAA~~,GAFwC;AAGxCF,~~EAAAA~~,KAAK,EAAEK,SAHiC;AAIxCC,~~EAAAA~~;AAJwC,~~CAAlC,EAKH~~;AACH,QAAM,CAAEC,KAAF,EAASC,gBAAT,IAA8BV,kBAAkB,CACrDC,UAAU,CAAEM,SAAF,EAAaJ,GAAb,EAAkBC,GAAlB,CAD2C,EAErD;AAAEI,IAAAA,OAAF;AAAWG,IAAAA,QAAQ,EAAE;AAArB,GAFqD,CAAtD;AAKA,QAAMC,QAAQ,GAAGhB,WAAW,CACzBiB,SAAF,IAAiB;AAChB,QAAKA,SAAS,KAAK,IAAnB,EAA0B;AACzBH,MAAAA,gBAAgB,CAAE,IAAF,CAAhB;AACA,KAFD,MAEO;AACNA,MAAAA,gBAAgB,CAAET,UAAU,CAAEY,SAAF,EAAaV,GAAb,EAAkBC,GAAlB,CAAZ,CAAhB;AACA;AACD,GAP0B,EAQ3B,CAAED,GAAF,EAAOC,GAAP,CAR2B,CAA5B;AAWA,SAAO,CAAEK,KAAF,EAASG,QAAT,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,4BAAT,~~CAAuC~~;AAC7CC,~~EAAAA~~,MAAM,GAAGpB,IADoC;AAE7CqB,~~EAAAA~~,YAAY,GAAGrB,IAF8B;AAG7CsB,~~EAAAA~~,WAAW,GAAGtB,IAH+B;AAI7CuB,~~EAAAA~~,MAAM,GAAGvB,IAJoC;AAK7CwB,~~EAAAA~~,OAAO,GAAG;AALmC,~~CAAvC,EAMH~~;AACH,QAAM,CAAEC,IAAF,EAAQC,OAAR,IAAoBtB,QAAQ,CAAE,KAAF,CAAlC;AACA,QAAMuB,UAAU,GAAGzB,MAAM,EAAzB;AAEA,QAAM0B,mBAAmB,GAAG3B,WAAW,CACpC4B,QAAF,IAAgB;AACfC,IAAAA,MAAM,CAACC,YAAP,CAAqBJ,UAAU,CAACK,OAAhC;AAEAL,IAAAA,UAAU,CAACK,OAAX,GAAqBC,UAAU,CAAEJ,QAAF,EAAYL,OAAZ,CAA/B;AACA,GALqC,EAMtC,CAAEA,OAAF,CANsC,CAAvC;AASA,QAAMU,iBAAiB,GAAGjC,WAAW,CAAIkC,KAAF,IAAa;AACnDb,IAAAA,WAAW,CAAEa,KAAF,CAAX;AAEAP,IAAAA,mBAAmB,CAAE,MAAM;AAC1B,UAAK,CAAEH,IAAP,EAAc;AACbC,QAAAA,OAAO,CAAE,IAAF,CAAP;AACAH,QAAAA,MAAM;AACN;AACD,KALkB,CAAnB;AAMA,GAToC,EASlC,EATkC,CAArC;AAWA,QAAMa,kBAAkB,GAAGnC,WAAW,CAAIkC,KAAF,IAAa;AACpDd,IAAAA,YAAY,CAAEc,KAAF,CAAZ;AAEAP,IAAAA,mBAAmB,CAAE,MAAM;AAC1BF,MAAAA,OAAO,CAAE,KAAF,CAAP;AACAN,MAAAA,MAAM;AACN,KAHkB,CAAnB;AAIA,GAPqC,EAOnC,EAPmC,CAAtC;AASAjB,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AACZ2B,MAAAA,MAAM,CAACC,YAAP,CAAqBJ,UAAU,CAACK,OAAhC;AACA,KAFD;AAGA,GAJQ,CAAT;AAMA,SAAO;AACNV,IAAAA,WAAW,EAAEY,iBADP;AAENb,IAAAA,YAAY,EAAEe;AAFR,GAAP;AAIA","sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport { clamp, noop } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useRef, useEffect, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { useControlledState } from '../utils/hooks';\n\n/\n A float supported clamp function for a specific value.\n \n @param {number\|null} value The value to clamp.\n * @param {number} min The minimum value.\n * @param {number} max The maximum value.\n \n @return {number} A (float) number\n /\nexport function floatClamp( value, min, max ) {\n\tif ( typeof value !== 'number' ) {\n\t\treturn null;\n\t}\n\n\treturn parseFloat( clamp( value, min, max ) );\n}\n\n/\n Hook to store a clamped value, derived from props.\n \n @param {Object} settings Hook settings.\n * @param {number} settings.min The minimum value.\n * @param {number} settings.max The maximum value.\n * @param {number} settings.value The current value.\n * @param {any} settings.initial The initial value.\n \n @return {[, Function]} The controlled value and the value setter.\n /\nexport function useControlledRangeValue( {\n\tmin,\n\tmax,\n\tvalue: valueProp,\n\tinitial,\n} ) {\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{ initial, fallback: null }\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue ) => {\n\t\t\tif ( nextValue === null ) {\n\t\t\t\tsetInternalState( null );\n\t\t\t} else {\n\t\t\t\tsetInternalState( floatClamp( nextValue, min, max ) );\n\t\t\t}\n\t\t},\n\t\t[ min, max ]\n\t);\n\n\treturn [ state, setState ];\n}\n\n/*\n Hook to encapsulate the debouncing \"hover\" to better handle the showing\n * and hiding of the Tooltip.\n \n @param {Object} settings Hook settings.\n * @param {Function} [settings.onShow=noop] A callback function invoked when the element is shown.\n * @param {Function} [settings.onHide=noop] A callback function invoked when the element is hidden.\n * @param {Function} [settings.onMouseMove=noop] A callback function invoked when the mouse is moved.\n * @param {Function} [settings.onMouseLeave=noop] A callback function invoked when the mouse is moved out of the element.\n * @param {number} [settings.timeout=300] Timeout before the element is shown or hidden.\n \n @return {Object} Bound properties for use on a React.Node.\n */\nexport function useDebouncedHoverInteraction( {\n\tonHide = noop,\n\tonMouseLeave = noop,\n\tonMouseMove = noop,\n\tonShow = noop,\n\ttimeout = 300,\n} ) {\n\tconst [ show, setShow ] = useState( false );\n\tconst timeoutRef = useRef();\n\n\tconst setDebouncedTimeout = useCallback(\n\t\t( callback ) => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\n\t\t\ttimeoutRef.current = setTimeout( callback, timeout );\n\t\t},\n\t\t[ timeout ]\n\t);\n\n\tconst handleOnMouseMove = useCallback( ( event ) => {\n\t\tonMouseMove( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tif ( ! show ) {\n\t\t\t\tsetShow( true );\n\t\t\t\tonShow();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\tconst handleOnMouseLeave = useCallback( ( event ) => {\n\t\tonMouseLeave( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tsetShow( false );\n\t\t\tonHide();\n\t\t} );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t};\n\t} );\n\n\treturn {\n\t\tonMouseMove: handleOnMouseMove,\n\t\tonMouseLeave: handleOnMouseLeave,\n\t};\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/range-control/utils.js"],"names":["clamp","noop","useCallback","useRef","useEffect","useState","useControlledState","floatClamp","value","min","max","parseFloat","useControlledRangeValue","valueProp","initial","state","setInternalState","fallback","setState","nextValue","useDebouncedHoverInteraction","onHide","onMouseLeave","onMouseMove","onShow","timeout","show","setShow","timeoutRef","setDebouncedTimeout","callback","window","clearTimeout","current","setTimeout","handleOnMouseMove","event","handleOnMouseLeave"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport { clamp, noop } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { useCallback, useRef, useEffect, useState } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { useControlledState } from '../utils/hooks';\n\n/\n A float supported clamp function for a specific value.\n \n @param {number\|null} value The value to clamp.\n * @param {number} min The minimum value.\n * @param {number} max The maximum value.\n \n @return {number} A (float) number\n /\nexport function floatClamp( value, min, max ) {\n\tif ( typeof value !== 'number' ) {\n\t\treturn null;\n\t}\n\n\treturn parseFloat( clamp( value, min, max ) );\n}\n\n/\n Hook to store a clamped value, derived from props.\n \n @param {Object} settings Hook settings.\n * @param {number} settings.min The minimum value.\n * @param {number} settings.max The maximum value.\n * @param {number} settings.value The current value.\n * @param {any} settings.initial The initial value.\n \n @return {[, Function]} The controlled value and the value setter.\n /\nexport function useControlledRangeValue( {\n\tmin,\n\tmax,\n\tvalue: valueProp,\n\tinitial,\n} ) {\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{ initial, fallback: null }\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue ) => {\n\t\t\tif ( nextValue === null ) {\n\t\t\t\tsetInternalState( null );\n\t\t\t} else {\n\t\t\t\tsetInternalState( floatClamp( nextValue, min, max ) );\n\t\t\t}\n\t\t},\n\t\t[ min, max ]\n\t);\n\n\treturn [ state, setState ];\n}\n\n/*\n Hook to encapsulate the debouncing \"hover\" to better handle the showing\n * and hiding of the Tooltip.\n \n @param {Object} settings Hook settings.\n * @param {Function} [settings.onShow=noop] A callback function invoked when the element is shown.\n * @param {Function} [settings.onHide=noop] A callback function invoked when the element is hidden.\n * @param {Function} [settings.onMouseMove=noop] A callback function invoked when the mouse is moved.\n * @param {Function} [settings.onMouseLeave=noop] A callback function invoked when the mouse is moved out of the element.\n * @param {number} [settings.timeout=300] Timeout before the element is shown or hidden.\n \n @return {Object} Bound properties for use on a React.Node.\n */\nexport function useDebouncedHoverInteraction( {\n\tonHide = noop,\n\tonMouseLeave = noop,\n\tonMouseMove = noop,\n\tonShow = noop,\n\ttimeout = 300,\n} ) {\n\tconst [ show, setShow ] = useState( false );\n\tconst timeoutRef = useRef();\n\n\tconst setDebouncedTimeout = useCallback(\n\t\t( callback ) => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\n\t\t\ttimeoutRef.current = setTimeout( callback, timeout );\n\t\t},\n\t\t[ timeout ]\n\t);\n\n\tconst handleOnMouseMove = useCallback( ( event ) => {\n\t\tonMouseMove( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tif ( ! show ) {\n\t\t\t\tsetShow( true );\n\t\t\t\tonShow();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\tconst handleOnMouseLeave = useCallback( ( event ) => {\n\t\tonMouseLeave( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tsetShow( false );\n\t\t\tonHide();\n\t\t} );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t};\n\t} );\n\n\treturn {\n\t\tonMouseMove: handleOnMouseMove,\n\t\tonMouseLeave: handleOnMouseLeave,\n\t};\n}\n"]}

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

@@ -49,14 +49,15 @@ const HANDLE_STYLES = {
   bottomLeft: HANDLE_STYLES_OVERRIDES
 };
-function ResizableBox({
-  className,
-  children,
-  showHandle = true,
-  __experimentalShowTooltip: showTooltip = false,
-  __experimentalTooltipProps: tooltipProps = {},
-  ...props
-}, ref) {
+function ResizableBox(_ref, ref) {
+  let {
+    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","ResizableBox","className","children","showHandle","__experimentalShowTooltip","showTooltip","__experimentalTooltipProps","tooltipProps","props"~~,"ref"~~],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT,QAA0B,cAA1B;;AAKA;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;;AAmBA,SAASK,YAAT,~~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,~~eAAe5B~~,UAAU,CAAEqB,YAAF,CAAzB","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';\n// eslint-disable-next-line no-restricted-imports\nimport type { ReactNode, Ref } 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\tclassName: string;\n\tchildren: ReactNode;\n\tshowHandle: boolean;\n\t__experimentalShowTooltip: boolean;\n\t__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];\n};\n\nfunction ResizableBox(\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: Ref< 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 default forwardRef( 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","ResizableBox","ref","className","children","showHandle","__experimentalShowTooltip","showTooltip","__experimentalTooltipProps","tooltipProps","props"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT,QAA0B,cAA1B;;AAKA;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;;AAmBA,SAASK,YAAT,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,eAAe7B,UAAU,CAAEqB,YAAF,CAAzB","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';\n// eslint-disable-next-line no-restricted-imports\nimport type { ReactNode, Ref } 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\tclassName: string;\n\tchildren: ReactNode;\n\tshowHandle: boolean;\n\t__experimentalShowTooltip: boolean;\n\t__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];\n};\n\nfunction ResizableBox(\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: Ref< 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 default forwardRef( ResizableBox );\n"]}

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

@@ -19,18 +19,19 @@ import Label from './label';
 import { useResizeLabel, POSITIONS } from './utils';
 import { Root } from './styles/resize-tooltip.styles';
-function ResizeTooltip({
-  axis,
-  className,
-  fadeTimeout = 180,
-  isVisible = true,
-  labelRef,
-  onResize = noop,
-  position = POSITIONS.bottom,
-  showPx = true,
-  zIndex = 1000,
-  ...props
-}, ref) {
+function ResizeTooltip(_ref, ref) {
+  let {
+    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":["noop","classnames","forwardRef","Label","useResizeLabel","POSITIONS","Root","ResizeTooltip","axis","className","fadeTimeout","isVisible","labelRef","onResize","position","bottom","showPx","zIndex","props","~~ref","~~label","resizeListener","classes","ForwardedComponent"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B,C,CACA;;AAGA;AACA;AACA;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,SAASC,cAAT,EAAyCC,SAAzC,QAA0D,SAA1D;AACA,SAASC,IAAT,QAAqB,gCAArB;;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,~~GAAGb~~,IANZ;~~AAOCc~~,~~EAAAA~~,QAAQ,~~GAAGT~~,SAAS,~~CAACU~~,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,MAA4BjB,cAAc,CAAE;~~AACjDI~~,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,GAAGrB,UAAU,CAAE,2BAAF,EAA+BQ,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,GAAGrB,UAAU,CAAEK,aAAF,CAArC;AAEA,eAAegB,kBAAf","sourcesContent":["/*\n External dependencies\n /\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\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\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: Ref< 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":["noop","classnames","forwardRef","Label","useResizeLabel","POSITIONS","Root","ResizeTooltip","ref","axis","className","fadeTimeout","isVisible","labelRef","onResize","position","bottom","showPx","zIndex","props","label","resizeListener","classes","ForwardedComponent"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B,C,CACA;;AAGA;AACA;AACA;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,SAASC,cAAT,EAAyCC,SAAzC,QAA0D,SAA1D;AACA,SAASC,IAAT,QAAqB,gCAArB;;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,GAAGd,IANZ;AAOCe,IAAAA,QAAQ,GAAGV,SAAS,CAACW,MAPtB;AAQCC,IAAAA,MAAM,GAAG,IARV;AASCC,IAAAA,MAAM,GAAG,IATV;AAUC,OAAGC;AAVJ,GAaqB;AACrB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAA4BjB,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,QAAMU,OAAO,GAAGrB,UAAU,CAAE,2BAAF,EAA+BS,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,GAAGrB,UAAU,CAAEK,aAAF,CAArC;AAEA,eAAegB,kBAAf","sourcesContent":["/*\n External dependencies\n /\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\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\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: Ref< 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

@@ -20,12 +20,13 @@ import { TooltipWrapper, Tooltip, LabelText } from './styles/resize-tooltip.styl
 const CORNER_OFFSET = 4;
 const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
-function Label({
-  label,
-  position = POSITIONS.corner,
-  zIndex = 1000,
-  ...props
-}, ref) {
+function Label(_ref, ref) {
+  let {
+    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","label","position","corner","zIndex","props","~~ref","~~showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","ForwardedComponent"],"mappings":";;;AAAA;AACA;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 /\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } 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: Ref< 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","ref","label","position","corner","zIndex","props","showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","ForwardedComponent"],"mappings":";;;AAAA;AACA;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 /\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } 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: Ref< 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

@@ -30,13 +30,15 @@ export const POSITIONS = {
  *
  * @return Properties for hook.
  */
-export function useResizeLabel({
-  axis,
-  fadeTimeout = 180,
-  onResize = noop,
-  position = POSITIONS.bottom,
-  showPx = false
-}) {
+export function useResizeLabel(_ref) {
+  let {
+    axis,
+    fadeTimeout = 180,
+    onResize = noop,
+    position = POSITIONS.bottom,
+    showPx = false
+  } = _ref;
   /*
    * The width/height values derive from this special useResizeAware hook.
    * This custom hook uses injects an iFrame into the element, allowing it
@@ -165,15 +167,16 @@ export function useResizeLabel({
  *
  * @return The rendered label.
  */
-function getSizeLabel({
-  axis,
-  height,
-  moveX = false,
-  moveY = false,
-  position = POSITIONS.bottom,
-  showPx = false,
-  width
-}) {
+function getSizeLabel(_ref2) {
+  let {
+    axis,
+    height,
+    moveX = false,
+    moveY = false,
+    position = POSITIONS.bottom,
+    showPx = false,
+    width
+  } = _ref2;
   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":["noop","useResizeAware","useEffect","useRef","useState","clearTimeout","setTimeout","window","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","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"]}
1	+ {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["noop","useResizeAware","useEffect","useRef","useState","clearTimeout","setTimeout","window","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","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":"AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,MAApB,EAA4BC,QAA5B,QAA4C,oBAA5C;AAEA,MAAM;AAAEC,EAAAA,YAAF;AAAgBC,EAAAA;AAAhB,IAA+BC,MAArC;AAIA,OAAO,MAAMC,SAAS,GAAG;AACxBC,EAAAA,MAAM,EAAE,QADgB;AAExBC,EAAAA,MAAM,EAAE;AAFgB,CAAlB;;AAsBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAT,OAMsC;AAAA,MANb;AAC/BC,IAAAA,IAD+B;AAE/BC,IAAAA,WAAW,GAAG,GAFiB;AAG/BC,IAAAA,QAAQ,GAAGd,IAHoB;AAI/Be,IAAAA,QAAQ,GAAGP,SAAS,CAACC,MAJU;AAK/BO,IAAAA,MAAM,GAAG;AALsB,GAMa;;AAC5C;AACD;AACA;AACA;AACA;AACC,QAAM,CAAEC,cAAF,EAAkBC,KAAlB,IAA4BjB,cAAc,EAAhD;AAEA;AACD;AACA;AACA;AACA;;AACC,QAAMkB,gBAAgB,GAAG,CAAC,CAAEP,IAA5B;AAEA;AACD;AACA;AACA;;AACC,QAAM,CAAEQ,KAAF,EAASC,QAAT,IAAsBjB,QAAQ,CAAE,KAAF,CAApC;AACA,QAAM,CAAEkB,KAAF,EAASC,QAAT,IAAsBnB,QAAQ,CAAE,KAAF,CAApC;AAEA;AACD;AACA;AACA;;AACC,QAAM;AAAEoB,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBP,KAA1B;AACA,QAAMQ,SAAS,GAAGvB,MAAM,CAAEsB,MAAF,CAAxB;AACA,QAAME,QAAQ,GAAGxB,MAAM,CAAEqB,KAAF,CAAvB;AAEA;AACD;AACA;AACA;;AACC,QAAMI,cAAc,GAAGzB,MAAM,EAA7B;;AAEA,QAAM0B,WAAW,GAAG,MAAM;AACzB;AACF;AACA;AACA;AACE,QAAKV,gBAAL,EAAwB;AACxBE,IAAAA,QAAQ,CAAE,KAAF,CAAR;AACAE,IAAAA,QAAQ,CAAE,KAAF,CAAR;AACA,GARD;;AAUA,QAAMO,mBAAmB,GAAG,MAAM;AACjC,QAAKF,cAAc,CAACG,OAApB,EAA8B;AAC7B1B,MAAAA,YAAY,CAAEuB,cAAc,CAACG,OAAjB,CAAZ;AACA;;AAEDH,IAAAA,cAAc,CAACG,OAAf,GAAyBzB,UAAU,CAAEuB,WAAF,EAAehB,WAAf,CAAnC;AACA,GAND;;AAQAX,EAAAA,SAAS,CAAE,MAAM;AAChB;AACF;AACA;AACA;AACE,UAAM8B,UAAU,GAAGR,KAAK,KAAK,IAAV,IAAkBC,MAAM,KAAK,IAAhD;AAEA,QAAK,CAAEO,UAAP,EAAoB;AAEpB,UAAMC,cAAc,GAAGT,KAAK,KAAKG,QAAQ,CAACI,OAA1C;AACA,UAAMG,eAAe,GAAGT,MAAM,KAAKC,SAAS,CAACK,OAA7C;AAEA,QAAK,CAAEE,cAAF,IAAoB,CAAEC,eAA3B,EAA6C;AAE7C;AACF;AACA;AACA;AACA;AACA;;AACE,QAAKV,KAAK,IAAI,CAAEG,QAAQ,CAACI,OAApB,IAA+BN,MAA/B,IAAyC,CAAEC,SAAS,CAACK,OAA1D,EAAoE;AACnEJ,MAAAA,QAAQ,CAACI,OAAT,GAAmBP,KAAnB;AACAE,MAAAA,SAAS,CAACK,OAAV,GAAoBN,MAApB;AACA;AACA;AAED;AACF;AACA;;;AACE,QAAKQ,cAAL,EAAsB;AACrBZ,MAAAA,QAAQ,CAAE,IAAF,CAAR;AACAM,MAAAA,QAAQ,CAACI,OAAT,GAAmBP,KAAnB;AACA;;AAED,QAAKU,eAAL,EAAuB;AACtBX,MAAAA,QAAQ,CAAE,IAAF,CAAR;AACAG,MAAAA,SAAS,CAACK,OAAV,GAAoBN,MAApB;AACA;;AAEDX,IAAAA,QAAQ,CAAE;AAAEU,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAF,CAAR;AACAK,IAAAA,mBAAmB;AACnB,GAzCQ,EAyCN,CAAEN,KAAF,EAASC,MAAT,CAzCM,CAAT;AA2CA,QAAMU,KAAK,GAAGC,YAAY,CAAE;AAC3BxB,IAAAA,IAD2B;AAE3Ba,IAAAA,MAF2B;AAG3BL,IAAAA,KAH2B;AAI3BE,IAAAA,KAJ2B;AAK3BP,IAAAA,QAL2B;AAM3BC,IAAAA,MAN2B;AAO3BQ,IAAAA;AAP2B,GAAF,CAA1B;AAUA,SAAO;AACNW,IAAAA,KADM;AAENlB,IAAAA;AAFM,GAAP;AAIA;;AAYD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASmB,YAAT,QAQ0C;AAAA,MARnB;AACtBxB,IAAAA,IADsB;AAEtBa,IAAAA,MAFsB;AAGtBL,IAAAA,KAAK,GAAG,KAHc;AAItBE,IAAAA,KAAK,GAAG,KAJc;AAKtBP,IAAAA,QAAQ,GAAGP,SAAS,CAACC,MALC;AAMtBO,IAAAA,MAAM,GAAG,KANa;AAOtBQ,IAAAA;AAPsB,GAQmB;AACzC,MAAK,CAAEJ,KAAF,IAAW,CAAEE,KAAlB,EAA0B,OAAOe,SAAP;AAE1B;AACD;AACA;AACA;;AACC,MAAKtB,QAAQ,KAAKP,SAAS,CAACE,MAA5B,EAAqC;AACpC,WAAQ,GAAGc,KAAO,MAAMC,MAAQ,EAAhC;AACA;AAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;;AACC,QAAMa,SAAS,GAAGtB,MAAM,GAAG,KAAH,GAAW,EAAnC;;AAEA,MAAKJ,IAAL,EAAY;AACX,QAAKA,IAAI,KAAK,GAAT,IAAgBQ,KAArB,EAA6B;AAC5B,aAAQ,GAAGI,KAAO,GAAGc,SAAW,EAAhC;AACA;;AACD,QAAK1B,IAAI,KAAK,GAAT,IAAgBU,KAArB,EAA6B;AAC5B,aAAQ,GAAGG,MAAQ,GAAGa,SAAW,EAAjC;AACA;AACD;;AAED,MAAKlB,KAAK,IAAIE,KAAd,EAAsB;AACrB,WAAQ,GAAGE,KAAO,MAAMC,MAAQ,EAAhC;AACA;;AACD,MAAKL,KAAL,EAAa;AACZ,WAAQ,GAAGI,KAAO,GAAGc,SAAW,EAAhC;AACA;;AACD,MAAKhB,KAAL,EAAa;AACZ,WAAQ,GAAGG,MAAQ,GAAGa,SAAW,EAAjC;AACA;;AAED,SAAOD,SAAP;AACA","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-module/responsive-wrapper/index.js CHANGED Viewed

@@ -11,12 +11,13 @@ import classnames from 'classnames';
 import { cloneElement, Children } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
-function ResponsiveWrapper({
-  naturalWidth,
-  naturalHeight,
-  children,
-  isInline = false
-}) {
+function ResponsiveWrapper(_ref) {
+  let {
+    naturalWidth,
+    naturalHeight,
+    children,
+    isInline = false
+  } = _ref;
   const [containerResizeListener, {
     width: containerWidth
   }] = useResizeObserver();

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.js"],"names":["classnames","cloneElement","Children","useResizeObserver","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,QAAvB,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,oBAAlC;;AAEA,SAASC,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,IAGFR,iBAAiB,EAHrB;;AAIA,MAAKD,QAAQ,CAACU,KAAT,CAAgBL,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMM,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZT,YAAY,GAAGM,cAAf,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMU,OAAO,GAAGP,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,cAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,cAAC,OAAD;AAAS,IAAA,KAAK,EAAGI;AAAjB,IAFD,EAGGZ,YAAY,CAAEM,QAAF,EAAY;AACzBS,IAAAA,SAAS,EAAEhB,UAAU,CACpB,wCADoB,EAEpBO,QAAQ,CAACU,KAAT,CAAeD,SAFK;AADI,GAAZ,CAHf,CADD;AAYA;;AAED,eAAeZ,iBAAf","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"]}
1	+ {"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.js"],"names":["classnames","cloneElement","Children","useResizeObserver","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,QAAvB,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,oBAAlC;;AAEA,SAASC,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,IAGFR,iBAAiB,EAHrB;;AAIA,MAAKD,QAAQ,CAACU,KAAT,CAAgBL,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMM,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZT,YAAY,GAAGM,cAAf,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMU,OAAO,GAAGP,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,cAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,cAAC,OAAD;AAAS,IAAA,KAAK,EAAGI;AAAjB,IAFD,EAGGZ,YAAY,CAAEM,QAAF,EAAY;AACzBS,IAAAA,SAAS,EAAEhB,UAAU,CACpB,wCADoB,EAEpBO,QAAQ,CAACU,KAAT,CAAeD,SAFK;AADI,GAAZ,CAHf,CADD;AAYA;;AAED,eAAeZ,iBAAf","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-module/sandbox/index.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/sandbox/index.js"],"names":["renderToString","useRef","useState","useEffect","useFocusableIframe","useMergeRefs","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"]}
1	+ {"version":3,"sources":["@wordpress/components/src/sandbox/index.js"],"names":["renderToString","useRef","useState","useEffect","useFocusableIframe","useMergeRefs","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"]}