npm - @wordpress/components - Versions diffs - 28.11.0 → 28.13.0 - Mend

@wordpress/components 28.11.0 → 28.13.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 (560) 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' ? true : false }\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/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n Internal dependencies\n /\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\nimport type { ToggleGroupControlProps } from '../toggle-group-control/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' \| '__experimentalIsRenderedInSidebar'\n> & {\n\t/\n\t This toggles the ability to choose custom colors.\n\t /\n\tdisableCustomColors?: boolean;\n\t/\n\t This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t \n\t @default true\n\t /\n\tenableAlpha?: boolean;\n};\n\nexport type LabelProps = {\n\t/\n\t Provides control over whether the label will only be visible to\n\t * screen readers.\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t If provided, a label will be generated using this as the content.\n\t /\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/\n\t\t This controls whether unit selection should be disabled.\n\t\t /\n\t\tdisableUnits?: boolean;\n\t\t/\n\t\t This controls whether to support border style selection.\n\t\t \n\t\t @default true\n\t\t /\n\t\tenableStyle?: boolean;\n\t\t/\n\t\t This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t /\n\t\tisCompact?: boolean;\n\t\t/\n\t\t A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t /\n\t\tonChange: ( value?: Border ) => void;\n\t\t/\n\t\t Placeholder text for the number input.\n\t\t /\n\t\tplaceholder?: HTMLInputElement[ 'placeholder' ];\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t \n\t\t @default true\n\t\t /\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/\n\t\t @deprecated This prop no longer has any effect.\n\t\t * @ignore\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t\t/\n\t\t Size of the control.\n\t\t \n\t\t @default 'default'\n\t\t /\n\t\tsize?: 'default' \| '__unstable-large';\n\t\t/\n\t\t An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t /\n\t\tvalue?: Border;\n\t\t/\n\t\t Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t /\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/\n\t\t Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t /\n\t\twithSlider?: boolean;\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 DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t /\n\t\tborder?: Border;\n\t\t/\n\t\t Whether a border style can be set, based on the border sanitization settings.\n\t\t /\n\t\tisStyleSettable: boolean;\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t A callback invoked when the border color or style selections change.\n\t\t /\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/\n\t\t Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t /\n\t\tpreviousStyleSelection?: string;\n\t\t/\n\t\t @deprecated This prop no longer has any effect.\n\t\t * @ignore\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = Omit<\n\tToggleGroupControlProps,\n\t'value' \| 'onChange' \| 'children'\n> & {\n\t/\n\t A callback function invoked when a border style is selected or cleared.\n\t /\n\tonChange: ( style?: string ) => void;\n\t/\n\t The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { CSSProperties } from 'react';\n\n/\n Internal dependencies\n /\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\nimport type { ToggleGroupControlProps } from '../toggle-group-control/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' \| '__experimentalIsRenderedInSidebar'\n> & {\n\t/\n\t This toggles the ability to choose custom colors.\n\t /\n\tdisableCustomColors?: boolean;\n\t/\n\t This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t \n\t @default true\n\t /\n\tenableAlpha?: boolean;\n};\n\nexport type LabelProps = {\n\t/\n\t Provides control over whether the label will only be visible to\n\t * screen readers.\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t If provided, a label will be generated using this as the content.\n\t /\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/\n\t\t This controls whether unit selection should be disabled.\n\t\t /\n\t\tdisableUnits?: boolean;\n\t\t/\n\t\t This controls whether to support border style selection.\n\t\t \n\t\t @default true\n\t\t /\n\t\tenableStyle?: boolean;\n\t\t/\n\t\t This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t /\n\t\tisCompact?: boolean;\n\t\t/\n\t\t A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t /\n\t\tonChange: ( value?: Border ) => void;\n\t\t/\n\t\t Placeholder text for the number input.\n\t\t /\n\t\tplaceholder?: HTMLInputElement[ 'placeholder' ];\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t \n\t\t @default true\n\t\t /\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/\n\t\t @deprecated This prop no longer has any effect.\n\t\t * @ignore\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t\t/\n\t\t Size of the control.\n\t\t \n\t\t @default 'default'\n\t\t /\n\t\tsize?: 'default' \| '__unstable-large';\n\t\t/\n\t\t An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t /\n\t\tvalue?: Border;\n\t\t/\n\t\t Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t /\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/\n\t\t Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t /\n\t\twithSlider?: boolean;\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 Do not throw a warning for the deprecated 36px default size.\n\t\t * For internal components of other components that already throw the warning.\n\t\t \n\t\t @ignore\n\t\t /\n\t\t__shouldNotWarnDeprecated36pxSize?: boolean;\n\t};\n\nexport type DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' \| 'size' > & {\n\t\t/\n\t\t An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t /\n\t\tborder?: Border;\n\t\t/\n\t\t Whether a border style can be set, based on the border sanitization settings.\n\t\t /\n\t\tisStyleSettable: boolean;\n\t\t/\n\t\t An internal prop used to control the visibility of the dropdown.\n\t\t /\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/\n\t\t A callback invoked when the border color or style selections change.\n\t\t /\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/\n\t\t Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t /\n\t\tpreviousStyleSelection?: string;\n\t\t/\n\t\t @deprecated This prop no longer has any effect.\n\t\t * @ignore\n\t\t /\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = Omit<\n\tToggleGroupControlProps,\n\t'value' \| 'onChange' \| 'children'\n> & {\n\t/\n\t A callback function invoked when a border style is selected or cleared.\n\t /\n\tonChange: ( style?: string ) => void;\n\t/\n\t The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":"","ignoreList":[]}

package/build/box-control/all-input-control.js CHANGED Viewed

@@ -74,6 +74,7 @@ function AllInputControl({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
       __nextHasNoMarginBottom: true,
       __next40pxDefaultSize: __next40pxDefaultSize,
+      __shouldNotWarnDeprecated36pxSize: true,
       "aria-controls": inputId,
       label: _utils.LABELS.all,
       hideLabelFromVision: true,

package/build/box-control/all-input-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_boxControlStyles","_unitControl","_utils","_jsxRuntime","noop","AllInputControl","__next40pxDefaultSize","onChange","onFocus","values","sides","selectedUnits","setSelectedUnits","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","inputId","useInstanceId","allValue","getAllValue","hasValues","isValuesDefined","isMixed","isValuesMixed","allPlaceholder","LABELS","mixed","undefined","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","handleOnFocus","event","side","onValueChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","applyValueToSides","sliderOnChange","join","handleOnUnitChange","unit","newUnits","jsxs","Fragment","children","jsx","StyledUnitControl","className","disableUnits","id","isPressEnterToChange","value","onUnitChange","placeholder","label","all","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n/\n Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport {\n\tFlexedRangeControl,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n\tCUSTOM_VALUE_SETTINGS,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst inputId = useInstanceId( AllInputControl, 'box-control-input-all' );\n\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( allValue );\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst onValueChange = ( next?: string ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst sliderOnChange = ( next?: number ) => {\n\t\tonValueChange(\n\t\t\tnext !== undefined ? [ next, parsedUnit ].join( '' ) : undefined\n\t\t);\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<StyledUnitControl\n\t\t\t\t{ ...props }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\tdisableUnits={ isMixed }\n\t\t\t\tid={ inputId }\n\t\t\t\tisPressEnterToChange\n\t\t\t\tvalue={ allValue }\n\t\t\t\tonChange={ onValueChange }\n\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\tplaceholder={ allPlaceholder }\n\t\t\t\tlabel={ LABELS.all }\n\t\t\t\thideLabelFromVision\n\t\t\t/>\n\n\t\t\t<FlexedRangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\taria-controls={ inputId }\n\t\t\t\tlabel={ LABELS.all }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ sliderOnChange }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }\n\t\t\t\tstep={\n\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ parsedUnit ?? '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</>\n\t);\n}\n"],"mappings":"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~~iBAAgBU~~,OAAS;MACzB2C,KAAK,EAAGlC,aAAM,CAACmC,GAAK;MACpBC,mBAAmB;MACnBtD,QAAQ,EAAGmC,cAAgB;~~MAC3BsB~~,GAAG,EAAG,CAAG;MACTC,GAAG,~~GAAAnD~~,qBAAA,~~GAAGoD~~,4BAAqB,~~CAAErC~~,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,IAAI,CAAE,~~EAAEoC~~,GAAG,~~cAAAnD~~,qBAAA,cAAAA,qBAAA,GAAI,EAAI;~~MAC9DqD~~,IAAI,~~GAAApD~~,sBAAA,~~GACHmD~~,4BAAqB,~~CAAErC~~,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,IAAI,CAAE,~~EAAEsC~~,IAAI,~~cAAApD~~,sBAAA,cAAAA,sBAAA,GAAI,GACrD;MACDyC,KAAK,EAAG5B,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,CAAG;~~MAC7BwC~~,cAAc,EAAG;IAAO,CACxB,CAAC;EAAA,CACD,CAAC;AAEL","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_boxControlStyles","_unitControl","_utils","_jsxRuntime","noop","AllInputControl","__next40pxDefaultSize","onChange","onFocus","values","sides","selectedUnits","setSelectedUnits","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","inputId","useInstanceId","allValue","getAllValue","hasValues","isValuesDefined","isMixed","isValuesMixed","allPlaceholder","LABELS","mixed","undefined","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","handleOnFocus","event","side","onValueChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","applyValueToSides","sliderOnChange","join","handleOnUnitChange","unit","newUnits","jsxs","Fragment","children","jsx","StyledUnitControl","className","disableUnits","id","isPressEnterToChange","value","onUnitChange","placeholder","label","all","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n/\n Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport {\n\tFlexedRangeControl,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n\tCUSTOM_VALUE_SETTINGS,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst inputId = useInstanceId( AllInputControl, 'box-control-input-all' );\n\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( allValue );\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst onValueChange = ( next?: string ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst sliderOnChange = ( next?: number ) => {\n\t\tonValueChange(\n\t\t\tnext !== undefined ? [ next, parsedUnit ].join( '' ) : undefined\n\t\t);\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<StyledUnitControl\n\t\t\t\t{ ...props }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\tdisableUnits={ isMixed }\n\t\t\t\tid={ inputId }\n\t\t\t\tisPressEnterToChange\n\t\t\t\tvalue={ allValue }\n\t\t\t\tonChange={ onValueChange }\n\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\tplaceholder={ allPlaceholder }\n\t\t\t\tlabel={ LABELS.all }\n\t\t\t\thideLabelFromVision\n\t\t\t/>\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.all }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ sliderOnChange }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }\n\t\t\t\tstep={\n\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ parsedUnit ?? '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</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/box-control/axial-input-controls.js CHANGED Viewed

@@ -106,6 +106,7 @@ function AxialInputControls({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
           __nextHasNoMarginBottom: true,
           __next40pxDefaultSize: __next40pxDefaultSize,
+          __shouldNotWarnDeprecated36pxSize: true,
           "aria-controls": inputId,
           label: _utils2.LABELS[side],
           hideLabelFromVision: true,

package/build/box-control/axial-input-controls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_utils","_tooltip","_interopRequireDefault","_utils2","_boxControlStyles","_jsxRuntime","_react","groupedSides","AxialInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnValueChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","top","bottom","left","right","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","jsx","Fragment","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","inputId","join","jsxs","InputWrapper","FlexedBoxControlIcon","default","placement","text","LABELS","createElement","StyledUnitControl","className","id","isPressEnterToChange","value","newValue","onUnitChange","label","hideLabelFromVision","key","FlexedRangeControl","__nextHasNoMarginBottom","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n/\n Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport Tooltip from '../tooltip';\nimport { CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\t__next40pxDefaultSize,\n\tonChange,\n\tonFocus,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId(\n\t\tAxialInputControls,\n\t\t`box-control-input`\n\t);\n\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnValueChange = ( side: GroupedSide, next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ side }>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange( side, newValue )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t\tnewValue,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t\t\t ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAKqC,IAAAM,WAAA,GAAAN,OAAA;AAAA,IAAAO,MAAA,GAAAP,OAAA;AAfrC;AACA;AACA;;AAEA;AACA;AACA;;AAYA,MAAMQ,YAAY,GAAG,CAAE,UAAU,EAAE,YAAY,CAAW;AAG3C,SAASC,kBAAkBA,CAAE;EAC3CC,qBAAqB;EACrBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,aAAa;EACbC,gBAAgB;EAChBC,KAAK;EACL,GAAGC;AACyB,CAAC,EAAG;EAChC,MAAMC,WAAW,GAAG,IAAAC,sBAAa,EAChCV,kBAAkB,EAClB,mBACD,CAAC;EAED,MAAMW,mBAAmB,GACtBC,IAAiB,IACjBC,KAA2C,IAAM;IAClD,IAAK,CAAEV,OAAO,EAAG;MAChB;IACD;IACAA,OAAO,CAAEU,KAAK,EAAE;MAAED;IAAK,CAAE,CAAC;EAC3B,CAAC;EAEF,MAAME,mBAAmB,GAAGA,CAAEF,IAAiB,EAAEG,IAAa,KAAM;IACnE,IAAK,CAAEb,QAAQ,EAAG;MACjB;IACD;IACA,MAAMc,UAAU,GAAG;MAAE,GAAGZ;IAAO,CAAC;IAChC,MAAMa,SAAS,GAAGF,IAAI,KAAKG,SAAS,IAAI,CAAEC,KAAK,CAAEC,UAAU,CAAEL,IAAK,CAAE,CAAC;IACrE,MAAMM,SAAS,GAAGJ,SAAS,GAAGF,IAAI,GAAGG,SAAS;IAE9C,IAAKN,IAAI,KAAK,UAAU,EAAG;MAC1BI,UAAU,CAACM,GAAG,GAAGD,SAAS;MAC1BL,UAAU,CAACO,MAAM,GAAGF,SAAS;IAC9B;IAEA,IAAKT,IAAI,KAAK,YAAY,EAAG;MAC5BI,UAAU,CAACQ,IAAI,GAAGH,SAAS;MAC3BL,UAAU,CAACS,KAAK,GAAGJ,SAAS;IAC7B;IAEAnB,QAAQ,CAAEc,UAAW,CAAC;EACvB,CAAC;EAED,MAAMU,wBAAwB,GAC3Bd,IAAiB,IAAQG,IAAa,IAAM;IAC7C,MAAMY,QAAQ,GAAG;MAAE,GAAGtB;IAAc,CAAC;IAErC,IAAKO,IAAI,KAAK,UAAU,EAAG;MAC1Be,QAAQ,CAACL,GAAG,GAAGP,IAAI;MACnBY,QAAQ,CAACJ,MAAM,GAAGR,IAAI;IACvB;IAEA,IAAKH,IAAI,KAAK,YAAY,EAAG;MAC5Be,QAAQ,CAACH,IAAI,GAAGT,IAAI;MACpBY,QAAQ,CAACF,KAAK,GAAGV,IAAI;IACtB;IAEAT,gBAAgB,CAAEqB,QAAS,CAAC;EAC7B,CAAC;;EAEF;EACA,MAAMC,aAAa,GAAGrB,KAAK,EAAEsB,MAAM,GAChC9B,YAAY,CAAC+B,MAAM,CAAIlB,IAAI,IAAML,KAAK,CAACwB,QAAQ,CAAEnB,IAAK,CAAE,CAAC,GACzDb,YAAY;EAEf,oBACC,IAAAF,WAAA,CAAAmC,GAAA,EAAAnC,WAAA,CAAAoC,QAAA;IAAAC,QAAA,EACGN,aAAa,CAACO,GAAG,CAAIvB,IAAI,IAAM;MAAA,IAAAwB,qBAAA,EAAAC,sBAAA;MAChC,MAAM,CAAEC,cAAc,EAAEC,UAAU,CAAE,GACnC,IAAAC,uCAAgC,EAC/B5B,IAAI,KAAK,UAAU,GAAGR,MAAM,CAACkB,GAAG,GAAGlB,MAAM,CAACoB,IAC3C,CAAC;MACF,MAAMiB,YAAY,GACjB7B,IAAI,KAAK,UAAU,GAChBP,aAAa,CAACiB,GAAG,GACjBjB,aAAa,CAACmB,IAAI;MAEtB,MAAMkB,OAAO,GAAG,CAAEjC,WAAW,EAAEG,IAAI,CAAE,CAAC+B,IAAI,CAAE,GAAI,CAAC;MAEjD,oBACC,IAAA9C,WAAA,CAAA+C,IAAA,EAAChD,iBAAA,CAAAiD,YAAY;QAAAX,QAAA,gBACZ,IAAArC,WAAA,CAAAmC,GAAA,EAACpC,iBAAA,CAAAkD,oBAAoB;UAAClC,IAAI,EAAGA,IAAM;UAACL,KAAK,EAAGA;QAAO,CAAE,CAAC,eACtD,IAAAV,WAAA,CAAAmC,GAAA,EAACvC,QAAA,CAAAsD,OAAO;UAACC,SAAS,EAAC,SAAS;UAACC,IAAI,EAAGC,cAAM,CAAEtC,IAAI,CAAI;UAAAsB,QAAA,eACnD,IAAApC,MAAA,CAAAqD,aAAA,EAACvD,iBAAA,CAAAwD,iBAAiB;YAAA,GACZ5C,KAAK;YACVP,qBAAqB,EAAGA,qBAAuB;YAC/CoD,SAAS,EAAC,qCAAqC;YAC/CC,EAAE,EAAGZ,OAAS;YACda,oBAAoB;YACpBC,KAAK,EAAG,CACPlB,cAAc,EACdG,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAIF,UAAU,CAC1B,CAACI,IAAI,CAAE,EAAG,CAAG;YACdzC,QAAQ,EAAKuD,QAAQ,IACpB3C,mBAAmB,CAAEF,IAAI,EAAE6C,QAAS,CACpC;YACDC,YAAY,EAAGhC,wBAAwB,CACtCd,IACD,CAAG;YACHT,OAAO,EAAGQ,mBAAmB,CAAEC,IAAK,CAAG;YACvC+C,KAAK,EAAGT,cAAM,CAAEtC,IAAI,CAAI;YACxBgD,mBAAmB;YACnBC,GAAG,EAAGjD;UAAM,CACZ;QAAC,CACM,CAAC,eACV,IAAAf,WAAA,CAAAmC,GAAA,EAACpC,iBAAA,CAAAkE,kBAAkB;UAClBC,uBAAuB;UACvB9D,qBAAqB,EAAGA,qBAAuB;UAC/C,~~iBAAgByC~~,OAAS;UACzBiB,KAAK,EAAGT,cAAM,CAAEtC,IAAI,CAAI;UACxBgD,mBAAmB;UACnB1D,QAAQ,EAAKuD,QAAQ,IACpB3C,mBAAmB,CAClBF,IAAI,EACJ6C,QAAQ,KAAKvC,SAAS,GACnB,CACAuC,QAAQ,EACRhB,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAIF,UAAU,CACzB,CAACI,IAAI,CAAE,EAAG,CAAC,GACZzB,SACJ,CACA;~~UACD8C~~,GAAG,EAAG,CAAG;UACTC,GAAG,~~GAAA7B~~,qBAAA,~~GACF8B~~,6BAAqB,~~CAAEzB~~,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,IAAI,CAAE,~~EAC1CwB~~,GAAG,~~cAAA7B~~,qBAAA,cAAAA,qBAAA,GAAI,EACV;~~UACD+B~~,IAAI,~~GAAA9B~~,sBAAA,~~GACH6B~~,6BAAqB,~~CAAEzB~~,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,IAAI,CAAE,~~EAC1C0B~~,IAAI,~~cAAA9B~~,sBAAA,cAAAA,sBAAA,GAAI,GACX;UACDmB,KAAK,EAAGlB,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,CAAG;~~UAC7B8B~~,cAAc,EAAG;QAAO,CACxB,CAAC;MAAA,~~GArDiBxD~~,~~IAsDN~~,CAAC;IAEjB,CAAE;EAAC,CACF,CAAC;AAEL","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_utils","_tooltip","_interopRequireDefault","_utils2","_boxControlStyles","_jsxRuntime","_react","groupedSides","AxialInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnValueChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","top","bottom","left","right","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","jsx","Fragment","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","inputId","join","jsxs","InputWrapper","FlexedBoxControlIcon","default","placement","text","LABELS","createElement","StyledUnitControl","className","id","isPressEnterToChange","value","newValue","onUnitChange","label","hideLabelFromVision","key","FlexedRangeControl","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n/\n Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport Tooltip from '../tooltip';\nimport { CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\t__next40pxDefaultSize,\n\tonChange,\n\tonFocus,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId(\n\t\tAxialInputControls,\n\t\t`box-control-input`\n\t);\n\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnValueChange = ( side: GroupedSide, next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ side }>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange( side, newValue )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t\tnewValue,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t\t\t ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -47,23 +47,23 @@ function useUniqueId(idProp) {
  * used as an input control for values like `padding` or `margin`.
  *
  * ```jsx
+ * import { useState } from 'react';
  * import { BoxControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
  *
  * function Example() {
- * 	const [ values, setValues ] = useState( {
- * 		top: '50px',
- * 		left: '10%',
- * 		right: '10%',
- * 		bottom: '50px',
- * 	} );
+ *   const [ values, setValues ] = useState( {
+ *     top: '50px',
+ *     left: '10%',
+ *     right: '10%',
+ *     bottom: '50px',
+ *   } );
  *
- * 	return (
- * 		<BoxControl
- * 			values={ values }
- * 			onChange={ ( nextValues ) => setValues( nextValues ) }
- * 		/>
- * 	);
+ *   return (
+ *     <BoxControl
+ *       values={ values }
+ *       onChange={ setValues }
+ *     />
+ *   );
  * };
  * ```
  */

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","_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","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","FlexedBoxControlIcon","default","LinkedButtonWrapper","onClick","ResetButton","className","variant","size","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';\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 { BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n function Example() {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n \n \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\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\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\tonMouseOver,\n\t\tonMouseOut,\n\t\t__next40pxDefaultSize,\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":";;;;;;;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,cAAA,GAAAD,sBAAA,CAAAL,OAAA;AACA,IAAAO,mBAAA,GAAAF,sBAAA,CAAAL,OAAA;AACA,IAAAQ,aAAA,GAAAH,sBAAA,CAAAL,OAAA;AACA,IAAAS,KAAA,GAAAT,OAAA;AACA,IAAAU,iBAAA,GAAAV,OAAA;AAMA,IAAAW,MAAA,GAAAX,OAAA;AACA,IAAAY,OAAA,GAAAZ,OAAA;AAMA,IAAAa,MAAA,GAAAb,OAAA;AAAoD,IAAAc,WAAA,GAAAd,OAAA;AA7BpD;AACA;AACA;;AAKA;AACA;AACA;;AA2BA,MAAMe,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,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,qBAAa,EAAEV,WAAY,CAAC,IAAIG,UACxD,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;IACzB,GAAG9C,UAAU;IACbC,QAAQ,EAAE0C,cAAc;IACxBI,OAAO,EAAEP,aAAa;IACtBf,QAAQ;IACRnB,KAAK;IACLyB,aAAa;IACbC,gBAAgB;IAChBzB,KAAK;IACLH,MAAM,EAAEa,WAAW;IACnBL,WAAW;IACXC,UAAU;IACVf;EACD,CAAC;EAED,oBACC,IAAAT,WAAA,CAAA2D,IAAA,EAAChE,KAAA,CAAAiE,IAAI;IACJlD,EAAE,EAAGA,EAAI;IACTmD,OAAO,EAAG,CAAG;IACbC,eAAe,EAAC,6BAA6B;IAC7CC,IAAI,EAAC,OAAO;IACZ,mBAAkBd,SAAW;IAAAe,QAAA,gBAE7B,IAAAhE,WAAA,CAAAiE,GAAA,EAAC5E,YAAA,CAAA6E,WAAW,CAACC,WAAW;MAACzD,EAAE,EAAGuC,SAAW;MAAAe,QAAA,EACtCnD;IAAK,CACiB,CAAC,EACxBuB,QAAQ,iBACT,IAAApC,WAAA,CAAA2D,IAAA,EAAC/D,iBAAA,CAAAwE,YAAY;MAAAJ,QAAA,gBACZ,IAAAhE,WAAA,CAAAiE,GAAA,EAACrE,iBAAA,CAAAyE,oBAAoB;QAAC9B,IAAI,EAAGA,IAAM;QAACrB,KAAK,EAAGA;MAAO,CAAE,CAAC,eACtD,IAAAlB,WAAA,CAAAiE,GAAA,EAAC3E,gBAAA,CAAAgF,OAAe;QAAA,GAAMb;MAAiB,CAAI,CAAC;IAAA,CAC/B,CACd,EACC,CAAE1B,UAAU,iBACb,IAAA/B,WAAA,CAAAiE,GAAA,EAACrE,iBAAA,CAAA2E,mBAAmB;MAAAP,QAAA,eACnB,IAAAhE,WAAA,CAAAiE,GAAA,EAACvE,aAAA,CAAA4E,OAAY;QACZE,OAAO,EAAGtB,YAAc;QACxBd,QAAQ,EAAGA;MAAU,CACrB;IAAC,CACkB,CACrB,EAEC,CAAEA,QAAQ,IAAIjB,WAAW,iBAC1B,IAAAnB,WAAA,CAAAiE,GAAA,EAACxE,mBAAA,CAAA6E,OAAkB;MAAA,GAAMb;IAAiB,CAAI,CAC9C,EACC,CAAErB,QAAQ,IAAI,CAAEjB,WAAW,iBAC5B,IAAAnB,WAAA,CAAAiE,GAAA,EAACzE,cAAA,CAAA8E,OAAa;MAAA,GAAMb;IAAiB,CAAI,CACzC,EACCrC,UAAU,iBACX,IAAApB,WAAA,CAAAiE,GAAA,EAACrE,iBAAA,CAAA6E,WAAW;MACXC,SAAS,EAAC,qCAAqC;MAC/CC,OAAO,EAAC,WAAW;MACnBC,IAAI,EAAC,OAAO;MACZJ,OAAO,EAAGhB,aAAe;MACzBqB,QAAQ,EAAG,CAAE5C,OAAS;MAAA+B,QAAA,EAEpB,IAAAlD,QAAE,EAAE,OAAQ;IAAC,CACH,CACb;EAAA,CACI,CAAC;AAET;AAAC,IAAAgE,QAAA,GAAAC,OAAA,CAAAT,OAAA,GAGc9D,UAAU","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_allInputControl","_interopRequireDefault","_inputControls","_axialInputControls","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","_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","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","FlexedBoxControlIcon","default","LinkedButtonWrapper","onClick","ResetButton","className","variant","size","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';\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 * 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\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\tonMouseOver,\n\t\tonMouseOut,\n\t\t__next40pxDefaultSize,\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":[]}

package/build/box-control/input-controls.js CHANGED Viewed

@@ -112,6 +112,7 @@ function BoxInputControls({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
           __nextHasNoMarginBottom: true,
           __next40pxDefaultSize: __next40pxDefaultSize,
+          __shouldNotWarnDeprecated36pxSize: true,
           "aria-controls": inputId,
           label: _utils2.LABELS[side],
           hideLabelFromVision: true,

package/build/box-control/input-controls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_tooltip","_interopRequireDefault","_utils","_utils2","_boxControlStyles","_jsxRuntime","noop","BoxInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","ALL_SIDES","filter","includes","jsx","Fragment","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","inputId","join","jsxs","InputWrapper","expanded","FlexedBoxControlIcon","default","placement","text","LABELS","StyledUnitControl","className","id","isPressEnterToChange","value","onUnitChange","label","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","newValue","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n/\n Internal dependencies\n /\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } 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\nexport default function BoxInputControls( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId( BoxInputControls, 'box-control-input' );\n\n\tconst createHandleOnFocus =\n\t\t( side: keyof BoxControlValue ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\n\t\tside: keyof BoxControlValue,\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\n\t\tnextValues[ side ] = nextValue;\n\n\t\t/\n\t\t Supports changing pair sides. For example, holding the ALT key\n\t\t * when changing the TOP will also update BOTTOM.\n\t\t */\n\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t// it also works with drag events?\n\t\tif ( extra?.event.altKey ) {\n\t\t\tswitch ( side ) {\n\t\t\t\tcase 'top':\n\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'bottom':\n\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'left':\n\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'right':\n\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: keyof BoxControlValue ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\t\t\tnewUnits[ side ] = next;\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( nextValue, extra ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\t\tnextValue,\n\t\t\t\t\t\t\t\t\t\textra\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_compose","require","_tooltip","_interopRequireDefault","_utils","_utils2","_boxControlStyles","_jsxRuntime","noop","BoxInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","ALL_SIDES","filter","includes","jsx","Fragment","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","inputId","join","jsxs","InputWrapper","expanded","FlexedBoxControlIcon","default","placement","text","LABELS","StyledUnitControl","className","id","isPressEnterToChange","value","onUnitChange","label","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","__shouldNotWarnDeprecated36pxSize","newValue","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\n/\n Internal dependencies\n /\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } 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\nexport default function BoxInputControls( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId( BoxInputControls, 'box-control-input' );\n\n\tconst createHandleOnFocus =\n\t\t( side: keyof BoxControlValue ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\n\t\tside: keyof BoxControlValue,\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\n\t\tnextValues[ side ] = nextValue;\n\n\t\t/\n\t\t Supports changing pair sides. For example, holding the ALT key\n\t\t * when changing the TOP will also update BOTTOM.\n\t\t */\n\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t// it also works with drag events?\n\t\tif ( extra?.event.altKey ) {\n\t\t\tswitch ( side ) {\n\t\t\t\tcase 'top':\n\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'bottom':\n\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'left':\n\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'right':\n\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: keyof BoxControlValue ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\t\t\tnewUnits[ side ] = next;\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( nextValue, extra ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\t\tnextValue,\n\t\t\t\t\t\t\t\t\t\textra\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAKqC,IAAAM,WAAA,GAAAN,OAAA;AAfrC;AACA;AACA;;AAEA;AACA;AACA;;AAYA,MAAMO,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,gBAAgBA,CAAE;EACzCC,qBAAqB;EACrBC,QAAQ,GAAGH,IAAI;EACfI,OAAO,GAAGJ,IAAI;EACdK,MAAM;EACNC,aAAa;EACbC,gBAAgB;EAChBC,KAAK;EACL,GAAGC;AACyB,CAAC,EAAG;EAChC,MAAMC,WAAW,GAAG,IAAAC,sBAAa,EAAEV,gBAAgB,EAAE,mBAAoB,CAAC;EAE1E,MAAMW,mBAAmB,GACtBC,IAA2B,IAC3BC,KAA2C,IAAM;IAClDV,OAAO,CAAEU,KAAK,EAAE;MAAED;IAAK,CAAE,CAAC;EAC3B,CAAC;EAEF,MAAME,cAAc,GAAKC,UAA2B,IAAM;IACzDb,QAAQ,CAAEa,UAAW,CAAC;EACvB,CAAC;EAED,MAAMC,mBAAmB,GAAGA,CAC3BJ,IAA2B,EAC3BK,IAAa,EACbC,KAAyD,KACrD;IACJ,MAAMH,UAAU,GAAG;MAAE,GAAGX;IAAO,CAAC;IAChC,MAAMe,SAAS,GAAGF,IAAI,KAAKG,SAAS,IAAI,CAAEC,KAAK,CAAEC,UAAU,CAAEL,IAAK,CAAE,CAAC;IACrE,MAAMM,SAAS,GAAGJ,SAAS,GAAGF,IAAI,GAAGG,SAAS;IAE9CL,UAAU,CAAEH,IAAI,CAAE,GAAGW,SAAS;;IAE9B;AACF;AACA;AACA;IACE;IACA;IACA;IACA,IAAKL,KAAK,EAAEL,KAAK,CAACW,MAAM,EAAG;MAC1B,QAASZ,IAAI;QACZ,KAAK,KAAK;UACTG,UAAU,CAACU,MAAM,GAAGF,SAAS;UAC7B;QACD,KAAK,QAAQ;UACZR,UAAU,CAACW,GAAG,GAAGH,SAAS;UAC1B;QACD,KAAK,MAAM;UACVR,UAAU,CAACY,KAAK,GAAGJ,SAAS;UAC5B;QACD,KAAK,OAAO;UACXR,UAAU,CAACa,IAAI,GAAGL,SAAS;UAC3B;MACF;IACD;IAEAT,cAAc,CAAEC,UAAW,CAAC;EAC7B,CAAC;EAED,MAAMc,wBAAwB,GAC3BjB,IAA2B,IAAQK,IAAa,IAAM;IACvD,MAAMa,QAAQ,GAAG;MAAE,GAAGzB;IAAc,CAAC;IACrCyB,QAAQ,CAAElB,IAAI,CAAE,GAAGK,IAAI;IACvBX,gBAAgB,CAAEwB,QAAS,CAAC;EAC7B,CAAC;;EAEF;EACA,MAAMC,aAAa,GAAGxB,KAAK,EAAEyB,MAAM,GAChCC,iBAAS,CAACC,MAAM,CAAItB,IAAI,IAAML,KAAK,CAAC4B,QAAQ,CAAEvB,IAAK,CAAE,CAAC,GACtDqB,iBAAS;EAEZ,oBACC,IAAAnC,WAAA,CAAAsC,GAAA,EAAAtC,WAAA,CAAAuC,QAAA;IAAAC,QAAA,EACGP,aAAa,CAACQ,GAAG,CAAI3B,IAAI,IAAM;MAAA,IAAA4B,qBAAA,EAAAC,sBAAA;MAChC,MAAM,CAAEC,cAAc,EAAEC,UAAU,CAAE,GACnC,IAAAC,uCAAgC,EAAExC,MAAM,CAAEQ,IAAI,CAAG,CAAC;MAEnD,MAAMiC,YAAY,GAAGzC,MAAM,CAAEQ,IAAI,CAAE,GAChC+B,UAAU,GACVtC,aAAa,CAAEO,IAAI,CAAE;MAExB,MAAMkC,OAAO,GAAG,CAAErC,WAAW,EAAEG,IAAI,CAAE,CAACmC,IAAI,CAAE,GAAI,CAAC;MAEjD,oBACC,IAAAjD,WAAA,CAAAkD,IAAA,EAACnD,iBAAA,CAAAoD,YAAY;QAAiCC,QAAQ;QAAAZ,QAAA,gBACrD,IAAAxC,WAAA,CAAAsC,GAAA,EAACvC,iBAAA,CAAAsD,oBAAoB;UAACvC,IAAI,EAAGA,IAAM;UAACL,KAAK,EAAGA;QAAO,CAAE,CAAC,eACtD,IAAAT,WAAA,CAAAsC,GAAA,EAAC3C,QAAA,CAAA2D,OAAO;UAACC,SAAS,EAAC,SAAS;UAACC,IAAI,EAAGC,cAAM,CAAE3C,IAAI,CAAI;UAAA0B,QAAA,eACnD,IAAAxC,WAAA,CAAAsC,GAAA,EAACvC,iBAAA,CAAA2D,iBAAiB;YAAA,GACZhD,KAAK;YACVP,qBAAqB,EAAGA,qBAAuB;YAC/CwD,SAAS,EAAC,qCAAqC;YAC/CC,EAAE,EAAGZ,OAAS;YACda,oBAAoB;YACpBC,KAAK,EAAG,CAAElB,cAAc,EAAEG,YAAY,CAAE,CAACE,IAAI,CAC5C,EACD,CAAG;YACH7C,QAAQ,EAAGA,CAAEqB,SAAS,EAAEL,KAAK,KAC5BF,mBAAmB,CAClBJ,IAAI,EACJW,SAAS,EACTL,KACD,CACA;YACD2C,YAAY,EAAGhC,wBAAwB,CACtCjB,IACD,CAAG;YACHT,OAAO,EAAGQ,mBAAmB,CAAEC,IAAK,CAAG;YACvCkD,KAAK,EAAGP,cAAM,CAAE3C,IAAI,CAAI;YACxBmD,mBAAmB;UAAA,CACnB;QAAC,CACM,CAAC,eAEV,IAAAjE,WAAA,CAAAsC,GAAA,EAACvC,iBAAA,CAAAmE,kBAAkB;UAClBC,uBAAuB;UACvBhE,qBAAqB,EAAGA,qBAAuB;UAC/CiE,iCAAiC;UACjC,iBAAgBpB,OAAS;UACzBgB,KAAK,EAAGP,cAAM,CAAE3C,IAAI,CAAI;UACxBmD,mBAAmB;UACnB7D,QAAQ,EAAKiE,QAAQ,IAAM;YAC1BnD,mBAAmB,CAClBJ,IAAI,EACJuD,QAAQ,KAAK/C,SAAS,GACnB,CAAE+C,QAAQ,EAAEtB,YAAY,CAAE,CAACE,IAAI,CAAE,EAAG,CAAC,GACrC3B,SACJ,CAAC;UACF,CAAG;UACHgD,GAAG,EAAG,CAAG;UACTC,GAAG,GAAA7B,qBAAA,GACF8B,6BAAqB,CAAEzB,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,IAAI,CAAE,EAC1CwB,GAAG,cAAA7B,qBAAA,cAAAA,qBAAA,GAAI,EACV;UACD+B,IAAI,GAAA9B,sBAAA,GACH6B,6BAAqB,CAAEzB,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,IAAI,CAAE,EAC1C0B,IAAI,cAAA9B,sBAAA,cAAAA,sBAAA,GAAI,GACX;UACDmB,KAAK,EAAGlB,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,CAAG;UAC7B8B,cAAc,EAAG;QAAO,CACxB,CAAC;MAAA,GAtDiB,eAAgB5D,IAAI,EAuD1B,CAAC;IAEjB,CAAE;EAAC,CACF,CAAC;AAEL","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' \| 'onMouseOver' \| 'onMouseOut' \| 'units'\n>;\n\nexport type BoxControlProps = Pick<\n\tUnitControlProps,\n\t'onMouseOver' \| 'onMouseOut' \| 'units'\n> & {\n\t/\n\t If this property is true, a button to reset the box control is rendered.\n\t \n\t @default true\n\t /\n\tallowReset?: boolean;\n\t/\n\t The id to use as a base for the unique HTML id attribute of the control.\n\t /\n\tid?: string;\n\t/\n\t Props for the internal `UnitControl` components.\n\t \n\t @default { min: 0 }\n\t /\n\tinputProps?: UnitControlPassthroughProps;\n\t/\n\t Heading label for the control.\n\t \n\t @default __( 'Box Control' )\n\t /\n\tlabel?: string;\n\t/\n\t A callback function when an input value changes.\n\t /\n\tonChange: ( next: BoxControlValue ) => void;\n\t/\n\t The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t \n\t @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t /\n\tresetValues?: 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?: readonly ( keyof BoxControlValue \| 'horizontal' \| 'vertical' )[];\n\t/\n\t If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t * can be used instead of updating individual sides.\n\t \n\t @default false\n\t /\n\tsplitOnAxis?: boolean;\n\t/\n\t The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t /\n\tvalues?: BoxControlValue;\n\t/\n\t Start opting into the larger default height that will become the default size in a future version.\n\t \n\t @default false\n\t /\n\t__next40pxDefaultSize?: boolean;\n};\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' \| 'onMouseOver' \| 'onMouseOut' \| 'units'\n>;\n\nexport type BoxControlProps = Pick<\n\tUnitControlProps,\n\t'onMouseOver' \| 'onMouseOut' \| 'units'\n> & {\n\t/\n\t If this property is true, a button to reset the box control is rendered.\n\t \n\t @default true\n\t /\n\tallowReset?: boolean;\n\t/\n\t The id to use as a base for the unique HTML id attribute of the control.\n\t /\n\tid?: string;\n\t/\n\t Props for the internal `UnitControl` components.\n\t \n\t @default { min: 0 }\n\t /\n\tinputProps?: UnitControlPassthroughProps;\n\t/\n\t Heading label for the control.\n\t \n\t @default __( 'Box Control' )\n\t /\n\tlabel?: string;\n\t/\n\t A callback function when an input value changes.\n\t /\n\tonChange: ( next: BoxControlValue ) => void;\n\t/\n\t The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t \n\t @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t /\n\tresetValues?: BoxControlValue;\n\t/\n\t Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t \n\t Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t /\n\tsides?: readonly ( keyof BoxControlValue \| 'horizontal' \| 'vertical' )[];\n\t/\n\t If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t * can be used instead of updating individual sides.\n\t \n\t @default false\n\t /\n\tsplitOnAxis?: boolean;\n\t/\n\t The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t /\n\tvalues?: BoxControlValue;\n\t/\n\t Start opting into the larger default height that will become the default size in a future version.\n\t \n\t @default false\n\t /\n\t__next40pxDefaultSize?: boolean;\n};\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":[]}

package/build/circular-option-picker/circular-option-picker-actions.js CHANGED Viewed

@@ -46,6 +46,7 @@ function ButtonAction({
   ...additionalProps
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+    __next40pxDefaultSize: true,
     className: (0, _clsx.default)('components-circular-option-picker__clear', className),
     variant: "tertiary",
     ...additionalProps,

package/build/circular-option-picker/circular-option-picker-actions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_button","_dropdown","_jsxRuntime","DropdownLinkAction","buttonProps","className","dropdownProps","linkText","jsx","default","clsx","renderToggle","isOpen","onToggle","onClick","variant","children","ButtonAction","additionalProps"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-actions.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport type { DropdownLinkActionProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAmC,IAAAG,WAAA,GAAAH,OAAA;AATnC;AACA;AACA;;AAGA;AACA;AACA;;AAOO,SAASI,kBAAkBA,CAAE;EACnCC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC;AACwB,CAAC,EAAG;EAC5B,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACP,SAAA,CAAAQ,OAAQ;IACRJ,SAAS,EAAG,IAAAK,aAAI,EACf,yDAAyD,EACzDL,SACD,CAAG;IACHM,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,kBACpC,IAAAX,WAAA,CAAAM,GAAA,EAACR,OAAA,CAAAS,OAAM;MACN,iBAAgBG,MAAQ;MACxB,iBAAc,MAAM;MACpBE,OAAO,EAAGD,QAAU;MACpBE,OAAO,EAAC,MAAM;MAAA,GACTX,WAAW;MAAAY,QAAA,EAEdT;IAAQ,CACH,CACN;IAAA,GACED;EAAa,CAClB,CAAC;AAEJ;AAEO,SAASW,YAAYA,CAAE;EAC7BZ,SAAS;EACTW,QAAQ;EACR,GAAGE;AAC6D,CAAC,EAAG;EACpE,oBACC,IAAAhB,WAAA,CAAAM,GAAA,EAACR,OAAA,CAAAS,OAAM;~~IACNJ~~,SAAS,EAAG,IAAAK,aAAI,EACf,0CAA0C,EAC1CL,SACD,CAAG;IACHU,OAAO,EAAC,UAAU;IAAA,GACbG,eAAe;IAAAF,QAAA,EAElBA;EAAQ,CACH,CAAC;AAEX","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_button","_dropdown","_jsxRuntime","DropdownLinkAction","buttonProps","className","dropdownProps","linkText","jsx","default","clsx","renderToggle","isOpen","onToggle","onClick","variant","children","ButtonAction","additionalProps","__next40pxDefaultSize"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-actions.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport type { DropdownLinkActionProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\t__next40pxDefaultSize\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAmC,IAAAG,WAAA,GAAAH,OAAA;AATnC;AACA;AACA;;AAGA;AACA;AACA;;AAOO,SAASI,kBAAkBA,CAAE;EACnCC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC;AACwB,CAAC,EAAG;EAC5B,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACP,SAAA,CAAAQ,OAAQ;IACRJ,SAAS,EAAG,IAAAK,aAAI,EACf,yDAAyD,EACzDL,SACD,CAAG;IACHM,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,kBACpC,IAAAX,WAAA,CAAAM,GAAA,EAACR,OAAA,CAAAS,OAAM;MACN,iBAAgBG,MAAQ;MACxB,iBAAc,MAAM;MACpBE,OAAO,EAAGD,QAAU;MACpBE,OAAO,EAAC,MAAM;MAAA,GACTX,WAAW;MAAAY,QAAA,EAEdT;IAAQ,CACH,CACN;IAAA,GACED;EAAa,CAClB,CAAC;AAEJ;AAEO,SAASW,YAAYA,CAAE;EAC7BZ,SAAS;EACTW,QAAQ;EACR,GAAGE;AAC6D,CAAC,EAAG;EACpE,oBACC,IAAAhB,WAAA,CAAAM,GAAA,EAACR,OAAA,CAAAS,OAAM;IACNU,qBAAqB;IACrBd,SAAS,EAAG,IAAAK,aAAI,EACf,0CAA0C,EAC1CL,SACD,CAAG;IACHU,OAAO,EAAC,UAAU;IAAA,GACbG,eAAe;IAAAF,QAAA,EAElBA;EAAQ,CACH,CAAC;AAEX","ignoreList":[]}

package/build/circular-option-picker/circular-option-picker-option.js CHANGED Viewed

@@ -82,6 +82,7 @@ function Option({
   const commonProps = {
     id,
     className: 'components-circular-option-picker__option',
+    __next40pxDefaultSize: true,
     ...additionalProps
   };
   const isListbox = setActiveId !== undefined;

package/build/circular-option-picker/circular-option-picker-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_tooltip","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","useContext","CircularOptionPickerContext","useEffect","window","setTimeout","Composite","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useInstanceId","commonProps","isListbox","undefined","optionControl","jsxs","clsx","children","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/\n Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, setActiveId } = useContext( CircularOptionPickerContext );\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId \|\| 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption { ...commonProps } isSelected={ isSelected } />\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,4BAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAR,sBAAA,CAAAC,OAAA;AAAiC,IAAAQ,WAAA,GAAAR,OAAA;AAnBjC;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAOA,SAASS,yBAAyBA,CACjCC,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAgB,CAAC,GAAGH,KAAK;EAC/C,oBACC,IAAAF,WAAA,CAAAM,GAAA,EAACT,OAAA,CAAAU,OAAM;IAAA,GACDF,eAAe;IACpB,gBAAeD,SAAW;IAC1BI,GAAG,EAAGL;EAAc,CACpB,CAAC;AAEJ;AAEA,MAAMM,cAAc,GAAG,IAAAC,mBAAU,EAAET,yBAA0B,CAAC;AAE9D,SAASU,yBAAyBA,CACjCT,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAES,EAAE;IAAEC,UAAU;IAAE,GAAGR;EAAgB,CAAC,GAAGH,KAAK;EAEpD,MAAM;IAAEY,WAAW;IAAEC;EAAS,CAAC,GAAG,IAAAC,mBAAU,EAAEC,wDAA4B,CAAC;EAE3E,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKL,UAAU,IAAI,CAAEE,QAAQ,EAAG;MAC/B;MACA;MACA;MACAI,MAAM,CAACC,UAAU,CAAE,MAAMN,WAAW,GAAIF,EAAG,CAAC,EAAE,CAAE,CAAC;IAClD;EACD,CAAC,EAAE,CAAEC,UAAU,EAAEC,WAAW,EAAEC,QAAQ,EAAEH,EAAE,CAAG,CAAC;EAE9C,oBACC,IAAAZ,WAAA,CAAAM,GAAA,EAACR,UAAA,CAAAuB,SAAS,CAACC,IAAI;IACdC,MAAM,eACL,IAAAvB,WAAA,CAAAM,GAAA,EAACT,OAAA,CAAAU,OAAM;MAAA,GACDF,eAAe;MACpBmB,IAAI,EAAC,QAAQ;MACb,iBAAgB,CAAC,CAAEX,UAAY;MAC/BL,GAAG,EAAGL;IAAc,CACpB,CACD;IACDS,EAAE,EAAGA;EAAI,CACT,CAAC;AAEJ;AAEA,MAAMa,cAAc,GAAG,IAAAf,mBAAU,EAAEC,yBAA0B,CAAC;AAEvD,SAASe,MAAMA,CAAE;EACvBC,SAAS;EACTd,UAAU;EACVe,iBAAiB,GAAG,CAAC,CAAC;EACtBC,WAAW;EACX,GAAGxB;AACS,CAAC,EAAG;EAChB,MAAM;IAAEyB,MAAM;IAAEhB;EAAY,CAAC,GAAG,IAAAE,mBAAU,EAAEC,wDAA4B,CAAC;EACzE,MAAML,EAAE,GAAG,IAAAmB,sBAAa,EACvBL,MAAM,EACNI,MAAM,IAAI,2CACX,CAAC;EAED,MAAME,WAAW,GAAG;IACnBpB,EAAE;IACFe,SAAS,EAAE,2CAA2C;~~IACtD~~,~~GAAGtB~~;EACJ,CAAC;EAED,~~MAAM4B~~,SAAS,~~GAAGnB~~,WAAW,~~KAAKoB~~,SAAS;EAC3C,MAAMC,aAAa,GAAGF,SAAS,gBAC9B,~~IAAAjC~~,WAAA,CAAAM,GAAA,EAACmB,cAAc;IAAA,GAAMO,WAAW;IAAGnB,UAAU,EAAGA;EAAY,CAAE,CAAC,gBAE/D,IAAAb,WAAA,CAAAM,GAAA,EAACG,cAAc;IAAA,GAAMuB,WAAW;IAAG5B,SAAS,EAAGS;EAAY,CAAE,CAC7D;EAED,oBACC,IAAAb,WAAA,~~CAAAoC~~,IAAA;~~IACCT~~,SAAS,EAAG,~~IAAAU~~,aAAI,~~EACfV~~,SAAS,EACT,mDACD,CAAG;~~IAAAW~~,QAAA,~~GAEDT~~,WAAW,gBACZ,IAAA7B,WAAA,CAAAM,GAAA,EAACP,QAAA,CAAAQ,OAAO;~~MAACgC~~,IAAI,~~EAAGV~~,WAAa;~~MAAAS~~,QAAA,EAAGH;IAAa,CAAW,CAAC,GAEzDA,aACA,~~EACCtB~~,UAAU,iBAAI,IAAAb,WAAA,CAAAM,GAAA,EAACX,MAAA,~~CAAA6C~~,IAAI;MAACC,IAAI,EAAGC,YAAO;MAAA,~~GAAMd~~;IAAiB,CAAI,CAAC;EAAA,CAC5D,CAAC;AAER","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_tooltip","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","useContext","CircularOptionPickerContext","useEffect","window","setTimeout","Composite","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useInstanceId","commonProps","__next40pxDefaultSize","isListbox","undefined","optionControl","jsxs","clsx","children","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/\n Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, setActiveId } = useContext( CircularOptionPickerContext );\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId \|\| 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t__next40pxDefaultSize: true,\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption { ...commonProps } isSelected={ isSelected } />\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,4BAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAR,sBAAA,CAAAC,OAAA;AAAiC,IAAAQ,WAAA,GAAAR,OAAA;AAnBjC;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAOA,SAASS,yBAAyBA,CACjCC,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAgB,CAAC,GAAGH,KAAK;EAC/C,oBACC,IAAAF,WAAA,CAAAM,GAAA,EAACT,OAAA,CAAAU,OAAM;IAAA,GACDF,eAAe;IACpB,gBAAeD,SAAW;IAC1BI,GAAG,EAAGL;EAAc,CACpB,CAAC;AAEJ;AAEA,MAAMM,cAAc,GAAG,IAAAC,mBAAU,EAAET,yBAA0B,CAAC;AAE9D,SAASU,yBAAyBA,CACjCT,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAES,EAAE;IAAEC,UAAU;IAAE,GAAGR;EAAgB,CAAC,GAAGH,KAAK;EAEpD,MAAM;IAAEY,WAAW;IAAEC;EAAS,CAAC,GAAG,IAAAC,mBAAU,EAAEC,wDAA4B,CAAC;EAE3E,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKL,UAAU,IAAI,CAAEE,QAAQ,EAAG;MAC/B;MACA;MACA;MACAI,MAAM,CAACC,UAAU,CAAE,MAAMN,WAAW,GAAIF,EAAG,CAAC,EAAE,CAAE,CAAC;IAClD;EACD,CAAC,EAAE,CAAEC,UAAU,EAAEC,WAAW,EAAEC,QAAQ,EAAEH,EAAE,CAAG,CAAC;EAE9C,oBACC,IAAAZ,WAAA,CAAAM,GAAA,EAACR,UAAA,CAAAuB,SAAS,CAACC,IAAI;IACdC,MAAM,eACL,IAAAvB,WAAA,CAAAM,GAAA,EAACT,OAAA,CAAAU,OAAM;MAAA,GACDF,eAAe;MACpBmB,IAAI,EAAC,QAAQ;MACb,iBAAgB,CAAC,CAAEX,UAAY;MAC/BL,GAAG,EAAGL;IAAc,CACpB,CACD;IACDS,EAAE,EAAGA;EAAI,CACT,CAAC;AAEJ;AAEA,MAAMa,cAAc,GAAG,IAAAf,mBAAU,EAAEC,yBAA0B,CAAC;AAEvD,SAASe,MAAMA,CAAE;EACvBC,SAAS;EACTd,UAAU;EACVe,iBAAiB,GAAG,CAAC,CAAC;EACtBC,WAAW;EACX,GAAGxB;AACS,CAAC,EAAG;EAChB,MAAM;IAAEyB,MAAM;IAAEhB;EAAY,CAAC,GAAG,IAAAE,mBAAU,EAAEC,wDAA4B,CAAC;EACzE,MAAML,EAAE,GAAG,IAAAmB,sBAAa,EACvBL,MAAM,EACNI,MAAM,IAAI,2CACX,CAAC;EAED,MAAME,WAAW,GAAG;IACnBpB,EAAE;IACFe,SAAS,EAAE,2CAA2C;IACtDM,qBAAqB,EAAE,IAAI;IAC3B,GAAG5B;EACJ,CAAC;EAED,MAAM6B,SAAS,GAAGpB,WAAW,KAAKqB,SAAS;EAC3C,MAAMC,aAAa,GAAGF,SAAS,gBAC9B,IAAAlC,WAAA,CAAAM,GAAA,EAACmB,cAAc;IAAA,GAAMO,WAAW;IAAGnB,UAAU,EAAGA;EAAY,CAAE,CAAC,gBAE/D,IAAAb,WAAA,CAAAM,GAAA,EAACG,cAAc;IAAA,GAAMuB,WAAW;IAAG5B,SAAS,EAAGS;EAAY,CAAE,CAC7D;EAED,oBACC,IAAAb,WAAA,CAAAqC,IAAA;IACCV,SAAS,EAAG,IAAAW,aAAI,EACfX,SAAS,EACT,mDACD,CAAG;IAAAY,QAAA,GAEDV,WAAW,gBACZ,IAAA7B,WAAA,CAAAM,GAAA,EAACP,QAAA,CAAAQ,OAAO;MAACiC,IAAI,EAAGX,WAAa;MAAAU,QAAA,EAAGH;IAAa,CAAW,CAAC,GAEzDA,aACA,EACCvB,UAAU,iBAAI,IAAAb,WAAA,CAAAM,GAAA,EAACX,MAAA,CAAA8C,IAAI;MAACC,IAAI,EAAGC,YAAO;MAAA,GAAMf;IAAiB,CAAI,CAAC;EAAA,CAC5D,CAAC;AAER","ignoreList":[]}

package/build/color-palette/index.js CHANGED Viewed

@@ -189,6 +189,8 @@ function UnforwardedColorPalette(props, forwardedRef) {
   };
   const actions = !!clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
     onClick: clearColor,
+    accessibleWhenDisabled: true,
+    disabled: !value,
     children: (0, _i18n.__)('Clear')
   });
   let metaProps;