@wordpress/components 25.8.2 → 25.9.0

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

@@ -1 +1 @@
-{"version":3,"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","process","env","NODE_ENV","thumbSize","deprecatedHeight","__next40pxDefaultSize","Root","_styled","target","label","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","theme","accent","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","_ref","_ref2","tooltipPosition","position","isBottom","Tooltip","InputNumber","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, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/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: ${ railHeight }px;\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: ${ railHeight }px;\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: -4px;\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\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: 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: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused }: 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: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show }: 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: 2px;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack.\nexport const InputNumber = styled( NumberControl )`\n\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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"}
+{"version":3,"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","process","env","NODE_ENV","thumbSize","deprecatedHeight","__next40pxDefaultSize","Root","_styled","target","label","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","theme","accent","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","_ref","_ref2","tooltipPosition","position","isBottom","Tooltip","InputNumber","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, reduceMotion, rtl } 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: ${ railHeight }px;\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: ${ railHeight }px;\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: -4px;\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\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: 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: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused }: 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: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show }: 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: 2px;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @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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"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","useCallback","useEffect","useState","Tooltip","SimpleTooltip","props","className","inputRef","tooltipPosition","show","style","value","renderTooltipContent","v","zIndex","restProps","position","useTooltipPosition","classes","styles","createElement","role","setPosition","setTooltipPosition","current","window","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/range-control/tooltip.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Tooltip } from './styles/range-control-styles';\n\nimport type { TooltipProps } from './types';\nimport type { WordPressComponentProps } from '../ui/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 = classnames( 'components-simple-tooltip', className );\n\tconst styles = {\n\t\t...style,\n\t\tzIndex,\n\t};\n\n\treturn (\n\t\t<Tooltip\n\t\t\t{ ...restProps }\n\t\t\taria-hidden={ show }\n\t\t\tclassName={ classes }\n\t\t\tposition={ position }\n\t\t\tshow={ show }\n\t\t\trole=\"tooltip\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ renderTooltipContent( value ) }\n\t\t</Tooltip>\n\t);\n}\n\nfunction useTooltipPosition( { inputRef, tooltipPosition }: 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":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;;AAErE;AACA;AACA;AACA,SAASC,OAAO,QAAQ,+BAA+B;AAKvD,eAAe,SAASC,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,GAAGnB,UAAU,CAAE,2BAA2B,EAAEO,SAAU,CAAC;EACpE,MAAMa,MAAM,GAAG;IACd,GAAGT,KAAK;IACRI;EACD,CAAC;EAED,OACCM,aAAA,CAACjB,OAAO;IAAA,GACFY,SAAS;IACd,eAAcN,IAAM;IACpBH,SAAS,EAAGY,OAAS;IACrBF,QAAQ,EAAGA,QAAU;IACrBP,IAAI,EAAGA,IAAM;IACbY,IAAI,EAAC,SAAS;IACdX,KAAK,EAAGS;EAAQ,GAEdP,oBAAoB,CAAED,KAAM,CACtB,CAAC;AAEZ;AAEA,SAASM,kBAAkBA,CAAE;EAAEV,QAAQ;EAAEC;AAA8B,CAAC,EAAG;EAC1E,MAAM,CAAEQ,QAAQ,EAAEM,WAAW,CAAE,GAAGpB,QAAQ,CAAW,CAAC;EAEtD,MAAMqB,kBAAkB,GAAGvB,WAAW,CAAE,MAAM;IAC7C,IAAKO,QAAQ,IAAIA,QAAQ,CAACiB,OAAO,EAAG;MACnCF,WAAW,CAAEd,eAAgB,CAAC;IAC/B;EACD,CAAC,EAAE,CAAEA,eAAe,EAAED,QAAQ,CAAG,CAAC;EAElCN,SAAS,CAAE,MAAM;IAChBsB,kBAAkB,CAAC,CAAC;EACrB,CAAC,EAAE,CAAEA,kBAAkB,CAAG,CAAC;EAE3BtB,SAAS,CAAE,MAAM;IAChBwB,MAAM,CAACC,gBAAgB,CAAE,QAAQ,EAAEH,kBAAmB,CAAC;IAEvD,OAAO,MAAM;MACZE,MAAM,CAACE,mBAAmB,CAAE,QAAQ,EAAEJ,kBAAmB,CAAC;IAC3D,CAAC;EACF,CAAE,CAAC;EAEH,OAAOP,QAAQ;AAChB"}
+{"version":3,"names":["classnames","useCallback","useEffect","useState","Tooltip","SimpleTooltip","props","className","inputRef","tooltipPosition","show","style","value","renderTooltipContent","v","zIndex","restProps","position","useTooltipPosition","classes","styles","createElement","role","setPosition","setTooltipPosition","current","window","addEventListener","removeEventListener"],"sources":["@wordpress/components/src/range-control/tooltip.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Tooltip } from './styles/range-control-styles';\n\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 = classnames( 'components-simple-tooltip', className );\n\tconst styles = {\n\t\t...style,\n\t\tzIndex,\n\t};\n\n\treturn (\n\t\t<Tooltip\n\t\t\t{ ...restProps }\n\t\t\taria-hidden={ show }\n\t\t\tclassName={ classes }\n\t\t\tposition={ position }\n\t\t\tshow={ show }\n\t\t\trole=\"tooltip\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ renderTooltipContent( value ) }\n\t\t</Tooltip>\n\t);\n}\n\nfunction useTooltipPosition( { inputRef, tooltipPosition }: 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":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;;AAErE;AACA;AACA;AACA,SAASC,OAAO,QAAQ,+BAA+B;AAKvD,eAAe,SAASC,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,GAAGnB,UAAU,CAAE,2BAA2B,EAAEO,SAAU,CAAC;EACpE,MAAMa,MAAM,GAAG;IACd,GAAGT,KAAK;IACRI;EACD,CAAC;EAED,OACCM,aAAA,CAACjB,OAAO;IAAA,GACFY,SAAS;IACd,eAAcN,IAAM;IACpBH,SAAS,EAAGY,OAAS;IACrBF,QAAQ,EAAGA,QAAU;IACrBP,IAAI,EAAGA,IAAM;IACbY,IAAI,EAAC,SAAS;IACdX,KAAK,EAAGS;EAAQ,GAEdP,oBAAoB,CAAED,KAAM,CACtB,CAAC;AAEZ;AAEA,SAASM,kBAAkBA,CAAE;EAAEV,QAAQ;EAAEC;AAA8B,CAAC,EAAG;EAC1E,MAAM,CAAEQ,QAAQ,EAAEM,WAAW,CAAE,GAAGpB,QAAQ,CAAW,CAAC;EAEtD,MAAMqB,kBAAkB,GAAGvB,WAAW,CAAE,MAAM;IAC7C,IAAKO,QAAQ,IAAIA,QAAQ,CAACiB,OAAO,EAAG;MACnCF,WAAW,CAAEd,eAAgB,CAAC;IAC/B;EACD,CAAC,EAAE,CAAEA,eAAe,EAAED,QAAQ,CAAG,CAAC;EAElCN,SAAS,CAAE,MAAM;IAChBsB,kBAAkB,CAAC,CAAC;EACrB,CAAC,EAAE,CAAEA,kBAAkB,CAAG,CAAC;EAE3BtB,SAAS,CAAE,MAAM;IAChBwB,MAAM,CAACC,gBAAgB,CAAE,QAAQ,EAAEH,kBAAmB,CAAC;IAEvD,OAAO,MAAM;MACZE,MAAM,CAACE,mBAAmB,CAAE,QAAQ,EAAEJ,kBAAmB,CAAC;IAC3D,CAAC;EACF,CAAE,CAAC;EAEH,OAAOP,QAAQ;AAChB"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/resizable-box/index.native.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

package/build-module/sandbox/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -102,7 +102,8 @@ function SandBox({
   type,
   styles = [],
   scripts = [],
-  onFocus
+  onFocus,
+  tabIndex
 }) {
   const ref = useRef();
   const [width, setWidth] = useState(0);
@@ -227,6 +228,7 @@ function SandBox({
   return createElement("iframe", {
     ref: useMergeRefs([ref, useFocusableIframe()]),
     title: title,
+    tabIndex: tabIndex,
     className: "components-sandbox",
     sandbox: "allow-scripts allow-same-origin allow-presentation",
     onFocus: onFocus,

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

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

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

package/build-module/sandbox/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/sandbox/types.ts"],"sourcesContent":["export type SandBoxProps = {\n\t/**\n\t * The HTML to render in the body of the iframe document.\n\t *\n\t * @default ''\n\t */\n\thtml?: string;\n\t/**\n\t * The `<title>` of the iframe document.\n\t *\n\t * @default ''\n\t */\n\ttitle?: string;\n\t/**\n\t * The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.\n\t */\n\ttype?: string;\n\t/**\n\t * An array of CSS strings to inject into the `<head>` of the iframe document.\n\t *\n\t * @default []\n\t */\n\tstyles?: string[];\n\t/**\n\t * An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.\n\t *\n\t * @default []\n\t */\n\tscripts?: string[];\n\t/**\n\t * The `onFocus` callback for the iframe.\n\t */\n\tonFocus?: React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ];\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/sandbox/types.ts"],"sourcesContent":["export type SandBoxProps = {\n\t/**\n\t * The HTML to render in the body of the iframe document.\n\t *\n\t * @default ''\n\t */\n\thtml?: string;\n\t/**\n\t * The `<title>` of the iframe document.\n\t *\n\t * @default ''\n\t */\n\ttitle?: string;\n\t/**\n\t * The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.\n\t */\n\ttype?: string;\n\t/**\n\t * An array of CSS strings to inject into the `<head>` of the iframe document.\n\t *\n\t * @default []\n\t */\n\tstyles?: string[];\n\t/**\n\t * An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.\n\t *\n\t * @default []\n\t */\n\tscripts?: string[];\n\t/**\n\t * The `onFocus` callback for the iframe.\n\t */\n\tonFocus?: React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ];\n\t/**\n\t * The `tabindex` the iframe should receive.\n\t *\n\t * @default 0\n\t */\n\ttabIndex?: HTMLElement[ 'tabIndex' ];\n};\n"],"mappings":""}

package/build-module/scrollable/component.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -7,7 +7,7 @@ import { createElement } from "@wordpress/element";
  * Internal dependencies
  */
 
-import { contextConnect } from '../ui/context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useScrollable } from './hook';
 function UnconnectedScrollable(props, forwardedRef) {

package/build-module/scrollable/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","View","useScrollable","UnconnectedScrollable","props","forwardedRef","scrollableProps","createElement","ref","Scrollable"],"sources":["@wordpress/components/src/scrollable/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { contextConnect } from '../ui/context';\nimport { View } from '../view';\nimport { useScrollable } from './hook';\nimport type { ScrollableProps } from './types';\n\nfunction UnconnectedScrollable(\n\tprops: WordPressComponentProps< ScrollableProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst scrollableProps = useScrollable( props );\n\n\treturn <View { ...scrollableProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Scrollable` is a layout component that content in a scrollable container.\n *\n * ```jsx\n * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Scrollable style={ { maxHeight: 200 } }>\n * \t\t\t<div style={ { height: 500 } }>...</div>\n * \t\t</Scrollable>\n * \t);\n * }\n * ```\n */\nexport const Scrollable = contextConnect( UnconnectedScrollable, 'Scrollable' );\n\nexport default Scrollable;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,aAAa,QAAQ,QAAQ;AAGtC,SAASC,qBAAqBA,CAC7BC,KAAwD,EACxDC,YAAiC,EAChC;EACD,MAAMC,eAAe,GAAGJ,aAAa,CAAEE,KAAM,CAAC;EAE9C,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,eAAe;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AAC5D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,UAAU,GAAGT,cAAc,CAAEG,qBAAqB,EAAE,YAAa,CAAC;AAE/E,eAAeM,UAAU"}
+{"version":3,"names":["contextConnect","View","useScrollable","UnconnectedScrollable","props","forwardedRef","scrollableProps","createElement","ref","Scrollable"],"sources":["@wordpress/components/src/scrollable/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useScrollable } from './hook';\nimport type { ScrollableProps } from './types';\n\nfunction UnconnectedScrollable(\n\tprops: WordPressComponentProps< ScrollableProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst scrollableProps = useScrollable( props );\n\n\treturn <View { ...scrollableProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Scrollable` is a layout component that content in a scrollable container.\n *\n * ```jsx\n * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Scrollable style={ { maxHeight: 200 } }>\n * \t\t\t<div style={ { height: 500 } }>...</div>\n * \t\t</Scrollable>\n * \t);\n * }\n * ```\n */\nexport const Scrollable = contextConnect( UnconnectedScrollable, 'Scrollable' );\n\nexport default Scrollable;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,aAAa,QAAQ,QAAQ;AAGtC,SAASC,qBAAqBA,CAC7BC,KAAwD,EACxDC,YAAiC,EAChC;EACD,MAAMC,eAAe,GAAGJ,aAAa,CAAEE,KAAM,CAAC;EAE9C,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,eAAe;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AAC5D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,UAAU,GAAGT,cAAc,CAAEG,qBAAqB,EAAE,YAAa,CAAC;AAE/E,eAAeM,UAAU"}

package/build-module/scrollable/hook.js

@@ -7,7 +7,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 
-import { useContextSystem } from '../ui/context';
+import { useContextSystem } from '../context';
 import * as styles from './styles';
 import { useCx } from '../utils/hooks/use-cx';
 export function useScrollable(props) {

package/build-module/scrollable/hook.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useContextSystem","styles","useCx","useScrollable","props","className","scrollDirection","smoothScroll","otherProps","cx","classes","Scrollable","scrollableScrollbar","scrollX","scrollY","scrollAuto"],"sources":["@wordpress/components/src/scrollable/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useContextSystem } from '../ui/context';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nimport type { ScrollableProps } from './types';\n\nexport function useScrollable(\n\tprops: WordPressComponentProps< ScrollableProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tscrollDirection = 'y',\n\t\tsmoothScroll = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Scrollable' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Scrollable,\n\t\t\t\tstyles.scrollableScrollbar,\n\t\t\t\tsmoothScroll && styles.smoothScroll,\n\t\t\t\tscrollDirection === 'x' && styles.scrollX,\n\t\t\t\tscrollDirection === 'y' && styles.scrollY,\n\t\t\t\tscrollDirection === 'auto' && styles.scrollAuto,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, scrollDirection, smoothScroll ]\n\t);\n\n\treturn { ...otherProps, className: classes };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,eAAe;AAChD,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,SAASC,KAAK,QAAQ,uBAAuB;AAG7C,OAAO,SAASC,aAAaA,CAC5BC,KAAwD,EACvD;EACD,MAAM;IACLC,SAAS;IACTC,eAAe,GAAG,GAAG;IACrBC,YAAY,GAAG,KAAK;IACpB,GAAGC;EACJ,CAAC,GAAGR,gBAAgB,CAAEI,KAAK,EAAE,YAAa,CAAC;EAE3C,MAAMK,EAAE,GAAGP,KAAK,CAAC,CAAC;EAElB,MAAMQ,OAAO,GAAGX,OAAO,CACtB,MACCU,EAAE,CACDR,MAAM,CAACU,UAAU,EACjBV,MAAM,CAACW,mBAAmB,EAC1BL,YAAY,IAAIN,MAAM,CAACM,YAAY,EACnCD,eAAe,KAAK,GAAG,IAAIL,MAAM,CAACY,OAAO,EACzCP,eAAe,KAAK,GAAG,IAAIL,MAAM,CAACa,OAAO,EACzCR,eAAe,KAAK,MAAM,IAAIL,MAAM,CAACc,UAAU,EAC/CV,SACD,CAAC,EACF,CAAEA,SAAS,EAAEI,EAAE,EAAEH,eAAe,EAAEC,YAAY,CAC/C,CAAC;EAED,OAAO;IAAE,GAAGC,UAAU;IAAEH,SAAS,EAAEK;EAAQ,CAAC;AAC7C"}
+{"version":3,"names":["useMemo","useContextSystem","styles","useCx","useScrollable","props","className","scrollDirection","smoothScroll","otherProps","cx","classes","Scrollable","scrollableScrollbar","scrollX","scrollY","scrollAuto"],"sources":["@wordpress/components/src/scrollable/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nimport type { ScrollableProps } from './types';\n\nexport function useScrollable(\n\tprops: WordPressComponentProps< ScrollableProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tscrollDirection = 'y',\n\t\tsmoothScroll = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Scrollable' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Scrollable,\n\t\t\t\tstyles.scrollableScrollbar,\n\t\t\t\tsmoothScroll && styles.smoothScroll,\n\t\t\t\tscrollDirection === 'x' && styles.scrollX,\n\t\t\t\tscrollDirection === 'y' && styles.scrollY,\n\t\t\t\tscrollDirection === 'auto' && styles.scrollAuto,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, scrollDirection, smoothScroll ]\n\t);\n\n\treturn { ...otherProps, className: classes };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,SAASC,KAAK,QAAQ,uBAAuB;AAG7C,OAAO,SAASC,aAAaA,CAC5BC,KAAwD,EACvD;EACD,MAAM;IACLC,SAAS;IACTC,eAAe,GAAG,GAAG;IACrBC,YAAY,GAAG,KAAK;IACpB,GAAGC;EACJ,CAAC,GAAGR,gBAAgB,CAAEI,KAAK,EAAE,YAAa,CAAC;EAE3C,MAAMK,EAAE,GAAGP,KAAK,CAAC,CAAC;EAElB,MAAMQ,OAAO,GAAGX,OAAO,CACtB,MACCU,EAAE,CACDR,MAAM,CAACU,UAAU,EACjBV,MAAM,CAACW,mBAAmB,EAC1BL,YAAY,IAAIN,MAAM,CAACM,YAAY,EACnCD,eAAe,KAAK,GAAG,IAAIL,MAAM,CAACY,OAAO,EACzCP,eAAe,KAAK,GAAG,IAAIL,MAAM,CAACa,OAAO,EACzCR,eAAe,KAAK,MAAM,IAAIL,MAAM,CAACc,UAAU,EAC/CV,SACD,CAAC,EACF,CAAEA,SAAS,EAAEI,EAAE,EAAEH,eAAe,EAAEC,YAAY,CAC/C,CAAC;EAED,OAAO;IAAE,GAAGC,UAAU;IAAEH,SAAS,EAAEK;EAAQ,CAAC;AAC7C"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","useInstanceId","useMergeRefs","__","Icon","search","closeSmall","forwardRef","useRef","Button","BaseControl","UnforwardedSearchControl","__nextHasNoMarginBottom","__next40pxDefaultSize","className","onChange","onKeyDown","value","label","placeholder","hideLabelFromVision","help","onClose","size","restProps","forwardedRef","searchRef","instanceId","SearchControl","id","renderRightButton","createElement","icon","onClick","current","focus","ref","type","event","target","autoComplete"],"sources":["@wordpress/components/src/search-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\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, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { SearchControlProps } from './types';\nimport type { ForwardedRef } from 'react';\n\nfunction UnforwardedSearchControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tonChange,\n\t\tonKeyDown,\n\t\tvalue,\n\t\tlabel,\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\thelp,\n\t\tonClose,\n\t\tsize = 'default',\n\t\t...restProps\n\t}: WordPressComponentProps< SearchControlProps, 'input', false >,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\tconst searchRef = useRef< HTMLInputElement >();\n\tconst instanceId = useInstanceId( SearchControl );\n\tconst id = `components-search-control-${ instanceId }`;\n\n\tconst renderRightButton = () => {\n\t\tif ( onClose ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close search' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( !! value ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Reset search' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonChange( '' );\n\t\t\t\t\t\tsearchRef.current?.focus();\n\t\t\t\t\t} }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn <Icon icon={ search } />;\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( className, 'components-search-control', {\n\t\t\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t\t\t'is-size-compact': size === 'compact',\n\t\t\t} ) }\n\t\t>\n\t\t\t<div className=\"components-search-control__input-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\t\tclassName=\"components-search-control__input\"\n\t\t\t\t\tid={ id }\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tonChange={ ( event ) => onChange( event.target.value ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tvalue={ value || '' }\n\t\t\t\t/>\n\t\t\t\t<div className=\"components-search-control__icon\">\n\t\t\t\t\t{ renderRightButton() }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</BaseControl>\n\t);\n}\n\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 *       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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"}
+{"version":3,"names":["classnames","useInstanceId","useMergeRefs","__","Icon","search","closeSmall","forwardRef","useRef","Button","BaseControl","UnforwardedSearchControl","__nextHasNoMarginBottom","__next40pxDefaultSize","className","onChange","onKeyDown","value","label","placeholder","hideLabelFromVision","help","onClose","size","restProps","forwardedRef","searchRef","instanceId","SearchControl","id","renderRightButton","createElement","icon","onClick","current","focus","ref","type","event","target","autoComplete"],"sources":["@wordpress/components/src/search-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\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, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { SearchControlProps } from './types';\nimport type { ForwardedRef } from 'react';\n\nfunction UnforwardedSearchControl(\n\t{\n\t\t__nextHasNoMarginBottom,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tonChange,\n\t\tonKeyDown,\n\t\tvalue,\n\t\tlabel,\n\t\tplaceholder = __( 'Search' ),\n\t\thideLabelFromVision = true,\n\t\thelp,\n\t\tonClose,\n\t\tsize = 'default',\n\t\t...restProps\n\t}: WordPressComponentProps< SearchControlProps, 'input', false >,\n\tforwardedRef: ForwardedRef< HTMLInputElement >\n) {\n\tconst searchRef = useRef< HTMLInputElement >();\n\tconst instanceId = useInstanceId( SearchControl );\n\tconst id = `components-search-control-${ instanceId }`;\n\n\tconst renderRightButton = () => {\n\t\tif ( onClose ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close search' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tif ( !! value ) {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Reset search' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonChange( '' );\n\t\t\t\t\t\tsearchRef.current?.focus();\n\t\t\t\t\t} }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn <Icon icon={ search } />;\n\t};\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( className, 'components-search-control', {\n\t\t\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t\t\t'is-size-compact': size === 'compact',\n\t\t\t} ) }\n\t\t>\n\t\t\t<div className=\"components-search-control__input-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tref={ useMergeRefs( [ searchRef, forwardedRef ] ) }\n\t\t\t\t\tclassName=\"components-search-control__input\"\n\t\t\t\t\tid={ id }\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tonChange={ ( event ) => onChange( event.target.value ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tvalue={ value || '' }\n\t\t\t\t/>\n\t\t\t\t<div className=\"components-search-control__icon\">\n\t\t\t\t\t{ renderRightButton() }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</BaseControl>\n\t);\n}\n\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 *       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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"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

package/build-module/select-control/chevron-down.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/select-control/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -17,6 +17,7 @@ import BaseControl from '../base-control';
 import InputBase from '../input-control/input-base';
 import { Select } from './styles/select-control-styles';
 import SelectControlChevronDown from './chevron-down';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 const noop = () => {};
 function useUniqueId(idProp) {
   const instanceId = useInstanceId(SelectControl);
@@ -42,10 +43,10 @@ function UnforwardedSelectControl(props, ref) {
     children,
     prefix,
     suffix,
-    __next36pxDefaultSize = false,
+    __next40pxDefaultSize = false,
     __nextHasNoMarginBottom = false,
     ...restProps
-  } = props;
+  } = useDeprecated36pxDefaultSizeProp(props, 'wp.components.SelectControl', '6.4');
   const [isFocused, setIsFocused] = useState(false);
   const id = useUniqueId(idProp);
   const helpId = help ? `${id}__help` : undefined;
@@ -93,10 +94,10 @@ function UnforwardedSelectControl(props, ref) {
     suffix: suffix || !multiple && createElement(SelectControlChevronDown, null),
     prefix: prefix,
     labelPosition: labelPosition,
-    __next36pxDefaultSize: __next36pxDefaultSize
+    __next40pxDefaultSize: __next40pxDefaultSize
   }, createElement(Select, {
     ...restProps,
-    __next36pxDefaultSize: __next36pxDefaultSize,
+    __next40pxDefaultSize: __next40pxDefaultSize,
     "aria-describedby": helpId,
     className: "components-select-control__input",
     disabled: disabled,

package/build-module/select-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classNames","useInstanceId","useState","forwardRef","BaseControl","InputBase","Select","SelectControlChevronDown","noop","useUniqueId","idProp","instanceId","SelectControl","id","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","label","multiple","onBlur","onChange","onFocus","options","size","value","valueProp","labelPosition","children","prefix","suffix","__next36pxDefaultSize","__nextHasNoMarginBottom","restProps","isFocused","setIsFocused","helpId","undefined","length","handleOnBlur","event","handleOnFocus","handleOnChange","selectedOptions","Array","from","target","filter","selected","newValues","map","classes","createElement","selectSize","option","index","key","hidden"],"sources":["@wordpress/components/src/select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport InputBase from '../input-control/input-base';\nimport { Select } from './styles/select-control-styles';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { SelectControlProps } from './types';\nimport SelectControlChevronDown from './chevron-down';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( SelectControl );\n\tconst id = `inspector-select-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nfunction UnforwardedSelectControl(\n\tprops: WordPressComponentProps< SelectControlProps, 'select', false >,\n\tref: React.ForwardedRef< HTMLSelectElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision,\n\t\tid: idProp,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonBlur = noop,\n\t\tonChange,\n\t\tonFocus = noop,\n\t\toptions = [],\n\t\tsize = 'default',\n\t\tvalue: valueProp,\n\t\tlabelPosition = 'top',\n\t\tchildren,\n\t\tprefix,\n\t\tsuffix,\n\t\t__next36pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\t...restProps\n\t} = props;\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst id = useUniqueId( idProp );\n\tconst helpId = help ? `${ id }__help` : undefined;\n\n\t// Disable reason: A select with an onchange throws a warning.\n\tif ( ! options?.length && ! children ) return null;\n\n\tconst handleOnBlur = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t};\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t};\n\n\tconst handleOnChange = (\n\t\tevent: React.ChangeEvent< HTMLSelectElement >\n\t) => {\n\t\tif ( props.multiple ) {\n\t\t\tconst selectedOptions = Array.from( event.target.options ).filter(\n\t\t\t\t( { selected } ) => selected\n\t\t\t);\n\t\t\tconst newValues = selectedOptions.map( ( { value } ) => value );\n\t\t\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value, { event } );\n\t};\n\n\tconst classes = classNames( 'components-select-control', className );\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t<InputBase\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tlabel={ label }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={\n\t\t\t\t\tsuffix || ( ! multiple && <SelectControlChevronDown /> )\n\t\t\t\t}\n\t\t\t\tprefix={ prefix }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t>\n\t\t\t\t<Select\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\taria-describedby={ helpId }\n\t\t\t\t\tclassName=\"components-select-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\tvalue={ valueProp }\n\t\t\t\t>\n\t\t\t\t\t{ children ||\n\t\t\t\t\t\toptions.map( ( option, index ) => {\n\t\t\t\t\t\t\tconst key =\n\t\t\t\t\t\t\t\toption.id ||\n\t\t\t\t\t\t\t\t`${ option.label }-${ option.value }-${ index }`;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tdisabled={ option.disabled }\n\t\t\t\t\t\t\t\t\thidden={ option.hidden }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</InputBase>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * ```jsx\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n *   const [ size, setSize ] = useState( '50%' );\n *\n *   return (\n *     <SelectControl\n *       label=\"Size\"\n *       value={ size }\n *       options={ [\n *         { label: 'Big', value: '100%' },\n *         { label: 'Medium', value: '50%' },\n *         { label: 'Small', value: '25%' },\n *       ] }\n *       onChange={ setSize }\n *     />\n *   );\n * };\n * ```\n */\nexport const SelectControl = forwardRef( UnforwardedSelectControl );\n\nexport default SelectControl;\n"],"mappings":"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"}
+{"version":3,"names":["classNames","useInstanceId","useState","forwardRef","BaseControl","InputBase","Select","SelectControlChevronDown","useDeprecated36pxDefaultSizeProp","noop","useUniqueId","idProp","instanceId","SelectControl","id","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","label","multiple","onBlur","onChange","onFocus","options","size","value","valueProp","labelPosition","children","prefix","suffix","__next40pxDefaultSize","__nextHasNoMarginBottom","restProps","isFocused","setIsFocused","helpId","undefined","length","handleOnBlur","event","handleOnFocus","handleOnChange","selectedOptions","Array","from","target","filter","selected","newValues","map","classes","createElement","selectSize","option","index","key","hidden"],"sources":["@wordpress/components/src/select-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport InputBase from '../input-control/input-base';\nimport { Select } from './styles/select-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport type { SelectControlProps } from './types';\nimport SelectControlChevronDown from './chevron-down';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( SelectControl );\n\tconst id = `inspector-select-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nfunction UnforwardedSelectControl(\n\tprops: WordPressComponentProps< SelectControlProps, 'select', false >,\n\tref: React.ForwardedRef< HTMLSelectElement >\n) {\n\tconst {\n\t\tclassName,\n\t\tdisabled = false,\n\t\thelp,\n\t\thideLabelFromVision,\n\t\tid: idProp,\n\t\tlabel,\n\t\tmultiple = false,\n\t\tonBlur = noop,\n\t\tonChange,\n\t\tonFocus = noop,\n\t\toptions = [],\n\t\tsize = 'default',\n\t\tvalue: valueProp,\n\t\tlabelPosition = 'top',\n\t\tchildren,\n\t\tprefix,\n\t\tsuffix,\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp(\n\t\tprops,\n\t\t'wp.components.SelectControl',\n\t\t'6.4'\n\t);\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst id = useUniqueId( idProp );\n\tconst helpId = help ? `${ id }__help` : undefined;\n\n\t// Disable reason: A select with an onchange throws a warning.\n\tif ( ! options?.length && ! children ) return null;\n\n\tconst handleOnBlur = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused( false );\n\t};\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused( true );\n\t};\n\n\tconst handleOnChange = (\n\t\tevent: React.ChangeEvent< HTMLSelectElement >\n\t) => {\n\t\tif ( props.multiple ) {\n\t\t\tconst selectedOptions = Array.from( event.target.options ).filter(\n\t\t\t\t( { selected } ) => selected\n\t\t\t);\n\t\t\tconst newValues = selectedOptions.map( ( { value } ) => value );\n\t\t\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value, { event } );\n\t};\n\n\tconst classes = classNames( 'components-select-control', className );\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t<InputBase\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tlabel={ label }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={\n\t\t\t\t\tsuffix || ( ! multiple && <SelectControlChevronDown /> )\n\t\t\t\t}\n\t\t\t\tprefix={ prefix }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t>\n\t\t\t\t<Select\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\taria-describedby={ helpId }\n\t\t\t\t\tclassName=\"components-select-control__input\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\tvalue={ valueProp }\n\t\t\t\t>\n\t\t\t\t\t{ children ||\n\t\t\t\t\t\toptions.map( ( option, index ) => {\n\t\t\t\t\t\t\tconst key =\n\t\t\t\t\t\t\t\toption.id ||\n\t\t\t\t\t\t\t\t`${ option.label }-${ option.value }-${ index }`;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\t\t\tdisabled={ option.disabled }\n\t\t\t\t\t\t\t\t\thidden={ option.hidden }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t</Select>\n\t\t\t</InputBase>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `SelectControl` allows users to select from a single or multiple option menu.\n * It functions as a wrapper around the browser's native `<select>` element.\n *\n * ```jsx\n * import { SelectControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MySelectControl = () => {\n *   const [ size, setSize ] = useState( '50%' );\n *\n *   return (\n *     <SelectControl\n *       label=\"Size\"\n *       value={ size }\n *       options={ [\n *         { label: 'Big', value: '100%' },\n *         { label: 'Medium', value: '50%' },\n *         { label: 'Small', value: '25%' },\n *       ] }\n *       onChange={ setSize }\n *     />\n *   );\n * };\n * ```\n */\nexport const SelectControl = forwardRef( UnforwardedSelectControl );\n\nexport default SelectControl;\n"],"mappings":"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"}

package/build-module/select-control/index.native.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */