@wordpress/components/build/border-control/border-control-dropdown/component.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../../src/border-control/border-control-dropdown/component.tsx"],
  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst getAriaLabelColorValue = colorValue => {\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  return colorValue.replace(/^var\\((.+)\\)$/, '$1');\n};\nconst getColorObject = (colorValue, colors) => {\n  if (!colorValue || !colors) {\n    return;\n  }\n  if (isMultiplePaletteArray(colors)) {\n    // Multiple origins\n    let matchedColor;\n    colors.some(origin => origin.colors.some(color => {\n      if (color.color === colorValue) {\n        matchedColor = color;\n        return true;\n      }\n      return false;\n    }));\n    return matchedColor;\n  }\n\n  // Single origin\n  return colors.find(color => color.color === colorValue);\n};\nconst getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {\n  if (isStyleEnabled) {\n    if (colorObject) {\n      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);\n      return style ? sprintf(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n      __('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(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n      __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, ariaLabelValue);\n    }\n    if (colorValue) {\n      const ariaLabelValue = getAriaLabelColorValue(colorValue);\n      return style ? sprintf(\n      // translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n      __('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(\n      // translators: %s: The color's hex code e.g: \"#f00\".\n      __('Border color and style picker. The currently selected color has a value of \"%s\".'), ariaLabelValue);\n    }\n    return __('Border color and style picker.');\n  }\n  if (colorObject) {\n    return sprintf(\n    // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, getAriaLabelColorValue(colorObject.color));\n  }\n  if (colorValue) {\n    return sprintf(\n    // translators: %s: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color has a value of \"%s\".'), getAriaLabelColorValue(colorValue));\n  }\n  return __('Border color picker.');\n};\nconst BorderControlDropdown = (props, forwardedRef) => {\n  const {\n    __experimentalIsRenderedInSidebar,\n    border,\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    indicatorClassName,\n    indicatorWrapperClassName,\n    isStyleSettable,\n    onReset,\n    onColorChange,\n    onStyleChange,\n    popoverContentClassName,\n    popoverControlsClassName,\n    resetButtonWrapperClassName,\n    size,\n    __unstablePopoverProps,\n    ...otherProps\n  } = useBorderControlDropdown(props);\n  const {\n    color,\n    style\n  } = border || {};\n  const colorObject = getColorObject(color, colors);\n  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);\n  const enableResetButton = color || style && style !== 'none';\n  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;\n  const renderToggle = ({\n    onToggle\n  }) => /*#__PURE__*/_jsx(Button, {\n    onClick: onToggle,\n    variant: \"tertiary\",\n    \"aria-label\": toggleAriaLabel,\n    tooltipPosition: dropdownPosition,\n    label: __('Border color and style picker'),\n    showTooltip: true,\n    __next40pxDefaultSize: size === '__unstable-large',\n    children: /*#__PURE__*/_jsx(\"span\", {\n      className: indicatorWrapperClassName,\n      children: /*#__PURE__*/_jsx(ColorIndicator, {\n        className: indicatorClassName,\n        colorValue: color\n      })\n    })\n  });\n  const renderContent = () => /*#__PURE__*/_jsx(_Fragment, {\n    children: /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n      paddingSize: \"medium\",\n      children: [/*#__PURE__*/_jsxs(VStack, {\n        className: popoverControlsClassName,\n        spacing: 6,\n        children: [/*#__PURE__*/_jsx(ColorPalette, {\n          className: popoverContentClassName,\n          value: color,\n          onChange: onColorChange,\n          colors,\n          disableCustomColors,\n          __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n          clearable: false,\n          enableAlpha: enableAlpha\n        }), enableStyle && isStyleSettable && /*#__PURE__*/_jsx(BorderControlStylePicker, {\n          label: __('Style'),\n          value: style,\n          onChange: onStyleChange\n        })]\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: resetButtonWrapperClassName,\n        children: /*#__PURE__*/_jsx(Button, {\n          variant: \"tertiary\",\n          onClick: () => {\n            onReset();\n          },\n          disabled: !enableResetButton,\n          accessibleWhenDisabled: true,\n          __next40pxDefaultSize: true,\n          children: __('Reset')\n        })\n      })]\n    })\n  });\n  return /*#__PURE__*/_jsx(Dropdown, {\n    renderToggle: renderToggle,\n    renderContent: renderContent,\n    popoverProps: {\n      ...__unstablePopoverProps\n    },\n    ...otherProps,\n    ref: forwardedRef\n  });\n};\nconst ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');\nexport default ConnectedBorderControlDropdown;"],
  "mappings": "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",
  "names": ["_jsx", "Button", "ColorIndicator", "_Fragment", "_jsxs", "DropdownContentWrapper", "ColorPalette", "BorderControlStylePicker", "Dropdown"]
}