@wordpress/components 19.7.0 → 19.9.0

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

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBorderControl = useBorderControl;
+
+var _element = require("@wordpress/element");
+
+var styles = _interopRequireWildcard(require("../styles"));
+
+var _utils = require("../../unit-control/utils");
+
+var _context = require("../../ui/context");
+
+var _useCx = require("../../utils/hooks/use-cx");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const sanitizeBorder = border => {
+  const hasNoWidth = (border === null || border === void 0 ? void 0 : border.width) === undefined || border.width === '';
+  const hasNoColor = (border === null || border === void 0 ? void 0 : border.color) === undefined; // If width and color are undefined, unset any style selection as well.
+
+  if (hasNoWidth && hasNoColor) {
+    return undefined;
+  }
+
+  return border;
+};
+
+function useBorderControl(props) {
+  const {
+    className,
+    isCompact,
+    onChange,
+    shouldSanitizeBorder = true,
+    value: border,
+    width,
+    ...otherProps
+  } = (0, _context.useContextSystem)(props, 'BorderControl');
+  const [widthValue, originalWidthUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(border === null || border === void 0 ? void 0 : border.width);
+  const widthUnit = originalWidthUnit || 'px';
+  const hadPreviousZeroWidth = widthValue === 0;
+  const [colorSelection, setColorSelection] = (0, _element.useState)();
+  const [styleSelection, setStyleSelection] = (0, _element.useState)();
+  const onBorderChange = (0, _element.useCallback)(newBorder => {
+    if (shouldSanitizeBorder) {
+      return onChange(sanitizeBorder(newBorder));
+    }
+
+    onChange(newBorder);
+  }, [onChange, shouldSanitizeBorder, sanitizeBorder]);
+  const onWidthChange = (0, _element.useCallback)(newWidth => {
+    const newWidthValue = newWidth === '' ? undefined : newWidth;
+    const [parsedValue] = (0, _utils.parseQuantityAndUnitFromRawValue)(newWidth);
+    const hasZeroWidth = parsedValue === 0;
+    const updatedBorder = { ...border,
+      width: newWidthValue
+    }; // Setting the border width explicitly to zero will also set the
+    // border style to `none` and clear the border color.
+
+    if (hasZeroWidth && !hadPreviousZeroWidth) {
+      // Before clearing the color and style selections, keep track of
+      // the current selections so they can be restored when the width
+      // changes to a non-zero value.
+      setColorSelection(border === null || border === void 0 ? void 0 : border.color);
+      setStyleSelection(border === null || border === void 0 ? void 0 : border.style); // Clear the color and style border properties.
+
+      updatedBorder.color = undefined;
+      updatedBorder.style = 'none';
+    } // Selection has changed from zero border width to non-zero width.
+
+
+    if (!hasZeroWidth && hadPreviousZeroWidth) {
+      // Restore previous border color and style selections if width
+      // is now not zero.
+      if (updatedBorder.color === undefined) {
+        updatedBorder.color = colorSelection;
+      }
+
+      if (updatedBorder.style === 'none') {
+        updatedBorder.style = styleSelection;
+      }
+    }
+
+    onBorderChange(updatedBorder);
+  }, [border, hadPreviousZeroWidth, onBorderChange]);
+  const onSliderChange = (0, _element.useCallback)(value => {
+    onWidthChange(`${value}${widthUnit}`);
+  }, [onWidthChange, widthUnit]); // Generate class names.
+
+  const cx = (0, _useCx.useCx)();
+  const classes = (0, _element.useMemo)(() => {
+    return cx(styles.borderControl, className);
+  }, [className, cx]);
+  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 widthControlClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderWidthControl());
+  }, [cx]);
+  const sliderClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderSlider());
+  }, [cx]);
+  return { ...otherProps,
+    className: classes,
+    innerWrapperClassName,
+    onBorderChange,
+    onSliderChange,
+    onWidthChange,
+    previousStyleSelection: styleSelection,
+    sliderClassName,
+    value: border,
+    widthControlClassName,
+    widthUnit,
+    widthValue
+  };
+}
+//# sourceMappingURL=hook.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BorderControl", {
+  enumerable: true,
+  get: function () {
+    return _component.default;
+  }
+});
+Object.defineProperty(exports, "useBorderControl", {
+  enumerable: true,
+  get: function () {
+    return _hook.useBorderControl;
+  }
+});
+
+var _component = _interopRequireDefault(require("./component"));
+
+var _hook = require("./hook");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as BorderControl } from './component';\nexport { useBorderControl } from './hook';\n"]}

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

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _i18n = require("@wordpress/i18n");
+
+var _icons = require("@wordpress/icons");
+
+var _borderControlStylePicker = _interopRequireDefault(require("../border-control-style-picker"));
+
+var _button = _interopRequireDefault(require("../../button"));
+
+var _colorIndicator = _interopRequireDefault(require("../../color-indicator"));
+
+var _colorPalette = _interopRequireDefault(require("../../color-palette"));
+
+var _dropdown = _interopRequireDefault(require("../../dropdown"));
+
+var _hStack = require("../../h-stack");
+
+var _vStack = require("../../v-stack");
+
+var _context = require("../../ui/context");
+
+var _hook = require("./hook");
+
+var _baseControlStyles = require("../../base-control/styles/base-control-styles");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const noop = () => undefined;
+
+const getColorObject = (colorValue, colors, hasMultipleColorOrigins) => {
+  if (!colorValue || !colors) {
+    return;
+  }
+
+  if (hasMultipleColorOrigins) {
+    let matchedColor;
+    colors.some(origin => origin.colors.some(color => {
+      if (color.color === colorValue) {
+        matchedColor = color;
+        return true;
+      }
+
+      return false;
+    }));
+    return matchedColor;
+  }
+
+  return colors.find(color => color.color === colorValue);
+};
+
+const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
+  if (isStyleEnabled) {
+    if (colorObject) {
+      return style ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %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) : (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
+    }
+
+    if (colorValue) {
+      return style ? (0, _i18n.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) : (0, _i18n.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);
+    }
+
+    return (0, _i18n.__)('Border color and style picker.');
+  }
+
+  if (colorObject) {
+    return (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
+  }
+
+  if (colorValue) {
+    return (0, _i18n.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 (0, _i18n.__)('Border color picker.');
+};
+
+const BorderControlDropdown = (props, forwardedRef) => {
+  const {
+    __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar,
+    border,
+    colors,
+    disableCustomColors,
+    enableAlpha,
+    indicatorClassName,
+    indicatorWrapperClassName,
+    onReset,
+    onColorChange,
+    onStyleChange,
+    popoverClassName,
+    popoverContentClassName,
+    popoverControlsClassName,
+    resetButtonClassName,
+    showDropdownHeader,
+    enableStyle = true,
+    ...otherProps
+  } = (0, _hook.useBorderControlDropdown)(props);
+  const {
+    color,
+    style
+  } = border || {};
+  const colorObject = getColorObject(color, colors, !!__experimentalHasMultipleOrigins);
+  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
+  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
+
+  const renderToggle = _ref => {
+    let {
+      onToggle = noop
+    } = _ref;
+    return (0, _element.createElement)(_button.default, {
+      onClick: onToggle,
+      variant: "tertiary",
+      "aria-label": toggleAriaLabel,
+      position: dropdownPosition
+    }, (0, _element.createElement)("span", {
+      className: indicatorWrapperClassName
+    }, (0, _element.createElement)(_colorIndicator.default, {
+      className: indicatorClassName,
+      colorValue: color
+    })));
+  };
+
+  const renderContent = _ref2 => {
+    let {
+      onClose
+    } = _ref2;
+    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_vStack.VStack, {
+      className: popoverControlsClassName,
+      spacing: 6
+    }, showDropdownHeader ? (0, _element.createElement)(_hStack.HStack, null, (0, _element.createElement)(_baseControlStyles.StyledLabel, null, (0, _i18n.__)('Border color')), (0, _element.createElement)(_button.default, {
+      isSmall: true,
+      label: (0, _i18n.__)('Close border color'),
+      icon: _icons.closeSmall,
+      onClick: onClose
+    })) : undefined, (0, _element.createElement)(_colorPalette.default, {
+      className: popoverContentClassName,
+      value: color,
+      onChange: onColorChange,
+      colors,
+      disableCustomColors,
+      __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
+      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      clearable: false,
+      enableAlpha: enableAlpha
+    }), enableStyle && (0, _element.createElement)(_borderControlStylePicker.default, {
+      label: (0, _i18n.__)('Style'),
+      value: style,
+      onChange: onStyleChange
+    })), (0, _element.createElement)(_button.default, {
+      className: resetButtonClassName,
+      variant: "tertiary",
+      onClick: () => {
+        onReset();
+        onClose();
+      }
+    }, (0, _i18n.__)('Reset to default')));
+  };
+
+  return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
+    renderToggle: renderToggle,
+    renderContent: renderContent,
+    contentClassName: popoverClassName
+  }, otherProps, {
+    ref: forwardedRef
+  }));
+};
+
+const ConnectedBorderControlDropdown = (0, _context.contextConnect)(BorderControlDropdown, 'BorderControlDropdown');
+var _default = ConnectedBorderControlDropdown;
+exports.default = _default;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBorderControlDropdown = useBorderControlDropdown;
+
+var _element = require("@wordpress/element");
+
+var styles = _interopRequireWildcard(require("../styles"));
+
+var _utils = require("../../unit-control/utils");
+
+var _context = require("../../ui/context");
+
+var _useCx = require("../../utils/hooks/use-cx");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function useBorderControlDropdown(props) {
+  const {
+    border,
+    className,
+    colors,
+    contentClassName,
+    onChange,
+    previousStyleSelection,
+    ...otherProps
+  } = (0, _context.useContextSystem)(props, 'BorderControlDropdown');
+  const [widthValue] = (0, _utils.parseQuantityAndUnitFromRawValue)(border === null || border === void 0 ? void 0 : 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;
+    onChange({
+      color,
+      style,
+      width
+    });
+  };
+
+  const onStyleChange = style => {
+    const width = hasZeroWidth && !!style ? '1px' : border === null || border === void 0 ? void 0 : border.width;
+    onChange({ ...border,
+      style,
+      width
+    });
+  };
+
+  const onReset = () => {
+    onChange({ ...border,
+      color: undefined,
+      style: undefined
+    });
+  }; // Generate class names.
+
+
+  const cx = (0, _useCx.useCx)();
+  const classes = (0, _element.useMemo)(() => {
+    return cx(styles.borderControlDropdown(), className);
+  }, [className, cx]);
+  const indicatorClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderColorIndicator);
+  }, [cx]);
+  const indicatorWrapperClassName = (0, _element.useMemo)(() => {
+    return cx(styles.colorIndicatorWrapper(border));
+  }, [border, cx]);
+  const popoverClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderControlPopover, contentClassName);
+  }, [cx, contentClassName]);
+  const popoverControlsClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderControlPopoverControls);
+  }, [cx]);
+  const popoverContentClassName = (0, _element.useMemo)(() => {
+    return cx(styles.borderControlPopoverContent);
+  }, [cx]);
+  const resetButtonClassName = (0, _element.useMemo)(() => {
+    return cx(styles.resetButton);
+  }, [cx]);
+  return { ...otherProps,
+    border,
+    className: classes,
+    colors,
+    indicatorClassName,
+    indicatorWrapperClassName,
+    onColorChange,
+    onStyleChange,
+    onReset,
+    popoverClassName,
+    popoverContentClassName,
+    popoverControlsClassName,
+    resetButtonClassName
+  };
+}
+//# sourceMappingURL=hook.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _component.default;
+  }
+});
+
+var _component = _interopRequireDefault(require("./component"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './component';\n"]}

package/build/border-control/border-control-style-picker/component.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _icons = require("@wordpress/icons");
+
+var _i18n = require("@wordpress/i18n");
+
+var _button = _interopRequireDefault(require("../../button"));
+
+var _baseControlStyles = require("../../base-control/styles/base-control-styles");
+
+var _view = require("../../view");
+
+var _flex = require("../../flex");
+
+var _visuallyHidden = require("../../visually-hidden");
+
+var _context = require("../../ui/context");
+
+var _hook = require("./hook");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const BORDER_STYLES = [{
+  label: (0, _i18n.__)('Solid'),
+  icon: _icons.lineSolid,
+  value: 'solid'
+}, {
+  label: (0, _i18n.__)('Dashed'),
+  icon: _icons.lineDashed,
+  value: 'dashed'
+}, {
+  label: (0, _i18n.__)('Dotted'),
+  icon: _icons.lineDotted,
+  value: 'dotted'
+}];
+
+const Label = props => {
+  const {
+    label,
+    hideLabelFromVision
+  } = props;
+
+  if (!label) {
+    return null;
+  }
+
+  return hideLabelFromVision ? (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
+    as: "label"
+  }, label) : (0, _element.createElement)(_baseControlStyles.StyledLabel, null, label);
+};
+
+const BorderControlStylePicker = (props, forwardedRef) => {
+  const {
+    buttonClassName,
+    hideLabelFromVision,
+    label,
+    onChange,
+    value,
+    ...otherProps
+  } = (0, _hook.useBorderControlStylePicker)(props);
+  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, otherProps, {
+    ref: forwardedRef
+  }), (0, _element.createElement)(Label, {
+    label: label,
+    hideLabelFromVision: hideLabelFromVision
+  }), (0, _element.createElement)(_flex.Flex, {
+    justify: "flex-start",
+    gap: 1
+  }, BORDER_STYLES.map(borderStyle => (0, _element.createElement)(_button.default, {
+    key: borderStyle.value,
+    className: buttonClassName,
+    icon: borderStyle.icon,
+    isSmall: true,
+    isPressed: borderStyle.value === value,
+    onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value),
+    "aria-label": borderStyle.label,
+    label: borderStyle.label,
+    showTooltip: true
+  }))));
+};
+
+const ConnectedBorderControlStylePicker = (0, _context.contextConnect)(BorderControlStylePicker, 'BorderControlStylePicker');
+var _default = ConnectedBorderControlStylePicker;
+exports.default = _default;
+//# sourceMappingURL=component.js.map

