npm - @wordpress/components - Versions diffs - 28.14.1-next.cd6172eb0.0 → 29.0.0 - Mend

@wordpress/components 28.14.1-next.cd6172eb0.0 → 29.0.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 (747) hide show

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

	@@ -1 +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":"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","ignoreList":[]}
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":"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","ignoreList":[]}

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

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

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

	@@ -1 +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":[]}
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":[]}

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

@@ -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");
@@ -91,7 +90,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
@@ -144,6 +143,7 @@ function BoxControl({
     __next40pxDefaultSize,
     size: undefined
   });
+  const sidesToRender = (0, _utils2.getAllowedSides)(sides);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_grid.Grid, {
     id: id,
     columns: 3,
@@ -153,23 +153,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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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","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\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};\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":";;;;;;;;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,aAAA,GAAAD,sBAAA,CAAAL,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AACA,IAAAQ,iBAAA,GAAAR,OAAA;AAKA,IAAAS,MAAA,GAAAT,OAAA;AACA,IAAAU,OAAA,GAAAV,OAAA;AAOA,IAAAW,MAAA,GAAAX,OAAA;AAMA,IAAAY,mBAAA,GAAAZ,OAAA;AAA4E,IAAAa,WAAA,GAAAb,OAAA;AAjC5E;AACA;AACA;;AAKA;AACA;AACA;;AA0BA,MAAMc,iBAAiB,GAAG;EACzBC,GAAG,EAAE;AACN,CAAC;AAED,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,WAAWA,CAAEC,MAAe,EAAG;EACvC,MAAMC,UAAU,GAAG,IAAAC,sBAAa,EAAEC,UAAU,EAAE,uBAAwB,CAAC;EAEvE,OAAOH,MAAM,IAAIC,UAAU;AAC5B;;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,SAASE,UAAUA,CAAE;EACpBC,qBAAqB,GAAG,KAAK;EAC7BC,EAAE,EAAEL,MAAM;EACVM,UAAU,GAAGV,iBAAiB;EAC9BW,QAAQ,GAAGT,IAAI;EACfU,KAAK,GAAG,IAAAC,QAAE,EAAE,aAAc,CAAC;EAC3BC,MAAM,EAAEC,UAAU;EAClBC,KAAK;EACLC,KAAK;EACLC,WAAW,GAAG,KAAK;EACnBC,UAAU,GAAG,IAAI;EACjBC,WAAW,GAAGC,sBAAc;EAC5BC,WAAW;EACXC;AACgB,CAAC,EAAG;EACpB,MAAM,CAAET,MAAM,EAAEU,SAAS,CAAE,GAAG,IAAAC,yBAAkB,EAAEV,UAAU,EAAE;IAC7DW,QAAQ,EAAEL;EACX,CAAE,CAAC;EACH,MAAMM,WAAW,GAAGb,MAAM,IAAIO,sBAAc;EAC5C,MAAMO,eAAe,GAAG,IAAAC,uBAAe,EAAEd,UAAW,CAAC;EACrD,MAAMe,UAAU,GAAGb,KAAK,EAAEc,MAAM,KAAK,CAAC;EAEtC,MAAM,CAAEC,OAAO,EAAEC,UAAU,CAAE,GAAG,IAAAC,iBAAQ,EAAEN,eAAgB,CAAC;EAC3D,MAAM,CAAEO,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAF,iBAAQ,EACzC,CAAEN,eAAe,IAAI,CAAE,IAAAS,oBAAY,EAAEV,WAAY,CAAC,IAAIG,UACvD,CAAC;EAED,MAAM,CAAEQ,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAL,iBAAQ,EACjC,IAAAM,sBAAc,EAAEL,QAAQ,EAAEjB,WAAY,CACvC,CAAC;;EAED;EACA;EACA;EACA,MAAM,CAAEuB,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAR,iBAAQ,EAAqB;IACxES,GAAG,EAAE,IAAAC,uCAAgC,EAAE7B,UAAU,EAAE4B,GAAI,CAAC,CAAE,CAAC,CAAE;IAC7DE,KAAK,EAAE,IAAAD,uCAAgC,EAAE7B,UAAU,EAAE8B,KAAM,CAAC,CAAE,CAAC,CAAE;IACjEC,MAAM,EAAE,IAAAF,uCAAgC,EAAE7B,UAAU,EAAE+B,MAAO,CAAC,CAAE,CAAC,CAAE;IACnEC,IAAI,EAAE,IAAAH,uCAAgC,EAAE7B,UAAU,EAAEgC,IAAK,CAAC,CAAE,CAAC;EAC9D,CAAE,CAAC;EAEH,MAAMtC,EAAE,GAAGN,WAAW,CAAEC,MAAO,CAAC;EAChC,MAAM4C,SAAS,GAAG,GAAIvC,EAAE,UAAW;EAEnC,MAAMwC,YAAY,GAAGA,CAAA,KAAM;IAC1Bb,WAAW,CAAE,CAAED,QAAS,CAAC;IACzBI,OAAO,CAAE,IAAAC,sBAAc,EAAE,CAAEL,QAAQ,EAAEjB,WAAY,CAAE,CAAC;EACrD,CAAC;EAED,MAAMgC,aAAa,GAAGA,CACrBC,MAA4C,EAC5C;IAAEb,IAAI,EAAEc;EAAgC,CAAC,KACrC;IACJb,OAAO,CAAEa,QAAS,CAAC;EACpB,CAAC;EAED,MAAMC,cAAc,GAAKC,UAA2B,IAAM;IACzD3C,QAAQ,CAAE2C,UAAW,CAAC;IACtB9B,SAAS,CAAE8B,UAAW,CAAC;IACvBrB,UAAU,CAAE,IAAK,CAAC;EACnB,CAAC;EAED,MAAMsB,aAAa,GAAGA,CAAA,KAAM;IAC3B5C,QAAQ,CAAES,WAAY,CAAC;IACvBI,SAAS,CAAEJ,WAAY,CAAC;IACxBsB,gBAAgB,CAAEtB,WAAY,CAAC;IAC/Ba,UAAU,CAAE,KAAM,CAAC;EACpB,CAAC;EAED,MAAMuB,iBAAiB,GAAG;IACzBlC,WAAW;IACXC,UAAU;IACV,GAAGb,UAAU;IACbC,QAAQ,EAAE0C,cAAc;IACxBI,OAAO,EAAEP,aAAa;IACtBf,QAAQ;IACRnB,KAAK;IACLyB,aAAa;IACbC,gBAAgB;IAChBzB,KAAK;IACLH,MAAM,EAAEa,WAAW;IACnBnB;EACD,CAAC;EAED,IAAAkD,+CAA2B,EAAE;IAC5BC,aAAa,EAAE,YAAY;IAC3BnD,qBAAqB;IACrBoD,IAAI,EAAEC;EACP,CAAE,CAAC;EACH,MAAMC,aAAa,GAAG,IAAAC,uBAAe,EAAE9C,KAAM,CAAC;EAE9C,oBACC,IAAAlB,WAAA,CAAAiE,IAAA,EAACvE,KAAA,CAAAwE,IAAI;IACJxD,EAAE,EAAGA,EAAI;IACTyD,OAAO,EAAG,CAAG;IACbC,eAAe,EAAC,6BAA6B;IAC7CC,IAAI,EAAC,OAAO;IACZ,mBAAkBpB,SAAW;IAAAqB,QAAA,gBAE7B,IAAAtE,WAAA,CAAAuE,GAAA,EAACjF,YAAA,CAAAkF,WAAW,CAACC,WAAW;MAAC/D,EAAE,EAAGuC,SAAW;MAAAqB,QAAA,EACtCzD;IAAK,CACiB,CAAC,EACxBuB,QAAQ,iBACT,IAAApC,WAAA,CAAAuE,GAAA,EAAC5E,iBAAA,CAAA+E,YAAY;MAAAJ,QAAA,eACZ,IAAAtE,WAAA,CAAAuE,GAAA,EAAChF,aAAA,CAAAoF,OAAY;QAACpC,IAAI,EAAC,KAAK;QAAA,GAAMkB;MAAiB,CAAI;IAAC,CACvC,CACd,EACC,CAAE1B,UAAU,iBACb,IAAA/B,WAAA,CAAAuE,GAAA,EAAC5E,iBAAA,CAAAiF,mBAAmB;MAAAN,QAAA,eACnB,IAAAtE,WAAA,CAAAuE,GAAA,EAAC9E,aAAA,CAAAkF,OAAY;QACZE,OAAO,EAAG3B,YAAc;QACxBd,QAAQ,EAAGA;MAAU,CACrB;IAAC,CACkB,CACrB,EAEC,CAAEA,QAAQ,IACXjB,WAAW,IACX,CAAE,UAAU,EAAE,YAAY,CAAE,CAAC2D,GAAG,CAAIC,IAAI,iBACvC,IAAA/E,WAAA,CAAAuE,GAAA,EAAChF,aAAA,CAAAoF,OAAY;MAEZpC,IAAI,EAAGwC,IAAmC;MAAA,GACrCtB;IAAiB,GAFhBsB,IAGN,CACA,CAAC,EACF,CAAE3C,QAAQ,IACX,CAAEjB,WAAW,IACb6D,KAAK,CAACC,IAAI,CAAElB,aAAc,CAAC,CAACe,GAAG,CAAIC,IAAI,iBACtC,IAAA/E,WAAA,CAAAuE,GAAA,EAAChF,aAAA,CAAAoF,OAAY;MAEZpC,IAAI,EAAGwC,IAAM;MAAA,GACRtB;IAAiB,GAFhBsB,IAGN,CACA,CAAC,EACF3D,UAAU,iBACX,IAAApB,WAAA,CAAAuE,GAAA,EAAC5E,iBAAA,CAAAuF,WAAW;MACXC,SAAS,EAAC,qCAAqC;MAC/CC,OAAO,EAAC,WAAW;MACnBvB,IAAI,EAAC,OAAO;MACZgB,OAAO,EAAGrB,aAAe;MACzB6B,QAAQ,EAAG,CAAEpD,OAAS;MAAAqC,QAAA,EAEpB,IAAAxD,QAAE,EAAE,OAAQ;IAAC,CACH,CACb;EAAA,CACI,CAAC;AAET;AAAC,IAAAwE,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GAGcnE,UAAU","ignoreList":[]}

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

