@wordpress/components 24.0.0 → 25.1.0

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

@@ -27,6 +27,13 @@ import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 import { isMultiplePaletteArray } from '../../color-palette/utils';
 
+const getAriaLabelColorValue = colorValue => {
+  const isHex = colorValue.startsWith('#'); // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+
+  const displayValue = colorValue.replace(/^var\((.+)\)$/, '$1');
+  return isHex ? displayValue.split('').join('-') : displayValue;
+};
+
 const getColorObject = (colorValue, colors) => {
   if (!colorValue || !colors) {
     return;
@@ -53,28 +60,30 @@ const getColorObject = (colorValue, colors) => {
 const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
   if (isStyleEnabled) {
     if (colorObject) {
-      return style ? sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
-      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, colorObject.color, style) : sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
-      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
+      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
+      return style ? sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %3$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
     }
 
     if (colorValue) {
-      return style ? sprintf( // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
-      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', colorValue, style) : sprintf( // translators: %1$s: The color's hex code e.g.: "#f00:".
-      'Border color and style picker. The currently selected color has a value of "%1$s".', colorValue);
+      const ariaLabelValue = getAriaLabelColorValue(colorValue);
+      return style ? sprintf( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %2$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : sprintf( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+      'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
     }
 
     return __('Border color and style picker.');
   }
 
   if (colorObject) {
-    return sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
-    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
+    return sprintf( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
   }
 
   if (colorValue) {
-    return sprintf( // translators: %1$s: The color's hex code e.g.: "#f00:".
-    'Border color picker. The currently selected color has a value of "%1$s".', colorValue);
+    return sprintf( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+    'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
   }
 
   return __('Border color picker.');
@@ -109,63 +118,57 @@ const BorderControlDropdown = (props, forwardedRef) => {
   const showResetButton = color || style && style !== 'none';
   const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
 
-  const renderToggle = _ref => {
-    let {
-      onToggle
-    } = _ref;
-    return createElement(Button, {
-      onClick: onToggle,
-      variant: "tertiary",
-      "aria-label": toggleAriaLabel,
-      tooltipPosition: dropdownPosition,
-      label: __('Border color and style picker'),
-      showTooltip: true
-    }, createElement("span", {
-      className: indicatorWrapperClassName
-    }, createElement(ColorIndicator, {
-      className: indicatorClassName,
-      colorValue: color
-    })));
-  };
-
-  const renderContent = _ref2 => {
-    let {
-      onClose
-    } = _ref2;
-    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, {
-      isSmall: true,
-      label: __('Close border color'),
-      icon: closeSmall,
-      onClick: onClose
-    })) : undefined, createElement(ColorPalette, {
-      className: popoverContentClassName,
-      value: color,
-      onChange: onColorChange,
-      colors,
-      disableCustomColors,
-      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-      clearable: false,
-      enableAlpha: enableAlpha
-    }), enableStyle && createElement(BorderControlStylePicker, {
-      label: __('Style'),
-      value: style,
-      onChange: onStyleChange
-    }))), showResetButton && createElement(DropdownContentWrapper, {
-      paddingSize: "none"
-    }, createElement(Button, {
-      className: resetButtonClassName,
-      variant: "tertiary",
-      onClick: () => {
-        onReset();
-        onClose();
-      }
-    }, __('Reset to default'))));
-  };
+  const renderToggle = ({
+    onToggle
+  }) => createElement(Button, {
+    onClick: onToggle,
+    variant: "tertiary",
+    "aria-label": toggleAriaLabel,
+    tooltipPosition: dropdownPosition,
+    label: __('Border color and style picker'),
+    showTooltip: true
+  }, createElement("span", {
+    className: indicatorWrapperClassName
+  }, createElement(ColorIndicator, {
+    className: indicatorClassName,
+    colorValue: color
+  })));
+
+  const renderContent = ({
+    onClose
+  }) => createElement(Fragment, null, createElement(DropdownContentWrapper, {
+    paddingSize: "medium"
+  }, createElement(VStack, {
+    className: popoverControlsClassName,
+    spacing: 6
+  }, showDropdownHeader ? createElement(HStack, null, createElement(StyledLabel, null, __('Border color')), createElement(Button, {
+    isSmall: true,
+    label: __('Close border color'),
+    icon: closeSmall,
+    onClick: onClose
+  })) : undefined, createElement(ColorPalette, {
+    className: popoverContentClassName,
+    value: color,
+    onChange: onColorChange,
+    colors,
+    disableCustomColors,
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    clearable: false,
+    enableAlpha: enableAlpha
+  }), enableStyle && createElement(BorderControlStylePicker, {
+    label: __('Style'),
+    value: style,
+    onChange: onStyleChange
+  }))), showResetButton && createElement(DropdownContentWrapper, {
+    paddingSize: "none"
+  }, createElement(Button, {
+    className: resetButtonClassName,
+    variant: "tertiary",
+    onClick: () => {
+      onReset();
+      onClose();
+    }
+  }, __('Reset to default'))));
 
   return createElement(Dropdown, _extends({
     renderToggle: renderToggle,

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","DropdownContentWrapper","isMultiplePaletteArray","getColorObject","colorValue","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","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 { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\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__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\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\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ 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: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ 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__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"]}
+{"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","isMultiplePaletteArray","getAriaLabelColorValue","colorValue","isHex","startsWith","displayValue","replace","split","join","getColorObject","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","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 { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\tconst isHex = colorValue.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = colorValue.replace( /^var\\((.+)\\)$/, '$1' );\n\n\treturn isHex ? displayValue.split( '' ).join( '-' ) : displayValue;\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ 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: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ 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__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

@@ -23,12 +23,12 @@ export function useBorderControlDropdown(props) {
     __experimentalIsRenderedInSidebar = false,
     ...otherProps
   } = useContextSystem(props, 'BorderControlDropdown');
-  const [widthValue] = parseQuantityAndUnitFromRawValue(border === null || border === void 0 ? void 0 : border.width);
+  const [widthValue] = parseQuantityAndUnitFromRawValue(border?.width);
   const hasZeroWidth = widthValue === 0;
 
   const onColorChange = color => {
-    const style = (border === null || border === void 0 ? void 0 : border.style) === 'none' ? previousStyleSelection : border === null || border === void 0 ? void 0 : border.style;
-    const width = hasZeroWidth && !!color ? '1px' : border === null || border === void 0 ? void 0 : border.width;
+    const style = border?.style === 'none' ? previousStyleSelection : border?.style;
+    const width = hasZeroWidth && !!color ? '1px' : border?.width;
     onChange({
       color,
       style,
@@ -37,7 +37,7 @@ export function useBorderControlDropdown(props) {
   };
 
   const onStyleChange = style => {
-    const width = hasZeroWidth && !!style ? '1px' : border === null || border === void 0 ? void 0 : border.width;
+    const width = hasZeroWidth && !!style ? '1px' : border?.width;
     onChange({ ...border,
       style,
       width

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","enableAlpha","enableStyle","onChange","previousStyleSelection","size","__experimentalIsRenderedInSidebar","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\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\tsize = 'default',\n\t\t__experimentalIsRenderedInSidebar = false,\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( size ), className );\n\t}, [ className, cx, size ] );\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, size ) );\n\t}, [ border, cx, size ] );\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\tenableAlpha,\n\t\tenableStyle,\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\t__experimentalIsRenderedInSidebar,\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","enableAlpha","enableStyle","onChange","previousStyleSelection","size","__experimentalIsRenderedInSidebar","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\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tonChange,\n\t\tpreviousStyleSelection,\n\t\tsize = 'default',\n\t\t__experimentalIsRenderedInSidebar = false,\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( size ), className );\n\t}, [ className, cx, size ] );\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, size ) );\n\t}, [ border, cx, size ] );\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\tenableAlpha,\n\t\tenableStyle,\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\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"]}

