@wordpress/components 19.13.0 → 19.16.0

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

@@ -1,9 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+
 import BorderControlDropdown from '../border-control-dropdown';
 import UnitControl from '../../unit-control';
 import RangeControl from '../../range-control';
@@ -25,11 +30,13 @@ const BorderLabel = props => {
   }
 
   return hideLabelFromVision ? createElement(VisuallyHidden, {
-    as: "label"
-  }, label) : createElement(StyledLabel, null, label);
+    as: "legend"
+  }, label) : createElement(StyledLabel, {
+    as: "legend"
+  }, label);
 };
 
-const BorderControl = (props, forwardedRef) => {
+const UnconnectedBorderControl = (props, forwardedRef) => {
   const {
     colors,
     disableCustomColors,
@@ -37,6 +44,7 @@ const BorderControl = (props, forwardedRef) => {
     enableStyle = true,
     hideLabelFromVision,
     innerWrapperClassName,
+    inputWidth,
     label,
     onBorderChange,
     onSliderChange,
@@ -47,7 +55,6 @@ const BorderControl = (props, forwardedRef) => {
     showDropdownHeader,
     sliderClassName,
     value: border,
-    widthControlClassName,
     widthUnit,
     widthValue,
     withSlider,
@@ -56,36 +63,41 @@ const BorderControl = (props, forwardedRef) => {
     __next36pxDefaultSize,
     ...otherProps
   } = useBorderControl(props);
-  return createElement(View, _extends({}, otherProps, {
+  return createElement(View, _extends({
+    as: "fieldset"
+  }, otherProps, {
     ref: forwardedRef
   }), createElement(BorderLabel, {
     label: label,
     hideLabelFromVision: hideLabelFromVision
   }), createElement(HStack, {
-    spacing: 3
-  }, createElement(HStack, {
-    className: innerWrapperClassName,
-    alignment: "stretch"
-  }, createElement(BorderControlDropdown, {
-    border: border,
-    colors: colors,
-    __unstablePopoverProps: __unstablePopoverProps,
-    disableCustomColors: disableCustomColors,
-    enableAlpha: enableAlpha,
-    enableStyle: enableStyle,
-    onChange: onBorderChange,
-    previousStyleSelection: previousStyleSelection,
-    showDropdownHeader: showDropdownHeader,
-    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
-    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-    __next36pxDefaultSize: __next36pxDefaultSize
-  }), createElement(UnitControl, {
-    className: widthControlClassName,
+    spacing: 3,
+    className: innerWrapperClassName
+  }, createElement(UnitControl, {
+    prefix: createElement(BorderControlDropdown, {
+      border: border,
+      colors: colors,
+      __unstablePopoverProps: __unstablePopoverProps,
+      disableCustomColors: disableCustomColors,
+      enableAlpha: enableAlpha,
+      enableStyle: enableStyle,
+      onChange: onBorderChange,
+      previousStyleSelection: previousStyleSelection,
+      showDropdownHeader: showDropdownHeader,
+      __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
+      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      __next36pxDefaultSize: __next36pxDefaultSize
+    }),
+    label: __('Border width'),
+    hideLabelFromVision: true,
     min: 0,
     onChange: onWidthChange,
     value: (border === null || border === void 0 ? void 0 : border.width) || '',
-    placeholder: placeholder
-  })), withSlider && createElement(RangeControl, {
+    placeholder: placeholder,
+    __unstableInputWidth: inputWidth
+  }), withSlider && createElement(RangeControl, {
+    label: __('Border width'),
+    hideLabelFromVision: true,
     className: sliderClassName,
     initialPosition: 0,
     max: 100,
@@ -96,7 +108,42 @@ const BorderControl = (props, forwardedRef) => {
     withInputField: false
   })));
 };
+/**
+ * The `BorderControl` brings together internal sub-components which allow users to
+ * set the various properties of a border. The first sub-component, a
+ * `BorderDropdown` contains options representing border color and style. The
+ * border width is controlled via a `UnitControl` and an optional `RangeControl`.
+ *
+ * Border radius is not covered by this control as it may be desired separate to
+ * color, style, and width. For example, the border radius may be absorbed under
+ * a "shape" abstraction.
+ *
+ * ```jsx
+ * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const colors = [
+ * 	{ name: 'Blue 20', color: '#72aee6' },
+ * 	// ...
+ * ];
+ *
+ * const MyBorderControl = () => {
+ * 	const [ border, setBorder ] = useState();
+ * 	const onChange = ( newBorder ) => setBorder( newBorder );
+ *
+ * 	return (
+ * 		<BorderControl
+ * 			colors={ colors }
+ * 			label={ __( 'Border' ) }
+ * 			onChange={ onChange }
+ * 			value={ border }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+
 
-const ConnectedBorderControl = contextConnect(BorderControl, 'BorderControl');
-export default ConnectedBorderControl;
+export const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');
+export default BorderControl;
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","BorderControl","forwardedRef","colors","disableCustomColors","enableAlpha","enableStyle","innerWrapperClassName","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","sliderClassName","value","border","widthControlClassName","widthUnit","widthValue","withSlider","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","width","includes","undefined","ConnectedBorderControl"],"mappings":"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","sourcesContent":["/**\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 { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\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=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle = true,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\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\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View { ...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={ 3 }>\n\t\t\t\t<HStack className={ innerWrapperClassName } alignment=\"stretch\">\n\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\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\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tclassName={ widthControlClassName }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\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/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControl = contextConnect( BorderControl, 'BorderControl' );\n\nexport default ConnectedBorderControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["__","BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","width","includes","undefined","BorderControl"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,4BAAlC;AACA,OAAOC,WAAP,MAAwB,oBAAxB;AACA,OAAOC,YAAP,MAAyB,qBAAzB;AACA,SAASC,MAAT,QAAuB,eAAvB;AACA,SAASC,WAAT,QAA4B,+CAA5B;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAA+B,uBAA/B;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,gBAAT,QAAiC,QAAjC;;AAIA,MAAMC,WAAW,GAAKC,KAAF,IAAyB;AAC5C,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAiCF,KAAvC;;AAEA,MAAK,CAAEC,KAAP,EAAe;AACd,WAAO,IAAP;AACA;;AAED,SAAOC,mBAAmB,GACzB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA8BD,KAA9B,CADyB,GAGzB,cAAC,WAAD;AAAa,IAAA,EAAE,EAAC;AAAhB,KAA2BA,KAA3B,CAHD;AAKA,CAZD;;AAcA,MAAME,wBAAwB,GAAG,CAChCH,KADgC,EAEhCI,YAFgC,KAG5B;AACJ,QAAM;AACLC,IAAAA,MADK;AAELC,IAAAA,mBAFK;AAGLC,IAAAA,WAHK;AAILC,IAAAA,WAAW,GAAG,IAJT;AAKLN,IAAAA,mBALK;AAMLO,IAAAA,qBANK;AAOLC,IAAAA,UAPK;AAQLT,IAAAA,KARK;AASLU,IAAAA,cATK;AAULC,IAAAA,cAVK;AAWLC,IAAAA,aAXK;AAYLC,IAAAA,WAZK;AAaLC,IAAAA,sBAbK;AAcLC,IAAAA,sBAdK;AAeLC,IAAAA,kBAfK;AAgBLC,IAAAA,eAhBK;AAiBLC,IAAAA,KAAK,EAAEC,MAjBF;AAkBLC,IAAAA,SAlBK;AAmBLC,IAAAA,UAnBK;AAoBLC,IAAAA,UApBK;AAqBLC,IAAAA,gCArBK;AAsBLC,IAAAA,iCAtBK;AAuBLC,IAAAA,qBAvBK;AAwBL,OAAGC;AAxBE,MAyBF7B,gBAAgB,CAAEE,KAAF,CAzBpB;AA2BA,SACC,cAAC,IAAD;AAAM,IAAA,EAAE,EAAC;AAAT,KAAyB2B,UAAzB;AAAsC,IAAA,GAAG,EAAGvB;AAA5C,MACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGH,KADT;AAEC,IAAA,mBAAmB,EAAGC;AAFvB,IADD,EAKC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG,CAAlB;AAAsB,IAAA,SAAS,EAAGO;AAAlC,KACC,cAAC,WAAD;AACC,IAAA,MAAM,EACL,cAAC,qBAAD;AACC,MAAA,MAAM,EAAGW,MADV;AAEC,MAAA,MAAM,EAAGf,MAFV;AAGC,MAAA,sBAAsB,EAAGU,sBAH1B;AAIC,MAAA,mBAAmB,EAAGT,mBAJvB;AAKC,MAAA,WAAW,EAAGC,WALf;AAMC,MAAA,WAAW,EAAGC,WANf;AAOC,MAAA,QAAQ,EAAGG,cAPZ;AAQC,MAAA,sBAAsB,EAAGK,sBAR1B;AASC,MAAA,kBAAkB,EAAGC,kBATtB;AAUC,MAAA,gCAAgC,EAC/BO,gCAXF;AAaC,MAAA,iCAAiC,EAChCC,iCAdF;AAgBC,MAAA,qBAAqB,EAAGC;AAhBzB,MAFF;AAqBC,IAAA,KAAK,EAAGrC,EAAE,CAAE,cAAF,CArBX;AAsBC,IAAA,mBAAmB,MAtBpB;AAuBC,IAAA,GAAG,EAAG,CAvBP;AAwBC,IAAA,QAAQ,EAAGwB,aAxBZ;AAyBC,IAAA,KAAK,EAAG,CAAAO,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEQ,KAAR,KAAiB,EAzB1B;AA0BC,IAAA,WAAW,EAAGd,WA1Bf;AA2BC,IAAA,oBAAoB,EAAGJ;AA3BxB,IADD,EA8BGa,UAAU,IACX,cAAC,YAAD;AACC,IAAA,KAAK,EAAGlC,EAAE,CAAE,cAAF,CADX;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,SAAS,EAAG6B,eAHb;AAIC,IAAA,eAAe,EAAG,CAJnB;AAKC,IAAA,GAAG,EAAG,GALP;AAMC,IAAA,GAAG,EAAG,CANP;AAOC,IAAA,QAAQ,EAAGN,cAPZ;AAQC,IAAA,IAAI,EAAG,CAAE,IAAF,EAAQ,GAAR,EAAciB,QAAd,CAAwBR,SAAxB,IAAsC,CAAtC,GAA0C,GARlD;AASC,IAAA,KAAK,EAAGC,UAAU,IAAIQ,SATvB;AAUC,IAAA,cAAc,EAAG;AAVlB,IA/BF,CALD,CADD;AAqDA,CApFD;AAsFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMC,aAAa,GAAGlC,cAAc,CAC1CM,wBAD0C,EAE1C,eAF0C,CAApC;AAKP,eAAe4B,aAAf","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 { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../types';\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\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle = true,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\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\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\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={ 3 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t\t/>\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\t__unstableInputWidth={ inputWidth }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\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/>\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 { __experimentalBorderControl as 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"]}

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

@@ -88,28 +88,25 @@ export function useBorderControl(props) {
   const classes = useMemo(() => {
     return cx(styles.borderControl, className);
   }, [className, cx]);
+  const wrapperWidth = isCompact ? '90px' : width;
   const innerWrapperClassName = useMemo(() => {
-    const wrapperWidth = isCompact ? '90px' : width;
-    const widthStyle = !!wrapperWidth && styles.wrapperWidth(wrapperWidth);
+    const widthStyle = !!wrapperWidth && styles.wrapperWidth;
     const heightStyle = styles.wrapperHeight(__next36pxDefaultSize);
     return cx(styles.innerWrapper(), widthStyle, heightStyle);
-  }, [isCompact, width, cx, __next36pxDefaultSize]);
-  const widthControlClassName = useMemo(() => {
-    return cx(styles.borderWidthControl());
-  }, [cx]);
+  }, [wrapperWidth, cx, __next36pxDefaultSize]);
   const sliderClassName = useMemo(() => {
     return cx(styles.borderSlider());
   }, [cx]);
   return { ...otherProps,
     className: classes,
     innerWrapperClassName,
+    inputWidth: wrapperWidth,
     onBorderChange,
     onSliderChange,
     onWidthChange,
     previousStyleSelection: styleSelection,
     sliderClassName,
     value: border,
-    widthControlClassName,
     widthUnit,
     widthValue,
     __next36pxDefaultSize

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","__next36pxDefaultSize","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","innerWrapperClassName","wrapperWidth","widthStyle","heightStyle","wrapperHeight","innerWrapper","widthControlClassName","borderWidthControl","sliderClassName","borderSlider","previousStyleSelection"],"mappings":"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","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 { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\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 onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\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\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: string ) => {\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\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst wrapperWidth = isCompact ? '90px' : width;\n\t\tconst widthStyle =\n\t\t\t!! wrapperWidth && styles.wrapperWidth( wrapperWidth );\n\t\tconst heightStyle = styles.wrapperHeight( __next36pxDefaultSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ isCompact, width, cx, __next36pxDefaultSize ] );\n\n\tconst widthControlClassName = useMemo( () => {\n\t\treturn cx( styles.borderWidthControl() );\n\t}, [ cx ] );\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\tinnerWrapperClassName,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\t__next36pxDefaultSize,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","__next36pxDefaultSize","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","wrapperWidth","innerWrapperClassName","widthStyle","heightStyle","wrapperHeight","innerWrapper","sliderClassName","borderSlider","inputWidth","previousStyleSelection"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAT,EAAsBC,OAAtB,EAA+BC,QAA/B,QAA+C,oBAA/C;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gCAAT,QAAiD,0BAAjD;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;;AAIA,MAAMC,cAAc,GAAKC,MAAF,IAAuB;AAC7C,QAAMC,UAAU,GAAG,CAAAD,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEE,KAAR,MAAkBC,SAAlB,IAA+BH,MAAM,CAACE,KAAP,KAAiB,EAAnE;AACA,QAAME,UAAU,GAAG,CAAAJ,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEK,KAAR,MAAkBF,SAArC,CAF6C,CAI7C;;AACA,MAAKF,UAAU,IAAIG,UAAnB,EAAgC;AAC/B,WAAOD,SAAP;AACA;;AAED,SAAOH,MAAP;AACA,CAVD;;AAYA,OAAO,SAASM,gBAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,oBAAoB,GAAG,IAJlB;AAKLC,IAAAA,KAAK,EAAEZ,MALF;AAMLE,IAAAA,KANK;AAOLW,IAAAA,qBAAqB,GAAG,KAPnB;AAQL,OAAGC;AARE,MASFjB,gBAAgB,CAAEU,KAAF,EAAS,eAAT,CATpB;AAWA,QAAM,CAAEQ,UAAF,EAAcC,iBAAd,IAAoCpB,gCAAgC,CACzEI,MADyE,aACzEA,MADyE,uBACzEA,MAAM,CAAEE,KADiE,CAA1E;AAGA,QAAMe,SAAS,GAAGD,iBAAiB,IAAI,IAAvC;AACA,QAAME,oBAAoB,GAAGH,UAAU,KAAK,CAA5C;AAEA,QAAM,CAAEI,cAAF,EAAkBC,iBAAlB,IAAwC1B,QAAQ,EAAtD;AACA,QAAM,CAAE2B,cAAF,EAAkBC,iBAAlB,IAAwC5B,QAAQ,EAAtD;AAEA,QAAM6B,cAAc,GAAG/B,WAAW,CAC/BgC,SAAF,IAA0B;AACzB,QAAKb,oBAAL,EAA4B;AAC3B,aAAOD,QAAQ,CAAEX,cAAc,CAAEyB,SAAF,CAAhB,CAAf;AACA;;AAEDd,IAAAA,QAAQ,CAAEc,SAAF,CAAR;AACA,GAPgC,EAQjC,CAAEd,QAAF,EAAYC,oBAAZ,CARiC,CAAlC;AAWA,QAAMc,aAAa,GAAGjC,WAAW,CAC9BkC,QAAF,IAAyB;AACxB,UAAMC,aAAa,GAAGD,QAAQ,KAAK,EAAb,GAAkBvB,SAAlB,GAA8BuB,QAApD;AACA,UAAM,CAAEE,WAAF,IACLhC,gCAAgC,CAAE8B,QAAF,CADjC;AAEA,UAAMG,YAAY,GAAGD,WAAW,KAAK,CAArC;AAEA,UAAME,aAAa,GAAG,EAAE,GAAG9B,MAAL;AAAaE,MAAAA,KAAK,EAAEyB;AAApB,KAAtB,CANwB,CAQxB;AACA;;AACA,QAAKE,YAAY,IAAI,CAAEX,oBAAvB,EAA8C;AAC7C;AACA;AACA;AACAE,MAAAA,iBAAiB,CAAEpB,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEK,KAAV,CAAjB;AACAiB,MAAAA,iBAAiB,CAAEtB,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAE+B,KAAV,CAAjB,CAL6C,CAO7C;;AACAD,MAAAA,aAAa,CAACzB,KAAd,GAAsBF,SAAtB;AACA2B,MAAAA,aAAa,CAACC,KAAd,GAAsB,MAAtB;AACA,KApBuB,CAsBxB;;;AACA,QAAK,CAAEF,YAAF,IAAkBX,oBAAvB,EAA8C;AAC7C;AACA;AACA,UAAKY,aAAa,CAACzB,KAAd,KAAwBF,SAA7B,EAAyC;AACxC2B,QAAAA,aAAa,CAACzB,KAAd,GAAsBc,cAAtB;AACA;;AACD,UAAKW,aAAa,CAACC,KAAd,KAAwB,MAA7B,EAAsC;AACrCD,QAAAA,aAAa,CAACC,KAAd,GAAsBV,cAAtB;AACA;AACD;;AAEDE,IAAAA,cAAc,CAAEO,aAAF,CAAd;AACA,GApC+B,EAqChC,CACC9B,MADD,EAECkB,oBAFD,EAGCC,cAHD,EAICE,cAJD,EAKCE,cALD,CArCgC,CAAjC;AA8CA,QAAMS,cAAc,GAAGxC,WAAW,CAC/BoB,KAAF,IAAsB;AACrBa,IAAAA,aAAa,CAAG,GAAGb,KAAO,GAAGK,SAAW,EAA3B,CAAb;AACA,GAHgC,EAIjC,CAAEQ,aAAF,EAAiBR,SAAjB,CAJiC,CAAlC,CA9EC,CAqFD;;AACA,QAAMgB,EAAE,GAAGnC,KAAK,EAAhB;AACA,QAAMoC,OAAO,GAAGzC,OAAO,CAAE,MAAM;AAC9B,WAAOwC,EAAE,CAAEtC,MAAM,CAACwC,aAAT,EAAwB3B,SAAxB,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,EAAayB,EAAb,CAFoB,CAAvB;AAIA,QAAMG,YAAY,GAAG3B,SAAS,GAAG,MAAH,GAAYP,KAA1C;AACA,QAAMmC,qBAAqB,GAAG5C,OAAO,CAAE,MAAM;AAC5C,UAAM6C,UAAU,GAAG,CAAC,CAAEF,YAAH,IAAmBzC,MAAM,CAACyC,YAA7C;AACA,UAAMG,WAAW,GAAG5C,MAAM,CAAC6C,aAAP,CAAsB3B,qBAAtB,CAApB;AAEA,WAAOoB,EAAE,CAAEtC,MAAM,CAAC8C,YAAP,EAAF,EAAyBH,UAAzB,EAAqCC,WAArC,CAAT;AACA,GALoC,EAKlC,CAAEH,YAAF,EAAgBH,EAAhB,EAAoBpB,qBAApB,CALkC,CAArC;AAOA,QAAM6B,eAAe,GAAGjD,OAAO,CAAE,MAAM;AACtC,WAAOwC,EAAE,CAAEtC,MAAM,CAACgD,YAAP,EAAF,CAAT;AACA,GAF8B,EAE5B,CAAEV,EAAF,CAF4B,CAA/B;AAIA,SAAO,EACN,GAAGnB,UADG;AAENN,IAAAA,SAAS,EAAE0B,OAFL;AAGNG,IAAAA,qBAHM;AAINO,IAAAA,UAAU,EAAER,YAJN;AAKNb,IAAAA,cALM;AAMNS,IAAAA,cANM;AAONP,IAAAA,aAPM;AAQNoB,IAAAA,sBAAsB,EAAExB,cARlB;AASNqB,IAAAA,eATM;AAUN9B,IAAAA,KAAK,EAAEZ,MAVD;AAWNiB,IAAAA,SAXM;AAYNF,IAAAA,UAZM;AAaNF,IAAAA;AAbM,GAAP;AAeA","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 { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\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 onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\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\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\tconst wrapperWidth = isCompact ? '90px' : width;\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst widthStyle = !! wrapperWidth && styles.wrapperWidth;\n\t\tconst heightStyle = styles.wrapperHeight( __next36pxDefaultSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, __next36pxDefaultSize ] );\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\tinnerWrapperClassName,\n\t\tinputWidth: wrapperWidth,\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\t__next36pxDefaultSize,\n\t};\n}\n"]}

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

@@ -24,6 +24,7 @@ import { VStack } from '../../v-stack';
 import { contextConnect } from '../../ui/context';
 import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
+import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
 const noop = () => undefined;
 
@@ -91,7 +92,6 @@ const BorderControlDropdown = (props, forwardedRef) => {
     onReset,
     onColorChange,
     onStyleChange,
-    popoverClassName,
     popoverContentClassName,
     popoverControlsClassName,
     resetButtonClassName,
@@ -117,7 +117,9 @@ const BorderControlDropdown = (props, forwardedRef) => {
       onClick: onToggle,
       variant: "tertiary",
       "aria-label": toggleAriaLabel,
-      position: dropdownPosition
+      position: dropdownPosition,
+      label: __('Border color and style picker'),
+      showTooltip: true
     }, createElement("span", {
       className: indicatorWrapperClassName
     }, createElement(ColorIndicator, {
@@ -130,7 +132,9 @@ const BorderControlDropdown = (props, forwardedRef) => {
     let {
       onClose
     } = _ref2;
-    return createElement(Fragment, null, createElement(VStack, {
+    return createElement(Fragment, null, createElement(DropdownContentWrapper, {
+      paddingSize: "medium"
+    }, createElement(VStack, {
       className: popoverControlsClassName,
       spacing: 6
     }, showDropdownHeader ? createElement(HStack, null, createElement(StyledLabel, null, __('Border color')), createElement(Button, {
@@ -152,21 +156,22 @@ const BorderControlDropdown = (props, forwardedRef) => {
       label: __('Style'),
       value: style,
       onChange: onStyleChange
-    })), showResetButton && createElement(Button, {
+    }))), showResetButton && createElement(DropdownContentWrapper, {
+      paddingSize: "none"
+    }, createElement(Button, {
       className: resetButtonClassName,
       variant: "tertiary",
       onClick: () => {
         onReset();
         onClose();
       }
-    }, __('Reset to default')));
+    }, __('Reset to default'))));
   };
 
   return createElement(Dropdown, _extends({
     renderToggle: renderToggle,
     renderContent: renderContent,
-    popoverProps: { ...__unstablePopoverProps,
-      className: popoverClassName
+    popoverProps: { ...__unstablePopoverProps
     }
   }, otherProps, {
     ref: forwardedRef

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","noop","undefined","getColorObject","colorValue","colors","hasMultipleColorOrigins","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverClassName","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","enableStyle","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","renderToggle","onToggle","renderContent","onClose","className","ConnectedBorderControlDropdown"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,UAAT,QAA2B,kBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,wBAAP,MAAqC,gCAArC;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,cAAP,MAA2B,uBAA3B;AACA,OAAOC,YAAP,MAAyB,qBAAzB;AACA,OAAOC,QAAP,MAAqB,gBAArB;AACA,SAASC,MAAT,QAAuB,eAAvB;AACA,SAASC,MAAT,QAAuB,eAAvB;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,wBAAT,QAAyC,QAAzC;AACA,SAASC,WAAT,QAA4B,+CAA5B;;AAUA,MAAMC,IAAI,GAAG,MAAMC,SAAnB;;AACA,MAAMC,cAAc,GAAG,CACtBC,UADsB,EAEtBC,MAFsB,EAGtBC,uBAHsB,KAIlB;AACJ,MAAK,CAAEF,UAAF,IAAgB,CAAEC,MAAvB,EAAgC;AAC/B;AACA;;AAED,MAAKC,uBAAL,EAA+B;AAC9B,QAAIC,YAAJ;AAEEF,IAAAA,MAAF,CAA4BG,IAA5B,CAAoCC,MAAF,IACjCA,MAAM,CAACJ,MAAP,CAAcG,IAAd,CAAsBE,KAAF,IAAa;AAChC,UAAKA,KAAK,CAACA,KAAN,KAAgBN,UAArB,EAAkC;AACjCG,QAAAA,YAAY,GAAGG,KAAf;AACA,eAAO,IAAP;AACA;;AAED,aAAO,KAAP;AACA,KAPD,CADD;AAWA,WAAOH,YAAP;AACA;;AAED,SAASF,MAAF,CAAsBM,IAAtB,CACJD,KAAF,IAAaA,KAAK,CAACA,KAAN,KAAgBN,UADvB,CAAP;AAGA,CA7BD;;AA+BA,MAAMQ,kBAAkB,GAAG,CAC1BR,UAD0B,EAE1BS,WAF0B,EAG1BC,KAH0B,EAI1BC,cAJ0B,KAKtB;AACJ,MAAKA,cAAL,EAAsB;AACrB,QAAKF,WAAL,EAAmB;AAClB,aAAOC,KAAK,GACTzB,OAAO,EACP;AACA,uJAFO,EAGPwB,WAAW,CAACG,IAHL,EAIPH,WAAW,CAACH,KAJL,EAKPI,KALO,CADE,GAQTzB,OAAO,EACP;AACA,+GAFO,EAGPwB,WAAW,CAACG,IAHL,EAIPH,WAAW,CAACH,KAJL,CARV;AAcA;;AAED,QAAKN,UAAL,EAAkB;AACjB,aAAOU,KAAK,GACTzB,OAAO,EACP;AACA,kIAFO,EAGPe,UAHO,EAIPU,KAJO,CADE,GAOTzB,OAAO,EACP;AACA,0FAFO,EAGPe,UAHO,CAPV;AAYA;;AAED,WAAOhB,EAAE,CAAE,gCAAF,CAAT;AACA;;AAED,MAAKyB,WAAL,EAAmB;AAClB,WAAOxB,OAAO,EACb;AACA,mGAFa,EAGbwB,WAAW,CAACG,IAHC,EAIbH,WAAW,CAACH,KAJC,CAAd;AAMA;;AAED,MAAKN,UAAL,EAAkB;AACjB,WAAOf,OAAO,EACb;AACA,8EAFa,EAGbe,UAHa,CAAd;AAKA;;AAED,SAAOhB,EAAE,CAAE,sBAAF,CAAT;AACA,CA5DD;;AA8DA,MAAM6B,qBAAqB,GAAG,CAC7BC,KAD6B,EAE7BC,YAF6B,KAGzB;AACJ,QAAM;AACLC,IAAAA,gCADK;AAELC,IAAAA,iCAFK;AAGLC,IAAAA,MAHK;AAILjB,IAAAA,MAJK;AAKLkB,IAAAA,mBALK;AAMLC,IAAAA,WANK;AAOLC,IAAAA,kBAPK;AAQLC,IAAAA,yBARK;AASLC,IAAAA,OATK;AAULC,IAAAA,aAVK;AAWLC,IAAAA,aAXK;AAYLC,IAAAA,gBAZK;AAaLC,IAAAA,uBAbK;AAcLC,IAAAA,wBAdK;AAeLC,IAAAA,oBAfK;AAgBLC,IAAAA,kBAhBK;AAiBLC,IAAAA,WAAW,GAAG,IAjBT;AAkBLC,IAAAA,sBAlBK;AAmBL,OAAGC;AAnBE,MAoBFtC,wBAAwB,CAAEmB,KAAF,CApB5B;AAsBA,QAAM;AAAER,IAAAA,KAAF;AAASI,IAAAA;AAAT,MAAmBQ,MAAM,IAAI,EAAnC;AACA,QAAMT,WAAW,GAAGV,cAAc,CACjCO,KADiC,EAEjCL,MAFiC,EAGjC,CAAC,CAAEe,gCAH8B,CAAlC;AAMA,QAAMkB,eAAe,GAAG1B,kBAAkB,CACzCF,KADyC,EAEzCG,WAFyC,EAGzCC,KAHyC,EAIzCqB,WAJyC,CAA1C;AAOA,QAAMI,eAAe,GAAG7B,KAAK,IAAMI,KAAK,IAAIA,KAAK,KAAK,MAAtD;AACA,QAAM0B,gBAAgB,GAAGnB,iCAAiC,GACvD,aADuD,GAEvDnB,SAFH;;AAIA,QAAMuC,YAAY,GAAG;AAAA,QAAE;AAAEC,MAAAA,QAAQ,GAAGzC;AAAb,KAAF;AAAA,WACpB,cAAC,MAAD;AACC,MAAA,OAAO,EAAGyC,QADX;AAEC,MAAA,OAAO,EAAC,UAFT;AAGC,oBAAaJ,eAHd;AAIC,MAAA,QAAQ,EAAGE;AAJZ,OAMC;AAAM,MAAA,SAAS,EAAGd;AAAlB,OACC,cAAC,cAAD;AACC,MAAA,SAAS,EAAGD,kBADb;AAEC,MAAA,UAAU,EAAGf;AAFd,MADD,CAND,CADoB;AAAA,GAArB;;AAgBA,QAAMiC,aAAa,GAAG;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WACrB,8BACC,cAAC,MAAD;AAAQ,MAAA,SAAS,EAAGZ,wBAApB;AAA+C,MAAA,OAAO,EAAG;AAAzD,OACGE,kBAAkB,GACnB,cAAC,MAAD,QACC,cAAC,WAAD,QAAe9C,EAAE,CAAE,cAAF,CAAjB,CADD,EAEC,cAAC,MAAD;AACC,MAAA,OAAO,MADR;AAEC,MAAA,KAAK,EAAGA,EAAE,CAAE,oBAAF,CAFX;AAGC,MAAA,IAAI,EAAGE,UAHR;AAIC,MAAA,OAAO,EAAGsD;AAJX,MAFD,CADmB,GAUhB1C,SAXL,EAYC,cAAC,YAAD;AACC,MAAA,SAAS,EAAG6B,uBADb;AAEC,MAAA,KAAK,EAAGrB,KAFT;AAGC,MAAA,QAAQ,EAAGkB,aAHZ;AAIQvB,MAAAA,MAJR;AAIgBkB,MAAAA,mBAJhB;AAKC,MAAA,gCAAgC,EAC/BH,gCANF;AAQC,MAAA,iCAAiC,EAChCC,iCATF;AAWC,MAAA,SAAS,EAAG,KAXb;AAYC,MAAA,WAAW,EAAGG;AAZf,MAZD,EA0BGW,WAAW,IACZ,cAAC,wBAAD;AACC,MAAA,KAAK,EAAG/C,EAAE,CAAE,OAAF,CADX;AAEC,MAAA,KAAK,EAAG0B,KAFT;AAGC,MAAA,QAAQ,EAAGe;AAHZ,MA3BF,CADD,EAmCGU,eAAe,IAChB,cAAC,MAAD;AACC,MAAA,SAAS,EAAGN,oBADb;AAEC,MAAA,OAAO,EAAC,UAFT;AAGC,MAAA,OAAO,EAAG,MAAM;AACfN,QAAAA,OAAO;AACPiB,QAAAA,OAAO;AACP;AANF,OAQGxD,EAAE,CAAE,kBAAF,CARL,CApCF,CADqB;AAAA,GAAtB;;AAmDA,SACC,cAAC,QAAD;AACC,IAAA,YAAY,EAAGqD,YADhB;AAEC,IAAA,aAAa,EAAGE,aAFjB;AAGC,IAAA,YAAY,EAAG,EACd,GAAGP,sBADW;AAEdS,MAAAA,SAAS,EAAEf;AAFG;AAHhB,KAOMO,UAPN;AAQC,IAAA,GAAG,EAAGlB;AARP,KADD;AAYA,CA5HD;;AA8HA,MAAM2B,8BAA8B,GAAGhD,cAAc,CACpDmB,qBADoD,EAEpD,uBAFoD,CAArD;AAKA,eAAe6B,8BAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\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 { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\n\nimport type {\n\tColor,\n\tColorOrigin,\n\tColors,\n\tDropdownProps,\n\tPopoverProps,\n} from '../types';\n\nconst noop = () => undefined;\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: Colors | undefined,\n\thasMultipleColorOrigins: boolean\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( hasMultipleColorOrigins ) {\n\t\tlet matchedColor;\n\n\t\t( colors as ColorOrigin[] ).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\treturn ( colors as Color[] ).find(\n\t\t( color ) => color.color === colorValue\n\t);\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: Color | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\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\tcolorObject.color,\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\tcolorObject.color\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( 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\tcolorValue,\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\tcolorValue\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\tcolorObject.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\tcolorValue\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__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverClassName,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\tenableStyle = true,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject(\n\t\tcolor,\n\t\tcolors,\n\t\t!! __experimentalHasMultipleOrigins\n\t);\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 = ( { onToggle = noop } ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\tposition={ dropdownPosition }\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 = ( { onClose }: PopoverProps ) => (\n\t\t<>\n\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t) : undefined }\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\tvalue={ color }\n\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t}\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t\t{ enableStyle && (\n\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t\t{ showResetButton && (\n\t\t\t\t<Button\n\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonReset();\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t</Button>\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\tclassName: popoverClassName,\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"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["__","sprintf","closeSmall","BorderControlStylePicker","Button","ColorIndicator","ColorPalette","Dropdown","HStack","VStack","contextConnect","useBorderControlDropdown","StyledLabel","DropdownContentWrapper","noop","undefined","getColorObject","colorValue","colors","hasMultipleColorOrigins","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","enableStyle","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","renderToggle","onToggle","renderContent","onClose","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\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 { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type {\n\tColor,\n\tColorOrigin,\n\tColors,\n\tDropdownProps,\n\tPopoverProps,\n} from '../types';\n\nconst noop = () => undefined;\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: Colors | undefined,\n\thasMultipleColorOrigins: boolean\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( hasMultipleColorOrigins ) {\n\t\tlet matchedColor;\n\n\t\t( colors as ColorOrigin[] ).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\treturn ( colors as Color[] ).find(\n\t\t( color ) => color.color === colorValue\n\t);\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: Color | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\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\tcolorObject.color,\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\tcolorObject.color\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( 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\tcolorValue,\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\tcolorValue\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\tcolorObject.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\tcolorValue\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__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\tenableStyle = true,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject(\n\t\tcolor,\n\t\tcolors,\n\t\t!! __experimentalHasMultipleOrigins\n\t);\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 = ( { onToggle = noop } ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\tposition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\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 = ( { onClose }: PopoverProps ) => (\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{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\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__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\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 && (\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>\n\t\t\t\t\t\t{ __( 'Reset to default' ) }\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"]}

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

@@ -59,9 +59,6 @@ export function useBorderControlDropdown(props) {
   const indicatorWrapperClassName = useMemo(() => {
     return cx(styles.colorIndicatorWrapper(border, __next36pxDefaultSize));
   }, [border, cx, __next36pxDefaultSize]);
-  const popoverClassName = useMemo(() => {
-    return cx(styles.borderControlPopover);
-  }, [cx]);
   const popoverControlsClassName = useMemo(() => {
     return cx(styles.borderControlPopoverControls);
   }, [cx]);
@@ -80,7 +77,6 @@ export function useBorderControlDropdown(props) {
     onColorChange,
     onStyleChange,
     onReset,
-    popoverClassName,
     popoverContentClassName,
     popoverControlsClassName,
     resetButtonClassName

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useMemo","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","useBorderControlDropdown","props","border","className","colors","onChange","previousStyleSelection","__next36pxDefaultSize","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverClassName","borderControlPopover","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown(), className );\n\t}, [ className, cx ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx(\n\t\t\tstyles.colorIndicatorWrapper( border, __next36pxDefaultSize )\n\t\t);\n\t}, [ border, cx, __next36pxDefaultSize ] );\n\n\tconst popoverClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopover );\n\t}, [ cx ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverClassName,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useMemo","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","useBorderControlDropdown","props","border","className","colors","onChange","previousStyleSelection","__next36pxDefaultSize","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","borderControlDropdown","indicatorClassName","borderColorIndicator","indicatorWrapperClassName","colorIndicatorWrapper","popoverControlsClassName","borderControlPopoverControls","popoverContentClassName","borderControlPopoverContent","resetButtonClassName","resetButton"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { DropdownProps } from '../types';\n\nexport function useBorderControlDropdown(\n\tprops: WordPressComponentProps< DropdownProps, 'div' >\n) {\n\tconst {\n\t\tborder,\n\t\tclassName,\n\t\tcolors,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControlDropdown' );\n\n\tconst [ widthValue ] = parseQuantityAndUnitFromRawValue( border?.width );\n\tconst hasZeroWidth = widthValue === 0;\n\n\tconst onColorChange = ( color?: string ) => {\n\t\tconst style =\n\t\t\tborder?.style === 'none' ? previousStyleSelection : border?.style;\n\t\tconst width = hasZeroWidth && !! color ? '1px' : border?.width;\n\n\t\tonChange( { color, style, width } );\n\t};\n\n\tconst onStyleChange = ( style?: string ) => {\n\t\tconst width = hasZeroWidth && !! style ? '1px' : border?.width;\n\t\tonChange( { ...border, style, width } );\n\t};\n\n\tconst onReset = () => {\n\t\tonChange( {\n\t\t\t...border,\n\t\t\tcolor: undefined,\n\t\t\tstyle: undefined,\n\t\t} );\n\t};\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControlDropdown(), className );\n\t}, [ className, cx ] );\n\n\tconst indicatorClassName = useMemo( () => {\n\t\treturn cx( styles.borderColorIndicator );\n\t}, [ cx ] );\n\n\tconst indicatorWrapperClassName = useMemo( () => {\n\t\treturn cx(\n\t\t\tstyles.colorIndicatorWrapper( border, __next36pxDefaultSize )\n\t\t);\n\t}, [ border, cx, __next36pxDefaultSize ] );\n\n\tconst popoverControlsClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverControls );\n\t}, [ cx ] );\n\n\tconst popoverContentClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopoverContent );\n\t}, [ cx ] );\n\n\tconst resetButtonClassName = useMemo( () => {\n\t\treturn cx( styles.resetButton );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tborder,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tonReset,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t};\n}\n"]}