@@ -0,0 +1,161 @@
+/* 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 _tooltip = _interopRequireDefault(require("../tooltip"));
+var _utils = require("../unit-control/utils");
+var _utils2 = require("./utils");
+var _boxControlStyles = require("./styles/box-control-styles");
+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,
+  ...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 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;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_boxControlStyles.InputWrapper, {
+    expanded: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedBoxControlIcon, {
+      side: side,
+      sides: sides
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+      placement: "top-end",
+      text: _utils2.LABELS[side],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.StyledUnitControl, {
+        ...props,
+        __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: 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
+    })]
+  }, `box-control-${side}`);
+}
+//# sourceMappingURL=input-control.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["_compose","require","_i18n","_tooltip","_interopRequireDefault","_utils","_utils2","_boxControlStyles","_jsxRuntime","noop","getSidesToModify","side","sides","isAlt","allowedSides","getAllowedSides","modifiedSides","push","filter","s","has","BoxInputControl","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","defaultValuesToModify","handleOnFocus","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","forEach","modifiedSide","handleOnUnitChange","newUnits","mergedValue","getMergedValue","hasValues","isValuesDefined","isMixed","length","isValueMixed","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","generatedId","useInstanceId","inputId","join","isMixedUnit","some","usedValue","mixedPlaceholder","__","jsxs","InputWrapper","expanded","children","jsx","FlexedBoxControlIcon","default","placement","text","LABELS","StyledUnitControl","__shouldNotWarnDeprecated36pxSize","className","id","isPressEnterToChange","disableUnits","value","onUnitChange","label","placeholder","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","newValue","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tCUSTOM_VALUE_SETTINGS,\n\tgetAllowedSides,\n\tgetMergedValue,\n\tisValueMixed,\n\tisValuesDefined,\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';\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\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 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\n\treturn (\n\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t<StyledUnitControl\n\t\t\t\t\t{ ...props }\n\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\tid={ inputId }\n\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\tdisableUnits={ isMixed || isMixedUnit }\n\t\t\t\t\tvalue={ usedValue }\n\t\t\t\t\tonChange={ handleOnValueChange }\n\t\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\tplaceholder={ mixedPlaceholder }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\n\t\t\t<FlexedRangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\taria-controls={ inputId }\n\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.max ?? 10 }\n\t\t\t\tstep={\n\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.step ?? 0.1\n\t\t\t\t}\n\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\twithInputField={ false }\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 CHANGED Viewed

	@@ -1 +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":[]}
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\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};\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":[]}

package/build/box-control/utils.js CHANGED Viewed

@@ -1,18 +1,21 @@
+/* wp:polyfill */
 "use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LABELS = exports.DEFAULT_VALUES = exports.CUSTOM_VALUE_SETTINGS = exports.ALL_SIDES = void 0;
 exports.applyValueToSides = applyValueToSides;
 exports.getAllUnitFallback = getAllUnitFallback;
-exports.getAllValue = getAllValue;
+exports.getAllowedSides = getAllowedSides;
 exports.getInitialSide = getInitialSide;
+exports.getMergedValue = getMergedValue;
+exports.isValueMixed = isValueMixed;
 exports.isValuesDefined = isValuesDefined;
-exports.isValuesMixed = isValuesMixed;
 exports.normalizeSides = normalizeSides;
 var _i18n = require("@wordpress/i18n");
-var _utils = require("../unit-control/utils");
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 /**
  * WordPress dependencies
  */
@@ -141,7 +144,6 @@ const LABELS = exports.LABELS = {
   bottom: (0, _i18n.__)('Bottom side'),
   left: (0, _i18n.__)('Left side'),
   right: (0, _i18n.__)('Right side'),
-  mixed: (0, _i18n.__)('Mixed'),
   vertical: (0, _i18n.__)('Top and bottom sides'),
   horizontal: (0, _i18n.__)('Left and right sides')
 };
@@ -165,43 +167,31 @@ function mode(arr) {
 }
 /**
- * Gets the 'all' input value and unit from values data.
+ * Gets the merged input value and unit from values data.
  *
  * @param values         Box values.
- * @param selectedUnits  Box units.
  * @param availableSides Available box sides to evaluate.
  *
  * @return A value + unit for the 'all' input.
  */
