@wordpress/components 29.0.1-next.a9f418477.0 → 29.1.0

package/build/border-box-control/utils.js

@@ -1,3 +1,4 @@
+/* wp:polyfill */
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {

package/build/border-box-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_unitValues","require","sides","borderProps","isEmptyBorder","border","some","prop","undefined","exports","isDefinedBorder","hasSplitBorders","allSidesEmpty","every","side","isCompleteBorder","Object","keys","indexOf","hasMixedBorders","borders","shorthandBorders","map","getShorthandBorderStyle","getSplitBorders","top","right","bottom","left","getBorderDiff","original","updated","diff","color","style","width","getCommonBorder","colors","styles","widths","forEach","push","allColorsMatch","value","allStylesMatch","allWidthsMatch","getMostCommonUnit","fallbackBorder","fallbackColor","fallbackStyle","fallbackWidth","hasVisibleBorder","borderStyle","filter","Boolean","join","values","units","parseCSSUnitValue","filteredUnits","mode","length","maxCount","currentMode"],"sources":["@wordpress/components/src/border-box-control/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { parseCSSUnitValue } from '../utils/unit-values';\nimport type { Border } from '../border-control/types';\nimport type { AnyBorder, Borders, BorderProp, BorderSide } from './types';\n\nconst sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];\nconst borderProps: BorderProp[] = [ 'color', 'style', 'width' ];\n\nexport const isEmptyBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn true;\n\t}\n\treturn ! borderProps.some( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const isDefinedBorder = ( border: AnyBorder ) => {\n\t// No border, no worries :)\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\t// If we have individual borders per side within the border object we\n\t// need to check whether any of those side borders have been set.\n\tif ( hasSplitBorders( border ) ) {\n\t\tconst allSidesEmpty = sides.every( ( side ) =>\n\t\t\tisEmptyBorder( ( border as Borders )[ side ] )\n\t\t);\n\n\t\treturn ! allSidesEmpty;\n\t}\n\n\t// If we have a top-level border only, check if that is empty. e.g.\n\t// { color: undefined, style: undefined, width: undefined }\n\t// Border radius can still be set within the border object as it is\n\t// handled separately.\n\treturn ! isEmptyBorder( border as Border );\n};\n\nexport const isCompleteBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\treturn borderProps.every( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const hasSplitBorders = ( border: AnyBorder = {} ) => {\n\treturn Object.keys( border ).some(\n\t\t( side ) => sides.indexOf( side as BorderSide ) !== -1\n\t);\n};\n\nexport const hasMixedBorders = ( borders: AnyBorder ) => {\n\tif ( ! hasSplitBorders( borders ) ) {\n\t\treturn false;\n\t}\n\n\tconst shorthandBorders = sides.map( ( side: BorderSide ) =>\n\t\tgetShorthandBorderStyle( ( borders as Borders )?.[ side ] )\n\t);\n\n\treturn ! shorthandBorders.every(\n\t\t( border ) => border === shorthandBorders[ 0 ]\n\t);\n};\n\nexport const getSplitBorders = ( border?: Border ) => {\n\tif ( ! border || isEmptyBorder( border ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn {\n\t\ttop: border,\n\t\tright: border,\n\t\tbottom: border,\n\t\tleft: border,\n\t};\n};\n\nexport const getBorderDiff = ( original: Border, updated: Border ) => {\n\tconst diff: Border = {};\n\n\tif ( original.color !== updated.color ) {\n\t\tdiff.color = updated.color;\n\t}\n\n\tif ( original.style !== updated.style ) {\n\t\tdiff.style = updated.style;\n\t}\n\n\tif ( original.width !== updated.width ) {\n\t\tdiff.width = updated.width;\n\t}\n\n\treturn diff;\n};\n\nexport const getCommonBorder = ( borders?: Borders ) => {\n\tif ( ! borders ) {\n\t\treturn undefined;\n\t}\n\n\tconst colors: ( CSSProperties[ 'borderColor' ] | undefined )[] = [];\n\tconst styles: ( CSSProperties[ 'borderStyle' ] | undefined )[] = [];\n\tconst widths: ( CSSProperties[ 'borderWidth' ] | undefined )[] = [];\n\n\tsides.forEach( ( side ) => {\n\t\tcolors.push( borders[ side ]?.color );\n\t\tstyles.push( borders[ side ]?.style );\n\t\twidths.push( borders[ side ]?.width );\n\t} );\n\n\tconst allColorsMatch = colors.every( ( value ) => value === colors[ 0 ] );\n\tconst allStylesMatch = styles.every( ( value ) => value === styles[ 0 ] );\n\tconst allWidthsMatch = widths.every( ( value ) => value === widths[ 0 ] );\n\n\treturn {\n\t\tcolor: allColorsMatch ? colors[ 0 ] : undefined,\n\t\tstyle: allStylesMatch ? styles[ 0 ] : undefined,\n\t\twidth: allWidthsMatch ? widths[ 0 ] : getMostCommonUnit( widths ),\n\t};\n};\n\nexport const getShorthandBorderStyle = (\n\tborder?: Border,\n\tfallbackBorder?: Border\n) => {\n\tif ( isEmptyBorder( border ) ) {\n\t\treturn fallbackBorder;\n\t}\n\n\tconst {\n\t\tcolor: fallbackColor,\n\t\tstyle: fallbackStyle,\n\t\twidth: fallbackWidth,\n\t} = fallbackBorder || {};\n\n\tconst {\n\t\tcolor = fallbackColor,\n\t\tstyle = fallbackStyle,\n\t\twidth = fallbackWidth,\n\t} = border as Border;\n\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn [ width, borderStyle, color ].filter( Boolean ).join( ' ' );\n};\n\nexport const getMostCommonUnit = (\n\tvalues: Array< string | number | undefined >\n): string | undefined => {\n\t// Collect all the CSS units.\n\tconst units = values.map( ( value ) =>\n\t\tvalue === undefined ? undefined : parseCSSUnitValue( `${ value }` )[ 1 ]\n\t);\n\n\t// Return the most common unit out of only the defined CSS units.\n\tconst filteredUnits = units.filter( ( value ) => value !== undefined );\n\treturn mode( filteredUnits as string[] );\n};\n\n/**\n * Finds the mode value out of the array passed favouring the first value\n * as a tiebreaker.\n *\n * @param values Values to determine the mode from.\n *\n * @return The mode value.\n */\nfunction mode( values: Array< string > ): string | undefined {\n\tif ( values.length === 0 ) {\n\t\treturn undefined;\n\t}\n\n\tconst map: { [ index: string ]: number } = {};\n\tlet maxCount = 0;\n\tlet currentMode;\n\n\tvalues.forEach( ( value ) => {\n\t\tmap[ value ] = map[ value ] === undefined ? 1 : map[ value ] + 1;\n\n\t\tif ( map[ value ] > maxCount ) {\n\t\t\tcurrentMode = value;\n\t\t\tmaxCount = map[ value ];\n\t\t}\n\t} );\n\n\treturn currentMode;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_unitValues","require","sides","borderProps","isEmptyBorder","border","some","prop","undefined","exports","isDefinedBorder","hasSplitBorders","allSidesEmpty","every","side","isCompleteBorder","Object","keys","indexOf","hasMixedBorders","borders","shorthandBorders","map","getShorthandBorderStyle","getSplitBorders","top","right","bottom","left","getBorderDiff","original","updated","diff","color","style","width","getCommonBorder","colors","styles","widths","forEach","push","allColorsMatch","value","allStylesMatch","allWidthsMatch","getMostCommonUnit","fallbackBorder","fallbackColor","fallbackStyle","fallbackWidth","hasVisibleBorder","borderStyle","filter","Boolean","join","values","units","parseCSSUnitValue","filteredUnits","mode","length","maxCount","currentMode"],"sources":["@wordpress/components/src/border-box-control/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { parseCSSUnitValue } from '../utils/unit-values';\nimport type { Border } from '../border-control/types';\nimport type { AnyBorder, Borders, BorderProp, BorderSide } from './types';\n\nconst sides: BorderSide[] = [ 'top', 'right', 'bottom', 'left' ];\nconst borderProps: BorderProp[] = [ 'color', 'style', 'width' ];\n\nexport const isEmptyBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn true;\n\t}\n\treturn ! borderProps.some( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const isDefinedBorder = ( border: AnyBorder ) => {\n\t// No border, no worries :)\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\t// If we have individual borders per side within the border object we\n\t// need to check whether any of those side borders have been set.\n\tif ( hasSplitBorders( border ) ) {\n\t\tconst allSidesEmpty = sides.every( ( side ) =>\n\t\t\tisEmptyBorder( ( border as Borders )[ side ] )\n\t\t);\n\n\t\treturn ! allSidesEmpty;\n\t}\n\n\t// If we have a top-level border only, check if that is empty. e.g.\n\t// { color: undefined, style: undefined, width: undefined }\n\t// Border radius can still be set within the border object as it is\n\t// handled separately.\n\treturn ! isEmptyBorder( border as Border );\n};\n\nexport const isCompleteBorder = ( border?: Border ) => {\n\tif ( ! border ) {\n\t\treturn false;\n\t}\n\n\treturn borderProps.every( ( prop ) => border[ prop ] !== undefined );\n};\n\nexport const hasSplitBorders = ( border: AnyBorder = {} ) => {\n\treturn Object.keys( border ).some(\n\t\t( side ) => sides.indexOf( side as BorderSide ) !== -1\n\t);\n};\n\nexport const hasMixedBorders = ( borders: AnyBorder ) => {\n\tif ( ! hasSplitBorders( borders ) ) {\n\t\treturn false;\n\t}\n\n\tconst shorthandBorders = sides.map( ( side: BorderSide ) =>\n\t\tgetShorthandBorderStyle( ( borders as Borders )?.[ side ] )\n\t);\n\n\treturn ! shorthandBorders.every(\n\t\t( border ) => border === shorthandBorders[ 0 ]\n\t);\n};\n\nexport const getSplitBorders = ( border?: Border ) => {\n\tif ( ! border || isEmptyBorder( border ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn {\n\t\ttop: border,\n\t\tright: border,\n\t\tbottom: border,\n\t\tleft: border,\n\t};\n};\n\nexport const getBorderDiff = ( original: Border, updated: Border ) => {\n\tconst diff: Border = {};\n\n\tif ( original.color !== updated.color ) {\n\t\tdiff.color = updated.color;\n\t}\n\n\tif ( original.style !== updated.style ) {\n\t\tdiff.style = updated.style;\n\t}\n\n\tif ( original.width !== updated.width ) {\n\t\tdiff.width = updated.width;\n\t}\n\n\treturn diff;\n};\n\nexport const getCommonBorder = ( borders?: Borders ) => {\n\tif ( ! borders ) {\n\t\treturn undefined;\n\t}\n\n\tconst colors: ( CSSProperties[ 'borderColor' ] | undefined )[] = [];\n\tconst styles: ( CSSProperties[ 'borderStyle' ] | undefined )[] = [];\n\tconst widths: ( CSSProperties[ 'borderWidth' ] | undefined )[] = [];\n\n\tsides.forEach( ( side ) => {\n\t\tcolors.push( borders[ side ]?.color );\n\t\tstyles.push( borders[ side ]?.style );\n\t\twidths.push( borders[ side ]?.width );\n\t} );\n\n\tconst allColorsMatch = colors.every( ( value ) => value === colors[ 0 ] );\n\tconst allStylesMatch = styles.every( ( value ) => value === styles[ 0 ] );\n\tconst allWidthsMatch = widths.every( ( value ) => value === widths[ 0 ] );\n\n\treturn {\n\t\tcolor: allColorsMatch ? colors[ 0 ] : undefined,\n\t\tstyle: allStylesMatch ? styles[ 0 ] : undefined,\n\t\twidth: allWidthsMatch ? widths[ 0 ] : getMostCommonUnit( widths ),\n\t};\n};\n\nexport const getShorthandBorderStyle = (\n\tborder?: Border,\n\tfallbackBorder?: Border\n) => {\n\tif ( isEmptyBorder( border ) ) {\n\t\treturn fallbackBorder;\n\t}\n\n\tconst {\n\t\tcolor: fallbackColor,\n\t\tstyle: fallbackStyle,\n\t\twidth: fallbackWidth,\n\t} = fallbackBorder || {};\n\n\tconst {\n\t\tcolor = fallbackColor,\n\t\tstyle = fallbackStyle,\n\t\twidth = fallbackWidth,\n\t} = border as Border;\n\n\tconst hasVisibleBorder = ( !! width && width !== '0' ) || !! color;\n\tconst borderStyle = hasVisibleBorder ? style || 'solid' : style;\n\n\treturn [ width, borderStyle, color ].filter( Boolean ).join( ' ' );\n};\n\nexport const getMostCommonUnit = (\n\tvalues: Array< string | number | undefined >\n): string | undefined => {\n\t// Collect all the CSS units.\n\tconst units = values.map( ( value ) =>\n\t\tvalue === undefined ? undefined : parseCSSUnitValue( `${ value }` )[ 1 ]\n\t);\n\n\t// Return the most common unit out of only the defined CSS units.\n\tconst filteredUnits = units.filter( ( value ) => value !== undefined );\n\treturn mode( filteredUnits as string[] );\n};\n\n/**\n * Finds the mode value out of the array passed favouring the first value\n * as a tiebreaker.\n *\n * @param values Values to determine the mode from.\n *\n * @return The mode value.\n */\nfunction mode( values: Array< string > ): string | undefined {\n\tif ( values.length === 0 ) {\n\t\treturn undefined;\n\t}\n\n\tconst map: { [ index: string ]: number } = {};\n\tlet maxCount = 0;\n\tlet currentMode;\n\n\tvalues.forEach( ( value ) => {\n\t\tmap[ value ] = map[ value ] === undefined ? 1 : map[ value ] + 1;\n\n\t\tif ( map[ value ] > maxCount ) {\n\t\t\tcurrentMode = value;\n\t\t\tmaxCount = map[ value ];\n\t\t}\n\t} );\n\n\treturn currentMode;\n}\n"],"mappings":"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","ignoreList":[]}

package/build/border-control/border-control-dropdown/component.js

@@ -1,3 +1,4 @@
+/* wp:polyfill */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/build/border-control/border-control-dropdown/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_borderControlStylePicker","_interopRequireDefault","_button","_colorIndicator","_colorPalette","_dropdown","_vStack","_context","_hook","_dropdownContentWrapper","_utils","_jsxRuntime","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","isMultiplePaletteArray","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","sprintf","__","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","isStyleSettable","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","size","__unstablePopoverProps","otherProps","useBorderControlDropdown","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","jsx","default","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","children","className","renderContent","onClose","jsxs","Fragment","paddingSize","VStack","spacing","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\\((.+)\\)$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %s: The color's hex code e.g: \"#f00\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t__(\n\t\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t),\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %s: The color's hex code e.g: \"#f00\".\n\t\t\t__(\n\t\t\t\t'Border color picker. The currently selected color has a value of \"%s\".'\n\t\t\t),\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tisStyleSettable,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tsize,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip\n\t\t\t__next40pxDefaultSize={ size === '__unstable-large' }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && isStyleSettable && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"],"mappings":";;;;;;;AAQA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,yBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,eAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,aAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,SAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AAEA,IAAAQ,QAAA,GAAAR,OAAA;AACA,IAAAS,KAAA,GAAAT,OAAA;AACA,IAAAU,uBAAA,GAAAR,sBAAA,CAAAF,OAAA;AAGA,IAAAW,MAAA,GAAAX,OAAA;AAAmE,IAAAY,WAAA,GAAAZ,OAAA;AAzBnE;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAiBA,MAAMa,sBAAsB,GAAKC,UAAkB,IAAM;EACxD;EACA,OAAOA,UAAU,CAACC,OAAO,CAAE,eAAe,EAAE,IAAK,CAAC;AACnD,CAAC;AAED,MAAMC,cAAc,GAAGA,CACtBF,UAA0C,EAC1CG,MAA0C,KACtC;EACJ,IAAK,CAAEH,UAAU,IAAI,CAAEG,MAAM,EAAG;IAC/B;EACD;EAEA,IAAK,IAAAC,6BAAsB,EAAED,MAAO,CAAC,EAAG;IACvC;IACA,IAAIE,YAAY;IAEhBF,MAAM,CAACG,IAAI,CAAIC,MAAM,IACpBA,MAAM,CAACJ,MAAM,CAACG,IAAI,CAAIE,KAAK,IAAM;MAChC,IAAKA,KAAK,CAACA,KAAK,KAAKR,UAAU,EAAG;QACjCK,YAAY,GAAGG,KAAK;QACpB,OAAO,IAAI;MACZ;MAEA,OAAO,KAAK;IACb,CAAE,CACH,CAAC;IAED,OAAOH,YAAY;EACpB;;EAEA;EACA,OAAOF,MAAM,CAACM,IAAI,CAAID,KAAK,IAAMA,KAAK,CAACA,KAAK,KAAKR,UAAW,CAAC;AAC9D,CAAC;AAED,MAAMU,kBAAkB,GAAGA,CAC1BV,UAA0C,EAC1CW,WAAoC,EACpCC,KAAqC,EACrCC,cAAuB,KACnB;EACJ,IAAKA,cAAc,EAAG;IACrB,IAAKF,WAAW,EAAG;MAClB,MAAMG,cAAc,GAAGf,sBAAsB,CAAEY,WAAW,CAACH,KAAM,CAAC;MAClE,OAAOI,KAAK,GACT,IAAAG,aAAO;MACP;MACA,IAAAC,QAAE,EACD,iJACD,CAAC,EACDL,WAAW,CAACM,IAAI,EAChBH,cAAc,EACdF,KACA,CAAC,GACD,IAAAG,aAAO;MACP;MACA,IAAAC,QAAE,EACD,yGACD,CAAC,EACDL,WAAW,CAACM,IAAI,EAChBH,cACA,CAAC;IACL;IAEA,IAAKd,UAAU,EAAG;MACjB,MAAMc,cAAc,GAAGf,sBAAsB,CAAEC,UAAW,CAAC;MAC3D,OAAOY,KAAK,GACT,IAAAG,aAAO;MACP;MACA,IAAAC,QAAE,EACD,4HACD,CAAC,EACDF,cAAc,EACdF,KACA,CAAC,GACD,IAAAG,aAAO;MACP;MACA,IAAAC,QAAE,EACD,kFACD,CAAC,EACDF,cACA,CAAC;IACL;IAEA,OAAO,IAAAE,QAAE,EAAE,gCAAiC,CAAC;EAC9C;EAEA,IAAKL,WAAW,EAAG;IAClB,OAAO,IAAAI,aAAO;IACb;IACA,IAAAC,QAAE,EACD,+FACD,CAAC,EACDL,WAAW,CAACM,IAAI,EAChBlB,sBAAsB,CAAEY,WAAW,CAACH,KAAM,CAC3C,CAAC;EACF;EAEA,IAAKR,UAAU,EAAG;IACjB,OAAO,IAAAe,aAAO;IACb;IACA,IAAAC,QAAE,EACD,wEACD,CAAC,EACDjB,sBAAsB,CAAEC,UAAW,CACpC,CAAC;EACF;EAEA,OAAO,IAAAgB,QAAE,EAAE,sBAAuB,CAAC;AACpC,CAAC;AAED,MAAME,qBAAqB,GAAGA,CAC7BC,KAAsD,EACtDC,YAAuC,KACnC;EACJ,MAAM;IACLC,iCAAiC;IACjCC,MAAM;IACNnB,MAAM;IACNoB,mBAAmB;IACnBC,WAAW;IACXC,WAAW;IACXC,kBAAkB;IAClBC,yBAAyB;IACzBC,eAAe;IACfC,OAAO;IACPC,aAAa;IACbC,aAAa;IACbC,uBAAuB;IACvBC,wBAAwB;IACxBC,oBAAoB;IACpBC,IAAI;IACJC,sBAAsB;IACtB,GAAGC;EACJ,CAAC,GAAG,IAAAC,8BAAwB,EAAEnB,KAAM,CAAC;EAErC,MAAM;IAAEX,KAAK;IAAEI;EAAM,CAAC,GAAGU,MAAM,IAAI,CAAC,CAAC;EACrC,MAAMX,WAAW,GAAGT,cAAc,CAAEM,KAAK,EAAEL,MAAO,CAAC;EAEnD,MAAMoC,eAAe,GAAG7B,kBAAkB,CACzCF,KAAK,EACLG,WAAW,EACXC,KAAK,EACLa,WACD,CAAC;EAED,MAAMe,eAAe,GAAGhC,KAAK,IAAMI,KAAK,IAAIA,KAAK,KAAK,MAAQ;EAC9D,MAAM6B,gBAAgB,GAAGpB,iCAAiC,GACvD,aAAa,GACbqB,SAAS;EAEZ,MAAMC,YAAsD,GAAGA,CAAE;IAChEC;EACD,CAAC,kBACA,IAAA9C,WAAA,CAAA+C,GAAA,EAACxD,OAAA,CAAAyD,OAAM;IACNC,OAAO,EAAGH,QAAU;IACpBI,OAAO,EAAC,UAAU;IAClB,cAAaT,eAAiB;IAC9BU,eAAe,EAAGR,gBAAkB;IACpCS,KAAK,EAAG,IAAAlC,QAAE,EAAE,+BAAgC,CAAG;IAC/CmC,WAAW;IACXC,qBAAqB,EAAGjB,IAAI,KAAK,kBAAoB;IAAAkB,QAAA,eAErD,IAAAvD,WAAA,CAAA+C,GAAA;MAAMS,SAAS,EAAG3B,yBAA2B;MAAA0B,QAAA,eAC5C,IAAAvD,WAAA,CAAA+C,GAAA,EAACvD,eAAA,CAAAwD,OAAc;QACdQ,SAAS,EAAG5B,kBAAoB;QAChC1B,UAAU,EAAGQ;MAAO,CACpB;IAAC,CACG;EAAC,CACA,CACR;EAED,MAAM+C,aAAwD,GAAGA,CAAE;IAClEC;EACD,CAAC,kBACA,IAAA1D,WAAA,CAAA2D,IAAA,EAAA3D,WAAA,CAAA4D,QAAA;IAAAL,QAAA,gBACC,IAAAvD,WAAA,CAAA+C,GAAA,EAACjD,uBAAA,CAAAkD,OAAsB;MAACa,WAAW,EAAC,QAAQ;MAAAN,QAAA,eAC3C,IAAAvD,WAAA,CAAA2D,IAAA,EAAChE,OAAA,CAAAmE,MAAM;QAACN,SAAS,EAAGrB,wBAA0B;QAAC4B,OAAO,EAAG,CAAG;QAAAR,QAAA,gBAC3D,IAAAvD,WAAA,CAAA+C,GAAA,EAACtD,aAAA,CAAAuD,OAAY;UACZQ,SAAS,EAAGtB,uBAAyB;UACrC8B,KAAK,EAAGtD,KAAO;UACfuD,QAAQ,EAAGjC,aAAe;UACnB3B,MAAM;UAAEoB,mBAAmB;UAClCF,iCAAiC,EAChCA,iCACA;UACD2C,SAAS,EAAG,KAAO;UACnBxC,WAAW,EAAGA;QAAa,CAC3B,CAAC,EACAC,WAAW,IAAIG,eAAe,iBAC/B,IAAA9B,WAAA,CAAA+C,GAAA,EAAC1D,yBAAA,CAAA2D,OAAwB;UACxBI,KAAK,EAAG,IAAAlC,QAAE,EAAE,OAAQ,CAAG;UACvB8C,KAAK,EAAGlD,KAAO;UACfmD,QAAQ,EAAGhC;QAAe,CAC1B,CACD;MAAA,CACM;IAAC,CACc,CAAC,EACvBS,eAAe,iBAChB,IAAA1C,WAAA,CAAA+C,GAAA,EAACjD,uBAAA,CAAAkD,OAAsB;MAACa,WAAW,EAAC,MAAM;MAAAN,QAAA,eACzC,IAAAvD,WAAA,CAAA+C,GAAA,EAACxD,OAAA,CAAAyD,OAAM;QACNQ,SAAS,EAAGpB,oBAAsB;QAClCc,OAAO,EAAC,UAAU;QAClBD,OAAO,EAAGA,CAAA,KAAM;UACflB,OAAO,CAAC,CAAC;UACT2B,OAAO,CAAC,CAAC;QACV,CAAG;QACHJ,qBAAqB;QAAAC,QAAA,EAEnB,IAAArC,QAAE,EAAE,OAAQ;MAAC,CACR;IAAC,CACc,CACxB;EAAA,CACA,CACF;EAED,oBACC,IAAAlB,WAAA,CAAA+C,GAAA,EAACrD,SAAA,CAAAsD,OAAQ;IACRH,YAAY,EAAGA,YAAc;IAC7BY,aAAa,EAAGA,aAAe;IAC/BU,YAAY,EAAG;MACd,GAAG7B;IACJ,CAAG;IAAA,GACEC,UAAU;IACf6B,GAAG,EAAG9C;EAAc,CACpB,CAAC;AAEJ,CAAC;AAED,MAAM+C,8BAA8B,GAAG,IAAAC,uBAAc,EACpDlD,qBAAqB,EACrB,uBACD,CAAC;AAAC,IAAAmD,QAAA,GAAAC,OAAA,CAAAxB,OAAA,GAEaqB,8BAA8B","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_borderControlStylePicker","_interopRequireDefault","_button","_colorIndicator","_colorPalette","_dropdown","_vStack","_context","_hook","_dropdownContentWrapper","_utils","_jsxRuntime","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","isMultiplePaletteArray","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","sprintf","__","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","isStyleSettable","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","size","__unstablePopoverProps","otherProps","useBorderControlDropdown","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","jsx","default","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","children","className","renderContent","onClose","jsxs","Fragment","paddingSize","VStack","spacing","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\\((.+)\\)$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %s: The color's hex code e.g: \"#f00\".\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%s\".'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t__(\n\t\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t),\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %s: The color's hex code e.g: \"#f00\".\n\t\t\t__(\n\t\t\t\t'Border color picker. The currently selected color has a value of \"%s\".'\n\t\t\t),\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tisStyleSettable,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tsize,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip\n\t\t\t__next40pxDefaultSize={ size === '__unstable-large' }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && isStyleSettable && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"],"mappings":"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","ignoreList":[]}

