@wordpress/components 28.10.0 → 28.11.0

package/build-module/border-box-control/border-box-control/hook.js

@@ -10,6 +10,7 @@ import * as styles from '../styles';
 import { getBorderDiff, getCommonBorder, getSplitBorders, hasMixedBorders, hasSplitBorders, isCompleteBorder, isEmptyBorder } from '../utils';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 export function useBorderBoxControl(props) {
   const {
     className,
@@ -23,6 +24,11 @@ export function useBorderBoxControl(props) {
     __next40pxDefaultSize,
     ...otherProps
   } = useContextSystem(props, 'BorderBoxControl');
+  maybeWarnDeprecated36pxSize({
+    componentName: 'BorderBoxControl',
+    __next40pxDefaultSize,
+    size
+  });
   const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
   const mixedBorders = hasMixedBorders(value);
   const splitBorders = hasSplitBorders(value);

package/build-module/border-box-control/border-box-control/hook.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useState","styles","getBorderDiff","getCommonBorder","getSplitBorders","hasMixedBorders","hasSplitBorders","isCompleteBorder","isEmptyBorder","useContextSystem","useCx","useBorderBoxControl","props","className","colors","onChange","enableAlpha","enableStyle","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","otherProps","computedSize","mixedBorders","splitBorders","linkedValue","splitValue","hasWidthValue","isNaN","parseFloat","width","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","borderBoxControl","linkedControlClassName","linkedBorderControl","wrapperClassName","wrapper","disableUnits"],"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tonChange,\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t__next40pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControl' );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\t// If no numeric width value is set, the unit select will be disabled.\n\tconst hasWidthValue = ! isNaN( parseFloat( `${ linkedValue?.width }` ) );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate  widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControl, className );\n\t}, [ cx, className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.linkedBorderControl() );\n\t}, [ cx ] );\n\n\tconst wrapperClassName = useMemo( () => {\n\t\treturn cx( styles.wrapper );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tdisableUnits: mixedBorders && ! hasWidthValue,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsize: computedSize,\n\t\tsplitValue,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useMemo","useState","styles","getBorderDiff","getCommonBorder","getSplitBorders","hasMixedBorders","hasSplitBorders","isCompleteBorder","isEmptyBorder","useContextSystem","useCx","maybeWarnDeprecated36pxSize","useBorderBoxControl","props","className","colors","onChange","enableAlpha","enableStyle","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","otherProps","componentName","computedSize","mixedBorders","splitBorders","linkedValue","splitValue","hasWidthValue","isNaN","parseFloat","width","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","borderBoxControl","linkedControlClassName","linkedBorderControl","wrapperClassName","wrapper","disableUnits"],"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tonChange,\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t__next40pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControl' );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BorderBoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t} );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\t// If no numeric width value is set, the unit select will be disabled.\n\tconst hasWidthValue = ! isNaN( parseFloat( `${ linkedValue?.width }` ) );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate  widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControl, className );\n\t}, [ cx, className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.linkedBorderControl() );\n\t}, [ cx ] );\n\n\tconst wrapperClassName = useMemo( () => {\n\t\treturn cx( styles.wrapper );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tdisableUnits: mixedBorders && ! hasWidthValue,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsize: computedSize,\n\t\tsplitValue,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -142,6 +142,7 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
  *
  * 	return (
  * 		<BorderControl
+ * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Border' ) }
  * 			onChange={ onChange }

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

@@ -1 +1 @@
-{"version":3,"names":["__","BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","Spacer","jsx","_jsx","jsxs","_jsxs","BorderLabel","props","label","hideLabelFromVision","as","children","UnconnectedBorderControl","forwardedRef","__next40pxDefaultSize","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","isStyleSettable","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","ref","spacing","className","prefix","marginRight","marginBottom","onChange","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl"],"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\nimport { Spacer } from '../../spacer';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tisStyleSettable,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<Spacer marginRight={ 1 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\t__unstablePopoverProps={\n\t\t\t\t\t\t\t\t\t__unstablePopoverProps\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\t\tisStyleSettable={ isStyleSettable }\n\t\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\t\tpreviousStyleSelection={\n\t\t\t\t\t\t\t\t\tpreviousStyleSelection\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__","BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","Spacer","jsx","_jsx","jsxs","_jsxs","BorderLabel","props","label","hideLabelFromVision","as","children","UnconnectedBorderControl","forwardedRef","__next40pxDefaultSize","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","isStyleSettable","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","size","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalIsRenderedInSidebar","otherProps","ref","spacing","className","prefix","marginRight","marginBottom","onChange","min","width","__unstableInputWidth","__nextHasNoMarginBottom","initialPosition","max","step","includes","undefined","withInputField","BorderControl"],"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\nimport { Spacer } from '../../spacer';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tisStyleSettable,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsize,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...otherProps } ref={ forwardedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack spacing={ 4 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<Spacer marginRight={ 1 } marginBottom={ 0 }>\n\t\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\t__unstablePopoverProps={\n\t\t\t\t\t\t\t\t\t__unstablePopoverProps\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\t\tisStyleSettable={ isStyleSettable }\n\t\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\t\tpreviousStyleSelection={\n\t\t\t\t\t\t\t\t\tpreviousStyleSelection\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"],"mappings":"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","ignoreList":[]}

