@wordpress/components 28.9.0 → 28.11.0

package/build/range-control/styles/range-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_numberControl","_interopRequireDefault","_utils","_space","_EMOTION_STRINGIFIED_CSS_ERROR__","rangeHeightValue","railHeight","rangeHeight","css","height","minHeight","process","env","NODE_ENV","thumbSize","deprecatedHeight","__next40pxDefaultSize","Root","exports","_base","default","target","label","wrapperColor","color","COLORS","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","rtl","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","CONFIG","radiusFull","trackBackgroundColor","trackColor","Track","MarksWrapper","name","styles","map","toString","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","left","transform","thumbColor","theme","accent","ThumbWrapper","radiusRound","thumbFocus","isFocused","Thumb","elevationXSmall","InputRange","tooltipShow","show","opacity","_ref","_ref2","tooltipPosition","position","isBottom","Tooltip","radiusSmall","InputNumber","NumberControl","space","ActionRightWrapper"],"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"sourcesContent":["/**\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, rtl, CONFIG } from '../../utils';\nimport { space } from '../../utils/space';\n\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n\tRangeControlProps,\n} from '../types';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nconst deprecatedHeight = ( {\n\t__next40pxDefaultSize,\n}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) =>\n\t! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } );\n\ntype RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >;\nexport const Root = styled.div< RootProps >`\n\t-webkit-tap-highlight-color: transparent;\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n\tmin-height: 40px;\n\t/* TODO: remove after removing the __next40pxDefaultSize prop */\n\t${ deprecatedHeight };\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\treturn css( { marginBottom: marks ? 16 : undefined } );\n\t}\n\treturn '';\n};\n\nexport const Wrapper = styled.div< WrapperProps >`\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\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor || '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\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: ${ CONFIG.radiusFull };\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ CONFIG.radiusFull };\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\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: 9px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 22px;\n\twhite-space: nowrap;\n\n\t${ rtl( { left: 0 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( -50% )' },\n\t\t{ transform: 'translateX( 50% )' }\n\t) };\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.gray[ 400 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: ${ COLORS.theme.accent };\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\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: ${ CONFIG.radiusRound };\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 }: ThumbProps ) => {\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: ${ COLORS.theme.accent };\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: ${ CONFIG.radiusRound };\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< ThumbProps >`\n\talign-items: center;\n\tborder-radius: ${ CONFIG.radiusRound };\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\tbox-shadow: ${ CONFIG.elevationXSmall };\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 }: TooltipProps ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\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< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: ${ CONFIG.radiusSmall };\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\tuser-select: none;\n\tline-height: 1.4;\n\n\t@media not ( prefers-reduced-motion ) {\n\t\ttransition: opacity 120ms ease;\n\t}\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\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// @see: packages/components/src/h-stack\nexport const InputNumber = styled( NumberControl )`\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\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\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_numberControl","_interopRequireDefault","_utils","_space","_EMOTION_STRINGIFIED_CSS_ERROR__","rangeHeightValue","railHeight","rangeHeight","css","height","minHeight","process","env","NODE_ENV","thumbSize","deprecatedHeight","__next40pxDefaultSize","Root","exports","_base","default","target","label","wrapperColor","color","COLORS","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","shouldForwardProp","prop","includes","BeforeIconWrapper","rtl","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","CONFIG","radiusFull","trackBackgroundColor","trackColor","Track","MarksWrapper","name","styles","map","toString","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","left","transform","thumbColor","theme","accent","ThumbWrapper","radiusRound","thumbFocus","isFocused","Thumb","elevationXSmall","InputRange","tooltipShow","show","_ref","_ref2","tooltipPosition","position","isBottom","Tooltip","radiusSmall","InputNumber","NumberControl","space","ActionRightWrapper"],"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"sourcesContent":["/**\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, rtl, CONFIG } from '../../utils';\nimport { space } from '../../utils/space';\n\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n\tRangeControlProps,\n} from '../types';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nconst deprecatedHeight = ( {\n\t__next40pxDefaultSize,\n}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) =>\n\t! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } );\n\ntype RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >;\nexport const Root = styled.div< RootProps >`\n\t-webkit-tap-highlight-color: transparent;\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n\tmin-height: 40px;\n\t/* TODO: remove after removing the __next40pxDefaultSize prop */\n\t${ deprecatedHeight };\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\treturn css( { marginBottom: marks ? 16 : undefined } );\n\t}\n\treturn '';\n};\n\nexport const Wrapper = styled( 'div', {\n\tshouldForwardProp: ( prop: string ) =>\n\t\t! [ 'color', '__nextHasNoMarginBottom', 'marks' ].includes( prop ),\n} )< WrapperProps >`\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\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor || '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\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: ${ CONFIG.radiusFull };\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ CONFIG.radiusFull };\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\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: 9px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 22px;\n\twhite-space: nowrap;\n\n\t${ rtl( { left: 0 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( -50% )' },\n\t\t{ transform: 'translateX( 50% )' }\n\t) };\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.gray[ 400 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: ${ COLORS.theme.accent };\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\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: ${ CONFIG.radiusRound };\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 }: ThumbProps ) => {\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: ${ COLORS.theme.accent };\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: ${ CONFIG.radiusRound };\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< ThumbProps >`\n\talign-items: center;\n\tborder-radius: ${ CONFIG.radiusRound };\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\tbox-shadow: ${ CONFIG.elevationXSmall };\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 }: TooltipProps ) => {\n\treturn css`\n\t\tdisplay: ${ show ? 'inline-block' : 'none' };\n\t\topacity: ${ show ? 1 : 0 };\n\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition:\n\t\t\t\topacity 120ms ease,\n\t\t\t\tdisplay 120ms ease allow-discrete;\n\t\t}\n\n\t\t@starting-style {\n\t\t\topacity: 0;\n\t\t}\n\t`;\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\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< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: ${ CONFIG.radiusSmall };\n\tcolor: white;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\n\t${ tooltipPosition };\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// @see: packages/components/src/h-stack\nexport const InputNumber = styled( NumberControl )`\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\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\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"],"mappings":"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","ignoreList":[]}

package/build/range-control/tooltip.js

@@ -44,7 +44,7 @@ function SimpleTooltip(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeControlStyles.Tooltip, {
     ...restProps,
-    "aria-hidden": show,
+    "aria-hidden": "false",
     className: classes,
     position: position,
     show: show,

package/build/range-control/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_rangeControlStyles","_jsxRuntime","SimpleTooltip","props","className","inputRef","tooltipPosition","show","style","value","renderTooltipContent","v","zIndex","restProps","position","useTooltipPosition","classes","clsx","styles","jsx","Tooltip","role","children","setPosition","useState","setTooltipPosition","useCallback","current","useEffect","window","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/range-control/tooltip.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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\nimport type { TooltipProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function SimpleTooltip(\n\tprops: WordPressComponentProps< TooltipProps, 'span' >\n) {\n\tconst {\n\t\tclassName,\n\t\tinputRef,\n\t\ttooltipPosition,\n\t\tshow = false,\n\t\tstyle = {},\n\t\tvalue = 0,\n\t\trenderTooltipContent = ( v ) => v,\n\t\tzIndex = 100,\n\t\t...restProps\n\t} = props;\n\tconst position = useTooltipPosition( { inputRef, tooltipPosition } );\n\tconst classes = clsx( '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 }: TooltipProps ) {\n\tconst [ position, setPosition ] = useState< string >();\n\n\tconst setTooltipPosition = useCallback( () => {\n\t\tif ( inputRef && inputRef.current ) {\n\t\t\tsetPosition( tooltipPosition );\n\t\t}\n\t}, [ tooltipPosition, inputRef ] );\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"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,mBAAA,GAAAF,OAAA;AAAwD,IAAAG,WAAA,GAAAH,OAAA;AAbxD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAMe,SAASI,aAAaA,CACpCC,KAAsD,EACrD;EACD,MAAM;IACLC,SAAS;IACTC,QAAQ;IACRC,eAAe;IACfC,IAAI,GAAG,KAAK;IACZC,KAAK,GAAG,CAAC,CAAC;IACVC,KAAK,GAAG,CAAC;IACTC,oBAAoB,GAAKC,CAAC,IAAMA,CAAC;IACjCC,MAAM,GAAG,GAAG;IACZ,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,QAAQ,GAAGC,kBAAkB,CAAE;IAAEV,QAAQ;IAAEC;EAAgB,CAAE,CAAC;EACpE,MAAMU,OAAO,GAAG,IAAAC,aAAI,EAAE,2BAA2B,EAAEb,SAAU,CAAC;EAC9D,MAAMc,MAAM,GAAG;IACd,GAAGV,KAAK;IACRI;EACD,CAAC;EAED,oBACC,IAAAX,WAAA,CAAAkB,GAAA,EAACnB,mBAAA,CAAAoB,OAAO;IAAA,GACFP,SAAS;IACd,eAAcN,IAAM;IACpBH,SAAS,EAAGY,OAAS;IACrBF,QAAQ,EAAGA,QAAU;IACrBP,IAAI,EAAGA,IAAM;IACbc,IAAI,EAAC,SAAS;IACdb,KAAK,EAAGU,MAAQ;IAAAI,QAAA,EAEdZ,oBAAoB,CAAED,KAAM;EAAC,CACvB,CAAC;AAEZ;AAEA,SAASM,kBAAkBA,CAAE;EAAEV,QAAQ;EAAEC;AAA8B,CAAC,EAAG;EAC1E,MAAM,CAAEQ,QAAQ,EAAES,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAW,CAAC;EAEtD,MAAMC,kBAAkB,GAAG,IAAAC,oBAAW,EAAE,MAAM;IAC7C,IAAKrB,QAAQ,IAAIA,QAAQ,CAACsB,OAAO,EAAG;MACnCJ,WAAW,CAAEjB,eAAgB,CAAC;IAC/B;EACD,CAAC,EAAE,CAAEA,eAAe,EAAED,QAAQ,CAAG,CAAC;EAElC,IAAAuB,kBAAS,EAAE,MAAM;IAChBH,kBAAkB,CAAC,CAAC;EACrB,CAAC,EAAE,CAAEA,kBAAkB,CAAG,CAAC;EAE3B,IAAAG,kBAAS,EAAE,MAAM;IAChBC,MAAM,CAACC,gBAAgB,CAAE,QAAQ,EAAEL,kBAAmB,CAAC;IAEvD,OAAO,MAAM;MACZI,MAAM,CAACE,mBAAmB,CAAE,QAAQ,EAAEN,kBAAmB,CAAC;IAC3D,CAAC;EACF,CAAE,CAAC;EAEH,OAAOX,QAAQ;AAChB","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_rangeControlStyles","_jsxRuntime","SimpleTooltip","props","className","inputRef","tooltipPosition","show","style","value","renderTooltipContent","v","zIndex","restProps","position","useTooltipPosition","classes","clsx","styles","jsx","Tooltip","role","children","setPosition","useState","setTooltipPosition","useCallback","current","useEffect","window","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/range-control/tooltip.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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\nimport type { TooltipProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function SimpleTooltip(\n\tprops: WordPressComponentProps< TooltipProps, 'span' >\n) {\n\tconst {\n\t\tclassName,\n\t\tinputRef,\n\t\ttooltipPosition,\n\t\tshow = false,\n\t\tstyle = {},\n\t\tvalue = 0,\n\t\trenderTooltipContent = ( v ) => v,\n\t\tzIndex = 100,\n\t\t...restProps\n\t} = props;\n\tconst position = useTooltipPosition( { inputRef, tooltipPosition } );\n\tconst classes = clsx( '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=\"false\"\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 }: TooltipProps ) {\n\tconst [ position, setPosition ] = useState< string >();\n\n\tconst setTooltipPosition = useCallback( () => {\n\t\tif ( inputRef && inputRef.current ) {\n\t\t\tsetPosition( tooltipPosition );\n\t\t}\n\t}, [ tooltipPosition, inputRef ] );\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"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,mBAAA,GAAAF,OAAA;AAAwD,IAAAG,WAAA,GAAAH,OAAA;AAbxD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAMe,SAASI,aAAaA,CACpCC,KAAsD,EACrD;EACD,MAAM;IACLC,SAAS;IACTC,QAAQ;IACRC,eAAe;IACfC,IAAI,GAAG,KAAK;IACZC,KAAK,GAAG,CAAC,CAAC;IACVC,KAAK,GAAG,CAAC;IACTC,oBAAoB,GAAKC,CAAC,IAAMA,CAAC;IACjCC,MAAM,GAAG,GAAG;IACZ,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,QAAQ,GAAGC,kBAAkB,CAAE;IAAEV,QAAQ;IAAEC;EAAgB,CAAE,CAAC;EACpE,MAAMU,OAAO,GAAG,IAAAC,aAAI,EAAE,2BAA2B,EAAEb,SAAU,CAAC;EAC9D,MAAMc,MAAM,GAAG;IACd,GAAGV,KAAK;IACRI;EACD,CAAC;EAED,oBACC,IAAAX,WAAA,CAAAkB,GAAA,EAACnB,mBAAA,CAAAoB,OAAO;IAAA,GACFP,SAAS;IACd,eAAY,OAAO;IACnBT,SAAS,EAAGY,OAAS;IACrBF,QAAQ,EAAGA,QAAU;IACrBP,IAAI,EAAGA,IAAM;IACbc,IAAI,EAAC,SAAS;IACdb,KAAK,EAAGU,MAAQ;IAAAI,QAAA,EAEdZ,oBAAoB,CAAED,KAAM;EAAC,CACvB,CAAC;AAEZ;AAEA,SAASM,kBAAkBA,CAAE;EAAEV,QAAQ;EAAEC;AAA8B,CAAC,EAAG;EAC1E,MAAM,CAAEQ,QAAQ,EAAES,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAW,CAAC;EAEtD,MAAMC,kBAAkB,GAAG,IAAAC,oBAAW,EAAE,MAAM;IAC7C,IAAKrB,QAAQ,IAAIA,QAAQ,CAACsB,OAAO,EAAG;MACnCJ,WAAW,CAAEjB,eAAgB,CAAC;IAC/B;EACD,CAAC,EAAE,CAAEA,eAAe,EAAED,QAAQ,CAAG,CAAC;EAElC,IAAAuB,kBAAS,EAAE,MAAM;IAChBH,kBAAkB,CAAC,CAAC;EACrB,CAAC,EAAE,CAAEA,kBAAkB,CAAG,CAAC;EAE3B,IAAAG,kBAAS,EAAE,MAAM;IAChBC,MAAM,CAACC,gBAAgB,CAAE,QAAQ,EAAEL,kBAAmB,CAAC;IAEvD,OAAO,MAAM;MACZI,MAAM,CAACE,mBAAmB,CAAE,QAAQ,EAAEN,kBAAmB,CAAC;IAC3D,CAAC;EACF,CAAE,CAAC;EAEH,OAAOX,QAAQ;AAChB","ignoreList":[]}

package/build/range-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_hooks","_math","floatClamp","value","min","max","parseFloat","clamp","useControlledRangeValue","settings","valueProp","initial","state","setInternalState","useControlledState","fallback","setState","useCallback","nextValue"],"sources":["@wordpress/components/src/range-control/utils.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useControlledState } from '../utils/hooks';\nimport { clamp } from '../utils/math';\n\nimport type { UseControlledRangeValueArgs } from './types';\n\n/**\n * A float supported clamp function for a specific value.\n *\n * @param value The value to clamp.\n * @param min   The minimum value.\n * @param max   The maximum value.\n *\n * @return A (float) number\n */\nexport function floatClamp( value: number | null, min: number, max: number ) {\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 settings\n * @return The controlled value and the value setter.\n */\nexport function useControlledRangeValue(\n\tsettings: UseControlledRangeValueArgs\n) {\n\tconst { min, max, value: valueProp, initial } = settings;\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{\n\t\t\tinitial: floatClamp( initial ?? null, min, max ),\n\t\t\tfallback: null,\n\t\t}\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue: number | null ) => {\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, setInternalState ]\n\t);\n\n\t// `state` can't be an empty string because we specified a fallback value of\n\t// `null` in `useControlledState`\n\treturn [ state as Exclude< typeof state, '' >, setState ] as const;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,UAAUA,CAAEC,KAAoB,EAAEC,GAAW,EAAEC,GAAW,EAAG;EAC5E,IAAK,OAAOF,KAAK,KAAK,QAAQ,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OAAOG,UAAU,CAAG,GAAG,IAAAC,WAAK,EAAEJ,KAAK,EAAEC,GAAG,EAAEC,GAAI,CAAG,EAAE,CAAC;AACrD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,uBAAuBA,CACtCC,QAAqC,EACpC;EACD,MAAM;IAAEL,GAAG;IAAEC,GAAG;IAAEF,KAAK,EAAEO,SAAS;IAAEC;EAAQ,CAAC,GAAGF,QAAQ;EACxD,MAAM,CAAEG,KAAK,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,yBAAkB,EACrDZ,UAAU,CAAEQ,SAAS,EAAEN,GAAG,EAAEC,GAAI,CAAC,EACjC;IACCM,OAAO,EAAET,UAAU,CAAES,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,IAAI,EAAEP,GAAG,EAAEC,GAAI,CAAC;IAChDU,QAAQ,EAAE;EACX,CACD,CAAC;EAED,MAAMC,QAAQ,GAAG,IAAAC,oBAAW,EACzBC,SAAwB,IAAM;IAC/B,IAAKA,SAAS,KAAK,IAAI,EAAG;MACzBL,gBAAgB,CAAE,IAAK,CAAC;IACzB,CAAC,MAAM;MACNA,gBAAgB,CAAEX,UAAU,CAAEgB,SAAS,EAAEd,GAAG,EAAEC,GAAI,CAAE,CAAC;IACtD;EACD,CAAC,EACD,CAAED,GAAG,EAAEC,GAAG,EAAEQ,gBAAgB,CAC7B,CAAC;;EAED;EACA;EACA,OAAO,CAAED,KAAK,EAAiCI,QAAQ,CAAE;AAC1D","ignoreList":[]}
+{"version":3,"names":["_element","require","_hooks","_math","floatClamp","value","min","max","parseFloat","clamp","useControlledRangeValue","settings","valueProp","initial","state","setInternalState","useControlledState","fallback","setState","useCallback","nextValue"],"sources":["@wordpress/components/src/range-control/utils.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useControlledState } from '../utils/hooks';\nimport { clamp } from '../utils/math';\n\nimport type { UseControlledRangeValueArgs } from './types';\n\n/**\n * A float supported clamp function for a specific value.\n *\n * @param value The value to clamp.\n * @param min   The minimum value.\n * @param max   The maximum value.\n *\n * @return A (float) number\n */\nexport function floatClamp( value: number | null, min: number, max: number ) {\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 settings\n * @return The controlled value and the value setter.\n */\nexport function useControlledRangeValue(\n\tsettings: UseControlledRangeValueArgs\n) {\n\tconst { min, max, value: valueProp, initial } = settings;\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{\n\t\t\tinitial: floatClamp( initial ?? null, min, max ),\n\t\t\tfallback: null,\n\t\t}\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue: number | null ) => {\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, setInternalState ]\n\t);\n\n\t// `state` can't be an empty string because we specified a fallback value of\n\t// `null` in `useControlledState`\n\treturn [ state as Exclude< typeof state, '' >, setState ] as const;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,UAAUA,CAAEC,KAAoB,EAAEC,GAAW,EAAEC,GAAW,EAAG;EAC5E,IAAK,OAAOF,KAAK,KAAK,QAAQ,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OAAOG,UAAU,CAAE,GAAI,IAAAC,WAAK,EAAEJ,KAAK,EAAEC,GAAG,EAAEC,GAAI,CAAC,EAAI,CAAC;AACrD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,uBAAuBA,CACtCC,QAAqC,EACpC;EACD,MAAM;IAAEL,GAAG;IAAEC,GAAG;IAAEF,KAAK,EAAEO,SAAS;IAAEC;EAAQ,CAAC,GAAGF,QAAQ;EACxD,MAAM,CAAEG,KAAK,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,yBAAkB,EACrDZ,UAAU,CAAEQ,SAAS,EAAEN,GAAG,EAAEC,GAAI,CAAC,EACjC;IACCM,OAAO,EAAET,UAAU,CAAES,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,IAAI,EAAEP,GAAG,EAAEC,GAAI,CAAC;IAChDU,QAAQ,EAAE;EACX,CACD,CAAC;EAED,MAAMC,QAAQ,GAAG,IAAAC,oBAAW,EACzBC,SAAwB,IAAM;IAC/B,IAAKA,SAAS,KAAK,IAAI,EAAG;MACzBL,gBAAgB,CAAE,IAAK,CAAC;IACzB,CAAC,MAAM;MACNA,gBAAgB,CAAEX,UAAU,CAAEgB,SAAS,EAAEd,GAAG,EAAEC,GAAI,CAAE,CAAC;IACtD;EACD,CAAC,EACD,CAAED,GAAG,EAAEC,GAAG,EAAEQ,gBAAgB,CAC7B,CAAC;;EAED;EACA;EACA,OAAO,CAAED,KAAK,EAAiCI,QAAQ,CAAE;AAC1D","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_utils","_resizeTooltip","_jsxRuntime","CORNER_OFFSET","CURSOR_OFFSET_TOP","Label","label","position","POSITIONS","corner","zIndex","props","ref","showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","isRTL","jsx","TooltipWrapper","className","children","Tooltip","LabelText","as","ForwardedComponent","forwardRef","_default","exports","default"],"sources":["@wordpress/components/src/resizable-box/resize-tooltip/label.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { Position } from './utils';\nimport { POSITIONS } from './utils';\nimport {\n\tTooltipWrapper,\n\tTooltip,\n\tLabelText,\n} from './styles/resize-tooltip.styles';\n\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\n\ntype LabelProps = React.DetailedHTMLProps<\n\tReact.HTMLAttributes< HTMLDivElement >,\n\tHTMLDivElement\n> & {\n\tlabel?: string;\n\tposition: Position;\n\tzIndex: number;\n};\n\nfunction Label(\n\t{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element | null {\n\tconst showLabel = !! label;\n\n\tconst isBottom = position === POSITIONS.bottom;\n\tconst isCorner = position === POSITIONS.corner;\n\n\tif ( ! showLabel ) {\n\t\treturn null;\n\t}\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"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAIwC,IAAAI,WAAA,GAAAJ,OAAA;AApBxC;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASA,MAAMK,aAAa,GAAG,CAAC;AACvB,MAAMC,iBAAiB,GAAGD,aAAa,GAAG,GAAG;AAW7C,SAASE,KAAKA,CACb;EAAEC,KAAK;EAAEC,QAAQ,GAAGC,gBAAS,CAACC,MAAM;EAAEC,MAAM,GAAG,IAAI;EAAE,GAAGC;AAAkB,CAAC,EAC3EC,GAAmC,EACd;EACrB,MAAMC,SAAS,GAAG,CAAC,CAAEP,KAAK;EAE1B,MAAMQ,QAAQ,GAAGP,QAAQ,KAAKC,gBAAS,CAACO,MAAM;EAC9C,MAAMC,QAAQ,GAAGT,QAAQ,KAAKC,gBAAS,CAACC,MAAM;EAE9C,IAAK,CAAEI,SAAS,EAAG;IAClB,OAAO,IAAI;EACZ;EAEA,IAAII,KAA0B,GAAG;IAChCC,OAAO,EAAEL,SAAS,GAAG,CAAC,GAAGM,SAAS;IAClCT;EACD,CAAC;EAED,IAAIU,UAAU,GAAG,CAAC,CAAC;EAEnB,IAAKN,QAAQ,EAAG;IACfG,KAAK,GAAG;MACP,GAAGA,KAAK;MACRV,QAAQ,EAAE,UAAU;MACpBQ,MAAM,EAAEX,iBAAiB,GAAG,CAAC,CAAC;MAC9BiB,IAAI,EAAE,KAAK;MACXC,SAAS,EAAE;IACZ,CAAC;IAEDF,UAAU,GAAG;MACZE,SAAS,EAAG;IACb,CAAC;EACF;EAEA,IAAKN,QAAQ,EAAG;IACfC,KAAK,GAAG;MACP,GAAGA,KAAK;MACRV,QAAQ,EAAE,UAAU;MACpBgB,GAAG,EAAEpB,aAAa;MAClBqB,KAAK,EAAE,IAAAC,WAAK,EAAC,CAAC,GAAGN,SAAS,GAAGhB,aAAa;MAC1CkB,IAAI,EAAE,IAAAI,WAAK,EAAC,CAAC,GAAGtB,aAAa,GAAGgB;IACjC,CAAC;EACF;EAEA,oBACC,IAAAjB,WAAA,CAAAwB,GAAA,EAACzB,cAAA,CAAA0B,cAAc;IACd,eAAY,MAAM;IAClBC,SAAS,EAAC,+CAA+C;IACzDhB,GAAG,EAAGA,GAAK;IACXK,KAAK,EAAGA,KAAO;IAAA,GACVN,KAAK;IAAAkB,QAAA,eAEV,IAAA3B,WAAA,CAAAwB,GAAA,EAACzB,cAAA,CAAA6B,OAAO;MACPF,SAAS,EAAC,uCAAuC;MACjDX,KAAK,EAAGG,UAAY;MAAAS,QAAA,eAEpB,IAAA3B,WAAA,CAAAwB,GAAA,EAACzB,cAAA,CAAA8B,SAAS;QAACC,EAAE,EAAC,MAAM;QAAAH,QAAA,EAAGvB;MAAK,CAAa;IAAC,CAClC;EAAC,CACK,CAAC;AAEnB;AAEA,MAAM2B,kBAAkB,GAAG,IAAAC,mBAAU,EAAE7B,KAAM,CAAC;AAAC,IAAA8B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEhCJ,kBAAkB","ignoreList":[]}
+{"version":3,"names":["_element","require","_i18n","_utils","_resizeTooltip","_jsxRuntime","CORNER_OFFSET","CURSOR_OFFSET_TOP","Label","label","position","POSITIONS","corner","zIndex","props","ref","showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","isRTL","jsx","TooltipWrapper","className","children","Tooltip","LabelText","as","ForwardedComponent","forwardRef","_default","exports","default"],"sources":["@wordpress/components/src/resizable-box/resize-tooltip/label.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { Position } from './utils';\nimport { POSITIONS } from './utils';\nimport {\n\tTooltipWrapper,\n\tTooltip,\n\tLabelText,\n} from './styles/resize-tooltip.styles';\n\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\n\ntype LabelProps = React.DetailedHTMLProps<\n\tReact.HTMLAttributes< HTMLDivElement >,\n\tHTMLDivElement\n> & {\n\tlabel?: string;\n\tposition: Position;\n\tzIndex: number;\n};\n\nfunction Label(\n\t{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,\n\tref: ForwardedRef< HTMLDivElement >\n): JSX.Element | null {\n\tconst showLabel = !! label;\n\n\tconst isBottom = position === POSITIONS.bottom;\n\tconst isCorner = position === POSITIONS.corner;\n\n\tif ( ! showLabel ) {\n\t\treturn null;\n\t}\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"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAIwC,IAAAI,WAAA,GAAAJ,OAAA;AApBxC;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASA,MAAMK,aAAa,GAAG,CAAC;AACvB,MAAMC,iBAAiB,GAAGD,aAAa,GAAG,GAAG;AAW7C,SAASE,KAAKA,CACb;EAAEC,KAAK;EAAEC,QAAQ,GAAGC,gBAAS,CAACC,MAAM;EAAEC,MAAM,GAAG,IAAI;EAAE,GAAGC;AAAkB,CAAC,EAC3EC,GAAmC,EACd;EACrB,MAAMC,SAAS,GAAG,CAAC,CAAEP,KAAK;EAE1B,MAAMQ,QAAQ,GAAGP,QAAQ,KAAKC,gBAAS,CAACO,MAAM;EAC9C,MAAMC,QAAQ,GAAGT,QAAQ,KAAKC,gBAAS,CAACC,MAAM;EAE9C,IAAK,CAAEI,SAAS,EAAG;IAClB,OAAO,IAAI;EACZ;EAEA,IAAII,KAA0B,GAAG;IAChCC,OAAO,EAAEL,SAAS,GAAG,CAAC,GAAGM,SAAS;IAClCT;EACD,CAAC;EAED,IAAIU,UAAU,GAAG,CAAC,CAAC;EAEnB,IAAKN,QAAQ,EAAG;IACfG,KAAK,GAAG;MACP,GAAGA,KAAK;MACRV,QAAQ,EAAE,UAAU;MACpBQ,MAAM,EAAEX,iBAAiB,GAAG,CAAC,CAAC;MAC9BiB,IAAI,EAAE,KAAK;MACXC,SAAS,EAAE;IACZ,CAAC;IAEDF,UAAU,GAAG;MACZE,SAAS,EAAE;IACZ,CAAC;EACF;EAEA,IAAKN,QAAQ,EAAG;IACfC,KAAK,GAAG;MACP,GAAGA,KAAK;MACRV,QAAQ,EAAE,UAAU;MACpBgB,GAAG,EAAEpB,aAAa;MAClBqB,KAAK,EAAE,IAAAC,WAAK,EAAC,CAAC,GAAGN,SAAS,GAAGhB,aAAa;MAC1CkB,IAAI,EAAE,IAAAI,WAAK,EAAC,CAAC,GAAGtB,aAAa,GAAGgB;IACjC,CAAC;EACF;EAEA,oBACC,IAAAjB,WAAA,CAAAwB,GAAA,EAACzB,cAAA,CAAA0B,cAAc;IACd,eAAY,MAAM;IAClBC,SAAS,EAAC,+CAA+C;IACzDhB,GAAG,EAAGA,GAAK;IACXK,KAAK,EAAGA,KAAO;IAAA,GACVN,KAAK;IAAAkB,QAAA,eAEV,IAAA3B,WAAA,CAAAwB,GAAA,EAACzB,cAAA,CAAA6B,OAAO;MACPF,SAAS,EAAC,uCAAuC;MACjDX,KAAK,EAAGG,UAAY;MAAAS,QAAA,eAEpB,IAAA3B,WAAA,CAAAwB,GAAA,EAACzB,cAAA,CAAA8B,SAAS;QAACC,EAAE,EAAC,MAAM;QAAAH,QAAA,EAAGvB;MAAK,CAAa;IAAC,CAClC;EAAC,CACK,CAAC;AAEnB;AAEA,MAAM2B,kBAAkB,GAAG,IAAAC,mBAAU,EAAE7B,KAAM,CAAC;AAAC,IAAA8B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEhCJ,kBAAkB","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_jsxRuntime","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","Children","count","TagName","aspectRatio","jsx","className","cloneElement","clsx","props","style","_default","exports","default"],"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveWrapperProps } from './types';\n\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n}: ResponsiveWrapperProps ) {\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\n\tconst TagName = isInline ? 'span' : 'div';\n\tlet aspectRatio;\n\tif ( naturalWidth && naturalHeight ) {\n\t\taspectRatio = `${ naturalWidth } / ${ naturalHeight }`;\n\t}\n\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t<div>\n\t\t\t\t{ cloneElement( children, {\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\t\tchildren.props.className\n\t\t\t\t\t),\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t...children.props.style,\n\t\t\t\t\t\taspectRatio,\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAA4D,IAAAE,WAAA,GAAAF,OAAA;AAR5D;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,iBAAiBA,CAAE;EAC3BC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC,QAAQ,GAAG;AACY,CAAC,EAAG;EAC3B,IAAKC,iBAAQ,CAACC,KAAK,CAAEH,QAAS,CAAC,KAAK,CAAC,EAAG;IACvC,OAAO,IAAI;EACZ;EAEA,MAAMI,OAAO,GAAGH,QAAQ,GAAG,MAAM,GAAG,KAAK;EACzC,IAAII,WAAW;EACf,IAAKP,YAAY,IAAIC,aAAa,EAAG;IACpCM,WAAW,GAAI,GAAGP,YAAc,MAAMC,aAAe,EAAC;EACvD;EAEA,oBACC,IAAAH,WAAA,CAAAU,GAAA,EAACF,OAAO;IAACG,SAAS,EAAC,+BAA+B;IAAAP,QAAA,eACjD,IAAAJ,WAAA,CAAAU,GAAA;MAAAN,QAAA,EACG,IAAAQ,qBAAY,EAAER,QAAQ,EAAE;QACzBO,SAAS,EAAE,IAAAE,aAAI,EACd,wCAAwC,EACxCT,QAAQ,CAACU,KAAK,CAACH,SAChB,CAAC;QACDI,KAAK,EAAE;UACN,GAAGX,QAAQ,CAACU,KAAK,CAACC,KAAK;UACvBN;QACD;MACD,CAAE;IAAC,CACC;EAAC,CACE,CAAC;AAEZ;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcjB,iBAAiB","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_jsxRuntime","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","Children","count","TagName","aspectRatio","jsx","className","cloneElement","clsx","props","style","_default","exports","default"],"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveWrapperProps } from './types';\n\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n}: ResponsiveWrapperProps ) {\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\n\tconst TagName = isInline ? 'span' : 'div';\n\tlet aspectRatio;\n\tif ( naturalWidth && naturalHeight ) {\n\t\taspectRatio = `${ naturalWidth } / ${ naturalHeight }`;\n\t}\n\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t<div>\n\t\t\t\t{ cloneElement( children, {\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\t\tchildren.props.className\n\t\t\t\t\t),\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t...children.props.style,\n\t\t\t\t\t\taspectRatio,\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAA4D,IAAAE,WAAA,GAAAF,OAAA;AAR5D;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,iBAAiBA,CAAE;EAC3BC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC,QAAQ,GAAG;AACY,CAAC,EAAG;EAC3B,IAAKC,iBAAQ,CAACC,KAAK,CAAEH,QAAS,CAAC,KAAK,CAAC,EAAG;IACvC,OAAO,IAAI;EACZ;EAEA,MAAMI,OAAO,GAAGH,QAAQ,GAAG,MAAM,GAAG,KAAK;EACzC,IAAII,WAAW;EACf,IAAKP,YAAY,IAAIC,aAAa,EAAG;IACpCM,WAAW,GAAG,GAAIP,YAAY,MAAQC,aAAa,EAAG;EACvD;EAEA,oBACC,IAAAH,WAAA,CAAAU,GAAA,EAACF,OAAO;IAACG,SAAS,EAAC,+BAA+B;IAAAP,QAAA,eACjD,IAAAJ,WAAA,CAAAU,GAAA;MAAAN,QAAA,EACG,IAAAQ,qBAAY,EAAER,QAAQ,EAAE;QACzBO,SAAS,EAAE,IAAAE,aAAI,EACd,wCAAwC,EACxCT,QAAQ,CAACU,KAAK,CAACH,SAChB,CAAC;QACDI,KAAK,EAAE;UACN,GAAGX,QAAQ,CAACU,KAAK,CAACC,KAAK;UACvBN;QACD;MACD,CAAE;IAAC,CACC;EAAC,CACE,CAAC;AAEZ;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcjB,iBAAiB","ignoreList":[]}

package/build/sandbox/index.js

@@ -219,21 +219,18 @@ function SandBox({
       iframe?.removeEventListener('load', tryNoForceSandBox, false);
       defaultView?.removeEventListener('message', checkMessageForResize);
     };
-    // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+    // Passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   (0, _element.useEffect)(() => {
     trySandBox();
-    // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+    // Passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [title, styles, scripts]);
   (0, _element.useEffect)(() => {
     trySandBox(true);
-    // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+    // Passing `exhaustive-deps` will likely involve a more detailed refactor.
     // See https://github.com/WordPress/gutenberg/pull/44378
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [html, type]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
     ref: (0, _compose.useMergeRefs)([ref, (0, _compose.useFocusableIframe)()]),

package/build/sandbox/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_jsxRuntime","observeAndResizeJS","MutationObserver","window","document","body","parent","sendResize","clientBoundingRect","getBoundingClientRect","postMessage","action","width","height","observer","observe","attributes","attributeOldValue","characterData","characterDataOldValue","childList","subtree","addEventListener","removeViewportStyles","ruleOrNode","style","forEach","test","Array","prototype","call","querySelectorAll","styleSheets","stylesheet","cssRules","rules","position","setAttribute","SandBox","html","title","type","styles","scripts","onFocus","tabIndex","ref","useRef","setWidth","useState","setHeight","isFrameAccessible","current","contentDocument","e","trySandBox","forceRerender","ownerDocument","getAttribute","htmlDoc","jsxs","lang","documentElement","className","children","jsx","dangerouslySetInnerHTML","__html","map","i","toString","src","open","write","renderToString","close","useEffect","tryNoForceSandBox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","defaultView","removeEventListener","useMergeRefs","useFocusableIframe","sandbox","Math","ceil","_default","exports","default"],"sources":["@wordpress/components/src/sandbox/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { SandBoxProps } from './types';\n\nconst observeAndResizeJS = function () {\n\tconst { MutationObserver } = window;\n\n\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\treturn;\n\t}\n\n\tfunction sendResize() {\n\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t},\n\t\t\t'*'\n\t\t);\n\t}\n\n\tconst observer = new MutationObserver( sendResize );\n\tobserver.observe( document.body, {\n\t\tattributes: true,\n\t\tattributeOldValue: false,\n\t\tcharacterData: true,\n\t\tcharacterDataOldValue: false,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t} );\n\n\twindow.addEventListener( 'load', sendResize, true );\n\n\t// Hack: Remove viewport unit styles, as these are relative\n\t// the iframe root and interfere with our mechanism for\n\t// determining the unconstrained page bounds.\n\tfunction removeViewportStyles( ruleOrNode: ElementCSSInlineStyle ) {\n\t\tif ( ruleOrNode.style ) {\n\t\t\t(\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ] as const\n\t\t\t ).forEach( function ( style ) {\n\t\t\t\tif (\n\t\t\t\t\t/^\\\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(\n\t\t\t\t\t\truleOrNode.style[ style ]\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\tArray.prototype.forEach.call(\n\t\tdocument.querySelectorAll( '[style]' ),\n\t\tremoveViewportStyles\n\t);\n\tArray.prototype.forEach.call(\n\t\tdocument.styleSheets,\n\t\tfunction ( stylesheet ) {\n\t\t\tArray.prototype.forEach.call(\n\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\tremoveViewportStyles\n\t\t\t);\n\t\t}\n\t);\n\n\tdocument.body.style.position = 'absolute';\n\tdocument.body.style.width = '100%';\n\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\tsendResize();\n\n\t// Resize events can change the width of elements with 100% width, but we don't\n\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\twindow.addEventListener( 'resize', sendResize, true );\n};\n\n// TODO: These styles shouldn't be coupled with WordPress.\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\n/**\n * This component provides an isolated environment for arbitrary HTML via iframes.\n *\n * ```jsx\n * import { SandBox } from '@wordpress/components';\n *\n * const MySandBox = () => (\n * \t<SandBox html=\"<p>Content</p>\" title=\"SandBox\" type=\"embed\" />\n * );\n * ```\n */\nfunction SandBox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n\ttabIndex,\n}: SandBoxProps ) {\n\tconst ref = useRef< HTMLIFrameElement >();\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ height, setHeight ] = useState( 0 );\n\n\tfunction isFrameAccessible() {\n\t\ttry {\n\t\t\treturn !! ref.current?.contentDocument?.body;\n\t\t} catch ( e ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tfunction trySandBox( forceRerender = false ) {\n\t\tif ( ! isFrameAccessible() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { contentDocument, ownerDocument } =\n\t\t\tref.current as HTMLIFrameElement & {\n\t\t\t\tcontentDocument: Document;\n\t\t\t};\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !==\n\t\t\t\tcontentDocument?.body.getAttribute(\n\t\t\t\t\t'data-resizable-iframe-connected'\n\t\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Put the html snippet into a html document, and then write it to the iframe's document\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html\n\t\t\t\tlang={ ownerDocument.documentElement.lang }\n\t\t\t\tclassName={ type }\n\t\t\t>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: `(${ observeAndResizeJS.toString() })();`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\n\t\t// Writing the document like this makes it act in the same way as if it was\n\t\t// loaded over the network, so DOM creation and mutation, script execution, etc.\n\t\t// all work as expected.\n\t\tcontentDocument.open();\n\t\tcontentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );\n\t\tcontentDocument.close();\n\t}\n\n\tuseEffect( () => {\n\t\ttrySandBox();\n\n\t\tfunction tryNoForceSandBox() {\n\t\t\ttrySandBox( false );\n\t\t}\n\n\t\tfunction checkMessageForResize( event: MessageEvent ) {\n\t\t\tconst iframe = ref.current;\n\n\t\t\t// Verify that the mounted element is the source of the message.\n\t\t\tif ( ! iframe || iframe.contentWindow !== event.source ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\t\tlet data = event.data || {};\n\n\t\t\tif ( 'string' === typeof data ) {\n\t\t\t\ttry {\n\t\t\t\t\tdata = JSON.parse( data );\n\t\t\t\t} catch ( e ) {}\n\t\t\t}\n\n\t\t\t// Update the state only if the message is formatted as we expect,\n\t\t\t// i.e. as an object with a 'resize' action.\n\t\t\tif ( 'resize' !== data.action ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetWidth( data.width );\n\t\t\tsetHeight( data.height );\n\t\t}\n\n\t\tconst iframe = ref.current;\n\t\tconst defaultView = iframe?.ownerDocument?.defaultView;\n\n\t\t// This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n\t\t// after reordering the containing block. See these two issues for more details:\n\t\t// https://github.com/WordPress/gutenberg/issues/6146\n\t\t// https://github.com/facebook/react/issues/18752\n\t\tiframe?.addEventListener( 'load', tryNoForceSandBox, false );\n\t\tdefaultView?.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tiframe?.removeEventListener( 'load', tryNoForceSandBox, false );\n\t\t\tdefaultView?.removeEventListener(\n\t\t\t\t'message',\n\t\t\t\tcheckMessageForResize\n\t\t\t);\n\t\t};\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandBox();\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ title, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandBox( true );\n\t\t// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, type ] );\n\n\treturn (\n\t\t<iframe\n\t\t\tref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }\n\t\t\ttitle={ title }\n\t\t\ttabIndex={ tabIndex }\n\t\t\tclassName=\"components-sandbox\"\n\t\t\tsandbox=\"allow-scripts allow-same-origin allow-presentation\"\n\t\t\tonFocus={ onFocus }\n\t\t\twidth={ Math.ceil( width ) }\n\t\t\theight={ Math.ceil( height ) }\n\t\t/>\n\t);\n}\n\nexport default SandBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_jsxRuntime","observeAndResizeJS","MutationObserver","window","document","body","parent","sendResize","clientBoundingRect","getBoundingClientRect","postMessage","action","width","height","observer","observe","attributes","attributeOldValue","characterData","characterDataOldValue","childList","subtree","addEventListener","removeViewportStyles","ruleOrNode","style","forEach","test","Array","prototype","call","querySelectorAll","styleSheets","stylesheet","cssRules","rules","position","setAttribute","SandBox","html","title","type","styles","scripts","onFocus","tabIndex","ref","useRef","setWidth","useState","setHeight","isFrameAccessible","current","contentDocument","e","trySandBox","forceRerender","ownerDocument","getAttribute","htmlDoc","jsxs","lang","documentElement","className","children","jsx","dangerouslySetInnerHTML","__html","map","i","toString","src","open","write","renderToString","close","useEffect","tryNoForceSandBox","checkMessageForResize","event","iframe","contentWindow","source","data","JSON","parse","defaultView","removeEventListener","useMergeRefs","useFocusableIframe","sandbox","Math","ceil","_default","exports","default"],"sources":["@wordpress/components/src/sandbox/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useFocusableIframe, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { SandBoxProps } from './types';\n\nconst observeAndResizeJS = function () {\n\tconst { MutationObserver } = window;\n\n\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\treturn;\n\t}\n\n\tfunction sendResize() {\n\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\twindow.parent.postMessage(\n\t\t\t{\n\t\t\t\taction: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n\t\t\t},\n\t\t\t'*'\n\t\t);\n\t}\n\n\tconst observer = new MutationObserver( sendResize );\n\tobserver.observe( document.body, {\n\t\tattributes: true,\n\t\tattributeOldValue: false,\n\t\tcharacterData: true,\n\t\tcharacterDataOldValue: false,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t} );\n\n\twindow.addEventListener( 'load', sendResize, true );\n\n\t// Hack: Remove viewport unit styles, as these are relative\n\t// the iframe root and interfere with our mechanism for\n\t// determining the unconstrained page bounds.\n\tfunction removeViewportStyles( ruleOrNode: ElementCSSInlineStyle ) {\n\t\tif ( ruleOrNode.style ) {\n\t\t\t(\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ] as const\n\t\t\t ).forEach( function ( style ) {\n\t\t\t\tif (\n\t\t\t\t\t/^\\\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(\n\t\t\t\t\t\truleOrNode.style[ style ]\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\tArray.prototype.forEach.call(\n\t\tdocument.querySelectorAll( '[style]' ),\n\t\tremoveViewportStyles\n\t);\n\tArray.prototype.forEach.call(\n\t\tdocument.styleSheets,\n\t\tfunction ( stylesheet ) {\n\t\t\tArray.prototype.forEach.call(\n\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\tremoveViewportStyles\n\t\t\t);\n\t\t}\n\t);\n\n\tdocument.body.style.position = 'absolute';\n\tdocument.body.style.width = '100%';\n\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\tsendResize();\n\n\t// Resize events can change the width of elements with 100% width, but we don't\n\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\twindow.addEventListener( 'resize', sendResize, true );\n};\n\n// TODO: These styles shouldn't be coupled with WordPress.\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div {\n\t\twidth: 100%;\n\t}\n\thtml.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio,\n\tbody.wp-has-aspect-ratio > div,\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n`;\n\n/**\n * This component provides an isolated environment for arbitrary HTML via iframes.\n *\n * ```jsx\n * import { SandBox } from '@wordpress/components';\n *\n * const MySandBox = () => (\n * \t<SandBox html=\"<p>Content</p>\" title=\"SandBox\" type=\"embed\" />\n * );\n * ```\n */\nfunction SandBox( {\n\thtml = '',\n\ttitle = '',\n\ttype,\n\tstyles = [],\n\tscripts = [],\n\tonFocus,\n\ttabIndex,\n}: SandBoxProps ) {\n\tconst ref = useRef< HTMLIFrameElement >();\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ height, setHeight ] = useState( 0 );\n\n\tfunction isFrameAccessible() {\n\t\ttry {\n\t\t\treturn !! ref.current?.contentDocument?.body;\n\t\t} catch ( e ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tfunction trySandBox( forceRerender = false ) {\n\t\tif ( ! isFrameAccessible() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { contentDocument, ownerDocument } =\n\t\t\tref.current as HTMLIFrameElement & {\n\t\t\t\tcontentDocument: Document;\n\t\t\t};\n\n\t\tif (\n\t\t\t! forceRerender &&\n\t\t\tnull !==\n\t\t\t\tcontentDocument?.body.getAttribute(\n\t\t\t\t\t'data-resizable-iframe-connected'\n\t\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Put the html snippet into a html document, and then write it to the iframe's document\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html\n\t\t\t\tlang={ ownerDocument.documentElement.lang }\n\t\t\t\tclassName={ type }\n\t\t\t>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: `(${ observeAndResizeJS.toString() })();`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\n\t\t// Writing the document like this makes it act in the same way as if it was\n\t\t// loaded over the network, so DOM creation and mutation, script execution, etc.\n\t\t// all work as expected.\n\t\tcontentDocument.open();\n\t\tcontentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );\n\t\tcontentDocument.close();\n\t}\n\n\tuseEffect( () => {\n\t\ttrySandBox();\n\n\t\tfunction tryNoForceSandBox() {\n\t\t\ttrySandBox( false );\n\t\t}\n\n\t\tfunction checkMessageForResize( event: MessageEvent ) {\n\t\t\tconst iframe = ref.current;\n\n\t\t\t// Verify that the mounted element is the source of the message.\n\t\t\tif ( ! iframe || iframe.contentWindow !== event.source ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Attempt to parse the message data as JSON if passed as string.\n\t\t\tlet data = event.data || {};\n\n\t\t\tif ( 'string' === typeof data ) {\n\t\t\t\ttry {\n\t\t\t\t\tdata = JSON.parse( data );\n\t\t\t\t} catch ( e ) {}\n\t\t\t}\n\n\t\t\t// Update the state only if the message is formatted as we expect,\n\t\t\t// i.e. as an object with a 'resize' action.\n\t\t\tif ( 'resize' !== data.action ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetWidth( data.width );\n\t\t\tsetHeight( data.height );\n\t\t}\n\n\t\tconst iframe = ref.current;\n\t\tconst defaultView = iframe?.ownerDocument?.defaultView;\n\n\t\t// This used to be registered using <iframe onLoad={} />, but it made the iframe blank\n\t\t// after reordering the containing block. See these two issues for more details:\n\t\t// https://github.com/WordPress/gutenberg/issues/6146\n\t\t// https://github.com/facebook/react/issues/18752\n\t\tiframe?.addEventListener( 'load', tryNoForceSandBox, false );\n\t\tdefaultView?.addEventListener( 'message', checkMessageForResize );\n\n\t\treturn () => {\n\t\t\tiframe?.removeEventListener( 'load', tryNoForceSandBox, false );\n\t\t\tdefaultView?.removeEventListener(\n\t\t\t\t'message',\n\t\t\t\tcheckMessageForResize\n\t\t\t);\n\t\t};\n\t\t// Passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t}, [] );\n\n\tuseEffect( () => {\n\t\ttrySandBox();\n\t\t// Passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t}, [ title, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\ttrySandBox( true );\n\t\t// Passing `exhaustive-deps` will likely involve a more detailed refactor.\n\t\t// See https://github.com/WordPress/gutenberg/pull/44378\n\t}, [ html, type ] );\n\n\treturn (\n\t\t<iframe\n\t\t\tref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }\n\t\t\ttitle={ title }\n\t\t\ttabIndex={ tabIndex }\n\t\t\tclassName=\"components-sandbox\"\n\t\t\tsandbox=\"allow-scripts allow-same-origin allow-presentation\"\n\t\t\tonFocus={ onFocus }\n\t\t\twidth={ Math.ceil( width ) }\n\t\t\theight={ Math.ceil( height ) }\n\t\t/>\n\t);\n}\n\nexport default SandBox;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAAsE,IAAAE,WAAA,GAAAF,OAAA;AATtE;AACA;AACA;;AASA;AACA;AACA;;AAGA,MAAMG,kBAAkB,GAAG,SAAAA,CAAA,EAAY;EACtC,MAAM;IAAEC;EAAiB,CAAC,GAAGC,MAAM;EAEnC,IAAK,CAAED,gBAAgB,IAAI,CAAEE,QAAQ,CAACC,IAAI,IAAI,CAAEF,MAAM,CAACG,MAAM,EAAG;IAC/D;EACD;EAEA,SAASC,UAAUA,CAAA,EAAG;IACrB,MAAMC,kBAAkB,GAAGJ,QAAQ,CAACC,IAAI,CAACI,qBAAqB,CAAC,CAAC;IAEhEN,MAAM,CAACG,MAAM,CAACI,WAAW,CACxB;MACCC,MAAM,EAAE,QAAQ;MAChBC,KAAK,EAAEJ,kBAAkB,CAACI,KAAK;MAC/BC,MAAM,EAAEL,kBAAkB,CAACK;IAC5B,CAAC,EACD,GACD,CAAC;EACF;EAEA,MAAMC,QAAQ,GAAG,IAAIZ,gBAAgB,CAAEK,UAAW,CAAC;EACnDO,QAAQ,CAACC,OAAO,CAAEX,QAAQ,CAACC,IAAI,EAAE;IAChCW,UAAU,EAAE,IAAI;IAChBC,iBAAiB,EAAE,KAAK;IACxBC,aAAa,EAAE,IAAI;IACnBC,qBAAqB,EAAE,KAAK;IAC5BC,SAAS,EAAE,IAAI;IACfC,OAAO,EAAE;EACV,CAAE,CAAC;EAEHlB,MAAM,CAACmB,gBAAgB,CAAE,MAAM,EAAEf,UAAU,EAAE,IAAK,CAAC;;EAEnD;EACA;EACA;EACA,SAASgB,oBAAoBA,CAAEC,UAAiC,EAAG;IAClE,IAAKA,UAAU,CAACC,KAAK,EAAG;MAEtB,CAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,CAAE,CAC7CC,OAAO,CAAE,UAAWD,KAAK,EAAG;QAC9B,IACC,mHAAmH,CAACE,IAAI,CACvHH,UAAU,CAACC,KAAK,CAAEA,KAAK,CACxB,CAAC,EACA;UACDD,UAAU,CAACC,KAAK,CAAEA,KAAK,CAAE,GAAG,EAAE;QAC/B;MACD,CAAE,CAAC;IACJ;EACD;EAEAG,KAAK,CAACC,SAAS,CAACH,OAAO,CAACI,IAAI,CAC3B1B,QAAQ,CAAC2B,gBAAgB,CAAE,SAAU,CAAC,EACtCR,oBACD,CAAC;EACDK,KAAK,CAACC,SAAS,CAACH,OAAO,CAACI,IAAI,CAC3B1B,QAAQ,CAAC4B,WAAW,EACpB,UAAWC,UAAU,EAAG;IACvBL,KAAK,CAACC,SAAS,CAACH,OAAO,CAACI,IAAI,CAC3BG,UAAU,CAACC,QAAQ,IAAID,UAAU,CAACE,KAAK,EACvCZ,oBACD,CAAC;EACF,CACD,CAAC;EAEDnB,QAAQ,CAACC,IAAI,CAACoB,KAAK,CAACW,QAAQ,GAAG,UAAU;EACzChC,QAAQ,CAACC,IAAI,CAACoB,KAAK,CAACb,KAAK,GAAG,MAAM;EAClCR,QAAQ,CAACC,IAAI,CAACgC,YAAY,CAAE,iCAAiC,EAAE,EAAG,CAAC;EAEnE9B,UAAU,CAAC,CAAC;;EAEZ;EACA;EACAJ,MAAM,CAACmB,gBAAgB,CAAE,QAAQ,EAAEf,UAAU,EAAE,IAAK,CAAC;AACtD,CAAC;;AAED;AACA,MAAMkB,KAAK,GAAG;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASa,OAAOA,CAAE;EACjBC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG,EAAE;EACVC,IAAI;EACJC,MAAM,GAAG,EAAE;EACXC,OAAO,GAAG,EAAE;EACZC,OAAO;EACPC;AACa,CAAC,EAAG;EACjB,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAsB,CAAC;EACzC,MAAM,CAAEnC,KAAK,EAAEoC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAE,CAAE,CAAC;EACzC,MAAM,CAAEpC,MAAM,EAAEqC,SAAS,CAAE,GAAG,IAAAD,iBAAQ,EAAE,CAAE,CAAC;EAE3C,SAASE,iBAAiBA,CAAA,EAAG;IAC5B,IAAI;MACH,OAAO,CAAC,CAAEL,GAAG,CAACM,OAAO,EAAEC,eAAe,EAAEhD,IAAI;IAC7C,CAAC,CAAC,OAAQiD,CAAC,EAAG;MACb,OAAO,KAAK;IACb;EACD;EAEA,SAASC,UAAUA,CAAEC,aAAa,GAAG,KAAK,EAAG;IAC5C,IAAK,CAAEL,iBAAiB,CAAC,CAAC,EAAG;MAC5B;IACD;IAEA,MAAM;MAAEE,eAAe;MAAEI;IAAc,CAAC,GACvCX,GAAG,CAACM,OAEH;IAEF,IACC,CAAEI,aAAa,IACf,IAAI,KACHH,eAAe,EAAEhD,IAAI,CAACqD,YAAY,CACjC,iCACD,CAAC,EACD;MACD;IACD;;IAEA;IACA;IACA;IACA;IACA,MAAMC,OAAO,gBACZ,IAAA3D,WAAA,CAAA4D,IAAA;MACCC,IAAI,EAAGJ,aAAa,CAACK,eAAe,CAACD,IAAM;MAC3CE,SAAS,EAAGtB,IAAM;MAAAuB,QAAA,gBAElB,IAAAhE,WAAA,CAAA4D,IAAA;QAAAI,QAAA,gBACC,IAAAhE,WAAA,CAAAiE,GAAA;UAAAD,QAAA,EAASxB;QAAK,CAAS,CAAC,eACxB,IAAAxC,WAAA,CAAAiE,GAAA;UAAOC,uBAAuB,EAAG;YAAEC,MAAM,EAAE1C;UAAM;QAAG,CAAE,CAAC,EACrDiB,MAAM,CAAC0B,GAAG,CAAE,CAAEjC,KAAK,EAAEkC,CAAC,kBACvB,IAAArE,WAAA,CAAAiE,GAAA;UAECC,uBAAuB,EAAG;YAAEC,MAAM,EAAEhC;UAAM;QAAG,GADvCkC,CAEN,CACA,CAAC;MAAA,CACE,CAAC,eACP,IAAArE,WAAA,CAAA4D,IAAA;QACC,mCAAgC,iCAAiC;QACjEG,SAAS,EAAGtB,IAAM;QAAAuB,QAAA,gBAElB,IAAAhE,WAAA,CAAAiE,GAAA;UAAKC,uBAAuB,EAAG;YAAEC,MAAM,EAAE5B;UAAK;QAAG,CAAE,CAAC,eACpD,IAAAvC,WAAA,CAAAiE,GAAA;UACCxB,IAAI,EAAC,iBAAiB;UACtByB,uBAAuB,EAAG;YACzBC,MAAM,EAAE,IAAKlE,kBAAkB,CAACqE,QAAQ,CAAC,CAAC;UAC3C;QAAG,CACH,CAAC,EACA3B,OAAO,CAACyB,GAAG,CAAIG,GAAG,iBACnB,IAAAvE,WAAA,CAAAiE,GAAA;UAAoBM,GAAG,EAAGA;QAAK,GAAjBA,GAAmB,CAChC,CAAC;MAAA,CACE,CAAC;IAAA,CACF,CACN;;IAED;IACA;IACA;IACAlB,eAAe,CAACmB,IAAI,CAAC,CAAC;IACtBnB,eAAe,CAACoB,KAAK,CAAE,iBAAiB,GAAG,IAAAC,uBAAc,EAAEf,OAAQ,CAAE,CAAC;IACtEN,eAAe,CAACsB,KAAK,CAAC,CAAC;EACxB;EAEA,IAAAC,kBAAS,EAAE,MAAM;IAChBrB,UAAU,CAAC,CAAC;IAEZ,SAASsB,iBAAiBA,CAAA,EAAG;MAC5BtB,UAAU,CAAE,KAAM,CAAC;IACpB;IAEA,SAASuB,qBAAqBA,CAAEC,KAAmB,EAAG;MACrD,MAAMC,MAAM,GAAGlC,GAAG,CAACM,OAAO;;MAE1B;MACA,IAAK,CAAE4B,MAAM,IAAIA,MAAM,CAACC,aAAa,KAAKF,KAAK,CAACG,MAAM,EAAG;QACxD;MACD;;MAEA;MACA,IAAIC,IAAI,GAAGJ,KAAK,CAACI,IAAI,IAAI,CAAC,CAAC;MAE3B,IAAK,QAAQ,KAAK,OAAOA,IAAI,EAAG;QAC/B,IAAI;UACHA,IAAI,GAAGC,IAAI,CAACC,KAAK,CAAEF,IAAK,CAAC;QAC1B,CAAC,CAAC,OAAQ7B,CAAC,EAAG,CAAC;MAChB;;MAEA;MACA;MACA,IAAK,QAAQ,KAAK6B,IAAI,CAACxE,MAAM,EAAG;QAC/B;MACD;MAEAqC,QAAQ,CAAEmC,IAAI,CAACvE,KAAM,CAAC;MACtBsC,SAAS,CAAEiC,IAAI,CAACtE,MAAO,CAAC;IACzB;IAEA,MAAMmE,MAAM,GAAGlC,GAAG,CAACM,OAAO;IAC1B,MAAMkC,WAAW,GAAGN,MAAM,EAAEvB,aAAa,EAAE6B,WAAW;;IAEtD;IACA;IACA;IACA;IACAN,MAAM,EAAE1D,gBAAgB,CAAE,MAAM,EAAEuD,iBAAiB,EAAE,KAAM,CAAC;IAC5DS,WAAW,EAAEhE,gBAAgB,CAAE,SAAS,EAAEwD,qBAAsB,CAAC;IAEjE,OAAO,MAAM;MACZE,MAAM,EAAEO,mBAAmB,CAAE,MAAM,EAAEV,iBAAiB,EAAE,KAAM,CAAC;MAC/DS,WAAW,EAAEC,mBAAmB,CAC/B,SAAS,EACTT,qBACD,CAAC;IACF,CAAC;IACD;IACA;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,IAAAF,kBAAS,EAAE,MAAM;IAChBrB,UAAU,CAAC,CAAC;IACZ;IACA;EACD,CAAC,EAAE,CAAEf,KAAK,EAAEE,MAAM,EAAEC,OAAO,CAAG,CAAC;EAE/B,IAAAiC,kBAAS,EAAE,MAAM;IAChBrB,UAAU,CAAE,IAAK,CAAC;IAClB;IACA;EACD,CAAC,EAAE,CAAEhB,IAAI,EAAEE,IAAI,CAAG,CAAC;EAEnB,oBACC,IAAAzC,WAAA,CAAAiE,GAAA;IACCnB,GAAG,EAAG,IAAA0C,qBAAY,EAAE,CAAE1C,GAAG,EAAE,IAAA2C,2BAAkB,EAAC,CAAC,CAAG,CAAG;IACrDjD,KAAK,EAAGA,KAAO;IACfK,QAAQ,EAAGA,QAAU;IACrBkB,SAAS,EAAC,oBAAoB;IAC9B2B,OAAO,EAAC,oDAAoD;IAC5D9C,OAAO,EAAGA,OAAS;IACnBhC,KAAK,EAAG+E,IAAI,CAACC,IAAI,CAAEhF,KAAM,CAAG;IAC5BC,MAAM,EAAG8E,IAAI,CAACC,IAAI,CAAE/E,MAAO;EAAG,CAC9B,CAAC;AAEJ;AAAC,IAAAgF,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEczD,OAAO","ignoreList":[]}

package/build/sandbox/index.native.js

@@ -306,9 +306,7 @@ const Sandbox = (0, _element.forwardRef)(function Sandbox({
   }, []);
   (0, _element.useEffect)(() => {
     updateContentHtml();
-    // Disable reason: deferring this refactor to the native team.
-    // see https://github.com/WordPress/gutenberg/pull/41166
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // See https://github.com/WordPress/gutenberg/pull/41166
   }, [html, title, type, styles, scripts]);
   (0, _element.useEffect)(() => {
     // When device orientation changes we have to recalculate the size,

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_reactNativeWebview","_element","_compose","_style","_interopRequireDefault","_jsxRuntime","observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","forwardRef","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","onWindowEvents","viewportProps","onLoadEnd","testID","ref","colorScheme","usePreferredColorScheme","height","setHeight","useState","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","useRef","key","Platform","select","android","ios","addViewportProps","trim","replace","htmlDoc","jsxs","children","jsx","name","content","dangerouslySetInnerHTML","__html","map","rules","i","className","src","renderToString","getInjectedJavaScript","useCallback","injectedJS","Object","keys","forEach","eventType","updateContentHtml","forceRerender","newContentHtml","setImmediate","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","onMessage","message","data","nativeEvent","JSON","parse","e","action","console","warn","useEffect","dimensionsChangeSubscription","addEventListener","remove","current","WebView","sandboxStyles","injectedJavaScript","source","baseUrl","originWhitelist","isAndroid","workaroundStyles","webView","scrollEnabled","setBuiltInZoomControls","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","mediaPlaybackRequiresUserAction","StyleSheet","create","opacity","_default","exports","default","memo"],"sources":["@wordpress/components/src/sandbox/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tPlatform,\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n\tforwardRef,\n\tuseCallback,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t(function() {\n\t\tconst { MutationObserver } = window;\n\n\t\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n\t\t\twindow.ReactNativeWebView.postMessage(\n\t\t\t\tJSON.stringify( {\n\t\t\t\t\taction: 'resize',\n\t\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\t\theight: clientBoundingRect.height,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\n\t\tconst observer = 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 (\n\t\t\t\t\tstyle\n\t\t\t\t) {\n\t\t\t\t\tif (\n\t\t\t\t\t\t/^\\\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t\t) {\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(\n\t\t\tdocument.querySelectorAll( '[style]' ),\n\t\t\tremoveViewportStyles\n\t\t);\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.styleSheets,\n\t\t\tfunction ( stylesheet ) {\n\t\t\t\tArray.prototype.forEach.call(\n\t\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\t\tremoveViewportStyles\n\t\t\t\t);\n\t\t\t}\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\t\twindow.addEventListener( 'orientationchange', sendResize, true );\n\t})();\n`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nconst Sandbox = forwardRef( function Sandbox(\n\t{\n\t\tcontainerStyle,\n\t\tcustomJS,\n\t\thtml = '',\n\t\tlang = 'en',\n\t\tproviderUrl = '',\n\t\tscripts = EMPTY_ARRAY,\n\t\tstyles = EMPTY_ARRAY,\n\t\ttitle = '',\n\t\ttype,\n\t\turl,\n\t\tonWindowEvents = {},\n\t\tviewportProps = '',\n\t\tonLoadEnd = () => {},\n\t\ttestID,\n\t},\n\tref\n) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\n\t\t// Avoid comma issues with props.viewportProps.\n\t\tconst addViewportProps = viewportProps\n\t\t\t.trim()\n\t\t\t.replace( /(^[^,])/, ', $1' );\n\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent={ `width=device-width, initial-scale=1${ addViewportProps }` }\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tconst getInjectedJavaScript = useCallback( () => {\n\t\t// Allow parent to override the resize observers with prop.customJS (legacy support)\n\t\tlet injectedJS = customJS || observeAndResizeJS;\n\n\t\t// Add any event listeners that were passed in.\n\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\tinjectedJS += `\n\t\t\t\twindow.addEventListener( '${ eventType }', function( event ) {\n\t\t\t\t\twindow.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );\n\t\t\t\t});`;\n\t\t} );\n\n\t\treturn injectedJS;\n\t}, [ customJS, onWindowEvents ] );\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tconst onMessage = useCallback(\n\t\t( message ) => {\n\t\t\tlet data = message?.nativeEvent?.data;\n\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check for resize event\n\t\t\tif ( 'resize' === data?.action ) {\n\t\t\t\tsetHeight( data.height );\n\t\t\t}\n\n\t\t\t// Forward the event to parent event listeners\n\t\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\t\tif ( data?.type === eventType ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonWindowEvents[ eventType ]( data );\n\t\t\t\t\t} catch ( e ) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Error handling event ${ eventType }`,\n\t\t\t\t\t\t\te\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[ onWindowEvents ]\n\t);\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tinjectedJavaScript={ getInjectedJavaScript() }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t\tPlatform.isAndroid && workaroundStyles.webView,\n\t\t\t] }\n\t\t\tonMessage={ onMessage }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t\tmediaPlaybackRequiresUserAction={ false }\n\t\t\tonLoadEnd={ onLoadEnd }\n\t\t\ttestID={ testID }\n\t\t/>\n\t);\n} );\n\nconst workaroundStyles = StyleSheet.create( {\n\twebView: {\n\t\t/**\n\t\t * The slight opacity below is a workaround for an Android crash caused from combining Android\n\t\t * 12's new scroll overflow behavior and webviews.\n\t\t * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253\n\t\t */\n\t\topacity: 0.99,\n\t},\n} );\n\nexport default memo( Sandbox );\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAUA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAC,sBAAA,CAAAL,OAAA;AAAyC,IAAAM,WAAA,GAAAN,OAAA;AAxBzC;AACA;AACA;;AAIA;AACA;AACA;;AAaA;AACA;AACA;;AAGA,MAAMO,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAG,EAAE;AAEtB,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EAAE,SAASD,OAAOA,CAC3C;EACCE,cAAc;EACdC,QAAQ;EACRC,IAAI,GAAG,EAAE;EACTC,IAAI,GAAG,IAAI;EACXC,WAAW,GAAG,EAAE;EAChBC,OAAO,GAAGR,WAAW;EACrBS,MAAM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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_reactNativeWebview","_element","_compose","_style","_interopRequireDefault","_jsxRuntime","observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","forwardRef","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","onWindowEvents","viewportProps","onLoadEnd","testID","ref","colorScheme","usePreferredColorScheme","height","setHeight","useState","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","useRef","key","Platform","select","android","ios","addViewportProps","trim","replace","htmlDoc","jsxs","children","jsx","name","content","dangerouslySetInnerHTML","__html","map","rules","i","className","src","renderToString","getInjectedJavaScript","useCallback","injectedJS","Object","keys","forEach","eventType","updateContentHtml","forceRerender","newContentHtml","setImmediate","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","onMessage","message","data","nativeEvent","JSON","parse","e","action","console","warn","useEffect","dimensionsChangeSubscription","addEventListener","remove","current","WebView","sandboxStyles","injectedJavaScript","source","baseUrl","originWhitelist","isAndroid","workaroundStyles","webView","scrollEnabled","setBuiltInZoomControls","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","mediaPlaybackRequiresUserAction","StyleSheet","create","opacity","_default","exports","default","memo"],"sources":["@wordpress/components/src/sandbox/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Dimensions, StyleSheet } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tPlatform,\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n\tforwardRef,\n\tuseCallback,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t(function() {\n\t\tconst { MutationObserver } = window;\n\n\t\tif ( ! MutationObserver || ! document.body || ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tconst clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n\t\t\twindow.ReactNativeWebView.postMessage(\n\t\t\t\tJSON.stringify( {\n\t\t\t\t\taction: 'resize',\n\t\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\t\theight: clientBoundingRect.height,\n\t\t\t\t} )\n\t\t\t);\n\t\t}\n\n\t\tconst observer = 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 (\n\t\t\t\t\tstyle\n\t\t\t\t) {\n\t\t\t\t\tif (\n\t\t\t\t\t\t/^\\\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test( ruleOrNode.style[ style ] )\n\t\t\t\t\t) {\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(\n\t\t\tdocument.querySelectorAll( '[style]' ),\n\t\t\tremoveViewportStyles\n\t\t);\n\t\tArray.prototype.forEach.call(\n\t\t\tdocument.styleSheets,\n\t\t\tfunction ( stylesheet ) {\n\t\t\t\tArray.prototype.forEach.call(\n\t\t\t\t\tstylesheet.cssRules || stylesheet.rules,\n\t\t\t\t\tremoveViewportStyles\n\t\t\t\t);\n\t\t\t}\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\t\twindow.addEventListener( 'orientationchange', sendResize, true );\n\t})();\n`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > * {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. */\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */\n\t}\n\n\t/**\n\t * Add responsiveness to embeds with aspect ratios.\n\t *\n\t * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and\n\t * adapted for the native version.\n\t */\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 * 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nconst Sandbox = forwardRef( function Sandbox(\n\t{\n\t\tcontainerStyle,\n\t\tcustomJS,\n\t\thtml = '',\n\t\tlang = 'en',\n\t\tproviderUrl = '',\n\t\tscripts = EMPTY_ARRAY,\n\t\tstyles = EMPTY_ARRAY,\n\t\ttitle = '',\n\t\ttype,\n\t\turl,\n\t\tonWindowEvents = {},\n\t\tviewportProps = '',\n\t\tonLoadEnd = () => {},\n\t\ttestID,\n\t},\n\tref\n) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\n\t\t// Avoid comma issues with props.viewportProps.\n\t\tconst addViewportProps = viewportProps\n\t\t\t.trim()\n\t\t\t.replace( /(^[^,])/, ', $1' );\n\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent={ `width=device-width, initial-scale=1${ addViewportProps }` }\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tconst getInjectedJavaScript = useCallback( () => {\n\t\t// Allow parent to override the resize observers with prop.customJS (legacy support)\n\t\tlet injectedJS = customJS || observeAndResizeJS;\n\n\t\t// Add any event listeners that were passed in.\n\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\tinjectedJS += `\n\t\t\t\twindow.addEventListener( '${ eventType }', function( event ) {\n\t\t\t\t\twindow.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );\n\t\t\t\t});`;\n\t\t} );\n\n\t\treturn injectedJS;\n\t}, [ customJS, onWindowEvents ] );\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tconst onMessage = useCallback(\n\t\t( message ) => {\n\t\t\tlet data = message?.nativeEvent?.data;\n\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// check for resize event\n\t\t\tif ( 'resize' === data?.action ) {\n\t\t\t\tsetHeight( data.height );\n\t\t\t}\n\n\t\t\t// Forward the event to parent event listeners\n\t\t\tObject.keys( onWindowEvents ).forEach( ( eventType ) => {\n\t\t\t\tif ( data?.type === eventType ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonWindowEvents[ eventType ]( data );\n\t\t\t\t\t} catch ( e ) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`Error handling event ${ eventType }`,\n\t\t\t\t\t\t\te\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[ onWindowEvents ]\n\t);\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t\t// See https://github.com/WordPress/gutenberg/pull/41166\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tinjectedJavaScript={ getInjectedJavaScript() }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t\tPlatform.isAndroid && workaroundStyles.webView,\n\t\t\t] }\n\t\t\tonMessage={ onMessage }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t\tmediaPlaybackRequiresUserAction={ false }\n\t\t\tonLoadEnd={ onLoadEnd }\n\t\t\ttestID={ testID }\n\t\t/>\n\t);\n} );\n\nconst workaroundStyles = StyleSheet.create( {\n\twebView: {\n\t\t/**\n\t\t * The slight opacity below is a workaround for an Android crash caused from combining Android\n\t\t * 12's new scroll overflow behavior and webviews.\n\t\t * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253\n\t\t */\n\t\topacity: 0.99,\n\t},\n} );\n\nexport default memo( Sandbox );\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAUA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAC,sBAAA,CAAAL,OAAA;AAAyC,IAAAM,WAAA,GAAAN,OAAA;AAxBzC;AACA;AACA;;AAIA;AACA;AACA;;AAaA;AACA;AACA;;AAGA,MAAMO,kBAAkB,GAAG;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAG;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAG,EAAE;AAEtB,MAAMC,OAAO,GAAG,IAAAC,mBAAU,EAAE,SAASD,OAAOA,CAC3C;EACCE,cAAc;EACdC,QAAQ;EACRC,IAAI,GAAG,EAAE;EACTC,IAAI,GAAG,IAAI;EACXC,WAAW,GAAG,EAAE;EAChBC,OAAO,GAAGR,WAAW;EACrBS,MAAM,GAAGT,WAAW;EACpBU,KAAK,GAAG,EAAE;EACVC,IAAI;EACJC,GAAG;EACHC,cAAc,GAAG,CAAC,CAAC;EACnBC,aAAa,GAAG,EAAE;EAClBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;EACpBC;AACD,CAAC,EACDC,GAAG,EACF;EACD,MAAMC,WAAW,GAAG,IAAAC,gCAAuB,EAAC,CAAC;EAC7C,MAAM,CAAEC,MAAM,EAAEC,SAAS,CAAE,GAAG,IAAAC,iBAAQ,EAAE,CAAE,CAAC;EAC3C,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAG,IAAAF,iBAAQ,EAAEG,UAAU,CAAC,CAAE,CAAC;EAEhE,MAAMC,UAAU,GAAGC,uBAAU,CAACC,GAAG,CAAE,QAAS,CAAC;EAC7C,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAG,IAAAR,iBAAQ,EAC/CI,UAAU,CAACK,KAAK,IAAIL,UAAU,CAACN,MAChC,CAAC;EACD,MAAMY,YAAY,GAAG,IAAAC,eAAM,EAAEJ,WAAY,CAAC;EAC1C;EACA;EACA;EACA;EACA,MAAMK,GAAG,GAAGC,iBAAQ,CAACC,MAAM,CAAE;IAC5BC,OAAO,EAAE,GAAIzB,GAAG,IACfiB,WAAW,GAAG,WAAW,GAAG,UAAU,IAClCX,WAAW,EAAG;IACnBoB,GAAG,EAAE1B;EACN,CAAE,CAAC;EAEH,SAASa,UAAUA,CAAA,EAAG;IACrB;IACA;IACA;IACA;;IAEA;IACA,MAAMc,gBAAgB,GAAGzB,aAAa,CACpC0B,IAAI,CAAC,CAAC,CACNC,OAAO,CAAE,SAAS,EAAE,MAAO,CAAC;IAE9B,MAAMC,OAAO,gBACZ,IAAA7C,WAAA,CAAA8C,IAAA;MAAMrC,IAAI,EAAGA,IAAM;MAAAsC,QAAA,gBAClB,IAAA/C,WAAA,CAAA8C,IAAA;QAAAC,QAAA,gBACC,IAAA/C,WAAA,CAAAgD,GAAA;UAAAD,QAAA,EAASlC;QAAK,CAAS,CAAC,eACxB,IAAAb,WAAA,CAAAgD,GAAA;UACCC,IAAI,EAAC,UAAU;UACfC,OAAO,EAAG,sCAAuCR,gBAAgB;QAAK,CAChE,CAAC,eACR,IAAA1C,WAAA,CAAAgD,GAAA;UAAOG,uBAAuB,EAAG;YAAEC,MAAM,EAAElD;UAAM;QAAG,CAAE,CAAC,EACrDU,MAAM,CAACyC,GAAG,CAAE,CAAEC,KAAK,EAAEC,CAAC,kBACvB,IAAAvD,WAAA,CAAAgD,GAAA;UAECG,uBAAuB,EAAG;YAAEC,MAAM,EAAEE;UAAM;QAAG,GADvCC,CAEN,CACA,CAAC;MAAA,CACE,CAAC,eACP,IAAAvD,WAAA,CAAA8C,IAAA;QACC,mCAAgC,iCAAiC;QACjEU,SAAS,EAAG1C,IAAM;QAAAiC,QAAA,gBAElB,IAAA/C,WAAA,CAAAgD,GAAA;UAAKG,uBAAuB,EAAG;YAAEC,MAAM,EAAE5C;UAAK;QAAG,CAAE,CAAC,EAClDG,OAAO,CAAC0C,GAAG,CAAII,GAAG,iBACnB,IAAAzD,WAAA,CAAAgD,GAAA;UAAoBS,GAAG,EAAGA;QAAK,GAAjBA,GAAmB,CAChC,CAAC;MAAA,CACE,CAAC;IAAA,CACF,CACN;IACD,OAAO,iBAAiB,GAAG,IAAAC,uBAAc,EAAEb,OAAQ,CAAC;EACrD;EAEA,MAAMc,qBAAqB,GAAG,IAAAC,oBAAW,EAAE,MAAM;IAChD;IACA,IAAIC,UAAU,GAAGtD,QAAQ,IAAIN,kBAAkB;;IAE/C;IACA6D,MAAM,CAACC,IAAI,CAAE/C,cAAe,CAAC,CAACgD,OAAO,CAAIC,SAAS,IAAM;MACvDJ,UAAU,IAAI;AACjB,gCAAiCI,SAAS;AAC1C,uEAAwEA,SAAS;AACjF,QAAQ;IACN,CAAE,CAAC;IAEH,OAAOJ,UAAU;EAClB,CAAC,EAAE,CAAEtD,QAAQ,EAAES,cAAc,CAAG,CAAC;EAEjC,SAASkD,iBAAiBA,CAAEC,aAAa,GAAG,KAAK,EAAG;IACnD,MAAMC,cAAc,GAAGxC,UAAU,CAAC,CAAC;IAEnC,IAAKuC,aAAa,IAAIzC,WAAW,KAAK0C,cAAc,EAAG;MACtD;MACA;MACA;MACAzC,cAAc,CAAE,EAAG,CAAC;MACpB0C,YAAY,CAAE,MAAM1C,cAAc,CAAEyC,cAAe,CAAE,CAAC;IACvD,CAAC,MAAM;MACNzC,cAAc,CAAEyC,cAAe,CAAC;IACjC;EACD;EAEA,SAASE,YAAYA,CAAA,EAAG;IACvB,MAAMC,aAAa,GAAGC,IAAI,CAACC,IAAI,CAAElD,MAAO,CAAC;IAEzC,OAAOgD,aAAa,GAAG;MAAEhD,MAAM,EAAEgD;IAAc,CAAC,GAAG;MAAEG,WAAW,EAAE;IAAE,CAAC;EACtE;EAEA,SAASC,kBAAkBA,CAAEC,UAAU,EAAG;IACzC3C,cAAc,CAAE2C,UAAU,CAACC,MAAM,CAAC3C,KAAK,IAAI0C,UAAU,CAACC,MAAM,CAACtD,MAAO,CAAC;EACtE;EAEA,MAAMuD,SAAS,GAAG,IAAAlB,oBAAW,EAC1BmB,OAAO,IAAM;IACd,IAAIC,IAAI,GAAGD,OAAO,EAAEE,WAAW,EAAED,IAAI;IAErC,IAAI;MACHA,IAAI,GAAGE,IAAI,CAACC,KAAK,CAAEH,IAAK,CAAC;IAC1B,CAAC,CAAC,OAAQI,CAAC,EAAG;MACb;IACD;;IAEA;IACA,IAAK,QAAQ,KAAKJ,IAAI,EAAEK,MAAM,EAAG;MAChC7D,SAAS,CAAEwD,IAAI,CAACzD,MAAO,CAAC;IACzB;;IAEA;IACAuC,MAAM,CAACC,IAAI,CAAE/C,cAAe,CAAC,CAACgD,OAAO,CAAIC,SAAS,IAAM;MACvD,IAAKe,IAAI,EAAElE,IAAI,KAAKmD,SAAS,EAAG;QAC/B,IAAI;UACHjD,cAAc,CAAEiD,SAAS,CAAE,CAAEe,IAAK,CAAC;QACpC,CAAC,CAAC,OAAQI,CAAC,EAAG;UACb;UACAE,OAAO,CAACC,IAAI,CACX,wBAAyBtB,SAAS,EAAG,EACrCmB,CACD,CAAC;QACF;MACD;IACD,CAAE,CAAC;EACJ,CAAC,EACD,CAAEpE,cAAc,CACjB,CAAC;EAED,IAAAwE,kBAAS,EAAE,MAAM;IAChB,MAAMC,4BAA4B,GAAG3D,uBAAU,CAAC4D,gBAAgB,CAC/D,QAAQ,EACRf,kBACD,CAAC;IACD,OAAO,MAAM;MACZc,4BAA4B,CAACE,MAAM,CAAC,CAAC;IACtC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,IAAAH,kBAAS,EAAE,MAAM;IAChBtB,iBAAiB,CAAC,CAAC;IACnB;EACD,CAAC,EAAE,CAAE1D,IAAI,EAAEK,KAAK,EAAEC,IAAI,EAAEF,MAAM,EAAED,OAAO,CAAG,CAAC;EAE3C,IAAA6E,kBAAS,EAAE,MAAM;IAChB;IACA;IACA,IAAKrD,YAAY,CAACyD,OAAO,KAAK5D,WAAW,EAAG;MAC3CR,SAAS,CAAE,CAAE,CAAC;IACf;IACAW,YAAY,CAACyD,OAAO,GAAG5D,WAAW;EACnC,CAAC,EAAE,CAAEA,WAAW,CAAG,CAAC;EAEpB,oBACC,IAAAhC,WAAA,CAAAgD,GAAA,EAACrD,mBAAA,CAAAkG,OAAO;IACPvF,cAAc,EAAG,CAChBwF,cAAa,CAAE,4BAA4B,CAAE,EAC7CxF,cAAc,CACZ;IACHyF,kBAAkB,EAAGpC,qBAAqB,CAAC,CAAG;IAE9CvC,GAAG,EAAGA,GAAK;IACX4E,MAAM,EAAG;MAAEC,OAAO,EAAEvF,WAAW;MAAEF,IAAI,EAAEkB;IAAY;IACnD;IACA;IAAA;IACAwE,eAAe,EAAG,CAAE,GAAG,CAAI;IAC3BhG,KAAK,EAAG,CACP4F,cAAa,CAAE,0BAA0B,CAAE,EAC3CxB,YAAY,CAAC,CAAC,EACdhC,iBAAQ,CAAC6D,SAAS,IAAIC,gBAAgB,CAACC,OAAO,CAC5C;IACHvB,SAAS,EAAGA,SAAW;IACvBwB,aAAa,EAAG,KAAO;IACvBC,sBAAsB,EAAG,KAAO;IAChCC,8BAA8B,EAAG,KAAO;IACxCC,4BAA4B,EAAG,KAAO;IACtCC,+BAA+B,EAAG,KAAO;IACzCxF,SAAS,EAAGA,SAAW;IACvBC,MAAM,EAAGA;EAAQ,GAlBXkB,GAmBN,CAAC;AAEJ,CAAE,CAAC;AAEH,MAAM+D,gBAAgB,GAAGO,uBAAU,CAACC,MAAM,CAAE;EAC3CP,OAAO,EAAE;IACR;AACF;AACA;AACA;AACA;IACEQ,OAAO,EAAE;EACV;AACD,CAAE,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEW,IAAAC,aAAI,EAAE7G,OAAQ,CAAC","ignoreList":[]}

package/build/search-control/index.js

@@ -10,6 +10,7 @@ var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _element = require("@wordpress/element");
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 var _button = _interopRequireDefault(require("../button"));
 var _context = require("../context");
 var _styles = require("./styles");
@@ -37,6 +38,11 @@ function SuffixItem({
       icon: _icons.search
     });
   }
+  if (onClose) {
+    (0, _deprecated.default)('`onClose` prop in wp.components.SearchControl', {
+      since: '6.8'
+    });
+  }
   const onReset = () => {
     onChange('');
     searchRef.current?.focus();

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_icons","_element","_button","_context","_styles","_jsxRuntime","SuffixItem","searchRef","value","onChange","onClose","jsx","Icon","icon","search","onReset","current","focus","default","size","closeSmall","label","__","onClick","UnforwardedSearchControl","__nextHasNoMarginBottom","className","placeholder","hideLabelFromVision","restProps","forwardedRef","disabled","filteredRestProps","useRef","instanceId","useInstanceId","SearchControl","contextValue","useMemo","BaseControl","_overrides","__associatedWPComponentName","InputBase","isBorderless","ContextSystemProvider","children","StyledInputControl","__next40pxDefaultSize","id","ref","useMergeRefs","type","clsx","nextValue","autoComplete","suffix","SuffixItemWrapper","exports","forwardRef","_default"],"sources":["@wordpress/components/src/search-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { SearchControlProps, SuffixItemProps } from './types';\nimport type { ForwardedRef } from 'react';\nimport { ContextSystemProvider } from '../context';\nimport { StyledInputControl, SuffixItemWrapper } from './styles';\n\nfunction SuffixItem( {\n\tsearchRef,\n\tvalue,\n\tonChange,\n\tonClose,\n}: SuffixItemProps ) {\n\tif ( ! onClose && ! value ) {\n\t\treturn <Icon icon={ search } />;\n\t}\n\n\tconst onReset = () => {\n\t\tonChange( '' );\n\t\tsearchRef.current?.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\tsize=\"small\"\n\t\t\ticon={ closeSmall }\n\t\t\tlabel={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }\n\t\t\tonClick={ onClose ?? onReset }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedSearchControl(\n\t{\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tonChange,\n\t\tvalue,\n\t\tlabel = __( 'Search' ),\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\tonClose,\n\t\tsize = 'default',\n\t\t...restProps\n\t}: Omit<\n\t\tWordPressComponentProps< SearchControlProps, 'input', false >,\n\t\t// TODO: Background styling currently doesn't support a disabled state. Needs design work.\n\t\t'disabled'\n\t>,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\t// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.\n\t// Work with the design team (@WordPress/gutenberg-design) if you need this feature.\n\tconst { disabled, ...filteredRestProps } = restProps;\n\n\tconst searchRef = useRef< HTMLInputElement >( null );\n\tconst instanceId = useInstanceId(\n\t\tSearchControl,\n\t\t'components-search-control'\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tBaseControl: {\n\t\t\t\t// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system\n\t\t\t\t// to provide backwards compatibile margin for SearchControl.\n\t\t\t\t// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)\n\t\t\t\t_overrides: { __nextHasNoMarginBottom },\n\t\t\t\t__associatedWPComponentName: 'SearchControl',\n\t\t\t},\n\t\t\t// `isBorderless` is still experimental and not a public prop for InputControl yet.\n\t\t\tInputBase: { isBorderless: true },\n\t\t} ),\n\t\t[ __nextHasNoMarginBottom ]\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextValue }>\n\t\t\t<StyledInputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tid={ instanceId }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tlabel={ label }\n\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\ttype=\"search\"\n\t\t\t\tsize={ size }\n\t\t\t\tclassName={ clsx( 'components-search-control', className ) }\n\t\t\t\tonChange={ ( nextValue?: string ) =>\n\t\t\t\t\tonChange( nextValue ?? '' )\n\t\t\t\t}\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tvalue={ value ?? '' }\n\t\t\t\tsuffix={\n\t\t\t\t\t<SuffixItemWrapper size={ size }>\n\t\t\t\t\t\t<SuffixItem\n\t\t\t\t\t\t\tsearchRef={ searchRef }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SuffixItemWrapper>\n\t\t\t\t}\n\t\t\t\t{ ...filteredRestProps }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * SearchControl components let users display a search control.\n *\n * ```jsx\n * import { SearchControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function MySearchControl( { className, setState } ) {\n *   const [ searchInput, setSearchInput ] = useState( '' );\n *\n *   return (\n *     <SearchControl\n *       __nextHasNoMarginBottom\n *       value={ searchInput }\n *       onChange={ setSearchInput }\n *     />\n *   );\n * }\n * ```\n */\nexport const SearchControl = forwardRef( UnforwardedSearchControl );\n\nexport default SearchControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_icons","_element","_deprecated","_button","_context","_styles","_jsxRuntime","SuffixItem","searchRef","value","onChange","onClose","jsx","Icon","icon","search","deprecated","since","onReset","current","focus","default","size","closeSmall","label","__","onClick","UnforwardedSearchControl","__nextHasNoMarginBottom","className","placeholder","hideLabelFromVision","restProps","forwardedRef","disabled","filteredRestProps","useRef","instanceId","useInstanceId","SearchControl","contextValue","useMemo","BaseControl","_overrides","__associatedWPComponentName","InputBase","isBorderless","ContextSystemProvider","children","StyledInputControl","__next40pxDefaultSize","id","ref","useMergeRefs","type","clsx","nextValue","autoComplete","suffix","SuffixItemWrapper","exports","forwardRef","_default"],"sources":["@wordpress/components/src/search-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { Icon, search, closeSmall } from '@wordpress/icons';\nimport { forwardRef, useMemo, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { SearchControlProps, SuffixItemProps } from './types';\nimport type { ForwardedRef } from 'react';\nimport { ContextSystemProvider } from '../context';\nimport { StyledInputControl, SuffixItemWrapper } from './styles';\n\nfunction SuffixItem( {\n\tsearchRef,\n\tvalue,\n\tonChange,\n\tonClose,\n}: SuffixItemProps ) {\n\tif ( ! onClose && ! value ) {\n\t\treturn <Icon icon={ search } />;\n\t}\n\n\tif ( onClose ) {\n\t\tdeprecated( '`onClose` prop in wp.components.SearchControl', {\n\t\t\tsince: '6.8',\n\t\t} );\n\t}\n\n\tconst onReset = () => {\n\t\tonChange( '' );\n\t\tsearchRef.current?.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\tsize=\"small\"\n\t\t\ticon={ closeSmall }\n\t\t\tlabel={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }\n\t\t\tonClick={ onClose ?? onReset }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedSearchControl(\n\t{\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tonChange,\n\t\tvalue,\n\t\tlabel = __( 'Search' ),\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\tonClose,\n\t\tsize = 'default',\n\t\t...restProps\n\t}: Omit<\n\t\tWordPressComponentProps< SearchControlProps, 'input', false >,\n\t\t// TODO: Background styling currently doesn't support a disabled state. Needs design work.\n\t\t'disabled'\n\t>,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\t// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.\n\t// Work with the design team (@WordPress/gutenberg-design) if you need this feature.\n\tconst { disabled, ...filteredRestProps } = restProps;\n\n\tconst searchRef = useRef< HTMLInputElement >( null );\n\tconst instanceId = useInstanceId(\n\t\tSearchControl,\n\t\t'components-search-control'\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tBaseControl: {\n\t\t\t\t// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system\n\t\t\t\t// to provide backwards compatibile margin for SearchControl.\n\t\t\t\t// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)\n\t\t\t\t_overrides: { __nextHasNoMarginBottom },\n\t\t\t\t__associatedWPComponentName: 'SearchControl',\n\t\t\t},\n\t\t\t// `isBorderless` is still experimental and not a public prop for InputControl yet.\n\t\t\tInputBase: { isBorderless: true },\n\t\t} ),\n\t\t[ __nextHasNoMarginBottom ]\n\t);\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextValue }>\n\t\t\t<StyledInputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tid={ instanceId }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tlabel={ label }\n\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\ttype=\"search\"\n\t\t\t\tsize={ size }\n\t\t\t\tclassName={ clsx( 'components-search-control', className ) }\n\t\t\t\tonChange={ ( nextValue?: string ) =>\n\t\t\t\t\tonChange( nextValue ?? '' )\n\t\t\t\t}\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tvalue={ value ?? '' }\n\t\t\t\tsuffix={\n\t\t\t\t\t<SuffixItemWrapper size={ size }>\n\t\t\t\t\t\t<SuffixItem\n\t\t\t\t\t\t\tsearchRef={ searchRef }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SuffixItemWrapper>\n\t\t\t\t}\n\t\t\t\t{ ...filteredRestProps }\n\t\t\t/>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * SearchControl components let users display a search control.\n *\n * ```jsx\n * import { SearchControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function MySearchControl( { className, setState } ) {\n *   const [ searchInput, setSearchInput ] = useState( '' );\n *\n *   return (\n *     <SearchControl\n *       __nextHasNoMarginBottom\n *       value={ searchInput }\n *       onChange={ setSearchInput }\n *     />\n *   );\n * }\n * ```\n */\nexport const SearchControl = forwardRef( UnforwardedSearchControl );\n\nexport default SearchControl;\n"],"mappings":"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","ignoreList":[]}

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

@@ -88,9 +88,7 @@ function SearchControl({
     mergeFutureStyles(darkStyles, [isDark]);
     mergeFutureStyles(activeDarkStyles, [isActive, isDark]);
     setCurrentStyles(futureStyles);
-    // Disable reason: deferring this refactor to the native team.
-    // see https://github.com/WordPress/gutenberg/pull/41166
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // See https://github.com/WordPress/gutenberg/pull/41166
   }, [isActive, isDark]);
   const clearInput = (0, _element.useCallback)(() => {
     onChange('');