package/build/border-control/border-control-style-picker/component.js

@@ -1,3 +1,4 @@
+/* wp:polyfill */
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {

package/build/border-control/border-control-style-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_i18n","_context","_toggleGroupControl","_jsxRuntime","BORDER_STYLES","label","__","icon","lineSolid","value","lineDashed","lineDotted","UnconnectedBorderControlStylePicker","onChange","restProps","forwardedRef","jsx","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","isDeselectable","children","map","borderStyle","ToggleGroupControlOptionIcon","BorderControlStylePicker","contextConnect","_default","exports","default"],"sources":["@wordpress/components/src/border-control/border-control-style-picker/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../context';\nimport type { StylePickerProps } from '../types';\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOptionIcon,\n} from '../../toggle-group-control';\n\nconst BORDER_STYLES = [\n\t{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },\n\t{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },\n\t{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },\n];\n\nfunction UnconnectedBorderControlStylePicker(\n\t{ onChange, ...restProps }: StylePickerProps,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tref={ forwardedRef }\n\t\t\tisDeselectable\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tonChange?.( value as string | undefined );\n\t\t\t} }\n\t\t\t{ ...restProps }\n\t\t>\n\t\t\t{ BORDER_STYLES.map( ( borderStyle ) => (\n\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\tkey={ borderStyle.value }\n\t\t\t\t\tvalue={ borderStyle.value }\n\t\t\t\t\ticon={ borderStyle.icon }\n\t\t\t\t\tlabel={ borderStyle.label }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nconst BorderControlStylePicker = contextConnect(\n\tUnconnectedBorderControlStylePicker,\n\t'BorderControlStylePicker'\n);\n\nexport default BorderControlStylePicker;\n"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AAGoC,IAAAI,WAAA,GAAAJ,OAAA;AAdpC;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMK,aAAa,GAAG,CACrB;EAAEC,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ,CAAC;EAAEC,IAAI,EAAEC,gBAAS;EAAEC,KAAK,EAAE;AAAQ,CAAC,EACzD;EAAEJ,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EAAEC,IAAI,EAAEG,iBAAU;EAAED,KAAK,EAAE;AAAS,CAAC,EAC5D;EAAEJ,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EAAEC,IAAI,EAAEI,iBAAU;EAAEF,KAAK,EAAE;AAAS,CAAC,CAC5D;AAED,SAASG,mCAAmCA,CAC3C;EAAEC,QAAQ;EAAE,GAAGC;AAA4B,CAAC,EAC5CC,YAAuC,EACtC;EACD,oBACC,IAAAZ,WAAA,CAAAa,GAAA,EAACd,mBAAA,CAAAe,kBAAkB;IAClBC,uBAAuB;IACvBC,qBAAqB;IACrBC,GAAG,EAAGL,YAAc;IACpBM,cAAc;IACdR,QAAQ,EAAKJ,KAAK,IAAM;MACvBI,QAAQ,GAAIJ,KAA4B,CAAC;IAC1C,CAAG;IAAA,GACEK,SAAS;IAAAQ,QAAA,EAEZlB,aAAa,CAACmB,GAAG,CAAIC,WAAW,iBACjC,IAAArB,WAAA,CAAAa,GAAA,EAACd,mBAAA,CAAAuB,4BAA4B;MAE5BhB,KAAK,EAAGe,WAAW,CAACf,KAAO;MAC3BF,IAAI,EAAGiB,WAAW,CAACjB,IAAM;MACzBF,KAAK,EAAGmB,WAAW,CAACnB;IAAO,GAHrBmB,WAAW,CAACf,KAIlB,CACA;EAAC,CACgB,CAAC;AAEvB;AAEA,MAAMiB,wBAAwB,GAAG,IAAAC,uBAAc,EAC9Cf,mCAAmC,EACnC,0BACD,CAAC;AAAC,IAAAgB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaJ,wBAAwB","ignoreList":[]}
+{"version":3,"names":["_icons","require","_i18n","_context","_toggleGroupControl","_jsxRuntime","BORDER_STYLES","label","__","icon","lineSolid","value","lineDashed","lineDotted","UnconnectedBorderControlStylePicker","onChange","restProps","forwardedRef","jsx","ToggleGroupControl","__nextHasNoMarginBottom","__next40pxDefaultSize","ref","isDeselectable","children","map","borderStyle","ToggleGroupControlOptionIcon","BorderControlStylePicker","contextConnect","_default","exports","default"],"sources":["@wordpress/components/src/border-control/border-control-style-picker/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../context';\nimport type { StylePickerProps } from '../types';\nimport {\n\tToggleGroupControl,\n\tToggleGroupControlOptionIcon,\n} from '../../toggle-group-control';\n\nconst BORDER_STYLES = [\n\t{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },\n\t{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },\n\t{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },\n];\n\nfunction UnconnectedBorderControlStylePicker(\n\t{ onChange, ...restProps }: StylePickerProps,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\t__next40pxDefaultSize\n\t\t\tref={ forwardedRef }\n\t\t\tisDeselectable\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tonChange?.( value as string | undefined );\n\t\t\t} }\n\t\t\t{ ...restProps }\n\t\t>\n\t\t\t{ BORDER_STYLES.map( ( borderStyle ) => (\n\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\tkey={ borderStyle.value }\n\t\t\t\t\tvalue={ borderStyle.value }\n\t\t\t\t\ticon={ borderStyle.icon }\n\t\t\t\t\tlabel={ borderStyle.label }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToggleGroupControl>\n\t);\n}\n\nconst BorderControlStylePicker = contextConnect(\n\tUnconnectedBorderControlStylePicker,\n\t'BorderControlStylePicker'\n);\n\nexport default BorderControlStylePicker;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AAGoC,IAAAI,WAAA,GAAAJ,OAAA;AAdpC;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMK,aAAa,GAAG,CACrB;EAAEC,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ,CAAC;EAAEC,IAAI,EAAEC,gBAAS;EAAEC,KAAK,EAAE;AAAQ,CAAC,EACzD;EAAEJ,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EAAEC,IAAI,EAAEG,iBAAU;EAAED,KAAK,EAAE;AAAS,CAAC,EAC5D;EAAEJ,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EAAEC,IAAI,EAAEI,iBAAU;EAAEF,KAAK,EAAE;AAAS,CAAC,CAC5D;AAED,SAASG,mCAAmCA,CAC3C;EAAEC,QAAQ;EAAE,GAAGC;AAA4B,CAAC,EAC5CC,YAAuC,EACtC;EACD,oBACC,IAAAZ,WAAA,CAAAa,GAAA,EAACd,mBAAA,CAAAe,kBAAkB;IAClBC,uBAAuB;IACvBC,qBAAqB;IACrBC,GAAG,EAAGL,YAAc;IACpBM,cAAc;IACdR,QAAQ,EAAKJ,KAAK,IAAM;MACvBI,QAAQ,GAAIJ,KAA4B,CAAC;IAC1C,CAAG;IAAA,GACEK,SAAS;IAAAQ,QAAA,EAEZlB,aAAa,CAACmB,GAAG,CAAIC,WAAW,iBACjC,IAAArB,WAAA,CAAAa,GAAA,EAACd,mBAAA,CAAAuB,4BAA4B;MAE5BhB,KAAK,EAAGe,WAAW,CAACf,KAAO;MAC3BF,IAAI,EAAGiB,WAAW,CAACjB,IAAM;MACzBF,KAAK,EAAGmB,WAAW,CAACnB;IAAO,GAHrBmB,WAAW,CAACf,KAIlB,CACA;EAAC,CACgB,CAAC;AAEvB;AAEA,MAAMiB,wBAAwB,GAAG,IAAAC,uBAAc,EAC9Cf,mCAAmC,EACnC,0BACD,CAAC;AAAC,IAAAgB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaJ,wBAAwB","ignoreList":[]}

package/build/box-control/index.js

@@ -1,3 +1,4 @@
+/* wp:polyfill */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -15,9 +16,7 @@ var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _baseControl = require("../base-control");
-var _allInputControl = _interopRequireDefault(require("./all-input-control"));
-var _inputControls = _interopRequireDefault(require("./input-controls"));
-var _axialInputControls = _interopRequireDefault(require("./axial-input-controls"));
+var _inputControl = _interopRequireDefault(require("./input-control"));
 var _linkedButton = _interopRequireDefault(require("./linked-button"));
 var _grid = require("../grid");
 var _boxControlStyles = require("./styles/box-control-styles");
@@ -81,6 +80,8 @@ function BoxControl({
   splitOnAxis = false,
   allowReset = true,
   resetValues = _utils2.DEFAULT_VALUES,
+  presets,
+  presetKey,
   onMouseOver,
   onMouseOut
 }) {
@@ -91,7 +92,7 @@ function BoxControl({
   const hasInitialValue = (0, _utils2.isValuesDefined)(valuesProp);
   const hasOneSide = sides?.length === 1;
   const [isDirty, setIsDirty] = (0, _element.useState)(hasInitialValue);
-  const [isLinked, setIsLinked] = (0, _element.useState)(!hasInitialValue || !(0, _utils2.isValuesMixed)(inputValues) || hasOneSide);
+  const [isLinked, setIsLinked] = (0, _element.useState)(!hasInitialValue || !(0, _utils2.isValueMixed)(inputValues) || hasOneSide);
   const [side, setSide] = (0, _element.useState)((0, _utils2.getInitialSide)(isLinked, splitOnAxis));
 
   // Tracking selected units via internal state allows filtering of CSS unit
@@ -137,13 +138,16 @@ function BoxControl({
     setSelectedUnits,
     sides,
     values: inputValues,
-    __next40pxDefaultSize
+    __next40pxDefaultSize,
+    presets,
+    presetKey
   };
   (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
     componentName: 'BoxControl',
     __next40pxDefaultSize,
     size: undefined
   });
+  const sidesToRender = (0, _utils2.getAllowedSides)(sides);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_grid.Grid, {
     id: id,
     columns: 3,
@@ -153,23 +157,23 @@ function BoxControl({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.BaseControl.VisualLabel, {
       id: headingId,
       children: label
-    }), isLinked && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_boxControlStyles.InputWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedBoxControlIcon, {
-        side: side,
-        sides: sides
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_allInputControl.default, {
+    }), isLinked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.InputWrapper, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControl.default, {
+        side: "all",
         ...inputControlProps
-      })]
+      })
     }), !hasOneSide && /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.LinkedButtonWrapper, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkedButton.default, {
         onClick: toggleLinked,
         isLinked: isLinked
       })
