@wordpress/components/build/gradient-picker/index.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../src/gradient-picker/index.tsx"],
  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);\nconst isMultipleOriginArray = arr => {\n  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));\n};\nfunction SingleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  ...additionalProps\n}) {\n  const gradientOptions = useMemo(() => {\n    return gradients.map(({\n      gradient,\n      name,\n      slug\n    }, index) => /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: gradient,\n      isSelected: value === gradient,\n      tooltipText: name ||\n      // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n      sprintf(__('Gradient code: %s'), gradient),\n      style: {\n        color: 'rgba( 0,0,0,0 )',\n        background: gradient\n      },\n      onClick: value === gradient ? clearGradient : () => onChange(gradient, index),\n      \"aria-label\": name ?\n      // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n      sprintf(__('Gradient: %s'), name) :\n      // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n      sprintf(__('Gradient code: %s'), gradient)\n    }, slug));\n  }, [gradients, value, onChange, clearGradient]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: gradientOptions,\n    ...additionalProps\n  });\n}\nfunction MultipleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultipleOrigin);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: gradients.map(({\n      name,\n      gradients: gradientSet\n    }, index) => {\n      const id = `color-palette-${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          level: headingLevel,\n          id: id,\n          children: name\n        }), /*#__PURE__*/_jsx(SingleOrigin, {\n          clearGradient: clearGradient,\n          gradients: gradientSet,\n          onChange: gradient => onChange(gradient, index),\n          value: value,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nfunction Component(props) {\n  const {\n    asButtons,\n    loop,\n    actions,\n    headingLevel,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {\n    headingLevel: headingLevel,\n    ...additionalProps\n  }) : /*#__PURE__*/_jsx(SingleOrigin, {\n    ...additionalProps\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...metaProps,\n    ...labelProps,\n    actions: actions,\n    options: options\n  });\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState( null );\n *\n *   return (\n *     <GradientPicker\n *       value={ gradient }\n *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *       gradients={ [\n *         {\n *           name: 'JShine',\n *           gradient:\n *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *           slug: 'jshine',\n *         },\n *         {\n *           name: 'Moonlit Asteroid',\n *           gradient:\n *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *           slug: 'moonlit-asteroid',\n *         },\n *         {\n *           name: 'Rastafarie',\n *           gradient:\n *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *           slug: 'rastafari',\n *         },\n *       ] }\n *     />\n *   );\n * };\n *```\n *\n */\nexport function GradientPicker({\n  className,\n  gradients = [],\n  onChange,\n  value,\n  clearable = true,\n  enableAlpha = true,\n  disableCustomGradients = false,\n  __experimentalIsRenderedInSidebar,\n  headingLevel = 2,\n  ...additionalProps\n}) {\n  const clearGradient = useCallback(() => onChange(undefined), [onChange]);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: gradients.length ? 4 : 0,\n    children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      enableAlpha: enableAlpha,\n      value: value,\n      onChange: onChange\n    }), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {\n      ...additionalProps,\n      className: className,\n      clearGradient: clearGradient,\n      gradients: gradients,\n      onChange: onChange,\n      value: value,\n      actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n        onClick: clearGradient,\n        accessibleWhenDisabled: true,\n        disabled: !value,\n        children: __('Clear')\n      }),\n      headingLevel: headingLevel\n    })]\n  });\n}\nexport default GradientPicker;"],
  "mappings": "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",
  "names": ["_jsx", "CircularOptionPicker", "_jsxs", "CustomGradientPicker"]
}