package/build/border-control/border-control-style-picker/component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-style-picker/component.tsx"],"names":["BORDER_STYLES","label","icon","lineSolid","value","lineDashed","lineDotted","Label","props","hideLabelFromVision","BorderControlStylePicker","forwardedRef","buttonClassName","onChange","otherProps","map","borderStyle","undefined","ConnectedBorderControlStylePicker"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAfA;AACA;AACA;;AAIA;AACA;AACA;AAWA,MAAMA,aAAa,GAAG,CACrB;AAAEC,EAAAA,KAAK,EAAE,cAAI,OAAJ,CAAT;AAAwBC,EAAAA,IAAI,EAAEC,gBAA9B;AAAyCC,EAAAA,KAAK,EAAE;AAAhD,CADqB,EAErB;AAAEH,EAAAA,KAAK,EAAE,cAAI,QAAJ,CAAT;AAAyBC,EAAAA,IAAI,EAAEG,iBAA/B;AAA2CD,EAAAA,KAAK,EAAE;AAAlD,CAFqB,EAGrB;AAAEH,EAAAA,KAAK,EAAE,cAAI,QAAJ,CAAT;AAAyBC,EAAAA,IAAI,EAAEI,iBAA/B;AAA2CF,EAAAA,KAAK,EAAE;AAAlD,CAHqB,CAAtB;;AAMA,MAAMG,KAAK,GAAKC,KAAF,IAAyB;AACtC,QAAM;AAAEP,IAAAA,KAAF;AAASQ,IAAAA;AAAT,MAAiCD,KAAvC;;AAEA,MAAK,CAAEP,KAAP,EAAe;AACd,WAAO,IAAP;AACA;;AAED,SAAOQ,mBAAmB,GACzB,4BAAC,8BAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA6BR,KAA7B,CADyB,GAGzB,4BAAC,8BAAD,QAAeA,KAAf,CAHD;AAKA,CAZD;;AAcA,MAAMS,wBAAwB,GAAG,CAChCF,KADgC,EAEhCG,YAFgC,KAG5B;AACJ,QAAM;AACLC,IAAAA,eADK;AAELH,IAAAA,mBAFK;AAGLR,IAAAA,KAHK;AAILY,IAAAA,QAJK;AAKLT,IAAAA,KALK;AAML,OAAGU;AANE,MAOF,uCAA6BN,KAA7B,CAPJ;AASA,SACC,4BAAC,UAAD,6BAAWM,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,MACC,4BAAC,KAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,mBAAmB,EAAGQ;AAFvB,IADD,EAKC,4BAAC,UAAD;AAAM,IAAA,OAAO,EAAC,YAAd;AAA2B,IAAA,GAAG,EAAG;AAAjC,KACGT,aAAa,CAACe,GAAd,CAAqBC,WAAF,IACpB,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGA,WAAW,CAACZ,KADnB;AAEC,IAAA,SAAS,EAAGQ,eAFb;AAGC,IAAA,IAAI,EAAGI,WAAW,CAACd,IAHpB;AAIC,IAAA,OAAO,MAJR;AAKC,IAAA,SAAS,EAAGc,WAAW,CAACZ,KAAZ,KAAsBA,KALnC;AAMC,IAAA,OAAO,EAAG,MACTS,QAAQ,CACPG,WAAW,CAACZ,KAAZ,KAAsBA,KAAtB,GACGa,SADH,GAEGD,WAAW,CAACZ,KAHR,CAPV;AAaC,kBAAaY,WAAW,CAACf,KAb1B;AAcC,IAAA,KAAK,EAAGe,WAAW,CAACf,KAdrB;AAeC,IAAA,WAAW,EAAG;AAff,IADC,CADH,CALD,CADD;AA6BA,CA1CD;;AA4CA,MAAMiB,iCAAiC,GAAG,6BACzCR,wBADyC,EAEzC,0BAFyC,CAA1C;eAKeQ,iC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { Flex } from '../../flex';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlStylePicker } from './hook';\n\nimport type { LabelProps, StylePickerProps } from '../types';\n\nconst BORDER_STYLES = [\n\t{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },\n\t{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },\n\t{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },\n];\n\nconst Label = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderControlStylePicker = (\n\tprops: WordPressComponentProps< StylePickerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tbuttonClassName,\n\t\thideLabelFromVision,\n\t\tlabel,\n\t\tonChange,\n\t\tvalue,\n\t\t...otherProps\n\t} = useBorderControlStylePicker( props );\n\n\treturn (\n\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t<Label\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<Flex justify=\"flex-start\" gap={ 1 }>\n\t\t\t\t{ BORDER_STYLES.map( ( borderStyle ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ borderStyle.value }\n\t\t\t\t\t\tclassName={ buttonClassName }\n\t\t\t\t\t\ticon={ borderStyle.icon }\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tisPressed={ borderStyle.value === value }\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tborderStyle.value === value\n\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t: borderStyle.value\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-label={ borderStyle.label }\n\t\t\t\t\t\tlabel={ borderStyle.label }\n\t\t\t\t\t\tshowTooltip={ true }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</Flex>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderControlStylePicker = contextConnect(\n\tBorderControlStylePicker,\n\t'BorderControlStylePicker'\n);\n\nexport default ConnectedBorderControlStylePicker;\n"]}