-function getAllValue(values = {}, selectedUnits, availableSides = ALL_SIDES) {
+function getMergedValue(values = {}, availableSides = ALL_SIDES) {
   const sides = normalizeSides(availableSides);
-  const parsedQuantitiesAndUnits = sides.map(side => (0, _utils.parseQuantityAndUnitFromRawValue)(values[side]));
-  const allParsedQuantities = parsedQuantitiesAndUnits.map(value => {
-    var _value$;
-    return (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
-  });
-  const allParsedUnits = parsedQuantitiesAndUnits.map(value => value[1]);
-  const commonQuantity = allParsedQuantities.every(v => v === allParsedQuantities[0]) ? allParsedQuantities[0] : '';
-  /**
-   * The typeof === 'number' check is important. On reset actions, the incoming value
-   * may be null or an empty string.
-   *
-   * Also, the value may also be zero (0), which is considered a valid unit value.
-   *
-   * typeof === 'number' is more specific for these cases, rather than relying on a
-   * simple truthy check.
-   */
-  let commonUnit;
-  if (typeof commonQuantity === 'number') {
-    commonUnit = mode(allParsedUnits);
-  } else {
-    var _getAllUnitFallback;
-    // Set meaningful unit selection if no commonQuantity and user has previously
-    // selected units without assigning values while controls were unlinked.
-    commonUnit = (_getAllUnitFallback = getAllUnitFallback(selectedUnits)) !== null && _getAllUnitFallback !== void 0 ? _getAllUnitFallback : mode(allParsedUnits);
+  if (sides.every(side => values[side] === values[sides[0]])) {
+    return values[sides[0]];
   }
-  return [commonQuantity, commonUnit].join('');
+  return undefined;
+}
+/**
+ * Checks if the values are mixed.
+ *
+ * @param values         Box values.
+ * @param availableSides Available box sides to evaluate.
+ * @return Whether the values are mixed.
+ */
+function isValueMixed(values = {}, availableSides = ALL_SIDES) {
+  const sides = normalizeSides(availableSides);
+  return sides.some(side => values[side] !== values[sides[0]]);
 }
 /**
@@ -218,21 +208,6 @@ function getAllUnitFallback(selectedUnits) {
   return mode(filteredUnits);
 }
-/**
- * Checks to determine if values are mixed.
- *
- * @param values        Box values.
- * @param selectedUnits Box units.
- * @param sides         Available box sides to evaluate.
- *
- * @return Whether values are mixed.
- */
-function isValuesMixed(values = {}, selectedUnits, sides = ALL_SIDES) {
-  const allValue = getAllValue(values, selectedUnits, sides);
-  const isMixed = isNaN(parseFloat(allValue));
-  return isMixed;
-}
 /**
  * Checks to determine if values are defined.
  *
@@ -293,6 +268,8 @@ function normalizeSides(sides) {
  * Applies a value to an object representing top, right, bottom and left sides
  * while taking into account any custom side configuration.
  *
+ * @deprecated
+ *
  * @param currentValues The current values for each side.
  * @param newValue      The value to apply to the sides object.
  * @param sides         Array defining valid sides.
@@ -300,6 +277,10 @@ function normalizeSides(sides) {
  * @return Object containing the updated values for each side.
  */
 function applyValueToSides(currentValues, newValue, sides) {
+  (0, _deprecated.default)('applyValueToSides', {
+    since: '6.8',
+    version: '7.0'
+  });
   const newValues = {
     ...currentValues
   };
@@ -320,4 +301,26 @@ function applyValueToSides(currentValues, newValue, sides) {
   }
   return newValues;
 }
+/**
+ * Return the allowed sides based on the sides configuration.
+ *
+ * @param sides Sides configuration.
+ * @return Allowed sides.
+ */
+function getAllowedSides(sides) {
+  const allowedSides = new Set(!sides ? ALL_SIDES : []);
+  sides?.forEach(allowedSide => {
+    if (allowedSide === 'vertical') {
+      allowedSides.add('top');
+      allowedSides.add('bottom');
+    } else if (allowedSide === 'horizontal') {
+      allowedSides.add('right');
+      allowedSides.add('left');
+    } else {
+      allowedSides.add(allowedSide);
+    }
+  });
+  return allowedSides;
+}
 //# sourceMappingURL=utils.js.map