-    }), !isLinked && splitOnAxis && /*#__PURE__*/(0, _jsxRuntime.jsx)(_axialInputControls.default, {
+    }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis => /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControl.default, {
+      side: axis,
       ...inputControlProps
-    }), !isLinked && !splitOnAxis && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControls.default, {
+    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis => /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControl.default, {
+      side: axis,
       ...inputControlProps
-    }), allowReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.ResetButton, {
+    }, axis)), allowReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.ResetButton, {
       className: "component-box-control__reset-button",
       variant: "secondary",
       size: "small",

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

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_allInputControl","_interopRequireDefault","_inputControls","_axialInputControls","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","_deprecated36pxSize","_jsxRuntime","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValuesMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","maybeWarnDeprecated36pxSize","componentName","size","undefined","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","FlexedBoxControlIcon","default","LinkedButtonWrapper","onClick","ResetButton","className","variant","disabled","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tFlexedBoxControlIcon,\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl\n *       __next40pxDefaultSize\n *       values={ values }\n *       onChange={ setValues }\n *     />\n *   );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\t__next40pxDefaultSize,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t<AllInputControl { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_inputControl","_interopRequireDefault","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","_deprecated36pxSize","_jsxRuntime","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","presets","presetKey","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValueMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","maybeWarnDeprecated36pxSize","componentName","size","undefined","sidesToRender","getAllowedSides","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","default","LinkedButtonWrapper","onClick","map","axis","Array","from","ResetButton","className","variant","disabled","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl\n *       __next40pxDefaultSize\n *       values={ values }\n *       onChange={ setValues }\n *     />\n *   );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tpresets,\n\tpresetKey,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\t__next40pxDefaultSize,\n\t\tpresets,\n\t\tpresetKey,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<InputControl side=\"all\" { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}

