npm - @wordpress/components - Versions diffs - 29.13.1-next.719a03cbe.0 → 30.1.0 - Mend

@wordpress/components 29.13.1-next.719a03cbe.0 → 30.1.0

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

Files changed (280) hide show

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

	@@ -1 +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","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","Mark","markLabelFill","isFilled","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.is-marked & {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: width ease 0.1s;\n\t\t}\n\t}\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\tmargin-top: 17px;\n`;\n\nexport const Mark = styled.span`\n\tposition: absolute;\n\tleft: 0;\n\ttop: -4px;\n\theight: 4px;\n\twidth: 2px;\n\ttransform: translateX( -50% );\n\tbackground-color: ${ COLORS.ui.background };\n\tz-index: 1;\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: 8px;\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\tz-index: 3;\n\n\t.is-marked & {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: left ease 0.1s;\n\t\t}\n\t}\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":[]}
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","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","Mark","markLabelFill","isFilled","MarkLabel","left","transform","thumbColor","theme","accent","ThumbWrapper","radiusRound","thumbFocus","isFocused","Thumb","elevationXSmall","InputRange","tooltipShow","show","_ref","_ref2","tooltipPlacement","placement","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.is-marked & {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: width ease 0.1s;\n\t\t}\n\t}\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\tmargin-top: 17px;\n`;\n\nexport const Mark = styled.span`\n\tposition: absolute;\n\tleft: 0;\n\ttop: -4px;\n\theight: 4px;\n\twidth: 2px;\n\ttransform: translateX( -50% );\n\tbackground-color: ${ COLORS.ui.background };\n\tz-index: 1;\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: 8px;\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\tz-index: 3;\n\n\t.is-marked & {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: left ease 0.1s;\n\t\t}\n\t}\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 tooltipPlacement = ( { placement }: TooltipProps ) => {\n\tconst isBottom = placement === '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${ tooltipPlacement };\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 CHANGED Viewed

@@ -25,7 +25,7 @@ function SimpleTooltip(props) {
   const {
     className,
     inputRef,
-    tooltipPosition,
+    tooltipPlacement,
     show = false,
     style = {},
     value = 0,
@@ -33,9 +33,9 @@ function SimpleTooltip(props) {
     zIndex = 100,
     ...restProps
   } = props;
-  const position = useTooltipPosition({
+  const placement = useTooltipPlacement({
     inputRef,
-    tooltipPosition
+    tooltipPlacement
   });
   const classes = (0, _clsx.default)('components-simple-tooltip', className);
   const styles = {
@@ -46,32 +46,32 @@ function SimpleTooltip(props) {
     ...restProps,
     "aria-hidden": "false",
     className: classes,
-    position: position,
+    placement: placement,
     show: show,
     role: "tooltip",
     style: styles,
     children: renderTooltipContent(value)
   });
 }
-function useTooltipPosition({
+function useTooltipPlacement({
   inputRef,
-  tooltipPosition
+  tooltipPlacement
 }) {
-  const [position, setPosition] = (0, _element.useState)();
-  const setTooltipPosition = (0, _element.useCallback)(() => {
+  const [placement, setPlacement] = (0, _element.useState)();
+  const setTooltipPlacement = (0, _element.useCallback)(() => {
     if (inputRef && inputRef.current) {
-      setPosition(tooltipPosition);
+      setPlacement(tooltipPlacement);
     }
-  }, [tooltipPosition, inputRef]);
+  }, [tooltipPlacement, inputRef]);
   (0, _element.useEffect)(() => {
-    setTooltipPosition();
-  }, [setTooltipPosition]);
+    setTooltipPlacement();
+  }, [setTooltipPlacement]);
   (0, _element.useEffect)(() => {
-    window.addEventListener('resize', setTooltipPosition);
+    window.addEventListener('resize', setTooltipPlacement);
     return () => {
-      window.removeEventListener('resize', setTooltipPosition);
+      window.removeEventListener('resize', setTooltipPlacement);
     };
   });
-  return position;
+  return placement;
 }
 //# sourceMappingURL=tooltip.js.map

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

	@@ -1 +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=\"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":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_rangeControlStyles","_jsxRuntime","SimpleTooltip","props","className","inputRef","tooltipPlacement","show","style","value","renderTooltipContent","v","zIndex","restProps","placement","useTooltipPlacement","classes","clsx","styles","jsx","Tooltip","role","children","setPlacement","useState","setTooltipPlacement","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\ttooltipPlacement,\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 placement = useTooltipPlacement( { inputRef, tooltipPlacement } );\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\tplacement={ placement }\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 useTooltipPlacement( { inputRef, tooltipPlacement }: TooltipProps ) {\n\tconst [ placement, setPlacement ] = useState< string >();\n\n\tconst setTooltipPlacement = useCallback( () => {\n\t\tif ( inputRef && inputRef.current ) {\n\t\t\tsetPlacement( tooltipPlacement );\n\t\t}\n\t}, [ tooltipPlacement, inputRef ] );\n\n\tuseEffect( () => {\n\t\tsetTooltipPlacement();\n\t}, [ setTooltipPlacement ] );\n\n\tuseEffect( () => {\n\t\twindow.addEventListener( 'resize', setTooltipPlacement );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'resize', setTooltipPlacement );\n\t\t};\n\t} );\n\n\treturn placement;\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,gBAAgB;IAChBC,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,SAAS,GAAGC,mBAAmB,CAAE;IAAEV,QAAQ;IAAEC;EAAiB,CAAE,CAAC;EACvE,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,SAAS,EAAGA,SAAW;IACvBP,IAAI,EAAGA,IAAM;IACbc,IAAI,EAAC,SAAS;IACdb,KAAK,EAAGU,MAAQ;IAAAI,QAAA,EAEdZ,oBAAoB,CAAED,KAAM;EAAC,CACvB,CAAC;AAEZ;AAEA,SAASM,mBAAmBA,CAAE;EAAEV,QAAQ;EAAEC;AAA+B,CAAC,EAAG;EAC5E,MAAM,CAAEQ,SAAS,EAAES,YAAY,CAAE,GAAG,IAAAC,iBAAQ,EAAW,CAAC;EAExD,MAAMC,mBAAmB,GAAG,IAAAC,oBAAW,EAAE,MAAM;IAC9C,IAAKrB,QAAQ,IAAIA,QAAQ,CAACsB,OAAO,EAAG;MACnCJ,YAAY,CAAEjB,gBAAiB,CAAC;IACjC;EACD,CAAC,EAAE,CAAEA,gBAAgB,EAAED,QAAQ,CAAG,CAAC;EAEnC,IAAAuB,kBAAS,EAAE,MAAM;IAChBH,mBAAmB,CAAC,CAAC;EACtB,CAAC,EAAE,CAAEA,mBAAmB,CAAG,CAAC;EAE5B,IAAAG,kBAAS,EAAE,MAAM;IAChBC,MAAM,CAACC,gBAAgB,CAAE,QAAQ,EAAEL,mBAAoB,CAAC;IAExD,OAAO,MAAM;MACZI,MAAM,CAACE,mBAAmB,CAAE,QAAQ,EAAEN,mBAAoB,CAAC;IAC5D,CAAC;EACF,CAAE,CAAC;EAEH,OAAOX,SAAS;AACjB","ignoreList":[]}

package/build/range-control/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/range-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type {\n\tCSSProperties,\n\tFocusEventHandler,\n\tMouseEventHandler,\n\tMutableRefObject,\n} from 'react';\n\n/\n Internal dependencies\n /\nimport type { BaseControlProps } from '../base-control/types';\nimport type { IconType } from '../icon';\n\nexport type NumericProps = {\n\t/\n\t The minimum `value` allowed.\n\t \n\t @default 0\n\t /\n\tmin?: number;\n\t/\n\t The maximum `value` allowed.\n\t \n\t @default 100\n\t /\n\tmax?: number;\n\t/\n\t The current value of the range slider.\n\t /\n\tvalue?: number;\n};\n\nexport type RangeMark = { value: number; label?: string };\n// An expanded definition of this type is used in MarkProps to improve Storybook\n// generated docs.\nexport type RangeMarks = boolean \| RangeMark[];\n\nexport type MarksProps = NumericProps & {\n\t/\n\t Disables the `input`, preventing new values from being applied.\n\t \n\t @default false\n\t /\n\tdisabled?: boolean;\n\t/\n\t Renders a visual representation of `step` ticks. Custom mark indicators\n\t * can be provided by an `Array`.\n\t \n\t @default false\n\t /\n\tmarks?: boolean \| { value: number; label?: string }[];\n\t/\n\t The minimum amount by which `value` changes. It is also a factor in\n\t * validation as `value` must be a multiple of `step` (offset by `min`) to\n\t * be valid. Accepts the special string value `any` that voids the\n\t * validation constraint and overrides both `withInputField` and\n\t * `showTooltip` props to `false`.\n\t \n\t @default 1\n\t /\n\tstep?: number \| 'any';\n};\n\nexport type RangeMarkProps = {\n\tisFilled?: boolean;\n\tlabel?: string;\n\tdisabled?: boolean;\n\tkey?: string;\n\tstyle?: CSSProperties;\n};\n\nexport type ControlledRangeValue = number \| '' \| null;\n\nexport type RangeControlProps = Pick<\n\tBaseControlProps,\n\t'hideLabelFromVision' \| 'help' \| '__nextHasNoMarginBottom'\n> &\n\tMarksProps & {\n\t\t/\n\t\t If this property is added, an Icon component will be rendered\n\t\t * after the slider with the icon equal to afterIcon.\n\t\t \n\t\t For more information on `IconType` see the Icon component:\n\t\t * /packages/components/src/icon/index.tsx\n\t\t /\n\t\tafterIcon?: IconType;\n\t\t/\n\t\t If this property is true, a button to reset the slider is\n\t\t * rendered.\n\t\t \n\t\t @default false\n\t\t /\n\t\tallowReset?: boolean;\n\t\t/\n\t\t If this property is added, an Icon component will be rendered\n\t\t * before the slider with the icon equal to beforeIcon.\n\t\t \n\t\t For more information on `IconType` see the Icon component:\n\t\t * /packages/components/src/icon/index.tsx\n\t\t /\n\t\tbeforeIcon?: IconType;\n\t\t/\n\t\t CSS color string for the `RangeControl` wrapper.\n\t\t \n\t\t @default COLORS.theme.accent\n\t\t * @see /packages/components/src/utils/colors-values.js\n\t\t /\n\t\tcolor?: CSSProperties[ 'color' ];\n\t\t/\n\t\t The current input to use as a fallback if `value` is currently\n\t\t * `undefined`.\n\t\t /\n\t\tcurrentInput?: number;\n\t\t/\n\t\t An icon to be shown above the slider next to its container title.\n\t\t /\n\t\ticon?: string;\n\t\t/\n\t\t The slider starting position, used when no `value` is passed.\n\t\t * The `initialPosition` will be clamped between the provided `min`\n\t\t * and `max` prop values.\n\t\t /\n\t\tinitialPosition?: number;\n\t\t/\n\t\t Passed as a prop to the `NumberControl` component and is only\n\t\t * applicable if `withInputField` is true. If true, while the number\n\t\t * input has focus, pressing `UP` or `DOWN` along with the `SHIFT` key\n\t\t * will change the value by the `shiftStep` value.\n\t\t \n\t\t @default true\n\t\t /\n\t\tisShiftStepEnabled?: boolean;\n\t\t/\n\t\t If this property is added, a label will be generated using label\n\t\t * property as the content.\n\t\t /\n\t\tlabel?: string;\n\t\t/\n\t\t Callback for when `RangeControl` input loses focus.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonBlur?: FocusEventHandler< HTMLInputElement >;\n\t\t/\n\t\t A function that receives the new value. The value will be less than\n\t\t * `max` and more than `min` unless a reset (enabled by `allowReset`)\n\t\t * has occurred. In which case the value will be either that of\n\t\t * `resetFallbackValue` if it has been specified or otherwise\n\t\t * `undefined`.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonChange?: ( value?: number ) => void;\n\t\t/\n\t\t Callback for when `RangeControl` input gains focus.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonFocus?: FocusEventHandler< HTMLInputElement >;\n\t\t/\n\t\t Callback for when mouse exits the `RangeControl`.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonMouseLeave?: MouseEventHandler< HTMLInputElement >;\n\t\t/\n\t\t Callback for when mouse moves within the `RangeControl`.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonMouseMove?: MouseEventHandler< HTMLInputElement >;\n\t\t/\n\t\t CSS color string to customize the rail element's background.\n\t\t /\n\t\trailColor?: CSSProperties[ 'color' ];\n\t\t/\n\t\t A way to customize the rendered UI of the value.\n\t\t \n\t\t @default ( value ) => value\n\t\t /\n\t\trenderTooltipContent?: (\n\t\t\tvalue?: ControlledRangeValue\n\t\t) => string \| number \| null \| undefined;\n\t\t/\n\t\t The value to revert to if the Reset button is clicked (enabled by\n\t\t * `allowReset`)\n\t\t /\n\t\tresetFallbackValue?: number;\n\t\t/\n\t\t Define if separator line under/above control row should be disabled\n\t\t * or full width. By default it is placed below excluding underline the\n\t\t * control icon.\n\t\t /\n\t\tseparatorType?: 'none' \| 'fullWidth' \| 'topFullWidth';\n\t\t/\n\t\t Passed as a prop to the `NumberControl` component and is only\n\t\t * applicable if `withInputField` and `isShiftStepEnabled` are both true\n\t\t * and while the number input has focus. Acts as a multiplier of `step`.\n\t\t \n\t\t @default 10\n\t\t /\n\t\tshiftStep?: number;\n\t\t/\n\t\t Start opting into the larger default height that will become the default size in a future version.\n\t\t \n\t\t @default false\n\t\t /\n\t\t__next40pxDefaultSize?: boolean;\n\t\t/\n\t\t Forcing the Tooltip UI to show or hide. This is overridden to `false`\n\t\t * when `step` is set to the special string value `any`.\n\t\t /\n\t\tshowTooltip?: boolean;\n\t\t/\n\t\t CSS color string to customize the track element's background.\n\t\t /\n\t\ttrackColor?: CSSProperties[ 'color' ];\n\t\t/\n\t\t Define if the value selection should present a stepper control or a\n\t\t * slider control in the bottom sheet on mobile. To use the stepper set\n\t\t * the type value as `stepper`. Defaults to slider if no option is\n\t\t * provided.\n\t\t /\n\t\ttype?: 'stepper';\n\t\t/\n\t\t Determines if the `input` number field will render next to the\n\t\t * RangeControl. This is overridden to `false` when `step` is set to the\n\t\t * special string value `any`.\n\t\t \n\t\t @default true\n\t\t /\n\t\twithInputField?: boolean;\n\t\t/\n\t\t Do not throw a warning for the deprecated 36px default size.\n\t\t * For internal components of other components that already throw the warning.\n\t\t \n\t\t @ignore\n\t\t /\n\t\t__shouldNotWarnDeprecated36pxSize?: boolean;\n\t};\n\nexport type RailProps = MarksProps & {\n\trailColor?: CSSProperties[ 'color' ];\n};\n\nexport type InputRangeProps = {\n\tdescribedBy?: string;\n\tlabel?: string;\n\tonMouseLeave?: MouseEventHandler< HTMLInputElement >;\n\tonMouseMove?: MouseEventHandler< HTMLInputElement >;\n\tvalue?: number \| '';\n};\n\nexport type WrapperProps = Pick<\n\tBaseControlProps,\n\t'__nextHasNoMarginBottom'\n> & {\n\tcolor?: CSSProperties[ 'color' ];\n\tmarks?: RangeMarks;\n};\n\nexport type ThumbProps = {\n\tisFocused?: boolean;\n\tdisabled?: boolean;\n};\n\nexport type TooltipProps = {\n\tshow?: boolean;\n\~~tposition~~?: string;\n\tinputRef?: MutableRefObject< HTMLElement \| undefined >;\n\~~ttooltipPosition~~?: string;\n\tvalue?: ControlledRangeValue;\n\trenderTooltipContent?: (\n\t\tvalue?: ControlledRangeValue\n\t) => string \| number \| null \| undefined;\n\tzIndex?: number;\n};\n\nexport type TrackProps = {\n\tdisabled: boolean;\n\ttrackColor: CSSProperties[ 'color' ];\n};\n\nexport type UseControlledRangeValueArgs = {\n\t/\n\t The initial value.\n\t /\n\tinitial?: number;\n\t/\n\t The maximum value.\n\t /\n\tmax: number;\n\t/\n\t The minimum value.\n\t /\n\tmin: number;\n\t/\n\t The current value.\n\t */\n\tvalue: number \| null;\n};\n\nexport type UseMarksArgs = NumericProps & {\n\tmarks: RangeMarks;\n\tstep: number;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/range-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type {\n\tCSSProperties,\n\tFocusEventHandler,\n\tMouseEventHandler,\n\tMutableRefObject,\n} from 'react';\n\n/\n Internal dependencies\n /\nimport type { BaseControlProps } from '../base-control/types';\nimport type { IconType } from '../icon';\n\nexport type NumericProps = {\n\t/\n\t The minimum `value` allowed.\n\t \n\t @default 0\n\t /\n\tmin?: number;\n\t/\n\t The maximum `value` allowed.\n\t \n\t @default 100\n\t /\n\tmax?: number;\n\t/\n\t The current value of the range slider.\n\t /\n\tvalue?: number;\n};\n\nexport type RangeMark = { value: number; label?: string };\n// An expanded definition of this type is used in MarkProps to improve Storybook\n// generated docs.\nexport type RangeMarks = boolean \| RangeMark[];\n\nexport type MarksProps = NumericProps & {\n\t/\n\t Disables the `input`, preventing new values from being applied.\n\t \n\t @default false\n\t /\n\tdisabled?: boolean;\n\t/\n\t Renders a visual representation of `step` ticks. Custom mark indicators\n\t * can be provided by an `Array`.\n\t \n\t @default false\n\t /\n\tmarks?: boolean \| { value: number; label?: string }[];\n\t/\n\t The minimum amount by which `value` changes. It is also a factor in\n\t * validation as `value` must be a multiple of `step` (offset by `min`) to\n\t * be valid. Accepts the special string value `any` that voids the\n\t * validation constraint and overrides both `withInputField` and\n\t * `showTooltip` props to `false`.\n\t \n\t @default 1\n\t /\n\tstep?: number \| 'any';\n};\n\nexport type RangeMarkProps = {\n\tisFilled?: boolean;\n\tlabel?: string;\n\tdisabled?: boolean;\n\tkey?: string;\n\tstyle?: CSSProperties;\n};\n\nexport type ControlledRangeValue = number \| '' \| null;\n\nexport type RangeControlProps = Pick<\n\tBaseControlProps,\n\t'hideLabelFromVision' \| 'help' \| '__nextHasNoMarginBottom'\n> &\n\tMarksProps & {\n\t\t/\n\t\t If this property is added, an Icon component will be rendered\n\t\t * after the slider with the icon equal to afterIcon.\n\t\t \n\t\t For more information on `IconType` see the Icon component:\n\t\t * /packages/components/src/icon/index.tsx\n\t\t /\n\t\tafterIcon?: IconType;\n\t\t/\n\t\t If this property is true, a button to reset the slider is\n\t\t * rendered.\n\t\t \n\t\t @default false\n\t\t /\n\t\tallowReset?: boolean;\n\t\t/\n\t\t If this property is added, an Icon component will be rendered\n\t\t * before the slider with the icon equal to beforeIcon.\n\t\t \n\t\t For more information on `IconType` see the Icon component:\n\t\t * /packages/components/src/icon/index.tsx\n\t\t /\n\t\tbeforeIcon?: IconType;\n\t\t/\n\t\t CSS color string for the `RangeControl` wrapper.\n\t\t \n\t\t @default COLORS.theme.accent\n\t\t * @see /packages/components/src/utils/colors-values.js\n\t\t /\n\t\tcolor?: CSSProperties[ 'color' ];\n\t\t/\n\t\t The current input to use as a fallback if `value` is currently\n\t\t * `undefined`.\n\t\t /\n\t\tcurrentInput?: number;\n\t\t/\n\t\t An icon to be shown above the slider next to its container title.\n\t\t /\n\t\ticon?: string;\n\t\t/\n\t\t The slider starting position, used when no `value` is passed.\n\t\t * The `initialPosition` will be clamped between the provided `min`\n\t\t * and `max` prop values.\n\t\t /\n\t\tinitialPosition?: number;\n\t\t/\n\t\t Passed as a prop to the `NumberControl` component and is only\n\t\t * applicable if `withInputField` is true. If true, while the number\n\t\t * input has focus, pressing `UP` or `DOWN` along with the `SHIFT` key\n\t\t * will change the value by the `shiftStep` value.\n\t\t \n\t\t @default true\n\t\t /\n\t\tisShiftStepEnabled?: boolean;\n\t\t/\n\t\t If this property is added, a label will be generated using label\n\t\t * property as the content.\n\t\t /\n\t\tlabel?: string;\n\t\t/\n\t\t Callback for when `RangeControl` input loses focus.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonBlur?: FocusEventHandler< HTMLInputElement >;\n\t\t/\n\t\t A function that receives the new value. The value will be less than\n\t\t * `max` and more than `min` unless a reset (enabled by `allowReset`)\n\t\t * has occurred. In which case the value will be either that of\n\t\t * `resetFallbackValue` if it has been specified or otherwise\n\t\t * `undefined`.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonChange?: ( value?: number ) => void;\n\t\t/\n\t\t Callback for when `RangeControl` input gains focus.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonFocus?: FocusEventHandler< HTMLInputElement >;\n\t\t/\n\t\t Callback for when mouse exits the `RangeControl`.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonMouseLeave?: MouseEventHandler< HTMLInputElement >;\n\t\t/\n\t\t Callback for when mouse moves within the `RangeControl`.\n\t\t \n\t\t @default () => void\n\t\t /\n\t\tonMouseMove?: MouseEventHandler< HTMLInputElement >;\n\t\t/\n\t\t CSS color string to customize the rail element's background.\n\t\t /\n\t\trailColor?: CSSProperties[ 'color' ];\n\t\t/\n\t\t A way to customize the rendered UI of the value.\n\t\t \n\t\t @default ( value ) => value\n\t\t /\n\t\trenderTooltipContent?: (\n\t\t\tvalue?: ControlledRangeValue\n\t\t) => string \| number \| null \| undefined;\n\t\t/\n\t\t The value to revert to if the Reset button is clicked (enabled by\n\t\t * `allowReset`)\n\t\t /\n\t\tresetFallbackValue?: number;\n\t\t/\n\t\t Define if separator line under/above control row should be disabled\n\t\t * or full width. By default it is placed below excluding underline the\n\t\t * control icon.\n\t\t /\n\t\tseparatorType?: 'none' \| 'fullWidth' \| 'topFullWidth';\n\t\t/\n\t\t Passed as a prop to the `NumberControl` component and is only\n\t\t * applicable if `withInputField` and `isShiftStepEnabled` are both true\n\t\t * and while the number input has focus. Acts as a multiplier of `step`.\n\t\t \n\t\t @default 10\n\t\t /\n\t\tshiftStep?: number;\n\t\t/\n\t\t Start opting into the larger default height that will become the default size in a future version.\n\t\t \n\t\t @default false\n\t\t /\n\t\t__next40pxDefaultSize?: boolean;\n\t\t/\n\t\t Forcing the Tooltip UI to show or hide. This is overridden to `false`\n\t\t * when `step` is set to the special string value `any`.\n\t\t /\n\t\tshowTooltip?: boolean;\n\t\t/\n\t\t CSS color string to customize the track element's background.\n\t\t /\n\t\ttrackColor?: CSSProperties[ 'color' ];\n\t\t/\n\t\t Define if the value selection should present a stepper control or a\n\t\t * slider control in the bottom sheet on mobile. To use the stepper set\n\t\t * the type value as `stepper`. Defaults to slider if no option is\n\t\t * provided.\n\t\t /\n\t\ttype?: 'stepper';\n\t\t/\n\t\t Determines if the `input` number field will render next to the\n\t\t * RangeControl. This is overridden to `false` when `step` is set to the\n\t\t * special string value `any`.\n\t\t \n\t\t @default true\n\t\t /\n\t\twithInputField?: boolean;\n\t\t/\n\t\t Do not throw a warning for the deprecated 36px default size.\n\t\t * For internal components of other components that already throw the warning.\n\t\t \n\t\t @ignore\n\t\t /\n\t\t__shouldNotWarnDeprecated36pxSize?: boolean;\n\t};\n\nexport type RailProps = MarksProps & {\n\trailColor?: CSSProperties[ 'color' ];\n};\n\nexport type InputRangeProps = {\n\tdescribedBy?: string;\n\tlabel?: string;\n\tonMouseLeave?: MouseEventHandler< HTMLInputElement >;\n\tonMouseMove?: MouseEventHandler< HTMLInputElement >;\n\tvalue?: number \| '';\n};\n\nexport type WrapperProps = Pick<\n\tBaseControlProps,\n\t'__nextHasNoMarginBottom'\n> & {\n\tcolor?: CSSProperties[ 'color' ];\n\tmarks?: RangeMarks;\n};\n\nexport type ThumbProps = {\n\tisFocused?: boolean;\n\tdisabled?: boolean;\n};\n\nexport type TooltipProps = {\n\tshow?: boolean;\n\tplacement?: string;\n\tinputRef?: MutableRefObject< HTMLElement \| undefined >;\n\ttooltipPlacement?: string;\n\tvalue?: ControlledRangeValue;\n\trenderTooltipContent?: (\n\t\tvalue?: ControlledRangeValue\n\t) => string \| number \| null \| undefined;\n\tzIndex?: number;\n};\n\nexport type TrackProps = {\n\tdisabled: boolean;\n\ttrackColor: CSSProperties[ 'color' ];\n};\n\nexport type UseControlledRangeValueArgs = {\n\t/\n\t The initial value.\n\t /\n\tinitial?: number;\n\t/\n\t The maximum value.\n\t /\n\tmax: number;\n\t/\n\t The minimum value.\n\t /\n\tmin: number;\n\t/\n\t The current value.\n\t */\n\tvalue: number \| null;\n};\n\nexport type UseMarksArgs = NumericProps & {\n\tmarks: RangeMarks;\n\tstep: number;\n};\n"],"mappings":"","ignoreList":[]}

package/build/select-control/index.js CHANGED Viewed

@@ -105,10 +105,10 @@ function UnforwardedSelectControl(props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default, {
     help: help,
     id: id,
+    className: classes,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     __associatedWPComponentName: "SelectControl",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectControlStyles.StyledInputBase, {
-      className: classes,
       disabled: disabled,
       hideLabelFromVision: hideLabelFromVision,
       id: id,

package/build/select-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_baseControl","_selectControlStyles","_chevronDown","_useDeprecatedProps","_deprecated36pxSize","_jsxRuntime","useUniqueId","idProp","instanceId","useInstanceId","SelectControl","id","SelectOptions","options","map","label","value","optionProps","index","key","jsx","children","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","multiple","onChange","size","valueProp","labelPosition","prefix","suffix","variant","__next40pxDefaultSize","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","restProps","useDeprecated36pxDefaultSizeProp","helpId","undefined","length","handleOnChange","event","selectedOptions","Array","from","target","filter","selected","newValues","classes","clsx","maybeWarnDeprecated36pxSize","componentName","default","__associatedWPComponentName","StyledInputBase","isBorderless","__unstableInputWidth","Select","selectSize","exports","forwardRef","_default"],"sources":["@wordpress/components/src/select-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport { Select, StyledInputBase } 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';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\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 SelectOptions( {\n\toptions,\n}: {\n\toptions: NonNullable< SelectControlProps[ 'options' ] >;\n} ) {\n\treturn options.map( ( { id, label, value, ...optionProps }, index ) => {\n\t\tconst key = id \|\| `${ label }-${ value }-${ index }`;\n\n\t\treturn (\n\t\t\t<option key={ key } value={ value } { ...optionProps }>\n\t\t\t\t{ label }\n\t\t\t</option>\n\t\t);\n\t} );\n}\n\nfunction UnforwardedSelectControl< V extends string >(\n\tprops: WordPressComponentProps< SelectControlProps< V >, '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\tonChange,\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\tvariant = 'default',\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp( props );\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 ) {\n\t\treturn null;\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(\n\t\t\t\t( { value } ) => value as V\n\t\t\t);\n\t\t\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value as V, { event } );\n\t};\n\n\tconst classes = clsx( 'components-select-control', className );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'SelectControl',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t} );\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\t__associatedWPComponentName=\"SelectControl\"\n\t\t>\n\t\t\t<StyledInputBase\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\tisBorderless={ variant === 'minimal' }\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__unstableInputWidth={\n\t\t\t\t\tvariant === 'minimal' ? 'auto' : undefined\n\t\t\t\t}\n\t\t\t\tvariant={ variant }\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\tonChange={ handleOnChange }\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\tvariant={ variant }\n\t\t\t\t>\n\t\t\t\t\t{ children \|\| <SelectOptions options={ options } /> }\n\t\t\t\t</Select>\n\t\t\t</StyledInputBase>\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 * __next40pxDefaultSize\n * __nextHasNoMarginBottom\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 ) as <\n\tV extends string,\n>(\n\tprops: WordPressComponentProps<\n\t\tSelectControlProps< V >,\n\t\t'select',\n\t\tfalse\n\t> & { ref?: React.Ref< HTMLSelectElement > }\n) => React.JSX.Element \| null;\n\nexport default SelectControl;\n"],"mappings":"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~~IACT2B~~,uBAAuB,EAAGA,uBAAyB;IACnDqB,2BAA2B,EAAC,eAAe;IAAAtC,QAAA,eAE3C,IAAAhB,WAAA,CAAAe,GAAA,EAACnB,oBAAA,CAAA2D,eAAe;~~MACfnC~~,~~SAAS,EAAG6B,OAAS;MACrB5B,~~QAAQ,EAAGA,QAAU;MACrBE,mBAAmB,EAAGA,mBAAqB;MAC3CjB,EAAE,EAAGA,EAAI;MACTkD,YAAY,EAAGzB,OAAO,KAAK,SAAW;MACtCrB,KAAK,EAAGA,KAAO;MACfgB,IAAI,EAAGA,IAAM;MACbI,MAAM,EACLA,MAAM,IAAM,CAAEN,QAAQ,iBAAI,IAAAxB,WAAA,CAAAe,GAAA,EAAClB,YAAA,CAAAwD,OAAwB,IAAE,CACrD;MACDxB,MAAM,EAAGA,MAAQ;MACjBD,aAAa,EAAGA,aAAe;MAC/B6B,oBAAoB,EACnB1B,OAAO,KAAK,SAAS,GAAG,MAAM,GAAGO,SACjC;MACDP,OAAO,EAAGA,OAAS;MACnBC,qBAAqB,EAAGA,qBAAuB;MAAAhB,QAAA,eAE/C,IAAAhB,WAAA,CAAAe,GAAA,EAACnB,oBAAA,CAAA8D,MAAM;QAAA,GACDvB,SAAS;QACdH,qBAAqB,EAAGA,qBAAuB;QAC/C,oBAAmBK,MAAQ;QAC3BjB,SAAS,EAAC,kCAAkC;QAC5CC,QAAQ,EAAGA,QAAU;QACrBf,EAAE,EAAGA,EAAI;QACTkB,QAAQ,EAAGA,QAAU;QACrBC,QAAQ,EAAGe,cAAgB;QAC3BrB,GAAG,EAAGA,GAAK;QACXwC,UAAU,EAAGjC,IAAM;QACnBf,KAAK,EAAGgB,SAAW;QACnBI,OAAO,EAAGA,OAAS;QAAAf,QAAA,EAEjBA,QAAQ,iBAAI,IAAAhB,WAAA,CAAAe,GAAA,EAACR,aAAa;UAACC,OAAO,EAAGA;QAAS,CAAE;MAAC,CAC5C;IAAC,CACO;EAAC,CACN,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMH,aAAa,GAAAuD,OAAA,CAAAvD,aAAA,GAAG,IAAAwD,mBAAU,EAAE5C,wBAAyB,CAQrC;AAAC,IAAA6C,QAAA,GAAAF,OAAA,CAAAP,OAAA,GAEfhD,aAAa","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_baseControl","_selectControlStyles","_chevronDown","_useDeprecatedProps","_deprecated36pxSize","_jsxRuntime","useUniqueId","idProp","instanceId","useInstanceId","SelectControl","id","SelectOptions","options","map","label","value","optionProps","index","key","jsx","children","UnforwardedSelectControl","props","ref","className","disabled","help","hideLabelFromVision","multiple","onChange","size","valueProp","labelPosition","prefix","suffix","variant","__next40pxDefaultSize","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","restProps","useDeprecated36pxDefaultSizeProp","helpId","undefined","length","handleOnChange","event","selectedOptions","Array","from","target","filter","selected","newValues","classes","clsx","maybeWarnDeprecated36pxSize","componentName","default","__associatedWPComponentName","StyledInputBase","isBorderless","__unstableInputWidth","Select","selectSize","exports","forwardRef","_default"],"sources":["@wordpress/components/src/select-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport { Select, StyledInputBase } 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';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\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 SelectOptions( {\n\toptions,\n}: {\n\toptions: NonNullable< SelectControlProps[ 'options' ] >;\n} ) {\n\treturn options.map( ( { id, label, value, ...optionProps }, index ) => {\n\t\tconst key = id \|\| `${ label }-${ value }-${ index }`;\n\n\t\treturn (\n\t\t\t<option key={ key } value={ value } { ...optionProps }>\n\t\t\t\t{ label }\n\t\t\t</option>\n\t\t);\n\t} );\n}\n\nfunction UnforwardedSelectControl< V extends string >(\n\tprops: WordPressComponentProps< SelectControlProps< V >, '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\tonChange,\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\tvariant = 'default',\n\t\t__next40pxDefaultSize = false,\n\t\t__nextHasNoMarginBottom = false,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t\t...restProps\n\t} = useDeprecated36pxDefaultSizeProp( props );\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 ) {\n\t\treturn null;\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(\n\t\t\t\t( { value } ) => value as V\n\t\t\t);\n\t\t\tprops.onChange?.( newValues, { event } );\n\t\t\treturn;\n\t\t}\n\n\t\tprops.onChange?.( event.target.value as V, { event } );\n\t};\n\n\tconst classes = clsx( 'components-select-control', className );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'SelectControl',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t} );\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\tid={ id }\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__associatedWPComponentName=\"SelectControl\"\n\t\t>\n\t\t\t<StyledInputBase\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tid={ id }\n\t\t\t\tisBorderless={ variant === 'minimal' }\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__unstableInputWidth={\n\t\t\t\t\tvariant === 'minimal' ? 'auto' : undefined\n\t\t\t\t}\n\t\t\t\tvariant={ variant }\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\tonChange={ handleOnChange }\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\tvariant={ variant }\n\t\t\t\t>\n\t\t\t\t\t{ children \|\| <SelectOptions options={ options } /> }\n\t\t\t\t</Select>\n\t\t\t</StyledInputBase>\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 * __next40pxDefaultSize\n * __nextHasNoMarginBottom\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 ) as <\n\tV extends string,\n>(\n\tprops: WordPressComponentProps<\n\t\tSelectControlProps< V >,\n\t\t'select',\n\t\tfalse\n\t> & { ref?: React.Ref< HTMLSelectElement > }\n) => React.JSX.Element \| null;\n\nexport default SelectControl;\n"],"mappings":"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","ignoreList":[]}

