@wordpress/components 28.12.0 → 28.13.0

package/build-module/gradient-picker/index.js

@@ -141,44 +141,44 @@ function Component(props) {
 }
 
 /**
- *  GradientPicker is a React component that renders a color gradient picker to
+ * GradientPicker is a React component that renders a color gradient picker to
  * define a multi step gradient. There's either a _linear_ or a _radial_ type
  * available.
  *
  * ```jsx
- *import { GradientPicker } from '@wordpress/components';
- *import { useState } from '@wordpress/element';
+ * import { useState } from 'react';
+ * import { GradientPicker } from '@wordpress/components';
  *
- *const myGradientPicker = () => {
- *	const [ gradient, setGradient ] = useState( null );
+ * const MyGradientPicker = () => {
+ *   const [ gradient, setGradient ] = useState( null );
  *
- *	return (
- *		<GradientPicker
- *			value={ gradient }
- *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
- *			gradients={ [
- *				{
- *					name: 'JShine',
- *					gradient:
- *						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
- *					slug: 'jshine',
- *				},
- *				{
- *					name: 'Moonlit Asteroid',
- *					gradient:
- *						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
- *					slug: 'moonlit-asteroid',
- *				},
- *				{
- *					name: 'Rastafarie',
- *					gradient:
- *						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
- *					slug: 'rastafari',
- *				},
- *			] }
- *		/>
- *	);
- *};
+ *   return (
+ *     <GradientPicker
+ *       value={ gradient }
+ *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }
+ *       gradients={ [
+ *         {
+ *           name: 'JShine',
+ *           gradient:
+ *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
+ *           slug: 'jshine',
+ *         },
+ *         {
+ *           name: 'Moonlit Asteroid',
+ *           gradient:
+ *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
+ *           slug: 'moonlit-asteroid',
+ *         },
+ *         {
+ *           name: 'Rastafarie',
+ *           gradient:
+ *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
+ *           slug: 'rastafari',
+ *         },
+ *       ] }
+ *     />
+ *   );
+ * };
  *```
  *
  */