package/build/box-control/input-control.js

@@ -0,0 +1,222 @@
+/* wp:polyfill */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BoxInputControl;
+var _compose = require("@wordpress/compose");
+var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
+var _icons = require("@wordpress/icons");
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+var _utils = require("../unit-control/utils");
+var _utils2 = require("./utils");
+var _boxControlStyles = require("./styles/box-control-styles");
+var _button = _interopRequireDefault(require("../button"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const noop = () => {};
+function getSidesToModify(side, sides, isAlt) {
+  const allowedSides = (0, _utils2.getAllowedSides)(sides);
+  let modifiedSides = [];
+  switch (side) {
+    case 'all':
+      modifiedSides = ['top', 'bottom', 'left', 'right'];
+      break;
+    case 'horizontal':
+      modifiedSides = ['left', 'right'];
+      break;
+    case 'vertical':
+      modifiedSides = ['top', 'bottom'];
+      break;
+    default:
+      modifiedSides = [side];
+  }
+  if (isAlt) {
+    switch (side) {
+      case 'top':
+        modifiedSides.push('bottom');
+        break;
+      case 'bottom':
+        modifiedSides.push('top');
+        break;
+      case 'left':
+        modifiedSides.push('left');
+        break;
+      case 'right':
+        modifiedSides.push('right');
+        break;
+    }
+  }
+  return modifiedSides.filter(s => allowedSides.has(s));
+}
+function BoxInputControl({
+  __next40pxDefaultSize,
+  onChange = noop,
+  onFocus = noop,
+  values,
+  selectedUnits,
+  setSelectedUnits,
+  sides,
+  side,
+  min = 0,
+  presets,
+  presetKey,
+  ...props
+}) {
+  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
+  const defaultValuesToModify = getSidesToModify(side, sides);
+  const handleOnFocus = event => {
+    onFocus(event, {
+      side
+    });
+  };
+  const handleOnChange = nextValues => {
+    onChange(nextValues);
+  };
+  const handleRawOnValueChange = next => {
+    const nextValues = {
+      ...values
+    };
+    defaultValuesToModify.forEach(modifiedSide => {
+      nextValues[modifiedSide] = next;
+    });
+    handleOnChange(nextValues);
+  };
+  const handleOnValueChange = (next, extra) => {
+    const nextValues = {
+      ...values
+    };
+    const isNumeric = next !== undefined && !isNaN(parseFloat(next));
+    const nextValue = isNumeric ? next : undefined;
+    const modifiedSides = getSidesToModify(side, sides,
+    /**
+     * Supports changing pair sides. For example, holding the ALT key
+     * when changing the TOP will also update BOTTOM.
+     */
+    // @ts-expect-error - TODO: event.altKey is only present when the change event was
+    // triggered by a keyboard event. Should this feature be implemented differently so
+    // it also works with drag events?
+    !!extra?.event.altKey);
+    modifiedSides.forEach(modifiedSide => {
+      nextValues[modifiedSide] = nextValue;
+    });
+    handleOnChange(nextValues);
+  };
+  const handleOnUnitChange = next => {
+    const newUnits = {
+      ...selectedUnits
+    };
+    defaultValuesToModify.forEach(modifiedSide => {
+      newUnits[modifiedSide] = next;
+    });
+    setSelectedUnits(newUnits);
+  };
+  const mergedValue = (0, _utils2.getMergedValue)(values, defaultValuesToModify);
+  const hasValues = (0, _utils2.isValuesDefined)(values);
+  const isMixed = hasValues && defaultValuesToModify.length > 1 && (0, _utils2.isValueMixed)(values, defaultValuesToModify);
+  const [parsedQuantity, parsedUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(mergedValue);
+  const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];
+  const generatedId = (0, _compose.useInstanceId)(BoxInputControl, 'box-control-input');
+  const inputId = [generatedId, side].join('-');
+  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);
+  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;
+  const mixedPlaceholder = isMixed || isMixedUnit ? (0, _i18n.__)('Mixed') : undefined;
+  const hasPresets = presets && presets.length > 0 && presetKey;
+  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && (0, _utils2.isValuePreset)(mergedValue, presetKey);
+  const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);
+  const presetIndex = hasPresetValue ? (0, _utils2.getPresetIndexFromValue)(mergedValue, presetKey, presets) : undefined;
+  const marks = hasPresets ? [{
+    value: 0,
+    label: '',
+    tooltip: (0, _i18n.__)('None')
+  }].concat(presets.map((preset, index) => {
+    var _preset$name;
+    return {
+      value: index + 1,
+      label: '',
+      tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug
+    };
+  })) : [];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_boxControlStyles.InputWrapper, {
+    expanded: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedBoxControlIcon, {
+      side: side,
+      sides: sides
+    }), showCustomValueControl && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+        placement: "top-end",
+        text: _utils2.LABELS[side],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.StyledUnitControl, {
+          ...props,
+          min: min,
+          __shouldNotWarnDeprecated36pxSize: true,
+          __next40pxDefaultSize: __next40pxDefaultSize,
+          className: "component-box-control__unit-control",
+          id: inputId,
+          isPressEnterToChange: true,
+          disableUnits: isMixed || isMixedUnit,
+          value: usedValue,
+          onChange: handleOnValueChange,
+          onUnitChange: handleOnUnitChange,
+          onFocus: handleOnFocus,
+          label: _utils2.LABELS[side],
+          placeholder: mixedPlaceholder,
+          hideLabelFromVision: true
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
+        __nextHasNoMarginBottom: true,
+        __next40pxDefaultSize: __next40pxDefaultSize,
+        __shouldNotWarnDeprecated36pxSize: true,
+        "aria-controls": inputId,
+        label: _utils2.LABELS[side],
+        hideLabelFromVision: true,
+        onChange: newValue => {
+          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
+        },
+        min: isFinite(min) ? min : 0,
+        max: (_CUSTOM_VALUE_SETTING = _utils2.CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
+        step: (_CUSTOM_VALUE_SETTING2 = _utils2.CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
+        value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
+        withInputField: false
+      })]
+    }), hasPresets && !showCustomValueControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
+      __next40pxDefaultSize: true,
+      className: "spacing-sizes-control__range-control",
+      value: presetIndex !== undefined ? presetIndex + 1 : 0,
+      onChange: newIndex => {
+        const newValue = newIndex === 0 || newIndex === undefined ? undefined : (0, _utils2.getPresetValueFromIndex)(newIndex - 1, presetKey, presets);
+        handleRawOnValueChange(newValue);
+      },
+      withInputField: false,
+      "aria-valuenow": presetIndex !== undefined ? presetIndex + 1 : 0,
+      "aria-valuetext": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,
+      renderTooltipContent: index => marks[!index ? 0 : index].tooltip,
+      min: 0,
+      max: marks.length - 1,
+      marks: marks,
+      label: _utils2.LABELS[side],
+      hideLabelFromVision: true,
+      __nextHasNoMarginBottom: true
+    }), hasPresets && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+      label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
+      icon: _icons.settings,
+      onClick: () => {
+        setShowCustomValueControl(!showCustomValueControl);
+      },
+      isPressed: showCustomValueControl,
+      size: "small",
+      iconSize: 24
+    })]
+  }, `box-control-${side}`);
+}
+//# sourceMappingURL=input-control.js.map

