@wordpress/components 19.10.0 → 19.11.0

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

@@ -45,6 +45,7 @@ function useBorderControl(props) {
     shouldSanitizeBorder = true,
     value: border,
     width,
+    __next36pxDefaultSize = false,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'BorderControl');
   const [widthValue, originalWidthUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(border === null || border === void 0 ? void 0 : border.width);
@@ -105,8 +106,9 @@ function useBorderControl(props) {
   const innerWrapperClassName = (0, _element.useMemo)(() => {
     const wrapperWidth = isCompact ? '90px' : width;
     const widthStyle = !!wrapperWidth && styles.wrapperWidth(wrapperWidth);
-    return cx(styles.innerWrapper(), widthStyle);
-  }, [isCompact, width, cx]);
+    const heightStyle = styles.wrapperHeight(__next36pxDefaultSize);
+    return cx(styles.innerWrapper(), widthStyle, heightStyle);
+  }, [isCompact, width, cx, __next36pxDefaultSize]);
   const widthControlClassName = (0, _element.useMemo)(() => {
     return cx(styles.borderWidthControl());
   }, [cx]);
@@ -124,7 +126,8 @@ function useBorderControl(props) {
     value: border,
     widthControlClassName,
     widthUnit,
-    widthValue
+    widthValue,
+    __next36pxDefaultSize
   };
 }
 //# sourceMappingURL=hook.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","styles","borderControl","innerWrapperClassName","wrapperWidth","widthStyle","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...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, sanitizeBorder ]\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 ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\tnewWidth\n\t\t\t);\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[ border, hadPreviousZeroWidth, onBorderChange ]\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\n\t\treturn cx( styles.innerWrapper(), widthStyle );\n\t}, [ isCompact, width, cx ] );\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};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["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","styles","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, sanitizeBorder ]\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 ] = parseQuantityAndUnitFromRawValue(\n\t\t\t\tnewWidth\n\t\t\t);\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[ border, hadPreviousZeroWidth, onBorderChange ]\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"]}

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

@@ -118,6 +118,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
     resetButtonClassName,
     showDropdownHeader,
     enableStyle = true,
+    __unstablePopoverProps,
     ...otherProps
   } = (0, _hook.useBorderControlDropdown)(props);
   const {
@@ -126,6 +127,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
   } = border || {};
   const colorObject = getColorObject(color, colors, !!__experimentalHasMultipleOrigins);
   const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
+  const showResetButton = color || style && style !== 'none';
   const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
 
   const renderToggle = _ref => {
@@ -171,7 +173,7 @@ const BorderControlDropdown = (props, forwardedRef) => {
       label: (0, _i18n.__)('Style'),
       value: style,
       onChange: onStyleChange
-    })), (0, _element.createElement)(_button.default, {
+    })), showResetButton && (0, _element.createElement)(_button.default, {
       className: resetButtonClassName,
       variant: "tertiary",
       onClick: () => {
@@ -184,7 +186,9 @@ const BorderControlDropdown = (props, forwardedRef) => {
   return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
     renderToggle: renderToggle,
     renderContent: renderContent,
-    contentClassName: popoverClassName
+    popoverProps: { ...__unstablePopoverProps,
+      className: popoverClassName
+    }
   }, otherProps, {
     ref: forwardedRef
   }));

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["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","otherProps","toggleAriaLabel","dropdownPosition","renderToggle","onToggle","renderContent","onClose","closeSmall","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';\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...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 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<Button\n\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonReset();\n\t\t\t\t\tonClose();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t</Button>\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\tcontentClassName={ popoverClassName }\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":["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","closeSmall","className","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';\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"]}

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

@@ -31,9 +31,9 @@ function useBorderControlDropdown(props) {
     border,
     className,
     colors,
-    contentClassName,
     onChange,
     previousStyleSelection,
+    __next36pxDefaultSize,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'BorderControlDropdown');
   const [widthValue] = (0, _utils.parseQuantityAndUnitFromRawValue)(border === null || border === void 0 ? void 0 : border.width);
@@ -73,11 +73,11 @@ function useBorderControlDropdown(props) {
     return cx(styles.borderColorIndicator);
   }, [cx]);
   const indicatorWrapperClassName = (0, _element.useMemo)(() => {
-    return cx(styles.colorIndicatorWrapper(border));
-  }, [border, cx]);
+    return cx(styles.colorIndicatorWrapper(border, __next36pxDefaultSize));
+  }, [border, cx, __next36pxDefaultSize]);
   const popoverClassName = (0, _element.useMemo)(() => {
-    return cx(styles.borderControlPopover, contentClassName);
-  }, [cx, contentClassName]);
+    return cx(styles.borderControlPopover);
+  }, [cx]);
   const popoverControlsClassName = (0, _element.useMemo)(() => {
     return cx(styles.borderControlPopoverControls);
   }, [cx]);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/hook.ts"],"names":["useBorderControlDropdown","props","border","className","colors","contentClassName","onChange","previousStyleSelection","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","styles","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\tcontentClassName,\n\t\tonChange,\n\t\tpreviousStyleSelection,\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( styles.colorIndicatorWrapper( border ) );\n\t}, [ border, cx ] );\n\n\tconst popoverClassName = useMemo( () => {\n\t\treturn cx( styles.borderControlPopover, contentClassName );\n\t}, [ cx, contentClassName ] );\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":["useBorderControlDropdown","props","border","className","colors","onChange","previousStyleSelection","__next36pxDefaultSize","otherProps","widthValue","width","hasZeroWidth","onColorChange","color","style","onStyleChange","onReset","undefined","cx","classes","styles","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"]}