npm - @wordpress/components - Versions diffs - 28.8.5 → 28.8.7 - Mend

@wordpress/components 28.8.5 → 28.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,9 +2,11 @@
 ## Unreleased
-### Enhancements
+### Bug Fixes
--   `Guide`: Update finish button to use the new default size ([#65680](https://github.com/WordPress/gutenberg/pull/65680)).
+-   `ToggleGroupControl`: Don't set value on focus after a reset ([#66151](https://github.com/WordPress/gutenberg/pull/66151)).
+## 28.8.6 (2024-10-14)
 ### Bug Fixes
@@ -14,6 +16,11 @@
 -   `Composite`: fix legacy support for the store prop ([#65821](https://github.com/WordPress/gutenberg/pull/65821)).
 -   `Composite`: make items tabbable if active element gets removed ([#65720](https://github.com/WordPress/gutenberg/pull/65720)).
 -   `DatePicker`: Use compact button size. ([#65653](https://github.com/WordPress/gutenberg/pull/65653)).
+-   `DropZone`: fix class names on drop ([#65798](https://github.com/WordPress/gutenberg/pull/65798)).
+-   `Tooltip`: add `aria-describedby` to the anchor only if not redundant ([#65989](https://github.com/WordPress/gutenberg/pull/65989)).
+-   `PaletteEdit`: dedupe palette element slugs ([#65772](https://github.com/WordPress/gutenberg/pull/65772)).
+-   `ToggleGroupControl`: Don't autoselect option on first group focus ([#65892](https://github.com/WordPress/gutenberg/pull/65892)).
+-   `Guide`: Update finish button to use the new default size ([#65680](https://github.com/WordPress/gutenberg/pull/65680)).
 ## 28.8.0 (2024-09-19)

package/build/drop-zone/index.js CHANGED Viewed

@@ -95,6 +95,7 @@ function DropZoneComponent({
       setType(_type);
     },
     onDragEnd() {
+      setIsDraggingOverElement(false);
       setIsDraggingOverDocument(false);
       setType(undefined);
     },
@@ -107,8 +108,6 @@ function DropZoneComponent({
   });
   const classes = (0, _clsx.default)('components-drop-zone', className, {
     'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop),
-    'has-dragged-out': !isDraggingOverElement,
-    // Keeping the following classnames for legacy purposes
     'is-dragging-over-document': isDraggingOverDocument,
     'is-dragging-over-element': isDraggingOverElement,
     [`is-dragging-${type}`]: !!type

package/build/drop-zone/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_jsxRuntime","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","type","setType","ref","useDropZone","event","files","dataTransfer","getFilesFromDataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","clsx","jsx","children","jsxs","Icon","icon","upload","__","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/\n `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n \n ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyDropZone = () => {\n * const [ hasDropped, setHasDropped ] = useState( false );\n \n return (\n * <div>\n * { hasDropped ? 'Dropped!' : 'Drop something here' }\n * <DropZone\n * onFilesDrop={ () => setHasDropped( true ) }\n * onHTMLDrop={ () => setHasDropped( true ) }\n * onDrop={ () => setHasDropped( true ) }\n * />\n * </div>\n * );\n * }\n * ```\n /\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/\n\t\t\t From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t /\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/\n\t\t\t From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) \|\|\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument \|\| isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) \|\|\n\t\t\t\t( type === 'html' && onHTMLDrop ) \|\|\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'~~has-dragged-out': ! isDraggingOverElement,\n\t\t// Keeping the following classnames for legacy purposes\n\t\t'~~is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t<div className=\"components-drop-zone__content\">\n\t\t\t\t<div className=\"components-drop-zone__content-inner\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAA8E,IAAAM,WAAA,GAAAN,OAAA;AAZ9E;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASO,iBAAiBA,CAAE;EAClCC,SAAS;EACTC,KAAK;EACLC,WAAW;EACXC,UAAU;EACVC,MAAM;EACN,GAAGC;AACoD,CAAC,EAAG;EAC3D,MAAM,CAAEC,sBAAsB,EAAEC,yBAAyB,CAAE,GAC1D,IAAAC,iBAAQ,EAAY,CAAC;EACtB,MAAM,CAAEC,qBAAqB,EAAEC,wBAAwB,CAAE,GACxD,IAAAF,iBAAQ,EAAY,CAAC;EACtB,MAAM,CAAEG,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAJ,iBAAQ,EAAa,CAAC;EAChD,MAAMK,GAAG,GAAG,IAAAC,kCAAW,EAAE;IACxBV,MAAMA,CAAEW,KAAK,EAAG;MACf,MAAMC,KAAK,GAAGD,KAAK,CAACE,YAAY,GAC7B,IAAAC,6BAAwB,EAAEH,KAAK,CAACE,YAAa,CAAC,GAC9C,EAAE;MACL,MAAME,IAAI,GAAGJ,KAAK,CAACE,YAAY,EAAEG,OAAO,CAAE,WAAY,CAAC;;MAEvD;AACH;AACA;AACA;MACG,IAAKD,IAAI,IAAIhB,UAAU,EAAG;QACzBA,UAAU,CAAEgB,IAAK,CAAC;MACnB,CAAC,MAAM,IAAKH,KAAK,CAACK,MAAM,IAAInB,WAAW,EAAG;QACzCA,WAAW,CAAEc,KAAM,CAAC;MACrB,CAAC,MAAM,IAAKZ,MAAM,EAAG;QACpBA,MAAM,CAAEW,KAAM,CAAC;MAChB;IACD,CAAC;IACDO,WAAWA,CAAEP,KAAK,EAAG;MACpBR,yBAAyB,CAAE,IAAK,CAAC;MAEjC,IAAIgB,KAAe,GAAG,SAAS;;MAE/B;AACH;AACA;AACA;MACG,IAAKR,KAAK,CAACE,YAAY,EAAEO,KAAK,CAACC,QAAQ,CAAE,WAAY,CAAC,EAAG;QACxDF,KAAK,GAAG,MAAM;MACf,CAAC,MAAM;MACN;MACA;MACAR,KAAK,CAACE,YAAY,EAAEO,KAAK,CAACC,QAAQ,CAAE,OAAQ,CAAC,IAC7C,CAAEV,KAAK,CAACE,YAAY,GACjB,IAAAC,6BAAwB,EAAEH,KAAK,CAACE,YAAa,CAAC,GAC9C,EAAE,EACHI,MAAM,GAAG,CAAC,EACX;QACDE,KAAK,GAAG,MAAM;MACf;MAEAX,OAAO,CAAEW,KAAM,CAAC;IACjB,CAAC;IACDG,SAASA,CAAA,EAAG;~~MACXnB~~,yBAAyB,CAAE,KAAM,CAAC;MAClCK,OAAO,CAAEe,SAAU,CAAC;IACrB,CAAC;IACDC,WAAWA,CAAA,EAAG;MACblB,wBAAwB,CAAE,IAAK,CAAC;IACjC,CAAC;IACDmB,WAAWA,CAAA,EAAG;MACbnB,wBAAwB,CAAE,KAAM,CAAC;IAClC;EACD,CAAE,CAAC;EAEH,MAAMoB,OAAO,GAAG,IAAAC,aAAI,EAAE,sBAAsB,EAAE/B,SAAS,EAAE;IACxD,WAAW,EACV,CAAEM,sBAAsB,IAAIG,qBAAqB,MAC7CE,IAAI,KAAK,MAAM,IAAIT,WAAW,IAC/BS,IAAI,KAAK,MAAM,IAAIR,UAAY,IAC/BQ,IAAI,KAAK,SAAS,IAAIP,MAAQ,CAAE;IACpC,~~iBAAiB,EAAE,CAAEK,qBAAqB;IAC1C;IACA,~~2BAA2B,~~EAAEH~~,sBAAsB;IACnD,0BAA0B,EAAEG,qBAAqB;IACjD,CAAG,eAAeE,IAAM,EAAC,GAAI,CAAC,CAAEA;EACjC,CAAE,CAAC;EAEH,oBACC,IAAAb,WAAA,CAAAkC,GAAA;IAAA,GAAU3B,SAAS;IAAGQ,GAAG,EAAGA,GAAK;IAACb,SAAS,EAAG8B,OAAS;IAAAG,QAAA,eACtD,IAAAnC,WAAA,CAAAkC,GAAA;MAAKhC,SAAS,EAAC,+BAA+B;MAAAiC,QAAA,eAC7C,IAAAnC,WAAA,CAAAoC,IAAA;QAAKlC,SAAS,EAAC,qCAAqC;QAAAiC,QAAA,gBACnD,IAAAnC,WAAA,CAAAkC,GAAA,EAACrC,MAAA,CAAAwC,IAAI;UACJC,IAAI,EAAGC,aAAQ;UACfrC,SAAS,EAAC;QAAoC,CAC9C,CAAC,eACF,IAAAF,WAAA,CAAAkC,GAAA;UAAMhC,SAAS,EAAC,oCAAoC;UAAAiC,QAAA,EACjDhC,KAAK,GAAGA,KAAK,GAAG,IAAAqC,QAAE,EAAE,sBAAuB;QAAC,CACzC,CAAC;MAAA,CACH;IAAC,CACF;EAAC,CACF,CAAC;AAER;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc1C,iBAAiB","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_jsxRuntime","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","type","setType","ref","useDropZone","event","files","dataTransfer","getFilesFromDataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","clsx","jsx","children","jsxs","Icon","icon","upload","__","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/\n `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n \n ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyDropZone = () => {\n * const [ hasDropped, setHasDropped ] = useState( false );\n \n return (\n * <div>\n * { hasDropped ? 'Dropped!' : 'Drop something here' }\n * <DropZone\n * onFilesDrop={ () => setHasDropped( true ) }\n * onHTMLDrop={ () => setHasDropped( true ) }\n * onDrop={ () => setHasDropped( true ) }\n * />\n * </div>\n * );\n * }\n * ```\n /\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/\n\t\t\t From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t /\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/\n\t\t\t From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) \|\|\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument \|\| isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) \|\|\n\t\t\t\t( type === 'html' && onHTMLDrop ) \|\|\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t<div className=\"components-drop-zone__content\">\n\t\t\t\t<div className=\"components-drop-zone__content-inner\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAA8E,IAAAM,WAAA,GAAAN,OAAA;AAZ9E;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASO,iBAAiBA,CAAE;EAClCC,SAAS;EACTC,KAAK;EACLC,WAAW;EACXC,UAAU;EACVC,MAAM;EACN,GAAGC;AACoD,CAAC,EAAG;EAC3D,MAAM,CAAEC,sBAAsB,EAAEC,yBAAyB,CAAE,GAC1D,IAAAC,iBAAQ,EAAY,CAAC;EACtB,MAAM,CAAEC,qBAAqB,EAAEC,wBAAwB,CAAE,GACxD,IAAAF,iBAAQ,EAAY,CAAC;EACtB,MAAM,CAAEG,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAJ,iBAAQ,EAAa,CAAC;EAChD,MAAMK,GAAG,GAAG,IAAAC,kCAAW,EAAE;IACxBV,MAAMA,CAAEW,KAAK,EAAG;MACf,MAAMC,KAAK,GAAGD,KAAK,CAACE,YAAY,GAC7B,IAAAC,6BAAwB,EAAEH,KAAK,CAACE,YAAa,CAAC,GAC9C,EAAE;MACL,MAAME,IAAI,GAAGJ,KAAK,CAACE,YAAY,EAAEG,OAAO,CAAE,WAAY,CAAC;;MAEvD;AACH;AACA;AACA;MACG,IAAKD,IAAI,IAAIhB,UAAU,EAAG;QACzBA,UAAU,CAAEgB,IAAK,CAAC;MACnB,CAAC,MAAM,IAAKH,KAAK,CAACK,MAAM,IAAInB,WAAW,EAAG;QACzCA,WAAW,CAAEc,KAAM,CAAC;MACrB,CAAC,MAAM,IAAKZ,MAAM,EAAG;QACpBA,MAAM,CAAEW,KAAM,CAAC;MAChB;IACD,CAAC;IACDO,WAAWA,CAAEP,KAAK,EAAG;MACpBR,yBAAyB,CAAE,IAAK,CAAC;MAEjC,IAAIgB,KAAe,GAAG,SAAS;;MAE/B;AACH;AACA;AACA;MACG,IAAKR,KAAK,CAACE,YAAY,EAAEO,KAAK,CAACC,QAAQ,CAAE,WAAY,CAAC,EAAG;QACxDF,KAAK,GAAG,MAAM;MACf,CAAC,MAAM;MACN;MACA;MACAR,KAAK,CAACE,YAAY,EAAEO,KAAK,CAACC,QAAQ,CAAE,OAAQ,CAAC,IAC7C,CAAEV,KAAK,CAACE,YAAY,GACjB,IAAAC,6BAAwB,EAAEH,KAAK,CAACE,YAAa,CAAC,GAC9C,EAAE,EACHI,MAAM,GAAG,CAAC,EACX;QACDE,KAAK,GAAG,MAAM;MACf;MAEAX,OAAO,CAAEW,KAAM,CAAC;IACjB,CAAC;IACDG,SAASA,CAAA,EAAG;MACXhB,wBAAwB,CAAE,KAAM,CAAC;MACjCH,yBAAyB,CAAE,KAAM,CAAC;MAClCK,OAAO,CAAEe,SAAU,CAAC;IACrB,CAAC;IACDC,WAAWA,CAAA,EAAG;MACblB,wBAAwB,CAAE,IAAK,CAAC;IACjC,CAAC;IACDmB,WAAWA,CAAA,EAAG;MACbnB,wBAAwB,CAAE,KAAM,CAAC;IAClC;EACD,CAAE,CAAC;EAEH,MAAMoB,OAAO,GAAG,IAAAC,aAAI,EAAE,sBAAsB,EAAE/B,SAAS,EAAE;IACxD,WAAW,EACV,CAAEM,sBAAsB,IAAIG,qBAAqB,MAC7CE,IAAI,KAAK,MAAM,IAAIT,WAAW,IAC/BS,IAAI,KAAK,MAAM,IAAIR,UAAY,IAC/BQ,IAAI,KAAK,SAAS,IAAIP,MAAQ,CAAE;IACpC,2BAA2B,EAAEE,sBAAsB;IACnD,0BAA0B,EAAEG,qBAAqB;IACjD,CAAG,eAAeE,IAAM,EAAC,GAAI,CAAC,CAAEA;EACjC,CAAE,CAAC;EAEH,oBACC,IAAAb,WAAA,CAAAkC,GAAA;IAAA,GAAU3B,SAAS;IAAGQ,GAAG,EAAGA,GAAK;IAACb,SAAS,EAAG8B,OAAS;IAAAG,QAAA,eACtD,IAAAnC,WAAA,CAAAkC,GAAA;MAAKhC,SAAS,EAAC,+BAA+B;MAAAiC,QAAA,eAC7C,IAAAnC,WAAA,CAAAoC,IAAA;QAAKlC,SAAS,EAAC,qCAAqC;QAAAiC,QAAA,gBACnD,IAAAnC,WAAA,CAAAkC,GAAA,EAACrC,MAAA,CAAAwC,IAAI;UACJC,IAAI,EAAGC,aAAQ;UACfrC,SAAS,EAAC;QAAoC,CAC9C,CAAC,eACF,IAAAF,WAAA,CAAAkC,GAAA;UAAMhC,SAAS,EAAC,oCAAoC;UAAAiC,QAAA,EACjDhC,KAAK,GAAGA,KAAK,GAAG,IAAAqC,QAAE,EAAE,sBAAuB;QAAC,CACzC,CAAC;MAAA,CACH;IAAC,CACF;EAAC,CACF,CAAC;AAER;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc1C,iBAAiB","ignoreList":[]}

package/build/palette-edit/index.js CHANGED Viewed

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PaletteEdit = PaletteEdit;
+exports.deduplicateElementSlugs = deduplicateElementSlugs;
 exports.default = void 0;
 exports.getNameAndSlugForPosition = getNameAndSlugForPosition;
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -54,6 +55,28 @@ function NameInput({
   });
 }
+/*
+ * Deduplicates the slugs of the provided elements.
+ */
+function deduplicateElementSlugs(elements) {
+  const slugCounts = {};
+  return elements.map(element => {
+    var _newSlug;
+    let newSlug;
+    const {
+      slug
+    } = element;
+    slugCounts[slug] = (slugCounts[slug] || 0) + 1;
+    if (slugCounts[slug] > 1) {
+      newSlug = `${slug}-${slugCounts[slug] - 1}`;
+    }
+    return {
+      ...element,
+      slug: (_newSlug = newSlug) !== null && _newSlug !== void 0 ? _newSlug : slug
+    };
+  });
+}
 /**
  * Returns a name and slug for a palette item. The name takes the format "Color + id".
  * To ensure there are no duplicate ids, this function checks all slugs.
@@ -214,7 +237,7 @@ function PaletteEditListView({
   (0, _element.useEffect)(() => {
     elementsReferenceRef.current = elements;
   }, [elements]);
-  const debounceOnChange = (0, _compose.useDebounce)(onChange, 100);
+  const debounceOnChange = (0, _compose.useDebounce)(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vStack.VStack, {
     spacing: 3,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemGroup.ItemGroup, {

package/build/palette-edit/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_i18n","_icons","_compose","_button","_colorPicker","_flex","_hStack","_itemGroup","_vStack","_gradientPicker","_colorPalette","_dropdownMenu","_popover","_styles","_navigableContainer","_constants","_customGradientPicker","_strings","_jsxRuntime","DEFAULT_COLOR","NameInput","value","onChange","label","jsx","NameInputControl","hideLabelFromVision","getNameAndSlugForPosition","elements","slugPrefix","nameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","name","sprintf","__","ColorPickerPopover","isGradient","element","popoverProps","receivedPopoverProps","onClose","useMemo","shift","offset","resize","placement","className","clsx","jsxs","default","children","ColorPicker","color","enableAlpha","newColor","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","onRemove","isEditingColor","setIsEditingColor","useState","popoverAnchor","setPopoverAnchor","anchor","PaletteItem","ref","as","HStack","justify","onClick","trim","length","style","padding","IndicatorStyled","colorValue","FlexItem","nextName","kebabCase","NameContainer","RemoveButton","size","icon","lineSolid","PaletteEditListView","addColorRef","elementsReferenceRef","useRef","useEffect","current","debounceOnChange","useDebounce","VStack","spacing","ItemGroup","isRounded","map","index","newElement","currentElement","currentIndex","newElements","filter","_currentElement","undefined","focus","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","isEditing","setIsEditing","editingElement","setEditingElement","isAdding","elementsLength","hasElements","onSelectPaletteItem","useCallback","newEditingElementIndex","selectedElement","key","PaletteEditStyles","PaletteHeading","level","PaletteActionsContainer","DoneButton","isPressed","plus","DEFAULT_GRADIENT","moreVertical","toggleProps","Fragment","NavigableMenu","role","variant","PaletteEditContents","clearable","disableCustomGradients","disableCustomColors","_default","exports"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n\tPaletteEditContents,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { kebabCase } from '../utils/strings';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/\n Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n \n @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n \n @return A name and slug for the new palette item.\n /\nexport function getNameAndSlugForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn {\n\t\tname: sprintf(\n\t\t\t/ translators: %s: is an id for a custom color /\n\t\t\t__( 'Color %s' ),\n\t\t\tposition\n\t\t),\n\t\tslug: `${ slugPrefix }color-${ position }`,\n\t};\n}\n\nfunction ColorPickerPopover< T extends Color \| Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: clsx(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color \| Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tonRemove,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst value = isGradient ? element.gradient : element.color;\n\tconst [ isEditingColor, setIsEditingColor ] = useState( false );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem ref={ setPopoverAnchor } as=\"div\">\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsEditingColor( true );\n\t\t\t\t\t} }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t__( 'Edit: %s' ),\n\t\t\t\t\t\telement.name.trim().length ? element.name : value\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ { padding: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<IndicatorStyled colorValue={ value } />\n\t\t\t\t</Button>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>\n\t\t\t\t\t\t\t{ element.name.trim().length\n\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t: / Fall back to non-breaking space to maintain height /\n\t\t\t\t\t\t\t\t '\\u00A0' }\n\t\t\t\t\t\t</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t\t\t__( 'Remove color: %s' ),\n\t\t\t\t\t\t\t\telement.name.trim().length\n\t\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t\t: value\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditingColor && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tonClose={ () => setIsEditingColor( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction PaletteEditListView< T extends Color \| Gradient >( {\n\telements,\n\tonChange,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n\taddColorRef,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReferenceRef = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReferenceRef.current = elements;\n\t}, [ elements ] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\taddColorRef.current?.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/\n Allows editing a palette of colors or gradients.\n \n ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n \n return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber \| null \| undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\tconst addColorRef = useRef< HTMLButtonElement \| null >( null );\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<HStack>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tref={ addColorRef }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst { name, slug } =\n\t\t\t\t\t\t\t\t\tgetNameAndSlugForPosition(\n\t\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing \|\|\n\t\t\t\t\t\t\t! canOnlyChangeValues \|\|\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</HStack>\n\t\t\t{ hasElements && (\n\t\t\t\t<PaletteEditContents>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\taddColorRef={ addColorRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</PaletteEditContents>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage && (\n\t\t\t\t<PaletteEditContents>{ emptyMessage }</PaletteEditContents>\n\t\t\t) }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAOA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAKA,IAAAK,OAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AACA,IAAAU,OAAA,GAAAV,OAAA;AACA,IAAAW,eAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,aAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,aAAA,GAAAd,sBAAA,CAAAC,OAAA;AACA,IAAAc,QAAA,GAAAf,sBAAA,CAAAC,OAAA;AACA,IAAAe,OAAA,GAAAf,OAAA;AAYA,IAAAgB,mBAAA,GAAAhB,OAAA;AACA,IAAAiB,UAAA,GAAAjB,OAAA;AACA,IAAAkB,qBAAA,GAAAnB,sBAAA,CAAAC,OAAA;AACA,IAAAmB,QAAA,GAAAnB,OAAA;AAA6C,IAAAoB,WAAA,GAAApB,OAAA;AA/C7C;AACA;AACA;;AAGA;AACA;AACA;;AAYA;AACA;AACA;;AAsCA,MAAMqB,aAAa,GAAG,MAAM;AAE5B,SAASC,SAASA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAsB,CAAC,EAAG;EAChE,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACX,OAAA,CAAAY,gBAAgB;IAChBF,KAAK,EAAGA,KAAO;IACfG,mBAAmB;IACnBL,KAAK,EAAGA,KAAO;IACfC,QAAQ,EAAGA;EAAU,CACrB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,yBAAyBA,CACxCC,QAA0B,EAC1BC,UAAkB,EACjB;EACD,MAAMC,SAAS,GAAG,IAAIC,MAAM,CAAG,IAAIF,UAAY,iBAAiB,CAAC;EACjE,MAAMG,QAAQ,GAAGJ,QAAQ,CAACK,MAAM,CAAE,CAAEC,aAAa,EAAEC,YAAY,KAAM;IACpE,IAAK,OAAOA,YAAY,EAAEC,IAAI,KAAK,QAAQ,EAAG;MAC7C,MAAMC,OAAO,GAAGF,YAAY,EAAEC,IAAI,CAACE,KAAK,CAAER,SAAU,CAAC;MACrD,IAAKO,OAAO,EAAG;QACd,MAAME,EAAE,GAAGC,QAAQ,CAAEH,OAAO,CAAE,CAAC,CAAE,EAAE,EAAG,CAAC;QACvC,IAAKE,EAAE,IAAIL,aAAa,EAAG;UAC1B,OAAOK,EAAE,GAAG,CAAC;QACd;MACD;IACD;IACA,OAAOL,aAAa;EACrB,CAAC,EAAE,CAAE,CAAC;EAEN,OAAO;IACNO,IAAI,EAAE,IAAAC,aAAO,GACZ;IACA,IAAAC,QAAE,EAAE,UAAW,CAAC,EAChBX,QACD,CAAC;IACDI,IAAI,EAAG,GAAGP,UAAY,SAASG,QAAU;EAC1C,CAAC;AACF;AAEA,SAASY,kBAAkBA,CAAgC;EAC1DC,UAAU;EACVC,OAAO;EACPxB,QAAQ;EACRyB,YAAY,EAAEC,oBAAoB;EAClCC,OAAO,GAAGA,CAAA,KAAM,CAAC;AACY,CAAC,EAAG;EACjC,MAAMF,YAA4D,GACjE,IAAAG,gBAAO,EACN,OAAQ;IACPC,KAAK,EAAE,IAAI;IACXC,MAAM,EAAE,EAAE;IACV;IACA;IACA;IACAC,MAAM,EAAE,KAAK;IACbC,SAAS,EAAE,YAAY;IACvB,GAAGN,oBAAoB;IACvBO,SAAS,EAAE,IAAAC,aAAI,EACd,kCAAkC,EAClCR,oBAAoB,EAAEO,SACvB;EACD,CAAC,CAAE,EACH,CAAEP,oBAAoB,CACvB,CAAC;EAEF,oBACC,IAAA9B,WAAA,CAAAuC,IAAA,EAAC7C,QAAA,CAAA8C,OAAO;IAAA,GAAMX,YAAY;IAAGE,OAAO,EAAGA,OAAS;IAAAU,QAAA,GAC7C,CAAEd,UAAU,iBACb,IAAA3B,WAAA,CAAAM,GAAA,EAACpB,YAAA,CAAAwD,WAAW;MACXC,KAAK,EAAGf,OAAO,CAACe,KAAO;MACvBC,WAAW;MACXxC,QAAQ,EAAKyC,QAAQ,IAAM;QAC1BzC,QAAQ,CAAE;UACT,GAAGwB,OAAO;UACVe,KAAK,EAAEE;QACR,CAAE,CAAC;MACJ;IAAG,CACH,CACD,EACClB,UAAU,iBACX,IAAA3B,WAAA,CAAAM,GAAA;MAAK+B,SAAS,EAAC,kDAAkD;MAAAI,QAAA,eAChE,IAAAzC,WAAA,CAAAM,GAAA,EAACR,qBAAA,CAAA0C,OAAoB;QACpBM,iCAAiC;QACjC3C,KAAK,EAAGyB,OAAO,CAACmB,QAAU;QAC1B3C,QAAQ,EAAK4C,WAAW,IAAM;UAC7B5C,QAAQ,CAAE;YACT,GAAGwB,OAAO;YACVmB,QAAQ,EAAEC;UACX,CAAE,CAAC;QACJ;MAAG,CACH;IAAC,CACE,CACL;EAAA,CACO,CAAC;AAEZ;AAEA,SAASC,MAAMA,CAAgC;EAC9CC,mBAAmB;EACnBtB,OAAO;EACPxB,QAAQ;EACR+C,QAAQ;EACRtB,YAAY,EAAEC,oBAAoB;EAClCnB,UAAU;EACVgB;AACiB,CAAC,EAAG;EACrB,MAAMxB,KAAK,GAAGwB,UAAU,GAAGC,OAAO,CAACmB,QAAQ,GAAGnB,OAAO,CAACe,KAAK;EAC3D,MAAM,CAAES,cAAc,EAAEC,iBAAiB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;;EAE/D;EACA;EACA,MAAM,CAAEC,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAF,iBAAQ,EAAE,IAAK,CAAC;EAC5D,MAAMzB,YAAY,GAAG,IAAAG,gBAAO,EAC3B,OAAQ;IACP,GAAGF,oBAAoB;IACvB;IACA2B,MAAM,EAAEF;EACT,CAAC,CAAE,EACH,CAAEA,aAAa,EAAEzB,oBAAoB,CACtC,CAAC;EAED,oBACC,IAAA9B,WAAA,CAAAuC,IAAA,EAAC5C,OAAA,CAAA+D,WAAW;IAACC,GAAG,EAAGH,gBAAkB;IAACI,EAAE,EAAC,KAAK;IAAAnB,QAAA,gBAC7C,IAAAzC,WAAA,CAAAuC,IAAA,EAACnD,OAAA,CAAAyE,MAAM;MAACC,OAAO,EAAC,YAAY;MAAArB,QAAA,gBAC3B,IAAAzC,WAAA,CAAAM,GAAA,EAACrB,OAAA,CAAAuD,OAAM;QACNuB,OAAO,EAAGA,CAAA,KAAM;UACfV,iBAAiB,CAAE,IAAK,CAAC;QAC1B,CAAG;QACH,cAAa,IAAA7B,aAAO;QACnB;QACA,IAAAC,QAAE,EAAE,UAAW,CAAC,EAChBG,OAAO,CAACL,IAAI,CAACyC,IAAI,CAAC,CAAC,CAACC,MAAM,GAAGrC,OAAO,CAACL,IAAI,GAAGpB,KAC7C,CAAG;QACH+D,KAAK,EAAG;UAAEC,OAAO,EAAE;QAAE,CAAG;QAAA1B,QAAA,eAExB,IAAAzC,WAAA,CAAAM,GAAA,EAACX,OAAA,CAAAyE,eAAe;UAACC,UAAU,EAAGlE;QAAO,CAAE;MAAC,CACjC,CAAC,eACT,IAAAH,WAAA,CAAAM,GAAA,EAACnB,KAAA,CAAAmF,QAAQ;QAAA7B,QAAA,EACN,CAAES,mBAAmB,gBACtB,IAAAlD,WAAA,CAAAM,GAAA,EAACJ,SAAS;UACTG,KAAK,EACJsB,UAAU,GACP,IAAAF,QAAE,EAAE,eAAgB,CAAC,GACrB,IAAAA,QAAE,EAAE,YAAa,CACpB;UACDtB,KAAK,EAAGyB,OAAO,CAACL,IAAM;UACtBnB,QAAQ,EAAKmE,QAAiB,IAC7BnE,QAAQ,CAAE;YACT,GAAGwB,OAAO;YACVL,IAAI,EAAEgD,QAAQ;YACdrD,IAAI,EACHP,UAAU,GACV,IAAA6D,kBAAS,EAAED,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,EAAG;UAC5B,CAAE;QACF,CACD,CAAC,gBAEF,IAAAvE,WAAA,CAAAM,GAAA,EAACX,OAAA,CAAA8E,aAAa;UAAAhC,QAAA,EACXb,OAAO,CAACL,IAAI,CAACyC,IAAI,CAAC,CAAC,CAACC,MAAM,GACzBrC,OAAO,CAACL,IAAI,GACZ;UACA;QAAQ,CACG;MACf,CACQ,CAAC,EACT,CAAE2B,mBAAmB,iBACtB,IAAAlD,WAAA,CAAAM,GAAA,EAACnB,KAAA,CAAAmF,QAAQ;QAAA7B,QAAA,eACR,IAAAzC,WAAA,CAAAM,GAAA,EAACX,OAAA,CAAA+E,YAAY;UACZC,IAAI,EAAC,OAAO;UACZC,IAAI,EAAGC,gBAAW;UAClBxE,KAAK,EAAG,IAAAmB,aAAO;UACd;UACA,IAAAC,QAAE,EAAE,kBAAmB,CAAC,EACxBG,OAAO,CAACL,IAAI,CAACyC,IAAI,CAAC,CAAC,CAACC,MAAM,GACvBrC,OAAO,CAACL,IAAI,GACZpB,KACJ,CAAG;UACH4D,OAAO,EAAGZ;QAAU,CACpB;MAAC,CACO,CACV;IAAA,CACM,CAAC,EACPC,cAAc,iBACf,IAAApD,WAAA,CAAAM,GAAA,EAACoB,kBAAkB;MAClBC,UAAU,EAAGA,UAAY;MACzBvB,QAAQ,EAAGA,QAAU;MACrBwB,OAAO,EAAGA,OAAS;MACnBC,YAAY,EAAGA,YAAc;MAC7BE,OAAO,EAAGA,CAAA,KAAMsB,iBAAiB,CAAE,KAAM;IAAG,CAC5C,CACD;EAAA,CACW,CAAC;AAEhB;AAEA,SAASyB,mBAAmBA,CAAgC;EAC3DpE,QAAQ;EACRN,QAAQ;EACR8C,mBAAmB;EACnBvC,UAAU;EACVgB,UAAU;EACVE,YAAY;EACZkD;AAC8B,CAAC,EAAG;EAClC;EACA,MAAMC,oBAAoB,GAAG,IAAAC,eAAM,EAAoB,CAAC;EACxD,IAAAC,kBAAS,EAAE,MAAM;IAChBF,oBAAoB,CAACG,OAAO,GAAGzE,QAAQ;EACxC,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,MAAM0E,gBAAgB,GAAG,IAAAC,oBAAW,EAAEjF,QAAQ,EAAE,GAAI,CAAC;EAErD,oBACC,IAAAJ,WAAA,CAAAM,GAAA,EAAChB,OAAA,CAAAgG,MAAM;IAACC,OAAO,EAAG,CAAG;IAAA9C,QAAA,eACpB,IAAAzC,WAAA,CAAAM,GAAA,EAACjB,UAAA,CAAAmG,SAAS;MAACC,SAAS;MAAAhD,QAAA,EACjB/B,QAAQ,CAACgF,GAAG,CAAE,CAAE9D,OAAO,EAAE+D,KAAK,kBAC/B,IAAA3F,WAAA,CAAAM,GAAA,EAAC2C,MAAM;QACNtB,UAAU,EAAGA,UAAY;QACzBuB,mBAAmB,EAAGA,mBAAqB;QAE3CtB,OAAO,EAAGA,OAAS;QACnBxB,QAAQ,EAAKwF,UAAU,IAAM;UAC5BR,gBAAgB,CACf1E,QAAQ,CAACgF,GAAG,CACX,CAAEG,cAAc,EAAEC,YAAY,KAAM;YACnC,IAAKA,YAAY,KAAKH,KAAK,EAAG;cAC7B,OAAOC,UAAU;YAClB;YACA,OAAOC,cAAc;UACtB,CACD,CACD,CAAC;QACF,CAAG;QACH1C,QAAQ,EAAGA,CAAA,KAAM;UAChB,MAAM4C,WAAW,GAAGrF,QAAQ,CAACsF,MAAM,CAClC,CAAEC,eAAe,EAAEH,YAAY,KAAM;YACpC,IAAKA,YAAY,KAAKH,KAAK,EAAG;cAC7B,OAAO,KAAK;YACb;YACA,OAAO,IAAI;UACZ,CACD,CAAC;UACDvF,QAAQ,CACP2F,WAAW,CAAC9B,MAAM,GAAG8B,WAAW,GAAGG,SACpC,CAAC;UACDnB,WAAW,CAACI,OAAO,EAAEgB,KAAK,CAAC,CAAC;QAC7B,CAAG;QACHxF,UAAU,EAAGA,UAAY;QACzBkB,YAAY,EAAGA;MAAc,GA7BvB8D,KA8BN,CACA;IAAC,CACO;EAAC,CACL,CAAC;AAEX;AAEA,MAAMS,WAAoB,GAAG,EAAE;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAAE;EAC5BC,SAAS;EACTC,MAAM,GAAGH,WAAW;EACpBhG,QAAQ;EACRoG,YAAY;EACZC,wBAAwB,GAAG,CAAC;EAC5BC,YAAY;EACZxD,mBAAmB;EACnByD,QAAQ;EACRhG,UAAU,GAAG,EAAE;EACfkB;AACiB,CAAC,EAAG;EACrB,MAAMF,UAAU,GAAG,CAAC,CAAE2E,SAAS;EAC/B,MAAM5F,QAAQ,GAAGiB,UAAU,GAAG2E,SAAS,GAAGC,MAAM;EAChD,MAAM,CAAEK,SAAS,EAAEC,YAAY,CAAE,GAAG,IAAAvD,iBAAQ,EAAE,KAAM,CAAC;EACrD,MAAM,CAAEwD,cAAc,EAAEC,iBAAiB,CAAE,GAAG,IAAAzD,iBAAQ,EAEnD,IAAK,CAAC;EACT,MAAM0D,QAAQ,GACbJ,SAAS,IACT,CAAC,CAAEE,cAAc,IACjBpG,QAAQ,CAAEoG,cAAc,CAAE,IAC1B,CAAEpG,QAAQ,CAAEoG,cAAc,CAAE,CAAC5F,IAAI;EAClC,MAAM+F,cAAc,GAAGvG,QAAQ,CAACuD,MAAM;EACtC,MAAMiD,WAAW,GAAGD,cAAc,GAAG,CAAC;EACtC,MAAM7B,gBAAgB,GAAG,IAAAC,oBAAW,EAAEjF,QAAQ,EAAE,GAAI,CAAC;EACrD,MAAM+G,mBAAmB,GAAG,IAAAC,oBAAW,EACtC,CACCjH,KAA8C,EAC9CkH,sBAA+B,KAC3B;IACJ,MAAMC,eAAe,GACpBD,sBAAsB,KAAKnB,SAAS,GACjCA,SAAS,GACTxF,QAAQ,CAAE2G,sBAAsB,CAAE;IACtC,MAAME,GAAG,GAAG5F,UAAU,GAAG,UAAU,GAAG,OAAO;IAC7C;IACA,IAAK,CAAC,CAAE2F,eAAe,IAAIA,eAAe,CAAEC,GAAG,CAAE,KAAKpH,KAAK,EAAG;MAC7D4G,iBAAiB,CAAEM,sBAAuB,CAAC;IAC5C,CAAC,MAAM;MACNR,YAAY,CAAE,IAAK,CAAC;IACrB;EACD,CAAC,EACD,CAAElF,UAAU,EAAEjB,QAAQ,CACvB,CAAC;EAED,MAAMqE,WAAW,GAAG,IAAAE,eAAM,EAA8B,IAAK,CAAC;EAE9D,oBACC,IAAAjF,WAAA,CAAAuC,IAAA,EAAC5C,OAAA,CAAA6H,iBAAiB;IAAA/E,QAAA,gBACjB,IAAAzC,WAAA,CAAAuC,IAAA,EAACnD,OAAA,CAAAyE,MAAM;MAAApB,QAAA,gBACN,IAAAzC,WAAA,CAAAM,GAAA,EAACX,OAAA,CAAA8H,cAAc;QAACC,KAAK,EAAGjB,wBAA0B;QAAAhE,QAAA,EAC/C+D;MAAY,CACC,CAAC,eACjB,IAAAxG,WAAA,CAAAuC,IAAA,EAAC5C,OAAA,CAAAgI,uBAAuB;QAAAlF,QAAA,GACrByE,WAAW,IAAIN,SAAS,iBACzB,IAAA5G,WAAA,CAAAM,GAAA,EAACX,OAAA,CAAAiI,UAAU;UACVjD,IAAI,EAAC,OAAO;UACZZ,OAAO,EAAGA,CAAA,KAAM;YACf8C,YAAY,CAAE,KAAM,CAAC;YACrBE,iBAAiB,CAAE,IAAK,CAAC;UAC1B,CAAG;UAAAtE,QAAA,EAED,IAAAhB,QAAE,EAAE,MAAO;QAAC,CACH,CACZ,EACC,CAAEyB,mBAAmB,iBACtB,IAAAlD,WAAA,CAAAM,GAAA,EAACrB,OAAA,CAAAuD,OAAM;UACNmB,GAAG,EAAGoB,WAAa;UACnBJ,IAAI,EAAC,OAAO;UACZkD,SAAS,EAAGb,QAAU;UACtBpC,IAAI,EAAGkD,WAAM;UACbzH,KAAK,EACJsB,UAAU,GACP,IAAAF,QAAE,EAAE,cAAe,CAAC,GACpB,IAAAA,QAAE,EAAE,WAAY,CACnB;UACDsC,OAAO,EAAGA,CAAA,KAAM;YACf,MAAM;cAAExC,IAAI;cAAEL;YAAK,CAAC,GACnBT,yBAAyB,CACxBC,QAAQ,EACRC,UACD,CAAC;YAEF,IAAK,CAAC,CAAE2F,SAAS,EAAG;cACnBlG,QAAQ,CAAE,CACT,GAAGkG,SAAS,EACZ;gBACCvD,QAAQ,EAAEgF,2BAAgB;gBAC1BxG,IAAI;gBACJL;cACD,CAAC,CACA,CAAC;YACJ,CAAC,MAAM;cACNd,QAAQ,CAAE,CACT,GAAGmG,MAAM,EACT;gBACC5D,KAAK,EAAE1C,aAAa;gBACpBsB,IAAI;gBACJL;cACD,CAAC,CACA,CAAC;YACJ;YACA2F,YAAY,CAAE,IAAK,CAAC;YACpBE,iBAAiB,CAAErG,QAAQ,CAACuD,MAAO,CAAC;UACrC;QAAG,CACH,CACD,EAECiD,WAAW,KACV,CAAEN,SAAS,IACZ,CAAE1D,mBAAmB,IACrByD,QAAQ,CAAE,iBACV,IAAA3G,WAAA,CAAAM,GAAA,EAACb,aAAA,CAAA+C,OAAY;UACZoC,IAAI,EAAGoD,mBAAc;UACrB3H,KAAK,EACJsB,UAAU,GACP,IAAAF,QAAE,EAAE,kBAAmB,CAAC,GACxB,IAAAA,QAAE,EAAE,eAAgB,CACvB;UACDwG,WAAW,EAAG;YACbtD,IAAI,EAAE;UACP,CAAG;UAAAlC,QAAA,EAEDA,CAAE;YAAEV;UAAiC,CAAC,kBACvC,IAAA/B,WAAA,CAAAM,GAAA,EAAAN,WAAA,CAAAkI,QAAA;YAAAzF,QAAA,eACC,IAAAzC,WAAA,CAAAuC,IAAA,EAAC3C,mBAAA,CAAAuI,aAAa;cAACC,IAAI,EAAC,MAAM;cAAA3F,QAAA,GACvB,CAAEmE,SAAS,iBACZ,IAAA5G,WAAA,CAAAM,GAAA,EAACrB,OAAA,CAAAuD,OAAM;gBACN6F,OAAO,EAAC,UAAU;gBAClBtE,OAAO,EAAGA,CAAA,KAAM;kBACf8C,YAAY,CAAE,IAAK,CAAC;kBACpB9E,OAAO,CAAC,CAAC;gBACV,CAAG;gBACHM,SAAS,EAAC,sCAAsC;gBAAAI,QAAA,EAE9C,IAAAhB,QAAE,EAAE,cAAe;cAAC,CACf,CACR,EACC,CAAEyB,mBAAmB,iBACtB,IAAAlD,WAAA,CAAAM,GAAA,EAACrB,OAAA,CAAAuD,OAAM;gBACN6F,OAAO,EAAC,UAAU;gBAClBtE,OAAO,EAAGA,CAAA,KAAM;kBACfgD,iBAAiB,CAChB,IACD,CAAC;kBACDF,YAAY,CAAE,KAAM,CAAC;kBACrBzG,QAAQ,CAAC,CAAC;kBACV2B,OAAO,CAAC,CAAC;gBACV,CAAG;gBACHM,SAAS,EAAC,sCAAsC;gBAAAI,QAAA,EAE9Cd,UAAU,GACT,IAAAF,QAAE,EACF,sBACA,CAAC,GACD,IAAAA,QAAE,EACF,mBACA;cAAC,CACG,CACR,EACCkF,QAAQ,iBACT,IAAA3G,WAAA,CAAAM,GAAA,EAACrB,OAAA,CAAAuD,OAAM;gBACN6F,OAAO,EAAC,UAAU;gBAClBtE,OAAO,EAAGA,CAAA,KAAM;kBACfgD,iBAAiB,CAChB,IACD,CAAC;kBACD3G,QAAQ,CAAC,CAAC;kBACV2B,OAAO,CAAC,CAAC;gBACV,CAAG;gBAAAU,QAAA,EAEDd,UAAU,GACT,IAAAF,QAAE,EAAE,gBAAiB,CAAC,GACtB,IAAAA,QAAE,EAAE,cAAe;cAAC,CAChB,CACR;YAAA,CACa;UAAC,CACf;QACF,CACY,CACd;MAAA,CACsB,CAAC;IAAA,CACnB,CAAC,EACPyF,WAAW,iBACZ,IAAAlH,WAAA,CAAAuC,IAAA,EAAC5C,OAAA,CAAA2I,mBAAmB;MAAA7F,QAAA,GACjBmE,SAAS,iBACV,IAAA5G,WAAA,CAAAM,GAAA,EAACwE,mBAAmB;QACnB5B,mBAAmB,EAAGA,mBAAqB;QAC3CxC,QAAQ,EAAGA;QACX;QAAA;QACAN,QAAQ,EAAGA,QAAU;QACrBO,UAAU,EAAGA,UAAY;QACzBgB,UAAU,EAAGA,UAAY;QACzBE,YAAY,EAAGA,YAAc;QAC7BkD,WAAW,EAAGA;MAAa,CAC3B,CACD,EACC,CAAE6B,SAAS,IAAIE,cAAc,KAAK,IAAI,iBACvC,IAAA9G,WAAA,CAAAM,GAAA,EAACoB,kBAAkB;QAClBC,UAAU,EAAGA,UAAY;QACzBI,OAAO,EAAGA,CAAA,KAAMgF,iBAAiB,CAAE,IAAK,CAAG;QAC3C3G,QAAQ,EACPwF,UAAyC,IACrC;UACJR,gBAAgB;UACf;UACA1E,QAAQ,CAACgF,GAAG,CACX,CACCG,cAA6C,EAC7CC,YAAoB,KAChB;YACJ,IACCA,YAAY,KAAKgB,cAAc,EAC9B;cACD,OAAOlB,UAAU;YAClB;YACA,OAAOC,cAAc;UACtB,CACD,CACD,CAAC;QACF,CAAG;QACHjE,OAAO,EAAGlB,QAAQ,CAAEoG,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,CAAC,CAAC,CAAI;QAC5CjF,YAAY,EAAGA;MAAc,CAC7B,CACD,EACC,CAAE+E,SAAS,KACVjF,UAAU,gBACX,IAAA3B,WAAA,CAAAM,GAAA,EAACf,eAAA,CAAAiD,OAAc;QACd8D,SAAS,EAAGA,SAAW;QACvBlG,QAAQ,EAAG+G,mBAAqB;QAChCoB,SAAS,EAAG,KAAO;QACnBC,sBAAsB;MAAA,CACtB,CAAC,gBAEF,IAAAxI,WAAA,CAAAM,GAAA,EAACd,aAAA,CAAAgD,OAAY;QACZ+D,MAAM,EAAGA,MAAQ;QACjBnG,QAAQ,EAAG+G,mBAAqB;QAChCoB,SAAS,EAAG,KAAO;QACnBE,mBAAmB;MAAA,CACnB,CACD,CAAE;IAAA,CACgB,CACrB,EACC,CAAEvB,WAAW,IAAIR,YAAY,iBAC9B,IAAA1G,WAAA,CAAAM,GAAA,EAACX,OAAA,CAAA2I,mBAAmB;MAAA7F,QAAA,EAAGiE;IAAY,CAAuB,CAC1D;EAAA,CACiB,CAAC;AAEtB;AAAC,IAAAgC,QAAA,GAAAC,OAAA,CAAAnG,OAAA,GAEc6D,WAAW","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_i18n","_icons","_compose","_button","_colorPicker","_flex","_hStack","_itemGroup","_vStack","_gradientPicker","_colorPalette","_dropdownMenu","_popover","_styles","_navigableContainer","_constants","_customGradientPicker","_strings","_jsxRuntime","DEFAULT_COLOR","NameInput","value","onChange","label","jsx","NameInputControl","hideLabelFromVision","deduplicateElementSlugs","elements","slugCounts","map","element","_newSlug","newSlug","slug","getNameAndSlugForPosition","slugPrefix","nameRegex","RegExp","position","reduce","previousValue","currentValue","matches","match","id","parseInt","name","sprintf","__","ColorPickerPopover","isGradient","popoverProps","receivedPopoverProps","onClose","useMemo","shift","offset","resize","placement","className","clsx","jsxs","default","children","ColorPicker","color","enableAlpha","newColor","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","onRemove","isEditingColor","setIsEditingColor","useState","popoverAnchor","setPopoverAnchor","anchor","PaletteItem","ref","as","HStack","justify","onClick","trim","length","style","padding","IndicatorStyled","colorValue","FlexItem","nextName","kebabCase","NameContainer","RemoveButton","size","icon","lineSolid","PaletteEditListView","addColorRef","elementsReferenceRef","useRef","useEffect","current","debounceOnChange","useDebounce","updatedElements","VStack","spacing","ItemGroup","isRounded","index","newElement","currentElement","currentIndex","newElements","filter","_currentElement","undefined","focus","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","isEditing","setIsEditing","editingElement","setEditingElement","isAdding","elementsLength","hasElements","onSelectPaletteItem","useCallback","newEditingElementIndex","selectedElement","key","PaletteEditStyles","PaletteHeading","level","PaletteActionsContainer","DoneButton","isPressed","plus","DEFAULT_GRADIENT","moreVertical","toggleProps","Fragment","NavigableMenu","role","variant","PaletteEditContents","clearable","disableCustomGradients","disableCustomColors","_default","exports"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n\tPaletteEditContents,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { kebabCase } from '../utils/strings';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/\n * Deduplicates the slugs of the provided elements.\n /\nexport function deduplicateElementSlugs< T extends PaletteElement >(\n\telements: T[]\n) {\n\tconst slugCounts: { [ slug: string ]: number } = {};\n\n\treturn elements.map( ( element ) => {\n\t\tlet newSlug: string \| undefined;\n\n\t\tconst { slug } = element;\n\t\tslugCounts[ slug ] = ( slugCounts[ slug ] \|\| 0 ) + 1;\n\n\t\tif ( slugCounts[ slug ] > 1 ) {\n\t\t\tnewSlug = `${ slug }-${ slugCounts[ slug ] - 1 }`;\n\t\t}\n\n\t\treturn { ...element, slug: newSlug ?? slug };\n\t} );\n}\n\n/\n Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n \n @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n \n @return A name and slug for the new palette item.\n /\nexport function getNameAndSlugForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn {\n\t\tname: sprintf(\n\t\t\t/ translators: %s: is an id for a custom color /\n\t\t\t__( 'Color %s' ),\n\t\t\tposition\n\t\t),\n\t\tslug: `${ slugPrefix }color-${ position }`,\n\t};\n}\n\nfunction ColorPickerPopover< T extends PaletteElement >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: clsx(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends PaletteElement >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tonRemove,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst value = isGradient ? element.gradient : element.color;\n\tconst [ isEditingColor, setIsEditingColor ] = useState( false );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem ref={ setPopoverAnchor } as=\"div\">\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsEditingColor( true );\n\t\t\t\t\t} }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t__( 'Edit: %s' ),\n\t\t\t\t\t\telement.name.trim().length ? element.name : value\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ { padding: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<IndicatorStyled colorValue={ value } />\n\t\t\t\t</Button>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>\n\t\t\t\t\t\t\t{ element.name.trim().length\n\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t: / Fall back to non-breaking space to maintain height /\n\t\t\t\t\t\t\t\t '\\u00A0' }\n\t\t\t\t\t\t</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t\t\t__( 'Remove color: %s' ),\n\t\t\t\t\t\t\t\telement.name.trim().length\n\t\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t\t: value\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditingColor && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tonClose={ () => setIsEditingColor( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction PaletteEditListView< T extends PaletteElement >( {\n\telements,\n\tonChange,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n\taddColorRef,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReferenceRef = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReferenceRef.current = elements;\n\t}, [ elements ] );\n\n\tconst debounceOnChange = useDebounce(\n\t\t( updatedElements: T[] ) =>\n\t\t\tonChange( deduplicateElementSlugs( updatedElements ) ),\n\t\t100\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\taddColorRef.current?.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/\n Allows editing a palette of colors or gradients.\n \n ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n \n return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber \| null \| undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\tconst addColorRef = useRef< HTMLButtonElement \| null >( null );\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<HStack>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tref={ addColorRef }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst { name, slug } =\n\t\t\t\t\t\t\t\t\tgetNameAndSlugForPosition(\n\t\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing \|\|\n\t\t\t\t\t\t\t! canOnlyChangeValues \|\|\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</HStack>\n\t\t\t{ hasElements && (\n\t\t\t\t<PaletteEditContents>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\taddColorRef={ addColorRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</PaletteEditContents>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage && (\n\t\t\t\t<PaletteEditContents>{ emptyMessage }</PaletteEditContents>\n\t\t\t) }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":"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","ignoreList":[]}

package/build/toggle-group-control/toggle-group-control/as-radio-group.js CHANGED Viewed

@@ -63,13 +63,21 @@ function UnforwardedToggleGroupControlAsRadioGroup({
   });
   const selectedValue = (0, _react.useStoreState)(radio, 'value');
   const setValue = radio.setValue;
+  // Ensures that the active id is also reset after the value is "reset" by the consumer.
+  (0, _element.useEffect)(() => {
+    if (selectedValue === '') {
+      radio.setActiveId(undefined);
+    }
+  }, [radio, selectedValue]);
   const groupContextValue = (0, _element.useMemo)(() => ({
+    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),
     baseId,
     isBlock: !isAdaptiveWidth,
     size,
     value: selectedValue,
     setValue
-  }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
+  }), [baseId, isAdaptiveWidth, radio, size, selectedValue, setValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.default.Provider, {
     value: groupContextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.RadioGroup, {

package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","_interopRequireWildcard","require","Ariakit","_compose","_element","_i18n","_view","_context","_interopRequireDefault","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","isRTL","selectedValue","useStoreState","groupContextValue","useMemo","isBlock","jsx","Provider","RadioGroup","store","render","View","ref","exports","forwardRef"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp \|\| generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string \| number \| null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":";;;;;;;AAIA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA0C,IAAAC,OAAA,GAAAH,MAAA;AAM1C,IAAAI,QAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,QAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AAAkE,IAAAS,WAAA,GAAAT,OAAA;AAAA,SAAAU,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AApBlE;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;;AAUA,SAASW,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAG,IAAAC,sBAAa,EAChCC,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGN,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAEU;EAAa,CAAC,GAC5B,IAAAC,8CAAuC,EAAEV,SAAU,CAAC;;EAErD;EACA;EACA,MAAMW,mBAAmB,GAAGd,YAAY,GACnCe,CAAyB,IAAM;IACjCf,YAAY,CAAEe,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAGnD,OAAO,CAACoD,aAAa,CAAE;IACpCN,YAAY;IACZV,KAAK;IACLiB,QAAQ,EAAEL,mBAAmB;IAC7BM,GAAG,EAAE,IAAAC,WAAK,EAAC;EACZ,CAAE,CAAC;EAEH,MAAMC,aAAa,GAAG,IAAAC,oBAAa,EAAEN,KAAK,EAAE,OAAQ,CAAC;EACrD,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,~~MAAMK~~,iBAAiB,GAAG,IAAAC,gBAAO,EAChC,OACG;~~IACDd~~,MAAM;~~IACNe~~,OAAO,EAAE,~~CAAE7B~~,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEoB,aAAa;IACpBH;EACD,CAAC,CAAoC,EACtC,CAAER,MAAM,EAAEd,eAAe,~~EAAEI~~,IAAI,EAAEqB,aAAa,EAAEH,QAAQ,~~CACzD~~,CAAC;EAED,oBACC,IAAA7C,WAAA,~~CAAAqD~~,GAAA,~~EAACxD~~,QAAA,CAAAU,OAAyB,~~CAAC+C~~,QAAQ;~~IAAC1B~~,KAAK,~~EAAGsB~~,iBAAmB;~~IAAA5B~~,QAAA,eAC9D,IAAAtB,WAAA,~~CAAAqD~~,GAAA,~~EAAC7D~~,OAAO,~~CAAC+D~~,UAAU;MAClBC,KAAK,~~EAAGb~~,KAAO;MACf,cAAanB,KAAO;~~MACpBiC~~,MAAM,eAAG,~~IAAAzD~~,WAAA,~~CAAAqD~~,GAAA,~~EAACzD~~,KAAA,~~CAAA8D~~,IAAI,IAAE,CAAG;MAAA,~~GACd1B~~,UAAU;MACfF,EAAE,EAAGO,MAAQ;~~MACbsB~~,GAAG,~~EAAG1B~~,YAAc;MAAAX,QAAA,EAElBA;IAAQ,CACS;EAAC,CACc,CAAC;AAEvC;AAEO,MAAMc,8BAA8B,~~GAAAwB~~,OAAA,~~CAAAxB~~,8BAAA,GAAG,~~IAAAyB~~,mBAAU,~~EACvDxC~~,yCACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["_react","_interopRequireWildcard","require","Ariakit","_compose","_element","_i18n","_view","_context","_interopRequireDefault","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","rtl","isRTL","selectedValue","useStoreState","useEffect","setActiveId","groupContextValue","useMemo","activeItemIsNotFirstItem","getState","activeId","first","isBlock","jsx","Provider","RadioGroup","store","render","View","ref","exports","forwardRef"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/\n Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp \|\| generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string \| number \| null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst selectedValue = useStoreState( radio, 'value' );\n\tconst setValue = radio.setValue;\n\n\t// Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n\tuseEffect( () => {\n\t\tif ( selectedValue === '' ) {\n\t\t\tradio.setActiveId( undefined );\n\t\t}\n\t}, [ radio, selectedValue ] );\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tactiveItemIsNotFirstItem: () =>\n\t\t\t\t\tradio.getState().activeId !== radio.first(),\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, radio, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":"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","ignoreList":[]}

package/build/toggle-group-control/toggle-group-control-option-base/component.js CHANGED Viewed

@@ -72,7 +72,6 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     value,
     children,
     showTooltip = false,
-    onFocus: onFocusProp,
     disabled,
     ...otherButtonProps
   } = buttonProps;
@@ -107,7 +106,6 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
       children: isDeselectable ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         ...commonProps,
         disabled: disabled,
-        onFocus: onFocusProp,
         "aria-pressed": isPressed,
         type: "button",
         onClick: buttonOnClick,
@@ -116,16 +114,18 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
         })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.Radio, {
         disabled: disabled,
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          type: "button",
-          ...commonProps,
-          onFocus: event => {
-            onFocusProp?.(event);
-            if (event.defaultPrevented) {
-              return;
-            }
+        onFocusVisible: () => {
+          const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';
+          // Conditions ensure that the first visible focus to a radio group
+          // without a selected option will not automatically select the option.
+          if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {
             toggleGroupControlContext.setValue(value);
           }
+        },
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          ...commonProps
         }),
         value: value,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContentView, {

package/build/toggle-group-control/toggle-group-control-option-base/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_framerMotion","_compose","_element","_context","_context2","styles","_hooks","_tooltip","_interopRequireDefault","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ButtonContentView","LabelView","REDUCED_MOTION_TRANSITION_CONFIG","duration","LAYOUT_ID","WithToolTip","showTooltip","text","children","jsx","placement","Fragment","ToggleGroupControlOptionBase","props","forwardedRef","shouldReduceMotion","useReducedMotion","toggleGroupControlContext","useToggleGroupControlContext","id","useInstanceId","baseId","buttonProps","useContextSystem","isBlock","isDeselectable","size","className","isIcon","value","onFocus","onFocusProp","disabled","otherButtonProps","isPressed","cx","useCx","labelViewClasses","useMemo","labelBlock","itemClasses","buttonView","backdropClasses","backdropView","buttonOnClick","setValue","undefined","commonProps","ref","jsxs","type","onClick","Radio","render","event","defaultPrevented","motion","div","layout","layoutRoot","transition","role","layoutId","ConnectedToggleGroupControlOptionBase","contextConnect","_default","exports"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport as Ariakit from '@ariakit/react';\nimport { motion } from 'framer-motion';\n\n/*\n WordPress dependencies\n /\nimport { useReducedMotion, useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst REDUCED_MOTION_TRANSITION_CONFIG = {\n\tduration: 0,\n};\n\nconst LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } placement=\"top\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tToggleGroupControlOptionBaseProps,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t// the element's id is generated internally\n\t\t\| 'id'\n\t\t// due to how the component works, only the `disabled` prop should be used\n\t\t\| 'aria-disabled'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst shouldReduceMotion = useReducedMotion();\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId \|\| 'toggle-group-control-option-base'\n\t);\n\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t} = toggleGroupControlContext;\n\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\tonFocus: onFocusProp,\n\t\tdisabled,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = toggleGroupControlContext.value === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = useMemo(\n\t\t() => cx( isBlock && styles.labelBlock ),\n\t\t[ cx, isBlock ]\n\t);\n\tconst itemClasses = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.buttonView( {\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tisIcon,\n\t\t\t\t\tisPressed,\n\t\t\t\t\tsize,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ cx, isDeselectable, isIcon, isPressed, size, className ]\n\t);\n\tconst backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\ttoggleGroupControlContext.setValue( undefined );\n\t\t} else {\n\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: itemClasses,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tonFocus={ onFocusProp }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Ariakit.Radio\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\t\tonFocus={ ( event ) => {\n\t\t\t\t\t\t\t\t\tonFocusProp?.( event );\n\t\t\t\t\t\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Ariakit.Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t\t{ /* Animated backdrop using framer motion's shared layout animation / }\n\t\t\t{ isPressed ? (\n\t\t\t\t<motion.div layout layoutRoot>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName={ backdropClasses }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tshouldReduceMotion\n\t\t\t\t\t\t\t\t? REDUCED_MOTION_TRANSITION_CONFIG\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\tlayoutId={ LAYOUT_ID }\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\t\t\t) : null }\n\t\t</LabelView>\n\t);\n}\n\n/\n `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n \n @example\n * ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n \n function Example() {\n * return (\n * <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_framerMotion","_compose","_element","_context","_context2","styles","_hooks","_tooltip","_interopRequireDefault","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ButtonContentView","LabelView","REDUCED_MOTION_TRANSITION_CONFIG","duration","LAYOUT_ID","WithToolTip","showTooltip","text","children","jsx","placement","Fragment","ToggleGroupControlOptionBase","props","forwardedRef","shouldReduceMotion","useReducedMotion","toggleGroupControlContext","useToggleGroupControlContext","id","useInstanceId","baseId","buttonProps","useContextSystem","isBlock","isDeselectable","size","className","isIcon","value","disabled","otherButtonProps","isPressed","cx","useCx","labelViewClasses","useMemo","labelBlock","itemClasses","buttonView","backdropClasses","backdropView","buttonOnClick","setValue","undefined","commonProps","ref","jsxs","type","onClick","Radio","onFocusVisible","selectedValueIsEmpty","activeItemIsNotFirstItem","render","motion","div","layout","layoutRoot","transition","role","layoutId","ConnectedToggleGroupControlOptionBase","contextConnect","_default","exports"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport as Ariakit from '@ariakit/react';\nimport { motion } from 'framer-motion';\n\n/*\n WordPress dependencies\n /\nimport { useReducedMotion, useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst REDUCED_MOTION_TRANSITION_CONFIG = {\n\tduration: 0,\n};\n\nconst LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } placement=\"top\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tToggleGroupControlOptionBaseProps,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t// the element's id is generated internally\n\t\t\| 'id'\n\t\t// due to how the component works, only the `disabled` prop should be used\n\t\t\| 'aria-disabled'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst shouldReduceMotion = useReducedMotion();\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId \|\| 'toggle-group-control-option-base'\n\t);\n\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t} = toggleGroupControlContext;\n\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\tdisabled,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = toggleGroupControlContext.value === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = useMemo(\n\t\t() => cx( isBlock && styles.labelBlock ),\n\t\t[ cx, isBlock ]\n\t);\n\tconst itemClasses = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.buttonView( {\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tisIcon,\n\t\t\t\t\tisPressed,\n\t\t\t\t\tsize,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ cx, isDeselectable, isIcon, isPressed, size, className ]\n\t);\n\tconst backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\ttoggleGroupControlContext.setValue( undefined );\n\t\t} else {\n\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: itemClasses,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Ariakit.Radio\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tonFocusVisible={ () => {\n\t\t\t\t\t\t\tconst selectedValueIsEmpty =\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.value === null \|\|\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.value === '';\n\n\t\t\t\t\t\t\t// Conditions ensure that the first visible focus to a radio group\n\t\t\t\t\t\t\t// without a selected option will not automatically select the option.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t! selectedValueIsEmpty \|\|\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.activeItemIsNotFirstItem?.()\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trender={ <button type=\"button\" { ...commonProps } /> }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Ariakit.Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t\t{ /* Animated backdrop using framer motion's shared layout animation / }\n\t\t\t{ isPressed ? (\n\t\t\t\t<motion.div layout layoutRoot>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName={ backdropClasses }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tshouldReduceMotion\n\t\t\t\t\t\t\t\t? REDUCED_MOTION_TRANSITION_CONFIG\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\tlayoutId={ LAYOUT_ID }\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\t\t\t) : null }\n\t\t</LabelView>\n\t);\n}\n\n/\n `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n \n @example\n * ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n \n function Example() {\n * return (\n * <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"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","ignoreList":[]}

package/build/toggle-group-control/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/toggle-group-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ReactNode } from 'react';\n\n/\n Internal dependencies\n /\nimport type { BaseControlProps } from '../base-control/types';\nimport type { TooltipProps } from '../tooltip/types';\n\nexport type ToggleGroupControlOptionBaseProps = {\n\tchildren: ReactNode;\n\t/\n\t Style the option as an icon option.\n\t \n\t @default false\n\t /\n\tisIcon?: boolean;\n\tvalue: string \| number;\n\t/\n\t Whether to display a Tooltip for the control option. If set to `true`, the tooltip will\n\t * show the aria-label or the label prop text.\n\t \n\t @default false\n\t /\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlOptionIconProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value'\n> & {\n\t/\n\t Icon displayed as the content of the option. Usually one of the icons from\n\t * the `@wordpress/icons` package, or a custom React `<svg>` icon.\n\t /\n\ticon: JSX.Element;\n\t/\n\t The text to accessibly label the icon option. Will also be shown in a tooltip.\n\t /\n\tlabel: string;\n};\n\nexport type ToggleGroupControlOptionProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value' \| 'showTooltip'\n> & {\n\t/\n\t Label for the option. If needed, the `aria-label` prop can be used in addition\n\t * to specify a different label for assistive technologies.\n\t /\n\tlabel: string;\n};\n\nexport type WithToolTipProps = {\n\t/\n\t React children\n\t /\n\tchildren: TooltipProps[ 'children' ];\n\t/\n\t Label for the Tooltip component.\n\t /\n\ttext?: string;\n\t/\n\t Whether to wrap the control option in a Tooltip component.\n\t \n\t @default false\n\t /\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlProps = Pick<\n\tBaseControlProps,\n\t'help' \| '__nextHasNoMarginBottom'\n> & {\n\t/\n\t Label for the control.\n\t /\n\tlabel: string;\n\t/\n\t If true, the label will only be visible to screen readers.\n\t \n\t @default false\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t Determines if segments should be rendered with equal widths.\n\t \n\t @default false\n\t /\n\tisAdaptiveWidth?: boolean;\n\t/\n\t Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of\n\t * the available space. This is the recommended style when the options are text-based and not icons.\n\t \n\t @default false\n\t /\n\tisBlock?: boolean;\n\t/\n\t Whether an option can be deselected by clicking it again.\n\t \n\t @default false\n\t /\n\tisDeselectable?: boolean;\n\t/\n\t Callback when a segment is selected.\n\t /\n\tonChange?: ( value: string \| number \| undefined ) => void;\n\t/\n\t The selected value.\n\t /\n\tvalue?: string \| number;\n\t/\n\t The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or\n\t * `ToggleGroupControlOptionIcon` components.\n\t /\n\tchildren: ReactNode;\n\t/\n\t The size variant of the control.\n\t \n\t @default 'default'\n\t /\n\tsize?: 'default' \| '__unstable-large';\n\t/\n\t Start opting into the larger default height that will become the default size in a future version.\n\t \n\t @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type ToggleGroupControlContextProps = {\n\tisDeselectable?: boolean;\n\tbaseId: string;\n\tisBlock: ToggleGroupControlProps[ 'isBlock' ];\n\tsize: ToggleGroupControlProps[ 'size' ];\n\tvalue: ToggleGroupControlProps[ 'value' ];\n\tsetValue: ( newValue: string \| number \| undefined ) => void;\n};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' \| 'isAdaptiveWidth' \| 'label' \| 'size' \| 'onChange' \| 'value'\n>;\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/toggle-group-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ReactNode } from 'react';\n\n/\n Internal dependencies\n /\nimport type { BaseControlProps } from '../base-control/types';\nimport type { TooltipProps } from '../tooltip/types';\n\nexport type ToggleGroupControlOptionBaseProps = {\n\tchildren: ReactNode;\n\t/\n\t Style the option as an icon option.\n\t \n\t @default false\n\t /\n\tisIcon?: boolean;\n\tvalue: string \| number;\n\t/\n\t Whether to display a Tooltip for the control option. If set to `true`, the tooltip will\n\t * show the aria-label or the label prop text.\n\t \n\t @default false\n\t /\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlOptionIconProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value'\n> & {\n\t/\n\t Icon displayed as the content of the option. Usually one of the icons from\n\t * the `@wordpress/icons` package, or a custom React `<svg>` icon.\n\t /\n\ticon: JSX.Element;\n\t/\n\t The text to accessibly label the icon option. Will also be shown in a tooltip.\n\t /\n\tlabel: string;\n};\n\nexport type ToggleGroupControlOptionProps = Pick<\n\tToggleGroupControlOptionBaseProps,\n\t'value' \| 'showTooltip'\n> & {\n\t/\n\t Label for the option. If needed, the `aria-label` prop can be used in addition\n\t * to specify a different label for assistive technologies.\n\t /\n\tlabel: string;\n};\n\nexport type WithToolTipProps = {\n\t/\n\t React children\n\t /\n\tchildren: TooltipProps[ 'children' ];\n\t/\n\t Label for the Tooltip component.\n\t /\n\ttext?: string;\n\t/\n\t Whether to wrap the control option in a Tooltip component.\n\t \n\t @default false\n\t /\n\tshowTooltip?: boolean;\n};\n\nexport type ToggleGroupControlProps = Pick<\n\tBaseControlProps,\n\t'help' \| '__nextHasNoMarginBottom'\n> & {\n\t/\n\t Label for the control.\n\t /\n\tlabel: string;\n\t/\n\t If true, the label will only be visible to screen readers.\n\t \n\t @default false\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t Determines if segments should be rendered with equal widths.\n\t \n\t @default false\n\t /\n\tisAdaptiveWidth?: boolean;\n\t/\n\t Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of\n\t * the available space. This is the recommended style when the options are text-based and not icons.\n\t \n\t @default false\n\t /\n\tisBlock?: boolean;\n\t/\n\t Whether an option can be deselected by clicking it again.\n\t \n\t @default false\n\t /\n\tisDeselectable?: boolean;\n\t/\n\t Callback when a segment is selected.\n\t /\n\tonChange?: ( value: string \| number \| undefined ) => void;\n\t/\n\t The selected value.\n\t /\n\tvalue?: string \| number;\n\t/\n\t The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or\n\t * `ToggleGroupControlOptionIcon` components.\n\t /\n\tchildren: ReactNode;\n\t/\n\t The size variant of the control.\n\t \n\t @default 'default'\n\t /\n\tsize?: 'default' \| '__unstable-large';\n\t/\n\t Start opting into the larger default height that will become the default size in a future version.\n\t \n\t @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type ToggleGroupControlContextProps = {\n\tactiveItemIsNotFirstItem?: () => boolean;\n\tisDeselectable?: boolean;\n\tbaseId: string;\n\tisBlock: ToggleGroupControlProps[ 'isBlock' ];\n\tsize: ToggleGroupControlProps[ 'size' ];\n\tvalue: ToggleGroupControlProps[ 'value' ];\n\tsetValue: ( newValue: string \| number \| undefined ) => void;\n};\n\nexport type ToggleGroupControlMainControlProps = Pick<\n\tToggleGroupControlProps,\n\t'children' \| 'isAdaptiveWidth' \| 'label' \| 'size' \| 'onChange' \| 'value'\n>;\n"],"mappings":"","ignoreList":[]}

package/build/tooltip/index.js CHANGED Viewed

@@ -95,9 +95,13 @@ function UnforwardedTooltip(props, ref) {
   // TODO: this is a temporary workaround to minimize the effects of the
   // Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to
   // the tooltip anchor anymore since 0.4.0, so we need to add it manually.
+  // The `aria-describedby` attribute is added only if the anchor doesn't have
+  // one already, and if the tooltip text is not the same as the anchor's
+  // `aria-label`
   // See: https://github.com/WordPress/gutenberg/pull/64066
+  // See: https://github.com/WordPress/gutenberg/pull/65989
   function addDescribedById(element) {
-    return describedById && mounted ? (0, _element.cloneElement)(element, {
+    return describedById && mounted && element.props['aria-describedby'] === undefined && element.props['aria-label'] !== text ? (0, _element.cloneElement)(element, {
       'aria-describedby': describedById
     }) : element;
   }

package/build/tooltip/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","_interopRequireWildcard","require","Ariakit","_clsx","_interopRequireDefault","_compose","_element","_deprecated","_shortcut","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TooltipInternalContext","createContext","isNestedInTooltip","TOOLTIP_DELAY","exports","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","useContext","baseId","useInstanceId","Tooltip","describedById","undefined","isOnlyChild","Children","count","process","env","NODE_ENV","console","error","computedPlacement","positionToPlacement","deprecated","since","alternative","tooltipStore","useTooltipStore","showTimeout","mounted","useStoreState","jsx","Role","render","addDescribedById","element","cloneElement","jsxs","Provider","value","TooltipAnchor","onClick","hide","store","clsx","unmountOnHide","gutter","id","overflowPadding","forwardRef","_default"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\nimport clsx from 'clsx';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n\tcloneElement,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n /\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/\n Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text \|\| shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement \|\| 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\tconst mounted = useStoreState( tooltipStore, 'mounted' );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\t// TODO: this is a temporary workaround to minimize the effects of the\n\t// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n\t// the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n\t// See: https://github.com/WordPress/gutenberg/pull/64066\n\tfunction addDescribedById( element: React.ReactElement ) {\n\t\treturn describedById && ~~mounted~~\n\t\t\t? cloneElement( element, { 'aria-describedby': describedById } )\n\t\t\t: element;\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={\n\t\t\t\t\tisOnlyChild ? addDescribedById( children ) : undefined\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text \|\| shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName={ clsx( 'components-tooltip', className ) }\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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~~IAAIkB~~,OAAO,~~GAC5B~~,~~IAAAO~~,qBAAY,EAAED,OAAO,EAAE;MAAE,kBAAkB,EAAExB;IAAc,CAAE,CAAC,GAC9DwB,OAAO;EACX;EAEA,oBACC,IAAAnE,WAAA,CAAAqE,IAAA,EAAChD,sBAAsB,CAACiD,QAAQ;IAACC,KAAK,EAAG7C,aAAe;IAAAI,QAAA,gBACvD,IAAA9B,WAAA,CAAA+D,GAAA,EAACvE,OAAO,CAACgF,aAAa;MACrBC,OAAO,EAAGxC,WAAW,GAAGyB,YAAY,CAACgB,IAAI,GAAG9B,SAAW;MACvD+B,KAAK,EAAGjB,YAAc;MACtBO,MAAM,EACLpB,WAAW,GAAGqB,gBAAgB,CAAEpC,QAAS,CAAC,GAAGc,SAC7C;MACDf,GAAG,EAAGA,GAAK;MAAAC,QAAA,EAETe,WAAW,GAAGD,SAAS,GAAGd;IAAQ,CACd,CAAC,EACtBe,WAAW,KAAMR,IAAI,IAAID,QAAQ,CAAE,iBACpC,IAAApC,WAAA,CAAAqE,IAAA,EAAC7E,OAAO,CAACkD,OAAO;MAAA,GACVJ,SAAS;MACdP,SAAS,EAAG,IAAA6C,aAAI,EAAE,oBAAoB,EAAE7C,SAAU,CAAG;MACrD8C,aAAa;MACbC,MAAM,EAAG,CAAG;MACZC,EAAE,EAAGpC,aAAe;MACpBqC,eAAe,EAAG,GAAK;MACvBL,KAAK,EAAGjB,YAAc;MAAA5B,QAAA,GAEpBO,IAAI,EACJD,QAAQ,iBACT,IAAApC,WAAA,CAAA+D,GAAA,EAACjE,SAAA,CAAAS,OAAQ;QACRwB,SAAS,EACRM,IAAI,GAAG,8BAA8B,GAAG,EACxC;QACDD,QAAQ,EAAGA;MAAU,CACrB,CACD;IAAA,CACe,CACjB;EAAA,CAC+B,CAAC;AAEpC;AACO,MAAMM,OAAO,GAAAjB,OAAA,CAAAiB,OAAA,GAAG,IAAAuC,mBAAU,EAAEtD,kBAAmB,CAAC;AAAC,IAAAuD,QAAA,GAAAzD,OAAA,CAAAlB,OAAA,GAEzCmC,OAAO","ignoreList":[]}
1	+ {"version":3,"names":["_react","_interopRequireWildcard","require","Ariakit","_clsx","_interopRequireDefault","_compose","_element","_deprecated","_shortcut","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TooltipInternalContext","createContext","isNestedInTooltip","TOOLTIP_DELAY","exports","CONTEXT_VALUE","UnforwardedTooltip","props","ref","children","className","delay","hideOnClick","placement","position","shortcut","text","restProps","useContext","baseId","useInstanceId","Tooltip","describedById","undefined","isOnlyChild","Children","count","process","env","NODE_ENV","console","error","computedPlacement","positionToPlacement","deprecated","since","alternative","tooltipStore","useTooltipStore","showTimeout","mounted","useStoreState","jsx","Role","render","addDescribedById","element","cloneElement","jsxs","Provider","value","TooltipAnchor","onClick","hide","store","clsx","unmountOnHide","gutter","id","overflowPadding","forwardRef","_default"],"sources":["@wordpress/components/src/tooltip/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport as Ariakit from '@ariakit/react';\nimport { useStoreState } from '@ariakit/react';\nimport clsx from 'clsx';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tChildren,\n\tuseContext,\n\tcreateContext,\n\tforwardRef,\n\tcloneElement,\n} from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/\n Internal dependencies\n /\nimport type {\n\tTooltipProps,\n\tTooltipInternalContext as TooltipInternalContextType,\n} from './types';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\n\nconst TooltipInternalContext = createContext< TooltipInternalContextType >( {\n\tisNestedInTooltip: false,\n} );\n\n/\n Time over anchor to wait before showing tooltip\n */\nexport const TOOLTIP_DELAY = 700;\n\nconst CONTEXT_VALUE = {\n\tisNestedInTooltip: true,\n};\n\nfunction UnforwardedTooltip(\n\tprops: TooltipProps,\n\tref: React.ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tdelay = TOOLTIP_DELAY,\n\t\thideOnClick = true,\n\t\tplacement,\n\t\tposition,\n\t\tshortcut,\n\t\ttext,\n\n\t\t...restProps\n\t} = props;\n\n\tconst { isNestedInTooltip } = useContext( TooltipInternalContext );\n\n\tconst baseId = useInstanceId( Tooltip, 'tooltip' );\n\tconst describedById = text \|\| shortcut ? baseId : undefined;\n\n\tconst isOnlyChild = Children.count( children ) === 1;\n\t// console error if more than one child element is added\n\tif ( ! isOnlyChild ) {\n\t\tif ( 'development' === process.env.NODE_ENV ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.error(\n\t\t\t\t'wp-components.Tooltip should be called with only a single child element.'\n\t\t\t);\n\t\t}\n\t}\n\n\t// Compute tooltip's placement:\n\t// - give priority to `placement` prop, if defined\n\t// - otherwise, compute it from the legacy `position` prop (if defined)\n\t// - finally, fallback to the default placement: 'bottom'\n\tlet computedPlacement;\n\tif ( placement !== undefined ) {\n\t\tcomputedPlacement = placement;\n\t} else if ( position !== undefined ) {\n\t\tcomputedPlacement = positionToPlacement( position );\n\t\tdeprecated( '`position` prop in wp.components.tooltip', {\n\t\t\tsince: '6.4',\n\t\t\talternative: '`placement` prop',\n\t\t} );\n\t}\n\tcomputedPlacement = computedPlacement \|\| 'bottom';\n\n\tconst tooltipStore = Ariakit.useTooltipStore( {\n\t\tplacement: computedPlacement,\n\t\tshowTimeout: delay,\n\t} );\n\tconst mounted = useStoreState( tooltipStore, 'mounted' );\n\n\tif ( isNestedInTooltip ) {\n\t\treturn isOnlyChild ? (\n\t\t\t<Ariakit.Role { ...restProps } render={ children } />\n\t\t) : (\n\t\t\tchildren\n\t\t);\n\t}\n\n\t// TODO: this is a temporary workaround to minimize the effects of the\n\t// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n\t// the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n\t// The `aria-describedby` attribute is added only if the anchor doesn't have\n\t// one already, and if the tooltip text is not the same as the anchor's\n\t// `aria-label`\n\t// See: https://github.com/WordPress/gutenberg/pull/64066\n\t// See: https://github.com/WordPress/gutenberg/pull/65989\n\tfunction addDescribedById( element: React.ReactElement ) {\n\t\treturn describedById &&\n\t\t\tmounted &&\n\t\t\telement.props[ 'aria-describedby' ] === undefined &&\n\t\t\telement.props[ 'aria-label' ] !== text\n\t\t\t? cloneElement( element, { 'aria-describedby': describedById } )\n\t\t\t: element;\n\t}\n\n\treturn (\n\t\t<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>\n\t\t\t<Ariakit.TooltipAnchor\n\t\t\t\tonClick={ hideOnClick ? tooltipStore.hide : undefined }\n\t\t\t\tstore={ tooltipStore }\n\t\t\t\trender={\n\t\t\t\t\tisOnlyChild ? addDescribedById( children ) : undefined\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t{ isOnlyChild ? undefined : children }\n\t\t\t</Ariakit.TooltipAnchor>\n\t\t\t{ isOnlyChild && ( text \|\| shortcut ) && (\n\t\t\t\t<Ariakit.Tooltip\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t\tclassName={ clsx( 'components-tooltip', className ) }\n\t\t\t\t\tunmountOnHide\n\t\t\t\t\tgutter={ 4 }\n\t\t\t\t\tid={ describedById }\n\t\t\t\t\toverflowPadding={ 0.5 }\n\t\t\t\t\tstore={ tooltipStore }\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t\t{ shortcut && (\n\t\t\t\t\t\t<Shortcut\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\ttext ? 'components-tooltip__shortcut' : ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Ariakit.Tooltip>\n\t\t\t) }\n\t\t</TooltipInternalContext.Provider>\n\t);\n}\nexport const Tooltip = forwardRef( UnforwardedTooltip );\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}

package/build-module/drop-zone/index.js CHANGED Viewed

@@ -87,6 +87,7 @@ export function DropZoneComponent({
       setType(_type);
     },
     onDragEnd() {
+      setIsDraggingOverElement(false);
       setIsDraggingOverDocument(false);
       setType(undefined);
     },
@@ -99,8 +100,6 @@ export function DropZoneComponent({
   });
   const classes = clsx('components-drop-zone', className, {
     'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop),
-    'has-dragged-out': !isDraggingOverElement,
-    // Keeping the following classnames for legacy purposes
     'is-dragging-over-document': isDraggingOverDocument,
     'is-dragging-over-element': isDraggingOverElement,
     [`is-dragging-${type}`]: !!type