package/build/box-control/input-control.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_compose","require","_i18n","_element","_icons","_tooltip","_interopRequireDefault","_utils","_utils2","_boxControlStyles","_button","_jsxRuntime","noop","getSidesToModify","side","sides","isAlt","allowedSides","getAllowedSides","modifiedSides","push","filter","s","has","BoxInputControl","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","min","presets","presetKey","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","defaultValuesToModify","handleOnFocus","event","handleOnChange","nextValues","handleRawOnValueChange","next","forEach","modifiedSide","handleOnValueChange","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","handleOnUnitChange","newUnits","mergedValue","getMergedValue","hasValues","isValuesDefined","isMixed","length","isValueMixed","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","generatedId","useInstanceId","inputId","join","isMixedUnit","some","usedValue","mixedPlaceholder","__","hasPresets","hasPresetValue","isValuePreset","showCustomValueControl","setShowCustomValueControl","useState","presetIndex","getPresetIndexFromValue","marks","value","label","tooltip","concat","map","preset","index","_preset$name","name","slug","jsxs","InputWrapper","expanded","children","jsx","FlexedBoxControlIcon","Fragment","default","placement","text","LABELS","StyledUnitControl","__shouldNotWarnDeprecated36pxSize","className","id","isPressEnterToChange","disableUnits","onUnitChange","placeholder","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","newValue","isFinite","max","CUSTOM_VALUE_SETTINGS","step","withInputField","newIndex","getPresetValueFromIndex","renderTooltipContent","icon","settings","onClick","isPressed","size","iconSize"],"sources":["@wordpress/components/src/box-control/input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tCUSTOM_VALUE_SETTINGS,\n\tgetMergedValue,\n\tgetAllowedSides,\n\tgetPresetIndexFromValue,\n\tgetPresetValueFromIndex,\n\tisValuePreset,\n\tisValuesDefined,\n\tisValueMixed,\n\tLABELS,\n} from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\nimport Button from '../button';\n\nconst noop = () => {};\n\nfunction getSidesToModify(\n\tside: BoxControlInputControlProps[ 'side' ],\n\tsides: BoxControlInputControlProps[ 'sides' ],\n\tisAlt?: boolean\n) {\n\tconst allowedSides = getAllowedSides( sides );\n\n\tlet modifiedSides: ( keyof BoxControlValue )[] = [];\n\tswitch ( side ) {\n\t\tcase 'all':\n\t\t\tmodifiedSides = [ 'top', 'bottom', 'left', 'right' ];\n\t\t\tbreak;\n\t\tcase 'horizontal':\n\t\t\tmodifiedSides = [ 'left', 'right' ];\n\t\t\tbreak;\n\t\tcase 'vertical':\n\t\t\tmodifiedSides = [ 'top', 'bottom' ];\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tmodifiedSides = [ side ];\n\t}\n\n\tif ( isAlt ) {\n\t\tswitch ( side ) {\n\t\t\tcase 'top':\n\t\t\t\tmodifiedSides.push( 'bottom' );\n\t\t\t\tbreak;\n\t\t\tcase 'bottom':\n\t\t\t\tmodifiedSides.push( 'top' );\n\t\t\t\tbreak;\n\t\t\tcase 'left':\n\t\t\t\tmodifiedSides.push( 'left' );\n\t\t\t\tbreak;\n\t\t\tcase 'right':\n\t\t\t\tmodifiedSides.push( 'right' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn modifiedSides.filter( ( s ) => allowedSides.has( s ) );\n}\n\nexport default function BoxInputControl( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\tside,\n\tmin = 0,\n\tpresets,\n\tpresetKey,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst defaultValuesToModify = getSidesToModify( side, sides );\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleRawOnValueChange = ( next?: string ) => {\n\t\tconst nextValues = { ...values };\n\t\tdefaultValuesToModify.forEach( ( modifiedSide ) => {\n\t\t\tnextValues[ modifiedSide ] = next;\n\t\t} );\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\n\t\tnext?: string,\n\t\textra?: { event: React.SyntheticEvent< Element, Event > }\n\t) => {\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst modifiedSides = getSidesToModify(\n\t\t\tside,\n\t\t\tsides,\n\t\t\t/**\n\t\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t\t * when changing the TOP will also update BOTTOM.\n\t\t\t */\n\t\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t\t// it also works with drag events?\n\t\t\t!! extra?.event.altKey\n\t\t);\n\n\t\tmodifiedSides.forEach( ( modifiedSide ) => {\n\t\t\tnextValues[ modifiedSide ] = nextValue;\n\t\t} );\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst handleOnUnitChange = ( next?: string ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tdefaultValuesToModify.forEach( ( modifiedSide ) => {\n\t\t\tnewUnits[ modifiedSide ] = next;\n\t\t} );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst mergedValue = getMergedValue( values, defaultValuesToModify );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed =\n\t\thasValues &&\n\t\tdefaultValuesToModify.length > 1 &&\n\t\tisValueMixed( values, defaultValuesToModify );\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( mergedValue );\n\tconst computedUnit = hasValues\n\t\t? parsedUnit\n\t\t: selectedUnits[ defaultValuesToModify[ 0 ] ];\n\tconst generatedId = useInstanceId( BoxInputControl, 'box-control-input' );\n\tconst inputId = [ generatedId, side ].join( '-' );\n\tconst isMixedUnit =\n\t\tdefaultValuesToModify.length > 1 &&\n\t\tmergedValue === undefined &&\n\t\tdefaultValuesToModify.some(\n\t\t\t( s ) => selectedUnits[ s ] !== computedUnit\n\t\t);\n\tconst usedValue =\n\t\tmergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n\tconst mixedPlaceholder = isMixed || isMixedUnit ? __( 'Mixed' ) : undefined;\n\tconst hasPresets = presets && presets.length > 0 && presetKey;\n\tconst hasPresetValue =\n\t\thasPresets &&\n\t\tmergedValue !== undefined &&\n\t\t! isMixed &&\n\t\tisValuePreset( mergedValue, presetKey );\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! hasPresets ||\n\t\t\t( ! hasPresetValue && ! isMixed && mergedValue !== undefined )\n\t);\n\tconst presetIndex = hasPresetValue\n\t\t? getPresetIndexFromValue( mergedValue, presetKey, presets )\n\t\t: undefined;\n\tconst marks = hasPresets\n\t\t? [ { value: 0, label: '', tooltip: __( 'None' ) } ].concat(\n\t\t\t\tpresets.map( ( preset, index ) => ( {\n\t\t\t\t\tvalue: index + 1,\n\t\t\t\t\tlabel: '',\n\t\t\t\t\ttooltip: preset.name ?? preset.slug,\n\t\t\t\t} ) )\n\t\t  )\n\t\t: [];\n\n\treturn (\n\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t{ showCustomValueControl && (\n\t\t\t\t<>\n\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tmin={ min }\n\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\tdisableUnits={ isMixed || isMixedUnit }\n\t\t\t\t\t\t\tvalue={ usedValue }\n\t\t\t\t\t\t\tonChange={ handleOnValueChange }\n\t\t\t\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\tplaceholder={ mixedPlaceholder }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmin={ isFinite( min ) ? min : 0 }\n\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ hasPresets && ! showCustomValueControl && (\n\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"spacing-sizes-control__range-control\"\n\t\t\t\t\tvalue={ presetIndex !== undefined ? presetIndex + 1 : 0 }\n\t\t\t\t\tonChange={ ( newIndex ) => {\n\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\tnewIndex === 0 || newIndex === undefined\n\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t: getPresetValueFromIndex(\n\t\t\t\t\t\t\t\t\t\tnewIndex - 1,\n\t\t\t\t\t\t\t\t\t\tpresetKey,\n\t\t\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t\t  );\n\t\t\t\t\t\thandleRawOnValueChange( newValue );\n\t\t\t\t\t} }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\taria-valuenow={\n\t\t\t\t\t\tpresetIndex !== undefined ? presetIndex + 1 : 0\n\t\t\t\t\t}\n\t\t\t\t\taria-valuetext={\n\t\t\t\t\t\tmarks[ presetIndex !== undefined ? presetIndex + 1 : 0 ]\n\t\t\t\t\t\t\t.tooltip\n\t\t\t\t\t}\n\t\t\t\t\trenderTooltipContent={ ( index ) =>\n\t\t\t\t\t\tmarks[ ! index ? 0 : index ].tooltip\n\t\t\t\t\t}\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ marks.length - 1 }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ hasPresets && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t}\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowCustomValueControl( ! showCustomValueControl );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</InputWrapper>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/box-control/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\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};\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tsides: BoxControlProps[ 'sides' ];\n\tvalues: BoxControlValue;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\nexport interface Preset {\n\tname: string;\n\tslug: string;\n\tvalue?: string;\n}\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\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 * Available presets to pick from.\n\t\t */\n\t\tpresets?: Preset[];\n\t\t/**\n\t\t * The key of the preset to apply.\n\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t */\n\t\tpresetKey?: string;\n\t};\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tvalues: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides: BoxControlProps[ 'sides' ];\n\t/**\n\t * Side represents the current side being rendered by the input.\n\t * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.\n\t */\n\tside: keyof typeof LABELS;\n\tpresets?: Preset[];\n\tpresetKey?: string;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}