package/build/textarea-control/index.js CHANGED Viewed

@@ -5,11 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextareaControl = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
 var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _baseControl = _interopRequireDefault(require("../base-control"));
 var _textareaControlStyles = require("./styles/textarea-control-styles");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
 /**
  * WordPress dependencies
  */
@@ -33,6 +38,7 @@ function UnforwardedTextareaControl(props, ref) {
   const instanceId = (0, _compose.useInstanceId)(TextareaControl);
   const id = `inspector-textarea-control-${instanceId}`;
   const onChangeValue = event => onChange(event.target.value);
+  const classes = (0, _clsx.default)('components-textarea-control', className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     __associatedWPComponentName: "TextareaControl",
@@ -40,7 +46,7 @@ function UnforwardedTextareaControl(props, ref) {
     hideLabelFromVision: hideLabelFromVision,
     id: id,
     help: help,
-    className: className,
+    className: classes,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textareaControlStyles.StyledTextarea, {
       className: "components-textarea-control__input",
       id: id,

package/build/textarea-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~_compose~~","require","~~_element~~","~~_baseControl~~","~~_interopRequireDefault~~","_textareaControlStyles","_jsxRuntime","UnforwardedTextareaControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","useInstanceId","TextareaControl","id","onChangeValue","event","target","jsx","default","__associatedWPComponentName","children","StyledTextarea","undefined","exports","forwardRef","_default"],"sources":["@wordpress/components/src/textarea-control/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedTextareaControl(\n\tprops: WordPressComponentProps< TextareaControlProps, 'textarea', false >,\n\tref: React.ForwardedRef< HTMLTextAreaElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__associatedWPComponentName=\"TextareaControl\"\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ ~~className~~ }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/\n TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n \n ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyTextareaControl = () => {\n * const [ text, setText ] = useState( '' );\n \n return (\n * <TextareaControl\n * __nextHasNoMarginBottom\n * label=\"Text\"\n * help=\"Enter some text\"\n * value={ text }\n * onChange={ ( value ) => setText( value ) }\n * />\n * );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef( UnforwardedTextareaControl );\n\nexport default TextareaControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,~~QAAA~~,GAAAC,OAAA;~~AACA~~,IAAAC,QAAA,GAAAD,OAAA;~~AAKA~~,IAAAE,YAAA,~~GAAAC~~,sBAAA,~~CAAAH~~,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AAAkE,IAAAK,WAAA,GAAAL,OAAA;~~AAVlE~~;AACA;AACA;;AAIA;AACA;AACA;;AAMA,SAASM,0BAA0BA,CAClCC,KAAyE,EACzEC,GAA8C,EAC7C;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,CAAC;IACRC,SAAS;IACT,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,UAAU,GAAG,IAAAC,sBAAa,EAAEC,eAAgB,CAAC;EACnD,MAAMC,EAAE,GAAG,8BAA+BH,UAAU,EAAG;EACvD,MAAMI,aAAa,GAAKC,KAA+C,IACtET,QAAQ,CAAES,KAAK,CAACC,MAAM,CAACZ,KAAM,CAAC;EAE/B,oBACC,~~IAAAP~~,WAAA,~~CAAAoB~~,GAAA,~~EAACvB~~,YAAA,~~CAAAwB~~,OAAW;~~IACXjB~~,uBAAuB,EAAGA,uBAAyB;~~IACnDkB~~,2BAA2B,EAAC,iBAAiB;~~IAC7CjB~~,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CU,EAAE,EAAGA,EAAI;IACTR,IAAI,EAAGA,IAAM;IACbG,SAAS,~~EAAGA~~,~~SAAW~~;~~IAAAY~~,QAAA,~~eAEvB~~,~~IAAAvB~~,WAAA,~~CAAAoB~~,GAAA,~~EAACrB~~,sBAAA,~~CAAAyB~~,cAAc;~~MACdb~~,SAAS,EAAC,oCAAoC;MAC9CK,EAAE,EAAGA,EAAI;MACTN,IAAI,EAAGA,IAAM;MACbD,QAAQ,EAAGQ,aAAe;MAC1B,oBAAmB,CAAC,CAAET,IAAI,GAAGQ,EAAE,GAAG,QAAQ,~~GAAGS~~,SAAW;~~MACxDlB~~,KAAK,EAAGA,KAAO;MACfJ,GAAG,EAAGA,GAAK;MAAA,GACNS;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,eAAe,~~GAAAW~~,OAAA,~~CAAAX~~,eAAA,GAAG,~~IAAAY~~,mBAAU,~~EAAE1B~~,0BAA2B,CAAC;AAAC,~~IAAA2B~~,QAAA,GAAAF,OAAA,CAAAL,OAAA,~~GAEzDN~~,eAAe","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_baseControl","_textareaControlStyles","_jsxRuntime","UnforwardedTextareaControl","props","ref","__nextHasNoMarginBottom","label","hideLabelFromVision","value","help","onChange","rows","className","additionalProps","instanceId","useInstanceId","TextareaControl","id","onChangeValue","event","target","classes","clsx","jsx","default","__associatedWPComponentName","children","StyledTextarea","undefined","exports","forwardRef","_default"],"sources":["@wordpress/components/src/textarea-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport type { TextareaControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedTextareaControl(\n\tprops: WordPressComponentProps< TextareaControlProps, 'textarea', false >,\n\tref: React.ForwardedRef< HTMLTextAreaElement >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\thideLabelFromVision,\n\t\tvalue,\n\t\thelp,\n\t\tonChange,\n\t\trows = 4,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( TextareaControl );\n\tconst id = `inspector-textarea-control-${ instanceId }`;\n\tconst onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>\n\t\tonChange( event.target.value );\n\n\tconst classes = clsx( 'components-textarea-control', className );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t__associatedWPComponentName=\"TextareaControl\"\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classes }\n\t\t>\n\t\t\t<StyledTextarea\n\t\t\t\tclassName=\"components-textarea-control__input\"\n\t\t\t\tid={ id }\n\t\t\t\trows={ rows }\n\t\t\t\tonChange={ onChangeValue }\n\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\tvalue={ value }\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/\n TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n \n ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyTextareaControl = () => {\n * const [ text, setText ] = useState( '' );\n \n return (\n * <TextareaControl\n * __nextHasNoMarginBottom\n * label=\"Text\"\n * help=\"Enter some text\"\n * value={ text }\n * onChange={ ( value ) => setText( value ) }\n * />\n * );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef( UnforwardedTextareaControl );\n\nexport default TextareaControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AAAkE,IAAAK,WAAA,GAAAL,OAAA;AAflE;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAMA,SAASM,0BAA0BA,CAClCC,KAAyE,EACzEC,GAA8C,EAC7C;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,mBAAmB;IACnBC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,CAAC;IACRC,SAAS;IACT,GAAGC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,UAAU,GAAG,IAAAC,sBAAa,EAAEC,eAAgB,CAAC;EACnD,MAAMC,EAAE,GAAG,8BAA+BH,UAAU,EAAG;EACvD,MAAMI,aAAa,GAAKC,KAA+C,IACtET,QAAQ,CAAES,KAAK,CAACC,MAAM,CAACZ,KAAM,CAAC;EAE/B,MAAMa,OAAO,GAAG,IAAAC,aAAI,EAAE,6BAA6B,EAAEV,SAAU,CAAC;EAEhE,oBACC,IAAAX,WAAA,CAAAsB,GAAA,EAACxB,YAAA,CAAAyB,OAAW;IACXnB,uBAAuB,EAAGA,uBAAyB;IACnDoB,2BAA2B,EAAC,iBAAiB;IAC7CnB,KAAK,EAAGA,KAAO;IACfC,mBAAmB,EAAGA,mBAAqB;IAC3CU,EAAE,EAAGA,EAAI;IACTR,IAAI,EAAGA,IAAM;IACbG,SAAS,EAAGS,OAAS;IAAAK,QAAA,eAErB,IAAAzB,WAAA,CAAAsB,GAAA,EAACvB,sBAAA,CAAA2B,cAAc;MACdf,SAAS,EAAC,oCAAoC;MAC9CK,EAAE,EAAGA,EAAI;MACTN,IAAI,EAAGA,IAAM;MACbD,QAAQ,EAAGQ,aAAe;MAC1B,oBAAmB,CAAC,CAAET,IAAI,GAAGQ,EAAE,GAAG,QAAQ,GAAGW,SAAW;MACxDpB,KAAK,EAAGA,KAAO;MACfJ,GAAG,EAAGA,GAAK;MAAA,GACNS;IAAe,CACpB;EAAC,CACU,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,eAAe,GAAAa,OAAA,CAAAb,eAAA,GAAG,IAAAc,mBAAU,EAAE5B,0BAA2B,CAAC;AAAC,IAAA6B,QAAA,GAAAF,OAAA,CAAAL,OAAA,GAEzDR,eAAe","ignoreList":[]}

package/build/toggle-group-control/toggle-group-control/as-button-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_element","_view","_utils","_context","_interopRequireDefault","_utils2","_jsxRuntime","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","valueProp","id","idProp","setSelectedElement","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsButtonGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","selectedValue","setSelectedValue","useControlledValue","groupContextValue","useMemo","setValue","isBlock","isDeselectable","jsx","default","Provider","View","ref","role","exports","forwardRef"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\tsetSelectedElement,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t);\n\tconst baseId = idProp \|\| generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\tconst [ selectedValue, setSelectedValue ] = useControlledValue( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tonChange,\n\t} );\n\n\tconst groupContextValue = useMemo(\n\t\t(): ToggleGroupControlContextProps => ( {\n\t\t\tbaseId,\n\t\t\tvalue: selectedValue,\n\t\t\tsetValue: setSelectedValue,\n\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\tisDeselectable: true,\n\t\t\tsize,\n\t\t\tsetSelectedElement,\n\t\t} ),\n\t\t[\n\t\t\tbaseId,\n\t\t\tselectedValue,\n\t\t\tsetSelectedValue,\n\t\t\tisAdaptiveWidth,\n\t\t\tsize,\n\t\t\tsetSelectedElement,\n\t\t]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAAkE,IAAAO,WAAA,GAAAP,OAAA;AAblE;AACA;AACA;;AAIA;AACA;AACA;;AAWA,SAASQ,0CAA0CA,CAClD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACVC,kBAAkB;EAClB,GAAGC;AAKJ,CAAC,EACDC,YAAkD,EACjD;EACD,MAAMC,WAAW,GAAG,IAAAC,sBAAa,EAChCC,+BAA+B,EAC/B,sCACD,CAAC;EACD,MAAMC,MAAM,GAAGP,MAAM,IAAII,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEP,KAAK;IAAEW;EAAa,CAAC,GAC5B,IAAAC,+CAAuC,EAAEX,SAAU,CAAC;EAErD,MAAM,CAAEY,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,yBAAkB,~~EAAE~~;~~IAC/DJ~~,YAAY;IACZX,KAAK;IACLF;EACD,CAAE,CAAC;EAEH,MAAMkB,iBAAiB,GAAG,IAAAC,gBAAO,EAChC,OAAwC;IACvCP,MAAM;IACNV,KAAK,EAAEa,aAAa;IACpBK,QAAQ,EAAEJ,gBAAgB;IAC1BK,OAAO,EAAE,CAAEvB,eAAe;IAC1BwB,cAAc,EAAE,IAAI;IACpBrB,IAAI;IACJK;EACD,CAAC,CAAE,EACH,CACCM,MAAM,EACNG,aAAa,EACbC,gBAAgB,EAChBlB,eAAe,EACfG,IAAI,EACJK,kBAAkB,CAEpB,CAAC;EAED,oBACC,IAAAX,WAAA,CAAA4B,GAAA,EAAC/B,QAAA,CAAAgC,OAAyB,CAACC,QAAQ;IAACvB,KAAK,EAAGgB,iBAAmB;IAAArB,QAAA,eAC9D,IAAAF,WAAA,CAAA4B,GAAA,EAACjC,KAAA,CAAAoC,IAAI;MACJ,cAAa3B,KAAO;MAAA,GACfQ,UAAU;MACfoB,GAAG,EAAGnB,YAAc;MACpBoB,IAAI,EAAC,OAAO;MAAA/B,QAAA,EAEVA;IAAQ,CACL;EAAC,CAC4B,CAAC;AAEvC;AAEO,MAAMc,+BAA+B,GAAAkB,OAAA,CAAAlB,+BAAA,GAAG,IAAAmB,mBAAU,EACxDlC,0CACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_element","_view","_utils","_context","_interopRequireDefault","_utils2","_jsxRuntime","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","valueProp","id","idProp","setSelectedElement","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsButtonGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","selectedValue","setSelectedValue","useControlledValue","groupContextValue","useMemo","setValue","isBlock","isDeselectable","jsx","default","Provider","View","ref","role","exports","forwardRef"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\tsetSelectedElement,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t);\n\tconst baseId = idProp \|\| generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\tconst [ selectedValue, setSelectedValue ] = useControlledValue<\n\t\ttypeof value\n\t>( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tonChange,\n\t} );\n\n\tconst groupContextValue = useMemo(\n\t\t(): ToggleGroupControlContextProps => ( {\n\t\t\tbaseId,\n\t\t\tvalue: selectedValue,\n\t\t\tsetValue: setSelectedValue,\n\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\tisDeselectable: true,\n\t\t\tsize,\n\t\t\tsetSelectedElement,\n\t\t} ),\n\t\t[\n\t\t\tbaseId,\n\t\t\tselectedValue,\n\t\t\tsetSelectedValue,\n\t\t\tisAdaptiveWidth,\n\t\t\tsize,\n\t\t\tsetSelectedElement,\n\t\t]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAAkE,IAAAO,WAAA,GAAAP,OAAA;AAblE;AACA;AACA;;AAIA;AACA;AACA;;AAWA,SAASQ,0CAA0CA,CAClD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACVC,kBAAkB;EAClB,GAAGC;AAKJ,CAAC,EACDC,YAAkD,EACjD;EACD,MAAMC,WAAW,GAAG,IAAAC,sBAAa,EAChCC,+BAA+B,EAC/B,sCACD,CAAC;EACD,MAAMC,MAAM,GAAGP,MAAM,IAAII,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEP,KAAK;IAAEW;EAAa,CAAC,GAC5B,IAAAC,+CAAuC,EAAEX,SAAU,CAAC;EAErD,MAAM,CAAEY,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,yBAAkB,EAE3D;IACFJ,YAAY;IACZX,KAAK;IACLF;EACD,CAAE,CAAC;EAEH,MAAMkB,iBAAiB,GAAG,IAAAC,gBAAO,EAChC,OAAwC;IACvCP,MAAM;IACNV,KAAK,EAAEa,aAAa;IACpBK,QAAQ,EAAEJ,gBAAgB;IAC1BK,OAAO,EAAE,CAAEvB,eAAe;IAC1BwB,cAAc,EAAE,IAAI;IACpBrB,IAAI;IACJK;EACD,CAAC,CAAE,EACH,CACCM,MAAM,EACNG,aAAa,EACbC,gBAAgB,EAChBlB,eAAe,EACfG,IAAI,EACJK,kBAAkB,CAEpB,CAAC;EAED,oBACC,IAAAX,WAAA,CAAA4B,GAAA,EAAC/B,QAAA,CAAAgC,OAAyB,CAACC,QAAQ;IAACvB,KAAK,EAAGgB,iBAAmB;IAAArB,QAAA,eAC9D,IAAAF,WAAA,CAAA4B,GAAA,EAACjC,KAAA,CAAAoC,IAAI;MACJ,cAAa3B,KAAO;MAAA,GACfQ,UAAU;MACfoB,GAAG,EAAGnB,YAAc;MACpBoB,IAAI,EAAC,OAAO;MAAA/B,QAAA,EAEVA;IAAQ,CACL;EAAC,CAC4B,CAAC;AAEvC;AAEO,MAAMc,+BAA+B,GAAAkB,OAAA,CAAAlB,+BAAA,GAAG,IAAAmB,mBAAU,EACxDlC,0CACD,CAAC","ignoreList":[]}

package/build/utils/hooks/use-controlled-value.js CHANGED Viewed

@@ -27,15 +27,19 @@ function useControlledValue({
   const initialValue = hasValue ? valueProp : defaultValue;
   const [state, setState] = (0, _element.useState)(initialValue);
   const value = hasValue ? valueProp : state;
+  const uncontrolledSetValue = (0, _element.useCallback)((nextValue, ...args) => {
+    setState(nextValue);
+    onChange?.(nextValue, ...args);
+  }, [onChange]);
   let setValue;
   if (hasValue && typeof onChange === 'function') {
+    // Controlled mode.
     setValue = onChange;
   } else if (!hasValue && typeof onChange === 'function') {
-    setValue = nextValue => {
-      onChange(nextValue);
-      setState(nextValue);
-    };
+    // Uncontrolled mode, plus forwarding to the onChange prop.
+    setValue = uncontrolledSetValue;
   } else {
+    // Uncontrolled mode, only update internal state.
     setValue = setState;
   }
   return [value, setValue];

package/build/utils/hooks/use-controlled-value.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","useControlledValue","defaultValue","onChange","value","valueProp","hasValue","initialValue","state","setState","useState","~~setValue~~","nextValue"],"sources":["@wordpress/components/src/utils/hooks/use-controlled-value.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useState } from '@wordpress/element';\n\ntype Props< T > = {\n\tdefaultValue?: T;\n\tvalue?: T;\n\tonChange?: ( value: T ) => void;\n};\n\n/\n Simplified and improved implementation of useControlledState.\n \n @param props\n * @param props.defaultValue\n * @param props.value\n * @param props.onChange\n * @return The controlled value and the value setter.\n */\nexport function useControlledValue< T >( {\n\tdefaultValue,\n\tonChange,\n\tvalue: valueProp,\n}: Props< T > ) {\n\tconst hasValue = typeof valueProp !== 'undefined';\n\tconst initialValue = hasValue ? valueProp : defaultValue;\n\tconst [ state, setState ] = useState( initialValue );\n\tconst value = hasValue ? valueProp : state;\n\n\~~tlet~~ ~~setValue:~~ ( nextValue: T ) => ~~void~~;\n\tif ( hasValue && typeof onChange === 'function' ) {\n\t\tsetValue = onChange;\n\t} else if ( ! hasValue && typeof onChange === 'function' ) {\n\t\~~tsetValue~~ = ( ~~nextValue~~ ) => {\n\t\~~t\tonChange(~~ ~~nextValue~~ );\n\t~~\t\tsetState(~~ ~~nextValue~~ ~~);\~~n\t\t~~};\n\t}~~ ~~else~~ {\n\t\tsetValue = setState;\n\t}\n\n\treturn [ value, setValue ~~as typeof setState~~ ] as const;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,kBAAkBA,CAAO;EACxCC,YAAY;EACZC,QAAQ;EACRC,KAAK,EAAEC;AACI,CAAC,EAAG;EACf,MAAMC,QAAQ,GAAG,OAAOD,SAAS,KAAK,WAAW;EACjD,MAAME,YAAY,GAAGD,QAAQ,GAAGD,SAAS,GAAGH,YAAY;EACxD,MAAM,CAAEM,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAEH,YAAa,CAAC;EACpD,MAAMH,KAAK,GAAGE,QAAQ,GAAGD,SAAS,GAAGG,KAAK;EAE1C,~~IAAIG~~,~~QAAkC~~;~~EACtC~~,~~IAAKL~~,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;~~IACjDQ~~,QAAQ,~~GAAGR~~,QAAQ;EACpB,CAAC,MAAM,IAAK,CAAEG,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;~~IAC1DQ,QAAQ,GAAKC,SAAS,IAAM~~;~~MAC3BT~~,QAAQ,~~CAAES~~,~~SAAU,CAAC~~;~~MACrBH~~,~~QAAQ,CAAEG,SAAU,~~CAAC~~;IACtB~~,~~CAAC;EACF,CAAC,~~MAAM;~~IACND~~,QAAQ,~~GAAGF~~,QAAQ;EACpB;EAEA,OAAO,CAAEL,KAAK,~~EAAEO~~,QAAQ,~~CAAqB~~;~~AAC9C~~","ignoreList":[]}
1	+ {"version":3,"names":["_element","require","useControlledValue","defaultValue","onChange","value","valueProp","hasValue","initialValue","state","setState","useState","uncontrolledSetValue","useCallback","nextValue","args","setValue"],"sources":["@wordpress/components/src/utils/hooks/use-controlled-value.ts"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useCallback, useState } from '@wordpress/element';\n\ntype Props< T > = {\n\tdefaultValue?: T;\n\tvalue?: T;\n\tonChange?: ( value: T, ...args: any[] ) => void;\n};\n\n/\n Simplified and improved implementation of useControlledState.\n \n @param props\n * @param props.defaultValue\n * @param props.value\n * @param props.onChange\n * @return The controlled value and the value setter.\n */\nexport function useControlledValue< T >( {\n\tdefaultValue,\n\tonChange,\n\tvalue: valueProp,\n}: Props< T > ) {\n\tconst hasValue = typeof valueProp !== 'undefined';\n\tconst initialValue = hasValue ? valueProp : defaultValue;\n\tconst [ state, setState ] = useState( initialValue );\n\tconst value = hasValue ? valueProp : state;\n\n\tconst uncontrolledSetValue = useCallback(\n\t\t( nextValue: T, ...args: any[] ) => {\n\t\t\tsetState( nextValue );\n\t\t\tonChange?.( nextValue, ...args );\n\t\t},\n\t\t[ onChange ]\n\t);\n\n\tlet setValue: typeof onChange;\n\tif ( hasValue && typeof onChange === 'function' ) {\n\t\t// Controlled mode.\n\t\tsetValue = onChange;\n\t} else if ( ! hasValue && typeof onChange === 'function' ) {\n\t\t// Uncontrolled mode, plus forwarding to the onChange prop.\n\t\tsetValue = uncontrolledSetValue;\n\t} else {\n\t\t// Uncontrolled mode, only update internal state.\n\t\tsetValue = setState;\n\t}\n\n\treturn [ value, setValue ] as const;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,kBAAkBA,CAAO;EACxCC,YAAY;EACZC,QAAQ;EACRC,KAAK,EAAEC;AACI,CAAC,EAAG;EACf,MAAMC,QAAQ,GAAG,OAAOD,SAAS,KAAK,WAAW;EACjD,MAAME,YAAY,GAAGD,QAAQ,GAAGD,SAAS,GAAGH,YAAY;EACxD,MAAM,CAAEM,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAEH,YAAa,CAAC;EACpD,MAAMH,KAAK,GAAGE,QAAQ,GAAGD,SAAS,GAAGG,KAAK;EAE1C,MAAMG,oBAAoB,GAAG,IAAAC,oBAAW,EACvC,CAAEC,SAAY,EAAE,GAAGC,IAAW,KAAM;IACnCL,QAAQ,CAAEI,SAAU,CAAC;IACrBV,QAAQ,GAAIU,SAAS,EAAE,GAAGC,IAAK,CAAC;EACjC,CAAC,EACD,CAAEX,QAAQ,CACX,CAAC;EAED,IAAIY,QAAyB;EAC7B,IAAKT,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;IACjD;IACAY,QAAQ,GAAGZ,QAAQ;EACpB,CAAC,MAAM,IAAK,CAAEG,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;IAC1D;IACAY,QAAQ,GAAGJ,oBAAoB;EAChC,CAAC,MAAM;IACN;IACAI,QAAQ,GAAGN,QAAQ;EACpB;EAEA,OAAO,CAAEL,KAAK,EAAEW,QAAQ,CAAE;AAC3B","ignoreList":[]}

package/build/validated-form-controls/components/checkbox-control.js ADDED Viewed

@@ -0,0 +1,52 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedCheckboxControl = void 0;
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _checkboxControl = _interopRequireDefault(require("../../checkbox-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+/**
+ * Internal dependencies
+ */
+const UnforwardedValidatedCheckboxControl = ({
+  required,
+  customValidator,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const mergedRefs = (0, _compose.useMergeRefs)([forwardedRef, validityTargetRef]);
+  const valueRef = (0, _element.useRef)(restProps.checked);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+    required: required,
+    markWhenOptional: markWhenOptional,
+    ref: mergedRefs,
+    customValidator: () => {
+      return customValidator?.(valueRef.current);
+    },
+    getValidityTarget: () => validityTargetRef.current?.querySelector('input[type="checkbox"]'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxControl.default, {
+      __nextHasNoMarginBottom: true,
+      onChange: value => {
+        valueRef.current = value;
+        onChange?.(value);
+      }
+      // TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.
+      ,
+      ...restProps
+    })
+  });
+};
+const ValidatedCheckboxControl = exports.ValidatedCheckboxControl = (0, _element.forwardRef)(UnforwardedValidatedCheckboxControl);
+//# sourceMappingURL=checkbox-control.js.map

package/build/validated-form-controls/components/checkbox-control.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["_compose","require","_element","_controlWithError","_checkboxControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedCheckboxControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","checked","jsx","ControlWithError","ref","current","getValidityTarget","querySelector","children","default","__nextHasNoMarginBottom","value","ValidatedCheckboxControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/checkbox-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport CheckboxControl from '../../checkbox-control';\nimport type { CheckboxControlProps } from '../../checkbox-control/types';\n\ntype Value = CheckboxControlProps[ 'checked' ];\n\nconst UnforwardedValidatedCheckboxControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof CheckboxControl >,\n\t\t'__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLDivElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.checked );\n\n\treturn (\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tref={ mergedRefs }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () =>\n\t\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t\t'input[type=\"checkbox\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<CheckboxControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t\t// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.\n\t\t\t\t{ ...restProps }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedCheckboxControl = forwardRef(\n\tUnforwardedValidatedCheckboxControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAoB,IAAK,CAAC;EAC1D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,OAAQ,CAAC;EAErD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAACjB,iBAAA,CAAAkB,gBAAgB;IAChBb,QAAQ,EAAGA,QAAU;IACrBG,gBAAgB,EAAGA,gBAAkB;IACrCW,GAAG,EAAGN,UAAY;IAClBP,eAAe,EAAGA,CAAA,KAAM;MACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACK,OAAQ,CAAC;IAC7C,CAAG;IACHC,iBAAiB,EAAGA,CAAA,KACnBV,iBAAiB,CAACS,OAAO,EAAEE,aAAa,CACvC,wBACD,CACA;IAAAC,QAAA,eAED,IAAApB,WAAA,CAAAc,GAAA,EAAChB,gBAAA,CAAAuB,OAAe;MACfC,uBAAuB;MACvBlB,QAAQ,EAAKmB,KAAK,IAAM;QACvBX,QAAQ,CAACK,OAAO,GAAGM,KAAK;QACxBnB,QAAQ,GAAImB,KAAM,CAAC;MACpB;MACA;MAAA;MAAA,GACKjB;IAAS,CACd;EAAC,CACe,CAAC;AAErB,CAAC;AAEM,MAAMkB,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjDzB,mCACD,CAAC","ignoreList":[]}

package/build/validated-form-controls/components/combobox-control.js ADDED Viewed

@@ -0,0 +1,64 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatedComboboxControl = void 0;
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _controlWithError = require("../control-with-error");
+var _comboboxControl = _interopRequireDefault(require("../../combobox-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+/**
+ * Internal dependencies
+ */
+const UnforwardedValidatedComboboxControl = ({
+  required,
+  customValidator,
+  onChange,
+  markWhenOptional,
+  ...restProps
+}, forwardedRef) => {
+  const validityTargetRef = (0, _element.useRef)(null);
+  const mergedRefs = (0, _compose.useMergeRefs)([forwardedRef, validityTargetRef]);
+  const valueRef = (0, _element.useRef)(restProps.value);
+  // TODO: Upstream limitation - The `required` attribute is not passed down to the input,
+  // so we need to set it manually.
+  (0, _element.useEffect)(() => {
+    const input = validityTargetRef.current?.querySelector('input[role="combobox"]');
+    if (input) {
+      input.required = required !== null && required !== void 0 ? required : false;
+    }
+  }, [required]);
+  return (
+    /*#__PURE__*/
+    // TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.
+    (0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
+      required: required,
+      markWhenOptional: markWhenOptional,
+      ref: mergedRefs,
+      customValidator: () => {
+        return customValidator?.(valueRef.current);
+      },
+      getValidityTarget: () => validityTargetRef.current?.querySelector('input[role="combobox"]'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboboxControl.default, {
+        __nextHasNoMarginBottom: true,
+        __next40pxDefaultSize: true,
+        ...restProps,
+        onChange: value => {
+          valueRef.current = value;
+          onChange?.(value);
+        }
+      })
+    })
+  );
+};
+const ValidatedComboboxControl = exports.ValidatedComboboxControl = (0, _element.forwardRef)(UnforwardedValidatedComboboxControl);
+//# sourceMappingURL=combobox-control.js.map

package/build/validated-form-controls/components/combobox-control.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["_compose","require","_element","_controlWithError","_comboboxControl","_interopRequireDefault","_jsxRuntime","UnforwardedValidatedComboboxControl","required","customValidator","onChange","markWhenOptional","restProps","forwardedRef","validityTargetRef","useRef","mergedRefs","useMergeRefs","valueRef","value","useEffect","input","current","querySelector","jsx","ControlWithError","ref","getValidityTarget","children","default","__nextHasNoMarginBottom","__next40pxDefaultSize","ValidatedComboboxControl","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/components/combobox-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ControlWithError } from '../control-with-error';\nimport type { ValidatedControlProps } from './types';\nimport ComboboxControl from '../../combobox-control';\nimport type { ComboboxControlProps } from '../../combobox-control/types';\n\ntype Value = ComboboxControlProps[ 'value' ];\n\nconst UnforwardedValidatedComboboxControl = (\n\t{\n\t\trequired,\n\t\tcustomValidator,\n\t\tonChange,\n\t\tmarkWhenOptional,\n\t\t...restProps\n\t}: Omit<\n\t\tReact.ComponentProps< typeof ComboboxControl >,\n\t\t'__next40pxDefaultSize' | '__nextHasNoMarginBottom'\n\t> &\n\t\tValidatedControlProps< Value >,\n\tforwardedRef: React.ForwardedRef< HTMLInputElement >\n) => {\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\tconst mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );\n\tconst valueRef = useRef< Value >( restProps.value );\n\n\t// TODO: Upstream limitation - The `required` attribute is not passed down to the input,\n\t// so we need to set it manually.\n\tuseEffect( () => {\n\t\tconst input =\n\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t'input[role=\"combobox\"]'\n\t\t\t);\n\t\tif ( input ) {\n\t\t\tinput.required = required ?? false;\n\t\t}\n\t}, [ required ] );\n\n\treturn (\n\t\t// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.\n\t\t<ControlWithError\n\t\t\trequired={ required }\n\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\tref={ mergedRefs }\n\t\t\tcustomValidator={ () => {\n\t\t\t\treturn customValidator?.( valueRef.current );\n\t\t\t} }\n\t\t\tgetValidityTarget={ () =>\n\t\t\t\tvalidityTargetRef.current?.querySelector< HTMLInputElement >(\n\t\t\t\t\t'input[role=\"combobox\"]'\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<ComboboxControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t{ ...restProps }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tvalueRef.current = value;\n\t\t\t\t\tonChange?.( value );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ControlWithError>\n\t);\n};\n\nexport const ValidatedComboboxControl = forwardRef(\n\tUnforwardedValidatedComboboxControl\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAqD,IAAAK,WAAA,GAAAL,OAAA;AAXrD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,mCAAmC,GAAGA,CAC3C;EACCC,QAAQ;EACRC,eAAe;EACfC,QAAQ;EACRC,gBAAgB;EAChB,GAAGC;AAK0B,CAAC,EAC/BC,YAAoD,KAChD;EACJ,MAAMC,iBAAiB,GAAG,IAAAC,eAAM,EAAsB,IAAK,CAAC;EAC5D,MAAMC,UAAU,GAAG,IAAAC,qBAAY,EAAE,CAAEJ,YAAY,EAAEC,iBAAiB,CAAG,CAAC;EACtE,MAAMI,QAAQ,GAAG,IAAAH,eAAM,EAAWH,SAAS,CAACO,KAAM,CAAC;;EAEnD;EACA;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,MAAMC,KAAK,GACVP,iBAAiB,CAACQ,OAAO,EAAEC,aAAa,CACvC,wBACD,CAAC;IACF,IAAKF,KAAK,EAAG;MACZA,KAAK,CAACb,QAAQ,GAAGA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,KAAK;IACnC;EACD,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB;IAAA;IACC;IACA,IAAAF,WAAA,CAAAkB,GAAA,EAACrB,iBAAA,CAAAsB,gBAAgB;MAChBjB,QAAQ,EAAGA,QAAU;MACrBG,gBAAgB,EAAGA,gBAAkB;MACrCe,GAAG,EAAGV,UAAY;MAClBP,eAAe,EAAGA,CAAA,KAAM;QACvB,OAAOA,eAAe,GAAIS,QAAQ,CAACI,OAAQ,CAAC;MAC7C,CAAG;MACHK,iBAAiB,EAAGA,CAAA,KACnBb,iBAAiB,CAACQ,OAAO,EAAEC,aAAa,CACvC,wBACD,CACA;MAAAK,QAAA,eAED,IAAAtB,WAAA,CAAAkB,GAAA,EAACpB,gBAAA,CAAAyB,OAAe;QACfC,uBAAuB;QACvBC,qBAAqB;QAAA,GAChBnB,SAAS;QACdF,QAAQ,EAAKS,KAAK,IAAM;UACvBD,QAAQ,CAACI,OAAO,GAAGH,KAAK;UACxBT,QAAQ,GAAIS,KAAM,CAAC;QACpB;MAAG,CACH;IAAC,CACe;EAAC;AAErB,CAAC;AAEM,MAAMa,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,mBAAU,EACjD3B,mCACD,CAAC","ignoreList":[]}