@wordpress/components 21.3.0 → 22.1.0

package/build/border-control/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/styles.ts"],"names":["labelStyles","focusBoxShadow","css","CONFIG","borderWidth","COLORS","ui","borderFocus","borderControl","boxSizingReset","innerWrapper","UnitControlWrapper","UnitSelect","wrapperWidth","wrapperHeight","__next36pxDefaultSize","borderControlDropdown","borderRadius","border","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","swatchSize","swatchGap","borderControlPopoverControls","StyledLabel","borderControlPopoverContent","borderColorIndicator","resetButton","borderControlStylePicker","borderStyleButton","borderSlider","marginRight","StyledField"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\nimport {\n\tStyledField,\n\tStyledLabel,\n} from '../base-control/styles/base-control-styles';\nimport {\n\tRoot as UnitControlWrapper,\n\tUnitSelect,\n} from '../unit-control/styles/unit-control-styles';\n\nimport type { Border } from './types';\n\nconst labelStyles = css`\n\tfont-weight: 500;\n`;\n\nconst focusBoxShadow = css`\n\tbox-shadow: inset 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };\n`;\n\nexport const borderControl = css`\n\tborder: 0;\n\tpadding: 0;\n\tmargin: 0;\n\t${ boxSizingReset }\n`;\n\nexport const innerWrapper = () => css`\n\t${ UnitControlWrapper } {\n\t\tflex: 1 1 40%;\n\t}\n\t&& ${ UnitSelect } {\n\t\t/* Prevent unit select forcing min height larger than its UnitControl */\n\t\tmin-height: 0;\n\t}\n`;\n\n/*\n * This style is only applied to the UnitControl wrapper when the border width\n * field should be a set width. Omitting this allows the UnitControl &\n * RangeControl to share the available width in a 40/60 split respectively.\n */\nexport const wrapperWidth = css`\n\t${ UnitControlWrapper } {\n\t\t/* Force the UnitControl's set width. */\n\t\tflex: 0 0 auto;\n\t}\n`;\n\n/*\n * When default control height is 36px the following should be removed.\n * See: InputControl and __next36pxDefaultSize.\n */\nexport const wrapperHeight = ( __next36pxDefaultSize?: boolean ) => {\n\treturn css`\n\t\theight: ${ __next36pxDefaultSize ? '36px' : '30px' };\n\t`;\n};\n\nexport const borderControlDropdown = () => css`\n\tbackground: #fff;\n\n\t&& > button {\n\t\t/*\n\t\t * Override button component height and padding to fit within\n\t\t * BorderControl regardless of size.\n\t\t */\n\t\theight: 100%;\n\t\tpadding: ${ space( 0.75 ) };\n\t\t${ rtl(\n\t\t\t{ borderRadius: `2px 0 0 2px` },\n\t\t\t{ borderRadius: `0 2px 2px 0` }\n\t\t)() }\n\t\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\n\t\t&:focus,\n\t\t&:hover:not( :disabled ) {\n\t\t\t${ focusBoxShadow }\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t}\n\t}\n`;\n\nexport const colorIndicatorBorder = ( border?: Border ) => {\n\tconst { color, style } = border || {};\n\n\tconst fallbackColor =\n\t\t!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;\n\n\treturn css`\n\t\tborder-style: ${ style === 'none' ? 'solid' : style };\n\t\tborder-color: ${ color || fallbackColor };\n\t`;\n};\n\nexport const colorIndicatorWrapper = (\n\tborder?: Border,\n\t__next36pxDefaultSize?: boolean\n) => {\n\tconst { style } = border || {};\n\n\treturn css`\n\t\tborder-radius: 9999px;\n\t\tborder: 2px solid transparent;\n\t\t${ style ? colorIndicatorBorder( border ) : undefined }\n\t\twidth: ${ __next36pxDefaultSize ? '28px' : '22px' };\n\t\theight: ${ __next36pxDefaultSize ? '28px' : '22px' };\n\t\tpadding: ${ __next36pxDefaultSize ? '2px' : '1px' };\n\n\t\t/*\n\t\t * ColorIndicator\n\t\t *\n\t\t * The transparent colors used here ensure visibility of the indicator\n\t\t * over the active state of the border control dropdown's toggle button.\n\t\t */\n\t\t& > span {\n\t\t\t${ ! __next36pxDefaultSize\n\t\t\t\t? css`\n\t\t\t\t\t\t/* Dimensions fit in 30px overall control height. */\n\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\twidth: 16px;\n\t\t\t\t  `\n\t\t\t\t: '' }\n\t\t\tbackground: linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);\n\t\t}\n\t`;\n};\n\n// Must equal $color-palette-circle-size from:\n// @wordpress/components/src/circular-option-picker/style.scss\nconst swatchSize = 28;\nconst swatchGap = 12;\n\nexport const borderControlPopoverControls = css`\n\twidth: ${ swatchSize * 6 + swatchGap * 5 }px;\n\n\t> div:first-of-type > ${ StyledLabel } {\n\t\tmargin-bottom: 0;\n\t\t${ labelStyles }\n\t}\n\n\t&& ${ StyledLabel } + button:not( .has-text ) {\n\t\tmin-width: 24px;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const borderControlPopoverContent = css``;\nexport const borderColorIndicator = css``;\n\nexport const resetButton = css`\n\tjustify-content: center;\n\twidth: 100%;\n\n\t/* Override button component styling */\n\t&& {\n\t\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };\n\t\tborder-top-left-radius: 0;\n\t\tborder-top-right-radius: 0;\n\t\theight: 46px;\n\t}\n`;\n\nexport const borderControlStylePicker = css`\n\t${ StyledLabel } {\n\t\t${ labelStyles }\n\t}\n`;\n\nexport const borderStyleButton = css`\n\t&&&&& {\n\t\tmin-width: 30px;\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tpadding: 3px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n\n\t${ StyledField } {\n\t\tmargin-bottom: 0;\n\t\tfont-size: 0;\n\t\tdisplay: flex;\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/styles.ts"],"names":["labelStyles","focusBoxShadow","css","CONFIG","borderWidth","COLORS","ui","borderFocus","borderControl","boxSizingReset","innerWrapper","UnitControlWrapper","UnitSelect","wrapperWidth","wrapperHeight","size","borderControlDropdown","borderRadius","border","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","swatchSize","swatchGap","borderControlPopoverControls","StyledLabel","borderControlPopoverContent","borderColorIndicator","resetButton","borderControlStylePicker","borderStyleButton","borderSlider","marginRight","StyledField"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\nimport {\n\tStyledField,\n\tStyledLabel,\n} from '../base-control/styles/base-control-styles';\nimport {\n\tValueInput as UnitControlWrapper,\n\tUnitSelect,\n} from '../unit-control/styles/unit-control-styles';\n\nimport type { Border } from './types';\n\nconst labelStyles = css`\n\tfont-weight: 500;\n`;\n\nconst focusBoxShadow = css`\n\tbox-shadow: inset 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };\n`;\n\nexport const borderControl = css`\n\tborder: 0;\n\tpadding: 0;\n\tmargin: 0;\n\t${ boxSizingReset }\n`;\n\nexport const innerWrapper = () => css`\n\t${ UnitControlWrapper } {\n\t\tflex: 1 1 40%;\n\t}\n\t&& ${ UnitSelect } {\n\t\t/* Prevent unit select forcing min height larger than its UnitControl */\n\t\tmin-height: 0;\n\t}\n`;\n\n/*\n * This style is only applied to the UnitControl wrapper when the border width\n * field should be a set width. Omitting this allows the UnitControl &\n * RangeControl to share the available width in a 40/60 split respectively.\n */\nexport const wrapperWidth = css`\n\t${ UnitControlWrapper } {\n\t\t/* Force the UnitControl's set width. */\n\t\tflex: 0 0 auto;\n\t}\n`;\n\nexport const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {\n\treturn css`\n\t\theight: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t`;\n};\n\nexport const borderControlDropdown = (\n\tsize?: 'default' | '__unstable-large'\n) => css`\n\tbackground: #fff;\n\n\t&& > button {\n\t\t/*\n\t\t * Override button component styles to fit within BorderControl\n\t\t * regardless of size.\n\t\t */\n\t\theight: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t\twidth: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t${ rtl(\n\t\t\t{ borderRadius: `2px 0 0 2px` },\n\t\t\t{ borderRadius: `0 2px 2px 0` }\n\t\t)() }\n\t\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\n\t\t&:focus,\n\t\t&:hover:not( :disabled ) {\n\t\t\t${ focusBoxShadow }\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t}\n\t}\n`;\n\nexport const colorIndicatorBorder = ( border?: Border ) => {\n\tconst { color, style } = border || {};\n\n\tconst fallbackColor =\n\t\t!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;\n\n\treturn css`\n\t\tborder-style: ${ style === 'none' ? 'solid' : style };\n\t\tborder-color: ${ color || fallbackColor };\n\t`;\n};\n\nexport const colorIndicatorWrapper = (\n\tborder?: Border,\n\tsize?: 'default' | '__unstable-large'\n) => {\n\tconst { style } = border || {};\n\n\treturn css`\n\t\tborder-radius: 9999px;\n\t\tborder: 2px solid transparent;\n\t\t${ style ? colorIndicatorBorder( border ) : undefined }\n\t\twidth: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\theight: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\tpadding: ${ size === '__unstable-large' ? '2px' : '1px' };\n\n\t\t/*\n\t\t * ColorIndicator\n\t\t *\n\t\t * The transparent colors used here ensure visibility of the indicator\n\t\t * over the active state of the border control dropdown's toggle button.\n\t\t */\n\t\t& > span {\n\t\t\theight: ${ space( 4 ) };\n\t\t\twidth: ${ space( 4 ) };\n\t\t\tbackground: linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);\n\t\t}\n\t`;\n};\n\n// Must equal $color-palette-circle-size from:\n// @wordpress/components/src/circular-option-picker/style.scss\nconst swatchSize = 28;\nconst swatchGap = 12;\n\nexport const borderControlPopoverControls = css`\n\twidth: ${ swatchSize * 6 + swatchGap * 5 }px;\n\n\t> div:first-of-type > ${ StyledLabel } {\n\t\tmargin-bottom: 0;\n\t\t${ labelStyles }\n\t}\n\n\t&& ${ StyledLabel } + button:not( .has-text ) {\n\t\tmin-width: 24px;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const borderControlPopoverContent = css``;\nexport const borderColorIndicator = css``;\n\nexport const resetButton = css`\n\tjustify-content: center;\n\twidth: 100%;\n\n\t/* Override button component styling */\n\t&& {\n\t\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };\n\t\tborder-top-left-radius: 0;\n\t\tborder-top-right-radius: 0;\n\t\theight: 46px;\n\t}\n`;\n\nexport const borderControlStylePicker = css`\n\t${ StyledLabel } {\n\t\t${ labelStyles }\n\t}\n`;\n\nexport const borderStyleButton = css`\n\t&&&&& {\n\t\tmin-width: 30px;\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tpadding: 3px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n\n\t${ StyledField } {\n\t\tmargin-bottom: 0;\n\t\tfont-size: 0;\n\t\tdisplay: flex;\n\t}\n`;\n"]}

package/build/box-control/index.js

@@ -74,7 +74,9 @@ function BoxControl(_ref) {
     sides,
     splitOnAxis = false,
     allowReset = true,
-    resetValues = _utils2.DEFAULT_VALUES
+    resetValues = _utils2.DEFAULT_VALUES,
+    onMouseOver,
+    onMouseOut
   } = _ref;
   const [values, setValues] = (0, _hooks.useControlledState)(valuesProp, {
     fallback: _utils2.DEFAULT_VALUES
@@ -130,7 +132,9 @@ function BoxControl(_ref) {
     selectedUnits,
     setSelectedUnits,
     sides,
-    values: inputValues
+    values: inputValues,
+    onMouseOver,
+    onMouseOut
   };
   return (0, _element.createElement)(_boxControlStyles.Root, {
     id: id,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/index.js"],"names":["defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus"],"mappings":"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","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 Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\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';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\nexport default function BoxControl( {\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} ) {\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(\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( {\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 = ( event, { side: nextSide } ) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues ) => {\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};\n\n\treturn (\n\t\t<Root id={ id } role=\"group\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tisSecondary\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/index.js"],"names":["defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus"],"mappings":"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","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 Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\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';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\nexport default function BoxControl( {\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} ) {\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(\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( {\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 = ( event, { side: nextSide } ) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues ) => {\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};\n\n\treturn (\n\t\t<Root id={ id } role=\"group\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tisSecondary\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\n"]}

package/build/circular-option-picker/index.js

@@ -34,14 +34,14 @@ var _tooltip = _interopRequireDefault(require("../tooltip"));
 /**
  * Internal dependencies
  */
-function Option(_ref) {
-  let {
+function Option(props) {
+  const {
     className,
     isSelected,
     selectedIconProps,
     tooltipText,
     ...additionalProps
-  } = _ref;
+  } = props;
   const optionButton = (0, _element.createElement)(_button.default, (0, _extends2.default)({
     isPressed: isSelected,
     className: "components-circular-option-picker__option"
@@ -55,20 +55,20 @@ function Option(_ref) {
   }, selectedIconProps ? selectedIconProps : {})));
 }
 
-function DropdownLinkAction(_ref2) {
-  let {
+function DropdownLinkAction(props) {
+  const {
     buttonProps,
     className,
     dropdownProps,
     linkText
-  } = _ref2;
+  } = props;
   return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
     className: (0, _classnames.default)('components-circular-option-picker__dropdown-link-action', className),
-    renderToggle: _ref3 => {
+    renderToggle: _ref => {
       let {
         isOpen,
         onToggle
-      } = _ref3;
+      } = _ref;
       return (0, _element.createElement)(_button.default, (0, _extends2.default)({
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
@@ -79,25 +79,25 @@ function DropdownLinkAction(_ref2) {
   }, dropdownProps));
 }
 
-function ButtonAction(_ref4) {
-  let {
+function ButtonAction(props) {
+  const {
     className,
     children,
     ...additionalProps
-  } = _ref4;
+  } = props;
   return (0, _element.createElement)(_button.default, (0, _extends2.default)({
     className: (0, _classnames.default)('components-circular-option-picker__clear', className),
     variant: "tertiary"
   }, additionalProps), children);
 }
 
-function CircularOptionPicker(_ref5) {
-  let {
+function CircularOptionPicker(props) {
+  const {
     actions,
     className,
     options,
     children
-  } = _ref5;
+  } = props;
   return (0, _element.createElement)("div", {
     className: (0, _classnames.default)('components-circular-option-picker', className)
   }, (0, _element.createElement)("div", {

package/build/circular-option-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.js"],"names":["Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","check","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","actions","options"],"mappings":";;;;;;;;;;;;;AAIA;;AAKA;;AAKA;;AACA;;AACA;;AAhBA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,MAAT,OAMI;AAAA,MANa;AAChBC,IAAAA,SADgB;AAEhBC,IAAAA,UAFgB;AAGhBC,IAAAA,iBAHgB;AAIhBC,IAAAA,WAJgB;AAKhB,OAAGC;AALa,GAMb;AACH,QAAMC,YAAY,GACjB,4BAAC,eAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC;AAFX,KAGMG,eAHN,EADD;AAOA,SACC;AACC,IAAA,SAAS,EAAG,yBACXJ,SADW,EAEX,mDAFW;AADb,KAMGG,WAAW,GACZ,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGK;AADR,KAEQJ,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAZF,CADD;AAoBA;;AAED,SAASK,kBAAT,QAKI;AAAA,MALyB;AAC5BC,IAAAA,WAD4B;AAE5BR,IAAAA,SAF4B;AAG5BS,IAAAA,aAH4B;AAI5BC,IAAAA;AAJ4B,GAKzB;AACH,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAG,yBACX,yDADW,EAEXV,SAFW,CADb;AAKC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEW,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,4BAAC,eAAD;AACC,yBAAgBD,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAGC,QAHX;AAIC,QAAA,OAAO,EAAC;AAJT,SAKMJ,WALN,GAOGE,QAPH,CADc;AAAA;AALhB,KAgBMD,aAhBN,EADD;AAoBA;;AAED,SAASI,YAAT,QAAqE;AAAA,MAA9C;AAAEb,IAAAA,SAAF;AAAac,IAAAA,QAAb;AAAuB,OAAGV;AAA1B,GAA8C;AACpE,SACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAG,yBACX,0CADW,EAEXJ,SAFW,CADb;AAKC,IAAA,OAAO,EAAC;AALT,KAMMI,eANN,GAQGU,QARH,CADD;AAYA;;AAEc,SAASC,oBAAT,QAKX;AAAA,MAL0C;AAC7CC,IAAAA,OAD6C;AAE7ChB,IAAAA,SAF6C;AAG7CiB,IAAAA,OAH6C;AAI7CH,IAAAA;AAJ6C,GAK1C;AACH,SACC;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXd,SAFW;AADb,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGiB,OADH,CAND,EASGH,QATH,EAUGE,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDD,oBAAoB,CAAChB,MAArB,GAA8BA,MAA9B;AACAgB,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\n\nfunction Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n} ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\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 }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n} ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\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\nfunction ButtonAction( { className, children, ...additionalProps } ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\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\nexport default function CircularOptionPicker( {\n\tactions,\n\tclassName,\n\toptions,\n\tchildren,\n} ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n"]}
+{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.js"],"names":["Option","props","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","check","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","actions","options"],"mappings":";;;;;;;;;;;;;AAIA;;AAKA;;AAKA;;AACA;;AACA;;AAhBA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,MAAT,CAAiBC,KAAjB,EAAyB;AACxB,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,UAFK;AAGLC,IAAAA,iBAHK;AAILC,IAAAA,WAJK;AAKL,OAAGC;AALE,MAMFL,KANJ;AAOA,QAAMM,YAAY,GACjB,4BAAC,eAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC;AAFX,KAGMG,eAHN,EADD;AAOA,SACC;AACC,IAAA,SAAS,EAAG,yBACXJ,SADW,EAEX,mDAFW;AADb,KAMGG,WAAW,GACZ,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGK;AADR,KAEQJ,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAZF,CADD;AAoBA;;AAED,SAASK,kBAAT,CAA6BR,KAA7B,EAAqC;AACpC,QAAM;AAAES,IAAAA,WAAF;AAAeR,IAAAA,SAAf;AAA0BS,IAAAA,aAA1B;AAAyCC,IAAAA;AAAzC,MAAsDX,KAA5D;AACA,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAG,yBACX,yDADW,EAEXC,SAFW,CADb;AAKC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEW,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,4BAAC,eAAD;AACC,yBAAgBD,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAGC,QAHX;AAIC,QAAA,OAAO,EAAC;AAJT,SAKMJ,WALN,GAOGE,QAPH,CADc;AAAA;AALhB,KAgBMD,aAhBN,EADD;AAoBA;;AAED,SAASI,YAAT,CAAuBd,KAAvB,EAA+B;AAC9B,QAAM;AAAEC,IAAAA,SAAF;AAAac,IAAAA,QAAb;AAAuB,OAAGV;AAA1B,MAA8CL,KAApD;AACA,SACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAG,yBACX,0CADW,EAEXC,SAFW,CADb;AAKC,IAAA,OAAO,EAAC;AALT,KAMMI,eANN,GAQGU,QARH,CADD;AAYA;;AAEc,SAASC,oBAAT,CAA+BhB,KAA/B,EAAuC;AACrD,QAAM;AAAEiB,IAAAA,OAAF;AAAWhB,IAAAA,SAAX;AAAsBiB,IAAAA,OAAtB;AAA+BH,IAAAA;AAA/B,MAA4Cf,KAAlD;AACA,SACC;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXC,SAFW;AADb,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGiB,OADH,CAND,EASGH,QATH,EAUGE,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDD,oBAAoB,CAACjB,MAArB,GAA8BA,MAA9B;AACAiB,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\n\nfunction Option( props ) {\n\tconst {\n\t\tclassName,\n\t\tisSelected,\n\t\tselectedIconProps,\n\t\ttooltipText,\n\t\t...additionalProps\n\t} = props;\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\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 }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction DropdownLinkAction( props ) {\n\tconst { buttonProps, className, dropdownProps, linkText } = props;\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\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\nfunction ButtonAction( props ) {\n\tconst { className, children, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\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\nexport default function CircularOptionPicker( props ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n"]}

package/build/color-palette/index.js

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ColorPalette = void 0;
 exports.CustomColorPickerDropdown = CustomColorPickerDropdown;
-exports.default = ColorPalette;
-exports.showTransparentBackground = exports.extractColorNameFromCurrentValue = void 0;
+exports.showTransparentBackground = exports.extractColorNameFromCurrentValue = exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -37,8 +37,6 @@ var _styles = require("./styles");
 
 var _dropdownContentWrapper = _interopRequireDefault(require("../dropdown/dropdown-content-wrapper"));
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -88,6 +86,11 @@ function SinglePalette(_ref) {
       });
     });
   }, [colors, value, onChange, clearColor]);
+
+  if (colors.length === 0) {
+    return null;
+  }
+
   return (0, _element.createElement)(_circularOptionPicker.default, {
     className: className,
     options: colorOptions,
@@ -104,6 +107,11 @@ function MultiplePalettes(_ref3) {
     value,
     actions
   } = _ref3;
+
+  if (colors.length === 0) {
+    return null;
+  }
+
   return (0, _element.createElement)(_vStack.VStack, {
     spacing: 3,
     className: className
@@ -163,7 +171,7 @@ const extractColorNameFromCurrentValue = function (currentValue) {
   const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : (0, _colord.colord)(currentValue).toHex(); // Normalize format of `colors` to simplify the following loop
 
   const colorPalettes = showMultiplePalettes ? colors : [{
-    colors
+    colors: colors
   }];
 
   for (const {
@@ -197,21 +205,33 @@ const showTransparentBackground = currentValue => {
 
 exports.showTransparentBackground = showTransparentBackground;
 
-function ColorPalette(_ref6) {
-  let {
+const areColorsMultiplePalette = colors => {
+  return colors.every(colorObj => Array.isArray(colorObj.colors));
+};
+
+function UnforwardedColorPalette(props, forwardedRef) {
+  const {
     clearable = true,
-    className,
-    colors,
+    colors = [],
     disableCustomColors = false,
-    enableAlpha,
+    enableAlpha = false,
     onChange,
     value,
     __experimentalHasMultipleOrigins = false,
-    __experimentalIsRenderedInSidebar = false
-  } = _ref6;
+    __experimentalIsRenderedInSidebar = false,
+    ...otherProps
+  } = props;
   const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
-  const showMultiplePalettes = __experimentalHasMultipleOrigins && (colors === null || colors === void 0 ? void 0 : colors.length);
-  const Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;
+  const buttonLabelName = (0, _element.useMemo)(() => extractColorNameFromCurrentValue(value, colors, __experimentalHasMultipleOrigins), [value, colors, __experimentalHasMultipleOrigins]); // Make sure that the `colors` array has a format (single/multiple) that is
+  // compatible with the `__experimentalHasMultipleOrigins` flag. This is true
+  // when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are
+  // either both `true` or both `false`.
+
+  if (colors.length > 0 && __experimentalHasMultipleOrigins !== areColorsMultiplePalette(colors)) {
+    // eslint-disable-next-line no-console
+    console.warn('wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.');
+    return null;
+  }
 
   const renderCustomColorPicker = () => (0, _element.createElement)(_dropdownContentWrapper.default, {
     paddingSize: "none"
@@ -221,22 +241,30 @@ function ColorPalette(_ref6) {
     enableAlpha: enableAlpha
   }));
 
-  const colordColor = (0, _colord.colord)(value);
+  const colordColor = (0, _colord.colord)(value !== null && value !== void 0 ? value : '');
   const valueWithoutLeadingHash = value !== null && value !== void 0 && value.startsWith('#') ? value.substring(1) : value !== null && value !== void 0 ? value : '';
-  const buttonLabelName = (0, _element.useMemo)(() => extractColorNameFromCurrentValue(value, colors, showMultiplePalettes), [value, colors, showMultiplePalettes]);
   const customColorAccessibleLabel = !!valueWithoutLeadingHash ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
   (0, _i18n.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, valueWithoutLeadingHash) : (0, _i18n.__)('Custom color picker.');
-  return (0, _element.createElement)(_vStack.VStack, {
+  const paletteCommonProps = {
+    clearable,
+    clearColor,
+    onChange,
+    value,
+    actions: !!clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
+      onClick: clearColor
+    }, (0, _i18n.__)('Clear'))
+  };
+  return (0, _element.createElement)(_vStack.VStack, (0, _extends2.default)({
     spacing: 3,
-    className: className
-  }, !disableCustomColors && (0, _element.createElement)(CustomColorPickerDropdown, {
+    ref: forwardedRef
+  }, otherProps), !disableCustomColors && (0, _element.createElement)(CustomColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
-    renderToggle: _ref7 => {
+    renderToggle: _ref6 => {
       let {
         isOpen,
         onToggle
-      } = _ref7;
+      } = _ref6;
       return (0, _element.createElement)(_flex.Flex, {
         as: 'button',
         justify: "space-between",
@@ -261,15 +289,40 @@ function ColorPalette(_ref6) {
         className: "components-color-palette__custom-color-value"
       }, valueWithoutLeadingHash));
     }
-  }), (0, _element.createElement)(Component, {
-    clearable: clearable,
-    clearColor: clearColor,
-    colors: colors,
-    onChange: onChange,
-    value: value,
-    actions: !!clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
-      onClick: clearColor
-    }, (0, _i18n.__)('Clear'))
-  }));
+  }), __experimentalHasMultipleOrigins ? (0, _element.createElement)(MultiplePalettes, (0, _extends2.default)({}, paletteCommonProps, {
+    colors: colors
+  })) : (0, _element.createElement)(SinglePalette, (0, _extends2.default)({}, paletteCommonProps, {
+    colors: colors
+  })));
 }
+/**
+ * Allows the user to pick a color from a list of pre-defined color entries.
+ *
+ * ```jsx
+ * import { ColorPalette } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyColorPalette = () => {
+ *   const [ color, setColor ] = useState ( '#f00' )
+ *   const colors = [
+ *     { name: 'red', color: '#f00' },
+ *     { name: 'white', color: '#fff' },
+ *     { name: 'blue', color: '#00f' },
+ *   ];
+ *   return (
+ *     <ColorPalette
+ *       colors={ colors }
+ *       value={ color }
+ *       onChange={ ( color ) => setColor( color ) }
+ *     />
+ *   );
+ * } );
+ * ```
+ */
+
+
+const ColorPalette = (0, _element.forwardRef)(UnforwardedColorPalette);
+exports.ColorPalette = ColorPalette;
+var _default = ColorPalette;
+exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","index","color","name","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","showTransparentBackground","alpha","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background","Truncate"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n} ) {\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ value }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tshowTransparentBackground( value )\n\t\t\t\t\t\t\t\t\t? { color: '#000' }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.tsx"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","index","color","name","colordColor","isSelected","fill","contrast","backgroundColor","length","MultiplePalettes","colorPalette","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","showTransparentBackground","alpha","areColorsMultiplePalette","every","colorObj","Array","isArray","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","undefined","buttonLabelName","console","warn","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","customColorAccessibleLabel","paletteCommonProps","isOpen","onToggle","background","Truncate","ColorPalette"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: MultiplePalettesProps ) {\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue?: ColorPaletteProps[ 'value' ],\n\tcolors: ColorPaletteProps[ 'colors' ] = [],\n\tshowMultiplePalettes: ColorPaletteProps[ '__experimentalHasMultipleOrigins' ] = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\ttype normalizedPaletteObject = { colors: ColorObject[] };\n\tconst colorPalettes: normalizedPaletteObject[] = showMultiplePalettes\n\t\t? ( colors as PaletteObject[] )\n\t\t: [ { colors: colors as ColorObject[] } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue?: string ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\nconst areColorsMultiplePalette = (\n\tcolors: NonNullable< ColorPaletteProps[ 'colors' ] >\n): colors is PaletteObject[] => {\n\treturn colors.every( ( colorObj ) =>\n\t\tArray.isArray( ( colorObj as PaletteObject ).colors )\n\t);\n};\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalHasMultipleOrigins = false,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = props;\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t),\n\t\t[ value, colors, __experimentalHasMultipleOrigins ]\n\t);\n\n\t// Make sure that the `colors` array has a format (single/multiple) that is\n\t// compatible with the `__experimentalHasMultipleOrigins` flag. This is true\n\t// when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are\n\t// either both `true` or both `false`.\n\tif (\n\t\tcolors.length > 0 &&\n\t\t__experimentalHasMultipleOrigins !== areColorsMultiplePalette( colors )\n\t) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t'wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.'\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ value }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\n\tconst colordColor = colord( value ?? '' );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tshowTransparentBackground( value )\n\t\t\t\t\t\t\t\t\t? { color: '#000' }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ __experimentalHasMultipleOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"]}

package/build/color-palette/styles.js

@@ -14,9 +14,9 @@ var _heading = require("../heading");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 const ColorHeading = ( /*#__PURE__*/0, _base.default)(_heading.Heading, process.env.NODE_ENV === "production" ? {
-  target: "e1uu5br00"
+  target: "ev9wop70"
 } : {
-  target: "e1uu5br00",
+  target: "ev9wop70",
   label: "ColorHeading"
 })(process.env.NODE_ENV === "production" ? {
   name: "13lxv2o",
@@ -24,7 +24,7 @@ const ColorHeading = ( /*#__PURE__*/0, _base.default)(_heading.Heading, process.
 } : {
   name: "13lxv2o",
   styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTZDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9oZWFkaW5nJztcblxuZXhwb3J0IGNvbnN0IENvbG9ySGVhZGluZyA9IHN0eWxlZCggSGVhZGluZyApYFxuXHR0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuXHRsaW5lLWhlaWdodDogMjRweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0JiYmIHtcblx0XHRmb250LXNpemU6IDExcHg7XG5cdFx0bWFyZ2luLWJvdHRvbTogMDtcblx0fVxuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTZDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9oZWFkaW5nJztcblxuZXhwb3J0IGNvbnN0IENvbG9ySGVhZGluZyA9IHN0eWxlZCggSGVhZGluZyApYFxuXHR0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuXHRsaW5lLWhlaWdodDogMjRweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0JiYmIHtcblx0XHRmb250LXNpemU6IDExcHg7XG5cdFx0bWFyZ2luLWJvdHRvbTogMDtcblx0fVxuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 exports.ColorHeading = ColorHeading;

package/build/color-palette/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/styles.js"],"names":["ColorHeading","Heading"],"mappings":";;;;;;;;;;;AAQA;;;;AAEO,MAAMA,YAAY,GAAG,iCAAQC,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Heading } from '../heading';\n\nexport const ColorHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: 24px;\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/styles.ts"],"names":["ColorHeading","Heading"],"mappings":";;;;;;;;;;;AAQA;;;;AAEO,MAAMA,YAAY,GAAG,iCAAQC,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Heading } from '../heading';\n\nexport const ColorHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: 24px;\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n"]}

package/build/color-palette/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/color-palette/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/color-picker/input-with-slider.js

@@ -31,6 +31,21 @@ const InputWithSlider = _ref => {
     onChange,
     value
   } = _ref;
+
+  const onNumberControlChange = newValue => {
+    if (!newValue) {
+      onChange(0);
+      return;
+    }
+
+    if (typeof newValue === 'string') {
+      onChange(parseInt(newValue, 10));
+      return;
+    }
+
+    onChange(newValue);
+  };
+
   return (0, _element.createElement)(_hStack.HStack, {
     spacing: 4
   }, (0, _element.createElement)(_styles.NumberControlWrapper, {
@@ -38,16 +53,15 @@ const InputWithSlider = _ref => {
     max: max,
     label: label,
     hideLabelFromVision: true,
-    value: value // @ts-expect-error TODO: Resolve discrepancy in NumberControl
-    ,
-    onChange: onChange,
+    value: value,
+    onChange: onNumberControlChange,
     prefix: (0, _element.createElement)(_spacer.Spacer, {
       as: _text.Text,
       paddingLeft: (0, _space.space)(4),
       color: _colorsValues.COLORS.ui.theme,
       lineHeight: 1
     }, abbreviation),
-    hideHTMLArrows: true,
+    spinControls: "none",
     size: "__unstable-large"
   }), (0, _element.createElement)(_styles.RangeControl, {
     label: label,

package/build/color-picker/input-with-slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["InputWithSlider","min","max","label","abbreviation","onChange","value","Text","COLORS","ui","theme"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AARA;AACA;AACA;AAiBO,MAAMA,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,4BAAD;AACC,IAAA,GAAG,EAAGL,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT,CAMC;AAND;AAOC,IAAA,QAAQ,EAAGD,QAPZ;AAQC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGE,UADN;AAEC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAFf;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGN,YANH,CATF;AAkBC,IAAA,cAAc,MAlBf;AAmBC,IAAA,IAAI,EAAC;AAnBN,IADD,EAsBC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT,CAMC;AACA;AAPD;AAQC,IAAA,QAAQ,EAAGD,QARZ;AASC,IAAA,cAAc,EAAG;AATlB,IAtBD,CADD;AAoCA,CA5CM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error TODO: Resolve discrepancy in NumberControl\n\t\t\t\tonChange={ onChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 4 ) }\n\t\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\thideHTMLArrows\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["InputWithSlider","min","max","label","abbreviation","onChange","value","onNumberControlChange","newValue","parseInt","Text","COLORS","ui","theme"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AARA;AACA;AACA;AAiBO,MAAMA,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;;AAC5B,QAAMC,qBAAqB,GAAKC,QAAF,IAAkC;AAC/D,QAAK,CAAEA,QAAP,EAAkB;AACjBH,MAAAA,QAAQ,CAAE,CAAF,CAAR;AACA;AACA;;AACD,QAAK,OAAOG,QAAP,KAAoB,QAAzB,EAAoC;AACnCH,MAAAA,QAAQ,CAAEI,QAAQ,CAAED,QAAF,EAAY,EAAZ,CAAV,CAAR;AACA;AACA;;AACDH,IAAAA,QAAQ,CAAEG,QAAF,CAAR;AACA,GAVD;;AAYA,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,4BAAD;AACC,IAAA,GAAG,EAAGP,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGC,qBANZ;AAOC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGG,UADN;AAEC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAFf;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGT,YANH,CARF;AAiBC,IAAA,YAAY,EAAC,MAjBd;AAkBC,IAAA,IAAI,EAAC;AAlBN,IADD,EAqBC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT,CAMC;AACA;AAPD;AAQC,IAAA,QAAQ,EAAGD,QARZ;AASC,IAAA,cAAc,EAAG;AATlB,IArBD,CADD;AAmCA,CAvDM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\tconst onNumberControlChange = ( newValue?: number | string ) => {\n\t\tif ( ! newValue ) {\n\t\t\tonChange( 0 );\n\t\t\treturn;\n\t\t}\n\t\tif ( typeof newValue === 'string' ) {\n\t\t\tonChange( parseInt( newValue, 10 ) );\n\t\t\treturn;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onNumberControlChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 4 ) }\n\t\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\tspinControls=\"none\"\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"]}

package/build/custom-gradient-picker/gradient-bar/index.js

@@ -9,8 +9,6 @@ exports.default = CustomGradientBar;
 
 var _element = require("@wordpress/element");
 
-var _lodash = require("lodash");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _controlPoints = _interopRequireDefault(require("./control-points"));
@@ -112,7 +110,7 @@ function CustomGradientBar(_ref) {
   const onMouseEnterAndMove = event => {
     const insertPosition = (0, _utils.getHorizontalRelativeGradientPosition)(event.clientX, gradientMarkersContainerDomRef.current); // If the insert point is close to an existing control point don't show it.
 
-    if ((0, _lodash.some)(controlPoints, _ref2 => {
+    if (controlPoints.some(_ref2 => {
       let {
         position
       } = _ref2;