@@ -209,6 +209,8 @@ export function GradientPicker({
       value: value,
       actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {
         onClick: clearGradient,
+        accessibleWhenDisabled: true,
+        disabled: !value,
         children: __('Clear')
       }),
       headingLevel: headingLevel

package/build-module/gradient-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","sprintf","useInstanceId","useCallback","useMemo","CircularOptionPicker","CustomGradientPicker","VStack","ColorHeading","jsx","_jsx","jsxs","_jsxs","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","additionalProps","gradientOptions","map","gradient","name","slug","index","Option","isSelected","tooltipText","style","color","background","onClick","OptionGroup","options","MultipleOrigin","headingLevel","instanceId","spacing","children","gradientSet","id","level","Component","props","asButtons","loop","actions","ariaLabel","ariaLabelledby","metaProps","_metaProps","GradientPicker","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","undefined","ButtonAction"],"sources":["@wordpress/components/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 from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\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 = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name, slug }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\tconst instanceId = useInstanceId( MultipleOrigin );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\tconst id = `color-palette-${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel } id={ id }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tactions,\n\t\theadingLevel,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst options = isMultipleOriginArray( props.gradients ) ? (\n\t\t<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />\n\t) : (\n\t\t<SingleOrigin { ...additionalProps } />\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...metaProps }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t/>\n\t);\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 { GradientPicker } from '@wordpress/components';\n *import { useState } from '@wordpress/element';\n *\n *const myGradientPicker = () => {\n *\tconst [ gradient, setGradient ] = useState( null );\n *\n *\treturn (\n *\t\t<GradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *\t\t\tgradients={ [\n *\t\t\t\t{\n *\t\t\t\t\tname: 'JShine',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *\t\t\t\t\tslug: 'jshine',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Moonlit Asteroid',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *\t\t\t\t\tslug: 'moonlit-asteroid',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Rastafarie',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *\t\t\t\t\tslug: 'rastafari',\n *\t\t\t\t},\n *\t\t\t] }\n *\t\t/>\n *\t);\n *};\n *```\n *\n */\nexport function GradientPicker( {\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n\t...additionalProps\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t<CustomGradientPicker\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\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( gradients.length > 0 || clearable ) && (\n\t\t\t\t<Component\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tactions={\n\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__","sprintf","useInstanceId","useCallback","useMemo","CircularOptionPicker","CustomGradientPicker","VStack","ColorHeading","jsx","_jsx","jsxs","_jsxs","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","additionalProps","gradientOptions","map","gradient","name","slug","index","Option","isSelected","tooltipText","style","color","background","onClick","OptionGroup","options","MultipleOrigin","headingLevel","instanceId","spacing","children","gradientSet","id","level","Component","props","asButtons","loop","actions","ariaLabel","ariaLabelledby","metaProps","_metaProps","GradientPicker","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","undefined","ButtonAction","accessibleWhenDisabled","disabled"],"sources":["@wordpress/components/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 from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\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 = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name, slug }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\tconst instanceId = useInstanceId( MultipleOrigin );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\tconst id = `color-palette-${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel } id={ id }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tactions,\n\t\theadingLevel,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst options = isMultipleOriginArray( props.gradients ) ? (\n\t\t<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />\n\t) : (\n\t\t<SingleOrigin { ...additionalProps } />\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...metaProps }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t/>\n\t);\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\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n\t...additionalProps\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t<CustomGradientPicker\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\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( gradients.length > 0 || clearable ) && (\n\t\t\t\t<Component\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tactions={\n\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":"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","ignoreList":[]}

package/build-module/gradient-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] | OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/**\n\t * The class name added to the wrapper.\n\t */\n\tclassName?: string;\n\t/**\n\t * The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t */\n\tonChange: ( currentGradient: string | undefined ) => void;\n\t/**\n\t * The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t *\n\t * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t */\n\tvalue?: GradientObject[ 'gradient' ] | null;\n\t/**\n\t * Whether the palette should have a clearing button or not.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (ie. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons?: boolean;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t| {\n\t\t\t/**\n\t\t\t * A label to identify the purpose of the control.\n\t\t\t *\n\t\t\t * @todo [#54055] Either this or `aria-labelledby` should be required\n\t\t\t */\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * An ID of an element to provide a label for the control.\n\t\t\t *\n\t\t\t * @todo [#54055] Either this or `aria-label` should be required\n\t\t\t */\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t  }\n);\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/**\n\t * An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t *\n\t * @default []\n\t */\n\tgradients?: GradientsProp;\n\t/**\n\t * Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__nextHasNoMargin?: boolean;\n\t/**\n\t * If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t *\n\t * @default false\n\t */\n\tdisableCustomGradients?: boolean;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject | OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string | undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] | OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/**\n\t * The class name added to the wrapper.\n\t */\n\tclassName?: string;\n\t/**\n\t * The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t */\n\tonChange: ( currentGradient: string | undefined ) => void;\n\t/**\n\t * The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t *\n\t * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t */\n\tvalue?: GradientObject[ 'gradient' ] | null;\n\t/**\n\t * Whether the palette should have a clearing button or not.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (i.e. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons?: boolean;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t| {\n\t\t\t// TODO: [#54055] Either this or `aria-labelledby` should be required\n\t\t\t/**\n\t\t\t * A label to identify the purpose of the control.\n\t\t\t */\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t  }\n\t| {\n\t\t\t// TODO: [#54055] Either this or `aria-label` should be required\n\t\t\t/**\n\t\t\t * An ID of an element to provide a label for the control.\n\t\t\t */\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t  }\n);\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/**\n\t * An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t *\n\t * @default []\n\t */\n\tgradients?: GradientsProp;\n\t/**\n\t * Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t *\n\t * @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__nextHasNoMargin?: boolean;\n\t/**\n\t * If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t *\n\t * @default false\n\t */\n\tdisableCustomGradients?: boolean;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject | OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string | undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":"","ignoreList":[]}

package/build-module/icon/index.js

@@ -13,6 +13,15 @@ import { SVG } from '@wordpress/primitives';
  */
 import Dashicon from '../dashicon';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Renders a raw icon without any initial styling or wrappers.
+ *
+ * ```jsx
+ * import { wordpress } from '@wordpress/icons';
+ *
+ * <Icon icon={ wordpress } />
+ * ```
+ */
 function Icon({
   icon = null,
   size = 'string' === typeof icon ? 20 : 24,

package/build-module/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["cloneElement","createElement","isValidElement","SVG","Dashicon","jsx","_jsx","Icon","icon","size","additionalProps","type","appliedProps","props","width","height"],"sources":["@wordpress/components/src/icon/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType, HTMLProps, SVGProps } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcloneElement,\n\tcreateElement,\n\tisValidElement,\n} from '@wordpress/element';\nimport { SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport Dashicon from '../dashicon';\nimport type { IconKey as DashiconIconKey } from '../dashicon/types';\n\nexport type IconType =\n\t| DashiconIconKey\n\t| ComponentType< { size?: number } >\n\t| ( ( props: { size?: number } ) => JSX.Element )\n\t| JSX.Element;\n\ninterface BaseProps {\n\t/**\n\t * The icon to render. Supported values are: Dashicons (specified as\n\t * strings), functions, Component instances and `null`.\n\t *\n\t * @default null\n\t */\n\ticon?: IconType | null;\n\t/**\n\t * The size (width and height) of the icon.\n\t *\n\t * @default `20` when a Dashicon is rendered, `24` for all other icons.\n\t */\n\tsize?: number;\n}\n\ntype AdditionalProps< T > = T extends ComponentType< infer U >\n\t? U\n\t: T extends DashiconIconKey\n\t? SVGProps< SVGSVGElement >\n\t: {};\n\nexport type Props = BaseProps & AdditionalProps< IconType >;\n\nfunction Icon( {\n\ticon = null,\n\tsize = 'string' === typeof icon ? 20 : 24,\n\t...additionalProps\n}: Props ) {\n\tif ( 'string' === typeof icon ) {\n\t\treturn (\n\t\t\t<Dashicon\n\t\t\t\ticon={ icon }\n\t\t\t\tsize={ size }\n\t\t\t\t{ ...( additionalProps as HTMLProps< HTMLSpanElement > ) }\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( isValidElement( icon ) && Dashicon === icon.type ) {\n\t\treturn cloneElement( icon, {\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\tif ( 'function' === typeof icon ) {\n\t\treturn createElement( icon, {\n\t\t\tsize,\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\tif ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {\n\t\tconst appliedProps = {\n\t\t\t...icon.props,\n\t\t\twidth: size,\n\t\t\theight: size,\n\t\t\t...additionalProps,\n\t\t};\n\n\t\treturn <SVG { ...appliedProps } />;\n\t}\n\n\tif ( isValidElement( icon ) ) {\n\t\treturn cloneElement( icon, {\n\t\t\t// @ts-ignore Just forwarding the size prop along\n\t\t\tsize,\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\treturn icon;\n}\n\nexport default Icon;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SACCA,YAAY,EACZC,aAAa,EACbC,cAAc,QACR,oBAAoB;AAC3B,SAASC,GAAG,QAAQ,uBAAuB;;AAE3C;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiCnC,SAASC,IAAIA,CAAE;EACdC,IAAI,GAAG,IAAI;EACXC,IAAI,GAAG,QAAQ,KAAK,OAAOD,IAAI,GAAG,EAAE,GAAG,EAAE;EACzC,GAAGE;AACG,CAAC,EAAG;EACV,IAAK,QAAQ,KAAK,OAAOF,IAAI,EAAG;IAC/B,oBACCF,IAAA,CAACF,QAAQ;MACRI,IAAI,EAAGA,IAAM;MACbC,IAAI,EAAGA,IAAM;MAAA,GACNC;IAAe,CACtB,CAAC;EAEJ;EAEA,IAAKR,cAAc,CAAEM,IAAK,CAAC,IAAIJ,QAAQ,KAAKI,IAAI,CAACG,IAAI,EAAG;IACvD,OAAOX,YAAY,CAAEQ,IAAI,EAAE;MAC1B,GAAGE;IACJ,CAAE,CAAC;EACJ;EAEA,IAAK,UAAU,KAAK,OAAOF,IAAI,EAAG;IACjC,OAAOP,aAAa,CAAEO,IAAI,EAAE;MAC3BC,IAAI;MACJ,GAAGC;IACJ,CAAE,CAAC;EACJ;EAEA,IAAKF,IAAI,KAAMA,IAAI,CAACG,IAAI,KAAK,KAAK,IAAIH,IAAI,CAACG,IAAI,KAAKR,GAAG,CAAE,EAAG;IAC3D,MAAMS,YAAY,GAAG;MACpB,GAAGJ,IAAI,CAACK,KAAK;MACbC,KAAK,EAAEL,IAAI;MACXM,MAAM,EAAEN,IAAI;MACZ,GAAGC;IACJ,CAAC;IAED,oBAAOJ,IAAA,CAACH,GAAG;MAAA,GAAMS;IAAY,CAAI,CAAC;EACnC;EAEA,IAAKV,cAAc,CAAEM,IAAK,CAAC,EAAG;IAC7B,OAAOR,YAAY,CAAEQ,IAAI,EAAE;MAC1B;MACAC,IAAI;MACJ,GAAGC;IACJ,CAAE,CAAC;EACJ;EAEA,OAAOF,IAAI;AACZ;AAEA,eAAeD,IAAI","ignoreList":[]}
+{"version":3,"names":["cloneElement","createElement","isValidElement","SVG","Dashicon","jsx","_jsx","Icon","icon","size","additionalProps","type","appliedProps","props","width","height"],"sources":["@wordpress/components/src/icon/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType, HTMLProps, SVGProps } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcloneElement,\n\tcreateElement,\n\tisValidElement,\n} from '@wordpress/element';\nimport { SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport Dashicon from '../dashicon';\nimport type { IconKey as DashiconIconKey } from '../dashicon/types';\n\nexport type IconType =\n\t| DashiconIconKey\n\t| ComponentType< { size?: number } >\n\t| ( ( props: { size?: number } ) => JSX.Element )\n\t| JSX.Element;\n\ntype AdditionalProps< T > = T extends ComponentType< infer U >\n\t? U\n\t: T extends DashiconIconKey\n\t? SVGProps< SVGSVGElement >\n\t: {};\n\nexport type Props = {\n\t/**\n\t * The icon to render. In most cases, you should use an icon from\n\t * [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).\n\t *\n\t * Other supported values are: component instances, functions,\n\t * [Dashicons](https://developer.wordpress.org/resource/dashicons/)\n\t * (specified as strings), and `null`.\n\t *\n\t * The `size` value, as well as any other additional props, will be passed through.\n\t *\n\t * @default null\n\t */\n\ticon?: IconType | null;\n\t/**\n\t * The size (width and height) of the icon.\n\t *\n\t * Defaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`.\n\t *\n\t * @default `'string' === typeof icon ? 20 : 24`.\n\t */\n\tsize?: number;\n} & AdditionalProps< IconType >;\n\n/**\n * Renders a raw icon without any initial styling or wrappers.\n *\n * ```jsx\n * import { wordpress } from '@wordpress/icons';\n *\n * <Icon icon={ wordpress } />\n * ```\n */\nfunction Icon( {\n\ticon = null,\n\tsize = 'string' === typeof icon ? 20 : 24,\n\t...additionalProps\n}: Props ) {\n\tif ( 'string' === typeof icon ) {\n\t\treturn (\n\t\t\t<Dashicon\n\t\t\t\ticon={ icon }\n\t\t\t\tsize={ size }\n\t\t\t\t{ ...( additionalProps as HTMLProps< HTMLSpanElement > ) }\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( isValidElement( icon ) && Dashicon === icon.type ) {\n\t\treturn cloneElement( icon, {\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\tif ( 'function' === typeof icon ) {\n\t\treturn createElement( icon, {\n\t\t\tsize,\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\tif ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {\n\t\tconst appliedProps = {\n\t\t\t...icon.props,\n\t\t\twidth: size,\n\t\t\theight: size,\n\t\t\t...additionalProps,\n\t\t};\n\n\t\treturn <SVG { ...appliedProps } />;\n\t}\n\n\tif ( isValidElement( icon ) ) {\n\t\treturn cloneElement( icon, {\n\t\t\t// @ts-ignore Just forwarding the size prop along\n\t\t\tsize,\n\t\t\t...additionalProps,\n\t\t} );\n\t}\n\n\treturn icon;\n}\n\nexport default Icon;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SACCA,YAAY,EACZC,aAAa,EACbC,cAAc,QACR,oBAAoB;AAC3B,SAASC,GAAG,QAAQ,uBAAuB;;AAE3C;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuCnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,IAAIA,CAAE;EACdC,IAAI,GAAG,IAAI;EACXC,IAAI,GAAG,QAAQ,KAAK,OAAOD,IAAI,GAAG,EAAE,GAAG,EAAE;EACzC,GAAGE;AACG,CAAC,EAAG;EACV,IAAK,QAAQ,KAAK,OAAOF,IAAI,EAAG;IAC/B,oBACCF,IAAA,CAACF,QAAQ;MACRI,IAAI,EAAGA,IAAM;MACbC,IAAI,EAAGA,IAAM;MAAA,GACNC;IAAe,CACtB,CAAC;EAEJ;EAEA,IAAKR,cAAc,CAAEM,IAAK,CAAC,IAAIJ,QAAQ,KAAKI,IAAI,CAACG,IAAI,EAAG;IACvD,OAAOX,YAAY,CAAEQ,IAAI,EAAE;MAC1B,GAAGE;IACJ,CAAE,CAAC;EACJ;EAEA,IAAK,UAAU,KAAK,OAAOF,IAAI,EAAG;IACjC,OAAOP,aAAa,CAAEO,IAAI,EAAE;MAC3BC,IAAI;MACJ,GAAGC;IACJ,CAAE,CAAC;EACJ;EAEA,IAAKF,IAAI,KAAMA,IAAI,CAACG,IAAI,KAAK,KAAK,IAAIH,IAAI,CAACG,IAAI,KAAKR,GAAG,CAAE,EAAG;IAC3D,MAAMS,YAAY,GAAG;MACpB,GAAGJ,IAAI,CAACK,KAAK;MACbC,KAAK,EAAEL,IAAI;MACXM,MAAM,EAAEN,IAAI;MACZ,GAAGC;IACJ,CAAC;IAED,oBAAOJ,IAAA,CAACH,GAAG;MAAA,GAAMS;IAAY,CAAI,CAAC;EACnC;EAEA,IAAKV,cAAc,CAAEM,IAAK,CAAC,EAAG;IAC7B,OAAOR,YAAY,CAAEQ,IAAI,EAAE;MAC1B;MACAC,IAAI;MACJ,GAAGC;IACJ,CAAE,CAAC;EACJ;EAEA,OAAOF,IAAI;AACZ;AAEA,eAAeD,IAAI","ignoreList":[]}