package/build-module/border-control/border-control/hook.js

@@ -10,6 +10,8 @@ import * as styles from '../styles';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
+
 // If either width or color are defined, the border is considered valid
 // and a border style can be set as well.
 const isValidBorder = border => {
@@ -33,6 +35,11 @@ export function useBorderControl(props) {
     __next40pxDefaultSize,
     ...otherProps
   } = useContextSystem(props, 'BorderControl');
+  maybeWarnDeprecated36pxSize({
+    componentName: 'BorderControl',
+    __next40pxDefaultSize,
+    size
+  });
   const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
   const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);
   const widthUnit = originalWidthUnit || 'px';

package/build-module/border-control/border-control/hook.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","isValidBorder","border","hasWidth","width","undefined","hasColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","otherProps","computedSize","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","isStyleSettable","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","wrapperWidth","innerWrapperClassName","widthStyle","heightStyle","wrapperHeight","innerWrapper","sliderClassName","borderSlider","inputWidth","previousStyleSelection"],"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = ( border?: Border ) => {\n\tconst hasWidth = border?.width !== undefined && border.width !== '';\n\tconst hasColor = border?.color !== undefined;\n\treturn hasWidth || hasColor;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tisCompact,\n\t\tonChange,\n\t\tenableAlpha = true,\n\t\tenableStyle = true,\n\t\tshouldSanitizeBorder = true,\n\t\tsize = 'default',\n\t\tvalue: border,\n\t\twidth,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t__next40pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst isStyleSettable = shouldSanitizeBorder\n\t\t? isValidBorder( border )\n\t\t: true;\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder && ! isValidBorder( newBorder ) ) {\n\t\t\t\tonChange( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value?: number ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tlet wrapperWidth = width;\n\tif ( isCompact ) {\n\t\t// Widths below represent the minimum usable width for compact controls.\n\t\t// Taller controls contain greater internal padding, thus greater width.\n\t\twrapperWidth = size === '__unstable-large' ? '116px' : '90px';\n\t}\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst widthStyle = !! wrapperWidth && styles.wrapperWidth;\n\t\tconst heightStyle = styles.wrapperHeight( computedSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, computedSize ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tinnerWrapperClassName,\n\t\tinputWidth: wrapperWidth,\n\t\tisStyleSettable,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\tsize: computedSize,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next40pxDefaultSize,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","maybeWarnDeprecated36pxSize","isValidBorder","border","hasWidth","width","undefined","hasColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","otherProps","componentName","computedSize","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","isStyleSettable","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","wrapperWidth","innerWrapperClassName","widthStyle","heightStyle","wrapperHeight","innerWrapper","sliderClassName","borderSlider","inputWidth","previousStyleSelection"],"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { Border, BorderControlProps } from '../types';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\n\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = ( border?: Border ) => {\n\tconst hasWidth = border?.width !== undefined && border.width !== '';\n\tconst hasColor = border?.color !== undefined;\n\treturn hasWidth || hasColor;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tisCompact,\n\t\tonChange,\n\t\tenableAlpha = true,\n\t\tenableStyle = true,\n\t\tshouldSanitizeBorder = true,\n\t\tsize = 'default',\n\t\tvalue: border,\n\t\twidth,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t__next40pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BorderControl',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t} );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst isStyleSettable = shouldSanitizeBorder\n\t\t? isValidBorder( border )\n\t\t: true;\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder && ! isValidBorder( newBorder ) ) {\n\t\t\t\tonChange( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value?: number ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tlet wrapperWidth = width;\n\tif ( isCompact ) {\n\t\t// Widths below represent the minimum usable width for compact controls.\n\t\t// Taller controls contain greater internal padding, thus greater width.\n\t\twrapperWidth = size === '__unstable-large' ? '116px' : '90px';\n\t}\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst widthStyle = !! wrapperWidth && styles.wrapperWidth;\n\t\tconst heightStyle = styles.wrapperHeight( computedSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, computedSize ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tinnerWrapperClassName,\n\t\tinputWidth: wrapperWidth,\n\t\tisStyleSettable,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\tsize: computedSize,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next40pxDefaultSize,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -50,30 +50,30 @@ const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
     if (colorObject) {
       const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
       return style ? sprintf(
-      // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
-      '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".', colorObject.name, ariaLabelValue, style) : sprintf(
-      // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
-      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
+      // 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".
+      __('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".'), colorObject.name, ariaLabelValue, style) : sprintf(
+      // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:".
+      __('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, ariaLabelValue);
     }
     if (colorValue) {
       const ariaLabelValue = getAriaLabelColorValue(colorValue);
       return style ? sprintf(
-      // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
-      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : sprintf(
-      // translators: %1$s: The color's hex code e.g: "#f00".
-      'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
+      // translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid".
+      __('Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'), ariaLabelValue, style) : sprintf(
+      // translators: %s: The color's hex code e.g: "#f00".
+      __('Border color and style picker. The currently selected color has a value of "%s".'), ariaLabelValue);
     }
     return __('Border color and style picker.');
   }
   if (colorObject) {
     return sprintf(
-    // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
-    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
+    // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00".
+    __('Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, getAriaLabelColorValue(colorObject.color));
   }
   if (colorValue) {
     return sprintf(
-    // translators: %1$s: The color's hex code e.g: "#f00".
-    'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
+    // translators: %s: The color's hex code e.g: "#f00".
+    __('Border color picker. The currently selected color has a value of "%s".'), getAriaLabelColorValue(colorValue));
   }
   return __('Border color picker.');
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__","sprintf","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","VStack","contextConnect","useBorderControlDropdown","DropdownContentWrapper","isMultiplePaletteArray","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","isStyleSettable","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","size","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","children","className","renderContent","onClose","paddingSize","spacing","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown"],"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$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\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\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$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\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\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$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\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\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$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\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$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\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: %1$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\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":[]}
+{"version":3,"names":["__","sprintf","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","VStack","contextConnect","useBorderControlDropdown","DropdownContentWrapper","isMultiplePaletteArray","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","getAriaLabelColorValue","colorValue","replace","getColorObject","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","isStyleSettable","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","size","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","onClick","variant","tooltipPosition","label","showTooltip","__next40pxDefaultSize","children","className","renderContent","onClose","paddingSize","spacing","value","onChange","clearable","popoverProps","ref","ConnectedBorderControlDropdown"],"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":[]}

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

@@ -171,7 +171,7 @@ function UnforwardedColorPalette(props, forwardedRef) {
   // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
   const displayValue = value?.replace(/^var\((.+)\)$/, '$1');
   const customColorAccessibleLabel = !!displayValue ? sprintf(
-  // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+  // translators: 1: The name of the color e.g: "vivid red". 2: The color's hex code e.g: "#f00".
   __('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : __('Custom color picker.');
   const paletteCommonProps = {
     clearColor,

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

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","clsx","useInstanceId","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","jsx","_jsx","jsxs","_jsxs","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","map","color","name","index","colordColor","isSelected","Option","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","length","spacing","children","colorPalette","id","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","ColorPalette"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"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';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, 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 { 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 '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\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, index )\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\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\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\tconst id = `${ instanceId }-${ 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 id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</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={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\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< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\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\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\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\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\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\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\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\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\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<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\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\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","clsx","useInstanceId","__","sprintf","useCallback","useMemo","useState","forwardRef","Dropdown","ColorPicker","CircularOptionPicker","VStack","Truncate","ColorHeading","DropdownContentWrapper","extractColorNameFromCurrentValue","isMultiplePaletteArray","normalizeColorValue","jsx","_jsx","jsxs","_jsxs","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","map","color","name","index","colordColor","isSelected","Option","selectedIconProps","fill","contrast","tooltipText","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","length","spacing","children","colorPalette","id","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","paddingSize","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","ColorPalette"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"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';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, 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 { 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 '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\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, index )\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\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\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\tconst id = `${ instanceId }-${ 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 id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</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={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\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< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\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\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\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\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\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\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\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__(\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\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\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<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\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\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\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"],"mappings":"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","ignoreList":[]}

package/build-module/color-palette/index.native.js

@@ -76,9 +76,8 @@ function ColorPalette({
         });
       }
     }
-    // Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.
+    // Not adding additional dependencies until the component can be refactored and updated safely.
     // Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentSegment]);
   function isSelectedCustom() {
     const isWithinColors = activeColor && allColors?.includes(activeColor);

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

@@ -1 +1 @@
-{"version":3,"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","__","sprintf","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","_defaultSettings$colo","_defaultSettings$grad","_defaultSettings$allC","_defaultSettings$allG","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","delayedScrollRef","mergedColors","Set","colors","map","color","mergedGradients","gradients","gradient","allAvailableColors","allColors","allAvailableGradients","allGradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","getColorGradientName","value","fallbackName","foundColorName","find","name","onColorPress","onContentSizeChange","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","children","accessibilityRole","style","headerText","contentContainerStyle","contentContainer","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","disableScrollViewPanResponder","scrollEventThrottle","onScrollBeginDrag","onScrollEndDrag","ref","testID","scaleValue","colorName","onPress","accessibilityState","selected","accessibilityLabel","transform","colorIndicator","onLayout","withCustomPicker","toUpperCase"],"sources":["@wordpress/components/src/color-palette/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = false,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\tconst delayedScrollRef = useRef();\n\n\tconst mergedColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.colors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst mergedGradients = [\n\t\t...new Set(\n\t\t\t( defaultSettings.gradients ?? [] ).map(\n\t\t\t\t( { gradient } ) => gradient\n\t\t\t)\n\t\t),\n\t];\n\tconst allAvailableColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst allAvailableGradients = [\n\t\t...new Set(\n\t\t\t( defaultSettings.allGradients ?? [] ).map(\n\t\t\t\t( { gradient } ) => gradient\n\t\t\t)\n\t\t),\n\t];\n\n\tconst colors = isGradientSegment ? mergedGradients : mergedColors;\n\tconst allColors = isGradientSegment\n\t\t? allAvailableGradients\n\t\t: allAvailableColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t\t// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.\n\t\t// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && allColors?.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction getColorGradientName( value ) {\n\t\tconst fallbackName = sprintf(\n\t\t\t/* translators: %s: the hex color value */\n\t\t\t__( 'Unlabeled color. %s' ),\n\t\t\tvalue\n\t\t);\n\t\tconst foundColorName = isGradientSegment\n\t\t\t? defaultSettings.gradients?.find(\n\t\t\t\t\t( gradient ) => gradient.gradient === value\n\t\t\t  )\n\t\t\t: defaultSettings.allColors?.find(\n\t\t\t\t\t( color ) => color.color === value\n\t\t\t  );\n\t\treturn foundColorName ? foundColorName?.name : fallbackName;\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tdelayedScrollRef.current = setTimeout( () => {\n\t\t\tscrollViewRef?.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScrollRef.current );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\tconst colorName = getColorGradientName( color );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\taccessibilityLabel={ colorName }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\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\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","__","sprintf","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","_defaultSettings$colo","_defaultSettings$grad","_defaultSettings$allC","_defaultSettings$allG","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","delayedScrollRef","mergedColors","Set","colors","map","color","mergedGradients","gradients","gradient","allAvailableColors","allColors","allAvailableGradients","allGradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","getColorGradientName","value","fallbackName","foundColorName","find","name","onColorPress","onContentSizeChange","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","children","accessibilityRole","style","headerText","contentContainerStyle","contentContainer","horizontal","showsHorizontalScrollIndicator","keyboardShouldPersistTaps","disableScrollViewPanResponder","scrollEventThrottle","onScrollBeginDrag","onScrollEndDrag","ref","testID","scaleValue","colorName","onPress","accessibilityState","selected","accessibilityLabel","transform","colorIndicator","onLayout","withCustomPicker","toUpperCase"],"sources":["@wordpress/components/src/color-palette/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = false,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\tconst delayedScrollRef = useRef();\n\n\tconst mergedColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.colors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst mergedGradients = [\n\t\t...new Set(\n\t\t\t( defaultSettings.gradients ?? [] ).map(\n\t\t\t\t( { gradient } ) => gradient\n\t\t\t)\n\t\t),\n\t];\n\tconst allAvailableColors = [\n\t\t...new Set(\n\t\t\t( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )\n\t\t),\n\t];\n\tconst allAvailableGradients = [\n\t\t...new Set(\n\t\t\t( defaultSettings.allGradients ?? [] ).map(\n\t\t\t\t( { gradient } ) => gradient\n\t\t\t)\n\t\t),\n\t];\n\n\tconst colors = isGradientSegment ? mergedGradients : mergedColors;\n\tconst allColors = isGradientSegment\n\t\t? allAvailableGradients\n\t\t: allAvailableColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t\t// Not adding additional dependencies until the component can be refactored and updated safely.\n\t\t// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && allColors?.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction getColorGradientName( value ) {\n\t\tconst fallbackName = sprintf(\n\t\t\t/* translators: %s: the hex color value */\n\t\t\t__( 'Unlabeled color. %s' ),\n\t\t\tvalue\n\t\t);\n\t\tconst foundColorName = isGradientSegment\n\t\t\t? defaultSettings.gradients?.find(\n\t\t\t\t\t( gradient ) => gradient.gradient === value\n\t\t\t  )\n\t\t\t: defaultSettings.allColors?.find(\n\t\t\t\t\t( color ) => color.color === value\n\t\t\t  );\n\t\treturn foundColorName ? foundColorName?.name : fallbackName;\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tdelayedScrollRef.current = setTimeout( () => {\n\t\t\tscrollViewRef?.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScrollRef.current );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\tconst colorName = getColorGradientName( color );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\taccessibilityLabel={ colorName }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\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\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}

package/build-module/color-picker/index.native.js

@@ -105,7 +105,6 @@ function ColorPicker({
     // the hook’s dependencies and running it a single time. Ideally there
     // may be a way to refactor and obviate the disabled lint rule. If not,
     // this comment should be replaced by one that explains the reasoning.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   function onButtonPress(action) {
     onNavigationBack();