package/build-module/box-control/all-input-control.js

@@ -9,18 +9,17 @@ import { LABELS, applyValueToSides, getAllValue, isValuesMixed, isValuesDefined
 
 const noop = () => {};
 
-export default function AllInputControl(_ref) {
-  let {
-    onChange = noop,
-    onFocus = noop,
-    onHoverOn = noop,
-    onHoverOff = noop,
-    values,
-    sides,
-    selectedUnits,
-    setSelectedUnits,
-    ...props
-  } = _ref;
+export default function AllInputControl({
+  onChange = noop,
+  onFocus = noop,
+  onHoverOn = noop,
+  onHoverOff = noop,
+  values,
+  sides,
+  selectedUnits,
+  setSelectedUnits,
+  ...props
+}) {
   const allValue = getAllValue(values, selectedUnits, sides);
   const hasValues = isValuesDefined(values);
   const isMixed = hasValues && isValuesMixed(values, selectedUnits, sides);

package/build-module/box-control/all-input-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"names":["UnitControl","LABELS","applyValueToSides","getAllValue","isValuesMixed","isValuesDefined","noop","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","hasValues","isMixed","allPlaceholder","mixed","undefined","handleOnFocus","event","side","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","handleOnUnitChange","unit","newUnits","handleOnHoverOn","top","bottom","left","right","handleOnHoverOff"],"mappings":";;;AAAA;AACA;AACA;AAGA,OAAOA,WAAP,MAAwB,gBAAxB;AACA,SACCC,MADD,EAECC,iBAFD,EAGCC,WAHD,EAICC,aAJD,EAKCC,eALD,QAMO,SANP;;AAQA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,eAAT,OAUkB;AAAA,MAVQ;AACxCC,IAAAA,QAAQ,GAAGF,IAD6B;AAExCG,IAAAA,OAAO,GAAGH,IAF8B;AAGxCI,IAAAA,SAAS,GAAGJ,IAH4B;AAIxCK,IAAAA,UAAU,GAAGL,IAJ2B;AAKxCM,IAAAA,MALwC;AAMxCC,IAAAA,KANwC;AAOxCC,IAAAA,aAPwC;AAQxCC,IAAAA,gBARwC;AASxC,OAAGC;AATqC,GAUR;AAChC,QAAMC,QAAQ,GAAGd,WAAW,CAAES,MAAF,EAAUE,aAAV,EAAyBD,KAAzB,CAA5B;AACA,QAAMK,SAAS,GAAGb,eAAe,CAAEO,MAAF,CAAjC;AACA,QAAMO,OAAO,GAAGD,SAAS,IAAId,aAAa,CAAEQ,MAAF,EAAUE,aAAV,EAAyBD,KAAzB,CAA1C;AACA,QAAMO,cAAc,GAAGD,OAAO,GAAGlB,MAAM,CAACoB,KAAV,GAAkBC,SAAhD;;AAEA,QAAMC,aAA0D,GAC/DC,KADkE,IAE9D;AACJf,IAAAA,OAAO,CAAEe,KAAF,EAAS;AAAEC,MAAAA,IAAI,EAAE;AAAR,KAAT,CAAP;AACA,GAJD;;AAMA,QAAMC,cAA8C,GAAKC,IAAF,IAAY;AAClE,UAAMC,SAAS,GAAGD,IAAI,KAAKL,SAAT,IAAsB,CAAEO,KAAK,CAAEC,UAAU,CAAEH,IAAF,CAAZ,CAA/C;AACA,UAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAH,GAAUL,SAArC;AACA,UAAMU,UAAU,GAAG9B,iBAAiB,CAAEU,MAAF,EAAUmB,SAAV,EAAqBlB,KAArB,CAApC;AAEAL,IAAAA,QAAQ,CAAEwB,UAAF,CAAR;AACA,GAND,CAZgC,CAoBhC;AACA;;;AACA,QAAMC,kBAAsD,GAAKC,IAAF,IAAY;AAC1E,UAAMC,QAAQ,GAAGjC,iBAAiB,CAAEY,aAAF,EAAiBoB,IAAjB,EAAuBrB,KAAvB,CAAlC;AACAE,IAAAA,gBAAgB,CAAEoB,QAAF,CAAhB;AACA,GAHD;;AAKA,QAAMC,eAAe,GAAG,MAAM;AAC7B1B,IAAAA,SAAS,CAAE;AACV2B,MAAAA,GAAG,EAAE,IADK;AAEVC,MAAAA,MAAM,EAAE,IAFE;AAGVC,MAAAA,IAAI,EAAE,IAHI;AAIVC,MAAAA,KAAK,EAAE;AAJG,KAAF,CAAT;AAMA,GAPD;;AASA,QAAMC,gBAAgB,GAAG,MAAM;AAC9B9B,IAAAA,UAAU,CAAE;AACX0B,MAAAA,GAAG,EAAE,KADM;AAEXC,MAAAA,MAAM,EAAE,KAFG;AAGXC,MAAAA,IAAI,EAAE,KAHK;AAIXC,MAAAA,KAAK,EAAE;AAJI,KAAF,CAAV;AAMA,GAPD;;AASA,SACC,cAAC,WAAD,eACMxB,KADN;AAEC,IAAA,YAAY,EAAGG,OAFhB;AAGC,IAAA,MAAM,MAHP;AAIC,IAAA,KAAK,EAAGF,QAJT;AAKC,IAAA,QAAQ,EAAGS,cALZ;AAMC,IAAA,YAAY,EAAGO,kBANhB;AAOC,IAAA,OAAO,EAAGV,aAPX;AAQC,IAAA,SAAS,EAAGa,eARb;AASC,IAAA,UAAU,EAAGK,gBATd;AAUC,IAAA,WAAW,EAAGrB;AAVf,KADD;AAcA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { BoxControlInputControlProps } from './types';\nimport UnitControl from './unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst handleOnHoverOn = () => {\n\t\tonHoverOn( {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true,\n\t\t} );\n\t};\n\n\tconst handleOnHoverOff = () => {\n\t\tonHoverOff( {\n\t\t\ttop: false,\n\t\t\tbottom: false,\n\t\t\tleft: false,\n\t\t\tright: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonHoverOn={ handleOnHoverOn }\n\t\t\tonHoverOff={ handleOnHoverOff }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"names":["UnitControl","LABELS","applyValueToSides","getAllValue","isValuesMixed","isValuesDefined","noop","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","hasValues","isMixed","allPlaceholder","mixed","undefined","handleOnFocus","event","side","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","handleOnUnitChange","unit","newUnits","handleOnHoverOn","top","bottom","left","right","handleOnHoverOff"],"mappings":";;;AAAA;AACA;AACA;AAGA,OAAOA,WAAP,MAAwB,gBAAxB;AACA,SACCC,MADD,EAECC,iBAFD,EAGCC,WAHD,EAICC,aAJD,EAKCC,eALD,QAMO,SANP;;AAQA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,QAAQ,GAAGF,IAD6B;AAExCG,EAAAA,OAAO,GAAGH,IAF8B;AAGxCI,EAAAA,SAAS,GAAGJ,IAH4B;AAIxCK,EAAAA,UAAU,GAAGL,IAJ2B;AAKxCM,EAAAA,MALwC;AAMxCC,EAAAA,KANwC;AAOxCC,EAAAA,aAPwC;AAQxCC,EAAAA,gBARwC;AASxC,KAAGC;AATqC,CAA1B,EAUkB;AAChC,QAAMC,QAAQ,GAAGd,WAAW,CAAES,MAAF,EAAUE,aAAV,EAAyBD,KAAzB,CAA5B;AACA,QAAMK,SAAS,GAAGb,eAAe,CAAEO,MAAF,CAAjC;AACA,QAAMO,OAAO,GAAGD,SAAS,IAAId,aAAa,CAAEQ,MAAF,EAAUE,aAAV,EAAyBD,KAAzB,CAA1C;AACA,QAAMO,cAAc,GAAGD,OAAO,GAAGlB,MAAM,CAACoB,KAAV,GAAkBC,SAAhD;;AAEA,QAAMC,aAA0D,GAC/DC,KADkE,IAE9D;AACJf,IAAAA,OAAO,CAAEe,KAAF,EAAS;AAAEC,MAAAA,IAAI,EAAE;AAAR,KAAT,CAAP;AACA,GAJD;;AAMA,QAAMC,cAA8C,GAAKC,IAAF,IAAY;AAClE,UAAMC,SAAS,GAAGD,IAAI,KAAKL,SAAT,IAAsB,CAAEO,KAAK,CAAEC,UAAU,CAAEH,IAAF,CAAZ,CAA/C;AACA,UAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAH,GAAUL,SAArC;AACA,UAAMU,UAAU,GAAG9B,iBAAiB,CAAEU,MAAF,EAAUmB,SAAV,EAAqBlB,KAArB,CAApC;AAEAL,IAAAA,QAAQ,CAAEwB,UAAF,CAAR;AACA,GAND,CAZgC,CAoBhC;AACA;;;AACA,QAAMC,kBAAsD,GAAKC,IAAF,IAAY;AAC1E,UAAMC,QAAQ,GAAGjC,iBAAiB,CAAEY,aAAF,EAAiBoB,IAAjB,EAAuBrB,KAAvB,CAAlC;AACAE,IAAAA,gBAAgB,CAAEoB,QAAF,CAAhB;AACA,GAHD;;AAKA,QAAMC,eAAe,GAAG,MAAM;AAC7B1B,IAAAA,SAAS,CAAE;AACV2B,MAAAA,GAAG,EAAE,IADK;AAEVC,MAAAA,MAAM,EAAE,IAFE;AAGVC,MAAAA,IAAI,EAAE,IAHI;AAIVC,MAAAA,KAAK,EAAE;AAJG,KAAF,CAAT;AAMA,GAPD;;AASA,QAAMC,gBAAgB,GAAG,MAAM;AAC9B9B,IAAAA,UAAU,CAAE;AACX0B,MAAAA,GAAG,EAAE,KADM;AAEXC,MAAAA,MAAM,EAAE,KAFG;AAGXC,MAAAA,IAAI,EAAE,KAHK;AAIXC,MAAAA,KAAK,EAAE;AAJI,KAAF,CAAV;AAMA,GAPD;;AASA,SACC,cAAC,WAAD,eACMxB,KADN;AAEC,IAAA,YAAY,EAAGG,OAFhB;AAGC,IAAA,MAAM,MAHP;AAIC,IAAA,KAAK,EAAGF,QAJT;AAKC,IAAA,QAAQ,EAAGS,cALZ;AAMC,IAAA,YAAY,EAAGO,kBANhB;AAOC,IAAA,OAAO,EAAGV,aAPX;AAQC,IAAA,SAAS,EAAGa,eARb;AASC,IAAA,UAAU,EAAGK,gBATd;AAUC,IAAA,WAAW,EAAGrB;AAVf,KADD;AAcA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { BoxControlInputControlProps } from './types';\nimport UnitControl from './unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst handleOnHoverOn = () => {\n\t\tonHoverOn( {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true,\n\t\t} );\n\t};\n\n\tconst handleOnHoverOff = () => {\n\t\tonHoverOff( {\n\t\t\ttop: false,\n\t\t\tbottom: false,\n\t\t\tleft: false,\n\t\t\tright: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonHoverOn={ handleOnHoverOn }\n\t\t\tonHoverOff={ handleOnHoverOff }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"]}

package/build-module/box-control/axial-input-controls.js

@@ -9,19 +9,17 @@ import UnitControl from './unit-control';
 import { LABELS } from './utils';
 import { Layout } from './styles/box-control-styles';
 const groupedSides = ['vertical', 'horizontal'];
-export default function AxialInputControls(_ref) {
-  let {
-    onChange,
-    onFocus,
-    onHoverOn,
-    onHoverOff,
-    values,
-    selectedUnits,
-    setSelectedUnits,
-    sides,
-    ...props
-  } = _ref;
-
+export default function AxialInputControls({
+  onChange,
+  onFocus,
+  onHoverOn,
+  onHoverOff,
+  values,
+  selectedUnits,
+  setSelectedUnits,
+  sides,
+  ...props
+}) {
   const createHandleOnFocus = side => event => {
     if (!onFocus) {
       return;
@@ -113,7 +111,7 @@ export default function AxialInputControls(_ref) {
   }; // Filter sides if custom configuration provided, maintaining default order.
 
 
-  const filteredSides = sides !== null && sides !== void 0 && sides.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
+  const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
   const first = filteredSides[0];
   const last = filteredSides[filteredSides.length - 1];
   const only = first === last && first;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"names":["parseQuantityAndUnitFromRawValue","UnitControl","LABELS","Layout","groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","selectedUnit","join"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( side: GroupedSide ) => ( next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\n\t\t>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"names":["parseQuantityAndUnitFromRawValue","UnitControl","LABELS","Layout","groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","selectedUnit","join"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( side: GroupedSide ) => ( next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\n\t\t>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"]}

package/build-module/box-control/icon.js

@@ -6,15 +6,13 @@ import { createElement } from "@wordpress/element";
  */
 import { Root, Viewbox, TopStroke, RightStroke, BottomStroke, LeftStroke } from './styles/box-control-icon-styles';
 const BASE_ICON_SIZE = 24;
-export default function BoxControlIcon(_ref) {
-  let {
-    size = 24,
-    side = 'all',
-    sides,
-    ...props
-  } = _ref;
-
-  const isSideDisabled = value => (sides === null || sides === void 0 ? void 0 : sides.length) && !sides.includes(value);
+export default function BoxControlIcon({
+  size = 24,
+  side = 'all',
+  sides,
+  ...props
+}) {
+  const isSideDisabled = value => sides?.length && !sides.includes(value);
 
   const hasSide = value => {
     if (isSideDisabled(value)) {

package/build-module/box-control/icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/icon.tsx"],"names":["Root","Viewbox","TopStroke","RightStroke","BottomStroke","LeftStroke","BASE_ICON_SIZE","BoxControlIcon","size","side","sides","props","isSideDisabled","value","length","includes","hasSide","top","right","bottom","left","scale","transform"],"mappings":";;;AAAA;AACA;AACA;AAEA,SACCA,IADD,EAECC,OAFD,EAGCC,SAHD,EAICC,WAJD,EAKCC,YALD,EAMCC,UAND,QAOO,kCAPP;AAUA,MAAMC,cAAc,GAAG,EAAvB;AAEA,eAAe,SAASC,cAAT,OAK6C;AAAA,MALpB;AACvCC,IAAAA,IAAI,GAAG,EADgC;AAEvCC,IAAAA,IAAI,GAAG,KAFgC;AAGvCC,IAAAA,KAHuC;AAIvC,OAAGC;AAJoC,GAKoB;;AAC3D,QAAMC,cAAc,GACnBC,KADsB,IAElB,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,MAAP,KAAiB,CAAEJ,KAAK,CAACK,QAAN,CAAgBF,KAAhB,CAFxB;;AAIA,QAAMG,OAAO,GACZH,KADe,IAEX;AACJ,QAAKD,cAAc,CAAEC,KAAF,CAAnB,EAA+B;AAC9B,aAAO,KAAP;AACA;;AAED,WAAOJ,IAAI,KAAK,KAAT,IAAkBA,IAAI,KAAKI,KAAlC;AACA,GARD;;AAUA,QAAMI,GAAG,GAAGD,OAAO,CAAE,KAAF,CAAP,IAAoBA,OAAO,CAAE,UAAF,CAAvC;AACA,QAAME,KAAK,GAAGF,OAAO,CAAE,OAAF,CAAP,IAAsBA,OAAO,CAAE,YAAF,CAA3C;AACA,QAAMG,MAAM,GAAGH,OAAO,CAAE,QAAF,CAAP,IAAuBA,OAAO,CAAE,UAAF,CAA7C;AACA,QAAMI,IAAI,GAAGJ,OAAO,CAAE,MAAF,CAAP,IAAqBA,OAAO,CAAE,YAAF,CAAzC,CAlB2D,CAoB3D;;AACA,QAAMK,KAAK,GAAGb,IAAI,GAAGF,cAArB;AAEA,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAG;AAAEgB,MAAAA,SAAS,EAAG,SAASD,KAAO;AAA9B;AAAd,KAAwDV,KAAxD,GACC,cAAC,OAAD,QACC,cAAC,SAAD;AAAW,IAAA,SAAS,EAAGM;AAAvB,IADD,EAEC,cAAC,WAAD;AAAa,IAAA,SAAS,EAAGC;AAAzB,IAFD,EAGC,cAAC,YAAD;AAAc,IAAA,SAAS,EAAGC;AAA1B,IAHD,EAIC,cAAC,UAAD;AAAY,IAAA,SAAS,EAAGC;AAAxB,IAJD,CADD,CADD;AAUA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport {\n\tRoot,\n\tViewbox,\n\tTopStroke,\n\tRightStroke,\n\tBottomStroke,\n\tLeftStroke,\n} from './styles/box-control-icon-styles';\nimport type { BoxControlIconProps, BoxControlProps } from './types';\n\nconst BASE_ICON_SIZE = 24;\n\nexport default function BoxControlIcon( {\n\tsize = 24,\n\tside = 'all',\n\tsides,\n\t...props\n}: WordPressComponentProps< BoxControlIconProps, 'span' > ) {\n\tconst isSideDisabled = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => sides?.length && ! sides.includes( value );\n\n\tconst hasSide = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => {\n\t\tif ( isSideDisabled( value ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn side === 'all' || side === value;\n\t};\n\n\tconst top = hasSide( 'top' ) || hasSide( 'vertical' );\n\tconst right = hasSide( 'right' ) || hasSide( 'horizontal' );\n\tconst bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );\n\tconst left = hasSide( 'left' ) || hasSide( 'horizontal' );\n\n\t// Simulates SVG Icon scaling.\n\tconst scale = size / BASE_ICON_SIZE;\n\n\treturn (\n\t\t<Root style={ { transform: `scale(${ scale })` } } { ...props }>\n\t\t\t<Viewbox>\n\t\t\t\t<TopStroke isFocused={ top } />\n\t\t\t\t<RightStroke isFocused={ right } />\n\t\t\t\t<BottomStroke isFocused={ bottom } />\n\t\t\t\t<LeftStroke isFocused={ left } />\n\t\t\t</Viewbox>\n\t\t</Root>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/icon.tsx"],"names":["Root","Viewbox","TopStroke","RightStroke","BottomStroke","LeftStroke","BASE_ICON_SIZE","BoxControlIcon","size","side","sides","props","isSideDisabled","value","length","includes","hasSide","top","right","bottom","left","scale","transform"],"mappings":";;;AAAA;AACA;AACA;AAEA,SACCA,IADD,EAECC,OAFD,EAGCC,SAHD,EAICC,WAJD,EAKCC,YALD,EAMCC,UAND,QAOO,kCAPP;AAUA,MAAMC,cAAc,GAAG,EAAvB;AAEA,eAAe,SAASC,cAAT,CAAyB;AACvCC,EAAAA,IAAI,GAAG,EADgC;AAEvCC,EAAAA,IAAI,GAAG,KAFgC;AAGvCC,EAAAA,KAHuC;AAIvC,KAAGC;AAJoC,CAAzB,EAK6C;AAC3D,QAAMC,cAAc,GACnBC,KADsB,IAElBH,KAAK,EAAEI,MAAP,IAAiB,CAAEJ,KAAK,CAACK,QAAN,CAAgBF,KAAhB,CAFxB;;AAIA,QAAMG,OAAO,GACZH,KADe,IAEX;AACJ,QAAKD,cAAc,CAAEC,KAAF,CAAnB,EAA+B;AAC9B,aAAO,KAAP;AACA;;AAED,WAAOJ,IAAI,KAAK,KAAT,IAAkBA,IAAI,KAAKI,KAAlC;AACA,GARD;;AAUA,QAAMI,GAAG,GAAGD,OAAO,CAAE,KAAF,CAAP,IAAoBA,OAAO,CAAE,UAAF,CAAvC;AACA,QAAME,KAAK,GAAGF,OAAO,CAAE,OAAF,CAAP,IAAsBA,OAAO,CAAE,YAAF,CAA3C;AACA,QAAMG,MAAM,GAAGH,OAAO,CAAE,QAAF,CAAP,IAAuBA,OAAO,CAAE,UAAF,CAA7C;AACA,QAAMI,IAAI,GAAGJ,OAAO,CAAE,MAAF,CAAP,IAAqBA,OAAO,CAAE,YAAF,CAAzC,CAlB2D,CAoB3D;;AACA,QAAMK,KAAK,GAAGb,IAAI,GAAGF,cAArB;AAEA,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAG;AAAEgB,MAAAA,SAAS,EAAG,SAASD,KAAO;AAA9B;AAAd,KAAwDV,KAAxD,GACC,cAAC,OAAD,QACC,cAAC,SAAD;AAAW,IAAA,SAAS,EAAGM;AAAvB,IADD,EAEC,cAAC,WAAD;AAAa,IAAA,SAAS,EAAGC;AAAzB,IAFD,EAGC,cAAC,YAAD;AAAc,IAAA,SAAS,EAAGC;AAA1B,IAHD,EAIC,cAAC,UAAD;AAAY,IAAA,SAAS,EAAGC;AAAxB,IAJD,CADD,CADD;AAUA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport {\n\tRoot,\n\tViewbox,\n\tTopStroke,\n\tRightStroke,\n\tBottomStroke,\n\tLeftStroke,\n} from './styles/box-control-icon-styles';\nimport type { BoxControlIconProps, BoxControlProps } from './types';\n\nconst BASE_ICON_SIZE = 24;\n\nexport default function BoxControlIcon( {\n\tsize = 24,\n\tside = 'all',\n\tsides,\n\t...props\n}: WordPressComponentProps< BoxControlIconProps, 'span' > ) {\n\tconst isSideDisabled = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => sides?.length && ! sides.includes( value );\n\n\tconst hasSide = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => {\n\t\tif ( isSideDisabled( value ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn side === 'all' || side === value;\n\t};\n\n\tconst top = hasSide( 'top' ) || hasSide( 'vertical' );\n\tconst right = hasSide( 'right' ) || hasSide( 'horizontal' );\n\tconst bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );\n\tconst left = hasSide( 'left' ) || hasSide( 'horizontal' );\n\n\t// Simulates SVG Icon scaling.\n\tconst scale = size / BASE_ICON_SIZE;\n\n\treturn (\n\t\t<Root style={ { transform: `scale(${ scale })` } } { ...props }>\n\t\t\t<Viewbox>\n\t\t\t\t<TopStroke isFocused={ top } />\n\t\t\t\t<RightStroke isFocused={ right } />\n\t\t\t\t<BottomStroke isFocused={ bottom } />\n\t\t\t\t<LeftStroke isFocused={ left } />\n\t\t\t</Viewbox>\n\t\t</Root>\n\t);\n}\n"]}

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

@@ -60,27 +60,26 @@ function useUniqueId(idProp) {
  */
 
 
-function BoxControl(_ref) {
-  let {
-    id: idProp,
-    inputProps = defaultInputProps,
-    onChange = noop,
-    label = __('Box Control'),
-    values: valuesProp,
-    units,
-    sides,
-    splitOnAxis = false,
-    allowReset = true,
-    resetValues = DEFAULT_VALUES,
-    onMouseOver,
-    onMouseOut
-  } = _ref;
+function BoxControl({
+  id: idProp,
+  inputProps = defaultInputProps,
+  onChange = noop,
+  label = __('Box Control'),
+  values: valuesProp,
+  units,
+  sides,
+  splitOnAxis = false,
+  allowReset = true,
+  resetValues = DEFAULT_VALUES,
+  onMouseOver,
+  onMouseOut
+}) {
   const [values, setValues] = useControlledState(valuesProp, {
     fallback: DEFAULT_VALUES
   });
   const inputValues = values || DEFAULT_VALUES;
   const hasInitialValue = isValuesDefined(valuesProp);
-  const hasOneSide = (sides === null || sides === void 0 ? void 0 : sides.length) === 1;
+  const hasOneSide = sides?.length === 1;
   const [isDirty, setIsDirty] = useState(hasInitialValue);
   const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide);
   const [side, setSide] = useState(getInitialSide(isLinked, splitOnAxis)); // Tracking selected units via internal state allows filtering of CSS unit
@@ -88,10 +87,10 @@ function BoxControl(_ref) {
   // behaviour. Filtering CSS only values prevents invalid style values.
 
   const [selectedUnits, setSelectedUnits] = useState({
-    top: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.top)[1],
-    right: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.right)[1],
-    bottom: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.bottom)[1],
-    left: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.left)[1]
+    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],
+    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],
+    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],
+    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]
   });
   const id = useUniqueId(idProp);
   const headingId = `${id}-heading`;
@@ -101,10 +100,9 @@ function BoxControl(_ref) {
     setSide(getInitialSide(!isLinked, splitOnAxis));
   };
 
-  const handleOnFocus = (_event, _ref2) => {
-    let {
-      side: nextSide
-    } = _ref2;
+  const handleOnFocus = (_event, {
+    side: nextSide
+  }) => {
     setSide(nextSide);
   };